/* =============================================================================
LES CONCEPTIONS O'SEPTIQUE — SITE PRINCIPAL
Feuille de styles
-----------------------------------------------------------------------------
Auteur : Balgio, Marketing Numérique
Palette : vert sapin (--ink), papier chaud (--paper), accent terracotta (--clay)
Polices : Bricolage Grotesque (titres) + Hanken Grotesk (texte) — via Google Fonts
(le se trouve dans le de index.html)
NOTE INTÉGRATION : aucune dépendance externe autre que Google Fonts.
Tout est en CSS natif, aucune compilation requise.
========================================================================== */
/* -----------------------------------------------------------------------------
1. VARIABLES DE MARQUE
Modifier ici pour ajuster toute l'identité visuelle d'un coup.
-------------------------------------------------------------------------- */
:root{
--ink:#182A20; /* vert sapin foncé — texte principal et fonds sombres */
--ink-soft:#4C5A52; /* texte secondaire */
--paper:#F3F0E7; /* fond papier chaud */
--paper-2:#EAE5D7; /* fond alterné (sections) */
--card:#FBFAF5; /* fond des cartes claires (formulaire) */
--line:#D9D3C4; /* filets / bordures */
--line-2:#C7C0AD;
--clay:#B6602A; /* accent terracotta — boutons d'action (CTA) */
--clay-d:#984E1E; /* accent foncé — survol */
--clay-lt:#E7A467; /* accent clair — sur fonds sombres */
--green:#3C6E4B; /* vert marque — labels, icônes */
--green-2:#5C8A66;
--white:#fff;
}
/* -----------------------------------------------------------------------------
2. BASE / RESET
-------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Accessibilité : on coupe les animations si l'utilisateur le demande */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.025em;color:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.shell{max-width:1320px;margin:0 auto;padding:0 32px}
.kick{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
/* -----------------------------------------------------------------------------
3. BOUTONS
.btn-clay = action principale (soumission) · .btn-ghost = secondaire
-------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Hanken Grotesk';font-weight:600;font-size:16px;padding:15px 26px;border-radius:4px;cursor:pointer;border:1.5px solid transparent;transition:background-color .22s,color .22s,border-color .22s;min-height:52px;touch-action:manipulation}
.btn svg{width:18px;height:18px}
.btn-clay{background:var(--clay-d);color:#fff}
.btn-clay:hover{background:#7E3F15}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ghost-lt{border-color:rgba(243,240,231,.5);color:var(--paper)}
.btn-ghost-lt:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.arrow{transition:transform .22s}.btn:hover .arrow{transform:translateX(4px)}
/* -----------------------------------------------------------------------------
4. CHAMPS DE FORMULAIRE (partagés)
-------------------------------------------------------------------------- */
.fld{display:flex;flex-direction:column;gap:7px}
.fld.full{grid-column:1/-1}
.fld label{font-size:13px;font-weight:600}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15.5px;padding:12px 14px;border:1.5px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);min-height:48px;transition:border-color .2s}
.fld textarea{min-height:88px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--green)}
/* -----------------------------------------------------------------------------
5. RUBAN + EN-TÊTE
-------------------------------------------------------------------------- */
.ribbon{background:var(--ink);color:#CBD6CD;font-size:13px}
.ribbon .shell{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px}
.ribbon b{color:#fff;font-weight:600}
header{position:sticky;top:0;z-index:100;background:rgba(243,240,231,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header .shell{display:flex;align-items:center;gap:32px;min-height:76px}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo svg{width:38px;height:38px}
.logo .t{font-family:'Bricolage Grotesque';font-weight:700;font-size:19px;letter-spacing:-.02em;line-height:1}
.logo .t small{display:block;font-family:'Hanken Grotesk';font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:4px}
nav{display:flex;gap:30px}
nav a{font-weight:500;font-size:15.5px;color:var(--ink-soft);transition:color .2s}
nav a:hover{color:var(--ink)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px}
.hamburger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:1px;transition:transform .22s,opacity .22s}
header.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .hamburger span:nth-child(2){opacity:0}
header.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.h-right{display:flex;align-items:center;gap:20px}
.h-phone{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px}
.h-phone svg{width:17px;height:17px;color:var(--clay)}
/* -----------------------------------------------------------------------------
6. HÉRO (photo pleine largeur + carte formulaire)
-------------------------------------------------------------------------- */
.hero{position:relative;color:var(--paper);overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(16,26,19,.95) 30%,rgba(16,26,19,.8) 54%,rgba(16,26,19,.52))}
.hero .shell{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding:50px 32px 60px}
.hero-copy .kick{display:block;margin-bottom:20px;color:#93BE9E}
.hero h1{font-size:clamp(38px,4.9vw,60px);color:#fff}
.hero h1 .u{color:var(--clay-lt);position:relative;white-space:nowrap}
.hero h1 .u::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.08em;background:var(--clay-lt);opacity:.5}
.hero p.lede{font-size:18.5px;color:#CDD7CE;margin:22px 0 26px;max-width:44ch}
.hero .callnow{display:inline-flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque';font-weight:700;font-size:23px;color:#fff;margin-bottom:26px}
.hero .callnow svg{width:22px;height:22px;color:var(--clay-lt)}
.hero .cred{display:flex;align-items:center;gap:12px;font-size:14px;color:#B7C3B9;border-top:1px solid rgba(243,240,231,.18);padding-top:20px;max-width:44ch}
.hero .cred svg{width:30px;height:30px;color:var(--green-2);flex:none}
.hero .cred b{color:#fff}
.hform{background:var(--card);color:var(--ink);border-radius:9px;padding:28px 28px 30px;box-shadow:0 34px 80px -28px rgba(0,0,0,.6)}
.hform h2{font-size:22px;letter-spacing:-.02em}
.hform .sub{font-size:13px;color:var(--ink-soft);margin:5px 0 18px}
.hform .fg{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.hform .fg > *{min-width:0}
.hform button{width:100%;margin-top:16px}
.hform .fine{font-size:11.5px;color:var(--ink-soft);text-align:center;margin-top:11px}
/* -----------------------------------------------------------------------------
7. BANDEAU DE STATISTIQUES / GAGES DE CONFIANCE
-------------------------------------------------------------------------- */
.stats{border-bottom:1px solid var(--line)}
.stats .shell{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:30px 32px;border-right:1px solid var(--line)}
.stat:first-child{padding-left:0}
.stat:last-child{padding-right:0;border-right:0}
.stat b{display:block;font-family:'Bricolage Grotesque';font-weight:700;font-size:32px;letter-spacing:-.03em;line-height:1}
.stat span{font-size:13.5px;color:var(--ink-soft);margin-top:9px;display:block}
/* -----------------------------------------------------------------------------
8. SECTIONS GÉNÉRIQUES
-------------------------------------------------------------------------- */
section.blk{padding:104px 0}
.lead{max-width:60ch}
/* 8a. À propos (photo + texte) */
.about .shell{display:grid;grid-template-columns:5fr 6fr;gap:60px;align-items:center}
.about figure{border-radius:6px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 24px 54px -32px rgba(24,42,32,.5)}
.about figure img{width:100%;height:100%;object-fit:cover}
.about h2{font-size:clamp(28px,3.3vw,40px);margin:16px 0 20px}
.about p{color:var(--ink-soft);font-size:17.5px;margin-bottom:16px}
.about .sig{margin-top:24px;display:flex;align-items:center;gap:14px}
.about .sig .nm{font-family:'Bricolage Grotesque';font-weight:700;font-size:16px}
.about .sig .rl{font-size:13.5px;color:var(--ink-soft)}
/* 8b. Services (liste éditoriale) */
.services .shell{display:grid;grid-template-columns:4fr 7fr;gap:56px;align-items:start}
.services .col-l{position:sticky;top:100px}
.services .col-l h2{font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.services .col-l figure{margin-top:28px;border-radius:6px;overflow:hidden;aspect-ratio:3/4}
.services .col-l figure img{width:100%;height:100%;object-fit:cover}
.svc-list{display:flex;flex-direction:column}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:baseline;padding:32px 6px;border-top:1px solid var(--line);transition:padding-left .25s,background-color .25s;cursor:pointer}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row:hover{padding-left:16px;background:linear-gradient(90deg,rgba(182,96,42,.05),transparent 60%)}
.svc-row .no{font-family:'Bricolage Grotesque';font-weight:600;font-size:15px;color:var(--clay-d);padding-top:6px}
.svc-row h3{font-size:24px;margin-bottom:9px}
.svc-row p{color:var(--ink-soft);font-size:16px;max-width:54ch}
.svc-row .go{color:var(--clay-d);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;padding-top:6px}
.svc-row:hover .go{opacity:1;transform:none}
.svc-row .go svg{width:22px;height:22px}
/* 8c. Territoire (bandeau photo pleine largeur) */
.terr{position:relative;color:var(--paper);padding:118px 0}
.terr .bg{position:absolute;inset:0;z-index:0}
.terr .bg img{width:100%;height:100%;object-fit:cover}
.terr .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,28,21,.93) 32%,rgba(18,28,21,.55))}
.terr .shell{position:relative;z-index:1}
.terr .kick{color:#93BE9E}
.terr h2{color:#fff;font-size:clamp(30px,3.6vw,46px);margin:18px 0 16px;max-width:17ch}
.terr .sub{color:#C9D4CB;max-width:48ch;margin-bottom:46px;font-size:17.5px}
.terr-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(243,240,231,.22)}
.terr-col{padding:32px 34px 8px;border-right:1px solid rgba(243,240,231,.16)}
.terr-col:first-child{padding-left:0}
.terr-col:last-child{border-right:0;padding-right:0}
.terr-col h3{color:#fff;font-size:23px;margin-bottom:12px}
.terr-col p{color:#B9C6BC;font-size:15.5px}
/* 8d. Réalisations (grille photos) */
.work .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:16px}
.work .head-row h2{font-size:clamp(28px,3.4vw,44px);margin-top:16px}
.work .note{font-size:13px;color:var(--ink-soft);margin-bottom:34px}
.work-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.wk{position:relative;border-radius:6px;overflow:hidden;background:var(--ink)}
.wk img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wk:hover img{transform:scale(1.04)}
.wk::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,28,21,.8),rgba(18,28,21,.02) 50%)}
.wk .cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.wk .cap .pl{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93BE9E;margin-bottom:7px}
.wk .cap h3{color:#fff;font-size:21px}
.wk.big{grid-row:span 2;min-height:520px}
.wk.sm{min-height:249px}
/* 8e. Processus */
.proc{background:var(--paper-2)}
.proc .lead h2{font-size:clamp(28px,3.4vw,44px);margin-top:16px}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:54px}
.pstep{padding:0 28px;border-left:1px solid var(--line-2)}
.pstep:first-child{border-left:0;padding-left:0}
.pstep:last-child{padding-right:0}
.pstep .pn{font-family:'Bricolage Grotesque';font-weight:700;font-size:14px;color:var(--clay-d);margin-bottom:16px}
.pstep h3{font-size:18px;margin-bottom:9px}
.pstep p{font-size:14.5px;color:var(--ink-soft)}
/* 8f. Avis clients */
.quotes-head h2{font-size:clamp(28px,3.4vw,44px);margin-top:16px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px}
.qt{padding:4px 40px;border-right:1px solid var(--line)}
.qt:first-child{padding-left:0}
.qt:last-child{border-right:0;padding-right:0}
.qt .st{display:flex;gap:2px;color:var(--clay);margin-bottom:20px}
.qt .st svg{width:16px;height:16px}
.qt blockquote{font-family:'Bricolage Grotesque';font-weight:500;font-size:20px;line-height:1.42;letter-spacing:-.01em;margin-bottom:24px}
.qt .by b{display:block;font-size:14px}
.qt .by span{color:var(--ink-soft);font-size:13px}
.note-c{margin-top:34px;font-size:13px;color:var(--ink-soft)}
/* 8g. FAQ (accordéon natif ) */
.faq-wrap{display:grid;grid-template-columns:4fr 7fr;gap:56px;align-items:start}
.faq-wrap .lead h2{font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:'Bricolage Grotesque';font-weight:600;font-size:19px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:22px;height:22px;flex:none;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--clay-d);transition:transform .25s}
.faq summary .pm::before{top:10px;left:0;width:22px;height:2px}
.faq summary .pm::after{left:10px;top:0;width:2px;height:22px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 42px 24px 0;color:var(--ink-soft);font-size:16px}
/* 8h. CTA final */
.close{background:var(--ink);color:var(--paper);text-align:center;padding:96px 0}
.close .kick{color:#93BE9E;display:block;margin-bottom:18px}
.close h2{color:#fff;font-size:clamp(30px,3.8vw,48px);max-width:18ch;margin:0 auto 20px}
.close p{color:#C4D0C6;font-size:18px;max-width:40ch;margin:0 auto 34px}
.close .big-phone{font-family:'Bricolage Grotesque';font-weight:700;font-size:clamp(30px,4vw,44px);color:#fff;display:inline-flex;align-items:center;gap:14px;margin-bottom:10px}
.close .big-phone svg{width:32px;height:32px;color:var(--clay-lt)}
.close .em{color:#93BE9E;font-size:15px;margin-bottom:34px}
.close .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* -----------------------------------------------------------------------------
9. PIED DE PAGE
-------------------------------------------------------------------------- */
footer{background:#101B14;color:#93A497;padding:70px 0 118px;font-size:15px}
footer .shell{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:44px}
footer .fb .t{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;color:#fff}
footer .fb p{margin-top:12px;max-width:34ch;font-size:14.5px}
footer h2{font-family:'Hanken Grotesk';font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:15px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:#fff}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(147,164,151,.18);margin-top:14px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:12.5px}
/* -----------------------------------------------------------------------------
10. BARRE D'ACTION MOBILE (fixe en bas, < 720px)
-------------------------------------------------------------------------- */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--paper);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -10px 30px rgba(24,42,32,.12)}
.mbar .btn{flex:1;padding:13px 8px;font-size:15px;min-height:48px}
/* -----------------------------------------------------------------------------
11. ANIMATION D'APPARITION (activée par assets/js/site.js)
-------------------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
/* -----------------------------------------------------------------------------
12. RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width:1040px){
.hamburger{display:flex}
header .shell{flex-wrap:wrap}
nav{display:none;width:100%;order:99;flex-direction:column;gap:0;padding:18px 0 24px;border-top:1px solid var(--line);margin-top:2px}
nav a{padding:11px 0;font-size:17px}
header.nav-open nav{display:flex}
.hero .shell{grid-template-columns:1fr;gap:36px;padding:56px 32px 64px}
.hero h1 .u{white-space:normal}
.about .shell,.services .shell,.faq-wrap{grid-template-columns:1fr;gap:36px}
.services .col-l{position:static}
.services .col-l figure{display:none}
.proc-grid{grid-template-columns:1fr 1fr;gap:36px 0}
.pstep{padding:0 24px}.pstep:nth-child(odd){border-left:0;padding-left:0}
.quotes{grid-template-columns:1fr}
.qt{padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}
.qt:last-child{border-bottom:0}
footer .shell{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
body{padding-bottom:72px}
.shell{padding:0 22px}
section.blk{padding:66px 0}
.stats .shell{grid-template-columns:1fr 1fr}
.stat{padding:24px 22px}.stat:first-child,.stat:nth-child(3){padding-left:0}.stat:nth-child(2),.stat:nth-child(4){border-right:0;padding-right:0}
.stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
.work-grid{grid-template-columns:1fr}
.wk.big{grid-row:auto;min-height:300px}.wk.sm{min-height:240px}
.terr-grid{grid-template-columns:1fr}
.terr-col{border-right:0;border-bottom:1px solid rgba(243,240,231,.16);padding:24px 0 14px}
.terr-col:last-child{border-bottom:0}
.proc-grid{grid-template-columns:1fr}.pstep{padding:0}
.ribbon span:last-child{display:none}
.h-right .btn{display:none}
.mbar{display:flex}
.hero .shell{padding:36px 22px 80px}
.hero h1 .u{white-space:normal}
.hform{padding:22px}
.hform .fg{grid-template-columns:1fr}
footer .shell{grid-template-columns:1fr}
}
/* =============================================================================
13. PAGES INTÉRIEURES (services, régions, à propos, contact, légal, 404)
Ajouté pour le site multi-pages. Réutilise les variables et composants ci-dessus.
========================================================================== */
/* 13a. En-tête de page (compact, fond sombre) + fil d'Ariane */
.pagehero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:60px 0 54px}
.pagehero .bg{position:absolute;inset:0;z-index:0}
.pagehero .bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.pagehero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(16,26,19,.92),rgba(16,26,19,.72))}
.pagehero .shell{position:relative;z-index:1}
.crumbs{font-size:13px;color:#9FB5A5;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:#CDD8CF}.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.pagehero .kick{color:#93BE9E}
.pagehero h1{color:#fff;font-size:clamp(30px,4vw,50px);max-width:20ch;margin-top:14px}
.pagehero p{color:#C9D4CB;font-size:18px;margin-top:16px;max-width:58ch}
/* 13b. Grille de cartes (aperçu services / régions) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px 28px;transition:transform .25s,box-shadow .25s,border-color .25s;color:inherit}
a.card{cursor:pointer}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(24,42,32,.4);border-color:var(--green)}
.card .no{font-family:'Bricolage Grotesque';font-weight:600;font-size:14px;color:var(--clay-d)}
.card h3{font-size:21px;margin:10px 0 9px}
.card p{color:var(--ink-soft);font-size:15px;margin-bottom:14px}
.card .go{font-size:14px;font-weight:700;color:var(--clay-d);display:inline-flex;align-items:center;gap:6px}
.card .go svg{width:15px;height:15px;transition:transform .2s}
a.card:hover .go svg{transform:translateX(4px)}
/* 13c. Corps d'une page détaillée (texte + encadré collant) */
.split{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.prose{max-width:80ch}
.prose h2{font-size:clamp(23px,2.5vw,30px);margin:38px 0 14px}
.prose > h2:first-child,.prose > *:first-child{margin-top:0}
.prose p{color:var(--ink-soft);margin-bottom:16px;text-align:justify}
.prose ul{list-style:none;margin:0 0 20px}
.prose ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:2px;background:var(--green)}
.prose ul li b{color:var(--ink)}
.aside-cta{position:sticky;top:100px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:28px}
.aside-cta h3{font-size:20px;margin-bottom:8px}
.aside-cta p{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.aside-cta .btn{width:100%;margin-bottom:10px}
.aside-cta .ph{display:flex;align-items:center;justify-content:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;margin-top:6px}
.aside-cta .ph svg{width:19px;height:19px;color:var(--clay)}
.lebel p{text-align: justify;}
/* 13d. Page contact */
.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
.cinfo dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700;margin-top:24px}
.cinfo dt:first-child{margin-top:0}
.cinfo dd{font-family:'Bricolage Grotesque';font-weight:700;font-size:22px;margin-top:6px}
.cinfo dd.sm{font-size:16px;font-family:'Hanken Grotesk';font-weight:500;color:var(--ink-soft)}
/* 13e. Page 404 */
.nf{text-align:center;padding:110px 0}
.nf .big{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(70px,14vw,140px);color:var(--clay);line-height:1;letter-spacing:-.04em}
.nf h1{font-size:clamp(24px,3vw,34px);margin:12px 0 14px}
.nf p{color:var(--ink-soft);max-width:44ch;margin:0 auto 28px}
/* -----------------------------------------------------------------------------
14. BANDEAU DE CONSENTEMENT AUX TÉMOINS
-------------------------------------------------------------------------- */
.cookie-bar{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--ink);color:#CDD8CF;padding:10px 22px calc(10px + env(safe-area-inset-bottom));font-size:13px;line-height:1.4;text-align:center;box-shadow:0 -4px 20px rgba(0,0,0,.3)}
.cookie-bar p{margin:0;flex:0 1 auto}
.cookie-bar a{color:var(--clay-lt);text-decoration:underline}
.cookie-bar button{font-family:'Hanken Grotesk';font-weight:600;font-size:13px;padding:8px 18px;border-radius:4px;cursor:pointer;min-height:36px;touch-action:manipulation}
.cookie-bar .cookie-accept{background:var(--clay-d);color:#fff;border:1.5px solid transparent}
.cookie-bar .cookie-dismiss{background:none;border:1.5px solid #8FA394;color:#CDD8CF}
@media (max-width:680px){
.cookie-bar{gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));font-size:12.5px}
}
@media (max-width:900px){
.cards,.cards.three{grid-template-columns:1fr}
.split,.contact-grid{grid-template-columns:1fr;gap:38px}
.aside-cta{position:static}
}