/* ============================================================================
   Calexa — La Vigie (waitlist + newsletter) · thème clair
   Typo self-hébergée (Inter + Space Grotesk, sous-ensemble latin) → RGPD by design.
   Palette WCAG AA du doc §4. Le corail est RARE : il ne marque que la valeur.
   ========================================================================== */

/* ── Polices self-hébergées ─────────────────────────────────────────────────*/
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spacegrotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spacegrotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/spacegrotesk-700.woff2') format('woff2');}

/* ── Les jetons ne sont PAS ici ──────────────────────────────────────────────
   Palette, ombres, rayons et typographie vivent dans `lib/tokens.php`, inliné
   dans le <head> par partials/header.php et partials/seo_header.php.
   Ce fichier ne décrit plus que des COMPOSANTS.

   Ce `:root` existait aussi dans lib/app_ui.php, recopié à la main : les deux
   copies avaient divergé (bouton primaire corail ici, bleu là-bas ; `--bord`
   faux dans les deux). Toute valeur écrite en dur ci-dessous est désormais un
   défaut, pas un raccourci. */

*{box-sizing:border-box;margin:0;padding:0}
/* Aucun controle de formulaire sous 16 px. En dessous, Safari iOS zoome au
   focus : la page saute, l utilisateur perd le fil et abandonne le formulaire.
   Regle de base — les composants peuvent aller au-dessus, jamais en dessous. */
input,select,textarea{font-family:inherit;font-size:16px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--encre);background:var(--blanc);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display)}
a{color:var(--bleu);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px;top:0;background:var(--corail);color:var(--nuit);padding:.6rem 1rem;font-weight:700;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}

/* ── Header ──────────────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--bord)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo-img{height:30px;width:auto;display:block}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-r a.link{color:var(--gris);font-weight:500;font-size:15px}
.nav-r a.link:hover{color:var(--nuit)}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;border-radius:var(--radius-sm);padding:11px 18px;font-size:15px;cursor:pointer;border:none;transition:.15s;text-align:center;
  /* 44 px : plancher de cible tactile (WCAG 2.5.8). Plusieurs boutons
     tombaient a 39-40 px, dont le CTA de l en-tete et le consentement. */
  min-height:44px}
.btn:active{transform:translateY(1px)}
/* Bouton primaire = Bleu Altitude (rôle « action » de la charte §4.2), comme
   l'app (lib/app_ui.php) et la maquette validée. Le corail redevient ce qu'il
   doit être : l'accent des moments de valeur, pas la couleur de tous les CTA. */
.btn-primary{background:var(--bleu);color:#fff;box-shadow:var(--ombre-bleu)}
.btn-primary:hover{background:var(--bleu-h);box-shadow:var(--ombre-bleu-h)}
.btn-primary:disabled{opacity:.6;cursor:default;box-shadow:none}
/* Sur fond Nuit, le bleu d'action serait sombre sur sombre (2,4:1 — illisible).
   Corail + texte Nuit y donne 5,6:1 : la lisibilité passe avant la rareté.
   (Texte blanc sur corail tomberait à 2,8:1 — d'où le texte Nuit.) */
.btn-corail{background:var(--corail);color:var(--nuit);box-shadow:var(--ombre-corail)}
.btn-corail:hover{background:var(--corail-h)}
.btn-ghost{background:transparent;color:var(--nuit);border:1.5px solid var(--bord)}
.btn-ghost:hover{border-color:var(--gris2);background:var(--ciel)}

/* ── Hero (Dossier Designer §4.6a) ────────────────────────────────────────
   « Dégradé vertical à peine perceptible du blanc vers le Ciel, une fine ligne
   d'horizon corail au tiers supérieur — la page respire l'aube sans la
   représenter. » L'opacité de la ligne suit la maquette validée (.28) et non
   le 1 % du texte : à 1 % elle est strictement invisible à l'écran. */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--ciel) 100%)}
.hero::before{content:"";position:absolute;left:0;right:0;top:33%;height:1px;background:var(--corail);opacity:.28;z-index:0}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:55fr 45fr;gap:48px;align-items:center;padding-top:60px;padding-bottom:64px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--bleu);font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;margin-bottom:18px;border:1px solid var(--bord)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--corail)}
h1.title{font-size:46px;line-height:1.1;color:var(--nuit);letter-spacing:-.9px}
.sub{font-size:17px;color:var(--gris);margin:16px 0 22px;max-width:46ch}
.sub b{color:var(--encre);font-weight:600}

/* ── Mini-configurateur du hero ───────────────────────────────────────────
   Le levier de conversion de la page : le visiteur exprime son intention ICI,
   et signup.php la relaie jusqu'à onboarding.php (lib/users.php:cx_capture_intent).
   §4.6a décrit « trois champs horizontaux » ; à 55 % de 1080 px cela donnerait
   ~110 px par champ, inutilisable. Ils sont donc sur deux lignes : les deux
   questions de lieu, puis le budget et le bouton. */
