@font-face {
    font-family: 'secret_code';
    src: url('../plugins/font/Drugs.otf') format("truetype");
}

@font-face {
    font-family: 'geosansLight';
    src: url('../plugins/font/GeosansLight.ttf') format("truetype");
}

@font-face {
    font-family: 'RegencieLight';
    src: url('../plugins/font/RegencieLight.ttf') format("truetype");
}

.icon-span{
	background-color:#fff;
	border:1px solid #cccccc;
	padding:1px;
	margin-bottom:5px;
	display:inline-block;
}

.icon-span-lg{
	width:32px;
	height:23px;
}

.icon-span-4x{
	height:30px;
}

.btn-blueline{
	background-color:#cc0033;
	color:#fff;
}

.icon-chargement{
	font-size:50pt;
	color:#DDDDDD;
}

.titre-site{
	font-family: 'geosansLight',arial,sans-serif;
	font-size:45pt;
	color:#777777;
}

.sous-titre{
	font-family: Century Gothic, 'RegencieLight',arial,sans-serif;
	font-size:12pt;
	color:#555555;
}

.icon-titre{
	font-size:80pt;
	color:#DDDDDD;
}

.icon-titre-alert{
	font-size:80pt;
	color:#EEC4C4;
}


/* ============================================
   RESPONSIVE — Tablette (max 992px)
   ============================================ */
@media (max-width: 992px) {

	.titre-site {
		font-size: 32pt;
	}

	.sous-titre {
		font-size: 11pt;
	}

	.icon-titre,
	.icon-titre-alert {
		font-size: 60pt;
	}

	.icon-chargement {
		font-size: 38pt;
	}

	.icon-span-lg {
		width: 28px;
		height: 20px;
	}
}


/* ============================================
   RESPONSIVE — Mobile (max 768px)
   ============================================ */
@media (max-width: 768px) {

	.titre-site {
		font-size: 22pt;
		word-break: break-word;
	}

	.sous-titre {
		font-size: 10pt;
	}

	.icon-titre,
	.icon-titre-alert {
		font-size: 45pt;
	}

	.icon-chargement {
		font-size: 30pt;
	}

	.icon-span-lg {
		width: 24px;
		height: 18px;
	}

	.icon-span-4x {
		height: 24px;
	}

	.btn-blueline {
		width: 100%;
		display: block;
		text-align: center;
		padding: 10px;
	}
}


/* ============================================
   RESPONSIVE — Petit mobile (max 480px)
   ============================================ */
@media (max-width: 480px) {

	.titre-site {
		font-size: 17pt;
	}

	.sous-titre {
		font-size: 9pt;
	}

	.icon-titre,
	.icon-titre-alert {
		font-size: 35pt;
	}

	.icon-chargement {
		font-size: 24pt;
	}

	.icon-span {
		padding: 1px;
		margin-bottom: 3px;
	}

	.icon-span-lg {
		width: 20px;
		height: 16px;
	}

	.icon-span-4x {
		height: 20px;
	}
}