/* =====================================================================
   SafeNTy — site vitrine
   Design system mobile first. Aucune dépendance, aucune compilation.
   ===================================================================== */

:root {
  /* Bleu de marque */
  --b-50:#eef4fb; --b-100:#d9e6f4; --b-200:#b3cce8; --b-300:#82abd6;
  --b-400:#4d84bd; --b-500:#2a63a0; --b-600:#1d4d84; --b-700:#173f6c;
  --b-800:#133965; --b-900:#0e2a4b; --b-950:#081a30;
  /* Vert SafeNTy */
  --m-100:#e2f7ee; --m-200:#c0efdc; --m-300:#93e2c3; --m-400:#63d29f;
  --m-500:#33bd83; --m-600:#1e9c6b; --m-700:#177a55;
  /* Accent chaud */
  --o-400:#fda72f; --o-500:#f0910f; --o-600:#cf7605;

  --bg:#ffffff;
  --bg-soft:#f3f7fb;
  --bg-sunk:#e9f1f8;
  --surface:#ffffff;
  --text:#0f2440;
  --text-soft:#4a6076;
  /* #6b8199 jusqu'au 10 septembre 2026 : 4,02 sur blanc, 3,73 sur --bg-soft et
     3,49 sur --bg-sunk — sous le seuil de 4,5 partout où il servait, c'est-à-dire
     le fil d'Ariane, les mentions « Non inclus » du tableau comparatif, les
     libellés de périodicité. Un seul jeton corrigeait toutes ces occurrences.
     Nouvelles valeurs mesurées : 5,41 sur blanc, 4,92 sur --bg-soft, 4,74 sur
     --bg-sunk. Le jeton du thème sombre (#8ba2b9) était déjà à 6,9 : inchangé. */
  --text-mute:#566c85;
  --line:rgba(19,57,101,.12);
  --line-strong:rgba(19,57,101,.22);
  --ring:rgba(99,210,159,.45);

  --shadow-1:0 1px 2px rgba(8,26,48,.05), 0 2px 8px rgba(8,26,48,.05);
  --shadow-2:0 4px 12px rgba(8,26,48,.07), 0 16px 40px rgba(8,26,48,.09);
  --shadow-3:0 10px 24px rgba(8,26,48,.10), 0 30px 70px rgba(8,26,48,.14);
  --glow-mint:0 0 0 1px rgba(99,210,159,.35), 0 14px 40px rgba(30,156,107,.22);

  --grad-mint:linear-gradient(135deg, var(--m-400) 0%, var(--m-600) 100%);
  --grad-dark:linear-gradient(155deg, var(--b-800) 0%, var(--b-950) 100%);
  --grad-text:linear-gradient(100deg, var(--m-500) 0%, var(--m-400) 45%, #8fe3c0 100%);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;

  --gutter:clamp(1.1rem, 4vw, 2rem);
  --section:clamp(3.4rem, 8vw, 6.5rem);
  --maxw:1180px;
  --header-h:66px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font-titre:"Avenir Next","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-texte:Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Sections sombres : on redéfinit les jetons, tout le contenu suit. */
.band {
  --bg:transparent; --surface:rgba(255,255,255,.055);
  --text:#ffffff; --text-soft:rgba(233,243,252,.82); --text-mute:rgba(210,228,244,.66);
  --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.26);
  color:#fff;
  background:var(--grad-dark);
  position:relative; overflow:hidden;
}
.band::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60% 55% at 15% 0%, rgba(99,210,159,.22), transparent 70%),
    radial-gradient(50% 50% at 95% 20%, rgba(45,120,200,.28), transparent 70%);
}
.band > * { position:relative; }

