/* ============================================================
   AUTO PROTECT 974 — Direction artistique
   ------------------------------------------------------------
   Territoire  : océan profond, lagon, sable, corail, soleil
   Signature   : courbes de niveau (relief de l'île)
   Typographie : Fraunces (titres, serif chaleureux)
                 Manrope  (texte et interface)
   Formes      : boutons pleinement arrondis, cartes douces,
                 ombres teintées lagon
   ============================================================ */

:root{
  /* --- Territoire --- */
  --abysse:#062E38;
  --abysse-2:#0B404D;
  --encre:#10262C;
  --texte:#48605F;
  --doux:#7C9296;

  --sable:#FBF7F0;
  --sable-2:#F4EDE1;
  --coquille:#E7DDCC;
  --coquille-d:rgba(255,255,255,.13);
  --coquille-d2:rgba(255,255,255,.07);

  --lagon:#0B7377;
  --lagon-vif:#12A6A6;
  --lagon-pale:#E0F1EF;
  --lagon-nuit:#0E5B60;

  --corail:#E0533D;
  --corail-fonce:#C4402B;
  --corail-pale:#FCEDE8;
  --soleil:#EDA53A;

  /* --- Formes --- */
  --maxw:1160px;
  --r-xs:10px;
  --r:18px;
  --r-lg:26px;
  --pill:999px;
  --ombre:0 2px 4px rgba(6,46,56,.04), 0 18px 40px -22px rgba(6,46,56,.30);
  --ombre-lg:0 3px 6px rgba(6,46,56,.05), 0 34px 70px -30px rgba(6,46,56,.42);
  --ombre-lagon:0 14px 30px -14px rgba(11,115,119,.55);
  --ease:cubic-bezier(.2,.75,.25,1);

  /* --- Typographie --- */
  --titre:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --corps:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sable); color:var(--texte);
  font-family:var(--corps); font-size:16.5px; line-height:1.68; font-weight:450;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
p{margin:0 0 1em}

h1,h2,h3,h4{
  font-family:var(--titre); color:var(--encre); margin:0 0 .5em; font-weight:600;
  font-optical-sizing:auto; font-variation-settings:'SOFT' 40, 'WONK' 1;
}
h1{font-size:clamp(2.3rem,5.6vw,3.85rem); line-height:1.04; letter-spacing:-.022em}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.018em}
h3{font-family:var(--corps); font-size:1.08rem; font-weight:700; letter-spacing:-.012em; line-height:1.35}
h4{font-family:var(--corps); font-size:.95rem; font-weight:700; letter-spacing:-.008em}
strong,b{font-weight:700; color:var(--encre)}
em{font-style:italic}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--lagon);color:#fff;padding:13px 20px;z-index:999;font-weight:700;border-radius:0 0 var(--r-xs) 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--lagon-vif); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 40px, var(--maxw)); margin-inline:auto}
.wrap--narrow{width:min(100% - 40px, 760px)}

/* ============================================================
   SIGNATURES DE MARQUE
   ============================================================ */

/* Chapeau de section : pastille lagon avec point corail */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 1.4rem;
  padding:7px 15px 7px 12px; border-radius:var(--pill);
  background:var(--lagon-pale); color:var(--lagon);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--corail); flex:none}
.eyebrow--light{background:rgba(18,166,166,.16); color:#8FE3DE}

/* Coordonnées de l'île — signature discrète */
.coord{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--doux); margin:1.6rem 0 0;
}
.coord span{color:var(--corail)}

/* Trait de niveau tracé sous un mot clé */
.souligne{position:relative; white-space:nowrap}
.souligne svg{position:absolute; left:0; right:0; bottom:-.22em; width:100%; height:.34em; overflow:visible}
.souligne path{fill:none; stroke:var(--corail); stroke-width:7; stroke-linecap:round; opacity:.85}

