/* ===============================
   Propreté 29 – Maintenance CSS
   Fond 100% blanc + responsive
   =============================== */

/* --- Variables (couleurs) --- */
:root {
	--white: #ffffff;
	--blue:  #1E3A8A;  /* bleu logo */
	--green: #10B981;  /* vert logo */
	--text:  #374151;  /* gris foncé */
	--muted: #6b7280;  /* gris moyen */
}

/* --- Reset / base --- */
:before,:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
* { margin: 0; padding: 0; border: 0; outline: none }
[class*="fi-"] { display: inline; width: auto; height: auto; line-height: inherit; vertical-align: baseline; background: none }
[class*="fi-"]:before { font-weight: 400; font-style: normal; text-decoration: inherit }

html { height: 100%; left: 0 }
body {
	height: 100%;
	box-sizing: border-box;
	min-height: 100%;
	min-width: 100%;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--white) !important; /* fond blanc global */
	color: var(--blue);
	font-family: "Segoe UI", Arial, sans-serif;
}

/* Préloader sur fond blanc */
.preloader { background-color: var(--white) !important }

/* Autofill */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px #f0f0f0 inset; -webkit-text-fill-color: #222 }
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #e5e5e5 inset; -webkit-text-fill-color: #222 }

/* Wrapper */
body > #wrapper { height: 100%; min-height: 100%; width: 100%; display: inline-block }

/* Conteneur principal */
body > .main-container {
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	transition: all .6s ease-in-out;
	z-index: 0;
	overflow: hidden;
	position: initial !important;
	overflow-y: auto;
}

/* Supprime le voile sombre du plugin */
body > .main-container:after {
	content: "";
	display: block;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: var(--white) !important;
	opacity: 1 !important;
	z-index: -1;
	position: absolute;
}

/* Panneau login latéral (garde visible mais clair) */
body > .login-form-container {
	background: rgba(255,255,255,0.95);
	display: none;
	height: 100%;
	min-height: 100%;
	min-width: 308px; max-width: 308px; width: 100%;
	position: fixed; right: -308px; top: 0;
	z-index: 999;
	transition: all .6s ease-in-out;
	outline: 1px solid transparent;
}
body.open-login-form > .login-form-container { right: 0 }
body.open-login-form > .main-container {
	-webkit-perspective: 1000px; perspective: 1000px;
	transform-origin: 0 50%;
	transform: perspective(1920px) rotate3d(0,1,0,9deg);
	backface-visibility: hidden;
	overflow: hidden;
}

/* Bouton d’ouverture du login */
.btn-open-login-form {
	background: rgba(0,0,0,0.05);
	font-size: 36px;
	left: -54px; width:54px;
	padding: 6px 0;
	position: absolute; display: inline-block; top: 23%;
	border-top-left-radius: 4px; border-bottom-left-radius: 4px;
	cursor: pointer; text-align: center;
}
#btn-sound { margin-top: 60px; display: none }
body.error .btn-open-login-form { color: red }
.btn-open-login-form i:before, .btn-open-login-form.sound i { transition: all 0.3s linear }
.btn-open-login-form:hover i:before, .btn-open-login-form.sound:hover i {
	transform: scale(1.05); opacity: .8;
}

/* Centrage */
.center { display: block; margin: 0 auto; max-width: 1020px; width: 100%; padding: 0 10px; box-sizing: border-box; text-align: center }
.logotype { max-width: 100% }
#wrapper { width: 100%; height: calc(100% - 90px); position: relative; display: inline-block }
header { position: relative; display: inline-block; width: 100% }

/* Contenu – corrige l’inline style de #content (top:445px) */
#content.site-content {
	position: relative !important;
	top: auto !important; left: auto !important; right: auto !important;
	transform: none !important;
}

/* Texte */
.site-content {
	position: relative; display: inline-block; width: 100%;
	left: 0; top: 0; color: var(--blue) !important;
}
.site-content .font-center { text-align: center }
.site-content h2, .site-content h3 { width: 100%; display: block }

/* Titres fluides */
.site-content h2.heading {
	font-weight: 600;
	color: var(--green) !important;
	/* taille fluide : min 28px, préférée 4vw, max 45px */
	font-size: clamp(28px, 4vw, 45px);
	margin-bottom: 10px;
}
.site-content .description h3 {
	font-weight: 400; text-align: center;
	color: var(--text) !important;
	font-size: clamp(18px, 2.5vw, 28px);
}
.site-content .description p,
.site-content p {
	font-size: 16px; line-height: 24px; margin: 0 0 15px;
	color: var(--text) !important;
}

