/* ============================================================
   LA PAGE D'ABONNEMENT — sa propre feuille, 25/08/2026.

   POURQUOI PAS `legal.css`. La première version empruntait la feuille
   des pages légales : sections numérotées, paragraphes denses, gris
   d'archive. Le propriétaire a demandé « plus envie », et il avait
   raison — cette page ne se lit pas comme des CGU, elle doit donner
   envie d'entrer. Une feuille faite pour des conditions générales ne
   vendra jamais rien.

   CE QU'ELLE GARDE DE LA MAISON : Poppins, hébergée par nous
   (`css/fonts.css` — « RGPD : aucune requête vers Google »), et le
   violet de la marque. AUCUNE POLICE EXTERNE N'EST APPELÉE ICI, et ce
   n'est pas un détail de performance : c'est la page qui promet qu'on
   ne revend rien, sur un site libertin. Un appel à fonts.googleapis.com
   livrerait l'adresse IP de chaque visiteur à un tiers, sur cette
   page-là. Le caractère vient donc de l'échelle, du contraste et de la
   couleur, jamais d'un fichier téléchargé ailleurs.

   DEUX FAMILLES, DEUX RÔLES. Georgia — présente partout, chaude,
   dessinée pour les grandes tailles — porte les titres ; Poppins porte
   tout le reste. Un serif chaud contre une géométrique froide : c'est
   ce contraste qui fait la page, et il ne coûte pas un octet.

   UN SEUL ACCENT CHAUD, ET IL NE SERT QU'UNE FOIS. Le miel (#f0b429)
   est réservé au bloc des fondateurs — la ruche, ceux qui étaient là
   avant. Partout ailleurs c'est le violet. Deux accents qui se
   disputent la page n'en soulignent aucun ; celui-ci ne souligne
   qu'une chose, et c'est la plus importante.

   LES TROIS ÉTATS DE THÈME, comme le reste du site : le système par
   défaut, puis les classes `hv-sombre` / `hv-clair` posées sur <html>
   par le script en tête de page, qui l'emportent. L'ordre compte —
   un choix mémorisé doit battre le réglage de l'appareil.
   ============================================================ */

/* ---------- Jetons ---------- */
:root{
  --violet:#a855f7; --violet-deep:#7c3aed; --violet-clair:#c084fc;
  --miel:#b7791f; --miel-fond:rgba(240,180,41,.10); --miel-bord:rgba(183,121,31,.35);
  --bg:#f4f2f8; --surface:#ffffff; --surface-2:#faf8fd;
  --text:#1a1626; --muted:#5b5470; --border:rgba(124,58,237,.16);
  --ombre:0 24px 60px rgba(124,58,237,.13);
}
@media(prefers-color-scheme:dark){
  :root{
    --miel:#f0b429; --miel-fond:rgba(240,180,41,.09); --miel-bord:rgba(240,180,41,.32);
    --bg:#0a0712; --surface:#150e24; --surface-2:#1d1430;
    --text:#f2eefa; --muted:#a79fbd; --border:rgba(168,85,247,.2);
    --ombre:0 24px 60px rgba(0,0,0,.5);
  }
}
html.hv-sombre{
  --miel:#f0b429; --miel-fond:rgba(240,180,41,.09); --miel-bord:rgba(240,180,41,.32);
  --bg:#0a0712; --surface:#150e24; --surface-2:#1d1430;
  --text:#f2eefa; --muted:#a79fbd; --border:rgba(168,85,247,.2);
  --ombre:0 24px 60px rgba(0,0,0,.5);
}
html.hv-clair{
  --miel:#b7791f; --miel-fond:rgba(240,180,41,.10); --miel-bord:rgba(183,121,31,.35);
  --bg:#f4f2f8; --surface:#ffffff; --surface-2:#faf8fd;
  --text:#1a1626; --muted:#5b5470; --border:rgba(124,58,237,.16);
  --ombre:0 24px 60px rgba(124,58,237,.13);
}

/* ---------- Socle ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--violet-deep);text-decoration:none;}
html.hv-sombre a,:root:not(.hv-clair) a{color:var(--violet-clair);}
@media(prefers-color-scheme:light){:root:not(.hv-sombre) a{color:var(--violet-deep);}}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px;}

/* Le serif des titres. Georgia d'abord — la plus répandue et la plus
   chaude ; les deux suivantes couvrent macOS et Windows anciens. */
