/* Valignac Academy — vitrine.css v4.
   Le gabarit d'apple.com/fr, appliqué à la lettre : un empilement de tuiles,
   une par produit — titre court et géant, une ligne, deux liens, l'image en
   vedette — pleine largeur d'abord, puis grille de demi-tuiles. Le mouvement
   se limite à des entrées douces ; les images font le spectacle.
   Se lie APRÈS tokens.css et composants.css, pages pleines seulement.
   Aucune valeur brute de couleur : tout vient des jetons. */

/* ══ ENTRÉES DOUCES ══════════════════════════════════════════════════════ */
.js .revele{opacity:0;transform:translateY(var(--e-6));
  transition:opacity var(--t-long) var(--c-entree),
             transform var(--t-long) var(--c-douce)}
.js .revele.visible{opacity:1;transform:none}
/* L'image d'une tuile se pose : léger tassement d'échelle à l'entrée. */
.js .tuile.revele .visuel img{transform:scale(1.04);
  transition:transform calc(var(--t-long)*2) var(--c-douce)}
.js .tuile.revele.visible .visuel img{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .revele{opacity:1;transform:none;transition:none}
  .js .tuile.revele .visuel img{transform:none;transition:none}
}
html.mouvement-eteint .revele{opacity:1;transform:none;transition:none}
html.mouvement-eteint .tuile.revele .visuel img{transform:none;transition:none}

/* ══ LA TUILE — la brique d'apple.com ════════════════════════════════════
   Texte centré en tête, image en vedette dessous, bord à bord. Les tuiles
   se suivent séparées d'un joint fin, comme la référence. */
.pile-tuiles{display:grid;gap:var(--e-3);padding:var(--e-3);
  background:var(--fond)}
.tuile{position:relative;min-height:88svh;display:flex;
  flex-direction:column;overflow:hidden;border-radius:var(--r-md);
  background:var(--fond-enfonce)}
.tuile-texte{text-align:center;padding:var(--e-16) var(--e-8) var(--e-8);
  position:relative;z-index:1}
.tuile h2{border:0;padding:0;margin:0;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,3.4rem);letter-spacing:-.015em}
.tuile .sous{margin:var(--e-3) auto 0;font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:var(--texte-doux);max-width:38ch}
.tuile .liens{display:flex;gap:var(--e-6);justify-content:center;
  align-items:center;margin-top:var(--e-6);flex-wrap:wrap}
.tuile .visuel{flex:1;min-height:0;display:block}
.tuile .visuel img{width:100%;height:100%;object-fit:cover;display:block}

/* Tuile sombre : la nuit dans les deux thèmes, texte papier. */
.tuile.nocturne{background:var(--nuit)}
.tuile.nocturne h2{color:var(--papier)}
.tuile.nocturne .sous{color:var(--encre-300)}

/* Le lien-flèche d'apple.com : bleu d'action, chevron, sans soulignement. */
.lien-fleche{color:var(--action);text-decoration:none;
  font-size:var(--t-md);font-weight:var(--g-moyen)}
.lien-fleche::after{content:" \203A";font-weight:var(--g-fort)}
.lien-fleche:hover{text-decoration:underline;color:var(--action)}
/* Sur la nuit, l'action claire — le bleu profond s'y noierait (1,6:1). */
.tuile.nocturne .lien-fleche{color:var(--bleu-300)}
.tuile.nocturne .lien-fleche:hover{color:var(--papier)}

/* ══ LA GRILLE DE DEMI-TUILES ════════════════════════════════════════════ */
.tuiles-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
.tuiles-2 .tuile{min-height:64svh}
.tuiles-2 .tuile h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.4rem)}
.tuiles-2 .tuile .tuile-texte{padding-top:var(--e-12)}
@media (max-width:900px){
  .tuiles-2{grid-template-columns:1fr}
  .tuile{min-height:72svh}
  .tuiles-2 .tuile{min-height:60svh}
}

/* ══ LA BANDE DES DURÉES — notre différence, en toute discrétion ═════════ */
.bande-durees{max-width:var(--gr-page-max);margin:var(--e-24) auto;
  padding:0 var(--e-8)}
.bande-durees h2{border:0;padding:0;text-align:center;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.4rem)}
.bande-durees .chapeau{text-align:center;margin-inline:auto}
.durees{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:var(--e-8);margin:var(--e-8) 0 var(--e-6)}
.duree{border-top:2px solid var(--structure);padding-top:var(--e-4);
  display:block;text-decoration:none;color:inherit;
  transition:border-color var(--t-court) var(--c-douce)}
.duree:hover{border-top-color:var(--provenance)}
.duree:focus-visible{outline:var(--focus-epaisseur) solid var(--structure);
  outline-offset:var(--focus-decalage)}
.duree .combien{display:block;font-family:var(--serif);
  font-size:clamp(1.875rem,1.4rem + 1.6vw,2.6rem);
  font-weight:var(--g-fort);line-height:1;letter-spacing:-.02em}
.duree .qui{display:block;margin-top:var(--e-2);color:var(--texte);
  font-size:var(--t-sm)}
.duree .ou{display:block;margin-top:var(--e-3);font-family:var(--mono);
  font-size:var(--t-2xs);color:var(--provenance-texte);
  line-height:var(--i-normal)}
.duree .quand{display:block;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--texte-doux);margin-top:var(--e-1)}

