/* ═══════════════════════════════════════════════════════════════
   TRANSCRIS — Pages publiques
   Dépend de transcris.css (jetons + composants).
   En-tête, pied de page et sections identiques partout : la cohérence
   est structurelle, pas recopiée d'une page à l'autre.
   ═══════════════════════════════════════════════════════════════ */

/* Dépend de transcris.css. Aucune couleur ici : uniquement des jetons.
   Fond blanc, bleu #143F7A en structure, or #E0A82E pour l'argent. */
:root{
  --sp:clamp(72px,8vw,116px);   /* respiration entre deux sections */
  --lisible:68ch;               /* longueur de ligne confortable */
  --h-entete:68px;              /* hauteur de l'en-tête — sert au menu mobile */
}
@media(max-width:720px){ :root{ --h-entete:60px } }

body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1;min-width:0}

/* ── Lien d'évitement : premier élément atteint au clavier ── */
/* Le lien d'évitement s'affiche PAR-DESSUS la page : en mode nuit, du bleu
   sur du bleu serait invisible. Il suit donc la paire d'action, qui
   s'inverse avec le thème. */
.saut{position:absolute;left:-9999px;top:0;z-index:999;background:var(--action);
      color:var(--action-tx);padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600;
      border:1px solid var(--ligne)}
.saut:focus{left:0}

/* ── Conteneur ── */
.wrap{width:100%;max-width:1120px;margin:0 auto;
      padding-left:clamp(18px,4vw,32px);padding-right:clamp(18px,4vw,32px)}
.sec{padding-top:var(--sp);padding-bottom:var(--sp)}
.sec-soft{background:var(--pose)}

/* ── En-tête : bloc bleu ── */
.entete{position:sticky;top:0;z-index:100;background:var(--bleu);color:var(--blanc)}
/* En nuit la page est déjà bleue : l'en-tête se détache par un filet. */
[data-theme="dark"] .entete{border-bottom:1px solid var(--ligne)}
.entete .logo-name{color:var(--blanc)}
.entete .logo-mark{background:var(--sur-bleu-mark)}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:12px;
           height:var(--h-entete);min-width:0}
/* overflow:hidden est le filet, pas la solution — les requêtes média plus
   bas font le vrai travail. Mais « transcris » est en `white-space:nowrap`
   dans une boîte à `min-width:0` : s'il manque un seul pixel, le mot ne se
   replie pas, il SORT de sa boîte et passe sous le bouton voisin. Rogné,
   il resterait au pire tronqué. Un défaut borné plutôt qu'un chevauchement
   qui grandit avec la place manquante. */
.entete .logo{min-width:0;flex-shrink:1;overflow:hidden}
.nav-liens{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500;
           color:var(--sur-bleu);min-width:0}
