@charset "utf-8";
/* ============================================================================
   NALU SURF — nalusurf.fr
   Feuille de style unique. Direction artistique « SAVOIR » du 7 août 2026.

   Règles fondatrices, reprises telles quelles de la planche :
     · L'or est éditorial   — numéros, filets, chapeaux, zone idéale, favoris.
                              Il ne reçoit jamais de clic.
     · L'aqua est actif     — boutons, états sélectionnés, liens.
                              Il ne décore jamais.
     · Le cadre est réservé à ce qui se touche. Le reste est séparé par un filet.
     · Rayon 4 px. Pastilles en pilule. Rien d'autre.
     · Espacement base 4. Aucune valeur hors échelle. Jamais 14 ni 18.
     · Tout est fer à gauche. Le centrage est réservé à la couverture.
     · Aucun texte sous 11 px, hors graduations d'axe.
   ========================================================================= */

/* ---------------------------------------------------------------- 0. POLICES
   Auto-hébergées : aucun appel à un CDN tiers. Cohérent avec la promesse de
   confidentialité du produit et avec la position de la CNIL sur Google Fonts.
   Sous-ensemble latin étendu · 72 Ko au total. */

@font-face {
  font-family: 'Italiana';
  src: url('../fonts/Italiana-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans-Regular.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- 1. JETONS */

:root {
  /* Surfaces — palette Nalu, aucune valeur inventée */
  --body:   #020A12;
  --bg:     #07131F;
  --panel:  #0D2031;
  --panel2: #122A3E;
  --line:   #1D3A52;

  /* Texte — ratios WCAG 2.1 mesurés sur --bg */
  --t1: #E9F2F9;   /* 16,5 : 1 · AAA */
  --t2: #88A8C1;   /*  7,5 : 1 · AAA */
  --t3: #638BA8;   /*  5,2 : 1 · AA  */

  /* Accents — un métier chacun */
  --aqua: #1FD6C0;         /* action   · 10,2 : 1 */
  --gold: #F6B53E;         /* éditorial· 10,3 : 1 */
  --on-accent: #04181A;

  /* Verdicts — jamais redéfinis */
  --good:   #35D39A;
  --punchy: #F6B53E;
  --fair:   #6FAE9B;
  --weak:   #5B93B8;
  --poor:   #8197A9;
  --strong: #F06D6D;

  /* Niveaux */
  --lv1:#35D39A; --lv2:#7CCF6A; --lv3:#F6B53E; --lv4:#EF8A4C; --lv5:#F06D6D;

  /* Familles */
  --f-brand: 'Italiana', Didot, 'Bodoni 72', Georgia, serif;
  --f-ui:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-data:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Échelle — dix paliers de l'app, plus deux paliers propres au web.
     Toute valeur hors de cette liste est un défaut, pas un réglage. */
  --fs-micro:    9px;
  --fs-caption: 10px;
  --fs-label:   11px;
  --fs-body-sm: 12px;
  --fs-body:    13px;
  --fs-body-lg: 15px;
  --fs-h3:      17px;
  --fs-h2:      20px;
  --fs-h1:      28px;
  --fs-display: 44px;
  --fs-section: clamp(32px, 5vw, 40px);            /* titre de section, web  */
  --fs-hero:    clamp(48px, 9.2vw, 104px);          /* couverture, web        */

  /* Le texte courant du web est plus grand que celui de l'app : on lit à
     50 cm d'un écran, pas à 30 cm d'un téléphone. Deux paliers de l'échelle
     servent de corps, pas un. */
  --fs-read:    17px;

  --ls-brand: .32em;
  --ls-label: .14em;
  --ls-title: .02em;

  --r-xs: 4px;
  --r-pill: 999px;
  --r-phone: 34px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px;
  --s-7:40px; --s-8:56px; --s-9:72px; --s-10:96px;

  --gutter: var(--s-4);
  --maxw: 1080px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 720px) { :root { --gutter: var(--s-7); } }

/* ------------------------------------------------------------- 2. OSSATURE */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;            /* la barre collante ne mange pas l'ancre */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  background: var(--body);
  color: var(--t1);
  font-family: var(--f-ui);
  font-size: var(--fs-read);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }

img, svg, video { display: block; max-width: 100%; height: auto; }

::selection { background: var(--aqua); color: var(--on-accent); }

/* Le filet : 1 px, pleine largeur. Un filet qui s'arrête avant le bord
   redevient une boîte sans couvercle. */
.hr { height: 1px; background: var(--line); border: 0; }

/* Accès clavier — visible, jamais supprimé */
:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--aqua); color: var(--on-accent);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-xs);
  font-weight: 600; font-size: var(--fs-body-lg); text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s-4); }