/* ══ LE COLOPHON — les chiffres, sobres et exacts ════════════════════════ */
.colophon{max-width:var(--gr-page-max);margin:var(--e-24) auto;
  padding:var(--e-12) var(--e-8);border-block:1px solid var(--trait)}
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:var(--e-8);margin:0 0 var(--e-6)}
.compteurs .compteur{display:block;text-align:center}
.compteurs .grand{display:block;font-family:var(--serif);
  font-size:var(--t-4xl);font-weight:var(--g-fort);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.compteurs .sur{display:block;color:var(--texte-doux);
  font-size:var(--t-sm);margin-top:var(--e-1)}
.colophon .legende{text-align:center;margin-inline:auto}

/* ══ FAQ — pliée, minimale ═══════════════════════════════════════════════ */
.faq-bloc{max-width:46rem;margin:var(--e-24) auto;padding:0 var(--e-8)}
.faq-bloc h2{border:0;padding:0;text-align:center;
  font-size:clamp(1.8rem,1.2rem + 2vw,2.4rem);margin-bottom:var(--e-8)}
.faq details{border-top:1px solid var(--trait);padding:var(--e-4) 0}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;font-weight:var(--g-moyen);list-style:none;
  position:relative;padding-right:var(--e-8)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:0;
  font-family:var(--mono);color:var(--action);
  transition:transform var(--t-court) var(--c-douce)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--texte-doux);font-size:var(--t-sm);
  line-height:var(--i-lecture);max-width:60ch}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ══ L'AVEU — court, avant le pied ═══════════════════════════════════════ */
.aveu-bloc{max-width:var(--gr-page-max);margin:var(--e-16) auto;
  padding:0 var(--e-8)}

/* ══ V5 — LA TUILE DE MARQUE ══════════════════════════════════════════════
   L'ouverture de l'accueil : qui nous sommes, sous le blason. */
.marque-tuile{min-height:72svh;justify-content:center;
  background:var(--fond-enfonce)}
.marque-tuile .lockup{margin:0 0 var(--e-6)}
.marque-tuile .lockup img{height:6rem;width:auto;margin-inline:auto}
.marque-tuile h1{border:0;padding:0;margin:0;
  font-size:clamp(2.6rem,1.6rem + 4vw,4.2rem);letter-spacing:-.015em}
.marque-tuile .sous{max-width:44ch}
.marque-tuile .devise{margin-top:var(--e-8);font-family:var(--sans);
  font-size:var(--t-2xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--provenance-texte);font-weight:var(--g-fort)}

/* ══ V5 — LE FRONTON DES PAGES INTÉRIEURES ═══════════════════════════════ */
.heros-page{min-height:52svh;border-radius:0;margin-bottom:var(--e-16)}
.heros-page h1{border:0;padding:0;margin:0;
  font-size:clamp(2rem,1.3rem + 2.8vw,3rem);letter-spacing:-.015em}

/* ══ V5 — LES BANDEAUX D'UNIVERS DU CATALOGUE ════════════════════════════
   Chaque famille ouvre sur sa photographie, barrée de son titre. */
.bandeau-univers{--teinte:var(--univers-transversal);
  position:relative;overflow:hidden;border-radius:var(--r-md);
  height:clamp(9rem,22vh,13rem);margin:var(--e-16) 0 var(--e-6);
  display:flex;align-items:flex-end}
.bandeau-univers.assurance{--teinte:var(--univers-assurance)}
.bandeau-univers.credit{--teinte:var(--univers-credit)}
.bandeau-univers.finance{--teinte:var(--univers-finance)}
.bandeau-univers.immobilier{--teinte:var(--univers-immobilier)}
.bandeau-univers img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.bandeau-univers h2{position:relative;z-index:1;border:0;margin:0;
  padding:var(--e-4) var(--e-6);color:var(--papier);
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);width:100%;
  background:linear-gradient(transparent,rgb(11 17 25 / .78))}

/* ══ V6 — LA GRILLE DES PACKS (tarifs + fiches) ══════════════════════════
   Un pack par obligation : liseré d'univers, prix en vedette, traits en
   liste fine. La carte intégrale passe en nuit — c'est la vitrine du tout. */
/* ══ LA RÉVISION ESPACÉE ═════════════════════════════════════════════════
   Mille cent cinquante-cinq cartes dormaient dans le corpus sans qu'aucune
   table ne les reçoive. Une carte se lit d'un coup d'œil : peu de texte,
   beaucoup d'air, et un verdict à portée de pouce. */
.revision{display:grid;gap:var(--e-4);margin:var(--e-8) 0;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.carte-rev{border:1px solid var(--trait);border-radius:var(--r-md);
  background:var(--fond-carte);padding:var(--e-6);display:flex;
  flex-direction:column;gap:var(--e-3);
  transition:border-color var(--t-court) var(--c-douce),
             opacity var(--t-moyen) var(--c-douce)}
.carte-rev.su{border-color:var(--succes);opacity:.55}
.carte-rev.a-revoir{border-color:var(--alerte);opacity:.55}
.carte-ou{margin:0;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--texte-doux);text-transform:uppercase;letter-spacing:.08em}
.carte-face p{margin:0}
.carte-face.recto p{font-family:var(--serif);font-size:var(--t-md);
  color:var(--texte)}
.carte-face.verso p{color:var(--texte-doux);font-size:var(--t-sm);
  line-height:var(--i-lecture);border-top:1px solid var(--trait);
  padding-top:var(--e-3)}