.nav-liens a{padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-liens a:hover{color:var(--blanc)}
.nav-liens a[aria-current="page"]{color:var(--blanc);border-bottom-color:var(--or)}
/* Les actions ne se compriment jamais : ce sont les deux seuls boutons
   qui font entrer quelqu'un dans le produit. S'il manque de la place,
   c'est la navigation qui déménage dans le burger — pas « Commencer »
   qui rétrécit. */
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.entete .ico-btn{width:40px;height:40px;border:none;background:none;cursor:pointer;
                 color:var(--sur-bleu);display:flex;align-items:center;justify-content:center;
                 border-radius:var(--r)}
.entete .ico-btn:hover{background:var(--sur-bleu-pose);color:var(--blanc)}
.entete .ico-btn svg{width:18px;height:18px}
.entete .btn-neutre{background:transparent;color:var(--blanc);border-color:var(--sur-bleu-brd)}
.entete .btn-neutre:hover{background:var(--sur-bleu-pose);border-color:var(--blanc)}
.entete .btn-primaire{background:var(--blanc);color:var(--bleu)}
.entete .btn-primaire:hover{opacity:.9}
.burger{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;
        color:var(--blanc);align-items:center;justify-content:center;border-radius:var(--r)}
.burger:hover{background:var(--sur-bleu-pose)}
.burger svg{width:22px;height:22px}

/* Menu mobile : un vrai panneau, pas une fonction supprimée.
   « visibility » et pas seulement « transform » : un panneau simplement
   décalé hors cadre reste atteignable au clavier et lu par les lecteurs
   d'écran. Il doit vraiment disparaître quand il est fermé. */
.menu{position:fixed;inset:var(--h-entete) 0 0;background:var(--bleu);z-index:99;
      padding:22px clamp(18px,4vw,32px);
      padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
      overflow-y:auto;overflow-x:hidden;color:var(--blanc);
      transform:translateX(100%);visibility:hidden;
      transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s}
.menu.ouvert{transform:none;visibility:visible}
[data-theme="dark"] .menu{border-left:1px solid var(--ligne)}
.menu a{display:block;padding:16px 0;font-size:18px;font-weight:600;
        border-bottom:1px solid var(--sur-bleu-brd);color:var(--sur-bleu)}
.menu a:hover{color:var(--blanc)}
.menu a[aria-current="page"]{color:var(--blanc)}
.menu .btn{margin-top:22px;width:100%;background:var(--blanc);color:var(--bleu);border-color:transparent}
/* Réglage d'apparence dans le panneau, comme dans l'application. */
.menu-theme{display:flex;align-items:center;gap:12px;width:100%;
            margin-top:26px;padding:14px 0 0;min-height:44px;
            border:none;border-top:1px solid var(--sur-bleu-brd);
            background:none;cursor:pointer;font-family:inherit;
            font-size:15px;font-weight:600;color:var(--sur-bleu);text-align:left}
.menu-theme:hover{color:var(--blanc)}
.menu-theme #menuThemeIco{display:flex;width:18px;height:18px;flex-shrink:0}
.menu-theme svg{width:18px;height:18px;flex-shrink:0}
/* ── Geler la page derrière le rideau ─────────────────────────
   `overflow:hidden` sur le BODY ne suffisait pas, et la raison mérite
   d'être écrite.

   Le navigateur ne propage l'overflow du body à la fenêtre que si
   `html` est lui-même en `overflow:visible`. Or transcris.css pose
   `overflow-x:clip` sur `html` — dès lors html n'est plus « visible »,
   la propagation ne se fait plus, et le body se contente de rogner son
   propre contenu. Sa hauteur reste celle de la page entière : la
   fenêtre continue donc de défiler comme si de rien n'était.

   La règle doit porter sur `html`, dont l'overflow, lui, gouverne
   vraiment la fenêtre. On garde celle du body en second rideau.

   Et surtout PAS de `position:fixed` sur le body — la technique
   classique — car l'en-tête est en `position:sticky` : dans un body
   sorti du flux, il n'a plus de défilement auquel réagir et remonte
   hors de l'écran, emportant le bouton qui referme le menu. */
html.menu-ouvert{overflow:hidden}
html.menu-ouvert body{overflow:hidden}
/* Le geste ne se poursuit pas dans la page une fois le menu parcouru. */
.menu{overscroll-behavior:contain}

/* ── Hero ── */
.hero{position:relative;text-align:center;overflow:hidden;
      padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(56px,9vw,104px);
      background-image:radial-gradient(var(--ligne) 1.1px,transparent 1.1px);background-size:28px 28px}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
             background:radial-gradient(58% 56% at 50% 34%,transparent,var(--fond) 78%)}
.hero > *{position:relative;z-index:2}
/* L'étiquette porte l'or en FOND, avec du texte foncé : jamais de texte doré. */
.etiquette{display:inline-block;font-size:12px;font-weight:700;
           letter-spacing:1.4px;text-transform:uppercase;color:var(--sur-or);background:var(--or);
           padding:8px 16px;border-radius:100px;margin-bottom:24px;
           max-width:100%;text-align:center}
/* Une pastille arrondie n'a de forme que sur une seule ligne. Plutôt que
   de la laisser se replier, on retire la précision de lieu — le titre
   juste en dessous dit déjà de quoi il s'agit. */
@media(max-width:520px){
  .etiquette{font-size:11px;letter-spacing:1px;padding:7px 14px}
  .etiq-lieu{display:none}
}
/* -2px à 66 px = -3 %. Le même -2px à 30 px sur un téléphone = -6,7 %,
   et « L'audio » devenait « L'audio » collé. En em, le resserrement
   reste le même à toutes les tailles. */
.hero h1{font-size:clamp(30px,6vw,66px);letter-spacing:-.03em;max-width:17ch;margin:0 auto}
.hero .accroche{font-size:clamp(16px,1.7vw,19px);color:var(--gris);max-width:56ch;margin:22px auto 32px}
.hero .accroche b{color:var(--noir);font-weight:700}
.hero-boutons{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--gris);margin-top:20px}
/* En nuit le motif de points et le dégradé du hero disparaissent :
   ils reposaient sur un fond clair. */