* { box-sizing:border-box; }
html {
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  overflow-x:clip; scroll-padding-top:calc(var(--header-h) + 14px);
}
body {
  margin:0;
  font-family:var(--font-texte); font-weight:700;
  font-size:clamp(1rem,.97rem + .18vw,1.06rem); line-height:1.62;
  color:var(--text); background:var(--bg);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img, svg, video { max-width:100%; height:auto; display:block; }
a { color:var(--b-600); text-decoration:none; }
a:hover { color:var(--m-600); }
:focus-visible { outline:3px solid var(--m-500); outline-offset:2px; border-radius:6px; }

h1, h2, h3, h4 { font-family:var(--font-titre); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0 0 .55rem; color:var(--text); }
h1 { font-size:clamp(2.05rem,1.5rem + 3.1vw,3.5rem); }
h2 { font-size:clamp(1.55rem,1.25rem + 1.6vw,2.4rem); }
h3 { font-size:clamp(1.08rem,1rem + .4vw,1.28rem); }
p { margin:0 0 1rem; }
.lead { font-weight:400; font-size:clamp(1.03rem,.99rem + .3vw,1.2rem); color:var(--text-soft); }
.small { font-size:.88rem; }
.text-regular { font-weight:400; }
.center { text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Lien d'évitement. Il portait .sr-only, qui le gardait masqué même au moment
   où il reçoit le focus : un lien d'évitement qu'on ne voit jamais ne sert
   personne, et son contraste tombait à 2,13 sur le fond sombre de l'en-tête.
   Il fixe désormais ses propres couleurs, donc il reste lisible dans les deux
   thèmes — blanc sur bleu nuit, ratio supérieur à 15. */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; }
/* La mise en forme au focus est en fin de fichier : les règles de thème sombre
   la battaient en spécificité. Voir le commentaire là-bas. */

.wrap { width:min(100% - var(--gutter) * 2, var(--maxw)); margin-inline:auto; }
section { padding:var(--section) 0; }
.section-soft { background:var(--bg-soft); }
.section-tight { padding-block:clamp(2rem,5vw,3rem); }

/* --------- Icônes --------- */
.ico { width:22px; height:22px; flex:none; }
.ico-lg { width:28px; height:28px; }
.ico-box {
  display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:14px; margin-bottom:.85rem;
}
.ico-box .ico { width:24px; height:24px; }
.tone-mint { background:var(--m-100); color:var(--m-700); }
.tone-blue { background:var(--b-50); color:var(--b-600); }
.tone-orange { background:#fff2dc; color:var(--o-600); }
.band .tone-mint { background:rgba(99,210,159,.16); color:var(--m-300); }
.band .tone-blue { background:rgba(120,180,240,.14); color:#9ec8f0; }
.band .tone-orange { background:rgba(253,167,47,.16); color:#ffc776; }

/* --------- Boutons --------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.82rem 1.35rem; border-radius:var(--r-full);
  font-family:var(--font-titre); font-weight:600; font-size:1rem; line-height:1;
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn:active { transform:translateY(1px); }
.btn .ico { width:19px; height:19px; }
.btn-primary { background:var(--grad-mint); color:#04231a; box-shadow:var(--glow-mint); }
.btn-primary:hover { color:#04231a; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(99,210,159,.5), 0 18px 44px rgba(30,156,107,.3); }
.btn-orange { background:var(--o-400); color:#3a2400; box-shadow:0 10px 26px rgba(253,167,47,.32); }
.btn-orange:hover { background:var(--o-500); color:#3a2400; transform:translateY(-2px); }
.btn-dark { background:var(--b-800); color:#fff; }
.btn-dark:hover { background:var(--b-900); color:#fff; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover { color:var(--m-700); border-color:var(--m-400); background:var(--m-100); }
/* .cta-band ajouté le 10 septembre 2026. Ce bloc habillait déjà ses titres et
   ses paragraphes pour un fond sombre, mais pas ses boutons fantômes : ceux-ci
   gardaient var(--text), soit du bleu nuit sur un dégradé bleu nuit. Ratio
   mesuré 1,12 — le bouton « FAQ » de la bannière finale était, en pratique,
   invisible. Ce n'était pas qu'un défaut d'audit. */
.band .btn-ghost, .cta-band .btn-ghost { color:#fff; border-color:rgba(255,255,255,.35); }
.band .btn-ghost:hover, .cta-band .btn-ghost:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.6); }
.btn-light { background:#fff; color:var(--b-800); }
.btn-light:hover { color:var(--b-900); transform:translateY(-2px); }
.btn-sm { padding:.6rem 1rem; font-size:.92rem; }
.btn-lg { padding:1rem 1.7rem; font-size:1.06rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:.7rem; }
.btn-row.center { justify-content:center; }
.btn-row .btn { flex:1 1 220px; }
.btn-row.auto .btn { flex:0 0 auto; }

.link-arrow { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-titre); font-weight:600; }
.link-arrow .ico { width:18px; height:18px; transition:transform .2s var(--ease); }
.link-arrow:hover .ico { transform:translateX(4px); }

/* --------- Barre de progression de lecture --------- */
.progress {
  position:fixed; top:0; left:0; height:3px; width:0; z-index:120;
  background:linear-gradient(90deg, var(--m-500), var(--o-400)); transition:width .1s linear;
}

/* --------- En-tête --------- */
.topbar {
  position:sticky; top:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background .25s;
}
.topbar.scrolled { box-shadow:var(--shadow-1); background:rgba(255,255,255,.96); }
.bar { display:flex; align-items:center; gap:1rem; width:min(100% - var(--gutter) * 2, var(--maxw)); margin-inline:auto; }
.brand { display:flex; align-items:center; margin-right:auto; }
.brand img { height:38px; width:auto; }

.nav { display:none; }
.nav a {
  position:relative; font-family:var(--font-titre); font-weight:600; font-size:.97rem;
  color:var(--text); padding:.45rem .1rem;
}
.nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--m-500); border-radius:2px; transition:right .25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right:0; }
.nav a[aria-current="page"] { color:var(--m-700); }

.header-actions { display:flex; align-items:center; gap:.5rem; }
.langswitch {
  display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .6rem;
  border:1px solid var(--line-strong); border-radius:var(--r-full);
  font-family:var(--font-titre); font-weight:600; font-size:.85rem; color:var(--text);
}
.langswitch:hover { border-color:var(--m-400); background:var(--m-100); color:var(--m-700); }
.flag { width:20px; height:14px; border-radius:3px; flex:none; }
.langswitch .lbl { display:none; }

.icon-btn {
  display:inline-grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--line-strong); border-radius:14px; background:transparent;
  color:var(--text); cursor:pointer;
}
.icon-btn:hover { border-color:var(--m-400); color:var(--m-700); }
.header-cta { display:none; }