.carte-actions{margin:auto 0 0;display:flex;gap:var(--e-3);flex-wrap:wrap}
.carte-actions .verdicts{display:flex;gap:var(--e-3);flex-wrap:wrap}

/* ══ LES TROIS GRANULARITÉS ══════════════════════════════════════════════
   Une formation seule, un degré, un pack. Les deux premiers prix vivaient
   dans la grille sans être affichés nulle part : un client qui ne voulait
   qu'une matière repartait devant un pack entier. */
.granularites{display:grid;gap:var(--e-4);margin-top:var(--e-6);
  /* Trois cartes, trois colonnes. `auto-fit` en créait CINQ sur un écran de
     1280 px — deux pistes vides et des cartes étirées, pour un bloc dont le
     nombre d'éléments ne varie jamais. */
  grid-template-columns:repeat(3,1fr)}
@media (max-width:46rem){.granularites{grid-template-columns:1fr}}
.gran{border:1px solid var(--trait);border-radius:var(--r-md);
  background:var(--fond-carte);padding:var(--e-6);text-align:center}
.gran-quoi{margin:0;font-family:var(--serif);font-size:var(--t-md);
  color:var(--texte)}
.gran-prix{margin:var(--e-2) 0 var(--e-3);font-size:var(--t-xl);
  font-weight:700;color:var(--action);font-variant-numeric:tabular-nums}
.gran .legende{margin:0}

.pack-grille{display:grid;gap:var(--e-4);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  margin:var(--e-8) 0}
.pack{--teinte:var(--structure);background:var(--fond-carte);
  border:1px solid var(--trait);border-top:3px solid var(--teinte);
  border-radius:var(--r-md);padding:var(--e-6);box-shadow:var(--ombre-carte);
  display:flex;flex-direction:column;gap:var(--e-3)}
.pack.assurance{--teinte:var(--univers-assurance)}
.pack.credit{--teinte:var(--univers-credit)}
.pack.finance{--teinte:var(--univers-finance)}
.pack.immobilier{--teinte:var(--univers-immobilier)}
.pack .pack-etiq{margin:0;font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;font-weight:var(--g-fort);color:var(--teinte);
  text-align:center}
.pack h3{border:0;padding:0;margin:0;font-family:var(--serif);
  font-size:var(--t-xl);line-height:var(--i-serre);text-align:center}
.pack .pour{margin:0;color:var(--texte-doux);font-size:var(--t-sm);
  text-align:center}
.pack .prix{margin:var(--e-2) 0 0;font-family:var(--serif);
  font-size:var(--t-3xl);font-weight:var(--g-fort);line-height:1;
  font-variant-numeric:tabular-nums;text-align:center}
.pack .prix span{font-family:var(--sans);font-size:var(--t-xs);
  font-weight:var(--g-normal);color:var(--texte-doux);letter-spacing:0}
.pack ul{margin:var(--e-2) 0 0;padding:0;list-style:none;display:grid;
  gap:var(--e-2);font-size:var(--t-sm)}
.pack ul li{border-top:1px solid var(--trait);padding-top:var(--e-2)}
.pack .action{margin-top:auto;margin-bottom:0;padding-top:var(--e-4);
  text-align:center}
/* L'intégral : la nuit, texte papier, liseré d'or de provenance. */
.pack.integral{background:var(--nuit);border-color:transparent;
  border-top-color:var(--provenance)}
.pack.integral .pack-etiq{color:var(--provenance)}
.pack.integral h3,.pack.integral .prix{color:var(--papier)}
.pack.integral .pour,.pack.integral .prix span,.pack.integral ul{color:var(--encre-300)}
.pack.integral ul li{border-top-color:rgb(255 255 255 / .14)}
/* Le bouton second héritait de --structure (#1C3A5E) sur le fond nuit : un
   rapport de 1,57:1, c'est-à-dire un texte invisible dans une bordure
   parfaitement nette. Sur la carte la plus chère du site, et pendant des
   semaines. Le contrôle de contraste ne l'a pas vu parce qu'il ne lisait ni
   cette feuille ni ce jeton — les deux trous sont refermés depuis. */
.pack.integral .bouton.second{color:var(--papier);
  border-color:rgb(255 255 255 / .38)}
.pack.integral .bouton.second:hover{border-color:var(--papier)}

/* ══ V6 — LE RÉSUMÉ DE PACK SUR LA FICHE ═════════════════════════════════ */
.fiche-pack{--teinte:var(--structure);
  display:flex;align-items:baseline;gap:var(--e-4);flex-wrap:wrap;
  border:1px solid var(--trait);border-left:3px solid var(--teinte);
  border-radius:var(--r-md);background:var(--fond-carte);
  padding:var(--e-4) var(--e-6);margin:var(--e-6) 0}
.fiche-pack.assurance{--teinte:var(--univers-assurance)}
.fiche-pack.credit{--teinte:var(--univers-credit)}
.fiche-pack.finance{--teinte:var(--univers-finance)}
.fiche-pack.immobilier{--teinte:var(--univers-immobilier)}
.fiche-pack .prix{font-family:var(--serif);font-size:var(--t-2xl);
  font-weight:var(--g-fort);font-variant-numeric:tabular-nums}
.fiche-pack .quoi{color:var(--texte-doux);font-size:var(--t-sm)}

/* ══ V6 — LE FRONTON DE FICHE ════════════════════════════════════════════ */
.fiche-heros{min-height:60svh}
.surtitre-heros{margin:0 0 var(--e-3);font-size:var(--t-2xs);
  letter-spacing:.16em;text-transform:uppercase;font-weight:var(--g-fort);
  color:var(--univers-transversal)}