.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;
}

/* ---------------------------------------------------------- 3. TYPOGRAPHIE */

h1, h2, h3, h4 { font-weight: 400; }

.brandline {
  font-family: var(--f-brand);
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
}

/* Chapeau — capitales espacées, code du carton gravé. Libellés courts
   uniquement, jamais une phrase. En or lorsqu'il numérote une section. */
.kicker {
  font-family: var(--f-data);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--t3);
  display: block;
  margin-bottom: var(--s-3);
}
.kicker.gold { color: var(--gold); }

.h-section {
  font-family: var(--f-brand);
  font-size: var(--fs-section);
  line-height: 1.08;
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s-4);
  max-width: 18ch;
}
.h-section em { font-style: normal; color: var(--gold); }

.h-sub {
  font-family: var(--f-brand);
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: var(--ls-title);
  margin-bottom: var(--s-3);
}

.lede {
  font-size: var(--fs-h3);
  line-height: 1.7;
  color: var(--t2);
  max-width: 62ch;
}

.prose p  { max-width: 68ch; }
.prose p + p { margin-top: var(--s-4); }
.prose b, .prose strong { font-weight: 600; color: var(--t1); }
.prose a:not(.btn) { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }

.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.unit { color: var(--t3); font-size: var(--fs-body); margin-left: 3px; }  /* l'unité ne se colle pas au chiffre */

small, .small { font-size: var(--fs-body-sm); color: var(--t3); line-height: 1.6; }

/* ----------------------------------------------------------- 4. EN-TÊTE */

.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(2,10,18,.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; gap: var(--s-5);
}

.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t1); flex-shrink: 0; }

/* Symbole et wordmark : un seul fichier chacun, teinté par masque CSS.
   Même mécanique que dans l'application — pas de second fichier par couleur. */
.sym, .wm {
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  flex-shrink: 0;
}
.sym { -webkit-mask-image: url('../img/nalu-symbole.svg'); mask-image: url('../img/nalu-symbole.svg'); }
.wm  { -webkit-mask-image: url('../img/nalu-wordmark.svg');  mask-image: url('../img/nalu-wordmark.svg'); }

.lockup__sym { width: 30px; height: 30px; color: var(--aqua); transition: color .2s var(--ease); }
.lockup__wm  { width: 92px; height: 13px; color: var(--t1); }
.lockup:hover .lockup__sym { color: var(--gold); }

/* Six entrées : la barre ne s'affiche qu'à partir de 1040 px, en dessous elle
   se serrerait. Le pied de page porte les mêmes liens sur les petits écrans. */
.nav { display: none; margin-left: auto; align-items: center; gap: var(--s-5); }
@media (min-width: 1040px) { .nav { display: flex; gap: var(--s-6); } }
.nav a {
  color: var(--t2); text-decoration: none;
  font-size: var(--fs-body-lg); font-weight: 500;
  padding: var(--s-2) 0; border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--t1); border-bottom-color: var(--aqua); }

.topbar .btn { margin-left: auto; }
@media (min-width: 1040px) { .topbar .btn { margin-left: 0; } }