[data-theme="dark"] .hero{background-image:none}
[data-theme="dark"] .hero::after{display:none}

/* ── Titres de section ── */
.titre-sec{text-align:center;max-width:var(--lisible);margin:0 auto clamp(38px,5vw,56px)}
.sur-titre{display:block;font-size:12px;font-weight:700;letter-spacing:2.4px;
           text-transform:uppercase;color:var(--titre);margin-bottom:12px;
           overflow-wrap:anywhere}
.titre-sec h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.032em}
.titre-sec p{color:var(--gris);font-size:17px;margin-top:14px}

/* ── Grilles ──────────────────────────────────────────────────
   Tout est en auto-fit. Le nombre de colonnes n'est plus décidé par
   des points de rupture mais par la place disponible : la grille se
   réorganise d'elle-même, à n'importe quelle largeur.

   L'idiome clé est minmax(min(100%, Xpx), 1fr).
   Sans le min(), une colonne de X px reste large de X px même quand
   le conteneur est plus étroit — et c'est exactement comme ça qu'on
   fabrique un défilement horizontal. Avec le min(), la colonne ne
   peut jamais dépasser son conteneur. Il n'y a plus rien à corriger
   écran par écran.                                                 */
.grille{display:grid;gap:18px}
.grille > *{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* ── Cartes ── */
.bloc{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-lg);
      padding:clamp(20px,3vw,28px);min-width:0;overflow-wrap:anywhere;
      transition:transform .15s,box-shadow .15s,border-color .15s}