.surtitre-heros.assurance{color:var(--univers-assurance)}
.surtitre-heros.credit{color:var(--univers-credit)}
.surtitre-heros.finance{color:var(--univers-finance)}
.surtitre-heros.immobilier{color:var(--univers-immobilier)}
.fiche-heros h1{border:0;padding:0;margin:0;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,2.6rem);letter-spacing:-.015em;
  max-width:24ch;margin-inline:auto}
.fiche-heros .sous{max-width:52ch}

/* L'intégral en bannière : sur grand écran il prend toute la rangée —
   l'offre-vitrine se présente en large, pas en orphelin de colonne. */
@media (min-width:1100px){
  /* La bannière ne vaut que si la carte PORTE sa liste de traits (page
     tarifs) ; la carte d'accès de l'espace, sans liste, resterait à
     moitié vide dans cette grille. */
  .pack.integral:has(ul){grid-column:1/-1;display:grid;
    grid-template-columns:minmax(18rem,26rem) 1fr;
    grid-template-rows:auto auto auto auto 1fr;
    column-gap:var(--e-12);row-gap:var(--e-2)}
  .pack.integral .pack-etiq{grid-area:1/1}
  .pack.integral h3{grid-area:2/1}
  .pack.integral .pour{grid-area:3/1}
  .pack.integral .prix{grid-area:4/1}
  .pack.integral .action{grid-area:5/1;align-self:end}
  .pack.integral ul{grid-area:1/2/6/3;margin-top:0;align-content:center}
}

/* ══ V7 — LA SCÈNE D'AUTHENTIFICATION ════════════════════════════════════
   Connexion, inscription, mots de passe : une carte centrée sous le blason,
   rien d'autre à l'écran. Le formulaire EST la page. */
.auth-scene{min-height:76svh;display:grid;place-items:center;
  padding:var(--e-12) var(--e-6)}
.auth-carte{width:min(29rem,100%);background:var(--fond-carte);
  border:1px solid var(--trait);border-radius:var(--r-lg);
  box-shadow:var(--ombre-carte);padding:var(--e-12) var(--e-12);
  text-align:center}
.auth-carte .lockup{margin:0 0 var(--e-6)}
.auth-carte .lockup img{height:3.4rem;width:auto;margin-inline:auto}
.auth-carte h1{border:0;padding:0;margin:0 0 var(--e-3);
  font-size:var(--t-2xl);letter-spacing:-.01em}
.auth-carte .sous{color:var(--texte-doux);font-size:var(--t-sm);
  margin:0;max-width:38ch;margin-inline:auto;text-wrap:balance}
/* Le formulaire : le `gap` de la grille EST l'espacement — la marge que
   `.champ` porte ailleurs s'y ajouterait en double. */
.auth-carte form{text-align:left;display:grid;gap:var(--e-6);
  margin-top:var(--e-8)}
.auth-carte .champ{margin-bottom:0;max-width:none}
.auth-carte .champ > span:first-child{margin-bottom:var(--e-3);
  letter-spacing:.01em}
.auth-carte .champ input{width:100%;padding:var(--e-4) var(--e-4);
  border-radius:var(--r-md);background:var(--fond);
  transition:border-color var(--t-court) var(--c-douce),
             box-shadow var(--t-court) var(--c-douce)}
.auth-carte .champ input:hover{border-color:var(--structure)}
.auth-carte .champ input:focus-visible{outline:0;border-color:var(--action);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--action) 22%, transparent)}
.auth-carte form .bouton{width:100%;justify-content:center;display:inline-flex;
  padding-block:var(--e-4);margin-top:var(--e-2)}
.auth-carte .message{text-align:left;margin-bottom:0}
.auth-liens{margin:var(--e-8) 0 0;padding-top:var(--e-6);
  border-top:1px solid var(--trait);font-size:var(--t-sm);
  color:var(--texte-doux);line-height:var(--i-lecture)}
@media (prefers-reduced-motion:reduce){
  .auth-carte .champ input{transition:none}
}

/* ══ V7 — L'ESPACE ADHÉRENT ══════════════════════════════════════════════ */
.espace-tete{text-align:center;padding:var(--e-16) var(--e-6) var(--e-12)}
.espace-tete .surtitre-heros{margin-bottom:var(--e-3)}
.espace-tete h1{border:0;padding:0;margin:0;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);letter-spacing:-.015em}
.espace-tete .sous{color:var(--texte-doux);max-width:46ch;
  margin:var(--e-3) auto 0}
.espace-tete .liens{display:flex;gap:var(--e-4);justify-content:center;
  align-items:center;margin-top:var(--e-6);flex-wrap:wrap}
/* Les cartes d'accès reprennent la grammaire des packs, sans le prix :
   l'échéance en tient la place. */
.pack .dates{margin:var(--e-2) 0 0;text-align:center;
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--texte-doux)}
.pack .action .bouton + .bouton{margin-left:var(--e-2)}

/* ══ V8 — LA SCÈNE D'AUTH SUR PHOTO, LA CARTE EN VERRE ═══════════════════ */
.auth-scene{position:relative;isolation:isolate;overflow:hidden}
.auth-scene > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.auth-scene::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgb(11 17 25 / .38), rgb(11 17 25 / .55))}
.auth-carte{border-color:rgb(255 255 255 / .35)}
@supports (backdrop-filter: blur(1px)){
  .auth-carte{background:color-mix(in srgb, var(--fond-carte) 82%, transparent);
    backdrop-filter:blur(22px) saturate(1.25);
    -webkit-backdrop-filter:blur(22px) saturate(1.25)}
}