/* Footer */
footer {
	position: relative; top: 0; display: inline-block; width: 100%;
	color: var(--text) !important; margin: 25px 0 20px; text-align: center;
}
footer .center { padding: 0 }
.company-name {
	display: block; font-weight: 700; color: var(--text) !important;
	font-size: 16px; text-align: center; margin: 20px 0;
}

/* Logo */
.logo, .logo-retina { margin-left: auto; margin-right: auto; display: block; text-decoration: none; font-weight: 400 }
.logo-box { padding: 50px 0 30px }
.logo-box img { max-width: 100%; width: clamp(160px, 28vw, 260px); height: auto }

/* Variante texte site */
.logo.istext { max-width: 100%; padding: 30px 60px }
.site-title { font-weight: 300; text-align: center; padding: 0 0 20px; vertical-align: middle; color: var(--blue) !important }

/* Formulaire */
.login-form {
	display: inline-block; margin: 25px 0 0; padding: 20px;
	opacity: .5; transition: opacity .3s ease-in-out;
}
.login-form:hover { opacity: 1 }
.login-form input[type="text"], .login-form input[type="password"] {
	color: #1F2937; background-color: rgba(113,113,113,0.1);
	background-position: 14px center; background-repeat: no-repeat;
	float: left; font-size: 20px; font-weight: 400;
	margin: 0 0 10px; padding: 5px 16px 5px 40px; width: 100%; line-height: 28px; outline: none; max-width: 210px;
}
.ie8 .login-form input[type="text"], .ie8 .login-form input[type="password"],
.ie7 .login-form input[type="text"], .ie7 .login-form input[type="password"] { background-color: #f3f4f6 }
.login-form .licon, .login-form .picon { position: relative; display: inline-block }
.login-form .licon:before, .login-form .picon:before {
	position: absolute; font-weight: 400; font-style: normal; font-size: 24px; color: var(--blue); display: inline-block; top: 7px; left: 12px;
}
.login-form .licon:before { content: "\f1fe"; font-family: "foundation-icons" }
.login-form .picon:before { content: "\f16a"; font-family: "foundation-icons" }
.login-form .licon.error:before, .login-form .picon.error:before { content: "\f217"; font-family: "foundation-icons"; color: red }
.login-form a.lost-pass { float: left; display: inline-block; text-decoration: none; color: var(--blue) }
.login-form a.lost-pass:hover { text-decoration: underline }
.login-form label { color: var(--blue); float: left; font-size: 25px; padding: 0 0 10px; width: 100% }

.login-form input[type="submit"],
input[type="submit"] {
	color: var(--blue); font-size: 20px; background: none; cursor: pointer;
	border: 2px solid var(--blue); font-weight: 700; margin: 10px 0 0; padding: 5px 10px; text-align: center;
	transition: all .3s linear;
}
input[type="submit"]:hover { background-color: rgba(16,185,129,.12); color: var(--green) }

/* Preloader icône */
.preloader { display: block; height: 100%; position: absolute; width: 100%; z-index: 99999991 }
.preloader i, .preloader img {
	font-size: 56px; background: transparent; display: inline-block;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	position: absolute; color: var(--blue);
	animation: spin 2200ms linear infinite;
}

/* Ancienne règle de texte blanc — neutralisée */
.site-title, .preloader i, .login-form, .login-form a.lost-pass, .btn-open-login-form, .site-content, .user-content-wrapper, .user-content, footer, .maintenance a {
	color: inherit !important;
}

/* Placeholders */
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
	font-size: 20px; color: var(--muted); font-family: inherit; opacity: 1
}

/* BG image (désactivée pour fond blanc absolu) */
.bg-img { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1; display: none !important }
.bg-img img, .bg-img source { position: absolute; visibility: hidden !important; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%) }