.dis{font-family:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  font-weight:400;letter-spacing:-.015em;text-wrap:balance;}

/* ---------- En-tête ---------- */
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:14px 22px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);}
.brand{font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--text);}
.brand span{background:linear-gradient(120deg,#c084fc,#7c3aed);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.back{font-size:13.5px;font-weight:500;}

/* ---------- Ossature ---------- */
/* LE TEXTE EST CENTRÉ — 08/09/2026, demandé une fois la page raccourcie.
   Les deux vont ensemble : une page courte se lit bien au centre, une
   longue non.

   LES PARAGRAPHES GARDENT UNE LARGEUR DE LECTURE, et ce n’est pas un
   détail : centré ET étalé sur toute la largeur, l’œil ne retrouve plus
   le début de la ligne suivante. Centrer un bloc n’est pas l’élargir.

   LE RUBAN SUIT, sans quoi « Le plus choisi » resterait accroché au bord
   gauche d’une carte dont tout le reste est au milieu. */
main{max-width:760px;margin:0 auto;padding:0 22px 90px;}
main{text-align:center;}
.lead,.fine{margin-left:auto;margin-right:auto;max-width:58ch;}
.sub-code label{text-align:center;}
.formule{align-items:center;}
.formule .prix{justify-content:center;}
.ruban{left:50%;transform:translateX(-50%);}
section{margin-top:64px;}
.eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet);margin-bottom:14px;}
h2.dis{font-size:clamp(23px,4.2vw,30px);line-height:1.2;margin-bottom:16px;}
p{margin-bottom:14px;}
p:last-child{margin-bottom:0;}
.lead{font-size:16.5px;line-height:1.7;color:var(--muted);}
.fine{font-size:12.5px;line-height:1.6;color:var(--muted);}

/* ---------- La bannière d'ouverture ---------- */
/* PEU DE MARGE EN HAUT : le mot-symbole en porte déjà une, dedans.
   L'image réserve un quart de sa hauteur au-dessus des lettres — à 716 px
   de large, cela fait 92 px. Les 70 px du hero s'y ajoutaient, et le logo
   flottait à 220 px sous le bandeau. */
.hero{position:relative;padding:14px 0 4px;}
.hero>*{position:relative;z-index:1;}
h1.dis{font-size:clamp(34px,7.4vw,54px);line-height:1.08;margin-bottom:18px;}
h1.dis em{font-style:italic;color:var(--violet);}
.hero .lead{max-width:34em;}
/* La promesse aux fondateurs, en premier (31/10/2026). */
.hero .lead.fondateurs{margin-top:14px;padding:10px 14px;border-radius:12px;
  border:1px solid rgba(168,85,247,.35);background:rgba(168,85,247,.08);font-size:15px;color:var(--text);}

/* ---------- Le bloc des fondateurs — le seul en miel ---------- */
.ruche{margin-top:40px;padding:26px 24px;border-radius:20px;
  background:var(--miel-fond);border:1px solid var(--miel-bord);}
.ruche h3{font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  font-weight:400;font-size:21px;line-height:1.25;margin-bottom:10px;color:var(--miel);
  display:flex;align-items:baseline;gap:9px;}
.ruche h3 .abeille{font-size:19px;line-height:1;}
.ruche p{font-size:14.5px;line-height:1.68;}
.ruche strong{color:var(--text);}

/* ---------- Ce qu'on trouve ici ---------- */
.atouts{display:grid;gap:2px;background:var(--border);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;}
@media(min-width:620px){.atouts{grid-template-columns:1fr 1fr;}}
.atout{background:var(--surface);padding:20px 22px;}
.atout h4{font-size:14.5px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em;}
.atout p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;}

/* ---------- Les formules ---------- */
.formules{display:grid;gap:14px;margin-top:6px;}
/* DEUX FORMULES depuis le 31/10/2026 (40 € par an, 4 € par mois) : deux
   colonnes, et pas plus larges qu'il ne faut. */
@media(min-width:700px){.formules{grid-template-columns:repeat(2,1fr);align-items:stretch;max-width:680px;margin-left:auto;margin-right:auto;}}
.formule{position:relative;display:flex;flex-direction:column;gap:6px;
  padding:24px 22px;border-radius:20px;background:var(--surface);
  border:1px solid var(--border);}