.cfg{background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:16px;box-shadow:var(--ombre-2)}
.cfg-row{display:flex;gap:10px;flex-wrap:wrap}
.cfg-row+.cfg-row{margin-top:10px}
.cfg-f{flex:1 1 190px;min-width:0;display:flex;flex-direction:column}
.cfg-f.is-budget{flex:0 1 150px}
.cfg-f label{font-size:13px;font-weight:600;color:var(--gris);margin-bottom:5px;letter-spacing:.1px}
.cfg-f input,.cfg-f select{width:100%;border:1.5px solid var(--bord);border-radius:var(--radius-sm);padding:12px 13px;
  /* 16 px minimum : en dessous, iOS zoome au focus et éjecte le hero du cadre. */
  font-size:16px;font-family:inherit;color:var(--encre);background:#fff;height:46px}
.cfg-f input::placeholder{color:var(--gris3)}
.cfg-f input:focus,.cfg-f select:focus{outline:none;border-color:var(--bleu);box-shadow:var(--anneau)}
.cfg-go{flex:1 1 210px;align-self:flex-end;height:46px;padding:0 20px;font-size:15.5px;white-space:nowrap}
.cfg-note{font-size:13px;color:var(--gris2);margin-top:11px;line-height:1.5}
.cfg-note b{color:var(--vert);font-weight:600}
.hero-alt{margin-top:14px;font-size:14.5px}
.hero-alt a{font-weight:500}

/* ── Formulaire d'inscription ───────────────────────────────────────────────*/
.form{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:18px;box-shadow:var(--ombre-2)}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--gris);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.field input,.field select{width:100%;border:1.5px solid var(--bord);border-radius:var(--radius-sm);padding:13px 14px;font-size:16px;font-family:inherit;color:var(--encre);background:var(--blanc)}
.field input:focus,.field select:focus{outline:none;border-color:var(--bleu);box-shadow:var(--anneau)}
.lbl-hint{font-weight:400;color:var(--gris2);text-transform:none;letter-spacing:0}
/* Bouton stylé en lien, mais isolé sous un champ — donc une vraie cible tactile
   lui est due : il ne bénéficie pas de l'exception WCAG des liens en ligne dans
   un paragraphe. Le rembourrage vertical agrandit la zone cliquable sans
   grossir le texte, et le retrait négatif annule le décalage visuel. */
.apt-switch{display:inline-flex;align-items:center;min-height:44px;margin-top:0;background:none;border:0;padding:0 4px;font-family:inherit;font-size:13px;color:var(--bleu);cursor:pointer}
.apt-switch:hover{text-decoration:underline}
.form .btn-primary{width:100%;padding:14px;font-size:16px;margin-top:4px}
.reassure{font-size:13px;color:var(--gris2);margin-top:12px;text-align:center;line-height:1.5}
.reassure b{color:var(--vert);font-weight:600}
.reassure a{color:var(--gris2);text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* messages */
.msg{border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;margin-top:12px;display:none}
.msg.show{display:block}
.msg.ok{background:var(--vert-bg);color:var(--vert)}
.msg.err{background:var(--rouge-bg);color:var(--rouge)}

/* état "vérifiez vos emails" */
.pending{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:26px;box-shadow:var(--ombre-2);text-align:center}
.pending .ico{font-size:34px;margin-bottom:8px}
.pending h3{font-size:20px;color:var(--nuit);margin-bottom:8px}
.pending p{color:var(--gris);font-size:15px}
.pending .hint{font-size:13px;color:var(--gris2);margin-top:14px}

/* ── Carte de deal (aperçu hero) ────────────────────────────────────────────*/
.card{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--ombre-3);transform:rotate(-1.2deg)}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.route{font-family:var(--display);font-weight:600;font-size:18px;color:var(--nuit)}
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gris);font-weight:500}
.fresh .pulse{width:8px;height:8px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(14,127,88,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,127,88,.45)}70%{box-shadow:0 0 0 7px rgba(14,127,88,0)}100%{box-shadow:0 0 0 0 rgba(14,127,88,0)}}
.price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
/* Le prix est en Inter 700 tabulaire, pas en Space Grotesk : la charte réserve
   les chiffres au corps de texte (« prix Inter 700 tabulaire 28-32 ») et tnum
   garantit que 78 € et 112 € s'alignent au pixel dans une colonne. */