/* ══ V8 — LE FRONTON PHOTO DE L'ESPACE ADHÉRENT ══════════════════════════
   La nuit sur photo, le texte papier : l'espace ouvre comme une tuile
   d'accueil, pas comme un tableau de bord. */
.espace-heros{position:relative;isolation:isolate;overflow:hidden;
  min-height:46svh;display:grid;place-items:center;text-align:center;
  padding:var(--e-16) var(--e-6)}
.espace-heros > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2}
.espace-heros::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgb(11 17 25 / .46), rgb(11 17 25 / .68))}
.espace-heros .surtitre-heros{color:var(--provenance);margin-bottom:var(--e-3)}
.espace-heros h1{border:0;padding:0;margin:0;color:var(--papier);
  font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);letter-spacing:-.015em}
.espace-heros .sous{color:var(--encre-300);max-width:46ch;
  margin:var(--e-3) auto 0}
.espace-heros .liens{display:flex;gap:var(--e-4);justify-content:center;
  align-items:center;margin-top:var(--e-8);flex-wrap:wrap}
.espace-heros .lien-fleche{color:var(--bleu-300)}
.espace-heros .lien-fleche:hover{color:var(--papier)}

/* ══ V8 — LE PROGRAMME, LEÇON PAR LEÇON ══════════════════════════════════ */
.programme{margin:var(--e-6) 0 0;padding:0;list-style:none;
  counter-reset:lecon;columns:2;column-gap:var(--e-12)}
.programme li{counter-increment:lecon;break-inside:avoid;
  border-top:1px solid var(--trait);padding:var(--e-3) 0 var(--e-3) var(--e-8);
  position:relative;font-size:var(--t-sm)}
.programme li::before{content:counter(lecon, decimal-leading-zero);
  position:absolute;left:0;top:var(--e-3);font-family:var(--mono);
  font-size:var(--t-2xs);color:var(--provenance-texte);font-weight:var(--g-fort)}
@media (max-width:900px){.programme{columns:1}}
.programme-lecons{margin:var(--e-2) 0 0;padding:0;list-style:none;
  font-size:var(--t-sm);color:var(--texte-doux);display:grid;gap:var(--e-2)}
.programme-lecons li{border-top:1px solid var(--trait);padding-top:var(--e-2)}
.programme-lecons .suite{color:var(--provenance-texte);font-family:var(--mono);
  font-size:var(--t-2xs)}

/* ══ V8 — ENTRÉES EN CASCADE ═════════════════════════════════════════════
   Dans une grille, les cartes n'arrivent pas toutes au même instant : un
   décalage court, régulier, donne le déroulé qu'on voit chez Apple. Le
   délai reste sous le quart de seconde — au-delà, ça traîne. */
.pack-grille .revele:nth-child(2),.cartes .revele:nth-child(2){transition-delay:60ms}
.pack-grille .revele:nth-child(3),.cartes .revele:nth-child(3){transition-delay:120ms}
.pack-grille .revele:nth-child(4),.cartes .revele:nth-child(4){transition-delay:180ms}
.pack-grille .revele:nth-child(5),.cartes .revele:nth-child(5){transition-delay:240ms}
.pack-grille .revele:nth-child(n+6),.cartes .revele:nth-child(n+6){transition-delay:280ms}
@media (prefers-reduced-motion:reduce){
  .pack-grille .revele,.cartes .revele{transition-delay:0s !important}
}
html.mouvement-eteint .pack-grille .revele,
html.mouvement-eteint .cartes .revele{transition-delay:0s !important}

/* Les cartes se soulèvent à peine sous le pointeur — le geste, pas l'effet. */
@media (hover:hover){
  .pack,.carte{transition:transform var(--t-court) var(--c-douce),
                          box-shadow var(--t-court) var(--c-douce)}
  .pack:hover,.carte:hover{transform:translateY(-2px);
    box-shadow:0 12px 32px rgb(11 17 25 / .10)}
}
@media (prefers-reduced-motion:reduce){
  .pack:hover,.carte:hover{transform:none}
}

/* ══ V9 — LE PARCOURS GUIDÉ ══════════════════════════════════════════════
   Un univers, ses degrés, ses unités dans l'ordre. L'état de chacune se
   lit d'un coup d'œil : validée, ouverte, verrouillée, à acquérir. */
.univers-parcours{--teinte:var(--structure);margin-top:var(--e-8);
  border:1px solid var(--trait);border-left:3px solid var(--teinte);
  border-radius:var(--r-md);background:var(--fond-carte);padding:var(--e-6)}
.univers-parcours.assurance{--teinte:var(--univers-assurance)}
.univers-parcours.credit{--teinte:var(--univers-credit)}
.univers-parcours.finance{--teinte:var(--univers-finance)}
.univers-parcours.immobilier{--teinte:var(--univers-immobilier)}
/* Chaque univers se replie : quatre-vingt-sept unités déroulées d'un bloc
   faisaient une page de douze mille pixels. C'est un `<details>` natif — la
   politique de sécurité interdit le script en ligne, et un pliage qui
   dépendrait du JavaScript laisserait la page close si le script ne part pas.
   Le marqueur par défaut du navigateur est retiré : on met le nôtre, aligné
   sur la teinte de l'univers, et il pivote à l'ouverture. */