/* Relief : courbes de niveau en fond */
.relief{position:absolute; pointer-events:none; color:var(--lagon)}
.relief path{fill:none; stroke:currentColor; stroke-width:1.1; vector-effect:non-scaling-stroke}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--corps); font-weight:800; font-size:.95rem; letter-spacing:-.005em;
  padding:16px 30px; border-radius:var(--pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap; line-height:1.2;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
             transform .14s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary{background:var(--lagon); color:#fff; box-shadow:var(--ombre-lagon)}
.btn--primary:hover{background:var(--lagon-nuit); transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(11,115,119,.65)}
.btn--primary:active{transform:translateY(0)}
.btn--corail{background:var(--corail); color:#fff; box-shadow:0 14px 30px -14px rgba(224,83,61,.6)}
.btn--corail:hover{background:var(--corail-fonce); transform:translateY(-2px)}
.btn--outline{background:transparent; color:var(--encre); border-color:var(--coquille)}
.btn--outline:hover{border-color:var(--lagon); color:var(--lagon)}
.btn--onsombre{background:rgba(255,255,255,.08); color:#fff; border-color:var(--coquille-d)}
.btn--onsombre:hover{background:rgba(255,255,255,.15)}
.btn--sm{padding:11px 20px; font-size:.85rem}
.btn--lg{padding:19px 34px; font-size:1.02rem}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:100; background:rgba(251,247,240,.86);
  backdrop-filter:blur(16px) saturate(170%); border-bottom:1px solid rgba(231,221,204,.7);
}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand__mark{width:34px; height:34px; flex:none; color:var(--lagon)}
.brand__mark .c1{fill:var(--corail)}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__name{font-family:var(--titre); font-size:1.24rem; font-weight:600; letter-spacing:-.02em; color:var(--encre); font-variation-settings:'SOFT' 40,'WONK' 1}
.brand__name span{color:var(--lagon)}
.brand__tag{margin-top:4px; font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--doux)}

.nav{display:flex; align-items:center; gap:2px}
.nav a{
  text-decoration:none; color:var(--texte); font-size:.91rem; font-weight:600;
  padding:10px 14px; border-radius:var(--pill); transition:color .18s, background .18s;
}
.nav a:hover{color:var(--lagon); background:var(--lagon-pale)}
.nav .btn{margin-left:10px; color:#fff}
.nav .btn:hover{background:var(--lagon-nuit); color:#fff}

.burger{display:none; background:transparent; border:1.5px solid var(--coquille); border-radius:var(--pill);
  width:48px; height:48px; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:17px; height:2px; background:var(--encre); border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,88px)}
.hero__relief{top:-14%; right:-16%; width:min(760px,86vw); opacity:.24}
.hero__in{position:relative; max-width:760px}
.hero h1 .accent{color:var(--lagon)}
.hero__lede{font-size:clamp(1.04rem,1.5vw,1.2rem); color:var(--texte); max-width:600px; margin:1.9rem 0 0}

.pills{display:flex; flex-wrap:wrap; gap:9px; margin:2rem 0 0; padding:0; list-style:none}
.pills li{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--pill);
  background:#fff; border:1px solid var(--coquille); font-size:.86rem; font-weight:600; color:var(--texte);
}
.pills li::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--lagon-vif); flex:none}

.hero__cta{display:flex; gap:12px; margin:2.2rem 0 0; flex-wrap:wrap}
.rating{margin:1.5rem 0 0; font-size:.88rem; color:var(--doux); line-height:1.8}
.rating__stars{color:var(--soleil); letter-spacing:2px; font-size:.95rem; margin-right:8px}
.rating b{color:var(--encre); font-weight:800}

/* ============================================================
   BANDEAU CHIFFRES
   ============================================================ */
.figures{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:1px solid var(--coquille); border-radius:var(--r-lg);
  box-shadow:var(--ombre); overflow:hidden;
}
.figure{padding:30px 26px; border-right:1px solid var(--coquille)}
.figure:last-child{border-right:0}
.figure b{display:block; font-family:var(--titre); font-size:clamp(1.7rem,2.8vw,2.25rem); font-weight:600;
  letter-spacing:-.03em; color:var(--lagon); line-height:1; font-variation-settings:'SOFT' 40,'WONK' 1}
.figure span{display:block; margin-top:10px; font-size:.83rem; color:var(--doux); line-height:1.45; font-weight:500}

/* ============================================================
   ENCART STATUT
   ============================================================ */