.price{font-family:var(--font);font-weight:700;font-size:32px;color:var(--encre);font-variant-numeric:tabular-nums;letter-spacing:-.6px;line-height:1.1}
.badge{background:var(--vert-bg);color:var(--vert);font-weight:600;font-size:13px;padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.meta{font-size:13px;color:var(--gris);margin-bottom:10px}
.spark{width:100%;height:56px;display:block}
/* Deux rangées : d'abord l'action qui garde dans le tunnel (« Surveiller cette
   route » → inscription), ensuite le lien d'affiliation qui en fait sortir. */
.card .foot{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.card .foot .foot-row{display:flex;gap:8px}
.card .foot .btn-primary{width:100%;padding:12px}
.card .foot .btn-ghost{padding:11px 14px}
.card-cap{text-align:center;color:var(--gris3);font-size:13px;margin-top:14px}
.card-img{aspect-ratio:3/2;background:var(--brume) center/cover no-repeat;border-radius:15px 15px 0 0;margin:-18px -18px 14px}
.mini-img{aspect-ratio:3/2;background:var(--brume) center/cover no-repeat;border-radius:9px;margin-bottom:11px}

/* ── Sections ───────────────────────────────────────────────────────────────*/
section.block{padding:66px 0}
.kicker{color:var(--corail-txt);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;text-align:center;margin-bottom:10px}
h2{font-size:32px;color:var(--nuit);text-align:center;letter-spacing:-.3px}
.lead{color:var(--gris);text-align:center;max-width:56ch;margin:12px auto 0;font-size:16.5px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.step{background:var(--brume);border:1px solid var(--bord);border-radius:var(--radius);padding:26px 22px}
.step .n{width:38px;height:38px;border-radius:11px;background:var(--nuit);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;margin-bottom:16px}
.step h3{font-size:18px;color:var(--nuit);margin-bottom:7px}
.step p{color:var(--gris);font-size:15px}

.deals-band{background:var(--brume);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.mini{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:16px}
.mini .r{font-family:var(--display);font-weight:600;color:var(--nuit);font-size:15.5px;margin-bottom:8px}
.mini .p{font-family:var(--font);font-weight:700;font-size:26px;color:var(--encre);font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.mini .b{display:inline-block;background:var(--vert-bg);color:var(--vert);font-weight:600;font-size:13px;padding:3px 8px;border-radius:999px;margin-left:6px;font-variant-numeric:tabular-nums}
.mini .m{font-size:13px;color:var(--gris2);margin-top:7px}
/* « Surveiller cette route » : l'action qui garde dans le tunnel, donc pleine
   et bleue, au-dessus du partage. */
.mini-watch{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;margin-top:12px;padding:10px;border:0;border-radius:10px;background:var(--bleu);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:.15s}
.mini-watch:hover{background:var(--bleu-h);color:#fff}
.note{text-align:center;color:var(--gris2);font-size:13px;margin-top:26px}

/* ── CTA répété aux points de décision ────────────────────────────────────
   Un visiteur convaincu au milieu de page ne doit pas avoir à remonter :
   le CTA se retrouve après la preuve, après la comparaison et après la FAQ. */
.cta-band{background:var(--nuit);padding:26px 0}
.cta-band-in{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.cta-band-txt{color:#fff;font-family:var(--display);font-weight:600;font-size:18px;text-align:center;max-width:34ch}
.cta-soft{margin-top:34px;text-align:center}
.cta-soft .btn{padding:13px 24px;font-size:15.5px}
.cta-soft .cta-soft-note{margin-top:10px;font-size:13px;color:var(--gris2)}

/* ── Panneau personnel (après confirmation / suivi) ─────────────────────────*/
.panel{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--radius);padding:26px;box-shadow:var(--ombre-2)}
.rank-hero{text-align:center;padding:6px 0 18px;border-bottom:1px solid var(--bord);margin-bottom:18px}
.rank-hero .lbl{font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--gris2);font-weight:600}
.rank-hero .n{font-family:var(--display);font-size:56px;font-weight:700;color:var(--corail);line-height:1;margin:.2rem 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.badge-p{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px}
.badge-p.on{background:var(--vert-bg);color:var(--vert)}
.badge-p.off{background:var(--brume);color:var(--gris2);border:1px solid var(--bord)}
.share-label{display:block;font-size:13px;color:var(--gris);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.share-row{display:flex;gap:8px}
.share-row input{flex:1;min-width:0;border:1.5px solid var(--bord);border-radius:var(--radius-sm);padding:12px 14px;font-size:16px;color:var(--encre);background:var(--brume)}
.share-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.share-btns a{flex:1;text-align:center;background:var(--brume);border:1px solid var(--bord);color:var(--nuit);border-radius:var(--radius-sm);padding:11px;font-size:14px;font-weight:600}
.share-btns a:hover{background:var(--ciel)}

/* ── Prose (pages transparence) ─────────────────────────────────────────────*/
.prose{max-width:64ch;margin:0 auto;padding:56px 0 20px}
.prose h1{font-size:38px;color:var(--nuit);margin-bottom:14px;letter-spacing:-.4px}
.prose h2{font-size:21px;color:var(--nuit);text-align:left;margin:30px 0 8px}
.prose p,.prose li{color:var(--gris);margin-bottom:12px;font-size:16px}
.prose ul{padding-left:20px;margin-bottom:12px}
.prose strong{color:var(--encre)}
.prose .updated{color:var(--gris2);font-size:14px;margin-bottom:26px}

/* ── Footer (nuit) ──────────────────────────────────────────────────────────*/
footer.site{background:var(--nuit);color:var(--sur-nuit);padding:48px 0 30px}
.f-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.f-logo{height:26px;width:auto}
.f-tag{color:var(--sur-nuit-2);font-size:14px;margin-top:12px;max-width:34ch}
.f-links{display:flex;gap:34px;flex-wrap:wrap}
.f-col a{display:block;color:var(--sur-nuit);font-size:14px;margin-bottom:9px}
.f-col a:hover{color:#fff}
.f-col .h{color:#fff;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.f-bot{padding-top:22px;color:var(--sur-nuit-3);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ── Offre : gratuit / Calexa Plus ──────────────────────────────────────────*/
.brand-mark{display:block;width:46px;height:46px;margin:0 auto 16px;border-radius:12px}
.cmp-wrap{margin-top:44px;overflow-x:auto;border:1px solid var(--bord);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;min-width:820px;background:#fff}
.cmp th,.cmp td{text-align:left;padding:14px 18px;font-size:14.5px;border-bottom:1px solid var(--bord);vertical-align:top}
.cmp thead th{font-family:var(--display);font-size:15px;color:var(--nuit);background:var(--brume)}
.cmp thead th.col-plus{color:var(--corail-txt)}
.cmp thead th.col-pro{color:var(--bleu)}
.cmp tbody td:first-child{color:var(--gris);font-weight:500;width:26%}
.cmp td.col-plus{background:rgba(255,107,74,.05);color:var(--encre);font-weight:500}
.cmp td.col-pro{background:rgba(29,79,216,.04);color:var(--encre);font-weight:500}
.cmp td.col-free{color:var(--gris)}
.cmp tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--vert);font-weight:600}
.cmp .dash{color:var(--gris2)}
.cmp small{color:var(--gris2);font-weight:400;white-space:nowrap;font-size:13px}
.cmp .reco{display:inline-block;margin-left:6px;background:rgba(255,107,74,.14);color:var(--corail-txt);font-family:var(--font);font-size:13px;font-weight:700;padding:3px 9px;border-radius:999px;vertical-align:middle}

/* ── Tarifs : bascule mensuel/annuel + 3 offres ──────────────────────────── */
.pricing{margin-top:38px}
.bill-row{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:32px}
.bill-toggle{display:inline-flex;background:var(--brume);border:1px solid var(--bord);border-radius:999px;padding:4px}
.bt-opt{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--gris);padding:9px 18px;border-radius:999px;cursor:pointer;transition:.18s}
.bt-opt:hover{color:var(--nuit)}
.bt-opt.is-on{background:var(--nuit);color:#fff}
.bt-save{background:var(--vert-bg);color:var(--vert);font-size:13px;font-weight:700;padding:2px 7px;border-radius:999px}
.bt-opt.is-on .bt-save{background:rgba(63,209,144,.22);color:#7FE9BE}
.bill-hint{font-size:13px;color:var(--gris2)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bord);border-radius:var(--radius);padding:26px 22px 58px}
.tier.is-reco{border:2px solid var(--corail);box-shadow:var(--ombre-3)}
.tier-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--corail);color:var(--nuit);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;white-space:nowrap}
.tier-name{font-family:var(--display);font-size:17px;color:var(--nuit);margin:0 0 4px}
.tier-tag{font-size:13px;color:var(--gris2);margin:0 0 16px;min-height:34px;line-height:1.4}
.tier-price{display:flex;align-items:baseline;gap:4px}
.tier-price .amt{font-family:var(--display);font-size:38px;font-weight:700;color:var(--nuit);line-height:1}
.tier-price .per{font-size:14px;color:var(--gris2);font-weight:500}
.tier-sub{font-size:13px;color:var(--gris);margin:9px 0 18px;min-height:18px}
.tier-feats{list-style:none;padding:0;margin:0 0 22px;flex:1}
.tier-feats li{position:relative;padding:6px 0 6px 22px;font-size:14px;color:var(--encre);line-height:1.45}
.tier-feats li::before{content:'✓';position:absolute;left:0;color:var(--vert);font-weight:800}
.tier-feats li.inherit{padding-left:0;color:var(--gris2);font-size:13px;font-weight:600}
.tier-feats li.inherit::before{content:''}
.tier-cta{width:100%}
.tier-note{position:absolute;left:22px;right:22px;bottom:18px;margin:0;text-align:center;font-size:13px;font-weight:600;color:var(--corail-txt);line-height:1.4}
.tier-guarantees{margin:24px auto 0;max-width:66ch;text-align:center;font-size:13px;color:var(--gris2);line-height:1.7}

.cmp-details{margin-top:28px;border:1px solid var(--bord);border-radius:var(--radius);background:#fff;overflow:hidden}
.cmp-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--nuit);list-style:none}
.cmp-details summary::-webkit-details-marker{display:none}
.cmp-details summary::after{content:'▾';color:var(--gris2);font-size:15px;transition:transform .2s}
.cmp-details[open] summary::after{transform:rotate(180deg)}
.cmp-details summary:hover{background:var(--brume)}
.cmp-details .cmp-wrap{margin-top:0;border:0;border-top:1px solid var(--bord);border-radius:0}
@media(max-width:860px){.tiers{grid-template-columns:1fr;gap:26px}.tier-tag,.tier-sub{min-height:0}}
.price-note{text-align:center;color:var(--gris2);font-size:13px;margin-top:16px}

/* ── Bandeau de consentement ────────────────────────────────────────────────*/
.cx-consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--bord);box-shadow:var(--ombre-haut)}
.cx-consent[hidden]{display:none}
.cx-consent-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:20px;padding:16px 24px;flex-wrap:wrap}
.cx-consent-txt{flex:1;min-width:260px;font-size:13.5px;color:var(--gris);line-height:1.55}
.cx-consent-txt strong{color:var(--encre)}
.cx-consent-btns{display:flex;gap:10px;flex-shrink:0}
.cx-consent-btns .btn{padding:11px 20px;font-size:14px}
@media(max-width:560px){.cx-consent-btns{width:100%}.cx-consent-btns .btn{flex:1}}

/* ── Responsive ─────────────────────────────────────────────────────────────*/
@media(max-width:860px){
  /* padding-block et non `padding` : .hero-in est posé sur le même élément que
     .wrap, et un raccourci `padding:40px 0` écrasait sa marge latérale — le texte
     du hero touchait le bord de l'écran en mobile (constaté le 22/09/2026). */
  .hero-in{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:48px}
  h1.title{font-size:36px;letter-spacing:-.6px}
  .sub{font-size:16.5px}
  .steps,.mini-grid{grid-template-columns:1fr}
  .card{transform:none}
  /* Seule « Comment ça marche » se replie. « Connexion » RESTE : toute la nav
     était masquée, si bien qu'un inscrit sur mobile n'avait aucun moyen de se
     connecter depuis l'en-tête. */
  .nav-r .link-sec{display:none}
  .nav-r{gap:16px}
  .nav-r .btn{padding:10px 14px;font-size:14.5px}
  /* La ligne d'horizon tombe au milieu du H1 quand la colonne est seule :
     on la remonte au-dessus du texte plutôt que de la faire barrer le titre. */
  .hero::before{top:22%}
}
@media(max-width:560px){
  /* En-tête à 390 px : 342 px utiles seulement. Logo 97 + « Connexion » 72 +
     bouton 148 + deux écarts de 16 = 349 px, donc le CTA se cassait sur deux
     lignes et débordait de la barre. On récupère la place sur le logo, les
     écarts et le rembourrage — plutôt que de re-masquer « Connexion ». */
  .logo-img{height:26px}
  .nav-r{gap:12px}
  .nav-r a.link{font-size:14px}
  .nav-r .btn{padding:11px 12px;font-size:14px}
  /* Ceinture et bretelles : un CTA ne doit jamais se couper en deux. */
  .nav-r .btn{white-space:nowrap}

  /* Un champ par ligne : deux champs côte à côte à 360 px donnent des zones de
     saisie de ~150 px où le nom d'aéroport n'est plus lisible en entier. */
  .cfg-f,.cfg-f.is-budget,.cfg-go{flex:1 1 100%}
  h1.title{font-size:32px}
  .hero-in{padding-top:32px;padding-bottom:40px;padding-left:16px;padding-right:16px}
  .cta-band-txt{font-size:17px}
}
/* ── Classement des parrains (anonymisé par pseudo) ─────────────────────────*/
.lb-wrap{margin:0 auto}
.lb-title{font-family:var(--display);font-weight:700;font-size:20px;color:var(--nuit);text-align:center}
.lb-sub{text-align:center;color:var(--gris2);font-size:13.5px;margin:6px 0 16px}
.lb{max-width:460px;margin:0 auto;border:1px solid var(--bord);border-radius:14px;overflow:hidden;background:#fff}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--bord);font-size:14.5px}
.lb-row:last-child{border-bottom:0}
.lb-row.me{background:rgba(255,107,74,.07)}
.lb-rank{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--brume);color:var(--gris);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;font-family:var(--display)}
.lb-row:nth-child(1) .lb-rank{background:#FEF3C7;color:#B45309}
.lb-row:nth-child(2) .lb-rank{background:#EEF2F6;color:#5B6472}
.lb-row:nth-child(3) .lb-rank{background:#FDE9DE;color:var(--corail-txt)}
.lb-handle{flex:1;color:var(--encre);font-weight:500}
.lb-handle em{color:var(--corail-txt);font-style:normal;font-weight:600;font-size:13px}
.lb-count{color:var(--nuit);font-weight:700;font-family:var(--display);white-space:nowrap}
.lb-u{color:var(--gris2);font-weight:400;font-size:13px}
.share-msg{margin-top:16px}
.share-msg-box{width:100%;border:1.5px solid var(--bord);border-radius:var(--radius-sm);padding:11px 13px;font-family:inherit;font-size:16px;color:var(--gris);background:var(--brume);resize:vertical;line-height:1.5}

/* ── Calculateur « Combien avez-vous surpayé ? » ────────────────────────────*/
.calc-hero{background:radial-gradient(900px 380px at 80% -10%,rgba(255,107,74,.14),transparent 60%),linear-gradient(#fff,#fff);padding:52px 0 8px}
.calc-hero .eyebrow{margin-bottom:16px}
.calc-wrap{padding:20px 0 66px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gris);margin:12px 0 4px}
.calc-check input{width:16px;height:16px}
.calc-form .btn-primary{width:100%;padding:14px;font-size:16px;margin-top:12px}
.calc-result{margin-top:22px}
.calc-card{border-radius:var(--radius);padding:28px 24px;text-align:center;border:1px solid var(--bord);background:#fff;box-shadow:var(--ombre-2)}
.calc-card.overpaid{background:linear-gradient(180deg,#FFF4F0,#fff);border-color:#FFD9CC}
.calc-card.good,.calc-card.fair{background:linear-gradient(180deg,var(--vert-bg),#fff);border-color:#CDEBDD}
.calc-emoji{font-size:40px;line-height:1}
.calc-lbl{font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--gris2);font-weight:700;margin-top:8px}
.calc-big{font-family:var(--display);font-size:48px;font-weight:700;color:var(--corail-txt);line-height:1.05;margin:2px 0 8px}
.calc-card.good .calc-big,.calc-card.fair .calc-big{color:var(--vert)}
.calc-card p{color:var(--gris);font-size:16px;max-width:46ch;margin:0 auto 14px}
.calc-share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.calc-share .btn{font-size:14px;padding:10px 16px}
.calc-cta{margin-top:20px;background:var(--ciel);border:1px solid var(--bord);border-radius:var(--radius);padding:24px}
.calc-cta h3{font-size:19px;color:var(--nuit);margin-bottom:6px}
.calc-cta p{color:var(--gris);font-size:14.5px;margin-bottom:14px}
.calc-veille-row{display:flex;gap:10px;flex-wrap:wrap}
.calc-veille-row input[type=email]{flex:1;min-width:200px;border:1.5px solid var(--bord);border-radius:var(--radius-sm);padding:13px 14px;font-size:16px;font-family:inherit;background:#fff;color:var(--encre)}
.calc-veille-row input[type=email]:focus{outline:none;border-color:var(--bleu);box-shadow:var(--anneau)}
.calc-foot{text-align:center;color:var(--gris2);font-size:13px;margin-top:22px}
@media(max-width:560px){.calc-grid{grid-template-columns:1fr}.calc-big{font-size:40px}}

/* ── FAQ (accordéon natif <details>, SEO FAQPage) ───────────────────────────*/
.faq-list{max-width:720px;margin:44px auto 0}
.faq-item{border:1px solid var(--bord);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq-item summary{cursor:pointer;padding:18px 22px;font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--nuit);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:24px;line-height:1;color:var(--corail);font-weight:400;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 18px;color:var(--gris);font-size:15.5px;line-height:1.65}

/* ── CTA flottant vers le calculateur (toutes pages, masquable) ─────────────*/
.cx-calc-cta{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;background:var(--nuit);border-radius:12px;box-shadow:var(--ombre-3);max-width:312px;overflow:hidden;animation:cxCalcIn .35s ease both}
.cx-calc-cta[hidden]{display:none}
@keyframes cxCalcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cx-calc-link{display:flex;align-items:center;gap:11px;padding:12px 6px 12px 15px;color:#fff;text-decoration:none;font-size:13.5px;line-height:1.35}
.cx-calc-link b{color:#fff;font-weight:600}
.cx-calc-txt{color:var(--sur-nuit)}
.cx-calc-icon{font-size:20px;flex-shrink:0}
.cx-calc-x{align-self:stretch;background:transparent;border:0;color:var(--sur-nuit-3);font-size:19px;line-height:1;padding:0 13px;cursor:pointer;flex-shrink:0}
.cx-calc-x:hover{color:#fff}
@media(max-width:560px){.cx-calc-cta{right:10px;left:10px;bottom:10px;max-width:none}}

/* ── Partage d'un deal ──────────────────────────────────────────────────────*/
.share-deal{cursor:pointer;font-family:inherit}
.mini-main{display:block;text-decoration:none}
.mini-share{display:flex;align-items:center;justify-content:center;min-height:44px;gap:6px;width:100%;margin-top:12px;padding:9px 10px;border:0;border-radius:10px;background:var(--ciel);color:var(--bleu);font-size:13px;font-weight:600;letter-spacing:.1px;cursor:pointer;transition:.15s}
.mini-share:hover{background:var(--bleu);color:#fff}
.mini-share:active{transform:translateY(1px)}
/* Bouton partage du héros : discret à côté des deux actions de la carte */
.card .foot .share-deal{flex-shrink:0;padding:11px 14px}
/* Menu de partage maison (repli quand la feuille native n'existe pas) */
.cx-share-back{position:fixed;inset:0;z-index:80;background:rgba(15,33,68,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:cxFadeIn .15s ease}
@keyframes cxFadeIn{from{opacity:0}to{opacity:1}}
.cx-share-panel{background:#fff;border-radius:16px;padding:22px 22px 16px;max-width:340px;width:100%;box-shadow:var(--ombre-4)}
.cx-share-title{font-family:var(--display);font-weight:700;font-size:17px;color:var(--nuit);text-align:center;margin-bottom:16px}
.cx-share-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.cx-share-opt{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;box-sizing:border-box;text-align:center;padding:12px 10px;border-radius:11px;background:var(--brume);color:var(--nuit);text-decoration:none;font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;border:1px solid var(--bord);cursor:pointer;appearance:none;-webkit-appearance:none;transition:.15s}
.cx-share-opt:hover{background:var(--ciel);border-color:var(--bleu);color:var(--bleu)}
.cx-share-copy{display:block;width:100%;box-sizing:border-box;padding:12px;border-radius:11px;border:0;background:var(--bleu);color:#fff;font-family:inherit;font-weight:700;font-size:14px;text-align:center;text-decoration:none;cursor:pointer}
.cx-share-copy:hover{background:var(--bleu-h);color:#fff}
.cx-share-instr{font-size:13.5px;color:var(--gris2);text-align:center;line-height:1.5;margin:0 0 14px}
.cx-share-close{width:100%;padding:9px;border:0;background:transparent;color:var(--gris2);font-family:inherit;font-size:13.5px;cursor:pointer;margin-top:4px}
.cx-share-close:hover{color:var(--nuit)}

/* prefers-reduced-motion : desormais dans lib/tokens.php, pour tout le produit. */

/* ── Accueil, refonte du 22/09/2026 (portée : main.home uniquement) ──────────
   Contre le « gabarit IA » : titres et paragraphes alignés à gauche, une
   colonne de lecture de 62 caractères environ, pas de sur-titre en capitales,
   pas de cartes numérotées. Les pages SEO gardent l'ancien style (h2 centré). */
.home h2{text-align:left;font-size:30px;letter-spacing:-.4px;margin-bottom:14px}
.home section.block p{color:var(--encre);font-size:17px;line-height:1.6;max-width:62ch;margin-bottom:14px}
.home .h-narrow{max-width:760px}
.home .h-lead{color:var(--gris);font-size:17px;max-width:62ch;margin-bottom:0}
.home .h-small{font-size:14px !important;color:var(--gris) !important;margin-top:18px}
.home .h-split{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
.home .h-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px !important;color:var(--gris) !important}
.home .h-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.home .h-row h2{margin-bottom:0}
.home .h-basin{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gris)}
.home .h-basin select{padding:8px 12px;border:1.5px solid var(--bord);border-radius:8px;color:var(--encre);background:#fff}
.home .mini-grid{margin-top:26px}
.home .mini-when{font-size:13px;color:var(--gris2);margin:0 0 4px}
.home .mini-empty{display:flex;flex-direction:column;justify-content:center;background:transparent;border-style:dashed}
.home .card .foot .btn{width:100%}
.home .card-cap{text-align:left}
.home .cfg-note a{font-weight:600}
.home .lbl-hint{font-weight:400;color:var(--gris2)}
.home .tier-cta{margin-top:auto}
.home .founder p{font-size:18px}
.home .vigie-form{max-width:560px;margin-top:22px}
/* Maquette d'alerte : un email, pas une carte marketing. Neutre et plat. */
.mail-mock{margin:0;border:1px solid var(--bord);border-radius:12px;background:#fff;overflow:hidden;font-size:14px}
.mail-head{padding:12px 16px;border-bottom:1px solid var(--bord);background:var(--brume);display:flex;flex-direction:column;gap:2px}
.mail-from{font-weight:600;color:var(--nuit)}
.mail-subj{color:var(--gris)}
.mail-body{padding:18px 16px}
.mail-price{font-weight:700;font-size:30px;color:var(--encre);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.mail-meta{color:var(--gris);margin-top:2px}
.mail-btn{display:inline-block;margin-top:14px;background:var(--bleu);color:#fff;font-weight:600;padding:9px 16px;border-radius:8px}
.mail-mock figcaption{padding:10px 16px;font-size:13px;color:var(--gris2);border-top:1px solid var(--bord)}
@media(max-width:860px){
  .home .h-split{grid-template-columns:1fr;gap:28px}
  .home h2{font-size:25px}
  .home section.block p{font-size:16px}
}

/* ── Accueil v2, enrichissement visuel (22/09/2026, suite) ──────────────────── */
/* Bande de chiffres mesurés, sur Nuit : la donnée comme héroïne (charte). */
.h-stats{background:var(--nuit);color:#fff}
.h-stats-in{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:26px;padding-bottom:26px}
.h-stats b{display:block;font-family:var(--font);font-weight:700;font-size:30px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:#fff}
.h-stats span{font-size:14px;color:#C9D3E6}
/* Liste de faits : libellé en gras, puis le fait. Pas d'icônes-emojis. */
.home .h-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.home .h-checks li{font-size:16px;color:var(--encre);padding-left:18px;position:relative}
.home .h-checks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--bleu)}
.home .h-checks b{display:inline-block;min-width:64px;color:var(--nuit)}
/* Téléphone : cadre Nuit, fond = photo de la destination, notification + email. */
.phone{margin:0 auto;width:300px;max-width:100%}
.phone-screen{position:relative;border:10px solid var(--nuit);border-radius:38px;height:560px;background:var(--nuit) center/cover no-repeat;padding:52px 12px 16px;box-shadow:0 30px 60px -20px rgba(15,33,68,.45);overflow:hidden}
.phone-screen::before{content:"";position:absolute;top:8px;left:50%;width:90px;height:22px;margin-left:-45px;background:var(--nuit);border-radius:14px}
.phone-time{position:absolute;top:58px;left:0;right:0;text-align:center;color:#fff;font-family:var(--display);font-weight:600;font-size:46px;letter-spacing:-1px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.notif{position:relative;margin-top:92px;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-radius:16px;padding:10px 12px;font-size:13px;color:var(--encre)}
.notif-app{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gris);margin-bottom:3px}
.notif-app img{border-radius:5px}
.notif-app span{margin-left:auto}
.notif-title{font-weight:600}
.notif-body{color:var(--gris)}
.phone .mail-mock{margin-top:10px;font-size:13px}
.phone .mail-price{font-size:26px}
.phone figcaption{text-align:center;font-size:13px;color:var(--gris2);margin-top:12px}
/* Bande de la courbe : la carte d'alerte signature (§4.6b), sur Brume. */
.h-curve-band{background:var(--brume);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.home .h-split-rev{grid-template-columns:400px 1fr}
.curve-card{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:20px;box-shadow:var(--ombre-2,0 10px 30px -12px rgba(15,33,68,.18))}
.curve-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.curve-route{font-family:var(--display);font-weight:600;color:var(--nuit);font-size:17px}
.curve-days{font-size:13px;color:var(--gris2)}
.curve-price{font-weight:700;font-size:32px;letter-spacing:-.6px;color:var(--encre);font-variant-numeric:tabular-nums;margin:6px 0 4px}
.curve-price span{font-size:14px;font-weight:500;color:var(--gris2);margin-left:8px;letter-spacing:0}
.curve-scale{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--gris2);margin:10px 0 16px}
.curve-scale b{color:var(--encre);font-variant-numeric:tabular-nums}
.curve-card .btn{width:100%}
/* Illustration routes (2 couleurs, arcs pointillés). */
.routes-art{width:100%;max-width:420px;height:auto;justify-self:center}
/* Bloc fondateur sur Nuit : le seul fond plein sombre de la page, pour la voix. */
.founder-band{background:var(--nuit)}
.home .founder-band h2{color:#fff}
.home section.founder-band p{color:#DCE3F0}
.home .founder-band a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.home section.founder-band .founder-sign{color:var(--corail);font-weight:600;font-size:15px !important;margin-top:22px}
@media(max-width:860px){
  .home .h-split-rev{grid-template-columns:1fr}
  .home .h-split-rev>div:last-child{order:-1}
  .h-stats b{font-size:24px}
  .h-stats span{font-size:13px}
  .phone-screen{height:500px}
}
@media(max-width:560px){
  .h-stats-in{gap:10px}
  .h-stats b{font-size:20px}
}

/* Hero = formulaire de recherche (23/09/2026) : deux dates + bouton sur la 2e ligne. */
.cfg-f.is-date{flex:1 1 140px}
.cfg-f.is-date input{padding:10px 10px}
@media(max-width:560px){.cfg-f.is-date{flex:1 1 45%}}

/* Section partage : parrainage + programme créateurs (23/09/2026). */
.share-band{background:#fff}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.share-card{border:1px solid var(--bord);border-radius:16px;padding:24px;background:var(--brume);display:flex;flex-direction:column;gap:10px}
.share-card h3{font-size:19px;color:var(--nuit);margin:0}
.home section.block .share-card p{font-size:15.5px;margin:0}
.home section.block .share-card .share-big{font-family:var(--display);font-weight:700;font-size:30px;color:var(--nuit);letter-spacing:-.5px}
.share-big span{font-size:15px;font-weight:500;color:var(--gris);letter-spacing:0;margin-left:6px}
.share-card ul{margin:0;padding-left:18px;color:var(--encre);font-size:15.5px;line-height:1.6}
.share-card .btn{align-self:flex-start;margin-top:auto}
.share-card.is-dark{background:var(--nuit);border-color:var(--nuit)}
.share-card.is-dark h3,.home section.block .share-card.is-dark .share-big{color:#fff}
.share-card.is-dark ul{color:#DCE3F0}
.home section.block .share-card .share-note{font-size:13px;color:#C9D3E6}
@media(max-width:860px){.share-grid{grid-template-columns:1fr}}
.home section.block .share-card .share-big{line-height:1.15}
@media(max-width:560px){.share-big span{display:block;margin:4px 0 0}}

/* Illustrations voyage maison (23/09/2026, lib/illus.php) : trait Nuit + une touche Corail.
   Sur fond Nuit, le trait passe en blanc cassé (le corail reste). */
.cx-illus{display:block;flex:none}
.cx-illus.on-dark{stroke:#DCE3F0}
.cx-illus.on-dark [stroke="#0F2144"]{stroke:#DCE3F0}
.h-stats-in>div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.h-stats-in>div .cx-illus{grid-row:span 2}
#vigie .cx-illus{margin-bottom:8px}

/* Frise de pied de page (23/09/2026) : routes pointillées entre les dessins maison. */
.cx-frise{display:flex;align-items:center;gap:6px;margin:18px 0 0;max-width:340px}
.cx-frise-lien{flex:1;height:12px;min-width:14px}

/* Parrainage de l'accueil (23/09/2026) : un seul message, trois étapes illustrées. */
.parr{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;background:var(--brume);border:1px solid var(--bord);border-radius:16px;padding:32px}
.home section.block .parr h2{text-align:left;margin:0 0 10px}
.home section.block .parr-lead{font-size:16.5px;color:var(--gris);margin:0 0 18px;line-height:1.6}
.parr-lead b{color:var(--nuit)}
.parr-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.parr-etapes li{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;background:#fff;border:1px solid var(--bord);border-radius:12px;padding:14px 16px}
.parr-etapes li .cx-illus{grid-row:span 2}
.parr-etapes b{color:var(--nuit);font-size:15.5px}
.parr-etapes span{color:var(--gris);font-size:14px}
.home section.block .parr-createurs{margin:16px 0 0;font-size:14px;color:var(--gris2);text-align:center}
@media(max-width:860px){.parr{grid-template-columns:1fr;padding:22px}}
/* Page /createurs (23/09/2026) */
.createurs .cr-hero .wrap{max-width:860px}
.createurs .cr-hero .cx-illus{margin-bottom:14px}
.cr-eyebrow{color:var(--corail-txt);font-weight:700;font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin:0 0 8px}
.home section.block.cr-hero h1{font-family:var(--display);font-size:40px;line-height:1.1;color:var(--nuit);margin:0 0 14px;text-align:left}
.home section.block .cr-lead{font-size:17px;color:var(--gris);line-height:1.6;margin:0 0 22px;max-width:62ch}
.cr-ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.cr-lien{font-size:14.5px;font-weight:600}
.createurs section.block h2{text-align:left}
.createurs .wrap{max-width:860px}
.cr-etapes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-table-wrap{border:1px solid var(--bord);border-radius:12px;overflow:hidden;background:#fff}
.cr-table{width:100%;border-collapse:collapse;font-size:15.5px}
.cr-table th,.cr-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--bord)}
.cr-table tr:last-child td{border-bottom:0}
.cr-table thead th{background:var(--brume);font-size:13.5px;color:var(--gris);font-weight:600}
.cr-table td:last-child,.cr-table th:last-child{text-align:right;white-space:nowrap}
.cr-table td b{color:var(--nuit);font-size:17px;font-variant-numeric:tabular-nums}
.home section.block .cr-note{font-size:14px;color:var(--gris2);margin:12px 0 0}
.cr-plus{display:flex;gap:14px;align-items:center;margin-top:20px;background:var(--ciel);border-radius:12px;padding:16px 18px}
.home section.block .cr-plus p{margin:0;font-size:15.5px;color:var(--encre)}
.cr-cond ul{padding-left:20px;margin:0 0 6px;color:var(--encre);font-size:15.5px;line-height:1.65}
.cr-cond li{margin-bottom:8px}
.cr-cond .btn{margin-top:18px}
@media(max-width:700px){.cr-etapes{grid-template-columns:1fr}.home section.block.cr-hero h1{font-size:30px}}
.home section.block p.parr-createurs{max-width:none;margin:16px auto 0;text-align:center}