/* kaliforage.fr — feuille de style unique
   Extraite verbatim du gabarit validé (tpl-final.html, 02/08/2026).
   NE PAS refaire : réglages non évidents ayant chacun coûté un bug —
   .nl>li>a.btn{color:#fff} · .stat>b/.enj>b en enfants directs ·
   vector-effect:non-scaling-stroke sur la carte · grilles 2 colonnes dès 640 px.
   Les ajouts hors maquette sont regroupés en fin de fichier, section « TUNNEL DEVIS ». */

/* ============ POLICES AUTO-HÉBERGÉES ============
   Plus Jakarta Sans + Inter (licence SIL OFL), servies depuis /fonts :
   AUCUN appel vers Google — cohérent avec la politique de confidentialité
   (« sans transfert vers un pays tiers »). Regénérées par build/telecharge-polices. */
/* Inter 400 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700 — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700 — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 500 — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 500 — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 600 — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 600 — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 700 — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 700 — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans 800 — latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans 800 — latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --fond:#f6f9fb; --blanc:#fff; --fond2:#edf2f6;
  --encre:#101c26; --encre2:#1d2f3f; --gris:#54687a; --gris2:#8095a6;
  --turq:#0e9d99; --turq-d:#0a7c79; --turq2:#13b8b3; --turq-l:#e7f6f5; --turq-b:#bfe6e4;
  --trait:#dde5ec; --or:#efa41d;
  --ft:'Plus Jakarta Sans',sans-serif; --fb:'Inter',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --r:12px;
  --sh:0 1px 2px rgba(16,28,38,.05);
  --sh2:0 12px 32px rgba(14,157,153,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--fond);scroll-behavior:smooth}
body{background:var(--fond);color:var(--encre);font-family:var(--fb);line-height:1.68;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* --- topbar --- */
.topbar{background:var(--encre);color:#9fb2c1;font-size:13px;padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar b{color:#fff;font-weight:600}
.topbar a{transition:color 160ms var(--ease)}

/* --- nav --- */
nav{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:100}
nav .wrap{display:flex;align-items:center;gap:26px;height:80px}
.logo{display:flex;flex-direction:column;line-height:1.06}
.logo-n{font-family:var(--ft);font-size:25px;font-weight:700;letter-spacing:4.5px;color:var(--encre)}
.logo-s{font-size:10.5px;color:var(--turq);letter-spacing:1.3px;text-transform:uppercase;font-weight:600;margin-top:3px}
.logo-r{font-size:10px;color:var(--gris2);letter-spacing:.4px;margin-top:2px}
.logo-a{font-size:11px;color:var(--or);margin-top:3px;letter-spacing:.4px}
.nl{display:flex;gap:2px;margin-left:auto;list-style:none;align-items:center}
.nl>li>a{font-size:14.5px;font-weight:500;color:var(--gris);padding:9px 14px;border-radius:7px;
  transition:color 160ms var(--ease),background-color 160ms var(--ease)}
.nl>li>a.btn{color:#fff}

.src-min{font-size:12.5px !important;color:var(--gris2) !important;margin-top:14px}
.dgrid-solo{grid-template-columns:1fr !important;max-width:760px}
.d-more{margin-top:26px;font-size:15px;color:var(--gris);text-align:center}
.d-more a{color:var(--turq-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;
  padding:9px;margin-left:auto}
.burger span{width:24px;height:2px;background:var(--encre);border-radius:2px}

/* --- boutons --- */
.btn{display:inline-block;background:var(--turq);color:#fff;font-family:var(--ft);font-weight:700;
  font-size:15.5px;letter-spacing:1.5px;text-transform:uppercase;padding:14px 30px;border-radius:8px;
  border:none;cursor:pointer;box-shadow:0 4px 14px rgba(14,157,153,.28);
  transition:transform 160ms var(--ease),background-color 160ms var(--ease),box-shadow 200ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn-o{background:var(--blanc);color:var(--turq);border:2px solid var(--turq-b);box-shadow:none}
.btn-o:active{transform:scale(.97)}
.btn-nav{padding:11px 22px;font-size:14px;margin-left:10px}

/* --- hero --- */
.hero{position:relative;padding:92px 0 84px;text-align:center;overflow:hidden;background:var(--encre)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 76% 62% at 50% 38%,rgba(14,157,153,.26),transparent 66%),
             linear-gradient(180deg,rgba(16,28,38,.60),rgba(16,28,38,.86))}
.hero .wrap{position:relative;z-index:2}
.pastilles{display:flex;justify-content:center;gap:14px;margin-bottom:28px}
.pas{width:56px;height:56px;border-radius:50%;border:2px solid var(--turq2);
  background:rgba(19,184,179,.13);display:flex;align-items:center;justify-content:center;
  font-family:var(--ft);font-size:19px;font-weight:700;color:var(--turq2);letter-spacing:.5px;
  opacity:0;transform:translateY(8px);animation:pop 420ms var(--ease) forwards}
.pas:nth-child(1){animation-delay:60ms}
.pas:nth-child(2){animation-delay:120ms}
.pas:nth-child(3){animation-delay:180ms}
@keyframes pop{to{opacity:1;transform:translateY(0)}}
h1{font-family:var(--ft);font-size:clamp(33px,5.6vw,60px);font-weight:700;letter-spacing:3px;
  text-transform:uppercase;line-height:1.06;color:#fff;margin-bottom:14px}
h1 span{color:var(--turq2)}
h1 small{display:block;font-family:var(--fb);font-size:15.5px;font-weight:400;letter-spacing:.5px;
  text-transform:none;color:#b9c9d6;margin-top:14px}
.hero-tag{font-family:var(--ft);font-size:clamp(12.5px,1.7vw,16px);color:var(--turq2);letter-spacing:2.6px;
  text-transform:uppercase;border:1px solid rgba(19,184,179,.42);display:inline-block;
  padding:7px 24px;border-radius:5px;margin-bottom:26px}
.hero-p{font-size:17.5px;color:#c6d5e0;max-width:60ch;margin:0 auto 32px}
.hero-p b{color:#fff;font-weight:600}
.avis{margin-top:26px;font-size:14.5px;color:#a8bac8}
.avis .st{color:var(--or);letter-spacing:2px}
.avis b{color:#fff}

/* --- bandeau --- */
.bar{background:var(--blanc);border-bottom:1px solid var(--trait)}
.bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px;text-align:center}
.stat>b{display:block;font-family:var(--ft);font-size:31px;font-weight:700;color:var(--turq);line-height:1.1}
.stat span{font-size:12px;color:var(--gris2);letter-spacing:1.2px;text-transform:uppercase}

/* --- sections --- */
section{padding:80px 0}
.st2{text-align:center;font-family:var(--ft);font-size:clamp(22px,3vw,32px);font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;margin-bottom:14px}
.st2 span{color:var(--turq)}
.sub{text-align:center;color:var(--gris);max-width:64ch;margin:0 auto 48px;font-size:16.5px}

/* --- cartes missions --- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:22px;
  text-align:center;box-shadow:var(--sh);display:block;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease)}
.card:active{transform:scale(.99)}
.card img{width:100%;max-width:230px;margin:0 auto 18px;border-radius:9px}
.card h3{font-family:var(--ft);font-size:19px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--turq);margin-bottom:5px}
.card .lb{font-size:11px;color:var(--gris2);letter-spacing:1.2px;text-transform:uppercase;
  font-weight:600;margin-bottom:12px}
.card p{font-size:14.5px;color:var(--gris)}
.card .go{display:inline-block;margin-top:14px;font-family:var(--ft);font-size:14px;font-weight:700;
  letter-spacing:1.2px;color:var(--turq);text-transform:uppercase}

/* --- étapes --- */
.steps{background:var(--blanc);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.step::before{counter-increment:s;content:"0" counter(s);display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--turq-l);color:var(--turq);
  font-family:var(--ft);font-size:19px;font-weight:700;margin-bottom:14px;border:1px solid var(--turq-b)}
.step h3{font-family:var(--ft);font-size:18px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  margin-bottom:7px}
.step p{font-size:14.5px;color:var(--gris)}

.deroul{margin-top:46px;padding-top:38px;border-top:1px solid var(--trait)}
.deroul h3{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:8px;text-align:center}
.d-intro{font-size:16px;color:var(--gris);text-align:center;max-width:70ch;margin:0 auto 30px}
.d-intro b{color:var(--encre);font-weight:600}
ol.d-steps{list-style:none;counter-reset:ds;max-width:900px;margin:0 auto;padding:0;
  display:grid;gap:2px;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r);
  overflow:hidden}
ol.d-steps li{counter-increment:ds;background:var(--blanc);display:flex;align-items:flex-start;
  gap:18px;padding:20px 24px}
ol.d-steps li .ic{margin-bottom:0;flex:0 0 auto}
ol.d-steps li .ic svg{width:36px;height:36px}
ol.d-steps li>div{position:relative;padding-left:34px;font-size:15.5px;color:var(--gris);padding-top:3px}
ol.d-steps li>div::before{counter-increment:none;content:"0" counter(ds);position:absolute;left:0;top:2px;
  font-family:var(--ft);font-size:15px;font-weight:800;color:var(--turq);letter-spacing:-.5px}
ol.d-steps li>div b{color:var(--encre);font-weight:700}
@media(max-width:640px){ol.d-steps li{padding:18px 18px;gap:14px}}

/* --- enjeux --- */
.enj{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:30px 26px;
  text-align:center;box-shadow:var(--sh)}
.enj>b{display:block;font-family:var(--ft);font-size:44px;font-weight:700;color:var(--turq);
  letter-spacing:-1px;line-height:1.05;margin-bottom:8px}
.enj h3{font-size:16px;font-weight:600;margin-bottom:7px;color:var(--encre)}
.enj p{font-size:14.5px;color:var(--gris)}

/* --- mention discrète --- */
.mention{background:var(--fond2);border-top:1px solid var(--trait);padding:26px 0;font-size:13.5px;
  color:var(--gris);text-align:center}
.mention .wrap{max-width:900px}
.mention b{color:var(--encre2);font-weight:600}
.mention a{color:var(--turq-d);text-decoration:underline}

/* --- dossiers --- */
.g3d{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.doss{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);transition:transform 220ms var(--ease),box-shadow 220ms var(--ease)}
.doss-img{height:220px;overflow:hidden;background:var(--fond2)}
.doss-img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.doss-b{padding:18px 20px 20px}
.doss-m{display:inline-block;background:var(--turq-l);color:var(--turq-d);font-family:var(--ft);
  font-size:13px;font-weight:700;letter-spacing:1.4px;padding:3px 10px;border-radius:4px;margin-bottom:9px}
.doss-b h3{font-family:var(--ft);font-size:19px;font-weight:600;letter-spacing:1px;margin-bottom:6px}
.doss-b p{font-size:13.5px;color:var(--gris);line-height:1.6}
.qui{display:inline-flex;align-items:center;gap:6px;font-size:12px;margin-top:12px;padding:5px 11px;
  border-radius:5px;letter-spacing:.2px}
.qui-kf{background:var(--turq-l);color:var(--turq-d);border:1px solid var(--turq-b);font-weight:600}
.qui-be{background:var(--fond2);color:var(--gris);border:1px solid var(--trait)}

/* --- argiles --- */
.arg{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.arg-map{border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;background:var(--blanc);
  box-shadow:var(--sh)}
.leg{padding:14px;display:flex;gap:22px;justify-content:center;font-size:12.5px;color:var(--gris);
  border-top:1px solid var(--trait)}
.leg i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.arg h2{font-family:var(--ft);font-size:clamp(21px,2.6vw,30px);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:16px}
.arg h2 span{color:var(--turq)}
.arg p{color:var(--gris);margin-bottom:13px;font-size:15.5px}
.arg b{color:var(--encre)}

/* --- villes --- */
.deps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dep{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:20px 20px;
  box-shadow:var(--sh)}
.dep-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.num{background:var(--turq);color:#fff;font-family:var(--ft);font-weight:700;font-size:14px;
  padding:3px 11px;border-radius:20px;letter-spacing:1px}
.dep-h b{font-family:var(--ft);font-size:15.5px;letter-spacing:1.4px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:var(--fond);border:1px solid var(--trait);padding:6px 14px;font-size:13.5px;
  color:var(--gris);border-radius:20px;
  transition:color 160ms var(--ease),border-color 160ms var(--ease),background-color 160ms var(--ease)}

/* --- faq --- */
.faq{display:grid;gap:14px;max-width:920px;margin:0 auto}
.qa{background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:21px 25px;
  box-shadow:var(--sh)}
.qa h3{font-family:var(--ft);font-size:18.5px;font-weight:600;letter-spacing:.8px;margin-bottom:8px;
  color:var(--turq-d)}
.qa p{font-size:15px;color:var(--gris)}
.qa p b{color:var(--encre)}

/* --- devis --- */
.devis{background:var(--encre);color:#fff}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.dgrid h2{font-family:var(--ft);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:14px;color:#fff}
.dgrid h2 span{color:var(--turq2)}
.dgrid>div>p{color:#b3c4d1;margin-bottom:24px;font-size:16.5px}
.pts{display:grid;gap:14px}
.pt{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#b3c4d1}
.pt i{flex:0 0 23px;height:23px;border-radius:50%;background:var(--turq);color:#fff;font-style:normal;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:3px}
.pt b{color:#fff}
.form{background:var(--blanc);border-radius:var(--r);padding:28px 26px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.form h3{font-family:var(--ft);font-size:21px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--encre);margin-bottom:4px}
.form .fs{font-size:14px;color:var(--gris2);margin-bottom:20px}
.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--encre);letter-spacing:.3px;margin-bottom:6px}
.inp{width:100%;background:var(--fond);border:1.5px solid var(--trait);border-radius:8px;padding:11px 13px;
  font-size:15px;font-family:inherit;color:var(--encre);margin-bottom:14px;
  transition:border-color 160ms var(--ease),background-color 160ms var(--ease)}
.inp:focus{outline:none;border-color:var(--turq);background:var(--blanc)}
.inp::placeholder{color:#a2b3c1}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:17px}
.opt{border:1.5px solid var(--trait);background:var(--fond);border-radius:8px;padding:12px 6px;
  text-align:center;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--gris);
  transition:transform 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease),background-color 160ms var(--ease)}
.opt:active{transform:scale(.97)}
.opt small{display:block;font-size:10.5px;font-weight:400;color:var(--gris2);margin-top:2px}
.cons{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--gris);
  margin-bottom:11px;line-height:1.55;cursor:pointer}
.cons input{margin-top:3px;flex:0 0 auto;accent-color:var(--turq);width:16px;height:16px}
.cons a{color:var(--turq-d);text-decoration:underline}
.form .btn{width:100%;margin-top:6px;padding:15px}
.fin{font-size:11.5px;color:var(--gris2);text-align:center;margin-top:13px}

/* --- footer --- */
footer{background:#0b1620;border-top:4px solid var(--turq);padding:54px 0 24px;font-size:14px;color:#8ea0b0}
.fg{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:38px;margin-bottom:34px}
footer h4{font-family:var(--ft);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--turq2);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #1d2c39}
footer li{list-style:none;margin-bottom:8px}
footer a{transition:color 160ms var(--ease)}
.fdesc{line-height:1.78;font-size:13.5px}
.fdesc b{color:#c3d2dd}
.fb{border-top:1px solid #1d2c39;padding-top:20px;font-size:12px;color:#657785;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* --- mobile --- */
.mmenu{display:none;position:fixed;inset:0;background:var(--blanc);z-index:300;flex-direction:column;
  padding:26px 26px 92px;overflow-y:auto}
.mmenu.open{display:flex}
.mclose{align-self:flex-end;font-size:34px;background:none;border:none;color:var(--encre);cursor:pointer;
  margin-bottom:12px;line-height:1}
.mmenu a{font-family:var(--ft);font-size:19px;letter-spacing:1px;padding:16px 0;
  border-bottom:1px solid var(--trait);color:var(--encre)}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--blanc);
  border-top:1px solid var(--trait);box-shadow:0 -4px 20px rgba(16,28,38,.1);padding:10px 14px;
  gap:10px;align-items:center}
.mbar a{flex:1;text-align:center;font-family:var(--ft);font-size:14px;font-weight:600;letter-spacing:1px;
  color:var(--gris);text-transform:uppercase;padding:10px 0}
.mbar .mb-cta{flex:2;background:var(--turq);color:#fff;border-radius:8px;font-weight:700;
  transition:transform 160ms var(--ease)}
.mbar .mb-cta:active{transform:scale(.97)}

/* --- survols : uniquement sur pointeur fin --- */
@media (hover:hover) and (pointer:fine){
  .topbar a:hover{color:var(--turq2)}
  .nl>li>a:hover{color:var(--encre);background:var(--fond2)}
  .btn:hover{background:var(--turq2);transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,157,153,.34)}
  .btn-o:hover{background:var(--turq-l);border-color:var(--turq)}
  .card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--turq-b)}
  .doss:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
  .doss:hover .doss-img img{transform:scale(1.05)}
  .chip:hover{color:var(--turq-d);border-color:var(--turq-b);background:var(--turq-l)}
  .opt:hover{border-color:var(--turq);color:var(--turq-d);background:var(--turq-l)}
  footer a:hover{color:var(--turq2)}
}

/* --- accessibilité : mouvement réduit --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .pas{opacity:1;transform:none}
}

@media(max-width:980px){
  .nl{display:none}.burger{display:flex}.mbar{display:flex}body{padding-bottom:74px}
  .g3,.g4,.g3d,.deps,.fg,.arg,.dgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .g3,.g4,.g3d,.deps,.fg,.arg,.dgrid,.bar .wrap,.opts,.r2{grid-template-columns:1fr}
  section{padding:58px 0}
  .hero{padding:66px 0 60px}
}

/* ===== élément de signature : la coupe de terrain ===== */
.coupe-sol{width:100%;line-height:0;background:var(--fond);overflow:hidden}
.coupe-sol svg{width:100%;height:150px;display:block}
.coupe-sol .sol{stroke:var(--encre)}
.coupe-sol .hach{stroke:var(--encre);opacity:.55}
.coupe-sol .c{color:var(--dot)}
.coupe-sol pattern circle{fill:currentColor}
.coupe-sol pattern path{stroke:currentColor}
.coupe-sol .sep{stroke:var(--dot);opacity:.9}
.coupe-sol .snd{stroke:var(--turq);fill:none}
.coupe-sol .rep{stroke:var(--turq);opacity:.75}
.coupe-sol .tete circle{fill:var(--turq)}
.coupe-sol.on-dark{background:var(--encre)}
.coupe-sol.on-dark .sol,.coupe-sol.on-dark .hach{stroke:#fff;opacity:.42}
.coupe-sol.on-dark .c{color:rgba(255,255,255,.24)}
.coupe-sol.on-dark .sep{stroke:rgba(255,255,255,.22)}
.coupe-sol.on-dark .snd,.coupe-sol.on-dark .rep{stroke:var(--turq2)}
.coupe-sol.on-dark .tete circle{fill:var(--turq2)}
@media(max-width:700px){.coupe-sol svg{height:105px}}

/* ===== usages variés de la trame ===== */
/* en-tête de bloc, façon GPH */
.card,.enj,.d-bloc,.qa{position:relative;overflow:hidden}
.card::before,.enj::before,.d-bloc::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background-image:repeating-linear-gradient(0deg,var(--dot) 0 1.2px,transparent 1.2px 4.5px)}
.card,.enj{padding-top:30px}
.d-bloc{padding-top:30px}
/* fond de section très léger */
.steps{position:relative}
.steps::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,var(--dot) 0 1px,transparent 1px 9px,
    var(--dot) 9px 9.6px,transparent 9.6px 26px)}
.steps>.wrap{position:relative;z-index:2}
/* encadrement des chiffres du bandeau */
.bar .stat{position:relative;padding:0 6px}
.bar .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background-image:repeating-linear-gradient(0deg,var(--turq) 0 4px,transparent 4px 7px)}
.bar .stat{padding-left:16px;text-align:left}
@media(max-width:640px){.bar .stat{text-align:center;padding-left:6px}.bar .stat::before{display:none}}
/* ============ DIRECTION VISUELLE KALIFORAGE ============
   Palette « Bleu nuit & cyan » · Plus Jakarta Sans + Inter · trame de strates */
:root{
  --fond:#f4f8fc; --blanc:#fff; --fond2:#e9f1f8;
  --encre:#07182a; --encre2:#14293d; --gris:#4e6579; --gris2:#8298aa;
  --turq:#0b7fb8; --turq-d:#086089; --turq2:#3fbdf0; --turq-l:#e0f0fa; --turq-b:#a8d9f2;
  --trait:#d9e4ee; --or:#e9a020; --dot:#b6cadd;
  --r:5px; --sh:0 1px 2px rgba(7,24,42,.05); --sh2:0 14px 34px rgba(11,127,184,.16);
  --strate:repeating-linear-gradient(0deg,
    var(--dot) 0 1.5px, transparent 1.5px 7px,
    var(--dot) 7px 7.8px, transparent 7.8px 12px,
    var(--dot) 12px 12.7px, transparent 12.7px 16px,
    var(--dot) 16px 16.5px, transparent 16.5px 24px);
}
body{background:var(--fond)}

/* typographie */
h1,.st2,.arg h2,.dgrid h2,.final h2{text-transform:none;letter-spacing:-1.1px;font-weight:800}
.st2{font-weight:700;letter-spacing:-.8px}
.logo-n{letter-spacing:3px;font-weight:800;font-size:23px}
.card h3,.step h3,.doss-b h3,.qa h3,.dep-h b,.deroul h3,.form h3,.enj h3{
  text-transform:none;letter-spacing:-.3px;font-weight:700}
footer h4{text-transform:uppercase;letter-spacing:1.4px;font-weight:700;font-size:12.5px}
.hero-tag,.doss-m,.num,.btn,.picto-row>span,.stat span,.card .lb{font-family:var(--fb)}
.btn{font-weight:700;letter-spacing:.7px;text-transform:uppercase;font-size:14.5px;border-radius:5px}
.stat>b,.enj>b{font-family:var(--ft);font-weight:800;letter-spacing:-1.4px}
h1 small{font-family:var(--fb);font-weight:400}

/* hero */
.hero{background:var(--encre)}
.hero-bg img{opacity:.34}
.hero-bg::after{background:radial-gradient(ellipse 74% 60% at 50% 38%,rgba(63,189,240,.22),transparent 66%),
  linear-gradient(180deg,rgba(7,24,42,.58),rgba(7,24,42,.90))}
.pas{border-color:var(--turq2);background:rgba(63,189,240,.12);color:var(--turq2)}
h1 span{color:var(--turq2)}
.hero-p{color:#b9cede}
.avis{color:#a3bccd}

/* surfaces */
.bar,.card,.doss,.dep,.qa,.enj,.deroul{background:var(--blanc)}
.steps{background:var(--fond2)}
.devis,footer{background:var(--encre)}
.mention{background:var(--fond2)}
.num,.doss-m{background:var(--turq);color:#fff}
.doss-m{background:var(--turq-l);color:var(--turq-d)}

/* pictogrammes sur mesure */
.ic{display:inline-flex;color:var(--turq);margin-bottom:14px}
.ic svg{width:46px;height:46px}
.ic-s svg{width:34px;height:34px}
.enj .ic{margin-bottom:10px}
.step::before{display:none !important}
.picto-row{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;
  border-bottom:1px solid var(--trait)}
.picto-row>span{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;
  letter-spacing:.7px;text-transform:uppercase;color:var(--gris)}
.picto-row .ic{margin-bottom:0}

/* trame de signature : strates */
.doss-img,.arg-map{position:relative}
.carotte{position:absolute;left:0;top:0;bottom:0;width:30px;z-index:2;background:var(--fond);
  background-image:var(--strate);border-right:1px solid var(--trait)}
.carotte::after{content:"";position:absolute;left:6px;right:6px;top:0;height:5px;background:var(--turq2)}
.carotte-l{width:26px;background:var(--blanc);background-image:var(--strate)}
.bar{position:relative}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;
  background-image:var(--strate);opacity:.85}
.st2::after{content:"";display:block;width:52px;height:16px;margin:16px auto 0;
  background-image:repeating-linear-gradient(0deg,
    var(--turq) 0 2px, transparent 2px 6px, var(--turq) 6px 7.4px, transparent 7.4px 11px,
    var(--turq) 11px 12px, transparent 12px 16px)}
.devis{position:relative;overflow:hidden}
.devis::before{content:"";position:absolute;left:0;top:0;bottom:0;width:120px;opacity:.14;
  background-image:repeating-linear-gradient(0deg,
    #fff 0 1.5px, transparent 1.5px 7px, #fff 7px 7.8px, transparent 7.8px 12px,
    #fff 12px 12.7px, transparent 12.7px 24px)}
.devis .wrap{position:relative;z-index:2}

.d-bloc .ic{color:var(--turq)}
.d-bloc li::before{background:var(--turq)}


/* ============ DENSITÉ — le mobile d'abord ============
   Cartes en 2 colonnes dès le petit écran : moins de scroll, plus de choix visibles.
   Placé en fin de feuille pour passer après les media queries de base. */
.gm4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1040px){.gm4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .g3.gm4,.g3d{grid-template-columns:1fr 1fr !important;gap:12px}
  .g3.gm4>.card{padding:16px 14px 18px}
  .g3.gm4>.card>img{max-width:100%;height:96px;object-fit:cover;margin-bottom:12px}
  .g3.gm4>.card h3{font-size:17px}
  .g3.gm4>.card .lb{font-size:10.5px}
  .g3.gm4>.card p{font-size:13.5px;line-height:1.5}
  .g3.gm4>.card .go{font-size:12px;letter-spacing:.3px}
  /* en colonne étroite, le texte centré casse mal : on aligne à gauche */
  .g3.gm4>.card{text-align:left}
  .g3.gm4>.card>img{margin-left:0}
  .g3.gm4>.card .lb{letter-spacing:.5px}
  .g3>.enj{text-align:left}
  .g3>.enj>b{font-size:26px;letter-spacing:-1px}
  .g3>.enj h3{font-size:15px}
  .g3>.step{text-align:left}
  .g3d>.doss{border-radius:var(--r)}
  .doss-img{height:112px}
  .doss-b{padding:14px 14px 16px}
  .doss-b h3{font-size:17px}
  .doss-b p{font-size:13px;line-height:1.5}
  .doss-m{font-size:10px}
  .qui{font-size:11px}
  .bar .wrap{grid-template-columns:1fr 1fr !important;gap:18px 10px;padding:22px 18px}
  /* les grilles de 3 : 2 colonnes, et la 3e carte occupe toute la largeur */
  .g3{grid-template-columns:1fr 1fr !important;gap:12px}
  .g3>*:nth-child(3):last-child{grid-column:1/-1}
  .g3>.enj{padding:20px 16px}
  .g3>.enj p{font-size:13.5px;line-height:1.55}
  .g3>.step{padding:20px 16px}
  .g3>.step p{font-size:13.5px;line-height:1.55}
  .deps{grid-template-columns:1fr 1fr !important;gap:12px}
  .dep{padding:16px 14px}
  .chip{font-size:12.5px;padding:5px 10px}
  section{padding:42px 0}
}

/* ============ CARTES INTÉGRÉES ============
   Les cartes ne doivent pas se lire comme des objets posés sur la page.
   On retire les trois éléments qui les détachaient : le bandeau de strates
   en tête, la bordure et l'ombre. Reste la surface blanche, qui suffit
   à délimiter sans découper. Le relief revient au survol seulement. */
.card::before,.enj::before,.d-bloc::before{display:none !important}
.card,.enj,.step,.dep,.qa{
  border:1px solid transparent;
  box-shadow:none;
  border-radius:8px;
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),
             box-shadow 200ms var(--ease),transform 200ms var(--ease)}
.card,.enj,.step{padding-top:26px}
.qa,.dep{background:transparent}
.qa{border-bottom:1px solid var(--trait);border-radius:0;padding-left:0;padding-right:0}
.qa:last-child{border-bottom:0}
.dep{border:1px solid var(--trait);background:var(--blanc)}
.steps::before{opacity:.34}
@media (hover:hover) and (pointer:fine){
  .card:hover{background:var(--blanc);border-color:var(--turq-b);
    box-shadow:0 10px 26px rgba(7,24,42,.09);transform:translateY(-3px)}
  .qa:hover{background:transparent}
}
@media(max-width:640px){
  .card,.enj,.step{padding-top:20px}
}

/* ============ ZONE COUVERTE ============
   Carte : contours réels des 13 régions métropolitaines (données dérivées de
   l'IGN), projection Lambert conique conforme. La zone colorée dit « tout ce
   qui est dedans est couvert » — c'est elle qui inclut, pas la liste. */
.zone{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center}
.zone-map{display:flex;flex-direction:column;align-items:center;gap:14px}
.fmap{width:100%;max-width:330px;height:auto}
.rg{fill:none;stroke:#c3d3e2;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.rg.on{fill:var(--turq-l);stroke:var(--turq);stroke-width:1.8}
.zone-leg{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--gris);font-weight:500}
.lg-z{width:15px;height:15px;border-radius:3px;background:var(--turq-l);
  border:1.5px solid var(--turq);display:inline-block}
.zone-src{font-size:11.5px;color:var(--gris2);text-align:center;max-width:280px;line-height:1.5}
.zone-deps h3{font-family:var(--ft);font-size:17px;font-weight:700;margin-bottom:16px;color:var(--encre2)}
.zone-deps .deps{grid-template-columns:1fr 1fr;gap:12px}
.zone-note{font-size:14.5px;color:var(--gris);margin:22px 0 18px;max-width:62ch;line-height:1.65}
.zone-note b{color:var(--encre2);font-weight:600}
@media(max-width:900px){
  .zone{grid-template-columns:1fr;gap:26px}
  .zone-map{order:-1}
  .fmap{max-width:250px}
}
@media(max-width:640px){
  .zone-deps .deps{grid-template-columns:1fr 1fr !important}
  .fmap{max-width:215px}
  .rg{stroke-width:1.15;stroke:#b9cbdb}
  .rg.on{stroke-width:2}
}
@media(max-width:640px){
  .zone-deps .deps{grid-template-columns:1fr 1fr !important}
  .fmap{max-width:200px}
}

/* ============ TUNNEL DEVIS — ajouts hors maquette ============
   Styles des pages /devis.html, /devis/*.html et /merci.html.
   Ils réutilisent le vocabulaire de la maquette (.card, .bar, .devis, .form…) ;
   seuls les compléments strictement nécessaires vivent ici. */

/* état sélectionné des options de formulaire (remplace les couleurs en dur
   de l'ancien script, restées sur la palette turquoise abandonnée) */
.opt.on{border-color:var(--turq);color:var(--turq-d);background:var(--turq-l)}

/* champ piège anti-spam : invisible pour un humain, rempli par les robots */
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* zone de texte au même costume que les champs */
textarea.inp{min-height:110px;resize:vertical}

/* bandeau d'erreur au-dessus du formulaire */
.err{display:none;background:#fdf0ef;border:1px solid #eec2bd;color:#8c2f26;
  border-radius:8px;padding:13px 16px;font-size:14px;margin-bottom:16px;line-height:1.5}
.err.on{display:block}

/* pages du tunnel : l'en-tête de page clair au-dessus du bloc sombre */
.tunnel-tete{padding:56px 0 46px;text-align:center}
.tunnel-tete h1{font-family:var(--ft);font-size:clamp(26px,3.6vw,38px);font-weight:800;
  letter-spacing:-1.1px;color:var(--encre);text-transform:none;line-height:1.15;margin-bottom:12px}
.tunnel-tete p{color:var(--gris);max-width:62ch;margin:0 auto;font-size:16.5px}
.tunnel-retour{display:inline-block;margin-top:18px;font-size:14px;color:var(--gris)}
.tunnel-retour a{color:var(--turq-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* la mention de fin de formulaire */
.form .fin a{color:var(--turq-d);text-decoration:underline}

/* pied de page : phrase d'inclusion sous la liste des pages locales (addendum A7) */
footer .f-note{font-size:12px;color:#657785;line-height:1.6;margin-top:12px}
footer .f-note a{color:#8ea5b8;text-decoration:underline;text-underline-offset:2px}

/* « Vous êtes » : boutons radio des formulaires */
.radios{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px;font-size:14px;color:var(--gris)}
.radios label{display:flex;align-items:center;gap:7px;cursor:pointer}
.radios input{accent-color:var(--turq);width:15px;height:15px}

/* ============ AJUSTEMENTS VALIDÉS PAR ROCHDI — 08/08/2026 ============ */

/* 1. Bannière d'accueil : la photo de la foreuse plus présente
   (opacité relevée, voile légèrement éclairci — le texte reste lisible) */
.hero-bg img{opacity:.52}
.hero-bg::after{background:radial-gradient(ellipse 74% 60% at 50% 38%,rgba(63,189,240,.16),transparent 66%),
  linear-gradient(180deg,rgba(7,24,42,.48),rgba(7,24,42,.82))}

/* 2. Cartes « intégrées » comme sur le site d'origine : les pastilles G1/G2/G5
   et les blocs de contenu sont posés directement sur la page, sans cadre —
   le relief n'apparaît qu'au survol. Les dossiers (.doss), eux, gardent leur cadre. */
.card,.enj,.step{background:transparent;box-shadow:none}
.card img{border-radius:9px}
@media (hover:hover) and (pointer:fine){
  .card:hover{background:var(--blanc)}
}

/* 3. Le logo tarière (récupéré du site d'origine) dans l'en-tête */
.logo{flex-direction:row;align-items:center;gap:13px}
.logo .logo-t{width:36px;height:auto;flex:0 0 auto}
.logo-txt{display:flex;flex-direction:column;line-height:1.06}

/* 4. Badges de mission dans la liste des 5 missions (page Les Études) */
ol.d-steps li .ic img{width:88px;height:67px;object-fit:cover;border-radius:6px}

/* 5. Bannières de page sur fond sombre (demande Rochdi 08/08) :
   le titre de chaque page intérieure passe en bleu nuit, comme le hero de l'accueil */
.tunnel-tete{background:var(--encre);padding:64px 0 54px}
.tunnel-tete h1{color:#fff}
.tunnel-tete p{color:#b9cede}
.tunnel-tete p b{color:#fff}
.tunnel-tete .tunnel-retour{color:#8ea5b8}
.tunnel-tete .tunnel-retour a{color:var(--turq2)}

/* 6. Les sections de formulaire passent en clair (contraste avec la bannière sombre) */
.devis.devis-jour{background:var(--fond2)}
.devis.devis-jour::before{background-image:var(--strate);opacity:.55}
.devis.devis-jour .dgrid h2{color:var(--encre)}
.devis.devis-jour .dgrid h2 span{color:var(--turq)}
.devis.devis-jour .dgrid>div>p{color:var(--gris)}
.devis.devis-jour .pt{color:var(--gris)}
.devis.devis-jour .pt b{color:var(--encre2)}
.devis.devis-jour .form{border:1px solid var(--trait);box-shadow:0 12px 32px rgba(7,24,42,.10)}

/* ============ PAGES LÉGALES ============ */
.legal .wrap{max-width:860px}
.legal h2{font-family:var(--ft);font-size:19px;font-weight:700;letter-spacing:-.3px;margin:36px 0 10px;color:var(--encre)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--gris);margin-bottom:12px;font-size:15px}
.legal p b{color:var(--encre2)}
.legal ul{margin:0 0 14px 22px;color:var(--gris);font-size:15px}
.legal li{margin-bottom:7px}
.legal a{color:var(--turq-d);text-decoration:underline;text-underline-offset:2px}
.legal .ver{font-size:13px;color:var(--gris2);margin-top:30px;border-top:1px solid var(--trait);padding-top:14px}

/* ============ PAGES VILLES (gabarit ville.py validé) ============ */
.fil{background:var(--blanc);border-bottom:1px solid var(--trait);padding:11px 0;font-size:13px;color:var(--gris2)}
.fil a{color:var(--gris)}
.fil span{margin:0 7px;color:var(--dot)}
@media (hover:hover) and (pointer:fine){.fil a:hover{color:var(--turq)}}
.geo{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;margin-top:8px}
.gc{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:24px 24px 22px;box-shadow:var(--sh)}
.gc .gt{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--turq-d);font-weight:700;margin-bottom:12px}
.gc .gn{font-family:var(--ft);font-size:38px;font-weight:700;line-height:1;color:var(--encre)}
.gc .gn small{display:block;font-family:var(--fb);font-size:14px;font-weight:500;color:var(--gris);margin-top:7px;letter-spacing:0}
.gc ul{list-style:none;margin-top:14px}
.gc ul li{font-size:14.5px;color:var(--gris);padding:7px 0 7px 20px;border-top:1px solid var(--trait);position:relative}
.gc ul li:first-child{border-top:0}
.gc ul li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--turq2)}
.gc ul li b{color:var(--encre2);font-weight:600}
.gsrc{margin-top:22px;background:var(--turq-l);border:1px solid var(--turq-b);border-radius:var(--r);
  padding:16px 20px;font-size:13.5px;color:var(--encre2);line-height:1.6}
.gsrc b{font-weight:600}
.gsrc a{color:var(--turq-d);text-decoration:underline;text-underline-offset:2px}
.gsrc .warn{display:block;margin-top:6px;color:var(--gris)}
.loc{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:26px 28px}
.loc h3{font-family:var(--ft);font-size:18px;font-weight:600;margin-bottom:6px}
.loc p{font-size:14.5px;color:var(--gris);margin-bottom:16px}
@media(max-width:940px){.geo{grid-template-columns:1fr}}

/* en-têtes des blocs départements de l'accueil : cliquables vers les pages départements */
a.dep-h{color:inherit}
a.dep-h b{transition:color 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){a.dep-h:hover b{color:var(--turq)}}

/* ============ PAGE DEVIS SIMPLIFIÉE + FORMULAIRES STRUCTURÉS (11/08, validé) ============ */
/* intertitres des formulaires : « Renseignements personnels », « … sur la parcelle »… */
.f-titre{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--turq-d);margin:22px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--trait)}
.f-titre:first-of-type{margin-top:4px}
/* les portes du devis : versions longues (ordinateur) et courtes (téléphone) */
.porte .lb-court,.porte .go-court{display:none}
@media(max-width:640px){
  .g3.portes{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:9px}
  .g3.portes>.porte{min-width:0;display:flex;flex-direction:column}
  .g3.portes>.porte .go-court{margin-top:auto;padding-top:8px}
  /* les 3 portes restent sur une seule ligne : on annule l'étalement de la 3e carte */
  .g3.portes>*:nth-child(3):last-child{grid-column:auto !important}
  .porte{padding:10px 6px 12px !important;text-align:center !important}
  .porte img{max-width:96px !important;height:auto !important;margin:0 auto 8px !important}
  .porte h3{font-size:13.5px !important;min-height:34px;display:flex;align-items:center;justify-content:center}
  .porte .lb-long,.porte .go-long{display:none}
  .porte .lb-court{display:block;font-size:9px;letter-spacing:.8px}
  .porte .go-court{display:inline-block;font-size:11px;letter-spacing:.8px}
}

/* ============ MENU DÉROULANT « LES ÉTUDES » (11/08/2026) ============
   Ordinateur : déroulant au survol (et au clavier via :focus-within) ; le libellé
   parent reste un lien vers la page pilier. Téléphone : accordéon dans le burger,
   le libellé navigue, le bouton ▾ déplie (script dans base.html). */
.nl li.a-sous{position:relative}
.nl li.a-sous>a .chev{font-size:10px;margin-left:6px;color:var(--gris2);vertical-align:1px}
.sous{position:absolute;top:calc(100% + 10px);left:8px;min-width:250px;background:var(--blanc);
  border:1px solid var(--trait);border-radius:9px;box-shadow:0 16px 38px rgba(7,24,42,.14);
  padding:8px;list-style:none;display:none;z-index:120}
.sous::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* pont de survol */
.nl li.a-sous:hover>.sous,.nl li.a-sous:focus-within>.sous{display:block}
.sous li{list-style:none}
.sous a{display:block;padding:9px 13px;font-size:14px;font-weight:500;color:var(--gris);border-radius:6px;
  transition:color 160ms var(--ease),background-color 160ms var(--ease)}
@media (hover:hover) and (pointer:fine){.sous a:hover{background:var(--fond2);color:var(--encre)}}

/* le même menu dans le burger : accordéon */
.m-sous{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--trait)}
.m-sous>a{flex:1;border-bottom:none}
.m-plus{background:none;border:none;color:var(--turq);font-size:17px;padding:12px 16px;cursor:pointer;
  transition:transform 200ms var(--ease)}
.m-sous.ouvert .m-plus{transform:rotate(180deg)}
.m-liste{display:none;flex-basis:100%;padding:0 0 10px 16px}
.m-sous.ouvert .m-liste{display:block}
.mmenu .m-liste a{display:block;font-size:16px;padding:10px 0;border-bottom:none;color:var(--gris)}

/* ============ BANNIÈRES MISSIONS + NOTE ASTÉRISQUE (11/08/2026) ============
   Sélecteurs volontairement doublés (.tunnel-tete/.devis) : les règles génériques
   .tunnel-tete p et .dgrid>div>p sont plus spécifiques qu'une classe seule. */
/* la ligne discrète sous le bouton d'appel à l'action des bannières sombres */
.btn-note,.tunnel-tete .btn-note{margin-top:12px;margin-bottom:0;font-size:13px;color:#8ea5b8;letter-spacing:.2px}
/* la note de bas de page de l'accueil (astérisque du délai), sur le bloc sombre final */
.note-etoile,.devis .note-etoile{margin-top:30px;margin-bottom:0;font-size:12.5px;color:#7e93a5}

/* ============ MOBILE PLUS COURT (11/08/2026) ============
   1. Les marges verticales entre sections sont réduites d'environ moitié — mobile seulement.
   2. Échelle typographique réduite d'environ 10 % : titres et corps de texte,
      avec deux garde-fous : le corps de texte ne descend jamais sous 16 px, et les
      textes déjà petits (légendes .leg, notes, ligne légale du pied de page) ne bougent pas.
   3. La FAQ se replie en accordéon : voir le script de base.html, qui pose .faq-acc —
      sans JavaScript, la classe est absente et tout reste déplié (le texte reste dans le HTML). */
@media(max-width:640px){
  section{padding:22px 0}
  .hero{padding:46px 0 42px}
  .tunnel-tete{padding:42px 0 36px}
  .sub{margin-bottom:26px}
  .st2::after{margin-top:12px}
  .deroul{margin-top:26px;padding-top:22px}
  footer{padding:40px 0 20px}
  .fg{margin-bottom:24px;gap:26px}

  /* typo −10 % (les minimums des clamp() sont multipliés par 0,9) */
  /* les chiffres des tuiles (.stat>b) et des cartes enjeux (.enj>b) sont des <b>,
     pas des titres : la réduction du 11/08 les avait manqués. À 23 px,
     « NF P 94-500 » tient sur une ligne dans une colonne de 160 px. */
  .stat>b{font-size:23px;letter-spacing:-.8px}
  h1{font-size:clamp(30px,5vw,54px)}
  h1 small{font-size:14px}
  .hero-p{font-size:16px}
  .st2{font-size:clamp(20px,2.7vw,29px)}
  .sub{font-size:16px}
  .tunnel-tete h1{font-size:clamp(23px,3.2vw,34px)}
  .tunnel-tete p{font-size:16px}
  .arg h2{font-size:clamp(19px,2.3vw,27px)}
  .dgrid h2{font-size:clamp(22px,2.7vw,31px)}
  .dgrid>div>p{font-size:16px}
  .deroul h3{font-size:20px}
  .qa h3{font-size:16.5px}
  .form h3{font-size:19px}
  .card h3{font-size:17px}
  .step h3{font-size:16px}

  /* le sous-titre du logo, allongé par « ouvrées », doit tenir sur une ligne
     dans la barre de navigation (hauteur fixe 80 px) */
  .logo-s{font-size:9px;letter-spacing:.5px}
  .logo-r{font-size:9px}
  /* la ligne discrète sous le bouton des bannières tient sur une ligne */
  .btn-note,.tunnel-tete .btn-note{font-size:12.5px;letter-spacing:0}

  /* FAQ en accordéon : questions cliquables, réponses fermées par défaut */
  .faq-acc .qa h3{cursor:pointer;position:relative;padding-right:30px;margin-bottom:0}
  .faq-acc .qa h3::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
    font-family:var(--fb);font-weight:600;font-size:20px;color:var(--turq)}
  .faq-acc .qa p{display:none;margin-top:8px}
  .faq-acc .qa.ouverte h3::after{content:"−"}
  .faq-acc .qa.ouverte p{display:block}
}