.statut{padding:clamp(40px,5vw,56px) 0 0}
.statut__in{
  display:flex; gap:18px; align-items:flex-start; padding:24px 28px;
  background:var(--corail-pale); border:1px solid #F3D8CF; border-radius:var(--r);
}
.statut__k{
  flex:none; margin-top:1px; padding:6px 12px; border-radius:var(--pill);
  background:var(--corail); color:#fff; font-size:.65rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
}
.statut p{margin:0; font-size:.93rem; color:#6A3A2E; line-height:1.65}
.statut a{color:var(--corail-fonce); font-weight:700; text-underline-offset:3px}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative; padding:clamp(66px,8vw,108px) 0}
.sec--sable{background:var(--sable-2)}
.sec--sombre{position:relative; overflow:hidden; background:var(--abysse); color:rgba(255,255,255,.74)}
.sec--sombre h2,.sec--sombre h3,.sec--sombre h4{color:#fff}
.sec--sombre .sec__sub{color:rgba(255,255,255,.6)}
.sec__head{max-width:660px; margin:0 0 3.2rem}
.sec__sub{font-size:1.04rem; color:var(--texte); margin:1.1rem 0 0}

/* ---------- Étapes ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.steps li{
  position:relative; background:#fff; border:1px solid var(--coquille); border-radius:var(--r-lg);
  padding:34px 30px 32px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.steps li:hover{transform:translateY(-4px); box-shadow:var(--ombre)}
.step__n{
  display:block; font-family:var(--titre); font-size:2.4rem; font-weight:600; line-height:1;
  color:var(--corail); margin-bottom:20px; font-variation-settings:'SOFT' 40,'WONK' 1;
}
.steps p{margin:0; font-size:.94rem}

/* ---------- Listes cochées ---------- */
.rows{margin:0; padding:0; list-style:none; display:grid; gap:4px}
.rows li{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--coquille)}
.rows li:last-child{border-bottom:0}
.rows i{
  flex:none; width:26px; height:26px; margin-top:2px; border-radius:50%;
  background:var(--lagon-pale); color:var(--lagon); font-style:normal; font-size:.74rem; font-weight:800;
  display:grid; place-items:center;
}
.rows h3{margin:0 0 5px}
.rows p{margin:0; font-size:.93rem; max-width:78ch}
.sec--sombre .rows li{border-bottom-color:var(--coquille-d2)}
.sec--sombre .rows i{background:rgba(18,166,166,.18); color:#7FD9D4}
.sec--sombre .rows p{color:rgba(255,255,255,.6)}

.cols2{display:grid; grid-template-columns:1fr 1fr; gap:0 56px}

/* ---------- Section sombre : relief + communes ---------- */
.sec--sombre .relief{color:#12A6A6}
.reunion__relief{top:-30%; right:-10%; width:min(620px,80vw); opacity:.2}
.communes{margin-top:44px; padding:30px 32px; border-radius:var(--r); background:rgba(255,255,255,.045); border:1px solid var(--coquille-d2)}
.communes h4{margin-bottom:14px}
.communes p{margin:0; font-size:.87rem; line-height:2.05; color:rgba(255,255,255,.55); font-weight:500}

/* ============================================================
   PANNEAU BUDGET
   ============================================================ */
.panel{background:#fff; border:1px solid var(--coquille); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--ombre)}
.panel__hd{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 28px; background:var(--sable-2); border-bottom:1px solid var(--coquille)}
.panel__hd b{font-family:var(--titre); font-size:1.02rem; font-weight:600; color:var(--encre); font-variation-settings:'SOFT' 40,'WONK' 1}
.panel__hd span{font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--doux)}
.panel__body{padding:8px 14px}
.prow{display:flex; align-items:center; gap:18px; padding:18px 14px; border-radius:var(--r); border:1.5px solid transparent}
.prow + .prow{border-top:1px solid var(--coquille); border-radius:0}
.prow__n{flex:none; width:30px; height:30px; border-radius:50%; background:var(--sable-2); color:var(--doux);
  display:grid; place-items:center; font-size:.76rem; font-weight:800}
.prow__t{flex:1; min-width:0}
.prow__t b{display:block; font-size:.96rem; font-weight:700; color:var(--encre)}
.prow__t span{display:block; font-size:.83rem; color:var(--doux); margin-top:2px}
.prow__p{font-family:var(--titre); font-size:1.02rem; font-weight:600; color:var(--encre); white-space:nowrap; font-variation-settings:'SOFT' 40}
.prow--hi{background:var(--lagon-pale); border-color:rgba(11,115,119,.28); border-radius:var(--r) !important}
.prow--hi + .prow{border-top:0}
.prow--hi .prow__n{background:var(--lagon); color:#fff}
.prow--hi .prow__p{color:var(--lagon)}
.disclaimer{margin:22px 0 0; font-size:.81rem; color:var(--doux); max-width:780px; line-height:1.65}

/* ============================================================
   AVIS
   ============================================================ */
.avis-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.avis{margin:0; background:#fff; border:1px solid var(--coquille); border-radius:var(--r-lg); padding:32px 30px; display:flex; flex-direction:column}
.avis .stars{color:var(--soleil); letter-spacing:2.5px; font-size:.92rem; margin-bottom:16px}
.avis blockquote{margin:0 0 22px; font-family:var(--titre); font-size:1.05rem; font-weight:400; line-height:1.55;
  color:var(--encre); flex:1; font-variation-settings:'SOFT' 60,'WONK' 1}
.avis figcaption{padding-top:18px; border-top:1px solid var(--coquille)}
.avis figcaption b{display:block; font-size:.92rem; font-weight:700; color:var(--encre)}
.avis figcaption span{font-size:.8rem; color:var(--doux); font-weight:500}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--coquille); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s, border-color .2s}
.faq details[open]{box-shadow:var(--ombre); border-color:#DCD0BB}
.faq summary{list-style:none; cursor:pointer; padding:22px 62px 22px 26px; position:relative;
  font-family:var(--titre); font-weight:600; font-size:1.04rem; color:var(--encre); line-height:1.35;
  font-variation-settings:'SOFT' 40,'WONK' 1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:22px; top:50%; margin-top:-14px;
  width:28px; height:28px; border-radius:50%; background:var(--lagon-pale)}
.faq summary::before{content:'+'; position:absolute; right:22px; top:50%; margin-top:-14px;
  width:28px; height:28px; display:grid; place-items:center; z-index:1;
  color:var(--lagon); font-family:var(--corps); font-size:1.05rem; font-weight:800;
  transition:transform .28s var(--ease)}
.faq details[open] summary::before{content:'–'; transform:rotate(180deg)}
.faq div{padding:0 26px 24px}
.faq div p{margin:0 0 .8em; font-size:.94rem}
.faq div p:last-child{margin-bottom:0}
.faq a{color:var(--lagon); font-weight:700}

/* ============================================================
   CTA FINAL
   ============================================================ */
.final{position:relative; overflow:hidden; background:var(--abysse); color:rgba(255,255,255,.7); padding:clamp(70px,8vw,108px) 0}
.final__relief{bottom:-52%; left:-8%; width:min(680px,82vw); opacity:.2; color:#12A6A6}
.final .wrap{position:relative}
.final h2{color:#fff; max-width:17ch}
.final p{color:rgba(255,255,255,.62); max-width:52ch; margin:1.3rem 0 2.3rem}
.final .coord{color:rgba(255,255,255,.4); margin-top:2.2rem}
.final .coord span{color:#7FD9D4}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.ftr{background:var(--abysse); color:rgba(255,255,255,.62); padding:0 0 36px; font-size:.89rem; border-top:1px solid var(--coquille-d2)}
.ftr__in{display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:44px; padding:58px 0 46px}
.ftr .brand__name{color:#fff}
.ftr .brand__name span{color:#7FD9D4}
.ftr .brand__mark{color:#7FD9D4}
.ftr__col h4{color:rgba(255,255,255,.42); font-size:.68rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; margin-bottom:18px}
.ftr__col a,.ftr__col p.line{display:block; color:rgba(255,255,255,.72); text-decoration:none; padding:6px 0; margin:0; transition:color .18s}
.ftr__col a:hover{color:#7FD9D4}
.ftr__about{margin:20px 0 0; color:rgba(255,255,255,.45); font-size:.85rem; line-height:1.7; max-width:42ch}
.ftr__bottom{border-top:1px solid var(--coquille-d2); padding-top:26px}
.ftr__bottom p{margin:0; font-size:.78rem; color:rgba(255,255,255,.38); line-height:1.7; max-width:92ch}
.ftr__bottom a{color:rgba(255,255,255,.6)}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.legal{padding:clamp(44px,6vw,76px) 0 clamp(64px,8vw,100px)}
.legal h1{font-size:clamp(2rem,4.2vw,2.9rem); margin-bottom:.35em}
.legal .updated{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--doux); margin-bottom:2.8rem}
.legal h2{font-size:1.42rem; margin:2.8rem 0 .8em; padding-top:1.8rem; border-top:1px solid var(--coquille)}
.legal h3{font-size:1.02rem; margin:1.9rem 0 .5em}
.legal p,.legal li{font-size:.96rem}
.legal ul{padding-left:20px} .legal li{margin-bottom:.55em}
.legal a{color:var(--lagon); font-weight:700}
.legal .box{background:var(--lagon-pale); border:1px solid rgba(11,115,119,.2); border-radius:var(--r); padding:24px 28px; margin:1.9rem 0}
.legal .box p:last-child{margin-bottom:0}
.legal table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.9rem; background:#fff;
  border-radius:var(--r-xs); overflow:hidden}
.legal th,.legal td{border:1px solid var(--coquille); padding:13px 15px; text-align:left; vertical-align:top}
.legal th{background:var(--sable-2); font-weight:700; color:var(--encre)}
.backlink{display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--doux); text-decoration:none; margin-bottom:2.4rem}
.backlink:hover{color:var(--lagon)}

/* ============================================================
   PAGE MERCI
   ============================================================ */
.thanks{position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0}
.thanks__relief{top:-40%; right:-14%; width:min(640px,84vw); opacity:.22}
.thanks__in{position:relative; max-width:640px}
.thanks__k{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:1.8rem;
  padding:9px 18px; border-radius:var(--pill); background:var(--lagon-pale); color:var(--lagon);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.thanks h1{font-size:clamp(2rem,4.4vw,3rem)}
.thanks .rows{margin-top:2.6rem}
.thanks .rows i{background:var(--corail-pale); color:var(--corail-fonce)}

/* ============================================================
   RÉVÉLATION AU DÉFILEMENT
   ============================================================ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .cols2{grid-template-columns:1fr; gap:0}
  .steps,.avis-grid{grid-template-columns:1fr 1fr}
  .steps li:last-child,.avis:last-child{grid-column:1/-1}
  .ftr__in{grid-template-columns:1fr 1fr; gap:34px}
  .ftr__col--brand{grid-column:1/-1}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:78px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--sable); border-bottom:1px solid var(--coquille); padding:10px 20px 24px;
    transform:translateY(-140%); transition:transform .34s var(--ease);
    max-height:calc(100vh - 78px); overflow:auto; box-shadow:var(--ombre);
  }
  .nav.is-open{transform:none}
  .nav a{padding:15px 6px; font-size:1rem; border-bottom:1px solid var(--coquille); border-radius:0}
  .nav a:hover{background:none}
  .nav .btn{margin:18px 0 0; padding:17px; font-size:.98rem; border-bottom:0}
  .nav--simple{position:static; flex-direction:row; background:none; border:0; padding:0;
    transform:none; max-height:none; overflow:visible; box-shadow:none}
  .nav--simple a:not(.btn){display:none}
  .nav--simple .btn{margin:0; padding:11px 18px; font-size:.83rem; border-bottom:0}

  .figures{grid-template-columns:1fr 1fr}
  .figure{border-bottom:1px solid var(--coquille)}
  .figure:nth-child(2n){border-right:0}
  .figure:nth-child(n+3){border-bottom:0}

  .steps,.avis-grid{grid-template-columns:1fr}
  .steps li:last-child,.avis:last-child{grid-column:auto}
}
@media (max-width:600px){
  .wrap,.wrap--narrow{width:calc(100% - 32px)}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .statut__in{flex-direction:column; gap:14px; padding:22px}
  .panel__hd{flex-direction:column; align-items:flex-start; gap:6px}
  .prow{flex-wrap:wrap; gap:12px}
  .prow__p{width:100%; padding-left:48px}
  .ftr__in{grid-template-columns:1fr; gap:28px; padding:46px 0 36px}
  .communes{padding:24px}
}