/* ------------------------------------------------------------ 5. BOUTONS
   Un bouton se touche : il a donc droit à un cadre. En aqua, jamais en or. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-ui); font-size: var(--fs-body-lg); font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 13px var(--s-5);
  min-height: 44px;                      /* cible tactile */
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--aqua); color: var(--on-accent); }
.btn--primary:hover { background: #35DED0; }
.btn--ghost { background: transparent; color: var(--t1); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--aqua); color: var(--aqua); }
.btn--sm { font-size: var(--fs-body); padding: 10px var(--s-4); min-height: 40px; }

.btnrow { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Badges de magasin */
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-4); min-height: 52px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--panel); color: var(--t1); text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.store:hover { border-color: var(--aqua); background: var(--panel2); }

/* Magasin pas encore ouvert : ce n'est pas un lien, donc ce n'est pas un <a>.
   Un bouton de téléchargement qui ne télécharge rien est un mensonge d'interface. */
.store--soon {
  background: transparent; border-style: dashed; color: var(--t3); cursor: default;
}
.store--soon:hover { border-color: var(--line); background: transparent; }
.store--soon .s1 { color: var(--gold); }
.store--soon .s2 { color: var(--t2); }
.store svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; }
.store span { display: block; line-height: 1.25; }
.store .s1 { font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.store .s2 { font-size: var(--fs-h3); font-weight: 600; }

/* ---------------------------------------------------------- 6. SECTIONS */

.section { padding: var(--s-9) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .section { padding: var(--s-10) 0; } }
.section--flush { border-top: 0; }

.cols { display: grid; gap: var(--s-7) var(--s-7); }
@media (min-width: 760px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .cols--sidebar { grid-template-columns: 240px 1fr; gap: var(--s-8); } }

/* Le bloc à filet : ce qui ne se touche pas n'a pas de cadre. */
.rulebox { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.rulebox h3 { font-size: var(--fs-h2); font-weight: 600; font-family: var(--f-ui); margin-bottom: var(--s-2); letter-spacing: -.01em; }
.rulebox p  { color: var(--t2); font-size: var(--fs-body-lg); line-height: 1.65; }

/* Le filet en marge à gauche — réservé aux deux règles de couleur */
.rulecard { border-left: 3px solid var(--gold); padding: var(--s-2) 0 var(--s-2) var(--s-4); }
.rulecard.aq { border-left-color: var(--aqua); }
.rulecard h3 { font-family: var(--f-brand); font-size: var(--fs-h1); margin-bottom: var(--s-2); letter-spacing: var(--ls-title); }
.rulecard p { color: var(--t2); font-size: var(--fs-body-lg); }

/* ------------------------------------------------------------ 7. COUVERTURE
   Le seul endroit du site où le centrage est permis — et on ne s'en sert pas :
   la couverture reste fer à gauche, la colonne de droite porte l'écran. */

.cover { padding: var(--s-9) 0 var(--s-8); }
@media (min-width: 900px) {
  .cover { padding: var(--s-10) 0; }
  .cover__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: center; }
}
/* Le bloc de marque de la couverture — le symbole et le wordmark de la charte,
   à une taille qui les rend lisibles pour eux-mêmes, avec la devise d'en-tête
   de l'application. Il précède le filet or : la marque, puis le titre. */
.cover__brand {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.cover__sym { width: 72px; height: 72px; color: var(--aqua); }
.cover__wm  { display: block; width: 168px; height: 23px; color: var(--t1); }
.cover__baseline {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-body-lg); letter-spacing: .06em;
  color: var(--t3);
}
@media (min-width: 900px) {
  .cover__sym { width: 88px; height: 88px; }
  .cover__wm  { width: 208px; height: 28px; }
}

.cover__rule { height: 1px; width: 64px; background: var(--gold); margin-bottom: var(--s-6); }
.cover h1 {
  font-family: var(--f-brand);
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: .01em;
  margin-bottom: var(--s-5);
}
.cover h1 em { font-style: normal; color: var(--gold); }
.cover .devise {
  font-size: var(--fs-body-lg); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t2); margin-bottom: var(--s-6);
}
.cover .pitch { font-size: var(--fs-h3); line-height: 1.7; color: var(--t2); max-width: 46ch; margin-bottom: var(--s-6); }
.cover .meta {
  display: flex; gap: var(--s-6) var(--s-7); flex-wrap: wrap; margin-top: var(--s-6);
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t3);
}