/* --------- Tiroir de navigation (mobile) --------- */
.drawer { position:fixed; inset:0; z-index:140; visibility:hidden; }
.drawer.open { visibility:visible; }
.drawer-scrim {
  position:absolute; inset:0; background:rgba(8,26,48,.55);
  opacity:0; transition:opacity .3s var(--ease); backdrop-filter:blur(2px);
}
.drawer.open .drawer-scrim { opacity:1; }
.drawer-panel {
  position:absolute; top:0; right:0; height:100%; width:min(88%, 360px);
  background:var(--surface); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; padding:1rem 1.15rem 1.5rem;
  transform:translateX(102%); transition:transform .32s var(--ease-out);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.open .drawer-panel { transform:none; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.drawer-head img { height:34px; width:auto; }
.drawer-nav { display:grid; gap:.15rem; margin-bottom:1.2rem; }
.drawer-nav a {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.85rem .4rem; border-bottom:1px solid var(--line);
  font-family:var(--font-titre); font-weight:600; font-size:1.06rem; color:var(--text);
}
.drawer-nav a .ico { width:18px; height:18px; color:var(--text-mute); }
.drawer-nav a[aria-current="page"] { color:var(--m-700); }
.drawer-foot { display:grid; gap:.6rem; margin-top:auto; }

/* --------- Hero --------- */
.hero { padding:clamp(2.5rem,7vw,4.6rem) 0 clamp(3rem,8vw,5.4rem); }
.hero-grid { display:grid; gap:2.4rem; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-titre); font-weight:600; font-size:.79rem;
  /* --m-600 jusqu'au 10 septembre 2026 : 3,49 sur blanc et 3,24 sur --bg-soft.
     Ces intitulés font 12,6 px, ils relèvent donc du seuil 4,5 et non de celui
     des grands textes. --m-700 donne 5,32 et 4,94. Le trait qui les précède
     garde sa couleur : c'est un décor, pas du texte. */
  letter-spacing:.14em; text-transform:uppercase; color:var(--m-700);
  margin:0 0 .9rem;
}
.eyebrow::before { content:""; width:26px; height:2px; background:var(--m-500); border-radius:2px; }
.band .eyebrow { color:var(--m-300); }
.band .eyebrow::before { background:var(--m-400); }
.grad-text {
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero .lead { max-width:56ch; }
.hero .btn-row { margin-top:1.5rem; max-width:460px; }

.trustline { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; padding:0; list-style:none; }
.trustline li {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius:var(--r-full);
  border:1px solid var(--line); background:var(--surface);
  font-weight:400; font-size:.83rem; color:var(--text-soft);
}
.trustline .ico { width:16px; height:16px; color:var(--m-600); }
.band .trustline .ico { color:var(--m-300); }

/* Aperçu applicatif */
.preview {
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-3); overflow:hidden;
}
.preview-top {
  display:flex; align-items:center; gap:.6rem; padding:.7rem .95rem;
  border-bottom:1px solid var(--line); font-size:.8rem; color:var(--text-mute); font-weight:400;
}
.dots { display:inline-flex; gap:.28rem; }
.dots i { width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.dots i:first-child { background:#ff5f57; } .dots i:nth-child(2) { background:#febc2e; } .dots i:nth-child(3) { background:#28c840; }
.preview-body { padding:.85rem; display:grid; gap:.6rem; }
.mini-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .8rem; border-radius:var(--r-sm);
  background:var(--bg-soft); border:1px solid var(--line);
}
.band .mini-row { background:rgba(255,255,255,.05); }
.mini-row .ico { color:var(--m-600); }
.band .mini-row .ico { color:var(--m-300); }
.mini-row b { display:block; font-family:var(--font-titre); font-size:.94rem; }
.mini-row small { display:block; font-weight:400; font-size:.79rem; color:var(--text-mute); }
.mini-row .val { margin-left:auto; font-family:var(--font-titre); font-weight:600; font-size:1.15rem; color:var(--m-600); }
.band .mini-row .val { color:var(--m-300); }
.mini-row .pill { margin-left:auto; font-size:.72rem; font-weight:400; padding:.2rem .55rem; border-radius:var(--r-full); background:var(--o-400); color:#3a2400; }

/* --------- Bandeau de chiffres --------- */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.stat {
  padding:1.15rem .9rem; border-radius:var(--r-md); text-align:center;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.stat .v { display:block; font-family:var(--font-titre); font-weight:600; font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem); color:var(--m-600); line-height:1; }
.stat .l { display:block; margin-top:.45rem; font-weight:400; font-size:.85rem; color:var(--text-soft); }

/* --------- Titres de section --------- */
.sec-head { max-width:64ch; margin-bottom:2rem; }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow { justify-content:center; }

/* --------- Grilles et cartes --------- */
.grid { display:grid; gap:1.1rem; }
.card {
  padding:1.5rem 1.35rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--line-strong); }
.card p { color:var(--text-soft); font-weight:400; margin-bottom:0; }
.card ul { margin:.5rem 0 0; padding-left:1.15rem; }
.card li { font-weight:400; color:var(--text-soft); font-size:.95rem; margin-bottom:.4rem; }
.band .card { background:rgba(255,255,255,.06); border-color:var(--line); backdrop-filter:blur(6px); }
.band .card:hover { background:rgba(255,255,255,.09); }
.card-list { list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.5rem; }
.card-list li { display:flex; gap:.6rem; align-items:flex-start; margin:0; }
.card-list .ico { width:19px; height:19px; margin-top:.15rem; color:var(--m-600); }
.band .card-list .ico { color:var(--m-300); }

/* --------- Étapes --------- */
.steps { display:grid; gap:1rem; counter-reset:step; }
.step { position:relative; padding:1.4rem 1.35rem 1.4rem 3.9rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.step .n {
  position:absolute; left:1.25rem; top:1.35rem;
  display:grid; place-items:center; width:34px; height:34px; border-radius:12px;
  background:var(--grad-mint); color:#04231a;
  font-family:var(--font-titre); font-weight:600; font-size:1rem;
}
.step p { color:var(--text-soft); font-weight:400; margin-bottom:0; }

/* --------- Liste à puces cochées --------- */
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; font-weight:400; color:var(--text-soft); }
.checklist .ico { width:20px; height:20px; margin-top:.2rem; color:var(--m-600); flex:none; }

/* --------- Formules --------- */
.plans { display:grid; gap:1.1rem; }
.plan {
  position:relative; display:flex; flex-direction:column;
  padding:1.7rem 1.4rem; border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1);
}
.plan.hot { border-color:var(--m-400); box-shadow:var(--glow-mint); }
.plan .tag {
  position:absolute; top:-.75rem; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  padding:.32rem .8rem; border-radius:var(--r-full);
  background:var(--grad-mint); color:#04231a;
  font-family:var(--font-titre); font-weight:600; font-size:.76rem;
}
.plan.family .tag { background:var(--b-800); color:#fff; }
.plan .tag .ico { width:15px; height:15px; }
.plan .price { font-family:var(--font-titre); font-weight:600; font-size:2.6rem; line-height:1; margin-top:.4rem; }
.plan .per { font-weight:400; font-size:.88rem; color:var(--text-mute); margin-bottom:1.1rem; }
.plan ul { list-style:none; padding:0; margin:0 0 1.3rem; display:grid; gap:.5rem; }
.plan li { display:flex; gap:.55rem; align-items:flex-start; font-weight:400; font-size:.95rem; }
.plan li .ico { width:18px; height:18px; margin-top:.18rem; color:var(--m-600); flex:none; }
.plan li.no { color:var(--text-mute); }
.plan li.no .ico { color:var(--line-strong); }
.plan .btn { margin-top:auto; width:100%; }

/* --------- Tableau comparatif --------- */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1); }
table.cmp { width:100%; min-width:580px; border-collapse:collapse; }
.cmp th, .cmp td { padding:.85rem .9rem; text-align:center; border-bottom:1px solid var(--line); font-size:.92rem; font-weight:400; }
.cmp thead th { background:var(--b-800); color:#fff; font-family:var(--font-titre); font-weight:600; }
.cmp thead th:last-child { background:linear-gradient(135deg,var(--b-700),var(--m-700)); }
.cmp tbody th { text-align:left; font-weight:600; color:var(--text); }
.cmp tbody tr:nth-child(even) { background:var(--bg-soft); }
.cmp .ok .ico { width:20px; height:20px; margin-inline:auto; color:var(--m-600); }
.cmp .no { color:var(--text-mute); }

/* --------- FAQ --------- */
.faq { display:grid; gap:.7rem; max-width:820px; }
.qa { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-1); overflow:hidden; }
.qa summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.15rem; cursor:pointer; list-style:none;
  font-family:var(--font-titre); font-weight:600; font-size:1.01rem;
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary .ico { color:var(--m-600); transition:transform .25s var(--ease); }
.qa[open] summary .ico { transform:rotate(180deg); }
.qa[open] { border-color:var(--m-300); }
.qa p { padding:0 1.15rem 1.1rem; margin:0; color:var(--text-soft); font-weight:400; }
.faq-group { font-size:1.1rem; margin:2.2rem 0 .9rem; }