/* Outdated browser (inchangé) */
#outdated{
	position: fixed; top: 0; left: 0; width: 100%; padding: 10px 0;
	opacity: .7; text-align: center; text-transform: uppercase; z-index:1500;
	background-color: #f25648; color: #ffffff;
}
* html #outdated{position: absolute;}
#outdated h6{font-size: 25px; line-height: 25px; margin: 30px 0 10px;}
#outdated p{font-size: 12px; line-height: 12px; margin: 0;}
#outdated #btnUpdateBrowser{
	display: block; position: relative; padding: 10px 20px; margin: 30px auto 0; width: 230px;
	color: #ffffff; text-decoration: none; border: 2px solid #ffffff; cursor: pointer;
}
#outdated #btnUpdateBrowser:hover{color: #f25648; background-color:#ffffff;}
#outdated .last{position: absolute; top: 10px; right: 25px; width: 20px; height: 20px;}
#outdated .last[dir='rtl']{right: auto !important; left: 25px !important;}
#outdated #btnCloseUpdateBrowser{
	display: block; position: relative; width: 100%; height: 100%;
	text-decoration: none; color: #ffffff; font-size: 36px; line-height: 36px;
}
@supports (transform: translate(0, 0)) { #outdated { display: none } }
@supports (-webkit-transform: translate(0, 0)) { #outdated { display: none } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #outdated { display: none } }

/* Animations */
@-ms-keyframes spin { from { -ms-transform: translate(-50%, -50%) rotate(0deg) } to { -ms-transform: translate(-50%, -50%) rotate(360deg) } }
@-moz-keyframes spin { from { -moz-transform: translate(-50%, -50%) rotate(0deg) } to { -moz-transform: translate(-50%, -50%) rotate(360deg) } }
@-webkit-keyframes spin { from { -webkit-transform: translate(-50%, -50%) rotate(0deg) } to { -webkit-transform: translate(-50%, -50%) rotate(360deg) } }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(360deg) } }

/* ===============================
   RESPONSiVE (vraiment complet)
   =============================== */

/* ≥1440px  (grands écrans) */
@media (min-width: 1440px) {
	.site-content h2.heading { font-size: 48px }
	.logo-box { padding: 60px 0 36px }
	.logo-box img { width: clamp(220px, 22vw, 300px) }
}

/* 1024–1439px (desktop standard) */
@media (max-width: 1439.98px) {
	.center { max-width: 1100px }
}

/* 768–1023px (tablettes) */
@media (max-width: 1023.98px) {
	.center { max-width: 1004px; padding: 0 16px }
	#wrapper { height: auto }
	.logo-box { padding: 40px 0 24px }
	.logo-box img { width: clamp(180px, 32vw, 240px) }
	.site-content h2.heading { font-size: clamp(26px, 4.2vw, 36px) }
	.site-content .description h3 { font-size: clamp(17px, 2.6vw, 22px) }
	/* autorise le scroll si contenu long */
	body { overflow: auto }
}

/* 480–767px (mobiles grands) */
@media (max-width: 767.98px) {
	.center { max-width: 92%; padding: 0 12px }
	.logo-box { padding: 32px 0 18px }
	.logo-box img { width: clamp(160px, 44vw, 220px) }
	.site-content h2.heading { margin-bottom: 8px }
	.btn-open-login-form { display: none } /* évite chevauchements */
	.login-form input[type="text"], .login-form input[type="password"] { max-width: 100% }
	footer { margin: 20px 0 16px }
}

/* ≤480px (mobiles petits) */
@media (max-width: 479.98px) {
	.center { max-width: 460px }
	.site-content h2.heading { font-size: clamp(24px, 6vw, 30px) }
	.site-content .description h3 { font-size: clamp(16px, 4.5vw, 18px) }
	.logo-box img { width: clamp(150px, 58vw, 200px) }
	body > .login-form-container {
		background: rgba(255,255,255,1);
		min-width: 290px; max-width: 290px; right: -293px;
	}
}

/* ≤360px (ultra petits) */
@media (max-width: 359.98px) {
	.center { max-width: 92% }
	.site-content h2.heading { font-size: 22px }
	.site-content .description h3 { font-size: 16px }
	.logo-box img { width: 150px }
	body > .login-form-container { min-width: 266px; max-width: 266px; right: -266px }
}

/* Hard overrides de sécurité (si le plugin réinjecte du sombre) */
html, body, body > .main-container, body > .main-container:after { background: var(--white) !important }
.site-content, .site-title, .user-content-wrapper, .user-content, footer, .maintenance a { color: var(--blue) !important }
.site-content p, .site-content .description h3, footer, .company-name { color: var(--text) !important }