/* polices auto-hébergées — aucun appel externe */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/JetBrainsMono-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(polices/SchibstedGrotesk-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;
}

/* ============================================================
   NEXARSIGN — jetons
   Encre = signature courante. Cire = signature renforcée.
   ============================================================ */
:root{
  --encre:      #16213A;   /* texte, boutons primaires, pied de page */
  --encre-vive: #1F3BD8;   /* accent principal : le bleu de l'encre */
  --cire:       #B4342A;   /* sceau : réservé au niveau renforcé */
  --papier:     #FBFAF7;
  --blanc:      #FFFFFF;
  --gris:       #5C6577;
  --filet:      #E4E2DC;
  --filet-fort: #C9C5BC;
  --vert:       #00D4AA;   /* le point du logotype */

  --r-pilule: 999px;
  --r-carte:  18px;

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --page: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{ outline:2.5px solid var(--encre-vive); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:24px; }
.band{ padding-block:104px; }
.band--tight{ padding-block:72px; }

/* ---------- typographie ---------- */
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-0.035em; line-height:0.96; }
h1{ font-size:clamp(42px,5.4vw,63px); }
/* la barre collante ne doit pas manger le titre visé par une ancre */
section[id]{ scroll-margin-top:86px; }
h2{ font-size:clamp(34px,4.6vw,56px); }
h3{ font-size:21px; letter-spacing:-0.02em; line-height:1.25; }
p{ margin:0; }
.lede{ font-size:19px; color:var(--gris); max-width:46ch; }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gris);
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:17px; font-weight:600; line-height:1;
  padding:17px 28px; border-radius:var(--r-pilule);
  border:1.5px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform .14s ease, background-color .14s ease, color .14s ease;
}
.btn:hover{ transform:translateY(-1.5px); }
.btn--primaire{ background:var(--encre-vive); color:var(--blanc); }
.btn--primaire:hover{ background:#1730B4; }
.btn--fantome{ background:transparent; color:var(--encre); border-color:var(--encre); }
.btn--fantome:hover{ background:var(--encre); color:var(--papier); }
.btn--clair{ background:var(--papier); color:var(--encre); }
.btn--petit{ font-size:15px; padding:12px 20px; }

/* ---------- barre de navigation ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(251,250,247,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--filet);
}
.nav__in{ display:flex; align-items:center; gap:34px; height:70px; }
.marque{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-0.03em; text-decoration:none; white-space:nowrap; }
.marque__glyphe{
  width:30px; height:30px; border-radius:8px; background:var(--encre);
  color:var(--papier); display:grid; place-items:center;
  font-family:var(--mono); font-size:16px; font-weight:700;
}
.marque__nom{ display:inline; }
.marque__point{ color:var(--vert); }
.nav__liens{ display:flex; align-items:center; gap:26px; margin-left:8px; }
.nav__liens > a{ display:inline-flex; align-items:center; padding:24px 0; font-size:16px; font-weight:500; color:var(--gris); text-decoration:none; }
.nav__liens > a:hover{ color:var(--encre); }
.nav__fin{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* ============================================================
   HÉROS
   ============================================================ */
.heros{ padding-block:88px 76px; }
.heros__grille{ display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center; }
.heros h1 span{ color:var(--encre-vive); }
/* mention d'ouverture — discrète, au-dessus du titre */
.bientot{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:24px;
  padding:7px 16px 7px 13px; border:1px solid var(--filet-fort); border-radius:var(--r-pilule);
  background:var(--blanc); font-size:14px; color:var(--gris);
}
.bientot__pt{ width:7px; height:7px; border-radius:999px; background:var(--vert); flex:none; }
.bientot a{ color:var(--encre); font-weight:600; text-underline-offset:3px; }
@media (prefers-reduced-motion:no-preference){
  .bientot__pt{ animation:battement 2.4s ease-in-out infinite; }
}
@keyframes battement{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.heros .lede{ margin-top:26px; }
.heros__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.gages{ display:flex; flex-wrap:wrap; gap:11px 26px; margin-top:30px; }
.gage{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--gris); font-weight:500; }
.gage svg{ flex:none; }

/* ---------- LE BORDEREAU (élément signature) ---------- */
.bordereau{
  background:var(--blanc); border:1px solid var(--filet-fort);
  border-radius:var(--r-carte); overflow:hidden;
  box-shadow:0 1px 0 var(--filet-fort), 0 22px 50px -30px rgba(22,33,58,.4);
}
.bordereau__tete{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px; border-bottom:1px solid var(--filet);
  background:linear-gradient(var(--papier),var(--blanc));
}
.bordereau__titre{ font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; }
.bordereau__ref{ font-family:var(--mono); font-size:11.5px; color:var(--gris); }
.bordereau__corps{ padding:6px 20px 14px; }
.ligne{
  display:flex; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--filet);
  font-family:var(--mono); font-size:13px;
}
.ligne:last-child{ border-bottom:0; }
.ligne__cle{ flex:none; width:104px; color:var(--gris); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }
.ligne__val{ flex:1; overflow-wrap:anywhere; font-weight:500; }
.ligne__val .att{ color:var(--encre-vive); }
.bordereau__pied{
  display:flex; align-items:center; gap:10px;
  padding:15px 20px; border-top:1px solid var(--filet); background:var(--papier);
  font-size:14px; font-weight:600;
}
.pastille{ width:9px; height:9px; border-radius:999px; background:#0F9D58; flex:none; }

/* arrivée orchestrée : le bordereau s'écrit ligne à ligne */
@media (prefers-reduced-motion:no-preference){
  .bordereau{ animation:monter .55s cubic-bezier(.2,.7,.3,1) both; }
  .bordereau .ligne,
  .bordereau__pied{ animation:apparait .42s ease both; }
  .bordereau .ligne:nth-child(1){ animation-delay:.34s }
  .bordereau .ligne:nth-child(2){ animation-delay:.46s }
  .bordereau .ligne:nth-child(3){ animation-delay:.58s }
  .bordereau .ligne:nth-child(4){ animation-delay:.70s }
  .bordereau .ligne:nth-child(5){ animation-delay:.82s }
  .bordereau .ligne:nth-child(6){ animation-delay:.94s }
  .bordereau__pied{ animation-delay:1.1s }
}
@keyframes monter{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes apparait{ from{ opacity:0; transform:translateX(-7px) } to{ opacity:1; transform:none } }

/* ============================================================
   DÉPÔT
   ============================================================ */
.depot{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.depot h2{ font-size:clamp(32px,3.6vw,44px); }
.zone{
  border:2px dashed var(--filet-fort); border-radius:var(--r-carte);
  background:var(--blanc); padding:46px 32px; text-align:center;
}
.zone__icone{
  width:52px; height:52px; margin:0 auto 18px; border-radius:14px;
  background:var(--encre-vive); color:var(--blanc); display:grid; place-items:center;
}
.zone__formats{ font-family:var(--mono); font-size:12px; color:var(--gris); margin-top:16px; }

/* ============================================================
   LES DEUX NIVEAUX  ★ cœur de la page
   ============================================================ */
.niveaux{ background:var(--blanc); border-block:1px solid var(--filet); }
.niveaux__intro{ max-width:660px; margin-bottom:56px; }
.niveaux__intro p{ margin-top:20px; font-size:19px; color:var(--gris); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.duo > *{ min-width:0; }

.offre{
  border:1px solid var(--filet-fort); border-radius:var(--r-carte);
  background:var(--papier); padding:32px; position:relative;
}
.offre--fort{ border-color:var(--cire); border-width:1.5px; background:var(--blanc); }
.offre__marque{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.offre__jeton{ width:13px; height:13px; border-radius:3px; flex:none; }
.offre--doux .offre__jeton{ background:var(--encre-vive); }
.offre--doux .offre__marque{ color:var(--encre-vive); }
.offre--fort .offre__jeton{ background:var(--cire); border-radius:999px; }
.offre--fort .offre__marque{ color:var(--cire); }
.offre h3{ font-size:29px; letter-spacing:-0.03em; overflow-wrap:anywhere; }
.offre__pour{ margin-top:12px; color:var(--gris); font-size:16px; }
.offre__prix{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--filet);
  font-size:16px; font-weight:600;
}
.offre__prix b{ font-size:20px; }
.offre--doux .offre__prix{ color:var(--encre-vive); }
.offre--fort .offre__prix{ color:var(--cire); }

/* le bordereau comparatif : sa LONGUEUR est l'argument */
.preuve{ margin-top:24px; border:1px solid var(--filet); border-radius:12px; background:var(--blanc); }
.offre--fort .preuve{ background:var(--papier); }
.preuve__tete{
  padding:11px 16px; border-bottom:1px solid var(--filet);
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gris);
}
.preuve ul{ margin:0; padding:8px 16px 14px; list-style:none; }
.preuve li{
  display:block; position:relative; padding:9px 0 9px 25px; font-size:14.5px; line-height:1.45;
  border-bottom:1px dashed var(--filet);
}
.preuve li:last-child{ border-bottom:0; }
.preuve li svg{ position:absolute; left:0; top:12px; }
.absent{ color:#9AA0AC; }

.bascule{
  margin-top:34px; padding:24px 28px; border-radius:var(--r-carte);
  background:var(--encre); color:var(--papier);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.bascule p{ flex:1; min-width:280px; font-size:17.5px; line-height:1.5; }
.bascule b{ color:#FFF; }

/* ============================================================
   QUATRE PROMESSES
   ============================================================ */
.quatre{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px; }
.brique{ background:var(--blanc); border:1px solid var(--filet); border-radius:var(--r-carte); padding:26px 24px; }
.brique h3{ font-size:18.5px; margin-bottom:9px; }
.brique p{ font-size:15px; color:var(--gris); line-height:1.55; }
.brique__trait{ display:block; width:26px; height:2.5px; background:var(--encre-vive); border-radius:2px; margin-bottom:18px; }

/* ============================================================
   TARIFS
   ============================================================ */
.tarifs{ background:var(--blanc); border-block:1px solid var(--filet); }
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; align-items:start; }
.plan{ border:1px solid var(--filet-fort); border-radius:var(--r-carte); padding:28px 22px; background:var(--papier); }
.plan--phare{ border-color:var(--encre); border-width:1.5px; background:var(--blanc); position:relative; }
.plan__badge{
  position:absolute; top:-11px; left:26px; padding:4px 12px; border-radius:var(--r-pilule);
  background:var(--encre); color:var(--papier);
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.plan h3{ font-size:22px; }
.plan__somme{ margin:16px 0 4px; font-size:36px; font-weight:700; letter-spacing:-0.04em; line-height:1; }
.plan__somme span{ font-size:15px; font-weight:500; color:var(--gris); letter-spacing:0; }
.plan__note{ font-size:14.5px; color:var(--gris); min-height:42px; }
.plan ul{ margin:20px 0 26px; padding:0; list-style:none; border-top:1px solid var(--filet); }
.plan li{ display:block; position:relative; padding:10px 0 10px 25px; font-size:15px; border-bottom:1px dashed var(--filet); }
.plan li:last-child{ border-bottom:0; }
.plan li svg{ position:absolute; left:0; top:14px; }
.plan .btn{ width:100%; justify-content:center; }

.credit{
  margin-top:26px; border:1.5px solid var(--cire); border-radius:var(--r-carte);
  background:var(--papier); padding:28px 30px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.credit__txt{ flex:1; min-width:300px; }
.credit h3{ color:var(--cire); font-size:21px; }
.credit p{ margin-top:9px; color:var(--gris); font-size:16px; }
.credit__somme{ font-size:34px; font-weight:700; letter-spacing:-0.04em; color:var(--cire); white-space:nowrap; }
.credit__somme span{ font-size:14px; font-weight:500; color:var(--gris); letter-spacing:0; }

/* le palier qui embarque la renforcée porte la couleur du sceau */
.plan--sceau{ border-color:var(--cire); border-width:1.5px; background:var(--blanc); position:relative; }
.plan__badge--sceau{ background:var(--cire); }

/* ---------- les trois niveaux de la loi ---------- */
.loi__titre{ margin-top:76px; font-size:clamp(26px,3vw,34px); letter-spacing:-0.03em; }
.loi__intro{ margin-top:14px; max-width:60ch; color:var(--gris); font-size:17px; }
.compare--loi{ min-width:820px; }
.compare--loi tbody td{ text-align:left; font-size:14.5px; line-height:1.5; color:var(--gris); vertical-align:top; }
.compare--loi tbody th[scope="row"]{ min-width:200px; font-weight:600; }
.compare--loi .loi__nous th,
.compare--loi .loi__nous td{ background:var(--blanc); border-top:1.5px solid var(--filet-fort); font-size:15px; }
.compare--loi .loi__nous td{ font-weight:700; }
.compare--loi .loi__nous span{ display:block; margin-top:3px; font-family:var(--mono); font-size:11px; font-weight:400; color:var(--gris); }

/* ---------- le bloc de franchise ---------- */
.franc{ margin-top:34px; border:1.5px solid var(--encre); border-radius:var(--r-carte); background:var(--papier); padding:36px 34px; }
.franc__q{ font-size:clamp(22px,2.4vw,28px); letter-spacing:-0.03em; max-width:22ch; }
.franc__grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:28px; padding-bottom:28px; border-bottom:1px solid var(--filet-fort); }
.franc__pt h4{ margin:0 0 9px; font-size:16px; font-weight:700; letter-spacing:-0.02em; line-height:1.3; }
.franc__pt h4::before{ content:""; display:block; width:22px; height:2.5px; background:var(--cire); border-radius:2px; margin-bottom:14px; }
.franc__pt p{ font-size:14.5px; line-height:1.55; color:var(--gris); }
.franc__bilan{ display:grid; gap:14px; margin-top:26px; max-width:78ch; justify-items:start; }
.franc__bilan p{ font-size:16px; line-height:1.6; color:var(--gris); }
.franc__bilan b{ color:var(--encre); }

/* ---------- tableau comparatif ---------- */
.compare__titre{ margin-top:76px; font-size:clamp(26px,3vw,34px); letter-spacing:-0.03em; }
.compare__cadre{ margin-top:26px; overflow-x:auto; border:1px solid var(--filet-fort); border-radius:var(--r-carte); background:var(--papier); }
.compare{ width:100%; min-width:720px; border-collapse:collapse; font-size:15px; }
.compare th,.compare td{ padding:13px 16px; text-align:center; border-bottom:1px solid var(--filet); }
.compare thead th{
  position:sticky; top:0; background:var(--papier); z-index:1;
  font-size:16px; font-weight:700; letter-spacing:-0.02em;
  border-bottom:1.5px solid var(--filet-fort); vertical-align:bottom; padding-block:18px;
}
.compare thead th span{ display:block; margin-top:4px; font-family:var(--mono); font-size:11.5px; font-weight:400; color:var(--gris); letter-spacing:0; }
.compare thead .col--phare{ color:var(--encre-vive); }
.compare thead .col--sceau{ color:var(--cire); }
.compare tbody th[scope="row"]{ text-align:left; font-weight:500; color:var(--encre); min-width:230px; }
.compare tbody tr:last-child th,.compare tbody tr:last-child td{ border-bottom:0; }
.compare tbody tr:not(.rubrique):hover{ background:var(--blanc); }
.compare .rubrique th{
  text-align:left; background:var(--blanc);
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
  padding-block:11px; border-bottom:1px solid var(--filet-fort);
}
.compare .ok{ color:var(--encre-vive); font-weight:600; }
.compare .non{ color:#B7BCC6; }
.compare .fort{ color:var(--cire); font-weight:700; }
.compare .ligne--sceau{ background:rgba(180,52,42,.045); }
.compare__note{ margin-top:16px; font-size:14px; color:var(--gris); }

/* ============================================================
   PROFILS
   ============================================================ */
.profils{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:52px; }
.profil{ border-top:2px solid var(--encre); padding-top:20px; }
.profil h3{ font-size:19px; }
.profil p{ margin-top:9px; font-size:15px; color:var(--gris); line-height:1.55; }

/* ============================================================
   ÉTAPES (une vraie séquence → la numérotation porte du sens)
   ============================================================ */
.etapes{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:52px; border-top:1px solid var(--filet-fort); }
.etape{ padding:28px 26px 28px 0; border-right:1px solid var(--filet); }
.etape:last-child{ border-right:0; }
.etape__n{
  font-family:var(--mono); font-size:34px; font-weight:700; line-height:1;
  color:var(--filet-fort); letter-spacing:-0.04em; display:block; margin-bottom:16px;
}
.etape h3{ font-size:18px; }
.etape p{ margin-top:9px; font-size:15px; color:var(--gris); line-height:1.55; }

/* ============================================================
   QUESTIONS
   ============================================================ */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.faq__liste{ border-top:1px solid var(--filet-fort); }
details{ border-bottom:1px solid var(--filet); }
summary{
  list-style:none; cursor:pointer; padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:17.5px; font-weight:600; letter-spacing:-0.015em;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; font-family:var(--mono); font-size:22px; font-weight:400;
  color:var(--encre-vive); flex:none; transition:transform .2s ease;
}
details[open] summary::after{ transform:rotate(45deg); }
details p{ padding:0 40px 22px 0; color:var(--gris); font-size:16px; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{ background:var(--encre); color:var(--papier); padding-block:64px 34px; }
.pied a{ color:rgba(251,250,247,.72); text-decoration:none; font-size:15px; }
.pied a:hover{ color:var(--blanc); }
.pied__haut{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:48px; border-bottom:1px solid rgba(251,250,247,.16); }
.pied__haut h2{ font-size:clamp(28px,3.6vw,40px); }
.pied .marque__glyphe{ background:var(--papier); color:var(--encre); }
.pied__cols{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-block:44px; }
.pied__cols h4{ margin:0 0 16px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,247,.52); }
.pied__cols ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.pied__legal{ padding-top:26px; border-top:1px solid rgba(251,250,247,.16); font-size:13px; color:rgba(251,250,247,.55); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ============================================================
   ADAPTATIF
   ============================================================ */
@media (max-width:1100px){
  .plans{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1000px){
  .heros__grille,.depot,.faq{ grid-template-columns:1fr; gap:48px; }
  .quatre,.profils{ grid-template-columns:1fr 1fr; }
  .etapes{ grid-template-columns:1fr 1fr; }
  .etape:nth-child(2){ border-right:0; }
  .pied__cols{ grid-template-columns:1fr 1fr 1fr; }
  .nav__liens{ display:none; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .band{ padding-block:68px; }
  .heros{ padding-block:52px 60px; }
  .heros__grille{ display:flex; flex-direction:column-reverse; }
  .duo,.quatre,.profils,.plans,.etapes,.franc__grille{ grid-template-columns:1fr; }
  .franc{ padding:26px 22px; }
  .loi__titre{ margin-top:56px; }
  .compare__titre{ margin-top:56px; }
  .compare tbody th[scope="row"]{ min-width:190px; }
  .etape{ border-right:0; border-bottom:1px solid var(--filet); padding-right:0; }
  .etape:last-child{ border-bottom:0; }
  .pied__cols{ grid-template-columns:1fr 1fr; }
  .btn{ width:100%; justify-content:center; }
  .btn--petit{ width:auto; }
  .heros__actions{ flex-direction:column; }
  .nav__fin .btn--fantome{ display:none; }
  .nav__in{ gap:14px; }
  .marque{ font-size:17px; }
  /* le bordereau doit rester lisible sans dévorer le premier écran */
  .ligne{ font-size:12px; padding:9px 0; }
  .ligne__cle{ width:78px; font-size:10px; }
  .bordereau__corps{ padding-inline:15px; }
  .bordereau__tete,.bordereau__pied{ padding-inline:15px; }
  .bordereau__pied{ font-size:13px; }
}
/* libellé long du CTA réservé au grand écran */
.cta__long{ display:inline; }
@media (max-width:720px){ .cta__long{ display:none; } }

/* ============================================================
   MENUS DÉROULANTS — sans JavaScript
   Ouverts au survol et au focus clavier (:focus-within).
   ============================================================ */
.menu{ position:relative; }
.menu__tete{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:16px; font-weight:500; color:var(--gris);
  background:none; border:0; padding:24px 0; cursor:pointer;
}
.menu__tete:hover{ color:var(--encre); }
.menu__fleche{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; opacity:.55; transition:transform .18s ease;
}
.menu:hover .menu__fleche,
.menu:focus-within .menu__fleche{ transform:rotate(180deg); }

.menu__tiroir{
  position:absolute; top:100%; left:-18px; z-index:30;
  min-width:310px; padding:10px; border-radius:var(--r-carte);
  background:var(--blanc); border:1px solid var(--filet-fort);
  box-shadow:0 20px 44px -24px rgba(22,33,58,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.menu:hover .menu__tiroir,
.menu:focus-within .menu__tiroir{ opacity:1; visibility:visible; transform:none; }

.menu__tiroir a{
  display:block; padding:11px 13px; border-radius:11px; text-decoration:none;
}
.menu__tiroir a:hover{ background:var(--papier); }
.menu__tiroir b{ display:block; font-size:15px; font-weight:600; color:var(--encre); letter-spacing:-0.015em; }
.menu__tiroir span{ display:block; margin-top:2px; font-size:13.5px; color:var(--gris); line-height:1.4; }

/* grille à trois colonnes — en classe, pour que l'adaptatif puisse la reprendre */
.quatre--trois{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .quatre--trois{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .quatre--trois{ grid-template-columns:1fr; } }

/* ---------- en-tête des pages secondaires ---------- */
.page__tete{ padding-block:76px 8px; }
.page__tete h1{ margin-top:16px; font-size:clamp(38px,4.8vw,58px); }
.lede--large{ margin-top:24px; font-size:20px; max-width:62ch; }

/* la bascule sert aussi d'appel à l'action en pied de page */
.bascule h3{ color:var(--papier); }
.bascule p{ color:rgba(251,250,247,.82); }

@media (max-width:1000px){
  /* au-delà de la tablette la barre passe en mode réduit : le pied de page
     porte alors toute la navigation */
  .menu{ display:none; }
}