/* Styles applicatifs extraits sans modification du rendu initial. */

  .rp-wrap{margin-top:14px}
  .rp-table{display:block;width:100%;max-width:520px;margin:0 auto}
  .rp-stage{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:10px 8px 6px}
  .rp-street-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}
  .rp-street{border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer}
  .rp-street.on{border-color:rgba(222,219,200,.42);color:#E1E0CC;background:rgba(222,219,200,.11)}
  .rp-street[disabled]{opacity:.35;cursor:default}
  .rp-controls{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
  .rp-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;min-height:40px}
  .rp-btn[disabled]{opacity:.4;cursor:default}
  .rp-btn.rp-main{border-color:rgba(222,219,200,.42);color:#E1E0CC;background:rgba(222,219,200,.09)}
  .rp-step{margin-top:12px;border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--surface-2)}
  .rp-step-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .rp-step-street{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim)}
  .rp-step-count{font-size:11px;color:var(--text-dim);opacity:.75}
  .rp-step-text{font-size:15px;font-weight:700;margin-top:6px}
  .rp-step-sub{font-size:13px;color:var(--text-dim);margin-top:4px;line-height:1.45}
  .rp-verdict{margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
  .rp-verdict-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .rp-hint{font-size:12px;color:var(--text-dim);opacity:.8;margin-top:10px;text-align:center}
  .rp-cards{display:flex;gap:5px;align-items:center}
  .dc-board{display:flex;gap:4px;align-items:center;margin-top:8px;flex-wrap:wrap}
  .dc-board .dc-board-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);margin-right:2px}
  .rp-replay-btn{display:block;margin-top:10px}

  /* ----------------------------------------------------------------
     FORMAT PC (2026-09-09, demande d'Arthur : "a la taille d'un ecran
     de PC"). La page d'accueil publique etait dessinee pour un ecran
     moyen : au-dela de 1200 px elle restait une colonne de 1240 px au
     milieu d'un ecran vide, et le hero laissait une bande morte sous
     lui. Ces regles n'existent qu'au-dessus de 1200 px : le mobile et
     la tablette gardent exactement la mise en page validee.
     Elles vivent ici, dans le code herite, plutot que dans la CSS
     compilee, pour tenir dans les fichiers legacy/ modifiables. */
  @media (min-width: 1200px) {
    .lp { --lp-max: 1440px; padding: 0 clamp(32px, 3.4vw, 68px); }
    /* le hero occupe l'ecran : plus de bande vide entre lui et la suite */
    .lp-hero { min-height: calc(100vh - 92px); align-content: center; gap: 72px; }
    .lp-h1 { font-size: clamp(3.4rem, 4.7vw, 5.7rem); }
    .lp-lede { font-size: 18px; max-width: 48ch; }
    .lp-hero-stage { min-height: 520px; }
    .lp-facts { margin-top: 52px; }
    /* six etapes en une seule colonne = un ruban etroit et tres haut */
    .lp-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; }
    .lp-steps li:nth-child(2) { border-top: none; padding-top: 0; }
    .lp-loop { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 72px; }
    .lp-honest ul { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; }
    .lp-honest li { border-top: 1px solid var(--lp-rule); }
    .lp-final { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; column-gap: 72px; }
    .lp-final-h { grid-row: span 3; margin-bottom: 0; align-self: center; }
    .lp-claim p { max-width: 30ch; }
  }
  @media (min-width: 1600px) {
    .lp { --lp-max: 1520px; }
    .lp-h1 { font-size: 5.9rem; }
  }
  /* La marque est desormais une image : elle doit se comporter comme
     l'ancien SVG partout ou elle etait posee (barre du haut, sidebar,
     medailles de rang, filigrane). */
  /* La CSS compilee ne dimensionnait que <svg class="bmark"> : l'image
     doit recevoir exactement les memes regles, sinon elle s'affiche a sa
     taille naturelle (256 px) et deborde de la barre laterale. */
  img.bmark { width: 100%; height: 100%; display: block; object-fit: contain; }
  .brand-dot { background-image: url('/logo-256.png'); }
  /* Filigrane de fond : le logo au chat est bien plus lumineux que l'ancien
     pictogramme a plat, il ressortait trop derriere le contenu. */
  #app:after { opacity: .022; }

  /* ================================================================
     DIRECTION "NOIR" (2026-09-09, validée par Arthur)
     Noir profond, crème chaude, Almarai en display, Instrument Serif
     en italique d'accent. Tout passe par les jetons de couleur déjà
     utilisés par la feuille compilée : on les redéfinit ici, donc
     l'application entière bascule sans toucher à une seule règle
     métier. Aucun scoring, aucune range, aucun texte de verdict n'est
     modifié par ce bloc : c'est de l'habillage, rien d'autre.
     ================================================================ */
  :root{
    --bg:#000000;
    --bg-2:#070707;
    --surface:#101010;
    --surface-2:#151515;
    --surface-3:#212121;
    --border:rgba(222,219,200,.13);
    --border-soft:rgba(222,219,200,.07);
    --text:#E1E0CC;
    --text-dim:#9CA3AF;
    /* #6B7280 a l'origine. Mesure du 2026-09-11 : ce gris tombait a
       3,33:1 sur --surface-3 et 4,05:1 sur le fond de page, sous le
       minimum de 4,5:1 exige pour du texte courant. Meme famille de
       teinte, simplement assez clair pour passer (5,2:1 au pire cas). */
    --text-faint:#8B93A3;
    --accent:#DEDBC8;
    --accent-hi:#E1E0CC;
    --accent-dim:#8A8878;
    --accent-soft:rgba(222,219,200,.13);
    --accent-ink:#0A0A0A;
    --gold-glow:rgba(222,219,200,.22);
    --radius:18px;
    --radius-sm:12px;
    --font:'Almarai',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;
    --font-display:'Almarai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-ui:var(--font);
    --n-serif:'Instrument Serif',Georgia,serif;
    --n-ease:cubic-bezier(.22,1,.36,1);
  }
  body{ background:#000; font-weight:300; }
  /* Almarai n'a pas d'axe optique : les réglages hérités de Fraunces
     n'ont plus de sens et alourdissaient le rendu. */
  h1,h2,h3,.h1,.lp-h1,.lp-h2{ font-variation-settings:normal; font-weight:800; letter-spacing:-.035em; }

  /* La marque : l'animation "métal liquide" doré devient un dégradé crème. */
  .brand{
    background:linear-gradient(110deg,#8A8878 0%,#DEDBC8 30%,#F2F1E4 46%,#DEDBC8 62%,#9A9788 100%) 0 0/300% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .brand-dot{ box-shadow:none; filter:drop-shadow(0 0 10px rgba(222,219,200,.28)); }

  /* Boutons : pastille crème, encre noire. Plus de dégradé doré. */
  .btn-primary{
    background:#DEDBC8 !important;
    color:#0A0A0A !important;
    border:none;
    border-radius:999px;
    font-weight:700;
    box-shadow:none;
    transition:opacity .5s var(--n-ease),transform .5s var(--n-ease);
  }
  .btn-primary:hover{ opacity:.88; }
  .btn-primary:active{ transform:scale(.98); }
  .btn-secondary{ border-radius:999px; border-color:rgba(222,219,200,.22); }
  .seg-btn,.tab,.badge,.pill{ border-radius:999px; }

  /* Cartes : le noir de la direction, jamais le gris bleuté d'avant. */
  .card,.decision-card,.stat-tile,.rp-step,.rp-stage{ background:#101010; border-color:rgba(222,219,200,.10); }
  .card:hover,.decision-card:hover{ background:#161616; }

  /* ---------------------------------------------------------------
     Format PC plein écran. L'app était dessinée comme une fenêtre de
     téléphone posée au milieu du bureau : carte flottante à coins
     arrondis, filets à gauche et à droite, marge de 28 px en haut et
     deux bandes mortes sur les côtés. Sur un 1920 il restait plus de
     400 px de vide de chaque côté.
     Ici l'écran entier appartient à l'app : la barre latérale est
     collée au bord gauche sur toute la hauteur, le contenu court
     jusqu'au bord droit, plus aucun cadre.
     --------------------------------------------------------------- */
  @media (min-width:900px){
    #app{
      max-width:none; width:100%;
      margin:0; border:none; border-radius:0;
      min-height:100vh;
      background:transparent;
      box-shadow:none;
      -webkit-backdrop-filter:none; backdrop-filter:none;
      overflow:visible;
    }
    /* La barre latérale tient toute la hauteur : plus de coin arrondi
       en bas à gauche, plus de hauteur calculée sur une carte. */
    .tabbar{
      height:100vh; max-height:100vh;
      border-radius:0;
      border-right:1px solid rgba(222,219,200,.09);
      padding:24px 14px 18px;
    }
    /* Le contenu respire au lieu de coller au filet. */
    .topbar{ padding:24px 56px 10px; }
    main{ padding:8px 56px 72px; }
    /* Une seule règle de largeur de lecture, au lieu des sept réglages
       par route de la feuille compilée qui se contredisaient. */
    main>*,
    #app[data-tabbar="1"] main,
    #app[data-route="dna"] main>*,
    #app[data-route="errorlab"] main>*,
    #app[data-route="ranges"] main>*,
    #app[data-route="handimportreport"] main>*,
    #app[data-route="handreview"] main>*,
    #app[data-route="profil"] main>*{
      max-width:1240px; margin-left:0; margin-right:0;
    }
    /* Écrans SANS barre latérale (onboarding, diagnostic, connexion,
       pages légales) : il n'y a rien à gauche pour ancrer le contenu, donc
       une colonne collée au bord gauche d'un 1920 est illisible. On centre
       la colonne entière plutôt que chaque bloc : les champs et les boutons
       sont en inline-block, une marge auto ne les centrerait pas et les
       ferait se poser côte à côte. */
    #app[data-tabbar="0"] main{ max-width:1352px; margin-left:auto; margin-right:auto; }
    #app[data-tabbar="0"] main>*{ max-width:none; margin-left:0; margin-right:0; }
    /* Un formulaire n'a aucune raison de faire 1 200 px de large : au-delà
       de ~620 px un champ de saisie devient une bande. (112 px = les
       marges internes gauche + droite de main à cette largeur.) */
    #app[data-tabbar="0"][data-route="onboarding"] main,
    #app[data-tabbar="0"][data-route="login"] main,
    #app[data-tabbar="0"][data-route="account-prompt"] main{ max-width:732px; padding-top:min(11vh,120px); }
    /* Le diagnostic garde ses deux colonnes, centrées ensemble. */
    #app[data-tabbar="0"][data-route="session"] main,
    #app[data-tabbar="0"][data-route="diag-result"] main,
    #app[data-tabbar="0"][data-route="session-summary"] main{ max-width:1212px; }
  }
  @media (min-width:1440px){
    #app[data-tabbar="1"]{ grid-template-columns:272px minmax(0,1fr); }
    .topbar{ padding:28px 72px 12px; }
    main{ padding:10px 72px 80px; }
    main>*,
    #app[data-tabbar="1"] main,
    #app[data-route="dna"] main>*,
    #app[data-route="errorlab"] main>*,
    #app[data-route="ranges"] main>*,
    #app[data-route="handimportreport"] main>*,
    #app[data-route="handreview"] main>*,
    #app[data-route="profil"] main>*{ max-width:1440px; }
    #app[data-tabbar="0"] main{ max-width:1440px; margin-left:auto; margin-right:auto; }
    #app[data-tabbar="0"] main>*{ max-width:none; margin-left:0; margin-right:0; }
    #app[data-tabbar="0"][data-route="onboarding"] main,
    #app[data-tabbar="0"][data-route="login"] main,
    #app[data-tabbar="0"][data-route="account-prompt"] main{ max-width:732px; }
    #app[data-tabbar="0"][data-route="session"] main,
    #app[data-tabbar="0"][data-route="diag-result"] main,
    #app[data-tabbar="0"][data-route="session-summary"] main{ max-width:1292px; }
    .sess-grid{ max-width:1360px; }
  }
  @media (min-width:1800px){
    .topbar{ padding:30px 88px 12px; }
    main{ padding:12px 88px 88px; }
    main>*,
    #app[data-tabbar="1"] main,
    #app[data-route="dna"] main>*,
    #app[data-route="errorlab"] main>*,
    #app[data-route="ranges"] main>*,
    #app[data-route="handimportreport"] main>*,
    #app[data-route="handreview"] main>*,
    #app[data-route="profil"] main>*{ max-width:1640px; }
    #app[data-tabbar="0"] main{ max-width:1640px; margin-left:auto; margin-right:auto; }
    #app[data-tabbar="0"] main>*{ max-width:none; margin-left:0; margin-right:0; }
    #app[data-tabbar="0"][data-route="onboarding"] main,
    #app[data-tabbar="0"][data-route="login"] main,
    #app[data-tabbar="0"][data-route="account-prompt"] main{ max-width:732px; }
    #app[data-tabbar="0"][data-route="session"] main,
    #app[data-tabbar="0"][data-route="diag-result"] main,
    #app[data-tabbar="0"][data-route="session-summary"] main{ max-width:1292px; }
  }
  /* La page d'accueil publique n'a ni barre latérale ni gouttière. */
  #app[data-route="landing"]{ width:100%; max-width:none; margin:0; padding:0; border:none; border-radius:0; }
  /* Le voile de grain débordait de 50 px : il était rogné par le cadre
     de l'app, qui n'existe plus. On le fixe au viewport. */
  .bg-grain{ position:fixed; inset:0; }
  /* Le fond de page portait deux grandes auréoles dorées, héritées de la
     version précédente. Tant que l'app était une carte flottante avec son
     propre fond, on ne les voyait qu'autour ; en plein écran elles teintent
     tout l'écran en brun. La direction Noir demande un noir franc, avec
     une seule lueur crème très basse pour éviter le fond plat. */
  .bg-layer{
    background:
      radial-gradient(1200px 700px at 14% -12%, rgba(222,219,200,.055) 0%, rgba(222,219,200,0) 62%),
      radial-gradient(900px 600px at 100% -6%, rgba(222,219,200,.03) 0%, rgba(222,219,200,0) 58%),
      #000;
  }
  .bg-vignette{
    background:
      radial-gradient(130% 95% at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.72) 100%);
  }
  body{ background-color:#000; background-image:none; }
  /* Le fond animé est un canvas three.js peint en doré (il vient du
     bundle compilé, qu'on ne modifie pas à la main). Sur l'ancienne mise
     en page il n'apparaissait qu'autour de la carte de l'app ; en plein
     écran il teinte tout l'écran en brun et sort de la direction Noir.
     On garde le mouvement, on lui retire sa couleur : désaturé et
     assombri, il redevient une nappe crème très sourde sur noir. */
  #gradientCanvas{
    filter:grayscale(1) brightness(.42) contrast(1.06) sepia(.10);
    opacity:.55;
  }
  html,body{ overflow-x:hidden; }

  /* ---------------- page d'accueil publique ---------------- */
  /* La page publique sort completement de la grille de l'application :
     pas de barre du haut, pas de largeur maximale, pas de marge. Sinon le
     hero n'occupe pas l'ecran et la marque s'affiche deux fois. */
  #app[data-route="landing"]{ max-width:none; padding:0; }
  #app[data-route="landing"] .topbar{ display:none; }
  #app[data-route="landing"] main{ max-width:none; margin:0; padding:0; overflow:visible; }
  #app[data-route="landing"] main>*{ max-width:none; }
  .n-lp{ max-width:none; padding:0; font-weight:300; }
  .n-serif{ font-family:var(--n-serif); font-style:italic; font-weight:400; color:#DEDBC8; display:block; letter-spacing:-.02em; }
  .n-serif.n-inline{ display:inline; font-size:1.08em; }
  .n-kicker{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(225,224,204,.55); font-weight:400; margin:0; }
  .n-body{ color:#9CA3AF; font-size:16px; line-height:1.8; font-weight:300; margin:0; }
  .n-body + .n-body{ margin-top:20px; }
  .n-h1{ font-weight:800; letter-spacing:-.04em; line-height:.94; margin:16px 0 0; font-size:clamp(2.2rem,5.2vw,4.6rem); }
  .n-h2{ font-weight:800; letter-spacing:-.035em; line-height:1.04; margin:18px 0 0; font-size:clamp(1.9rem,3.6vw,3.1rem); }
  .n-h2.n-big{ font-size:clamp(2rem,5vw,4rem); line-height:1; }

  /* ------------------------------------------------------------------
     REPRISE DES MESURES DES SECTIONS DU LANDING            (2026-09-11)
     Le conteneur du landing porte encore la classe `lp` : elle sert aux
     apparitions au defilement du bundle compile (`.lp [data-reveal]`).
     Mais ce meme bundle contient, ecrit pour l'ANCIEN landing :
         .lp section{ border-top:1px solid ...;
                      padding:max(56px,min(6.4vw,104px)) 0 }
     Ce selecteur vaut (0,1,1) et l'emportait donc sur `.n-hero` (0,1,0).
     Consequences mesurees a 1900 px : le hero recevait 104 px de vide en
     haut et en bas, perdait sa gouttiere laterale — donc son cadre
     arrondi devenait plein ecran et la barre de navigation semblait
     flotter au milieu de l'image — et heritait d'un filet horizontal.
     Les deux autres sections perdaient de la meme facon leurs 24 px de
     cote et leur rythme vertical.
     On neutralise la regle heritee, puis on repose chaque mesure avec
     une specificite suffisante (0,2,0). Les valeurs sont celles ecrites
     plus bas ; elles sont dupliquees ici et nulle part ailleurs.
     ------------------------------------------------------------------ */
  .n-lp section{ border-top:none; }
  .n-lp .n-hero{ padding:16px; }
  .n-lp .n-about{ padding:80px 16px; }
  .n-lp .n-features{ padding:80px 16px 120px; }
  .n-lp .n-features.n-last{ padding-top:0; }
  @media(min-width:768px){
    .n-lp .n-hero{ padding:24px; }
    .n-lp .n-about{ padding:120px 24px; }
    .n-lp .n-features{ padding:120px 24px 160px; }
    .n-lp .n-features.n-last{ padding-top:0; }
  }

  .n-hero{ height:100svh; min-height:620px; padding:16px; }
  @media(min-width:768px){ .n-hero{ padding:24px; } }
  .n-frame{ position:relative; height:100%; width:100%; overflow:hidden; border-radius:16px; background:#050505; }
  @media(min-width:768px){ .n-frame{ border-radius:2rem; } }
  .n-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
  .n-plate{ position:absolute; inset:-12%; pointer-events:none; z-index:0; }
  .n-plate i{ position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55; }
  .n-p1{ width:62%; height:70%; left:-6%; top:4%; background:radial-gradient(closest-side,#6B5A3A,transparent 72%); animation:n-d1 34s var(--n-ease) infinite alternate; }
  .n-p2{ width:54%; height:58%; right:-4%; top:22%; background:radial-gradient(closest-side,#3A4450,transparent 74%); animation:n-d2 42s var(--n-ease) infinite alternate; }
  .n-p3{ width:70%; height:46%; left:16%; bottom:-8%; background:radial-gradient(closest-side,#2A2620,transparent 70%); animation:n-d3 50s var(--n-ease) infinite alternate; }
  @keyframes n-d1{ to{ transform:translate3d(6%,-4%,0) scale(1.14); } }
  @keyframes n-d2{ to{ transform:translate3d(-7%,5%,0) scale(1.1); } }
  @keyframes n-d3{ to{ transform:translate3d(4%,-3%,0) scale(1.18); } }
  .n-grain{ position:absolute; inset:0; z-index:2; opacity:.7; mix-blend-mode:overlay; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .n-veil{ position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(to bottom,rgba(0,0,0,.30),transparent 45%,rgba(0,0,0,.62)); }
  .n-vignette{ position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 220px 60px rgba(0,0,0,.75); }


  /* ------------------------------------------------------------------
     Scene "la table qui implose".
     Neuf rendus fournis par Arthur, joues au defilement : chaque cran de
     molette avance dans la sequence, avec fondu entre deux images pour
     que le mouvement soit continu et non saccade. A la fin, la grille du
     Poker DNA se forme par dessus les debris.
     Aucun script externe : neuf <img> empilees et des opacites.
     ------------------------------------------------------------------ */
  .n3{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
  .n3-seq{ position:absolute; inset:0; will-change:opacity; }
  .n3-seq img{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 44%;
    opacity:0; will-change:opacity; }
  @media(max-width:899px){ .n3-seq img{ object-position:50% 47%; } }

  /* Le logo qui se pose sur la carte finale. Pose par dessus le rendu et
     non dessine dedans : c'est le seul moyen d'avoir la vraie marque, nette,
     au lieu de l'a-peu-pres qu'un generateur d'image produirait. */
  .n3-logo{ position:absolute; opacity:0; pointer-events:none;
    transform:translate(-50%,-50%); transform-origin:50% 50%;
    object-fit:contain; will-change:opacity,transform;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.75)); }


  /* Le cadre reste colle pendant que la scene se dissout : le defilement
     nourrit l'animation au lieu de faire fuir le visuel. Sur mobile on ne
     detourne rien, la scene se joue seule (voir N3). */
  /* 2026-09-13 : les deux titres alternent par fondu. En absolu, le second
     ("Une seule chose a corriger") etait decale de 32 px et debordait sur le
     paragraphe en dessous sur telephone. Les deux occupent la meme cellule
     de grille : le bloc prend la hauteur du plus haut, rien ne chevauche. */
  .n-h1-stack{ display:grid; }
  .n-h1-stack > .n-h1{ grid-area:1 / 1; margin:16px 0 0; }
  .n-h1-b{ opacity:0; }
  @media(min-width:900px){
    .n-hero{ height:220vh; min-height:0; }
    .n-hero .n-frame{ position:sticky; top:24px; height:calc(100svh - 48px); }
  }
  /* Mouvement reduit : on ne coupe PAS le defilement de la sequence.
     Rien ne bouge tout seul — l'image ne change que si l'utilisateur
     tourne la molette, et s'arrete des qu'il s'arrete. Ce qui est coupe,
     c'est la lecture automatique du telephone, la seule chose qui parte
     d'elle-meme. Beaucoup de PC Windows ont ce reglage active sans que
     leur proprietaire le sache : leur couper le hero entier serait une
     punition disproportionnee. */

  .n-nav{ position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:20; background:#000;
    border-bottom-left-radius:16px; border-bottom-right-radius:16px; padding:8px 16px; display:flex; align-items:center; gap:12px; }
  @media(min-width:640px){ .n-nav{ gap:24px; } }
  @media(min-width:768px){ .n-nav{ padding:10px 32px; border-bottom-left-radius:24px; border-bottom-right-radius:24px; gap:48px; } }
  @media(min-width:1024px){ .n-nav{ gap:56px; } }
  .n-nav a{ font-size:10px; white-space:nowrap; cursor:pointer; color:rgba(225,224,204,.8); text-decoration:none; transition:color .4s var(--n-ease); }
  @media(min-width:640px){ .n-nav a{ font-size:12px; } }
  @media(min-width:768px){ .n-nav a{ font-size:14px; } }
  .n-nav a:hover{ color:#E1E0CC; }

  /* ------------------------------------------------------------------
     BARRE DU HERO EN PETITE LARGEUR                      (2026-09-11)
     Mesure a 390 px : la barre faisait 516 px de large et debordait des
     deux cotes (x = -63), ses premiers liens etaient coupes, et entre
     560 et 720 px elle passait sous la marque. Les selecteurs de langue
     et de theme, ajoutes en septembre, ont fait franchir le seuil.
     Sur telephone on garde ce qui n'existe qu'ici — se connecter, la
     langue, le theme — et on retire les quatre ancres de section : elles
     mènent a des blocs que le visiteur atteint en faisant defiler, et
     le pied de page les reprend. La barre se cale a droite, sous la
     marque restee a gauche, et ne peut plus deborder.
     ------------------------------------------------------------------ */
  @media(max-width:899px){
    .n-nav{ left:auto; right:12px; transform:none;
      max-width:calc(100% - 24px); padding:8px 12px; gap:10px;
      border-bottom-left-radius:16px; border-bottom-right-radius:16px; }
    .n-nav a[href^="#"]{ display:none; }
  }
  /* Sous 480 px, meme reduite, la barre reclame 320 px en francais (le
     lien « Se connecter » etant bien plus long que « Log in ») et vient
     buter contre la marque, qui s'arrete a 125 px du bord. On ne retire
     ni le lien — le pied de page du
     landing n'offre aucune autre porte d'entree, un inscrit se
     retrouverait sans moyen de se connecter depuis son telephone — ni la
     marque. On les met sur deux lignes : la barre prend toute la largeur
     du cadre et se cale a droite, la marque descend juste en dessous.
     Aucune fonction perdue, aucun chevauchement. */
  /* Entre 900 et 1219 px, la barre reste centree et complete, mais elle
     mesure alors ~944 px : son premier lien passait SOUS la marque, donc
     invisible et incliquable, sur toute la gamme des portables 1024 a
     1152 px. Mesure : la marque s'arrete a 149 px, le premier lien
     commençait a 44 px. On decale la barre a droite sur cette plage, en
     resserrant les ecarts, et on ne la recentre qu'une fois la largeur
     suffisante pour que les deux cohabitent. */
  @media(min-width:900px) and (max-width:1299px){
    .n-nav{ left:auto; right:24px; transform:none; gap:20px; padding:10px 20px; }
  }
  /* Sous 1024 px la barre resserree mesure encore 815 px : il faut lui
     retirer encore de l'ecart et un cran de corps pour qu'elle tienne a
     droite de la marque. */
  @media(min-width:900px) and (max-width:1023px){
    .n-nav{ gap:12px; padding:10px 16px; }
    .n-nav a{ font-size:12px; }
  }

  @media(max-width:479px){
    .n-nav{ left:0; right:0; transform:none; max-width:none;
      justify-content:flex-end; padding:8px 12px; gap:8px;
      border-radius:0 0 16px 16px; }
    /* la descente de la marque est posee en fin de feuille : la regle
       d'origine `.n-frame > .n-mark` est ecrite plus bas et gagnerait ici. */
  }

  /* La marque n'est posee en absolu que dans le cadre du hero. Celle du pied
     de page reprend le flux, sinon elle remonte en haut de la page. */
  .n-mark{ display:flex; align-items:center; gap:10px; }
  .n-frame > .n-mark{ position:absolute; top:24px; left:20px; z-index:20; }
  @media(min-width:768px){ .n-frame > .n-mark{ top:32px; left:36px; } }
  .n-mark b{ font-weight:800; font-size:17px; letter-spacing:-.01em; }
  .n-mark.sm b{ font-size:14px; }
  .n-mark.sm{ gap:8px; }
  .n-logo{ width:30px; height:30px; }
  .n-logo-sm{ width:22px; height:22px; }

  .n-hero-body{ position:absolute; inset:auto 0 0 0; z-index:10; padding:0 22px 34px; }
  @media(min-width:768px){ .n-hero-body{ padding:0 44px 52px; } }
  .n-hero-grid{ display:grid; gap:26px; align-items:end; }
  @media(min-width:900px){ .n-hero-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); } }
  .n-hero-side p{ color:#9CA3AF; font-size:15px; line-height:1.7; font-weight:300; max-width:42ch; margin:0; }
  .n-cta-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; }
  .n-btn{ display:inline-flex; align-items:center; gap:12px; background:#DEDBC8; color:#0A0A0A; font-weight:700;
    font-size:14px; padding:14px 24px; border-radius:999px; border:none; cursor:pointer; width:auto;
    transition:opacity .5s var(--n-ease),transform .5s var(--n-ease); }
  .n-btn:hover{ opacity:.88; }
  .n-btn:active{ transform:scale(.98); }
  .n-arrow{ width:16px; height:16px; }
  .n-note{ color:#8B93A3; font-size:12px; line-height:1.5; }

  .n-about{ padding:80px 16px; }
  @media(min-width:768px){ .n-about{ padding:120px 24px; } }
  .n-about-card{ max-width:1240px; margin:0 auto; background:#101010; border-radius:20px; padding:44px 26px; }
  @media(min-width:768px){ .n-about-card{ border-radius:2rem; padding:88px 72px; } }
  .n-about-grid{ display:grid; gap:36px; }
  @media(min-width:900px){ .n-about-grid{ grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:64px; } }
  .n-figures{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:44px 0 0; padding-top:26px; border-top:1px solid rgba(222,219,200,.14); }
  .n-figures div{ padding-right:16px; border-right:1px solid rgba(222,219,200,.14); }
  .n-figures div:last-child{ border-right:none; padding-right:0; }
  .n-figures dt{ font-weight:800; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .n-figures dd{ margin:8px 0 0; color:#8B93A3; font-size:12px; line-height:1.5; }

  .n-features{ position:relative; padding:80px 16px 120px; overflow:hidden; }
  @media(min-width:768px){ .n-features{ padding:120px 24px 160px; } }
  .n-features.n-last{ padding-top:0; }
  .n-bgnoise{ position:absolute; inset:0; opacity:.05; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n2)'/%3E%3C/svg%3E"); }
  .n-inner{ position:relative; max-width:1240px; margin:0 auto; }
  .n-head{ max-width:60ch; margin-bottom:48px; }
  .n-cards{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media(min-width:700px){ .n-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media(min-width:1100px){ .n-cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
  .n-card{ background:#212121; border-radius:18px; padding:28px 26px 32px; display:flex; flex-direction:column; gap:14px;
    transition:transform .6s var(--n-ease),background .6s var(--n-ease); }
  .n-card:hover{ transform:translateY(-6px); background:#262626; }
  .n-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(222,219,200,.08); color:#DEDBC8; }
  .n-icon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .n-card h3{ font-weight:700; font-size:17px; letter-spacing:-.02em; margin:4px 0 0; }
  .n-card p{ color:#9CA3AF; font-size:14px; line-height:1.7; font-weight:300; margin:0; }
  .n-card small{ color:#8B93A3; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:auto; padding-top:10px; }

  .n-closing{ max-width:1240px; margin:0 auto; text-align:center; padding-bottom:40px; }
  .n-closing .n-body{ max-width:52ch; margin:22px auto 0; }
  .n-closing .n-btn{ margin-top:30px; }
  .n-fine{ color:#8B93A3; font-size:12.5px; margin-top:24px; }
  .n-foot{ border-top:1px solid rgba(222,219,200,.10); padding:26px 16px 44px; display:flex; gap:18px; flex-wrap:wrap;
    justify-content:space-between; align-items:center; max-width:1240px; margin:0 auto; color:#8B93A3; font-size:12.5px; }
  .n-foot nav{ display:flex; gap:20px; flex-wrap:wrap; }
  .n-foot nav a{ cursor:pointer; transition:color .4s var(--n-ease); }
  .n-foot nav a:hover{ color:#E1E0CC; }

  /* Derniers dorés écrits en dur dans la feuille compilée : ils ne passent
     pas par les jetons, il faut les reprendre un par un. */
  /* La forme courte background remet background-clip a border-box : sans
     ces deux lignes le mot devient un rectangle plein. */
  .sb-brand{ background:linear-gradient(110deg,#8A8878 0%,#DEDBC8 30%,#F2F1E4 46%,#DEDBC8 62%,#9A9788 100%) 0 0/300% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
  .brand,.boot-logo,.sb-brand{ font-variation-settings:normal; font-weight:800; }
  .sb-head:before{ background:linear-gradient(90deg,transparent,rgba(222,219,200,.55),transparent); }
  .sb-head:after{ background:radial-gradient(circle,rgba(222,219,200,.16),transparent 70%); }
  .sb-coach{ background:#141414; border-color:rgba(222,219,200,.16); }
  .sb-coach small{ color:#DEDBC8; }
  .sb-coach-cta{ color:#E1E0CC; }
  .sb-rank:hover{ border-color:rgba(222,219,200,.35); }
  .medal-or{ --m:linear-gradient(160deg,#F2F1E4,#DEDBC8 50%,#8A8878); }

  /* L'onglet actif de la barre latérale restait un bouton doré : dans la
     direction Noir c'est la seule tache de couleur chaude de l'écran et
     elle attire l'oeil plus que le contenu. Crème sourd, pas doré. */
  .tab.active{
    background:linear-gradient(180deg,rgba(222,219,200,.12),rgba(222,219,200,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
    color:#E1E0CC;
  }
  .tab.active .icon{
    color:#0A0A0A;
    background:linear-gradient(160deg,#F2F1E4,#DEDBC8 55%,#A9A796);
    box-shadow:inset 0 1px rgba(255,255,255,.55), 0 8px 18px -10px rgba(222,219,200,.55);
    filter:none;
  }
  .tab .icon{
    background:linear-gradient(160deg,#1E1E1E,#141414);
    box-shadow:inset 0 1px rgba(255,255,255,.07), inset 0 -2px rgba(0,0,0,.55);
    color:#9CA3AF;
  }
  .tab.active:after{ background:#DEDBC8; }
  /* Les pastilles d'icônes (accès rapide, cartes de mode) étaient dorées
     sur un dégradé bleu-gris : deux couleurs qui n'existent plus dans la
     direction. Graphite neutre, trait crème. */
  .mode-icon, .quick-tile .qt-icon{
    color:#DEDBC8;
    background:linear-gradient(160deg,#1E1E1E,#141414)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.07), inset 0 -2px rgba(0,0,0,.55);
  }
  .quick-tile:hover .qt-icon, .card:hover .mode-icon{ color:#F2F1E4; }
  /* Le liseré de gauche des cartes de mode : une seule teinte crème, sauf
     le leak qui reste rouge parce qu'il porte une information. */
  .mc-basics,.mc-explore,.mc-review,.mc-import,.mc-ranges,.mc-history,
  .mc-noted,.mc-bounty,.mc-postflop{ border-left-color:rgba(222,219,200,.30); }
  .mc-leak{ border-left-color:rgba(229,88,107,.70); }
  .mc-leak .mode-icon{ color:#E5586B; }
  .seg-btn.active{ background:rgba(222,219,200,.13); border-color:rgba(222,219,200,.30); color:#E1E0CC; }
  .stat-tile.on{ border-color:rgba(222,219,200,.34); background:rgba(222,219,200,.05); }
  @media (min-width:900px){
    .quick-grid{ max-width:none; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
    .quick-tile{ padding:18px 10px; }
  }

  /* ---------------------------------------------------------------
     Statuts : une seule famille de puces au lieu des pastilles pleines.
     Le fond coloré plein écrasait le texte et faisait « appli mobile ».
     Ici : fond neutre, filet fin, barre de couleur à gauche, libellé en
     petites capitales. La couleur n'est plus le seul porteur du sens,
     la barre et les crans le disent aussi (lisible en daltonisme).
     --------------------------------------------------------------- */
  .badge{
    --c:#DEDBC8;
    position:relative;
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 10px 5px 0; overflow:hidden;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.028);
    color:var(--c);
    font-family:var(--font);
    font-size:10.5px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase;
    line-height:1.35; white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  }
  .badge:before{
    content:''; align-self:stretch; flex:none;
    width:3px; margin-right:6px;
    background:var(--c);
  }
  .badge-accent{ --c:#DEDBC8; }
  .badge-good  { --c:#33C29A; }
  .badge-warn  { --c:#E0A93E; }
  .badge-danger{ --c:#E5586B; }
  .badge-info  { --c:#7FA9E8; }
  .badge-dim   { --c:#7C8088; background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.07); }
  .badge-good,.badge-warn,.badge-danger,.badge-info{ border-color:rgba(255,255,255,.10); }

  /* Niveau de priorité : trois crans montants, remplis jusqu'au niveau.
     Le joueur voit « à quel point c'est grave » sans lire le libellé. */
  .badge .lv{ display:inline-flex; align-items:flex-end; gap:2px; height:9px; flex:none; }
  .badge .lv s{ width:3px; border-radius:1px; background:var(--c); opacity:.24; text-decoration:none; }
  .badge .lv s:nth-child(1){ height:4px; }
  .badge .lv s:nth-child(2){ height:6.5px; }
  .badge .lv s:nth-child(3){ height:9px; }
  .badge[data-lv="1"] .lv s:nth-child(-n+1),
  .badge[data-lv="2"] .lv s:nth-child(-n+2),
  .badge[data-lv="3"] .lv s:nth-child(-n+3){ opacity:1; }

  /* La puce « à corriger en premier » est la seule qui doit accrocher. */
  .badge.badge-first{ background:rgba(229,88,107,.10); border-color:rgba(229,88,107,.34); }
  .badge.badge-first:before{ box-shadow:0 0 12px rgba(229,88,107,.55); }

  /* Chips de gravité : même langage, hauteur et rayon alignés. */
  .sev{ border-radius:7px; padding:5px 10px 5px 0; gap:7px; }
  .sev .sev-bar{ width:3px; margin-right:6px; }
  .sev b{ letter-spacing:.11em; font-size:10.5px; }
  .sev-major{ --sev-bg:rgba(229,88,107,.10); --sev-line:rgba(229,88,107,.34); }
  .sev-minor{ --sev-bg:rgba(224,169,62,.09);  --sev-line:rgba(224,169,62,.28); }
  .sev-ok   { --sev-bg:rgba(51,194,154,.09);  --sev-line:rgba(51,194,154,.28); }
  .sev .sev-ticks{ align-items:flex-end; height:9px; gap:2px; }
  .sev .sev-ticks s{ width:3px; border-radius:1px; height:4px; opacity:.24; }
  .sev .sev-ticks s:last-child{ height:9px; }
  .sev-major .sev-ticks s{ opacity:1; }
  .sev-minor .sev-ticks s:first-child{ opacity:1; }
  .sev-minor .sev-ticks s:last-child{ opacity:.24; }
  .sev-ok .sev-ticks{ display:none; }

  /* La ligne de titre d'un leak : le libellé respire, la puce ne colle plus. */
  .leak-item .top{ gap:14px; margin-bottom:8px; align-items:center; }
  .leak-item .concept{ font-size:15px; letter-spacing:-.01em; }

  /* Les cellules du DNA reprenaient les classes badge-* : elles gardent
     leur fond plein, sinon la grille perd sa lecture d'un coup d'oeil. */
  .dna-cell.badge-good  { background:rgba(51,194,154,.14);  color:#33C29A; border:1px solid rgba(51,194,154,.24); }
  .dna-cell.badge-warn  { background:rgba(224,169,62,.14);  color:#E0A93E; border:1px solid rgba(224,169,62,.24); }
  .dna-cell.badge-danger{ background:rgba(229,88,107,.14);  color:#E5586B; border:1px solid rgba(229,88,107,.24); }
  .dna-cell.badge-dim   { background:rgba(255,255,255,.03); color:#8B93A3; border:1px solid rgba(255,255,255,.07); }
  .dna-cell:before{ display:none; }

  /* ----- Mes mains : historique relisable à tout moment ----- */
  .rv-hand{
    display:inline-flex; align-items:center;
    padding:3px 8px; border-radius:6px;
    background:rgba(222,219,200,.09);
    border:1px solid rgba(222,219,200,.16);
    color:#E1E0CC;
    font-family:var(--font-display); font-weight:700; font-size:13px;
    letter-spacing:.02em; font-variant-numeric:tabular-nums;
  }
  .rv-when{
    margin-top:8px; color:#8B93A3;
    font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  }
  .rv-detail{
    margin-top:14px; padding-top:14px;
    border-top:1px solid rgba(222,219,200,.10);
  }
  .rv-line{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:7px 0; border-bottom:1px solid rgba(222,219,200,.055);
  }
  .rv-line:last-of-type{ border-bottom:none; }
  .rv-line span{ color:#9CA3AF; font-size:12.5px; }
  .rv-line b{ font-size:13.5px; color:#E1E0CC; }

  /* Retour arrière dans une question à deux étapes. Discret : c'est une
     issue de secours, pas l'action principale de l'écran. */
  .q-back-row{ margin-bottom:10px; }
  .q-back{ padding:6px 0; color:#9CA3AF; font-size:12.5px; background:none; border:none; }
  .q-back:hover{ color:#E1E0CC; }

  /* ---------------------------------------------------------------
     Connexion / création de compte (retour Arthur, 2026-09-09).
     Ces écrans sont atteints depuis le Profil, donc AVEC la barre
     latérale. La règle de largeur des formulaires les bloquait à
     732 px collés au panneau : sur un 1920 la carte se retrouvait à
     gauche avec 1 000 px de vide à droite. Ici la colonne prend toute
     la place disponible à droite de la barre, et la carte se centre
     dedans. Elle reçoit aussi de vraies marges internes : le texte
     touchait le bord, ce qui suffit à faire « pas fini ».
     --------------------------------------------------------------- */
  @media (min-width:900px){
    #app[data-tabbar="1"][data-route="login"] main{
      max-width:none; padding-top:min(9vh,96px);
    }
    #app[data-route="login"] .login-wrap{ max-width:460px; margin-left:auto; margin-right:auto; }
  }
  .login-wrap{
    padding:30px 30px 26px;
    border-radius:20px;
    border:1px solid rgba(222,219,200,.10);
    background:#101010;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -40px rgba(0,0,0,.9);
  }
  .login-wrap h1{ font-size:24px; margin:0 0 8px; }
  .login-wrap .sub{ margin-bottom:20px; }
  .login-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:#9CA3AF; margin:0 0 7px; }
  .login-wrap input{ margin-bottom:16px; }
  /* Le "Retour" flottait sous la carte, détaché : il rentre dedans,
     séparé par un filet, comme une sortie et non comme une action. */
  .login-wrap .btn-ghost{
    margin-top:20px !important; padding-top:18px;
    border-top:1px solid rgba(222,219,200,.09);
    border-radius:0; color:#9CA3AF; font-size:13px; width:100%;
  }
  .login-wrap .btn-ghost:hover{ color:#E1E0CC; background:none; }

  /* ---------------------------------------------------------------
     Bienvenue PRO. Courbe unique (var(--n-ease) reprise de la page
     d'accueil) et une seule direction de mouvement : tout monte de
     quelques pixels en se révélant. Rien ne rebondit, rien ne tourne,
     rien ne scintille : on est chez un joueur qui vient de payer,
     pas dans un jeu mobile.
     --------------------------------------------------------------- */
  .pw{ max-width:600px; margin:0 auto; padding:min(7vh,64px) 0 40px; text-align:center; }

  .pw-seal{ position:relative; width:132px; height:132px; margin:0 auto 30px; }
  .pw-crest{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .pw-hex{ fill:none; stroke:#DEDBC8; stroke-width:1.6; stroke-linejoin:round;
    stroke-dasharray:330; stroke-dashoffset:330; }
  .pw-hex-in{ stroke:rgba(222,219,200,.30); stroke-dasharray:270; stroke-dashoffset:270; }
  .pw-bloom{ position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle, rgba(222,219,200,.30), rgba(222,219,200,0) 62%);
    opacity:0; transform:scale(.4); }
  .pw-mark{ position:absolute; inset:26px; display:grid; place-items:center; opacity:0; transform:scale(.88); }
  .pw-mark .bmark{ width:100%; height:100%; object-fit:contain; }

  .pw-kicker{ overflow:hidden; margin-bottom:14px; }
  .pw-kicker span{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:#DEDBC8; transform:translateY(110%); }
  .pw-title{ overflow:hidden; margin:0 0 12px; font-size:clamp(28px,4.4vw,40px); letter-spacing:-.02em; }
  .pw-title span{ display:inline-block; transform:translateY(110%); }
  .pw-sub{ overflow:hidden; margin:0 0 34px; color:#9CA3AF; font-size:15px; line-height:1.6; }
  .pw-sub span{ display:inline-block; transform:translateY(110%); }

  .pw-list{ list-style:none; margin:0 0 34px; padding:0; text-align:left; }
  .pw-list li{ display:flex; align-items:flex-start; gap:14px; padding:15px 0;
    border-bottom:1px solid rgba(222,219,200,.07); opacity:0; transform:translateY(14px); }
  .pw-list li:last-child{ border-bottom:none; }
  .pw-list b{ display:block; font-size:14.5px; color:#E1E0CC; margin-bottom:3px; }
  .pw-list span{ display:block; font-size:13px; color:#9CA3AF; line-height:1.55; }
  .pw-check{ flex:none; width:19px; height:19px; margin-top:2px; fill:none; stroke:#33C29A;
    stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:26; stroke-dashoffset:26; }

  .pw-cta{ opacity:0; transform:translateY(14px); }
  .pw-cta .btn-primary{ width:100%; }
  .pw-hint{ margin:10px 0 16px; font-size:13px; }
  .pw-cta .btn-ghost{ color:#9CA3AF; }
  .pw-foot{ opacity:0; margin:30px 0 0; font-size:12px; color:#8B93A3; line-height:1.6; }

  /* La séquence. Un seul jeu de keyframes par rôle, décalé par delay :
     le sceau (0), le titre (.35s), la liste (.6s + 70ms par ligne),
     l'appel à l'action (1.1s). Durée totale ~1,6 s : assez pour être
     remarquée, assez courte pour ne jamais être dans le chemin. */
  @keyframes pwDraw{ to{ stroke-dashoffset:0; } }
  @keyframes pwBloom{ 0%{ opacity:0; transform:scale(.4); } 45%{ opacity:1; } 100%{ opacity:0; transform:scale(1.5); } }
  @keyframes pwPop{ to{ opacity:1; transform:scale(1); } }
  @keyframes pwRise{ to{ transform:translateY(0); } }
  @keyframes pwUp{ to{ opacity:1; transform:translateY(0); } }
  @keyframes pwFade{ to{ opacity:1; } }

  .pw[data-anim="run"] .pw-hex{ animation:pwDraw 1s var(--n-ease,cubic-bezier(.32,.72,0,1)) forwards; }
  .pw[data-anim="run"] .pw-hex-in{ animation-delay:.14s; }
  .pw[data-anim="run"] .pw-bloom{ animation:pwBloom 1.1s var(--n-ease,cubic-bezier(.32,.72,0,1)) .5s forwards; }
  .pw[data-anim="run"] .pw-mark{ animation:pwPop .7s var(--n-ease,cubic-bezier(.32,.72,0,1)) .42s forwards; }
  .pw[data-anim="run"] .pw-kicker span{ animation:pwRise .8s var(--n-ease,cubic-bezier(.32,.72,0,1)) .3s forwards; }
  .pw[data-anim="run"] .pw-title span{ animation:pwRise .8s var(--n-ease,cubic-bezier(.32,.72,0,1)) .38s forwards; }
  .pw[data-anim="run"] .pw-sub span{ animation:pwRise .8s var(--n-ease,cubic-bezier(.32,.72,0,1)) .46s forwards; }
  .pw[data-anim="run"] .pw-list li{ animation:pwUp .7s var(--n-ease,cubic-bezier(.32,.72,0,1)) forwards;
    animation-delay:calc(.62s + var(--i) * .07s); }
  .pw[data-anim="run"] .pw-check{ animation:pwDraw .5s var(--n-ease,cubic-bezier(.32,.72,0,1)) forwards;
    animation-delay:calc(.76s + var(--i) * .07s); }
  .pw[data-anim="run"] .pw-cta{ animation:pwUp .7s var(--n-ease,cubic-bezier(.32,.72,0,1)) 1.05s forwards; }
  .pw[data-anim="run"] .pw-foot{ animation:pwFade .8s ease 1.3s forwards; }

  /* Une animation ne doit jamais être la condition pour voir la page. */
  @media (prefers-reduced-motion:reduce){
    .pw *{ animation:none !important; }
    .pw-hex,.pw-hex-in,.pw-check{ stroke-dashoffset:0 !important; }
    .pw-mark,.pw-list li,.pw-cta,.pw-foot{ opacity:1 !important; transform:none !important; }
    .pw-kicker span,.pw-title span,.pw-sub span{ transform:none !important; }
  }

  /* Argumentaire PRO : des phrases courtes alignées, pas un pavé. */
  .pro-list{ list-style:none; margin:14px 0 16px; padding:0; }
  .pro-list li{ position:relative; padding:7px 0 7px 22px; color:#C9C7B8; font-size:13.5px; line-height:1.5;
    border-bottom:1px solid rgba(222,219,200,.06); }
  .pro-list li:last-child{ border-bottom:none; }
  .pro-list li:before{ content:''; position:absolute; left:2px; top:14px; width:8px; height:8px;
    border-radius:2px; background:#DEDBC8; opacity:.7; }
  /* Pastille PRO sur une tuile d'accès rapide. */
  .quick-tile{ position:relative; }
  .qt-pro{ position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; letter-spacing:.12em;
    color:#E0A93E; border:1px solid rgba(224,169,62,.4); border-radius:5px; padding:2px 5px; line-height:1; }

  /* Les deux phrases qui tranchent, au-dessus des tarifs. */
  .plan-thesis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px; }
  .plan-thesis > div{ border:1px solid var(--border); border-radius:13px; padding:14px 15px;
    background:rgba(255,255,255,.022); }
  .plan-thesis > div:last-child{ border-color:rgba(222,219,200,.30); background:rgba(222,219,200,.06); }
  .plan-thesis b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
  .plan-thesis span{ display:block; font-size:16.5px; font-weight:700; line-height:1.3;
    letter-spacing:-.012em; }
  @media (max-width:520px){ .plan-thesis{ grid-template-columns:1fr; } }

  /* ---- Écran postflop ----
     Le board d'abord, la main ensuite, l'argent en dessous. Trois blocs,
     aucun décor : le joueur doit lire le spot avant de lire le texte. */
  .pf-stage{ border:1px solid var(--border); border-radius:16px; background:var(--surface-2);
    padding:16px 14px 14px; }
  .pf-stage-head{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    color:var(--text-dim); text-align:center; margin-bottom:10px; }
  .pf-board{ display:flex; gap:7px; justify-content:center; align-items:center; flex-wrap:wrap; }
  /* Le board est plus petit que la main du héros : cinq cartes doivent
     tenir sur une ligne même sur un téléphone, et la hiérarchie visuelle
     doit dire tout de suite laquelle des deux zones est la tienne. */
  .pf-board .playing-card{ width:58px; height:81px; font-size:20px; border-radius:9px; }
  .pf-card-back{ width:58px; height:81px; border-radius:9px; border:1px dashed rgba(222,219,200,.26);
    background:repeating-linear-gradient(135deg,rgba(222,219,200,.05) 0 4px,transparent 4px 8px); }
  .pf-hero{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07);
    display:flex; flex-direction:column; align-items:center; gap:8px; }
  .pf-hero-lab{ font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); }
  .pf-hero .hand{ display:flex; gap:7px; justify-content:center; }
  .pf-money{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
  .pf-money-cell{ border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.022);
    padding:9px 10px; text-align:center; }
  .pf-money-cell span{ display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:3px; }
  .pf-money-cell b{ font-size:16px; font-family:var(--font-display); }
  .pf-money-bet{ border-color:rgba(222,219,200,.28); background:rgba(222,219,200,.06); }

  /* La comparaison, en une image : la barre = ton équité, le trait = le
     seuil imposé par la cote. Le sens de la décision se voit avant de lire. */
  .pf-bar{ margin:10px 0 14px; }
  .pf-bar-track{ position:relative; height:10px; border-radius:999px;
    background:rgba(255,255,255,.07); overflow:visible; }
  .pf-bar-fill{ display:block; height:100%; border-radius:999px; }
  .pf-bar-fill.up{ background:linear-gradient(90deg,rgba(95,190,138,.55),#5FBE8A); }
  .pf-bar-fill.down{ background:linear-gradient(90deg,rgba(224,133,133,.5),#E08585); }
  .pf-bar-seuil{ position:absolute; top:-5px; bottom:-5px; width:2px; background:#E1E0CC;
    border-radius:2px; box-shadow:0 0 0 2px rgba(0,0,0,.55); }
  .pf-bar-legend{ display:flex; justify-content:space-between; gap:12px; margin-top:9px;
    font-size:11.5px; color:var(--text-dim); flex-wrap:wrap; }
  .pf-bar-legend b{ color:var(--text); font-weight:700; }
  .pf-legend-eq:before,.pf-legend-sl:before{ content:''; display:inline-block; width:9px; height:9px;
    border-radius:2px; margin-right:6px; vertical-align:baseline; }
  .pf-legend-eq:before{ background:#5FBE8A; }
  .pf-legend-sl:before{ background:#E1E0CC; }
  .pf-board-note{ text-align:center; margin-top:10px; font-size:11px; color:var(--text-dim); }
  .pf-bloc{ margin-top:14px; }
  .pf-bloc span{ display:block; font-size:10px; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--text-dim); margin-bottom:5px; }
  .pf-bloc p{ margin:0; font-size:13.5px; line-height:1.62; }
  .pf-source{ margin-top:16px; font-size:11.5px; line-height:1.55; color:var(--text-dim);
    border-top:1px solid rgba(255,255,255,.07); padding-top:10px; }
  @media (max-width:520px){
    .pf-money{ grid-template-columns:1fr 1fr; }
    .pf-money-cell:last-child{ grid-column:1 / -1; }
  }
  @media (max-width:440px){
    .pf-board{ gap:5px; }
    .pf-board .playing-card{ width:47px; height:66px; font-size:17px; border-radius:8px; }
    .pf-card-back{ width:47px; height:66px; border-radius:8px; }
    .pf-hero .playing-card{ width:60px; height:84px; font-size:21px; }
  }

  /* Second passage de l'audit : ces classes recevaient une couleur mais
     aucune geometrie, la mise en forme etant restee dans la feuille
     compilee ancienne. Les pastilles d'acces rapide partaient donc a la
     taille naturelle du SVG (225 px au lieu de 40) et le bloc du coach
     n'avait ni cadre ni marge interieure. */
  .qt-icon{ display:flex !important; align-items:center; justify-content:center;
    width:40px !important; height:40px !important; margin:0 auto 10px; border-radius:12px; }
  .qt-icon svg{ width:22px !important; height:22px !important; display:block; }
  .mode-icon{ width:40px !important; height:40px !important; }
  .mode-icon svg{ width:22px !important; height:22px !important; display:block; }
  .tab .icon svg, .sb-rank svg{ width:20px; height:20px; display:block; }
  .qt-label{ display:block; font-size:12.5px; font-weight:600; color:#C9CBD1;
    text-align:center; line-height:1.35; }

  .sb-coach{ padding:13px 14px; border-radius:14px;
    border:1px solid rgba(222,219,200,.16); margin:14px 0 10px; }
  .sb-coach small{ display:block; font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; font-weight:600; margin-bottom:7px; }
  .sb-coach p{ margin:0; font-size:12px; line-height:1.55; color:#9CA3AF; }
  .sb-coach-cta{ display:inline-block; margin-top:10px; padding:0; border:0;
    background:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700;
    text-align:left; }

  /* ------------------------------------------------------------------
     L'ECRAN DE DEMARRAGE (2026-09-10)
     La feuille compilee affiche un voile plein ecran pendant l'init de
     l'application : le mot « Bluffy » en dore et une marque de 84 px.
     C'est ce que le visiteur voit en arrivant, une demi-seconde, avant
     la page. Arthur le veut retire : l'application se monte assez vite
     pour qu'un fond sombre soit preferable a un ecran d'attente.
     ------------------------------------------------------------------ */
  .boot{ display:none !important; }

  /* ------------------------------------------------------------------
     L'ANCIEN LOGO (audit du 2026-09-10)
     La feuille compilee embarque l'ancienne marque dans quatre variables
     (--mark-light, --mark-light-sm, --mark-gold, --mark-ghost) sous forme
     de SVG en data-URI, et s'en sert a trois endroits. C'est pour ca que
     l'ancien logo revenait alors que tous les <img> pointent sur le bon
     fichier : il n'etait pas dans le markup, il etait dans le CSS.

     On repointe les variables vers le vrai logo, et on supprime la marque
     que la barre laterale dessinait en :before, qui faisait en plus doublon
     avec le bloc de marque juste en dessous.
     ------------------------------------------------------------------ */
  :root{
    --mark-light:url("/logo-256.png");
    --mark-light-sm:url("/logo-256.png");
    --mark-gold:url("/logo-256.png");
    --mark-ghost:url("/logo-256.png");
  }
  /* content:url() rend l'image a sa taille naturelle (256 px). On ne
     garde donc aucune de ces variables en content : ici on supprime. */
  .tabbar:before{ content:none !important; display:none !important; }
  .brand-dot{ width:24px !important; height:24px !important; }
  /* Le filigrane du fond : le vrai logo est bien plus lumineux que
     l'ancien trace, il faut donc baisser franchement. */
  #app:after{ width:320px !important; height:320px !important; opacity:.03 !important;
    filter:saturate(.55); }

  /* ==================================================================
     REGLES DE BASE MANQUANTES (audit du 2026-09-09)
     Trente-trois classes etaient rendues sur chaque ecran sans aucune
     regle CSS, dans aucune feuille : la marque, le bloc d'identite de la
     barre laterale, les medailles de rang, l'ecran de passage de rang, la
     carte du jour, le radar du DNA, et les deux aides d'affichage
     mobile-only / sb-only. La feuille compilee est plus ancienne que le
     code qui l'utilise, et elle n'est pas reconstructible ici.

     Ces regles vivent donc desormais dans app.js, qui est le seul fichier
     dont Arthur maitrise le deploiement. Consequence voulue : le jour ou
     la feuille compilee derive a nouveau, ces composants ne cassent plus.
     ================================================================== */

  /* La marque. Sans taille sur le conteneur, l'image partait a sa taille
     naturelle de 256 px : c'est l'origine des logos geants. */
  .bmark-wrap{ display:inline-flex !important; align-items:center; justify-content:center;
    width:var(--bm,28px) !important; height:var(--bm,28px) !important; flex:0 0 auto; }
  .bmark{ width:100% !important; height:100% !important; max-width:100% !important;
    object-fit:contain; display:block; }
  .n-logo{ --bm:32px; }
  .n-logo-sm{ --bm:20px; }
  .landing-logo{ --bm:54px; }

  /* Barre laterale : bloc de marque, bloc de rang, pied d'identite. */
  .sb-head{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:14px 2px 18px; }
  .sb-head:before{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; }
  .sb-head:after{ content:''; position:absolute; left:14%; top:-6%; width:72%; height:92%;
    pointer-events:none; filter:blur(20px); }
  .sb-brand{ position:relative; font-size:19px; letter-spacing:-.02em; }
  .sb-logo{ --bm:54px !important; position:relative; }

  .sb-rank{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:10px;
    align-items:center; width:100%; margin:12px 0 4px; padding:10px 12px 14px; cursor:pointer;
    border:1px solid var(--border,rgba(222,219,200,.14)); border-radius:14px;
    background:linear-gradient(180deg,rgba(222,219,200,.05),rgba(222,219,200,.015));
    text-align:left; color:inherit; font:inherit;
    transition:border-color .3s var(--n-ease,ease); }
  .sb-rank-text{ display:block; min-width:0; }
  .sb-rank-text b{ display:block; font-size:13px; font-weight:700; color:#E1E0CC; letter-spacing:-.01em; }
  .sb-rank-text small{ display:block; font-size:11px; color:#8B9099; margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-bar{ grid-column:1/-1; display:block; height:3px; border-radius:3px; margin-top:4px;
    background:rgba(222,219,200,.12); overflow:hidden; }
  .sb-bar i{ display:block; height:100%; border-radius:3px;
    background:linear-gradient(90deg,#8A8878,#DEDBC8); transition:width .6s var(--n-ease,ease); }

  .sb-foot{ display:flex; align-items:center; gap:9px; padding:12px 2px 2px;
    border-top:1px solid var(--border,rgba(222,219,200,.12)); }
  .sb-avatar{ display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; flex:0 0 auto; border-radius:50%; font-size:11px; font-weight:800;
    color:#0A0A0A; background:linear-gradient(160deg,#F2F1E4,#A9A796); letter-spacing:.02em; }
  .sb-pseudo{ flex:1 1 auto; min-width:0; font-size:12.5px; color:#C9CBD1; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-plan{ flex:0 0 auto; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; padding:3px 7px; border-radius:999px; color:#8B9099;
    border:1px solid rgba(222,219,200,.16); }
  .sb-plan.pro{ color:#0A0A0A; border-color:transparent;
    background:linear-gradient(160deg,#F2F1E4,#DEDBC8 55%,#A9A796); }

  /* Aides d'affichage. Sans elles, le contenu prevu pour le telephone
     s'affichait aussi sur grand ecran, et inversement. */
  .sb-only{ display:none; }
  .mobile-only{ display:block; }
  @media(min-width:900px){
    .sb-only{ display:flex; }
    .sb-head.sb-only{ display:flex; }
    .sb-foot.sb-only{ display:flex; }
    .sb-coach.sb-only{ display:block; }
    .sb-rank.sb-only{ display:grid; }
    .mobile-only{ display:none !important; }
  }

  /* Medailles de rang. --ms porte la taille, --m le metal. */
  .medal{ position:relative; display:inline-flex !important; align-items:center; justify-content:center;
    width:var(--ms,40px) !important; height:var(--ms,40px) !important; flex:0 0 auto; border-radius:50%;
    background:var(--m,linear-gradient(160deg,#3A3B40,#1A1B1F));
    box-shadow:inset 0 1px rgba(255,255,255,.28), inset 0 -2px rgba(0,0,0,.5),
      0 6px 16px -8px rgba(0,0,0,.9); }
  .medal .bmark{ width:56% !important; height:56% !important; object-fit:contain;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
  .medal-bronze{ --m:linear-gradient(160deg,#D9A273,#9C6236 52%,#5E3A1E); }
  .medal-argent{ --m:linear-gradient(160deg,#EFEFF2,#B9BCC4 52%,#71757E); }

  /* Carte de rang du telephone. */
  .rank-card{ display:flex; align-items:center; gap:12px; cursor:pointer; }
  .rank-card-text{ min-width:0; }
  .rank-card-text b{ display:block; font-size:14px; font-weight:700; color:#E1E0CC; }
  .rank-card-text small{ display:block; font-size:11.5px; color:#8B9099; margin-top:2px; }

  /* Passage de rang : c'est une celebration, elle doit couvrir l'ecran. */
  .rankup{ position:fixed; inset:0; z-index:120; display:flex; align-items:center;
    justify-content:center; padding:20px; background:rgba(4,4,5,.86);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    animation:ruIn .45s var(--n-ease,ease) both; }
  .rankup-card{ position:relative; width:100%; max-width:380px; text-align:center;
    padding:34px 26px 26px; border-radius:22px;
    border:1px solid rgba(222,219,200,.20);
    background:radial-gradient(120% 90% at 50% -10%, rgba(107,90,58,.34), transparent 62%), #101114;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
    animation:ruCard .6s var(--n-ease,ease) .06s both; }
  .rankup-eyebrow{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
    color:rgba(225,224,204,.55); margin:0 0 18px; }
  .rankup-card .medal{ animation:ruMedal .9s var(--n-ease,ease) .18s both; }
  .rankup-title{ font-size:27px; font-weight:800; letter-spacing:-.03em; margin:16px 0 6px; color:#E1E0CC; }
  .rankup-tagline{ font-size:14px; line-height:1.6; color:#9CA3AF; margin:0 0 16px; }
  @keyframes ruIn{ from{ opacity:0; } }
  @keyframes ruCard{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
  /* La medaille arrive en pivotant : c'est le seul relief 3D de l'app,
     et il ne se declenche qu'a un moment rare et merite. */
  @keyframes ruMedal{ from{ opacity:0; transform:perspective(600px) rotateY(-84deg) scale(.86); } }
  @media(prefers-reduced-motion:reduce){
    .rankup,.rankup-card,.rankup-card .medal{ animation:none !important; }
  }

  /* Carte du defi du jour. */
  .daily-card{ display:grid; grid-template-columns:auto 1fr auto; gap:13px;
    align-items:center; cursor:pointer; }
  .daily-num{ display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; flex:0 0 auto; border-radius:13px; font-size:16px; font-weight:800;
    color:#E1E0CC; border:1px solid rgba(222,219,200,.18);
    background:linear-gradient(160deg,rgba(222,219,200,.10),rgba(222,219,200,.03)); }
  .daily-body{ min-width:0; }
  .daily-body b{ display:block; font-size:14px; font-weight:700; color:#E1E0CC; }
  .daily-body small{ display:block; font-size:12px; color:#8B9099; margin-top:3px; line-height:1.5; }
  .daily-cta{ flex:0 0 auto; font-size:12px; font-weight:700; color:#DEDBC8; white-space:nowrap; }
  .daily-card.done{ opacity:.72; }
  .daily-card.done .daily-num{ color:#8B9099; }

  /* Radar du DNA : sans largeur, le SVG partait a sa taille intrinseque. */
  .radar-chart{ display:block; width:100% !important; max-width:420px; margin:0 auto; height:auto !important; }

  /* Encart PRO de l'Error Lab et gros bouton de la page compte. */
  .pro-tease{ cursor:pointer; border-color:rgba(222,219,200,.26);
    background:linear-gradient(180deg,rgba(222,219,200,.07),rgba(222,219,200,.02)); }
  .btn-lg{ width:100%; padding:16px 20px; font-size:15px; border-radius:14px; }

  /* Bloc d'accueil de l'ecran "creer un compte". */
  .landing{ text-align:left; }
  .landing-title{ font-size:clamp(1.5rem,4.4vw,2rem); font-weight:800; letter-spacing:-.03em;
    line-height:1.15; margin:14px 0 10px; color:#E1E0CC; }
  .landing-sub{ font-size:15px; line-height:1.75; color:#9CA3AF; margin:0 0 22px; }

  /* Serie en cours. */
  .flame{ display:inline-block; font-size:13px; line-height:1; }

  

/* ------------------------------------------------------------------
   LEXIQUE CONTEXTUEL DE LA MAIN                          (2026-09-11)
   Le bloc ne liste plus que les termes employes par le spot affiche
   (voir lexiqueHtml dans app.js). Il est donc court : on peut lui
   donner un cadre, ce qui etait exclu quand il depliait 45 lignes.
   Le resume nomme les premiers termes, pour que le joueur sache s'il
   vaut la peine d'ouvrir avant de l'ouvrir.
   ------------------------------------------------------------------ */
.lexique{ border:1px solid var(--border); border-radius:12px; padding:8px 12px; }
.lexique summary{ font-weight:600; }
.lexique[open]{ padding-bottom:10px; }
.lexique .lex-row{ padding:6px 0; border-top:1px solid var(--border-soft); }
.lexique .lex-row:first-of-type{ border-top:none; }
.lex-tout{ margin:10px 0 0; padding-top:8px; border-top:1px solid var(--border-soft);
  color:var(--text-faint); font-size:12px; line-height:1.5; }
.lex-tout b{ color:var(--text-dim); }

/* Suite de la barre du hero en petite largeur : la marque descend sous
   la barre. Cette regle vit en fin de feuille parce que `.n-frame >
   .n-mark` est declaree plus bas que le bloc de la barre et l'emporterait
   a specificite egale. La barre mesure 54 px de haut (deux selecteurs de
   38 px et 8 px de marge), d'ou les 66 px. */
@media(max-width:479px){
  .n-frame > .n-mark{ top:66px; left:16px; }
}

/* ==================================================================
   ECRAN DE MAIN : LA QUESTION ET LES REPONSES AU-DESSUS DE LA LIGNE
   DE FLOTTAISON                                          (2026-09-11)
   ------------------------------------------------------------------
   Mesure avant correction, sur un iPhone standard (390 x 844) :
       barre de ressources ........  y = 151
       « Cadre et fiabilite » .....  y =  92
       badges .....................  y = 211
       plan de table ..............  y = 291  (405 px de haut)
       carte du profil adverse ....  y = 700
       LA QUESTION ................  y = 866   <- hors ecran
       LES BOUTONS ................  y = 1080  <- hors ecran
   Le joueur ouvrait une main et ne voyait ni ce qu'on lui demandait,
   ni quoi repondre : il voyait un dessin et trois avertissements.
   Deux blocs ont ete retires de l'ecran (voir app.js) ; ici on reprend
   la place de ce qui reste. Rien n'est masque : le plan de table garde
   toute sa lisibilite, il occupe simplement la hauteur qu'il merite.
   ================================================================== */
@media (max-width: 999px){
  /* Le plan de table : 405 px, c'etait la moitie d'un ecran de telephone
     pour six pastilles et deux cartes. Le SVG est vectoriel, il ne perd
     rien a etre plus court. */
  #app[data-route="session"] .table-visual{ padding:8px 10px 10px; margin-bottom:8px; }
  /* Le SVG a un viewBox 320x228 et width:100% : sa hauteur decoule de sa
     largeur. Un max-height ne le retrecit donc pas, il ajoute des bandes
     vides. On plafonne la largeur, la hauteur suit (270 -> 192 px). */
  #app[data-route="session"] .table-visual .seat-map{ max-width:244px; display:block; margin:0 auto; }
  /* Les cartes du hero : la classe est .playing-card, pas .card. */
  #app[data-route="session"] .table-visual .hand{ gap:8px; }
  #app[data-route="session"] .table-visual .hand .playing-card{
    width:54px; height:75px; font-size:19px;
  }
  /* Les badges tenaient sur deux lignes de 62 px. */
  #app[data-route="session"] .scenario-meta{ gap:6px; margin-bottom:8px; }
  #app[data-route="session"] .scenario-meta .badge{ font-size:10px; padding:4px 8px; }
  /* La question : c'est elle qu'on doit lire en premier une fois la table vue. */
  #app[data-route="session"] .q-block{ margin:2px 0 10px; }
  #app[data-route="session"] .q-title{ font-size:21px; line-height:1.2; }
  /* Le profil adverse, tant qu'il n'a pas de chiffres a montrer, n'a pas
     besoin d'occuper 150 px entre la table et la question. */
  #app[data-route="session"] .villain-card{ padding:10px 12px; margin-bottom:10px; }
  #app[data-route="session"] .villain-desc{ font-size:12.5px; line-height:1.4; margin:6px 0 0; }
  #app[data-route="session"] .table-visual .position-tag{ font-size:12px; }
}



/* ------------------------------------------------------------------
   « MAIN SUIVANTE » VISIBLE SANS DEFILER                (2026-09-11)
   Apres une reponse, le bouton tombait a y = 1012 sur un ecran de
   900 px : 1118 px de feedback pour une decision fold/relance. La barre
   d'action se colle en bas de la fenetre tant que la reponse est
   affichee. Elle ne masque rien : le feedback recoit une marge basse de
   la hauteur de la barre.
   ------------------------------------------------------------------ */
#app[data-route="session"] .sess-actions-collee{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--bg);
  border-top:1px solid var(--border-soft);
  box-shadow:0 -10px 24px rgba(0,0,0,.28);
}
#app[data-route="session"] .sess-actions-collee .btn{ margin:0; }
#app[data-route="session"] .sess-actions-collee .btn-row{
  margin:0; gap:10px; max-width:720px; margin-inline:auto;
}
/* La barre est hors flux : on reserve sa hauteur en bas de la page pour
   qu'elle ne recouvre jamais la fin du feedback. */
#app[data-route="session"] #main{ padding-bottom:96px; }
/* La barre d'onglets est en fin de page sur telephone : sans cette marge,
   elle passe sous la barre d'action quand on fait defiler jusqu'en bas. */
#app[data-route="session"] .tabbar{ margin-bottom:96px; z-index:0; }
/* #main est un contexte d'empilement (z-index:1 dans la feuille compilée) :
   la barre d'action fixe, qui vit dedans, passait SOUS la barre d'onglets
   quand la page est courte (écran de révélation de « Lire sa range »). La
   barre d'onglets descend d'un cran ; rien ne la chevauche ailleurs. */

/* Sur grand ecran la colonne de droite tient deja dans la fenetre : le
   bouton reste dans le flux, a sa place apres le feedback. */
@media (min-width: 1000px){
  #app[data-route="session"] .sess-actions-collee{
    position:static; padding:0; background:none; border-top:0; box-shadow:none;
    margin-top:14px;
  }
  #app[data-route="session"] #main{ padding-bottom:0; }
  #app[data-route="session"] .tabbar{ margin-bottom:0; z-index:1; }
}
}

/* ------------------------------------------------------------------
   ZONES TACTILES                                        (2026-09-11)
   Les controles segmentes mesuraient 32 px de haut, contre 44 px
   recommandes : 14 boutons sur les charts de ranges, 11 filtres sur
   « Mes mains », 10 selecteurs en revue de main, les puces du coach et
   la bascule Mensuel/Annuel. Les boutons principaux etaient corrects.
   On agit sur la hauteur utile, pas sur la taille du texte.
   ------------------------------------------------------------------ */
@media (pointer: coarse){
  .seg-btn, .chip, .filter-btn, .billing-toggle button{
    min-height:44px; padding-top:10px; padding-bottom:10px;
  }
  .seg-row{ flex-wrap:wrap; gap:8px; }
}

/* ------------------------------------------------------------------
   LEXIQUE PLIE PAR THEME                                (2026-09-11)
   45 definitions a la suite faisaient 6760 px sur un ecran de 844,
   soit huit ecrans de defilement pour trouver un mot. Les sections se
   replient ; la recherche les rouvre et masque celles sans resultat.
   ------------------------------------------------------------------ */
.glossary-group{
  border:1px solid var(--border-soft); border-radius:12px;
  margin:0 0 10px; background:var(--surface);
}
.glossary-group > summary{
  cursor:pointer; list-style:none; padding:14px 16px;
  font-weight:650; font-size:15px; color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:44px;
}
.glossary-group > summary::-webkit-details-marker{ display:none; }
.glossary-group > summary::after{
  content:'+'; font-weight:700; color:var(--text-faint); font-size:18px; line-height:1;
}
.glossary-group[open] > summary::after{ content:'−'; }
.glossary-count{
  font-size:12px; font-weight:600; color:var(--text-faint);
  border:1px solid var(--border-soft); border-radius:999px; padding:2px 9px;
  margin-left:auto; margin-right:6px;
}
.glossary-group .glossary-list{ margin:0; padding:0 16px 14px; }

/* Le bloc de filtres de « Mes mains », replie par defaut. */
.review-filters{
  border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); padding:0 16px; margin-bottom:14px;
}
.review-filters > summary{
  cursor:pointer; list-style:none; padding:14px 0; min-height:44px;
  font-weight:650; font-size:15px; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.review-filters > summary::-webkit-details-marker{ display:none; }
.review-filters > summary::after{ content:'+'; margin-left:auto; font-weight:700; color:var(--text-faint); font-size:18px; }
.review-filters[open] > summary::after{ content:'−'; }
.review-filters[open]{ padding-bottom:14px; }

/* ------------------------------------------------------------------
   FEEDBACK COURT : verdict + raison + regle, puis « En savoir plus »
   (2026-09-12). Avant : 179 mots visibles, 5 blocs replies, 90 mots
   d'avertissement sous chaque main.
   ------------------------------------------------------------------ */
.feedback-rule{
  margin:10px 0 0; padding:10px 12px; border-radius:10px;
  background:rgba(211,164,76,.10); border:1px solid rgba(211,164,76,.28);
  font-size:14px; line-height:1.45;
}
.savoir-plus{
  margin:12px 0 0; border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); padding:0 14px;
}
.savoir-plus > summary{
  cursor:pointer; list-style:none; padding:12px 0; min-height:44px;
  display:flex; align-items:center; font-weight:650; font-size:14px; color:var(--text);
}
.savoir-plus > summary::-webkit-details-marker{ display:none; }
.savoir-plus > summary::after{ content:'+'; margin-left:auto; font-weight:700; color:var(--text-faint); font-size:18px; }
.savoir-plus[open] > summary::after{ content:'−'; }
.savoir-plus[open]{ padding-bottom:14px; }
.frontiere{ font-size:13.5px; }
.frontiere > b{ display:block; margin-bottom:6px; }
.frontiere-sous{ margin:10px 0 4px; font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.frontiere ul{ list-style:none; margin:0; padding:0; }
.frontiere li{
  display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--border-soft);
}
.frontiere li:last-child{ border-bottom:0; }
.frontiere li span{ color:var(--text-dim); }
.frontiere li b{ font-variant-numeric:tabular-nums; text-align:right; }
.cadre-court{ margin:12px 0 0; font-size:12px; }
.cadre-court a{ color:var(--accent, #d3a44c); }

/* ------------------------------------------------------------------
   LIGNES COMPACTES (2026-09-13). Entraîner avait douze cartes avec
   chacune un paragraphe : trois ecrans pour trouver l'entrainement.
   Ce qui n'est pas un exercice a lancer tient sur une ligne.
   ------------------------------------------------------------------ */
.ligne-compacte{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:0 0 8px; min-height:52px;
  border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); color:var(--text); text-decoration:none;
  transition:border-color .2s, background .2s;
}
.ligne-compacte:hover{ border-color:var(--accent, #d3a44c); }
.ligne-compacte .mode-icon{ width:34px !important; height:34px !important; flex:0 0 auto; }
.ligne-compacte .mode-icon svg{ width:18px !important; height:18px !important; }
.ligne-compacte .lc-titre{ flex:1 1 auto; font-weight:600; font-size:15px; }
.ligne-compacte .badge{ flex:0 0 auto; }
.ligne-compacte .lc-fleche{ color:var(--text-faint); font-size:20px; line-height:1; flex:0 0 auto; }

/* ------------------------------------------------------------------
   LIRE SA RANGE (2026-09-13)
   ------------------------------------------------------------------ */
.rl-board{ justify-content:flex-start; gap:6px; flex-wrap:wrap; }
.rl-board .playing-card{ width:46px; height:64px; font-size:17px; }
.rl-famille{ margin:0 0 10px; }
.rl-fam-nom{ font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.rl-fam-choix{ display:flex; flex-wrap:wrap; gap:6px; }
.rl-fam-choix .chip{ min-height:36px; padding:6px 10px; font-variant-numeric:tabular-nums; }
.rl-fam-choix .chip.on, .rl-cat.on{ border-color:var(--accent, #d3a44c); background:rgba(211,164,76,.14); color:var(--text); }
.rl-cats{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.rl-cat{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:12px 14px; min-height:48px; border-radius:12px; cursor:pointer;
  border:1px solid var(--border-soft); background:var(--surface); color:var(--text); font-size:15px;
}
.rl-cat-case{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border-soft); display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto; }
.rl-cat.on .rl-cat-case{ background:var(--accent, #d3a44c); color:#15161a; border-color:transparent; }
.rl-bilan{ list-style:none; margin:0 0 10px; padding:0; }
.rl-bilan li{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; }
.rl-bilan li:last-child{ border-bottom:0; }
.rl-bilan li span{ color:var(--text-dim); }
.rl-bilan li b{ font-variant-numeric:tabular-nums; }
.rl-verdict{ font-style:normal; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border-soft); }
.rl-ok{ color:#5fbe8a; border-color:rgba(95,190,138,.4); }
.rl-ko{ color:#e08585; border-color:rgba(224,133,133,.4); }
@media (max-width: 999px){ #app[data-route="session"] .rl-board .playing-card{ width:44px; height:62px; font-size:16px; } }

/* ------------------------------------------------------------------
   Sept entrées de menu (2026-09-13) : Ranges et Apprendre rejoignent la
   barre. Sur téléphone, sept onglets dans 360 px : libellé sur une ligne,
   plus petit, icône un cran plus compacte. Sur ordinateur (barre
   latérale) rien ne change.
   ------------------------------------------------------------------ */
@media (max-width: 899px){
  .tabbar-7{ padding-left:2px; padding-right:2px; }
  .tabbar-7 .tab{ padding:6px 0 5px; font-size:10px; gap:3px; min-width:0; letter-spacing:-.01em; }
  .tabbar-7 .tab .tab-label{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:clip; }
  .tabbar-7 .tab .icon{ width:32px; height:32px; padding:6px; border-radius:10px; }
  /* « Mes erreurs » ne tient pas dans 51 px : « Erreurs » sur téléphone. */
  .tabbar-7 .tab-label-long{ display:none; }
}
@media (min-width: 900px){
  .tabbar-7 .tab-label-court{ display:none; }
}
@media (max-width: 359px){
  .tabbar-7 .tab{ font-size:9px; }
}
@media (min-width: 900px){
  /* Sept entrées : la barre latérale défile si l'écran est bas, au lieu
     de couper la carte du coach (vu à 1280 × 720). */
  .tabbar{ overflow-y:auto; scrollbar-width:none; }
  .tabbar::-webkit-scrollbar{ display:none; }
  /* Rien ne s'écrase : la carte du coach se rognait à deux lignes. */
  .tabbar > *{ flex-shrink:0; }
}
@media (min-width: 900px) and (max-height: 800px){
  .tabbar-7 .tab{ padding:7px 14px; }
  .tabbar-7 .tab .icon{ width:32px; height:32px; padding:6px; }
}