/* ------------------------------------------------------------- 8. TÉLÉPHONE */

.phone {
  border: 1px solid #16293A; border-radius: var(--r-phone);
  overflow: hidden; background: var(--bg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  max-width: 300px;
}
.phone img { width: 100%; display: block; }
.phone--cover { margin: 0 auto; max-width: 320px; }
@media (min-width: 900px) {
  .phone--cover { max-height: 70vh; }
  .phone--cover img { height: 70vh; object-fit: cover; object-position: top; }
}
.phcap {
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--t3); margin-top: var(--s-3);
}
.phones { display: grid; gap: var(--s-7); justify-items: start; }
@media (min-width: 760px) { .phones { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------- 9. LES SIX VERDICTS */

.verdicts { border-top: 1px solid var(--line); }
.verdict {
  display: grid; grid-template-columns: 10px 1fr auto; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.verdict__dot { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--c); align-self: center; }
.verdict__label { font-size: var(--fs-h2); font-weight: 600; color: var(--c); letter-spacing: -.015em; }
.verdict__note { font-size: var(--fs-body-lg); color: var(--t2); grid-column: 2; margin-top: 2px; }
.verdict__code { font-family: var(--f-data); font-size: var(--fs-body-sm); color: var(--t3); }
@media (max-width: 560px) { .verdict__code { display: none; } }

/* ------------------------------------------------ 10. L'ÉCHELLE DE NIVEAU */

.levels { border-top: 1px solid var(--line); }
.level {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.level__n {
  font-family: var(--f-data); font-size: var(--fs-h3); font-weight: 700;
  color: var(--on-accent); background: var(--c);
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
.level__name { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; }
.level__desc { font-size: var(--fs-body-lg); color: var(--t2); margin-top: 2px; }

/* --------------------------------------------- 11. LA JAUGE — composant signature
   Le filet fin est la plage praticable, le segment or la zone idéale,
   le repère la vague du jour. */

.gauge { margin-top: var(--s-5); }
.gauge__track {
  position: relative; height: 3px; background: var(--line); border-radius: var(--r-pill);
}
.gauge__ideal {
  position: absolute; top: 0; height: 3px; background: var(--gold); border-radius: var(--r-pill);
  left: var(--from); width: var(--w);
}
.gauge__mark {
  position: absolute; top: 50%; left: var(--at);
  width: 11px; height: 11px; border-radius: var(--r-pill);
  background: var(--t1); border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
}
.gauge__legend {
  display: flex; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-3);
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.gauge__legend .a { color: var(--gold); }
.gauge__legend .b { color: var(--t2); }

/* ------------------------------------------- 12. LA RANGÉE DE SPOT (démo) */

.spotdemo { border-top: 1px solid var(--line); }
.spotrow {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); align-items: center;
}
.spotrow__verdict { font-size: var(--fs-h3); font-weight: 600; color: var(--c); letter-spacing: -.01em; }
.spotrow__place { font-size: var(--fs-body-lg); color: var(--t2); margin-top: 3px; }
.spotrow__place b { color: var(--t1); font-family: var(--f-brand); font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--ls-title); }
.spotrow__data { text-align: right; font-family: var(--f-data); }
.spotrow__h { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; }
.spotrow__x { font-size: var(--fs-body-sm); color: var(--t3); margin-top: 3px; }

/* ------------------------------------------------ 12 bis. LES ÉTAPES
   Même ossature que l'échelle de niveau, mais la pastille est en or : un
   numéro d'étape est éditorial, il numérote, il ne se touche pas. D'où le
   cerclage plutôt que le fond plein, réservé aux couleurs de niveau. */

.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.step__n {
  font-family: var(--f-data); font-size: var(--fs-h3); font-weight: 700;
  color: var(--gold); border: 1px solid var(--gold);
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
.step__name { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; }
.step__desc {
  font-size: var(--fs-body-lg); color: var(--t2);
  margin-top: var(--s-1); line-height: 1.65; max-width: 68ch;
}

/* --------------------------------------------------- 13. CARTE PREMIUM */

.card {
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--panel); padding: var(--s-6);
}
.card--quiet { background: transparent; }
.price { font-family: var(--f-data); font-size: var(--fs-display); font-weight: 700; letter-spacing: -.03em; }
.price small { font-family: var(--f-ui); font-size: var(--fs-h3); color: var(--t3); font-weight: 400; letter-spacing: 0; }

/* Les trois formules — même logique que la rangée de spot : ce qui compte
   d'abord, le détail en second rang, un filet entre les lignes. Aucune ligne
   n'est cliquable ici : l'achat se fait dans l'application, pas sur le site. */
.plans { border-top: 1px solid var(--line); }
.plan {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.plan__price {
  font-family: var(--f-data); font-size: var(--fs-h1);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.plan__note { font-size: var(--fs-body-lg); color: var(--t2); margin-top: var(--s-1); }
/* L'or dit « ceci compte », il ne dit pas « appuyez ici » : la remise est
   une information éditoriale, pas un bouton. */
.plan__tag {
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold); border: 1px solid var(--gold);
  border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap;
}
.plan--best .plan__price { color: var(--t1); }

.checks { list-style: none; margin-top: var(--s-5); }
.checks li {
  position: relative; padding-left: var(--s-6); margin-top: var(--s-3);
  font-size: var(--fs-body-lg); color: var(--t2);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 12px; height: 1px; background: var(--gold);
}
.checks li b { color: var(--t1); font-weight: 600; }

/* ------------------------------------------------------- 14. PAGES DE TEXTE */

.page-head { padding: var(--s-9) 0 var(--s-7); }
.page-head h1 {
  font-family: var(--f-brand); font-size: var(--fs-section);
  line-height: 1.08; letter-spacing: var(--ls-title); margin-bottom: var(--s-3);
}
.page-head .updated {
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t3);
}

.doc { padding-bottom: var(--s-10); }
.doc h2 {
  font-family: var(--f-brand); font-size: var(--fs-h1);
  letter-spacing: var(--ls-title); line-height: 1.2;
  margin-bottom: var(--s-4); scroll-margin-top: 96px;
}
.doc h2 .n {
  font-family: var(--f-data); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--ls-label); color: var(--gold);
  display: block; margin-bottom: var(--s-2);
}
.doc h3 { font-size: var(--fs-h2); font-weight: 600; margin: var(--s-6) 0 var(--s-2); letter-spacing: -.01em; }
.doc section { border-top: 1px solid var(--line); padding: var(--s-7) 0; }
.doc section:first-of-type { border-top: 0; padding-top: 0; }
.doc p { color: var(--t2); line-height: 1.75; max-width: 68ch; }
.doc p + p { margin-top: var(--s-4); }
.doc b, .doc strong { color: var(--t1); font-weight: 600; }
.doc a:not(.btn) { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }
.doc ul { list-style: none; margin-top: var(--s-4); max-width: 68ch; }
.doc ul li { position: relative; padding-left: var(--s-5); color: var(--t2); line-height: 1.75; }
.doc ul li + li { margin-top: var(--s-3); }
.doc ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--t3); }
.doc code { font-family: var(--f-data); font-size: .9em; color: var(--gold); }