.univers-parcours .tete{display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--e-6);flex-wrap:wrap;cursor:pointer;
  list-style:none;position:relative;padding-right:var(--e-8)}
.univers-parcours .tete::-webkit-details-marker{display:none}
.univers-parcours .tete::after{content:"";position:absolute;right:var(--e-2);
  top:.55em;width:.55em;height:.55em;border-right:2px solid var(--teinte);
  border-bottom:2px solid var(--teinte);transform:rotate(45deg);
  transition:transform var(--t-moyen) var(--c-douce)}
.univers-parcours[open] .tete::after{transform:rotate(-135deg)}
.univers-parcours .tete:hover h3{text-decoration:underline;
  text-underline-offset:3px}
.univers-parcours .tete:focus-visible{outline:2px solid var(--action);
  outline-offset:4px;border-radius:var(--r-sm)}
.univers-parcours h3{border:0;margin:0;padding:0;font-family:var(--serif);
  font-size:var(--t-xl);color:var(--teinte)}
.univers-parcours .avance{margin:0;font-size:var(--t-sm);
  color:var(--texte-doux);display:flex;align-items:center;gap:var(--e-3)}
.univers-parcours .jauge{display:inline-block;width:7rem;height:5px;
  background:var(--trait);border-radius:var(--r-plein);overflow:hidden;
  position:static;padding:0;border:0}
.univers-parcours .jauge i{display:block;height:100%;background:var(--teinte);
  transition:width var(--t-long) var(--c-douce)}
.degre{margin-top:var(--e-6)}
.degre h4{margin:0;font-family:var(--serif);font-size:var(--t-md)}
.degre > .legende{margin:var(--e-1) 0 var(--e-3)}
.unites{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2)}
.unite{display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;
  gap:var(--e-3);padding:var(--e-3) var(--e-4);border-radius:var(--r-sm);
  background:var(--fond);border:1px solid var(--trait)}
.unite .rang{font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--texte-doux)}
.unite .quoi{display:flex;flex-direction:column;gap:2px;min-width:0}
.unite .quoi a{color:inherit;text-decoration:none;font-weight:var(--g-moyen)}
.unite .quoi a:hover{text-decoration:underline}
.unite .fait{display:flex;align-items:center;gap:var(--e-3);flex-shrink:0}
.unite .etat{font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;
  font-weight:var(--g-fort);white-space:nowrap}
.unite .etat.valide{color:var(--succes)}
.unite .etat.ouvert{color:var(--action)}
.unite .etat.verrou,.unite .etat.acquerir{color:var(--texte-doux)}
/* La durée d'une étape de parcours. Elle n'est PAS un état : posée dans
   `.etat`, elle héritait des capitales réservées aux états d'avancement et
   sortait « 38 MIN » — une durée qui crie, à côté de « VALIDÉ » qui a une
   raison de le faire. */
.unite .duree-unite{font-size:var(--t-2xs);color:var(--texte-doux);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.unite.valide{border-left:3px solid var(--succes)}
.unite.ouvert,.unite.en_cours{border-left:3px solid var(--action)}
.unite.verrouille{opacity:.62}
.unite.verrouille .quoi a{pointer-events:none}
@media (max-width:760px){
  .unite{grid-template-columns:2.2rem 1fr;row-gap:var(--e-2)}
  .unite .fait{grid-column:2}
}

/* ══ V9 — CAS PRATIQUES ET PIÈGES DE TERRAIN ═════════════════════════════ */
.cas{border:1px solid var(--trait);border-radius:var(--r-md);
  background:var(--fond-carte);padding:var(--e-8);margin-top:var(--e-6)}
.cas-rang{margin:0;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--provenance-texte)}
.cas h3{border:0;margin:var(--e-2) 0 var(--e-4);padding:0;
  font-family:var(--serif);font-size:var(--t-xl)}
.cas .situation{margin:0;font-size:var(--t-md);line-height:var(--i-lecture);
  max-width:var(--gr-texte-max)}
.cas .cas-question{margin:var(--e-6) 0 0;font-weight:var(--g-fort);
  padding-left:var(--e-4);border-left:3px solid var(--action)}
.cas details{margin-top:var(--e-6);border-top:1px solid var(--trait);
  padding-top:var(--e-4)}
.cas summary{cursor:pointer;font-weight:var(--g-moyen);color:var(--action);
  list-style:none;position:relative;padding-right:var(--e-8)}
.cas summary::-webkit-details-marker{display:none}
.cas summary::after{content:"+";position:absolute;right:0;top:0;
  font-family:var(--mono)}
.cas details[open] summary::after{content:"–"}
.cas details p{margin:var(--e-4) 0 0;line-height:var(--i-lecture);
  max-width:var(--gr-texte-max)}
.vigilances{display:grid;gap:var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:var(--e-6)}
.vigilance{border:1px solid var(--trait);border-top:3px solid var(--alerte,var(--provenance));
  border-radius:var(--r-md);background:var(--fond-carte);padding:var(--e-6)}
.vigilance h4{margin:0 0 var(--e-3);font-family:var(--serif);
  font-size:var(--t-md);line-height:var(--i-serre)}
.vigilance .cout{margin:0 0 var(--e-3);font-size:var(--t-sm);
  color:var(--texte-doux)}
.vigilance .regle{margin:0;font-size:var(--t-sm);padding-top:var(--e-3);
  border-top:1px solid var(--trait)}

