html,body{background:#FFFFFF}
:root{
--bg:#FFFFFF; --bg-alt:#FAF6EF; --ink:#13243B; --ink-soft:#536479;
--brand:#0E5BB0; --brand-700:#0A4585; --brand-900:#0B2540;
--accent:#E8892F; --accent-700:#C26516; --border:#D9E1EB; --line:#E7ECF3;
--sand:#F5EFE5; --sand-border:#ECE3D4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{margin:0; background:var(--bg); color:var(--ink);
font-family:'Inter',system-ui,sans-serif; font-weight:400;
-webkit-font-smoothing:antialiased; line-height:1.65;}
img{display:block; max-width:100%}
a{color:inherit}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
/* Polices : titres en Poppins, texte en Inter (le design utilisait Syne/Hanken Grotesk en inline) */
h1,h2,h3,h4,[style*="Syne"]{font-family:'Poppins',sans-serif !important}
[style*="Hanken Grotesk"]{font-family:'Inter',sans-serif !important}
/* Elargir le contenu : le design Claude bride les conteneurs a 1280px et les paragraphes a Nch (override des max-width inline) */
[style*="max-width:1280px"]{max-width:1600px !important}
[style*="max-width:980px"]{max-width:1280px !important}
[style*="max-width:52ch"],[style*="max-width:60ch"],[style*="max-width:65ch"]{max-width:none !important}
/* Services : fond de SECTION beige sable clair, BOX en blanc, texte fonce ; icones decoratives retirees */
#services{background:var(--sand) !important}
#services article svg[width="26"]{display:none !important}
#services article{background:#fff !important; border-color:var(--border) !important}
/* FAQ */
details > summary{list-style:none; cursor:pointer; outline:none!important; border:0!important;}
details > summary::-webkit-details-marker{display:none}
details > summary:focus,details > summary:focus-visible{outline:none!important}
.faq-icon{transition:transform .25s ease}
details[open] .faq-icon{transform:rotate(45deg)}
details[open] .faq-q{color:var(--brand)}
/* Nav responsive (breakpoint behavior can't be inline) */
.nav-burger{display:none}
.nav-mobile{display:none}
#nav-toggle{display:none}
@media(max-width:980px){
.nav-desktop,.header-cta{display:none!important}
.nav-burger{display:flex!important}
#nav-toggle:checked ~ .nav-mobile{display:flex!important}
}
/* Mobile / tablette : dans les sections 2 colonnes image+texte, l'IMAGE passe toujours AU-DESSUS du texte
   (on force 1 colonne puis on remonte le bloc qui contient une image en premier via :has()) */
@media(max-width:900px){
main > section:first-child > div,
#services article,
#pourquoi > div,
#processus > div,
#marques > div,
#zone > div{grid-template-columns:1fr !important}
main > section:first-child > div > div:has(img),
#services article > div:has(img),
#pourquoi > div > div:has(img),
#processus > div > div:has(img),
#marques > div > div:has(img),
#zone > div > div:has(img){order:-1 !important}
}
/* Formulaire de contact */
.ecc-field{display:flex; flex-direction:column; gap:6px}
.ecc-field label{font-size:13px; font-weight:600; letter-spacing:.04em; color:#C2D4E6}
.ecc-field input,.ecc-field select,.ecc-field textarea{font-family:'Inter',sans-serif; font-size:15px; padding:13px 15px; border:1px solid rgba(255,255,255,.18); background:#fff; color:var(--ink); width:100%}
.ecc-field textarea{resize:vertical; min-height:120px}
.ecc-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}