/* --------- Bandeau d'appel à l'action --------- */
.cta-band {
  border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.2rem) clamp(1.3rem,4vw,3rem);
  background:var(--grad-dark); color:#fff; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
  content:""; position:absolute; inset:0; opacity:.6;
  background:radial-gradient(55% 60% at 20% 100%, rgba(99,210,159,.3), transparent 70%);
}
.cta-band > * { position:relative; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(233,243,252,.85); font-weight:400; max-width:56ch; margin-inline:auto; }
.cta-band .btn-row { justify-content:center; max-width:520px; margin-inline:auto; margin-top:1.4rem; }

/* --------- Fil d'ariane --------- */
.breadcrumb { font-size:.85rem; font-weight:400; color:var(--text-mute); margin-bottom:1.1rem; }
.breadcrumb a { color:var(--text-mute); }
.breadcrumb a:hover { color:var(--m-600); }

/* --------- Contenus longs / pages légales --------- */
.prose {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,4vw,2.6rem); box-shadow:var(--shadow-1); max-width:78ch;
}
.prose h2 { font-size:1.3rem; margin-top:2rem; }
.prose h3 { font-size:1.08rem; margin-top:1.5rem; }
.prose p, .prose li { font-weight:400; color:var(--text-soft); }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.45rem; }
.prose .updated { font-size:.85rem; color:var(--text-mute); }
.prose table { width:100%; border-collapse:collapse; margin:1rem 0; }
.prose th, .prose td { border:1px solid var(--line); padding:.6rem .7rem; text-align:left; font-size:.93rem; }

/* --------- Contact --------- */
.contact-card { display:flex; flex-direction:column; }
.contact-card a { font-family:var(--font-titre); font-weight:600; }

/* --------- Pied de page --------- */
.site-footer { background:var(--b-950); color:rgba(226,238,250,.78); padding:clamp(2.6rem,6vw,4rem) 0 1.4rem; font-weight:400; }
.foot-grid { display:grid; gap:2rem; }
.site-footer img { height:36px; width:auto; margin-bottom:.9rem; }
/* h2 depuis le 10 septembre 2026, plus h4 : la dernière rubrique du contenu est
   un h2, et passer directement à h4 sautait un niveau. L'apparence est
   inchangée — c'est la hiérarchie du document qui est corrigée, pas le style. */
.site-footer h2 { font-family:var(--font-titre); font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; color:var(--m-300); margin:0 0 .8rem; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.site-footer a { color:rgba(226,238,250,.78); }
.site-footer a:hover { color:var(--m-300); }
.foot-bottom {
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; justify-content:space-between;
  margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem; color:rgba(226,238,250,.6);
}
.foot-bottom a { color:var(--m-300); font-weight:700; }

/* --------- Barre d'action mobile --------- */
.mobile-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:flex; gap:.55rem; padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  /* La barre était seulement déplacée hors de l'écran quand elle est masquée.
     Un simple translate ne la retire ni de l'ordre de tabulation ni de
     l'arborescence d'accessibilité : ses deux boutons restaient atteignables au
     clavier et annoncés aux lecteurs d'écran alors que personne ne les voit, en
     doublon des mêmes actions présentes dans la page. C'est ce qu'un agent
     automatique voit aussi — deux « Créer mon compte » dont un fantôme.
     visibility:hidden les retire vraiment ; le délai de transition à 0s laisse
     l'animation de glissement intacte. */
  transform:translateY(115%); visibility:hidden;
  transition:transform .3s var(--ease-out), visibility 0s .3s;
}
.mobile-cta.show { transform:none; visibility:visible; transition:transform .3s var(--ease-out), visibility 0s 0s; }
.mobile-cta .btn { flex:1; }
body.has-mobile-cta { padding-bottom:74px; }