/* ══ LA FICHE RÉGLEMENTAIRE ══════════════════════════════════════════════
   Prérequis, objectifs, délai d'accès, accessibilité : quatre mentions qui
   manquaient sur toutes les surfaces. Une liste de définitions, pas un
   tableau — le libellé et sa réponse se lisent en colonne sur téléphone. */
.fiche-mentions{margin:var(--e-6) 0 0;display:grid;gap:var(--e-4)}
.fiche-mentions .mention{border-top:1px solid var(--trait);
  padding-top:var(--e-4);display:grid;gap:var(--e-2);
  grid-template-columns:minmax(12rem,1fr) 2fr}
.fiche-mentions dt{margin:0;font-weight:var(--g-moyen);color:var(--texte)}
.fiche-mentions dd{margin:0;color:var(--texte-doux);
  line-height:var(--i-lecture);max-width:62ch}
@media (max-width:44rem){
  .fiche-mentions .mention{grid-template-columns:1fr}
}

/* ══ V9 — LES FIGURES DU CORPUS ══════════════════════════════════════════
   Les schémas sont dessinés avec des variables (--enc, --acc…) : on les
   mappe ici sur les jetons de la maison, une seule fois. */
.figures{display:grid;gap:var(--e-8);margin-top:var(--e-6);
  --enc:var(--texte); --doux:var(--texte-doux); --acc:var(--action);
  --trait:var(--trait-fort); --ok:var(--succes); --crit:var(--erreur);
  --eleve:var(--alerte)}
.figure{margin:0;padding:var(--e-6);border:1px solid var(--trait);
  border-radius:var(--r-md);background:var(--fond-carte);text-align:center;
  /* Le schéma déborde plutôt que de rétrécir : voir la règle du svg. */
  overflow-x:auto}
/* Une figure trop réduite ne se lit plus DU TOUT.
   Deux défauts se corrigeaient ici en même temps. Sur téléphone, un dessin de
   720 unités ramené à 273 pixels réduisait un texte de 12 px à 4,5 px — la
   figure restait à l'écran, et personne ne pouvait la lire. Sur grand écran,
   à l'inverse, elle s'étirait à 1134 px : le `max-width:720px` posé en style
   direct sur le SVG ne tenait pas devant cette règle-ci, et l'agrandissement
   donnait des traits mous et un texte disproportionné.
   Donc : plafond ET plancher. Sous le plancher, c'est le cadre qui défile —
   un schéma qu'on fait glisser du doigt reste un schéma ; un schéma illisible
   n'est plus rien. */
.figure svg{width:100%;max-width:45rem;min-width:40rem;height:auto}
@media (max-width:26rem){
  /* Très petits écrans : on descend le plancher plutôt que d'imposer un
     glissement de deux largeurs d'écran. */
  .figure svg{min-width:34rem}
}
.figure figcaption{margin-top:var(--e-4);font-size:var(--t-sm);
  color:var(--texte-doux);font-family:var(--serif)}

/* ══ V9 — LES FILIÈRES D'UN UNIVERS ══════════════════════════════════════ */
.filieres{display:grid;gap:var(--e-6);margin-top:var(--e-6);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.filiere{--teinte:var(--structure);border:1px solid var(--trait);
  border-top:3px solid var(--teinte);border-radius:var(--r-md);
  background:var(--fond-carte);padding:var(--e-6);display:flex;
  flex-direction:column;gap:var(--e-3)}
.filiere.assurance{--teinte:var(--univers-assurance)}
.filiere.credit{--teinte:var(--univers-credit)}
.filiere.finance{--teinte:var(--univers-finance)}
.filiere.immobilier{--teinte:var(--univers-immobilier)}
.filiere h3{border:0;margin:0;padding:0;font-family:var(--serif);
  font-size:var(--t-lg);line-height:var(--i-serre)}
.filiere .pour{margin:0;font-size:var(--t-sm);color:var(--texte-doux)}
.filiere .combien{margin:0;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--teinte);letter-spacing:.08em;text-transform:uppercase}
.filiere-liste{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-2);
  font-size:var(--t-sm)}
.filiere-liste li{border-top:1px solid var(--trait);padding-top:var(--e-2)}
.filiere-liste a{color:inherit;text-decoration:none}
.filiere-liste a:hover{text-decoration:underline}

/* ══ V10 — LE VOLUME DISPONIBLE FACE À L'OBLIGATION ══════════════════════
   Un chiffre qu'aucun concurrent n'affiche : ce dont on dispose, en regard
   de ce que le texte exige. Il nous engage — c'est le but. */
.volume{--teinte:var(--structure);border:1px solid var(--trait);
  border-left:3px solid var(--teinte);border-radius:var(--r-md);
  background:var(--fond-carte);padding:var(--e-6);margin-top:var(--e-8)}
.volume.assurance{--teinte:var(--univers-assurance)}
.volume.credit{--teinte:var(--univers-credit)}
.volume.finance{--teinte:var(--univers-finance)}
.volume.immobilier{--teinte:var(--univers-immobilier)}
.volume .chiffres{margin:0;font-size:var(--t-md)}
.volume .chiffres b{font-family:var(--serif);font-size:var(--t-2xl);
  color:var(--teinte)}
.volume .chiffres .sur{color:var(--texte-doux)}
.volume .jauge{display:block;height:6px;background:var(--trait);
  border-radius:var(--r-plein);overflow:hidden;margin:var(--e-3) 0;
  position:static;padding:0;border:0}