.bloc:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--bleu-brd)}
[data-theme="dark"] .bloc:hover{border-color:var(--ligne-forte)}
.bloc-ico{width:48px;height:48px;border-radius:14px;background:var(--bleu-voile);
          display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.bloc-ico svg{width:23px;height:23px;stroke:var(--titre);fill:none;
              stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bloc h3{font-size:19px;margin-bottom:8px}
.bloc p{color:var(--gris);font-size:15px}

/* ── Étapes ── */
.etape{position:relative;padding-top:22px;border-top:2px solid var(--titre);min-width:0}
.etape-n{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;
         border-radius:11px;background:var(--action);color:var(--action-tx);
         font-family:var(--f-titre);font-weight:700;font-size:16px;margin-bottom:14px;flex-shrink:0}
.etape h3{font-size:21px;margin-bottom:8px}
.etape p{color:var(--gris);font-size:15px}

/* ── Question / réponse ── */
.qr{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-lg);
    padding:clamp(18px,3vw,26px);min-width:0;overflow-wrap:anywhere}
.qr h3{font-size:17px;margin-bottom:8px}
.qr p{color:var(--gris);font-size:15px}

/* ── Appel à l'action : bloc bleu plein ── */
.appel{text-align:center;background:var(--bleu);border-radius:var(--r-xl);
       padding:clamp(36px,6vw,72px) clamp(18px,4vw,26px);min-width:0}
.appel h2{font-size:clamp(24px,4vw,44px);color:var(--blanc);letter-spacing:-.032em}
.appel p{color:var(--sur-bleu);margin:14px auto 28px;max-width:52ch;font-size:16.5px}
[data-theme="dark"] .appel{border:1px solid var(--ligne)}

/* ── Pied de page ── */
.pied{border-top:1px solid var(--ligne);padding-top:clamp(40px,5vw,60px);padding-bottom:32px;
      font-size:14.5px;color:var(--gris)}
.pied-grille{display:grid;gap:clamp(24px,4vw,32px);margin-bottom:36px;
             grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.pied-grille > *{min-width:0}
/* La colonne de marque (logo + phrase) occupe deux places : c'est la
   seule qui porte du texte courant. Ciblée par position, pas par
   classe, pour ne rien avoir à ajouter dans chaque page. */
.pied-grille > :first-child{grid-column:span 2}
.pied h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
         color:var(--titre);margin-bottom:14px}
.pied ul{list-style:none}
.pied li{margin-bottom:9px}
.pied a:hover{color:var(--titre)}
.pied-bas{border-top:1px solid var(--ligne);padding-top:22px;display:flex;
          justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px;color:var(--gris)}

/* ── Texte long (pages légales) ── */
.article{max-width:var(--lisible);margin:0 auto}
.article h1{font-size:clamp(30px,4.4vw,42px);letter-spacing:-.033em}
.article .date{font-size:14px;color:var(--gris);margin-top:10px;
               padding-bottom:26px;border-bottom:1px solid var(--ligne);margin-bottom:30px}
.article h2{font-size:21px;margin:38px 0 12px}
.article p,.article li{color:var(--gris);font-size:15.5px;line-height:1.8}
.article p{margin-bottom:14px}
.article ul{padding-left:22px;margin-bottom:16px}
.article li{margin-bottom:8px}
.article strong{color:var(--noir)}
.article a{color:var(--titre);text-decoration:underline}
.encadre{background:var(--bleu-voile);border-left:3px solid var(--titre);
         border-radius:0 var(--r) var(--r) 0;padding:18px clamp(16px,3vw,22px);margin:24px 0;
         min-width:0;overflow-wrap:anywhere}
.encadre p{margin:0}
/* Champs légaux restant à renseigner. Discret — plus d'alerte rouge :
   c'est un repère pour vous, pas un message au visiteur. */
.article mark{background:var(--or-voile);color:var(--noir);padding:1px 6px;
              border-radius:4px;font-weight:600}

/* ── Responsive ──────────────────────────────────────────────
   Les grilles n'ont plus besoin de points de rupture : elles se
   replient toutes seules. Il ne reste ici que ce qui relève d'un
   vrai changement de comportement, pas d'un simple redimensionnement.
   ─────────────────────────────────────────────────────────── */
/* ── Bascule vers le burger ────────────────────────────────────
   Le calcul, à la police réelle : logo 161 + navigation 269 +
   actions 250 + deux écarts de 12 + les marges du conteneur (64)
   = 768 px. En dessous, l'en-tête complet NE RENTRE PAS.

   Le seuil était à 720. Il restait donc une bande de 721 à 768 px où
   tout s'affichait et se faisait écraser — c'est exactement là que
   « Commencer » se coupait. On bascule à 860 pour garder de la marge :
   une police qui se charge en retard, un zoom à 110 %, un libellé plus
   long dans une autre langue.

   Les liens ne disparaissent pas : ils déménagent dans le panneau du
   burger. La fonction reste atteignable, c'est la règle. */
@media(max-width:860px){
  .nav-liens{display:none}
  .nav-actions .btn-connexion{display:none}
  .burger{display:flex}
  /* Le thème descend dans le panneau. Il tenait 50 px avec son écart, à
     côté du seul bouton qui fait entrer dans le produit. */
  .nav-actions #btnTheme{display:none}
}

/* ── Le chevauchement du logo, en chiffres ─────────────────────
   À 360 px, l'en-tête demandait : logo 161 (symbole 34 + écart 9 +
   « transcris » en Pacifico 24 px ≈ 118) + écart 12 + actions 202
   (« Commencer » 98 + thème 40 + burger 44 + écarts) + marges 29
   = 404 px pour 360 disponibles.

   Comme `.nav-actions` ne se comprime plus — c'est voulu, les boutons
   d'entrée ne doivent jamais rétrécir — tout le déficit tombait sur le
   logo. Et « transcris » est en `white-space:nowrap` : il ne se replie
   pas, il DÉBORDE de sa boîte. D'où le bouton posé par-dessus le mot.

   LE MOT NE PART JAMAIS. « transcris » est l'identité de la marque :
   un symbole seul ne dit pas son nom. On le réduit, et on va chercher
   les pixels manquants partout ailleurs — quatre ici, six là. Aucune
   de ces économies ne se remarque ; l'absence du mot, si.

   Compte à 320 px après toutes les mesures :
     symbole 30 + écart 7 + mot 83  = 120
     écart                          =   8
     « Commencer » 88 + 4 + burger 40 = 132
     total 260 pour 292 disponibles.                              */
@media(max-width:480px){
  .entete .logo-name{font-size:20px}
}
@media(max-width:400px){
  .wrap{padding-left:14px;padding-right:14px}
  .entete .logo{gap:7px}
  .entete .logo-mark{width:30px;height:30px;border-radius:9px}
  .entete .logo-mark svg{width:17px;height:17px}
  .entete .logo-name{font-size:17px}
  .entete .btn-sm{padding-left:11px;padding-right:11px}
  .burger{width:40px;height:40px}
  .burger svg{width:20px;height:20px}
}

@media(max-width:720px){
  .hero-boutons .btn{width:100%}
  .pied-grille > :first-child{grid-column:1/-1}
  .sec{padding-top:clamp(48px,10vw,72px);padding-bottom:clamp(48px,10vw,72px)}
}
@media(max-width:420px){
  .entete .ico-btn{width:38px;height:38px}
  .nav-actions{gap:4px}
  .pied-bas{flex-direction:column;gap:6px}
}