/* --------- Bandeau cookies --------- */
.cookiebar {
  position:fixed; left:var(--gutter); right:var(--gutter); bottom:calc(var(--gutter) + 62px); z-index:130;
  display:none; gap:.7rem; flex-direction:column;
  padding:.9rem 1rem; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow-3);
}
.cookiebar.show { display:flex; }
.cookiebar p { font-size:.82rem; line-height:1.45; font-weight:400; color:var(--text-soft); margin:0; }
.cookiebar .btn-row { gap:.5rem; flex-wrap:nowrap; }
.cookiebar .btn { flex:1 1 auto; padding-inline:.7rem; font-size:.85rem; white-space:nowrap; }
/* Le tiroir de navigation passe devant : on masque le bandeau tant qu'il est ouvert. */
body:has(.drawer.open) .cookiebar { display:none; }

/* --------- Apparitions --------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.d1 { transition-delay:.07s; } .d2 { transition-delay:.14s; } .d3 { transition-delay:.21s; }

/* =====================================================================
   ≥ 620 px
   ===================================================================== */
@media (min-width:620px) {
  .stats { grid-template-columns:repeat(4,1fr); }
  .btn-row .btn { flex:0 0 auto; }
  .grid.g2 { grid-template-columns:repeat(2,1fr); }
  .cookiebar { flex-direction:row; align-items:center; justify-content:space-between; }
  .cookiebar .btn-row { flex:none; }
}

/* =====================================================================
   ≥ 900 px
   ===================================================================== */
@media (min-width:900px) {
  .grid.g3 { grid-template-columns:repeat(3,1fr); }
  .steps { grid-template-columns:repeat(3,1fr); }
  /* Quatre formules depuis septembre 2026 : deux par ligne sur tablette,
     quatre de front seulement à partir de 1100 px — au-delà de trois colonnes,
     une carte devient trop étroite pour que ses libellés tiennent. */
  .plans { grid-template-columns:repeat(2,1fr); align-items:stretch; }
  .plan.hot { transform:scale(1.035); z-index:2; }
  .hero-grid { grid-template-columns:1.05fr .95fr; align-items:center; gap:3rem; }
  .contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
  .foot-grid { grid-template-columns:1.6fr 1fr 1fr 1fr; }
}

/* =====================================================================
   ≥ 1000 px — navigation horizontale, plus de tiroir
   ===================================================================== */
@media (min-width:1000px) {
  :root { --header-h:74px; }
  .brand img { height:44px; }
  .nav { display:flex; align-items:center; gap:1.6rem; }
  .header-cta { display:inline-flex; }
  .icon-btn.burger { display:none; }
  .langswitch .lbl { display:inline; }
  .mobile-cta { display:none; }
  body.has-mobile-cta { padding-bottom:0; }
  .cookiebar { left:auto; right:var(--gutter); bottom:var(--gutter); max-width:660px; }
}

/* =====================================================================
   Préférences et impression
   ===================================================================== */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}