/* L'ANNUELLE EST MISE EN AVANT PAR LE VIOLET, jamais par le miel : le
   miel appartient aux fondateurs et n'a rien à voir avec un tarif. */
.formule.phare{border-color:var(--violet);box-shadow:var(--ombre);}
.formule .nom{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);}
/* LE CHIFFRE EN GEORGIA, L'EURO EN POPPINS — et ce n'est pas un caprice.
   L'euro de Georgia est dessiné très haut et très large : « 5 € » sortait
   avec un symbole qui écrasait le chiffre, en donnant l'impression d'une
   coquille. En Poppins, à mi-hauteur, il redevient ce qu'il doit être —
   une unité posée à côté d'un nombre. */
.formule .prix{display:flex;align-items:baseline;gap:5px;
  font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  font-size:44px;line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.formule .eur{font-family:'Poppins',sans-serif;font-size:21px;font-weight:500;
  letter-spacing:0;line-height:1;}
.formule .par{font-family:'Poppins',sans-serif;font-size:13px;font-weight:500;
  letter-spacing:0;color:var(--muted);}
.formule .permois{font-size:13px;color:var(--muted);margin:0;}
/* `auto` et non une valeur fixe : les trois cartes sont étirées à la même
   hauteur, et la carte en avant porte un ruban de plus. Sans cela ses
   boutons décrochaient d'une ligne. */
/* Le bouton « Bientôt disponible » est CACHÉ depuis l'ouverture : `hidden`
   seul ne suffirait pas face au `margin-top:auto` qui suit. */
.formule .sub-btn[hidden]{display:none;}
.formule .sub-btn{margin-top:auto;width:100%;padding:11px;border-radius:999px;
  font-family:inherit;font-size:13px;font-weight:600;
  background:transparent;color:var(--muted);border:1px dashed var(--border);
  cursor:default;}
/* LE LIEN PAYPAL, une fois la page ouverte. Il vient SOUS le bouton et
   prend sa place : `margin-top:auto` sur le bouton pousse déjà le bas
   de carte, celui-ci se contente de suivre. */
/* `a.sub-paypal` ET NON `.sub-paypal` : la classe seule PERDAIT.

   Deux règles de thème, plus haut dans ce fichier, posent la couleur
   des liens : `:root:not(.hv-clair) a` et `:root:not(.hv-sombre) a`.
   Leur spécificité est (0,2,1) ; `.formule .sub-paypal` n'est qu'à
   (0,2,0). Le fond bleu passait, la couleur du texte non : le libellé
   sortait en VIOLET sur le bleu, presque illisible. Vu à la capture,
   pas au test — un test qui lit du CSS ne calcule pas la cascade.

   `a.sub-paypal` remonte à (0,2,1) et, à égalité, c'est l'ordre du
   fichier qui tranche : cette règle est plus bas, elle gagne. Ne pas
   la « simplifier » en retirant le `a`. */
.formule a.sub-paypal{display:block;width:100%;margin-top:8px;padding:11px;
  border-radius:999px;box-sizing:border-box;text-align:center;
  font-size:13px;font-weight:600;text-decoration:none;
  background:#0070ba;color:#fff;border:1px solid #0070ba;}
.formule a.sub-paypal:hover{background:#005c99;border-color:#005c99;
  color:#fff;text-decoration:none;}
/* ET LA RÈGLE QUI MANQUE TOUJOURS. `hidden` est battu par n'importe
   quelle règle d'auteur qui pose `display` — ici `display:block` juste
   au-dessus. Sans cette ligne, les trois liens seraient VISIBLES et
   cliquables sur une page qu'on croit fermée. Le défaut a été livré
   cinq fois sur ce site ; il ne le sera pas une sixième. */
.formule .sub-paypal[hidden]{display:none;}

/* LE BOUTON WERO. `a.sub-wero` pour la même raison que PayPal : les
   règles de thème visent `:root:not(.hv-clair) a` à (0,2,1), et la
   classe seule perdrait la couleur du libellé.

   LE FUCHSIA EST CELUI DE WERO, ASSOMBRI. Le rose de la marque
   (#e6007e) ne donne que 4,2:1 avec du blanc — sous le seuil. À
   #c4006b on passe à 5,6:1, et personne ne voit la différence sauf
   celui qui lit mal. */
.formule a.sub-wero{display:block;width:100%;margin-top:8px;padding:11px;
  border-radius:999px;box-sizing:border-box;text-align:center;
  font-size:13px;font-weight:600;text-decoration:none;
  background:#c4006b;color:#fff;border:1px solid #c4006b;}
.formule a.sub-wero:hover{background:#a3005a;border-color:#a3005a;
  color:#fff;text-decoration:none;}
.formule .sub-wero[hidden]{display:none;}

/* LE BOUTON DU VIREMENT (26/10/2026, « 1B »). Un BOUTON et non un lien :
   les coordonnées viennent du serveur au clic. En contour violet, aux
   couleurs du site, puisque ce n'est la marque de personne. Même hauteur
   et même arrondi que PayPal et Wero, pour que les trois se lisent comme
   trois choix de même rang. */
.formule .sub-virement{display:block;width:100%;margin-top:8px;padding:10px 11px;
  border-radius:999px;box-sizing:border-box;text-align:center;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;
  background:transparent;color:var(--text);border:1.5px solid var(--violet-deep);}
.formule .sub-virement:hover{background:var(--violet-deep);color:#fff;}
.formule .sub-virement[hidden]{display:none;}

/* « UN SEUL PAIEMENT PAR AN » (26/10/2026, « 4A ») : la raison de mettre
   l'annuelle en premier, dite sur la carte. */
.formule .un-paiement{font-size:13px;font-weight:600;color:var(--violet);margin:0;}

/* LE PANNEAU DU VIREMENT. Une ligne par valeur, chacune avec son bouton
   Copier ; l'IBAN en chasse fixe, parce qu'on le relit caractère par
   caractère quand l'application bancaire le refuse. */
.virement-panneau{max-width:560px;margin:22px auto;padding:18px 20px;
  border-radius:16px;border:1.5px solid var(--violet);background:var(--surface);
  display:grid;gap:12px;text-align:left;
  /* L'en-tête de la page est collant : sans cette marge, le défilement
     jusqu'au panneau en cachait le titre. */
  scroll-margin-top:80px;}
.virement-panneau[hidden]{display:none;}
.virement-titre{font-size:18px;margin:0;}
.virement-panneau .fine{margin:0;max-width:none;}
.virement-lignes{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center;}
.virement-lignes dt{font-size:12.5px;color:var(--muted);}
.virement-lignes dd{margin:0;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.virement-valeur{font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.virement-lignes dd:nth-of-type(2) .virement-valeur{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:.02em;}
.virement-copier,.virement-fermer{font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:5px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);}
.virement-copier:hover,.virement-fermer:hover{border-color:var(--violet);}
.virement-fermer{justify-self:start;}
#virementErreur[hidden]{display:none;}
@media (max-width:480px){
  .virement-lignes{grid-template-columns:1fr;gap:2px;}
  .virement-lignes dd{margin-bottom:8px;}
  /* L'IBAN tient sur une ligne : coupé en deux, on le recopie de travers. */
  .virement-lignes dd:nth-of-type(2) .virement-valeur{font-size:13.5px;letter-spacing:0;}
}

/* LA NOTE SUIT LES BOUTONS. Elle explique comment payer : l’afficher
   quand aucun moyen de paiement n’est visible ferait promettre une
   souscription qui n’existe pas encore. */
.sub-note[hidden]{display:none;}

/* « VOTRE ABONNEMENT PEUT DEVENIR GRATUIT » (26/10/2026). Une échelle de trois
   marches, en violet : c'est un tarif qu'on fait baisser, pas la promesse
   des fondateurs (le miel leur appartient). */
.parrainage-abo{max-width:640px;margin:34px auto 6px;padding:22px 22px 18px;border-radius:20px;
  border:1px solid var(--violet);background:var(--surface);display:grid;gap:12px;text-align:center;}
.parrainage-titre{font-size:clamp(20px,4.4vw,26px);margin:0;}
.parrainage-abo > p{margin:0;}
.parrainage-echelle{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.parrainage-echelle li{border-radius:14px;background:var(--surface-2);border:1px solid var(--border);
  padding:12px 6px;display:grid;gap:2px;}
.parrainage-echelle b{font-size:18px;color:var(--violet);font-variant-numeric:tabular-nums;}
.parrainage-echelle span{font-size:13px;color:var(--muted);}

/* LE CHAMP DE CODE. Discret : la plupart des gens n'en ont pas, et un
   grand encart leur ferait croire qu'ils ratent quelque chose. */
.sub-code{max-width:520px;margin:0 auto 22px;padding:14px 16px;
  border-radius:14px;border:1px solid var(--border);background:var(--surface-2);}
.sub-code label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.code-ligne{display:flex;gap:8px;}
.code-ligne input{flex:1;min-width:0;font-family:inherit;font-size:14px;
  padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);text-transform:uppercase;}
.code-btn{padding:9px 18px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:var(--logo-violet,#7c3aed);color:#fff;}
.code-btn:hover{filter:brightness(1.08);}
/* Le prix plein, barré, à côté du nouveau. On ne le cache pas : voir ce
   qu'on ne paie pas fait la valeur de la remise. */
.formule .prix-plein{font-family:'Poppins',sans-serif;font-size:15px;
  font-weight:500;color:var(--muted);text-decoration:line-through;
  margin-right:8px;letter-spacing:0;}
.formule .prix-plein[hidden]{display:none;}

/* LE BLOC « J'AI PAYÉ ». Il vient APRÈS les boutons de paiement : on ne
   déclare pas avant d'avoir payé, et l'ordre de l'écran doit être celui
   du geste. */
.sub-declare{margin-top:26px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--border);background:var(--surface-2);}
.sub-declare h3{margin:0 0 6px;font-size:17px;}
.sub-declare form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.sub-declare label{display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:var(--muted);}
.sub-declare input,.sub-declare select{font-family:inherit;font-size:14px;
  padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);}
/* IL NE PORTE PAS `sub-btn`, ET C'EST VOULU. Cette classe désigne les
   trois boutons de formule, que le test exige INERTES tant que la page
   est fermée — il les a trouvés actifs et m’a arrêté, à raison. Celui-ci
   est un vrai bouton : il lui faut son propre nom, sinon la garde perd
   son sens ou ce bouton perd son geste. */
.sub-declare .declare-btn{grid-column:1 / -1;justify-self:start;width:auto;
  padding:11px 22px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:var(--logo-violet,#7c3aed);color:#fff;}
.sub-declare .declare-btn:hover{filter:brightness(1.08);}
@media(max-width:640px){ .sub-declare form{grid-template-columns:1fr;} }

/* LE MOT À RECOPIER. Affiché en pleine lettre plutôt que décrit : « votre
   pseudonyme » demande de se souvenir de son orthographe exacte, et une
   majuscule oubliée suffit à rendre un virement introuvable. */
.ref-mot{display:inline-block;padding:2px 9px;border-radius:8px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.95em;background:var(--surface);border:1px solid var(--border);
  color:var(--text);}
.ref-copier{margin-left:6px;padding:2px 10px;border-radius:999px;
  font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  background:transparent;color:var(--logo-violet,#7c3aed);
  border:1px solid var(--border);}
.ref-copier:hover{border-color:var(--violet);}

/* ============================================================
   L'EFFET SUR LES CARTES — demandé le 02/09/2026.

   La carte survolée se soulève, sa bordure prend la couleur du site
   et son ombre s'installe. Rien de plus : trois formules qui bougent
   toutes seules feraient un manège, et l'on choisit mal en regardant
   un manège.

   `focus-within` AUTANT QUE `hover` : au clavier, la carte doit
   répondre comme à la souris. Sans cela, l'effet dit « ceci est
   sélectionnable » à la souris et ne le dit à personne d'autre.

   ET LA TRANSITION EST DÉCLARÉE SOUS `no-preference` : qui a demandé
   moins d'animation obtient l'état final sans le trajet. Le mouvement
   n'est pas l'information ; l'information, c'est la bordure et
   l'ombre, et elles restent. */
/* `translate` ET NON `transform`, ET C'EST TOUTE L'HISTOIRE.

   L'animation d'entrée `.monte` est en `forwards` : une fois terminée,
   elle continue d'appliquer le `transform:none` de sa dernière
   image-clé. Or une animation BAT une déclaration ordinaire dans la
   cascade — mon `transform:translateY(-6px)` au survol ne se voyait
   donc jamais. Mesuré, pas supposé : la bordure et l'ombre changeaient
   bien, et la carte ne bougeait pas d'un pixel.

   `translate` est une propriété à part entière, que les images-clés ne
   touchent pas : elle se compose avec `transform` au lieu de lutter
   contre lui. Ne pas la « remettre au propre » en transform. */
@media(prefers-reduced-motion:no-preference){
  .formule{transition:translate .28s cubic-bezier(.22,.8,.3,1),
    box-shadow .28s ease, border-color .28s ease;}
  .formule:hover,.formule:focus-within{translate:0 -6px;}
}
.formule:hover,.formule:focus-within{
  border-color:var(--violet);box-shadow:var(--ombre);}
/* La carte en avant est DÉJÀ violette et ombrée : au survol, elle
   monte d'un cran plutôt que de ne rien faire. */
.formule.phare:hover,.formule.phare:focus-within{
  border-color:var(--violet-clair);}
/* LE RUBAN, ET LES DEUX DÉFAUTS QU'IL A COÛTÉS.

   D'ABORD EN SURPLOMB (`absolute; top:-10px`) : il mordait sur la carte
   précédente dès que les trois se rangeaient en colonne, et le conteneur
   le rognait par le haut.

   PUIS DANS LE FLUX : plus de chevauchement, mais la carte en avant
   portait une ligne de plus que les deux autres — son prix descendait, et
   trois montants côte à côte ne s'alignaient plus. Un alignement raté sur
   une grille de tarifs se voit avant le tarif lui-même.

   LA PLACE EST DONC RÉSERVÉE DANS LES TROIS CARTES (le `padding-top` de
   `.formule`), et le ruban s'y pose. Celles qui n'en ont pas gardent un
   peu d'air en haut, ce qui ne coûte rien ; les trois prix, eux, sont
   sur la même ligne. */
.formule{padding-top:46px;}
.ruban{position:absolute;top:17px;left:22px;padding:3px 11px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(120deg,#a855f7,#7c3aed);}

/* ---------- Ce qui ne bouge pas ---------- */
.garde{border-left:2px solid var(--violet);padding:2px 0 2px 18px;margin-top:20px;}
.garde p{font-size:14px;line-height:1.68;color:var(--muted);}
.garde strong{color:var(--text);}

/* ---------- Chute ---------- */
.chute{margin-top:64px;padding:28px 24px;border-radius:20px;text-align:center;
  background:var(--surface-2);border:1px solid var(--border);}
.chute p{font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  font-size:19px;line-height:1.45;margin:0;text-wrap:balance;}

/* ---------- Pied ---------- */
footer{border-top:1px solid var(--border);padding:30px 22px 42px;}
.footer-links{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:10px 22px;justify-content:center;font-size:13px;}
.footer-links a{color:var(--muted);}
.footer-links a:hover{color:var(--violet);}

/* ---------- Entrée en scène ---------- */
@media(prefers-reduced-motion:no-preference){
  .monte{opacity:0;transform:translateY(14px);animation:monte .62s cubic-bezier(.22,.8,.3,1) forwards;}
  .monte:nth-of-type(2){animation-delay:.07s;}
  .monte:nth-of-type(3){animation-delay:.14s;}
  @keyframes monte{to{opacity:1;transform:none;}}
}


/* ============================================================
   LE LOGO DE L'ACCUEIL, REPRIS ICI — 02/09/2026.

   Le mot-symbole existe en deux fichiers, un par thème : il est blanc
   ou noir, il ne peut pas hériter d'une couleur de texte. On en affiche
   UN, et la bascule suit les TROIS états du thème comme les liens de ce
   fichier — choix clair, choix sombre, et le réglage « système » qui ne
   pose aucune classe. C'est ce troisième cas qu'on oublie, et c'est
   celui de la plupart des visiteurs.

   Cette page ne charge PAS `css/style.css` : les règles de l'accueil ne
   la suivent pas, il faut les écrire ici. C'est le prix d'une page
   autonome, et il est assumé — mais le BALISAGE, lui, est identique,
   pour que les deux ne divergent pas en silence.
   ============================================================ */
/* FLEX EN COLONNE, et ce n'est pas un choix de style : la phrase est
   remontée par une marge NÉGATIVE, et une marge négative n'agit pas sur
   un inline-block posé sur sa propre ligne — mesuré, 12 px de
   chevauchement au lieu des 44 de l'accueil. En enfant de flex, elle
   agit. C'est le contexte de l'accueil, reproduit ici. */
a.logo-groupe{display:flex;flex-direction:column;align-items:center;
  text-decoration:none;
  margin:0 auto 30px;}
a.logo-groupe:hover{text-decoration:none;}

/* LE MOT-SYMBOLE PREND TOUTE LA LARGEUR — demandé le 02/09/2026 :
   « agrandi, fais en sorte de prendre toute la place ».

   D'OÙ LES FICHIERS `-xl`. Les images servies sur l'accueil font 600 px
   de large : affichées à 300 px elles étaient à la bonne finesse pour un
   écran à double densité. Étirées sur les 716 px de la colonne, elles
   auraient été molles sur ces mêmes écrans. Les versions 1240 px sont
   tirées de la source originale ; celle du thème sombre a été recolorée
   à partir de l'unique source transparente, l'alpha — donc les bords —
   n'ayant pas été touché. */
.hero-logo{width:100%;height:auto;display:block;}

/* UN SEUL DES DEUX MOTS S'AFFICHE. Le mot est blanc ou noir dans le
   fichier : il ne peut pas hériter d'une couleur de texte, il faut donc
   deux images et n'en montrer qu'une.

   LA BASCULE SUIT LES TROIS ÉTATS DU THÈME, comme les liens de ce
   fichier : choix clair, choix sombre, et le réglage « système » qui ne
   pose aucune classe — c'est ce troisième cas qu'on oublie, et c'est
   celui de la plupart des visiteurs.

   CES QUATRE RÈGLES ONT DÉJÀ ÉTÉ PERDUES UNE FOIS, effacées en
   remplaçant le bloc voisin : les deux images se sont affichées l'une
   SOUS l'autre, et la phrase est partie 226 px plus bas. Ne pas les
   séparer de `.hero-logo`. */
.wm-sombre{display:none;}
html.hv-sombre .wm-clair,:root:not(.hv-clair) .wm-clair{display:none;}
html.hv-sombre .wm-sombre,:root:not(.hv-clair) .wm-sombre{display:block;}
@media(prefers-color-scheme:light){
  :root:not(.hv-sombre) .wm-clair{display:block;}
  :root:not(.hv-sombre) .wm-sombre{display:none;}
}

/* « ou Hive, pour les intimes » — repris de l'accueil.

   REMONTÉE SUR LE LOGO et inclinée de 4° : posée droite en dessous, ce
   serait une ligne de plus ; à cheval et de biais, cela se lit comme une
   note glissée à la main.

   TOUT EST EN POURCENTAGE, ET C'EST LE POINT. Les valeurs de l'accueil
   étaient en pixels et supposaient une marque de 300 px : à 716 px, la
   phrase serait restée minuscule dans un coin. Une marge en pourcentage
   se calcule sur la LARGEUR du bloc parent — donc sur la largeur du
   logo, puisqu'il la remplit. Les proportions relevées sur l'accueil
   (phrase à 5 % de la marque, décalage à 10 %, chevauchement à 14,7 %)
   tiennent alors à toutes les tailles, sans un seul point de rupture.

   L'italique est synthétique : le site n'embarque aucun fichier
   italique, le navigateur incline lui-même. Cinq mots, cela suffit. */
.hero-surnom{position:relative;display:inline-block;
  font-style:italic;font-size:min(40px,5.6vw);font-weight:400;
  color:var(--violet);opacity:.72;letter-spacing:.2px;
  margin:3.7% 0 0 10%;
  transform:rotate(-4deg);transform-origin:left center;
  pointer-events:none;user-select:none;}
/* Le trait de stylo. `text-decoration` ne sait faire que droit,
   pointillé ou ondulé — jamais un arc. */
.hero-surnom-trait{position:absolute;left:0;bottom:-.7em;width:100%;
  height:.85em;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
@media(prefers-reduced-motion:reduce){
  .hero-surnom{transform:none;}
}

/* ---------- L'accès immédiat (article L221-25) : une case distincte ---------- */
.sub-immediat{display:flex;align-items:flex-start;gap:10px;max-width:680px;margin:0 auto 14px;
  font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer;}
.sub-immediat input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--violet);}

/* ---------- Le tirage au sort (31/10/2026) : la forme du parrainage ---------- */
.tirage-abo{max-width:640px;margin:24px auto 6px;padding:22px 22px 18px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:10px;text-align:center;}
.tirage-abo > p{margin:0;}
.tirage-lot{font-weight:600;color:var(--text);}
.tirage-lot[hidden]{display:none;}