.lang-menu a, .lang-menu button { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* ---------- Palette « Grande École » : ivoire, encre marine, or sobre ---------- */
    :root {
      --ink:      #0f1e3d;
      --ink-rgb:  15, 30, 61;   /* même couleur que --ink, pour les rgba() translucides */
      --ink-soft: #33415c;
      --ivory:    #fbfaf7;
      --sand:     #f3efe5;   /* bande alternée : ivoire un peu plus chaud/soutenu */
      --gold:     #84632e; --gold-clair:#b08d57;
      --gold-rgb: 176, 141, 87; /* même couleur que --gold, pour les rgba() translucides */
      --line:     #e7e3da;
      --white:    #ffffff;
      /* Couleur des grands chiffres (01/02/03). Calculée, pas choisie :
         l'or clair plafonne à 2,69:1 même opaque, très en dessous des 3:1
         exigés pour un grand caractère. Celle-ci donne 3,02:1 sur le sable
         et 3,20:1 sur l'ivoire — les deux fonds où les chiffres apparaissent. */
      --chiffre:  #a0865c;
      --radius:   3px;
      /* Filet de separation : depuis la refonte, c'est LUI qui structure
         la page — a la place des cartes blanches arrondies a ombre douce,
         qui sont le tic visuel des pages engendrees a la chaine. */
      --filet:    #ddd7ca;
      --maxw:     1100px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ivory); }
    body {
      margin: 0;
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--ink);
      background: transparent;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0; }
    a { color: inherit; text-decoration: none; }
    a[href]:not(.btn):hover { text-decoration: underline; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
    .accent { color: var(--gold); }
    .eyebrow { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

    /* ---------- Boutons ---------- */
    .btn {
      display: inline-block; padding: 14px 28px; border-radius: 2px;
      font-weight: 600; font-size: .9rem; letter-spacing: .02em; cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
      border: 1.5px solid var(--ink);
    }
    .btn-primary { background: var(--gold); color: #14213d; border-color: var(--gold); }
    .btn-primary:hover { background: #9a7645; border-color: #9a7645; color: #fff; transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
    .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

    /* ---------- En-tête ---------- */
    header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(251,250,247,.94);
      border-bottom: 1px solid var(--line);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
    .brand { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: pointer; user-select: none; }
    .brand span { color: var(--gold); }
    /* ---- Σ interactif : logo doré qui s'anime au survol de la marque ---- */
    .brand .sigma-mark {
      display: inline-block; font-size: 1.32em; font-weight: 700;
      position: relative; top: .04em; margin-right: 2px; color: var(--gold);
      transition: transform .4s cubic-bezier(.2,.85,.3,1.5), text-shadow .4s ease, color .4s ease;
      text-shadow: 0 0 0 rgba(var(--gold-rgb),0);
    }
    .brand:hover .sigma-mark {
      transform: rotate(-7deg) scale(1.25);
      color: #c59a58;
      text-shadow: 0 3px 16px rgba(var(--gold-rgb),.6);
    }
    .nav-links { display: flex; gap: 16px; align-items: center; }
    .nav-links a { font-size: .88rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
    .nav-links a:hover { color: var(--ink); }
    .nav-links .btn { padding: 10px 20px; }
    /* ⚠️ `.nav-links a` l'emporte sur `.btn-primary` (spécificité) : sans cette
       ligne, le bouton doré de l'en-tête garde la couleur d'un lien de menu
       (#33415c), soit 3,31:1 sur l'or — sous le seuil de lisibilité. Les pages
       de guides n'ont pas le problème, leur `.btn-nav` impose déjà sa couleur. */
    .nav-links a.btn-primary { color: #14213d; }

    /* ---------- Sélecteur de langue (menu déroulant) ----------
       Un seul bouton affiche la langue courante ; les trois choix
       n'apparaissent qu'au clic. Remplace les trois pastilles côte à côte :
       l'en-tête y gagne ~90 px, ce qui compte surtout sur téléphone. */
    .lang-switch { position: relative; display: inline-flex; }
    .lang-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
                   border-radius: 2px; background: var(--white); box-shadow: inset 0 1px 2px rgba(var(--ink-rgb),.04);
                   padding: 7px 11px 7px 10px; font-family: inherit; font-size: .8rem; font-weight: 600;
                   letter-spacing: .03em; color: var(--ink); cursor: pointer; line-height: 1.4;
                   transition: border-color .25s ease, color .25s ease, background .25s ease; }
    .lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb),.06); }
    .lang-globe { width: 14px; height: 14px; color: var(--ink-soft); flex: none; transition: color .25s ease; }
    .lang-toggle:hover .lang-globe, .lang-toggle[aria-expanded="true"] .lang-globe { color: var(--gold); }
    .lang-caret { width: 10px; height: 10px; flex: none; color: var(--ink-soft); transition: transform .25s ease, color .25s ease; }
    .lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); color: var(--gold); }

    /* Le menu reste dans le DOM (les liens / , /en/ , /ru/ posés par build.py
       doivent rester lisibles par les robots) mais invisible et non cliquable
       tant qu'il n'est pas ouvert — visibility, pas seulement opacity. */
    .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 132px;
                 display: flex; flex-direction: column; gap: 2px; padding: 6px;
                 background: var(--white); border: 1px solid var(--line); border-radius: 3px;
                 box-shadow: 0 18px 38px -18px rgba(var(--ink-rgb),.45);
                 opacity: 0; visibility: hidden; transform: translateY(-6px);
                 transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
    .lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
    .lang-btn { display: block; width: 100%; text-align: left; background: transparent; border: none;
                padding: 9px 12px; border-radius: 2px; font-family: inherit; font-size: .84rem; font-weight: 600;
                color: var(--ink-soft); cursor: pointer; line-height: 1.4; white-space: nowrap;
                transition: color .2s ease, background .2s ease; }
    .lang-btn:hover:not(.active) { color: var(--gold); background: rgba(var(--gold-rgb),.10); }
    .lang-btn.active { background: var(--ink); color: var(--ivory); }
    /* Après génération (build.py), les entrées du menu sont de vrais liens. */
    .lang-menu a[href].lang-btn:hover { text-decoration: none; }

    /* ---------- Hero ---------- */
    .hero { padding: 56px 0 28px; }
    .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
    /* Sur mobile la carte disparaît : le hero passe en pleine largeur et tout se centre */
    @media (max-width: 900px) {
      .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
      .hero-card { display: none; }
      .hero-copy { text-align: center; }
      .hero p.lead { margin-left: auto; margin-right: auto; }
      .hero .cta-row { justify-content: center; }
      .foot { justify-content: center; text-align: center; }
      .foot-links { justify-content: center; }
    }
    .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
    .hero p.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 560px; margin: 22px 0 34px; }
    .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-note { margin-top: 22px; font-size: .9rem; color: var(--ink-soft); }

    /* Carte visuelle du hero */
    .hero-card { position: relative; background: var(--ink); color: var(--ivory);
                 border-radius: 3px; padding: 36px 34px; overflow: hidden;
                 border-top: 3px solid var(--gold-clair); }
    .hero-card .eyebrow { color: var(--gold); position: relative; }
    .hero-card ul { list-style: none; margin: 18px 0 0; padding: 0; position: relative; }
    .hero-card li { position: relative; padding: 11px 0 11px 30px; color: #dbe1ec;
                    border-bottom: 1px solid rgba(255,255,255,.08); font-size: .98rem;
                    transition: color .2s, padding-left .2s; cursor: default; }
    .hero-card li:last-child { border-bottom: none; }
    /* Un filet, pas une coche. La coche doree en tete de ligne est, avec les
       icones au trait, le marqueur le plus reconnaissable des pages de vente
       fabriquees en serie : on la remplace par un tiret typographique. */
    .hero-card li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 15px; height: 2px;
                            background: var(--gold-clair); transition: width .2s ease, background .2s ease; }
    .hero-card li:hover { color: #fff; padding-left: 36px; }
    .hero-card li:hover::before { width: 24px; background: var(--ivory); }
    .hero-card-glyph { position: absolute; right: -6px; top: -46px; font-family: 'Cormorant Garamond', serif;
                       font-size: 210px; line-height: 1; color: rgba(var(--gold-rgb),.13); pointer-events: none; }
    .hero-card-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
                      font-size: .82rem; color: #a9b3c6; position: relative; letter-spacing: .02em; }
    /* Les étoiles ne sont PAS dans le hero : elles vivent en section Avis, sur
       des témoignages réels et vérifiables. Un hero étoilé sans avis derrière
       est le tic visuel que la refonte du 24/08 a chassé. */
    .stars { color: var(--gold); letter-spacing: 2px; }

    /* ---------- Sections ---------- */
    /* 34 px de chaque côté = 68 px entre deux sections.
       Volontairement serré : depuis que les fonds alternent, c'est le
       changement de couleur qui sépare les chapitres, pas le vide.
       (À 46 px, il y avait jusqu'à 107 px de blanc entre deux sections.) */
    section { padding: 34px 0; scroll-margin-top: 84px; }

    /* Bandes de fond alternées : chaque chapitre de la page a sa teinte,
       ce qui marque nettement les transitions au défilement (surtout sur mobile). */
    #cours, #avis, #ingenieurat, #tarifs, #reserver { background: var(--sand); }
    #comment, #orientation, #ressources, #faq, #contact { background: var(--ivory); }
    /* Respiration sombre au milieu de la page : le Parcours devient une bande marine pleine largeur */
    #parcours { background: var(--ink); padding: 46px 0; }
    /* Liseré doré très discret entre deux bandes.
       `section[id]` plutôt que la liste des 11 identifiants : une nouvelle
       section est couverte d'office. Le hero n'a pas d'id, il reste intact. */
    section[id] { border-top: 1px solid rgba(var(--gold-rgb),.16); }
    #cours { border-top: none; }

    /* ---------- Longs paragraphes : ligne courte, alignés à gauche ----------
       Depuis la refonte, toute la page est calée à gauche ; il ne reste ici
       qu'à borner la longueur de ligne (~62 signes = confort de lecture) et
       à aérer l'interligne des deux seuls blocs de texte suivi. */
    .parcours p, .orient > div:not(.price-card) p {
      max-width: 62ch;
      line-height: 1.72;
    }

    /* ---------- Titre de chapitre ----------
       Neuf sections partageaient le meme bloc CENTRE : sur-titre dore en
       capitales, titre a empattements, phrase grise. Repete neuf fois de suite,
       ce gabarit est la signature la plus visible d'une page engendree
       automatiquement. On passe a une manchette de journal : tout est cale a
       gauche, le chapo part a droite sur la meme ligne de base, et un filet
       ferme l'ensemble. */
    .section-head { max-width: none; margin: 0 0 30px; text-align: left;
                    display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
                    align-items: end; column-gap: 44px; row-gap: 4px;
                    padding-bottom: 16px; border-bottom: 1px solid var(--filet); }
    .section-head .eyebrow { grid-column: 1 / -1; }
    .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 2px 0 0; letter-spacing: -.01em; }
    .section-head p { color: var(--ink-soft); font-size: 1rem; margin: 0 0 7px; max-width: 46ch; }
    /* Un chapitre sans chapô (la FAQ) : le titre prend toute la largeur
       au lieu de se serrer sur la moitié gauche devant une colonne vide. */
    .section-head h2:last-child { grid-column: 1 / -1; }
    @media (max-width: 780px) {
      .section-head { grid-template-columns: 1fr; row-gap: 10px; }
      .section-head p { margin-bottom: 0; }
    }

    /* ---------- Grilles à 3 colonnes ----------
       UNE seule déclaration et UN seul point de rupture pour les 4 grilles.
       Avant, .res-grid et .tarifs-grid se redéclaraient plus bas à l'identique
       (avec un gap différent). Depuis la refonte, .tarifs-grid a disparu :
       les tarifs sont une liste à points de conduite (.prix). */
    .res-grid {
      display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 860px) {
      .res-grid, .orient { grid-template-columns: 1fr; }
    }

    /* ---------- Cartes ----------
       Seules les ressources gardent l'ancien gabarit. Quatre chapitres
       partageaient la meme grille de trois cartes blanches arrondies : c'est
       cette repetition qui donnait a la page une allure de patron. Chaque
       chapitre a desormais SA mise en page — voir .niveaux, .steps, .principes,
       .prix et .trust-grid ci-dessous. */
    .res {
      background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
      /* Propriétés nommées, pas `transition: .2s` (= anime tout).
         Seule la bordure change au survol depuis la refonte. */
      transition: border-color .2s ease;
    }
    .res:hover { border-color: var(--gold); }

    /* ---------- Les niveaux (chapitre « Les cours ») ----------
       Des rangees de registre plutot que des cartes : le niveau tient la colonne
       de gauche, le contenu se lit d'une traite a droite. Aucune boite, aucune
       ombre — des filets, comme un programme imprime. */
    .niveaux { border-top: 1px solid var(--filet); }
    .niv { display: grid; grid-template-columns: 215px minmax(0,1fr); column-gap: 40px;
           padding: 20px 4px; border-bottom: 1px solid var(--filet);
           transition: background .25s ease; }
    .niv:hover { background: rgba(var(--gold-rgb),.05); }
    .niv-cl { display: block; font-family: 'Cormorant Garamond', Georgia, serif;
              font-size: 1.6rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
    .niv-rg { display: block; margin-top: 3px; font-size: .73rem; letter-spacing: .12em;
              text-transform: uppercase; color: var(--gold); font-weight: 600; }
    .niv-b h3 { font-size: 1.1rem; font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
                letter-spacing: .01em; margin: 0 0 6px; }
    .niv-b p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.62; }
    @media (max-width: 700px) {
      .niv { grid-template-columns: 1fr; row-gap: 10px; }
    }

    /* ---------- Les principes (chapitre « Cap sur l'ingenieurat » ) ----------
       Encore une autre mise en page : gros chiffre a gauche, texte long a
       droite. Deux chapitres voisins ne doivent jamais se ressembler. */
    .principe { display: grid; grid-template-columns: 84px minmax(0,1fr); column-gap: 26px;
                align-items: baseline; padding: 22px 4px; border-top: 1px solid var(--filet); }
    .principe:last-child { border-bottom: 1px solid var(--filet); }
    .principe .pn { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.1rem;
                    font-weight: 700; line-height: .9; color: var(--chiffre);
                    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
    .principe h3 { font-size: 1.4rem; margin: 0 0 6px; }
    .principe p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; max-width: 68ch; }
    @media (max-width: 700px) {
      .principe { grid-template-columns: 1fr; row-gap: 6px; }
      .principe .pn { font-size: 2.2rem; }
    }

    /* ---------- Les tarifs ----------
       Une liste a points de conduite, comme une carte de restaurant : le prix
       tombe en bout de ligne. Rien ne ressemble a une grille de formules
       d'abonnement, et les quatre niveaux tiennent sans se serrer. */
    .prix .pl { display: flex; align-items: baseline; gap: 10px; padding: 15px 4px;
                border-top: 1px solid var(--filet); }
    .prix .pl:last-child { border-bottom: 1px solid var(--filet); }
    /* ⚠️ `flex: none` faisait déborder la page en russe entre 621 et 720 px :
       les libellés y sont plus longs et poussaient le prix hors de l'écran.
       `min-width: 0` autorise le libellé à revenir à la ligne dans sa colonne. */
    .prix .pq { flex: 0 1 auto; min-width: 0; }
    .prix .pq b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem;
                  font-weight: 600; letter-spacing: .01em; }
    .prix .pq i { font-style: normal; color: var(--ink-soft); font-size: .9rem; margin-left: 12px; }
    /* Les points de conduite mangent l'espace restant. Gris propre, plus marqué
       que --filet : un pointillé disparaît là où un trait plein se voit encore. */
    .prix .pd { flex: 1 1 auto; border-bottom: 1px dotted #cfc7b6; transform: translateY(-5px); min-width: 20px; }
    .prix .pv { flex: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.75rem;
                font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1;
                font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
    .prix .pv small { font-family: 'Inter', system-ui, sans-serif; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
    @media (max-width: 780px) {
      .prix .pl { flex-wrap: wrap; }
      .prix .pd { display: none; }
      .prix .pq { flex: 1 1 100%; }
    }

    /* ---------- Parcours ---------- */
    /* Le bloc n'a plus besoin de son propre fond : la section entière est marine */
    /* Le chapitre biographique passe en deux colonnes decalees : le titre tient
       la gauche, le recit la droite. C'est le seul endroit de la page ou le
       texte occupe une colonne etroite — la variation est voulue. */
    .parcours { color: var(--ivory); text-align: left;
                display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
                column-gap: 56px; align-items: start; }
    @media (max-width: 860px) { .parcours { grid-template-columns: 1fr; row-gap: 6px; } }
    .parcours h2 { color: var(--ivory); font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 10px 0 0; }
    .parcours p { color: #c7cfdd; font-size: 1.03rem; }
    /* Signature : la seule mention nominative de la page. Un site tenu par
       quelqu'un se signe ; un gabarit, non. */
    .signature { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
                 font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem;
                 color: var(--gold-clair); line-height: 1.2; }
    .signature small { display: block; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem;
                       letter-spacing: .13em; text-transform: uppercase; color: #8b96ab;
                       margin-top: 8px; font-weight: 600; }
    /* Les trois reperes chiffres ne sont plus une bande de gros nombres centres
       (autre tic de gabarit) mais une ligne de notes separees par des filets. */
    .stats { display: flex; gap: 0; margin-top: 30px; flex-wrap: wrap; row-gap: 16px; }
    .stat { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); }
    .stat:first-child { padding-left: 0; border-left: none; }
    .stat .n { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; color: var(--gold-clair); font-weight: 700;
               line-height: 1.2; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
    .stat .l { font-size: .8rem; color: #a9b3c6; }

    /* ---------- Orientation ---------- */
    .orient { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
              background: var(--white); border: 1px solid var(--line);
              border-left: 3px solid var(--gold-clair); border-radius: 3px; padding: 34px;
              text-align: left; }
    @media (max-width: 860px) { .orient { grid-template-columns: 1fr; } }
    .orient h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 14px; }
    .orient p { color: var(--ink-soft); }
    .price-card { text-align: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; background: var(--ivory); }
    .price-card .price { font-family: 'Cormorant Garamond', serif; font-size: 2.9rem; font-weight: 700; color: var(--ink);
                         line-height: 1.05; margin: 6px 0 0;
                         font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
    /* Durée : sortie du prix pour ne plus hériter de la police à empattements.
       Petites capitales espacées = discret, et ça équilibre le gros chiffre. */
    .price-card .price-meta { margin: 8px 0 0; font-size: .7rem; font-weight: 600;
                              letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
    .price-card .btn { margin-top: 20px; width: 100%; padding: 12px 20px; font-size: .9rem; }
    .price-card .pc-note { margin: 12px 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; }

    /* ---------- Réservation ----------
       Le calendrier n'est plus chargé automatiquement : c'est une ressource
       externe lourde (embed 90 Ko + page 1,1 Mo) qui n'aboutit pas sur les
       connexions lentes ou instables, et s'affichait alors à moitié. On propose
       donc DEUX chemins explicites, et le calendrier ne part qu'AU CLIC. */
    .booking { text-align: center; }
    .book-choices { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
                    max-width: 760px; margin: 0 auto; }
    .book-choice { flex: 1 1 300px; background: #fff; border: 1px solid var(--line);
                   border-radius: 3px; padding: 24px 22px; text-align: center;
                   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .book-choice:hover { transform: translateY(-3px); border-color: var(--gold);
                         box-shadow: 0 10px 26px rgba(var(--ink-rgb), .09); }
    .book-choice h3 { margin: 0 0 8px; font-size: 1.06rem; }
    .book-choice p { margin: 0 0 16px; font-size: .87rem; color: var(--ink-soft); line-height: 1.55; }
    .book-choice .btn { width: 100%; }
    /* Mention sous le bouton du calendrier : prévient d'un chargement lent
       AVANT le clic, au lieu de laisser l'utilisateur devant un vide. */
    .book-note { margin: 14px 0 0; font-size: .8rem; color: var(--ink-soft); }
    /* Zone du calendrier : vide et sans hauteur réservée tant qu'on n'a pas cliqué
       (c'est ce qui supprime le grand trou blanc et l'attente inutile). */
    #cal-inline { width: 100%; }
    #cal-inline.est-charge { min-height: 480px; overflow: auto; margin-top: 22px; }
    #cal-attente { margin-top: 18px; font-size: .88rem; color: var(--ink-soft); }
    #cal-attente[hidden] { display: none; }   /* filet : rien ne doit annuler [hidden] */
    /* Calendrier masqué parce qu'il n'a pas su se charger. Masqué et NON détruit :
       s'il finit par arriver, on le réaffiche. */
    #cal-inline.est-masque { display: none; }

    /* Bloc d'échec : le visiteur ne reste jamais devant un calendrier à moitié
       dessiné, il reçoit une explication et un chemin qui fonctionne. */
    #cal-echec { max-width: 520px; margin: 22px auto 0; padding: 22px 20px;
                 background: #fff; border: 1px solid var(--line);
                 border-left: 3px solid var(--gold); border-radius: 3px; text-align: center; }
    #cal-echec[hidden] { display: none; }
    /* Message affiché d'emblée : il doit venir AVANT les deux cartes, sinon le
       visiteur voit un choix sans savoir pourquoi. */
    body.cal-prealable .cal-wrap { display: flex; flex-direction: column; }
    body.cal-prealable .cal-wrap > #cal-echec { order: -1; margin: 0 auto 20px; }
    /* Le bouton de l'encadré ferait doublon : la carte juste en dessous porte
       déjà le même appel à l'action, en doré. */
    body.cal-prealable #cal-echec .btn { display: none; }
    body.cal-prealable #cal-echec .ce-texte { margin-bottom: 0; }
    #cal-echec .ce-titre { margin: 0 0 8px; font-weight: 600; }
    #cal-echec .ce-texte { margin: 0 0 16px; font-size: .87rem; color: var(--ink-soft); line-height: 1.55; }

    /* Le calendrier n'aboutit pas → le formulaire passe devant, dans TOUTES les
       langues (la langue choisie ne dit rien de la qualité de la connexion).
       Ne coûte rien aux visiteurs pour qui le calendrier fonctionne : chez eux
       la classe n'est jamais posée. */
    body.cal-injoignable #book-cal-card { order: 2; }
    body.cal-injoignable #book-msg-card { order: 1; }
    body.cal-injoignable #book-cal-btn { background: transparent; color: var(--ink); border-color: var(--line); }
    body.cal-injoignable #book-cal-btn:hover { border-color: var(--gold); color: var(--gold); background: transparent; transform: none; }
    body.cal-injoignable #book-msg-btn { background: var(--gold); color: #14213d; border-color: var(--gold); }
    body.cal-injoignable #book-msg-btn:hover { background: #9a7645; border-color: #9a7645; color: #fff; }

    /* Sur la page russophone, le formulaire est mis en avant par défaut (bouton
       doré) et le calendrier en second : c'est le chemin le plus fiable pour ce
       public. Repose sur <html lang="ru"> posé par build.py. */
    html[lang="ru"] #book-cal-card { order: 2; }
    html[lang="ru"] #book-msg-card { order: 1; }
    html[lang="ru"] #book-cal-btn { background: transparent; color: var(--ink); border-color: var(--line); }
    html[lang="ru"] #book-cal-btn:hover { border-color: var(--gold); color: var(--gold); background: transparent; transform: none; }
    html[lang="ru"] #book-msg-btn { background: var(--gold); color: #14213d; border-color: var(--gold); }
    html[lang="ru"] #book-msg-btn:hover { background: #9a7645; border-color: #9a7645; color: #fff; }

    /* ---------- Avis : le carrousel Trustpilot ----------
       ⛔ PAS DE COMPTE D'AVIS NI DE NOTE MOYENNE. Un bloc « 3 avis » a été
       écrit puis retiré le 28/08 : afficher le nombre SOULIGNE qu'il est
       petit. Les avis parlent, le compte se tait.
       (La règle sur la véracité des avis est écrite là où on les colle,
       dans le HTML — pas ici.)

       ⚠️ Les avis sont EMPILÉS dans la même cellule de grille, donc la scène
       serait haute comme le PLUS LONG : 200 px de vide sous un avis de deux
       lignes. Le script lui donne la hauteur de l'avis affiché ; sans script,
       `height` reste absent et on retombe sur la hauteur du plus long —
       moche, mais rien n'est coupé.
       ⚠️ `align-items: start` est INDISPENSABLE : par défaut une cellule de
       grille étire son contenu à la hauteur de la scène, la mesure du script
       renverrait toujours la hauteur courante et la scène ne redescendrait
       jamais après un avis long.
       Les transitions ne sont PAS enveloppées dans une requête de média :
       l'interrupteur général `prefers-reduced-motion: reduce` plus bas les
       ramène déjà à .01ms. */
    .avis-carrousel { --inset: 26px; margin: 32px 0 44px; }
    .avis-scene { display: grid; align-items: start; overflow: hidden;
                  transition: height .4s ease; }
    .avis { grid-area: 1 / 1; margin: 0; padding: 4px 0 0 var(--inset); max-width: 780px;
            border-left: 2px solid var(--gold-clair);
            opacity: 0; visibility: hidden;
            transition: opacity .45s ease, visibility .45s; }
    .avis.on { opacity: 1; visibility: visible; }
    .avis .stars { display: block; font-size: 1rem; }
    .avis blockquote { margin: 9px 0 0; font-family: 'Cormorant Garamond', Georgia, serif;
                       font-size: 1.3rem; line-height: 1.5; font-style: italic; color: var(--ink); }
    .avis .who { margin: 15px 0 0; font-size: .86rem; color: var(--ink-soft); font-weight: 600; }
    .avis .who a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
    .avis .who a:hover { color: var(--gold); }
    /* Mention « traduit du … » : vide, donc masquée, sur la page écrite dans
       la langue de l'avis d'origine (voir les data-en/data-ru du HTML). */
    .avis-trad { margin: 5px 0 0; font-size: .79rem; color: var(--ink-soft); }
    .avis-trad:empty { display: none; }
    /* Les commandes ne s'affichent QUE si le script les a câblées : sans
       JavaScript, deux flèches et trois pastilles inertes ne feraient
       qu'inviter à des clics sans effet. L'avis, lui, reste lisible. */
    .avis-cmd { display: none; align-items: center; gap: 16px;
                margin-top: 20px; padding-left: var(--inset); }
    .avis-carrousel.actif .avis-cmd { display: flex; }
    /* ⛔ NE PAS remplacer par `.btn .btn-ghost`, malgré la ressemblance des
       couleurs : le bloc de restitution de l'or, en toute fin de style, peint
       TOUT `.btn` d'un aplat doré (il existe pour le bouton de bas de page des
       guides). Essayé le 28/08, les deux flèches sont sorties en pastilles
       dorées pleines. Elles gardent donc leur propre règle — mais avec le même
       fondu de .2s que les boutons, qui, lui, manquait. */
    .avis-fl { width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
               background: transparent; border: 1px solid var(--line); color: var(--ink);
               font-family: inherit; font-size: 1.15rem; line-height: 1;
               border-radius: var(--radius);
               transition: border-color .2s ease, color .2s ease; }
    .avis-fl:hover { border-color: var(--gold); color: var(--gold); }
    .avis-puces { display: flex; gap: 9px; }
    .avis-puce { width: 9px; height: 9px; padding: 0; cursor: pointer; border-radius: 50%;
                 background: transparent; border: 1px solid var(--gold-clair);
                 transition: background .2s ease, border-color .2s ease; }
    .avis-puce[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
    @media (max-width: 700px) {
      .avis-carrousel { --inset: 18px; }
      .avis blockquote { font-size: 1.12rem; }
    }

    /* ---------- Ressources ---------- */
    .res { display: block; padding: 22px 20px; }
    .res .tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
    .res h3 { font-size: 1.4rem; margin: 10px 0 8px; }
    .res p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
    /* GABARIT : lien « voir le produit », pour quand une ressource sera en vente
       (aujourd'hui les 6 cartes portent .res-soon et n'ont pas de lien). */
    .res .go { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--ink); font-size: .9rem; }
    .res .go::after { content: " →"; color: var(--gold); }
    .res.res-soon:hover { border-color: var(--line); cursor: default; }
    /* Etiquette, pas pastille arrondie. */
    .res .soon { display: inline-block; margin-top: 16px; font-size: .7rem; font-weight: 700;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

    /* ---------- Formulaire de contact ---------- */
    .contact-form { max-width: 640px; margin: 0 auto; display: grid; gap: 13px;
      background: var(--white); border: 1px solid var(--line);
      border-top: 3px solid var(--gold-clair); border-radius: 3px; padding: 26px; }
    @media (max-width: 560px) { .contact-form { padding: 22px 18px; } }
    .contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 620px) { .contact-form .row2 { grid-template-columns: 1fr; } }
    /* Nom · Email · Niveau sur UNE seule ligne : économise une rangée entière.
       Le niveau est un menu déroulant court, il n'a pas besoin de toute la largeur. */
    .contact-form .row3 { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 14px; }
    @media (max-width: 700px) { .contact-form .row3 { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .contact-form .row3 { grid-template-columns: 1fr; } }
    .contact-form label { display: grid; gap: 6px; font-size: .72rem; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase; color: var(--gold); align-content: start; }
    .contact-form input, .contact-form select, .contact-form textarea {
      font-family: inherit; font-size: .98rem; padding: 11px 13px; border: 1px solid var(--line);
      border-radius: 2px; background: var(--ivory); color: var(--ink); width: 100%;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
    .contact-form textarea { resize: vertical; }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: #9aa2b1; }
    .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
      outline: none; border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15); }
    .contact-form button { justify-self: stretch; margin-top: 4px; cursor: pointer; }

    /* Les treize icones au trait ont ete retirees de la page : maison, fleche,
       livre, boussole, ampoule, horloge, ecran... Ce jeu d'icones (Lucide,
       Feather et leurs clones) est le marqueur numero un du « site fabrique par
       une machine ». Rien ne les remplace : la typographie suffit. */

    /* ---------- Comment ca se passe ----------
       Les trois pastilles rondes 01/02/03 reliees par un fil dore forment un
       motif de gabarit. Trois colonnes separees par un filet vertical disent
       la meme chose, sans boite et sans effet. */
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
             border-top: 1px solid var(--filet); }
    .step { position: relative; padding: 24px 32px 8px; text-align: left;
            border-left: 1px solid var(--filet); }
    .step:first-child { border-left: none; padding-left: 4px; }
    @media (max-width: 780px) {
      .steps { grid-template-columns: 1fr; }
      .step, .step:first-child { border-left: none; padding: 20px 4px 8px; border-top: 1px solid var(--filet); }
      .steps .step:first-child { border-top: none; }
    }
    .step .num { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700;
                 color: var(--chiffre); line-height: .9; margin: 0 0 12px;
                 font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
                 transition: color .25s ease; }
    .step:hover .num { color: var(--gold); }
    .step h3 { font-size: 1.3rem; margin: 0 0 8px; }
    .step p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

    /* ---------- Encart confiance (section Avis) ---------- */
    /* Six cases blanches a coche doree : c'etait le bloc le plus « fabrique » de
       la page. Devenu une liste a deux colonnes, filets et tirets. */
    .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 46px; }
    @media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr; } }
    .trust-item { display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
                  border-top: 1px solid var(--filet); }
    /* Même tiret que dans la carte du hero, en pseudo-élément : six <span>
       vides en moins dans le HTML. */
    .trust-item::before { content: ""; flex: none; width: 15px; height: 2px;
                          background: var(--gold-clair); position: relative; top: -.3em; }
    .trust-item .txt { font-size: .93rem; color: var(--ink); font-weight: 500; }

    /* ---------- FAQ ---------- */
    /* Deux colonnes sur grand écran : la FAQ tient sur moitié moins de hauteur.
       align-items:start évite que les questions fermées s'étirent à la hauteur d'une question ouverte. */
    .faq { display: grid; grid-template-columns: 1fr 1fr;
           align-items: start; gap: 12px; }
    @media (max-width: 820px) { .faq { grid-template-columns: 1fr; } }
    .faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; transition: border-color .2s; }
    .faq details[open] { border-color: var(--gold); }
    .faq summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 14px 24px 14px 0; list-style: none;
                   position: relative; text-align: left; font-size: .95rem; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq p { margin: 0 0 16px; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; text-align: left; }

    /* ---------- Pied de page ---------- */
    footer { border-top: 1px solid var(--line); padding: 30px 0; }
    .foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-soft); font-size: .9rem; }
    .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
    .foot-links a { color: var(--ink-soft); }
    .foot-links a:hover { color: var(--gold); }

    /* Lien Trustpilot : un simple lien stylé, PAS le widget (payant) */
    .tp-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
    .tp-link svg { width: 15px; height: 15px; flex: none; }

    /* Bouton « déposer un avis sur Trustpilot » (section Avis) */
    .tp-cta-wrap { text-align: center; margin: 0 0 18px; }
    .tp-cta { display: inline-flex; align-items: center; gap: 9px; }
    .tp-cta svg { width: 17px; height: 17px; flex: none; }

    /* ---------- Accessibilité : contour clavier + lien d'évitement ---------- */
    a:focus-visible, button:focus-visible, summary:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
    }
    .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--ivory);
                 padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: .9rem; font-weight: 600; transition: top .2s; }
    .skip-link:focus { top: 0; }

    /* ---------- Menu mobile (burger) ---------- */
    .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px;
                  width: 42px; height: 42px; background: transparent; border: none; cursor: pointer; padding: 9px; margin-left: 2px; }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
                       transition: transform .28s ease, opacity .2s ease; }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Le menu déroulant doit rester sous l'en-tête quelle que soit la langue */
    .mobile-menu { position: absolute; top: 72px; left: 0; right: 0; z-index: 49;
                   background: rgba(251,250,247,.98); border-bottom: 1px solid var(--line);
                   max-height: 0; overflow: hidden; transition: max-height .32s ease; }
    .mobile-menu.open { max-height: 460px; box-shadow: 0 20px 40px -24px rgba(var(--ink-rgb),.3); }
    .mobile-menu .wrap { display: flex; flex-direction: column; padding-top: 6px; padding-bottom: 16px; }
    .mobile-menu a { padding: 15px 2px; font-size: 1.02rem; font-weight: 500; color: var(--ink-soft);
                     border-bottom: 1px solid var(--line); }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a.btn { margin-top: 14px; text-align: center; color: #14213d; border-bottom: none; }
    /* Bascule en menu burger a 1020 px (contre 880 avant).
       Le seuil est calé sur le RUSSE, dont les libellés sont les plus longs
       (« Профориентация », « Первый контакт ») : à 880 px le menu débordait
       et créait une barre de défilement horizontale sur toute la page. */
    @media (max-width: 1020px) {
      .nav-toggle { display: flex; }
      /* `:not(.lang-btn)` INDISPENSABLE : après génération, les boutons de langue
         sont des <a>. Sans cette exception ils seraient masqués avec les liens de
         navigation et un visiteur sur téléphone ne pourrait plus changer de langue
         (il ne resterait que l'icône de globe). */
      .nav-links a:not(.lang-btn) { display: none; }
    }
    @media (min-width: 1021px) { .mobile-menu { display: none; } }

    /* ---------- Téléphones : l'en-tête doit tenir sur une seule ligne ----------
       Marque + sélecteur de langue + burger réclamaient 419 px alors qu'un
       iPhone n'offre que 345 à 399 px de contenu → barre de défilement
       horizontale sur TOUTE la page, dans les 3 langues. Le menu déroulant a
       réglé l'essentiel (un seul code de langue affiché) ; on resserre quand
       même le bouton pour garder de la marge. */
    @media (max-width: 520px) {
      .wrap { padding: 0 16px; }
      .nav { gap: 8px; }
      .brand { font-size: 1.18rem; }
      .lang-toggle { padding: 6px 9px 6px 8px; font-size: .74rem; }
      .nav-toggle { width: 38px; height: 38px; padding: 7px; margin-left: 0; }
    }
    /* Très petits écrans (iPhone SE 1ʳᵉ génération, 320 px) */
    @media (max-width: 360px) {
      .wrap { padding: 0 12px; }
      .brand { font-size: 1.05rem; }
      .lang-globe { display: none; }
      .lang-toggle { padding: 5px 8px; font-size: .7rem; }
      .nav-toggle { width: 34px; height: 34px; padding: 6px; }
      /* Un mot russe long ne tient pas dans un titre à cette largeur :
         « подготовительные » rend 325 px en Cormorant 2rem pour 296 px
         disponibles, et c'est TOUTE la page qui se met à défiler de côté.
         Mesuré au navigateur sur /ru/ à 320 px. hyphens:auto coupe
         proprement parce que build.py pose bien <html lang="ru">. */
      h1, h2 { overflow-wrap: break-word; hyphens: auto; }
    }

    /* ---------- Bouton « retour en haut » ---------- */
    .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%;
              background: var(--ink); color: var(--gold); border: 1px solid var(--gold); font-size: 1.2rem; line-height: 1;
              cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
              transition: opacity .25s, transform .25s, visibility .25s; box-shadow: 0 10px 26px -12px rgba(var(--ink-rgb),.5); }
    .to-top.show { opacity: 1; visibility: visible; transform: none; }
    .to-top:hover { background: var(--gold); color: var(--ink); }

    /* ---------- Apparition au défilement (désactivée si mouvement réduit) ---------- */
    @media (prefers-reduced-motion: no-preference) {
      .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
      .reveal.in { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

    /* ---------- Signature hero : symboles mathématiques flottants (filigrane doré) ---------- */
    .hero { position: relative; }
    .hero .wrap { position: relative; z-index: 1; }
    .math-field { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
    .math-sym { position: absolute; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700;
                color: rgba(var(--gold-rgb),.055); line-height: 1; user-select: none; }
    @media (prefers-reduced-motion: no-preference) {
      .math-sym { animation: floatSym ease-in-out infinite; }
      @keyframes floatSym {
        0%   { transform: translateY(0) rotate(0deg); }
        50%  { transform: translateY(-26px) rotate(6deg); }
        100% { transform: translateY(0) rotate(0deg); }
      }
      /* Entrée en cascade des éléments du hero */
      .hero-copy > * { opacity: 0; animation: heroRise .85s cubic-bezier(.2,.7,.3,1) forwards; }
      .hero-copy > .eyebrow   { animation-delay: .10s; }
      .hero-copy > h1         { animation-delay: .24s; }
      .hero-copy > .lead      { animation-delay: .42s; }
      .hero-copy > .cta-row   { animation-delay: .58s; }
      .hero-copy > .hero-note { animation-delay: .72s; }
      .hero-card { opacity: 0; animation: heroRise .95s cubic-bezier(.2,.7,.3,1) .5s forwards; }
      @keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    }
    @media (max-width: 560px) { .math-sym.hide-mobile { display: none; } }
    /* Perf : on fige l'animation des symboles quand le hero n'est plus visible */
    .math-field.paused .math-sym { animation-play-state: paused; }

    /* ---------- Formulaires : etat d'envoi et appel a l'avis ---------- */
    .form-status { display: none; margin: 16px 0 0; text-align: center; font-weight: 600; }
    .review-intro { max-width: 620px; margin: 34px auto 18px; text-align: center; }
    .review-intro h3 { font-size: 1.5rem; margin-bottom: 6px; }
    .review-intro p { color: var(--ink-soft); font-size: .98rem; }

    /* ---------- Easter egg : clic sur le Σ → pluie de symboles + clin d'œil maths ---------- */
    .burst-sym { position: fixed; z-index: 200; pointer-events: none; font-family: 'Cormorant Garamond', Georgia, serif;
                 font-weight: 700; color: var(--gold); transform: translate(-50%, -50%); animation: burstFly 1.1s ease-out forwards; }
    @keyframes burstFly {
      0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
      15%  { opacity: 1; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(180deg); }
    }
  
    /* ── LISIBILITÉ DE L'OR ────────────────────────────────────────────
       --gold est désormais l'or FONCÉ : sur l'ivoire et sur le sable, l'or
       d'origine ne donnait que 2,96:1 et 2,69:1, sous le seuil de lisibilité
       (4,5 pour un petit texte, 3,0 même pour un grand titre).
       Les quelques endroits ci-dessous récupèrent l'or d'origine, parce que
       le foncer y serait au mieux inutile, au pire pire :
         · les bandes marine — l'or clair y donne déjà 5,33:1 ;
         · le bouton « retour en haut », posé sur du marine ;
         · les aplats dorés — leur texte marine est calculé pour l'or clair ;
         · la marque : un logotype n'est pas soumis au critère.
       ⚠️ `.btn` fait partie de la liste : sur les pages de guides, c'est
       LUI qui porte l'aplat doré du bouton de bas de page (l'accueil,
       lui, utilise `.btn-primary`). Oublié, ce bouton passait en or
       foncé avec son texte marine — 2,89:1, illisible.
       ⚠️ Ce bloc doit rester le DERNIER du style : il annule des règles
       écrites plus haut. */
    .hero-card, #parcours, .to-top, .brand { --gold: var(--gold-clair); }
    .btn, .btn-primary, .btn-nav,
    body.cal-injoignable #book-msg-btn,
    html[lang="ru"] #book-msg-btn {
      background: var(--gold-clair); border-color: var(--gold-clair);
    }