@media print {
  .topbar, .mobile-cta, .cookiebar, .drawer, .progress, .site-footer .foot-grid { display:none !important; }
  body { color:#000; background:#fff; }
  .band, .cta-band { background:#fff !important; color:#000 !important; }
  .card, .prose { box-shadow:none; border:1px solid #ccc; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.8em; }
}

/* =====================================================================
   Accents orange
   ===================================================================== */
.eyebrow::before { background: linear-gradient(90deg, var(--m-500), var(--o-400)); }
/* Le brun était à 4,36 contre l'étape sombre du dégradé (rgb(207,118,5)),
   sous le seuil de 4,5 exigé pour un texte de cette taille. Assombri à 4,87.
   Mesuré, pas estimé : le pire des deux arrêts du dégradé fait foi. */
.step .n { background: linear-gradient(135deg, var(--o-400), var(--o-600)); color: #2e1c00; }
.stat:nth-child(even) .v { color: var(--o-600); }
.qa[open] summary .ico { color: var(--o-500); }
.link-arrow:hover { color: var(--o-600); }
.card:hover { border-color: var(--o-400); }
.plan.hot::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--m-400), var(--o-400));
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(45% 55% at 88% 0%, rgba(253,167,47,.28), transparent 70%);
}
.hero.band::after {
  content: ""; position: absolute; right: -6%; top: 8%; width: 42%; height: 55%;
  background: radial-gradient(circle, rgba(253,167,47,.16), transparent 65%);
  pointer-events: none;
}
.trustline li:nth-child(4n+2) .ico { color: var(--o-500); }
.band .trustline li:nth-child(4n+2) .ico { color: var(--o-400); }
.site-footer h2 { color: var(--m-300); }
.site-footer .foot-bottom a { color: var(--o-400); }
.cmp tbody tr:hover { background: #fff7ec; }
.breadcrumb a:hover { color: var(--o-600); }

/* =====================================================================
   Mode sombre
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0b1524; --bg-soft:#101d30; --bg-sunk:#0a1322;
    --surface:#152437;
    --text:#e9f1f9; --text-soft:#adc2d6; --text-mute:#8ba2b9;
    --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
    --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
    --shadow-2:0 6px 18px rgba(0,0,0,.4);
    --shadow-3:0 14px 40px rgba(0,0,0,.5);
    --grad-dark:linear-gradient(155deg,#0f2743 0%,#061525 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b1524; --bg-soft:#101d30; --bg-sunk:#0a1322;
  --surface:#152437;
  --text:#e9f1f9; --text-soft:#adc2d6; --text-mute:#8ba2b9;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --shadow-2:0 6px 18px rgba(0,0,0,.4);
  --shadow-3:0 14px 40px rgba(0,0,0,.5);
  --grad-dark:linear-gradient(155deg,#0f2743 0%,#061525 100%);
}

/* Réglages propres au thème sombre (déclarés une fois, appliqués aux deux cas) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar { background:rgba(11,21,36,.86); }
  :root:not([data-theme="light"]) .topbar.scrolled { background:rgba(11,21,36,.96); }
  :root:not([data-theme="light"]) .mobile-cta { background:rgba(11,21,36,.94); }
  :root:not([data-theme="light"]) a:not(.btn) { color:var(--m-300); }
  /* Les intitulés de section sont passés à --m-700 pour le thème clair le
     10 septembre 2026. Sur fond sombre ce vert devient illisible (3,45) : on
     reprend ici le --m-300 déjà utilisé par « .band .eyebrow ». Ratio 12,1.
     Corriger un thème sans regarder l'autre, c'est déplacer le défaut. */
  :root:not([data-theme="light"]) .eyebrow { color:var(--m-300); }
  /* Encadrés des pages légales. Leur fond clair est écrit en style en ligne
     dans le contenu stocké en base (#fff7ed, #eff6ff) : il ne suit donc pas le
     thème, et le texte clair du mode sombre s'y retrouvait à 1,68 — invisible.
     Un style en ligne ne se corrige que par !important. La règle générale
     rattrape tout encadré futur ; les deux suivantes conservent la nuance
     d'origine. À terme, ces fonds devraient être des classes, pas du style
     écrit dans le contenu. */
  :root:not([data-theme="light"]) .prose [style*="background"] { background:rgba(255,255,255,.06) !important; }
  :root:not([data-theme="light"]) .prose [style*="#fff7ed"] { background:rgba(253,167,47,.14) !important; }
  :root:not([data-theme="light"]) .prose [style*="#eff6ff"] { background:rgba(120,180,240,.14) !important; }
  :root:not([data-theme="light"]) .btn-ghost { color:var(--text); }
  :root:not([data-theme="light"]) .btn-ghost:hover { background:rgba(99,210,159,.12); color:var(--m-300); }
  :root:not([data-theme="light"]) .btn-light { background:var(--surface); color:var(--text); }
  :root:not([data-theme="light"]) .btn-dark { background:var(--m-600); color:#04231a; }
  :root:not([data-theme="light"]) .tone-mint { background:rgba(99,210,159,.14); color:var(--m-300); }
  :root:not([data-theme="light"]) .tone-blue { background:rgba(120,180,240,.14); color:#9ec8f0; }
  :root:not([data-theme="light"]) .tone-orange { background:rgba(253,167,47,.16); color:#ffc776; }
  :root:not([data-theme="light"]) .cmp thead th { background:#0f2743; }
  :root:not([data-theme="light"]) .cmp tbody tr:nth-child(even) { background:rgba(255,255,255,.03); }
  :root:not([data-theme="light"]) .cmp tbody tr:hover { background:rgba(253,167,47,.08); }
  :root:not([data-theme="light"]) .dots i { background:rgba(255,255,255,.25); }
  :root:not([data-theme="light"]) .stat:nth-child(even) .v { color:var(--o-400); }
  :root:not([data-theme="light"]) .logo-light { display:none; }
  :root:not([data-theme="light"]) .logo-dark { display:block; }
}
:root[data-theme="dark"] .topbar { background:rgba(11,21,36,.86); }
:root[data-theme="dark"] .topbar.scrolled { background:rgba(11,21,36,.96); }
:root[data-theme="dark"] .mobile-cta { background:rgba(11,21,36,.94); }
:root[data-theme="dark"] a:not(.btn) { color:var(--m-300); }
/* Mêmes correctifs que dans le bloc « préférence système » ci-dessus, pour le
   thème sombre choisi explicitement. Voir les commentaires là-haut. */
:root[data-theme="dark"] .eyebrow { color:var(--m-300); }
:root[data-theme="dark"] .prose [style*="background"] { background:rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .prose [style*="#fff7ed"] { background:rgba(253,167,47,.14) !important; }
:root[data-theme="dark"] .prose [style*="#eff6ff"] { background:rgba(120,180,240,.14) !important; }
:root[data-theme="dark"] .btn-ghost { color:var(--text); }
:root[data-theme="dark"] .btn-ghost:hover { background:rgba(99,210,159,.12); color:var(--m-300); }
:root[data-theme="dark"] .btn-light { background:var(--surface); color:var(--text); }
:root[data-theme="dark"] .btn-dark { background:var(--m-600); color:#04231a; }
:root[data-theme="dark"] .tone-mint { background:rgba(99,210,159,.14); color:var(--m-300); }
:root[data-theme="dark"] .tone-blue { background:rgba(120,180,240,.14); color:#9ec8f0; }
:root[data-theme="dark"] .tone-orange { background:rgba(253,167,47,.16); color:#ffc776; }
:root[data-theme="dark"] .cmp thead th { background:#0f2743; }
:root[data-theme="dark"] .cmp tbody tr:nth-child(even) { background:rgba(255,255,255,.03); }
:root[data-theme="dark"] .cmp tbody tr:hover { background:rgba(253,167,47,.08); }
:root[data-theme="dark"] .dots i { background:rgba(255,255,255,.25); }
:root[data-theme="dark"] .stat:nth-child(even) .v { color:var(--o-400); }
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark { display:block; }

/* Bascule de thème */
.logo-dark { display:none; }
.themebtn .ico-sun { display:none; }
:root[data-theme="dark"] .themebtn .ico-sun { display:block; }
:root[data-theme="dark"] .themebtn .ico-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .ico-sun { display:block; }
  :root:not([data-theme="light"]) .themebtn .ico-moon { display:none; }
}

/* Le texte des boutons pleins ne suit jamais la couleur des liens. */
a.btn-primary, a.btn-primary:hover { color:#04231a; }
a.btn-orange, a.btn-orange:hover { color:#3a2400; }
a.btn-dark, a.btn-dark:hover { color:#fff; }
:root[data-theme="dark"] .btn-dark, :root[data-theme="dark"] a.btn-dark { color:#04231a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-dark,
  :root:not([data-theme="light"]) a.btn-dark { color:#04231a; }
}

/* =====================================================================
   Correction d'empilement sur les formules
   L'étiquette « Le plus choisi » doit rester au-dessus du liseré décoratif
   (un ::after est peint après les enfants) et des cartes voisines.
   ===================================================================== */
.plans { padding-top: .9rem; }
.plan { z-index: 1; }
.plan.hot { z-index: 3; }
.plan .tag { z-index: 4; }
.plan.hot::after { z-index: 0; }

/* =====================================================================
   Fonds animés
   Décors purement décoratifs, sans interaction, coupés si l'utilisateur
   demande moins d'animations.
   ===================================================================== */
.fx-host { position: relative; isolation: isolate; }
.fx-host > .wrap { position: relative; z-index: 2; }
.fx {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}

/* --- Envolée de cadenas (accueil) --- */
.fx-locks i {
  position: absolute; bottom: -60px; width: 26px; height: 34px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363d29f' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
  opacity: 0; animation: lock-rise 15s linear infinite;
}
.fx-locks i:nth-child(1) { left: 6%;  animation-delay: 0s;    transform: scale(.8); }
.fx-locks i:nth-child(2) { left: 18%; animation-delay: 2.4s;  transform: scale(1.1); }
.fx-locks i:nth-child(3) { left: 31%; animation-delay: 5.1s;  transform: scale(.7); }
.fx-locks i:nth-child(4) { left: 44%; animation-delay: 7.6s;  transform: scale(1); }
.fx-locks i:nth-child(5) { left: 58%; animation-delay: 1.3s;  transform: scale(.9); }
.fx-locks i:nth-child(6) { left: 71%; animation-delay: 9.2s;  transform: scale(1.2); }
.fx-locks i:nth-child(7) { left: 83%; animation-delay: 4.2s;  transform: scale(.75); }
.fx-locks i:nth-child(8) { left: 93%; animation-delay: 11.5s; transform: scale(1); }
@keyframes lock-rise {
  0%   { transform: translateY(0) rotate(-8deg); opacity: 0; }
  10%  { opacity: .38; }
  80%  { opacity: .22; }
  100% { transform: translateY(-115vh) rotate(14deg); opacity: 0; }
}

/* --- Tornade et pluie (section sinistres) --- */
.fx-storm::before {
  content: ""; position: absolute; right: -6%; top: -12%;
  width: 46vmin; height: 130%; opacity: .16;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.9), transparent 72%) center/100% 22% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.8), transparent 72%) center 34%/78% 16% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.7), transparent 72%) center 58%/54% 13% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.6), transparent 72%) center 80%/30% 10% no-repeat;
  animation: twist 7s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes twist {
  0%, 100% { transform: rotate(-3deg) skewX(-6deg); }
  50%      { transform: rotate(3deg)  skewX(6deg); }
}
.fx-storm i {
  position: absolute; top: -14%; width: 2px; height: 90px;
  background: linear-gradient(180deg, transparent, rgba(160,205,240,.55));
  animation: rain 1.7s linear infinite;
}
.fx-storm i:nth-child(1) { left: 12%; animation-delay: .1s; }
.fx-storm i:nth-child(2) { left: 27%; animation-delay: .7s; height: 60px; }
.fx-storm i:nth-child(3) { left: 41%; animation-delay: 1.2s; }
.fx-storm i:nth-child(4) { left: 63%; animation-delay: .4s; height: 70px; }
.fx-storm i:nth-child(5) { left: 78%; animation-delay: 1s; }
.fx-storm i:nth-child(6) { left: 90%; animation-delay: 1.5s; height: 55px; }
@keyframes rain { to { transform: translateY(125vh); } }

/* --- Braises (section catastrophes de l'accueil) --- */
.fx-fire::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -30%;
  height: 70%; opacity: .32;
  background:
    radial-gradient(60% 100% at 22% 100%, rgba(253,167,47,.5), transparent 70%),
    radial-gradient(50% 100% at 68% 100%, rgba(240,90,30,.45), transparent 70%);
  animation: flicker 5.5s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scaleY(1)   translateY(0);    opacity: .3; }
  35%      { transform: scaleY(1.14) translateY(-10px); opacity: .46; }
  70%      { transform: scaleY(.94)  translateY(4px);   opacity: .26; }
}
.fx-fire i {
  position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffd08a, rgba(253,167,47,0));
  animation: ember 9s linear infinite; opacity: 0;
}
.fx-fire i:nth-child(1) { left: 14%; animation-delay: 0s; }
.fx-fire i:nth-child(2) { left: 29%; animation-delay: 1.9s; }
.fx-fire i:nth-child(3) { left: 47%; animation-delay: 3.6s; }
.fx-fire i:nth-child(4) { left: 62%; animation-delay: 5.2s; }
.fx-fire i:nth-child(5) { left: 77%; animation-delay: 2.7s; }
.fx-fire i:nth-child(6) { left: 89%; animation-delay: 6.8s; }
@keyframes ember {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: translate(28px, -70vh) scale(.3); opacity: 0; }
}

/* --- Montée des eaux (section « à faire dès aujourd'hui ») --- */
.fx-flood::before, .fx-flood::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 120px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(45,120,200,.16), transparent 70%);
  border-radius: 45%;
  animation: wave 12s ease-in-out infinite;
}
.fx-flood::after { height: 90px; opacity: .7; animation-duration: 16s; animation-direction: reverse; }
@keyframes wave {
  0%, 100% { transform: translateX(-4%) scaleY(1); }
  50%      { transform: translateX(4%)  scaleY(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .fx { display: none; }
}

/* =====================================================================
   Aperçu du tableau de bord — mise en mouvement
   Flottement continu + inclinaison qui suit le pointeur (parallaxe 3D).
   ===================================================================== */
.hero-grid { perspective: 1100px; }
.preview {
  transform-style: preserve-3d;
  animation: preview-float 9s ease-in-out infinite;
  transition: box-shadow .3s var(--ease);
  will-change: transform;
}
.preview.tilting { animation: none; transition: transform .12s ease-out, box-shadow .3s var(--ease); }
.preview:hover { box-shadow: 0 26px 70px rgba(8, 26, 48, .28), 0 0 0 1px rgba(99, 210, 159, .28); }
@keyframes preview-float {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50%      { transform: translateY(-14px) rotateX(1.2deg) rotateY(-1.6deg); }
}
/* Les lignes se soulèvent légèrement les unes après les autres */
.preview .mini-row {
  transform: translateZ(18px);
  animation: row-in .6s var(--ease-out) both;
}
.preview .mini-row:nth-child(1) { animation-delay: .15s; }
.preview .mini-row:nth-child(2) { animation-delay: .28s; }
.preview .mini-row:nth-child(3) { animation-delay: .41s; }
.preview .mini-row:nth-child(4) { animation-delay: .54s; }
@keyframes row-in { from { opacity: 0; transform: translateZ(18px) translateY(10px); } }
.preview .mini-row .val, .preview .mini-row .pill { transform: translateZ(26px); }
.preview .preview-top { transform: translateZ(10px); }
/* La pastille d'échéance attire discrètement l'œil */
.preview .pill { animation: pill-pulse 2.8s ease-in-out infinite; }
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 167, 47, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(253, 167, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .preview, .preview .mini-row, .preview .pill { animation: none; }
}

/* =====================================================================
   Boutons flottants : retour en haut et préférences cookies
   ===================================================================== */
.fab {
  position: fixed; z-index: 115;
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-2); cursor: pointer;
  font-family: var(--font-titre); font-weight: 600; font-size: .86rem;
  transition: transform .2s var(--ease), opacity .25s var(--ease), background .2s, color .2s, border-color .2s, visibility .25s;
}
.fab:hover { color: var(--m-700); border-color: var(--m-400); transform: translateY(-2px); }
.fab .ico { width: 19px; height: 19px; }

/* Retour en haut : à droite, masqué tant qu'on n'a pas défilé */
.fab-top {
  right: var(--gutter); bottom: calc(var(--gutter) + 62px);
  width: 46px; height: 46px; justify-content: center; padding: 0;
  opacity: 0; visibility: hidden;
}
.fab-top .ico { transform: rotate(-90deg); }
.fab-top.show { opacity: 1; visibility: visible; }

/* Préférences cookies : à gauche, présent sur toutes les pages */
/* Rond et sans libellé depuis le 10 septembre 2026 : l'icône est un cookie,
   écrire « Cookies » à côté n'apportait rien. Mêmes dimensions que le bouton
   de retour en haut, dont il est le pendant à gauche. */
.fab-cookies {
  left: var(--gutter); bottom: calc(var(--gutter) + 62px);
  width: 46px; height: 46px; justify-content: center; padding: 0;
}
.fab-cookies .ico { width: 21px; height: 21px; }

@media (min-width: 1000px) {
  .fab-top     { bottom: var(--gutter); }
  .fab-cookies { bottom: var(--gutter); }
}
@media print { .fab { display: none !important; } }


/* Quatre formules côte à côte, sur écran large seulement. */
@media (min-width: 1100px) {
  .plans { grid-template-columns: repeat(4, 1fr); }
  .plans .plan { padding-left: 1.1rem; padding-right: 1.1rem; }
  .plans .plan h2 { font-size: 1.1rem; }
  .plans .plan .price { font-size: 1.9rem; }
  .plans .plan ul { font-size: .87rem; }
}

/* =====================================================================
   Lien d'évitement — mise en forme au focus
   ---------------------------------------------------------------------
   Placé en toute fin de fichier, et pas avec le reste de .skip-link, pour
   une raison mesurée le 10 septembre 2026 : la règle de thème sombre
   « :root:not([data-theme="light"]) a:not(.btn) » pèse (0,3,1) et battait
   « .skip-link:focus » à (0,2,0). Résultat, le lien s'affichait en menthe
   sur son propre fond blanc — ratio 1,51, illisible, exactement le défaut
   qu'on voulait corriger.

   « :root a.skip-link:focus » pèse (0,3,1) : à égalité, c'est l'ordre du
   fichier qui tranche, d'où la position en dernier. Le fond et la couleur
   sont fixés en dur pour que le lien reste lisible dans les deux thèmes.
   Ratio obtenu : 17,4.
   ===================================================================== */
:root a.skip-link:focus {
  left:.75rem; top:.75rem; width:auto; height:auto;
  padding:.6rem 1.1rem; border-radius:10px;
  background:#ffffff; color:#0b1524;
  font-family:var(--font-titre); font-weight:600; font-size:.95rem;
  text-decoration:none; box-shadow:0 6px 22px rgba(0,0,0,.4);
  outline:3px solid #1d4d84; outline-offset:2px;
}