.volume .jauge i{display:block;height:100%;background:var(--teinte);
  transition:width var(--t-long) var(--c-douce)}
.volume .legende{margin:0}

/* ── Les filtres du catalogue ──────────────────────────────────────────────
   Quatre-vingt-dix-sept unités empilées sans filtre ne se lisent pas : elles
   se subissent. Ces contrôles passent tous par l'ADRESSE — ce sont des liens,
   pas des boutons de script — et c'est ce qui leur donne leur forme : ils
   doivent se voir comme des états, pas comme des actions. D'où le pilulier
   plat, sans ombre ni relief : rien à cliquer « pour valider », le lien EST
   le nouvel état.

   Le bloc reste en tête de page, jamais collant : une barre qui suit le
   défilement mangerait sur mobile la moitié de ce qu'elle sert à trouver. */
.filtres-catalogue{padding:var(--e-6);margin-bottom:var(--e-6);
  background:var(--fond-carte);border:1px solid var(--trait);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:var(--e-4)}
/* Sur grand écran le bloc n'a pas de poignée : il est ouvert, il le reste,
   et un résumé cliquable laisserait croire le contraire. La flèche native du
   navigateur part avec lui. */
.filtres-catalogue > summary{display:none}
.filtres-catalogue > summary::-webkit-details-marker{display:none}

.cherche-catalogue{display:flex;gap:var(--e-2);flex-wrap:wrap}
.cherche-catalogue input[type=search]{flex:1 1 18rem;min-width:0;
  padding:var(--e-3) var(--e-4);font:inherit;font-size:var(--t-sm);
  color:var(--texte);background:var(--fond);
  border:1px solid var(--trait);border-radius:var(--r-sm)}
.cherche-catalogue input[type=search]:focus-visible{outline:2px solid var(--structure);
  outline-offset:1px;border-color:var(--structure)}

.groupe-filtres{display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap}
.groupe-filtres .quoi{flex:0 0 5.5rem;font-size:var(--t-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux)}
.groupe-filtres .choix{display:flex;gap:var(--e-2);flex-wrap:wrap}

/* Un filtre actif se marque par le CONTRASTE, pas par une couleur d'accent :
   l'or ne signale que la provenance, et le vermillon que le changement. Les
   emprunter ici les userait. */
a.filtre{display:inline-block;padding:var(--e-1) var(--e-3);
  font-size:var(--t-xs);line-height:1.7;color:var(--texte-doux);
  text-decoration:none;background:var(--fond-enfonce);
  border:1px solid transparent;border-radius:999px}
a.filtre:hover{color:var(--texte);border-color:var(--trait)}
a.filtre:focus-visible{outline:2px solid var(--structure);outline-offset:2px}
/* Le couple (--structure, --fond-carte) est celui du bouton principal, et il
   tient dans les deux thèmes : en clair, papier sur bleu profond ; en sombre,
   nuit sur bleu clair. Écrit --papier au lieu de --fond-carte, le pilulier
   actif tombait à 2,36 de contraste en thème sombre — lisible nulle part, et
   invisible à la relecture parce que le thème clair, lui, était parfait. */
a.filtre.actif{color:var(--fond-carte);background:var(--structure);
  border-color:var(--structure)}

.compte-catalogue{margin:0 0 var(--e-4)}

/* Le libellé qui n'existe que pour la synthèse vocale. Le champ porte un
   marque-page visible, mais un marque-page n'est pas un libellé : il
   disparaît dès la première frappe, et la personne qui revient sur le champ
   n'a plus rien pour savoir ce qu'elle y avait mis. */
.a-lire-seul{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:640px){
  .filtres-catalogue{padding:var(--e-4);gap:var(--e-3)}
  /* Le résumé n'apparaît QUE là où le repli sert à quelque chose. */
  .filtres-catalogue > summary{display:list-item;cursor:pointer;
    font-size:var(--t-sm);font-weight:var(--g-fort);color:var(--structure);
    padding:var(--e-1) 0}
  .filtres-catalogue > summary .quand{font-weight:var(--g-normal);
    color:var(--texte-doux)}
  .filtres-catalogue > summary:focus-visible{outline:2px solid var(--structure);
    outline-offset:2px}

  /* Chaque famille tient sur UNE ligne qui défile, au lieu de s'empiler sur
     trois : empilées, les trois familles faisaient six cent cinquante pixels
     de haut — le catalogue commençait sous la ligne de flottaison. */
  .groupe-filtres{flex-direction:column;align-items:stretch;gap:var(--e-1)}
  .groupe-filtres .quoi{flex:none}
  .groupe-filtres .choix{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:var(--e-1);
    scroll-snap-type:x proximity;
    /* Une rangée qui défile sans le montrer ne se découvre pas : on masque la
       barre de défilement — inutilisable au doigt — et on la remplace par un
       bord estompé, qui dit « ça continue » sans rien ajouter à lire. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent)}
  .groupe-filtres .choix::-webkit-scrollbar{display:none}
  /* Une pastille de trente pixels se rate au doigt. Quarante-quatre est la
     cible tenable, et elle ne coûte rien ici : les lignes défilent. */
  a.filtre{flex:0 0 auto;min-height:44px;display:inline-flex;
    align-items:center;padding:0 var(--e-4);scroll-snap-align:start}
  .cherche-catalogue input[type=search]{flex:1 1 100%;min-height:44px}
  .cherche-catalogue .bouton{min-height:44px}
}