/* Sommaire collant */
.toc { display: none; }
@media (min-width: 900px) {
  .toc { display: block; position: sticky; top: 96px; align-self: start; }
}
.toc ol { list-style: none; counter-reset: toc; border-top: 1px solid var(--line); }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.toc a {
  display: flex; gap: var(--s-3); padding: 10px 0;
  color: var(--t3); text-decoration: none; font-size: var(--fs-body-lg); line-height: 1.35;
  transition: color .16s var(--ease);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-data); font-size: var(--fs-label); color: var(--gold);
  padding-top: 3px; flex-shrink: 0;
}
.toc a:hover, .toc a.on { color: var(--t1); }

/* ------------------------------------------------------------- 15. FAQ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--s-5) var(--s-6) var(--s-5) 0; position: relative;
  font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; color: var(--t1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 1.5px solid var(--aqua); border-bottom: 1.5px solid var(--aqua);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--aqua); }
.faq .answer { padding: 0 0 var(--s-6); max-width: 68ch; }
.faq .answer p { color: var(--t2); line-height: 1.75; }
.faq .answer p + p { margin-top: var(--s-3); }
.faq .answer ul { list-style: none; margin-top: var(--s-3); }
.faq .answer li { position: relative; padding-left: var(--s-5); color: var(--t2); }
.faq .answer li + li { margin-top: var(--s-2); }
.faq .answer li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--t3); }
.faq .answer b { color: var(--t1); font-weight: 600; }
.faq .answer a:not(.btn) { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------- 15 bis. ÉMOJI
   Interdit n° 4 de la planche : « l'emoji en guise d'icône ». Il est levé sur
   les seules pages d'aide, où le registre est conversationnel et où les textes
   publiés les portaient d'origine. Ils restent bannis de l'accueil et des
   sections numérotées de la politique de confidentialité.
   Décoratifs : toujours aria-hidden, jamais porteurs de sens à eux seuls. */

.emo {
  font-size: .82em;
  margin-right: .4em;
  font-style: normal;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  vertical-align: .04em;
}
.h-section .emo   { font-size: .48em; vertical-align: .2em;  margin-right: .32em; }
.page-head h1 .emo { font-size: .56em; vertical-align: .14em; }
.contact .who .emo { font-size: .62em; vertical-align: .1em; }

/* ------------------------------------------------------- 16. AVERTISSEMENT
   L'unique bloc du site qui porte une couleur de verdict hors verdict :
   il dit un risque physique, pas une décoration. */

.notice {
  border: 1px solid rgba(240,109,109,.35); border-radius: var(--r-xs);
  background: rgba(240,109,109,.06);
  padding: var(--s-5); margin-top: var(--s-6);
}
.notice h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--strong); margin-bottom: var(--s-2); }
.notice p { color: var(--t2); font-size: var(--fs-body-lg); }

/* ---------------------------------------------------- 17. BLOC DE CONTACT */

.contact {
  border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: var(--s-6); background: var(--panel);
  display: grid; gap: var(--s-4);
}
@media (min-width: 700px) { .contact { grid-template-columns: 1fr auto; align-items: center; } }
.contact .who { font-family: var(--f-brand); font-size: var(--fs-h1); letter-spacing: var(--ls-title); }
.contact .when { font-size: var(--fs-body-lg); color: var(--t2); margin-top: var(--s-1); }

/* -------------------------------------------------------------- 18. PIED */

.foot { border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-7); }
.foot__grid { display: grid; gap: var(--s-7); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h3 {
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--t3); margin-bottom: var(--s-4);
}
.foot ul { list-style: none; }
.foot li + li { margin-top: var(--s-3); }
.foot a { color: var(--t2); text-decoration: none; font-size: var(--fs-body-lg); }
.foot a:hover { color: var(--aqua); }
.foot .devise-foot {
  font-family: var(--f-brand); font-size: var(--fs-h2);
  letter-spacing: var(--ls-title); color: var(--t1); margin-top: var(--s-4);
}
.foot__legal {
  border-top: 1px solid var(--line); margin-top: var(--s-7); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  font-family: var(--f-data); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--t3);
}
.foot__legal a { color: var(--t3); font-family: var(--f-data); font-size: var(--fs-label); }

/* ---------------------------------------------------------- 19. IMPRESSION */

@media print {
  .topbar, .foot, .skip, .toc, .phone { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc p, .doc li, .lede { color: #222; }
  .doc h2 .n, .kicker.gold { color: #7a5400; }
  a { color: #000; text-decoration: underline; }
  .section, .doc section { border-color: #ccc; page-break-inside: avoid; }
  .faq details { border-color: #ccc; }
  .faq details .answer { display: block !important; }
}