@charset "UTF-8";
  :root{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  }
  *{ box-sizing: border-box; }
  html,body{
    margin:0; padding:0; color:var(--text);
    -webkit-font-smoothing: antialiased;
  }
  /* Fond uni dans les deux themes : le halo lime du mode sombre est retire
     (22/10). Le fond est porte par <html>, <body> reste transparent. */
  html{ background:var(--bg); }
  body{ background:transparent; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }

  /* ---------- Header ---------- */
  header{
    /* Hauteur du mot et cote de la pastille : lus par le gabarit du logo ET
       par la boite du titre, qui doivent rogner a la meme hauteur. Les media
       queries ne redefinissent que ces deux valeurs. */
    --word-h:24px;
    /* La boite du logo fait 32 px : c'est la taille de la pastille APRES le
       slide. Le mot « Predikt » y reste centre sur ses 24 px, donc l'etat de
       repos ne bouge pas — et 32 < 42 px (l'avatar), donc le header ne grandit
       pas non plus. */
    --mark-h:32px;
    position: sticky; top:0; z-index:100;
    /* 14/09 : ni aplat, ni voile, ni filet bas, dans aucun des deux themes.
       En haut de page la barre doit etre INDISCERNABLE du fond : c'est pour ca
       qu'il n'y a aucune couleur ici, et que le flou est seul (pas de
       saturate, qui teinterait le degrade au repos). Le flou ne se voit donc
       qu'une fois du contenu passe dessous. */
    background: transparent;
    border-bottom: 0;
  }
  /* Le flou est porte par un calque, pas par le header lui-meme (27/10) : un
     element a backdrop-filter isole ses descendants, et le menu du compte
     (flou lui aussi) ne voyait plus la page sous lui — le texte passait net
     a travers. */
  header::before{
    /* Deborde de 40 px vers le bas, recadre a la hauteur du header : pres du
       bord, le flou lit le vrai contenu au lieu d'un reflet (sinon le texte
       qui passe juste sous le bord reste net). */
    content:""; position:absolute; inset:0 0 -40px 0; z-index:-1; pointer-events:none;
    -webkit-clip-path:inset(0 0 40px 0); clip-path:inset(0 0 40px 0);
    /* Voile de la couleur du fond (27/10) : invisible sur la page (meme
       couleur), il assombrit une photo claire qui passe dessous (eclaircit une
       photo sombre en theme clair) et garde logo et recherche lisibles. */
    background:color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .header-inner{
    /* 1368 = 1320 px de contenu + 2 x 24 de marge : la largeur de Lumina (22/10). */
    max-width: 1368px; margin:0 auto;
    /* 17 px (au lieu de 9) : le header desktop fait 76 px de haut (l'avatar
       seul du declencheur de compte, 36 px, donne la hauteur du contenu).
       Le mobile garde les siens, declares dans les media queries plus bas.
       ⚠️ Deux blocs collants sont cales sur cette hauteur — .side-menu et
       .trading-panel — et suivent juste en dessous. */
    padding: 17px 24px;
    display:flex; align-items:center; gap:22px;
  }
  /* Gabarit du logo : une fenetre a hauteur fixe qui ROGNE ce qui en sort.
     C'est elle qui permet au mot « Predikt » de sortir par le haut au scroll
     au lieu de se resorber sur place. Les deux marques sont superposees en
     absolu ; deux variables suffisent a la redimensionner dans les media
     queries (le mot fait exactement 4x sa hauteur : viewBox 124.8 / 31.2). */
  /* Le logo reste en place au defilement (22/10) : plus de bascule vers la
     pastille ni de titre de page dans le header. */
  .logo{ display:flex; align-items:center; height:var(--mark-h); flex-shrink:0; cursor:pointer; }
  .logo .logo-word{ display:block; height:var(--word-h); width:auto; }
  /* Logo Predikt Pro (28/10) : lettrage du Concept 6 + « PRO » en exposant,
     servi par la source unique https://assets.predikt.work/logos/ (on ne garde
     aucune copie dans le depot). Si l'hote ne repond pas, l'image est masquee
     et le texte « Predikt Pro » prend sa place (classe sans-image, posee par
     l'attribut onerror). */
  .logo .logo-repli{ display:none; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--text); white-space:nowrap; }
  .sans-image > img{ display:none !important; }
  .logo.sans-image .logo-repli{ display:block; }

  /* Recherche (desktop, 22/10, comme Lumina) : pilule centree dans le header,
     776 px au plus, retrecie pour laisser 260 px de chaque cote au logo et aux
     boutons. Masquee sous 900 px. */
  .header-inner{ position:relative; }
  .search-wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(776px, calc(100% - 520px)); }
  .search-wrap input{
    width:100%; height:40px; box-sizing:border-box; background:#18181a; border:1px solid transparent;
    color:var(--text); border-radius:999px; padding:0 16px 0 46px; font:inherit; font-size:15px;
    outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none;
  }
  :root[data-theme="light"] .search-wrap input{ background:#ececec; }
  .search-wrap input:focus{ border-color:var(--edge-hover); }
  .search-wrap input::placeholder{ color:var(--text-faint); }
  .search-wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-faint); }

  .header-actions{ display:flex; gap:10px; margin-left:auto; flex-shrink:0; }
  .btn{ padding:10px 20px; border-radius:999px; font-size:14px; font-weight:700; cursor:default; border:1px solid transparent; white-space:nowrap; }
  .btn-ghost{ color:var(--text); border-color:var(--edge); background:transparent; }
  .btn-ghost:hover{ border-color:var(--edge-hover); }
  .btn-solid{ background:var(--accent); color:#0b0d07; }
  .btn-solid:hover{ filter:brightness(1.08); }

  /* ---------- Subnav (categories) — sous le titre de page, pas dans le header ---------- */
  .subnav{ margin:0 0 22px; }
  .subnav-inner{
    display:flex; align-items:center; gap:22px; padding:0 0 2px;
    overflow-x:auto; scrollbar-width:none;
  }
  .subnav-inner::-webkit-scrollbar{ display:none; }
  .subnav-pill{
    background:none; border:none; color:var(--text-dim); font-size:15px; font-weight:600;
    cursor:pointer; padding:4px 0; white-space:nowrap; position:relative; flex-shrink:0;
  }
  .subnav-pill.sort{ font-weight:700; }
  .subnav-pill:hover{ color:var(--text); }
  .subnav-pill.active{ color:var(--text); }
  .subnav-pill.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background:var(--accent); border-radius:2px;
  }
  .subnav-divider{ width:1px; height:16px; background:var(--border); flex-shrink:0; }

  /* ---------- Layout ---------- */
  main{ max-width:1368px; margin:0 auto; padding: 26px 24px 80px; }

  /* Deux colonnes : rail de navigation a gauche, contenu a droite. */
  .app-shell{ display:grid; grid-template-columns:214px minmax(0,1fr); gap:30px; align-items:start; }
  .app-content{ min-width:0; }

  /* ---------- Rail de navigation ---------- */
  /* 89 = 76 px de header (l'avatar seul l'a fait passer de 73 a 76) + les
     13 px d'ecart d'origine. .trading-panel est cale sur la meme valeur. */
  .side-menu{ position:sticky; top:89px; align-self:start; }
  .side-nav{ display:flex; flex-direction:column; gap:3px; }
  .side-link{
    display:flex; align-items:center; gap:13px; width:100%; box-sizing:border-box;
    background:transparent; border:0; border-radius:999px; padding:11px 16px;
    color:var(--text-dim); font:inherit; font-size:14.5px; font-weight:600;
    cursor:pointer; text-align:left; transition:background .15s, color .15s;
  }
  .side-link svg{ width:19px; height:19px; flex-shrink:0; }
  .side-link.active{ background:transparent; color:var(--text); }
  /* Le survol s'applique a tous les liens, actif compris. Place APRES la regle
     .active : a specificite egale (deux classes de chaque cote), c'est l'ordre
     d'ecriture qui tranche, et le lien actif restait donc sans survol. */
  .side-link:hover,
  .side-link.active:hover{ background:var(--block-bg); color:var(--text); }
  /* Les icones du rail suivent la couleur du texte (currentColor) : gris au
     repos, encre a l'etat actif ou survole. Jamais l'accent — le lime est
     reserve aux donnees de marche. */
  .side-backdrop{ display:none; }
  .burger{ display:none; }

  /* ---------- Titre de page ---------- */
  .page-title{ font-size:34px; line-height:1.12; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; }
  .section{ display:none; }
  .section.active{ display:block; animation: fade .25s ease; }
  @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  .section-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin: 0 0 14px; }

  /* ---------- Hero ---------- */
  .hero{
    background: var(--block-bg);
    border:0; border-radius:20px; padding:28px;
    display:flex; flex-direction:column; gap:26px; margin-bottom:44px;
    cursor:pointer; transition:.15s;
  }
  /* ligne 1 : vignette + question + compteur du slider, sur toute la largeur */
  .hero-top{ display:flex; align-items:center; gap:16px; }
  /* ligne 2 : colonne gauche (volume/cloture + reponses), colonne droite (legende + chart).
     La ligne volume / cloture est alignee sur la legende du chart. */
  .hero-body{ display:grid; grid-template-columns: 1.05fr 1fr; gap:56px; align-items:stretch; }
  .hero-answers-col{ min-width:0; display:flex; flex-direction:column; }
  .hero-thumb-lg{ width:96px; height:96px; border-radius:19px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .hero-title-col{ flex:1; min-width:0; }
  .hero-title-col h1{ margin:0; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .hero h1, .hero-q{ font-size: 32px; line-height:1.12; margin: 0; font-weight:800; letter-spacing:-0.01em; }
  /* composant commun : ligne volume / clôture (hero + page prédiction) */
  .meta-line{ display:flex; gap:22px; color:var(--text-dim); font-size:13.5px; }
  .meta-line b{ color:var(--text); }
  /* Volume / cloture sous les barres, comme le pied des cartes de marche. */
  .hero-meta{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--edge);
    font-size:12.5px; line-height:1.4; }

  /* ---------- Bloc vedette desktop, aligne sur Lumina (22/10) ---------- */
  .hero-zone{ margin-bottom:44px; }
  /* Hauteur FIXE : d'un predikt a l'autre le bloc ne sautille pas. C'est le
     graphe qui absorbe la difference (titre sur 1, 2 ou 3 lignes) : il prend
     la hauteur restante et est retrace a cette taille (fillHero). */
  .hero.hero-feat{
    display:grid; grid-template-columns:273px minmax(0,1fr); gap:24px;
    padding:24px; border-radius:18px; margin:0; height:490px; box-sizing:border-box; overflow:hidden;
  }
  .hf-media{ min-width:0; display:flex; flex-direction:column; }
  .hf-visuel{
    width:100%; aspect-ratio:273/256; object-fit:cover; display:block;
    border-radius:14px; background:var(--bg-elevated);
  }
  /* Un filet entre les deux reponses (27/10) : l'ecart de 18 px est porte par
     le rembourrage des lignes, la hauteur du bloc ne change pas. */
  .hf-list{ display:flex; flex-direction:column; gap:0; margin:17px 0 15px; }
  .hf-row{ display:grid; grid-template-columns:38px minmax(0,1fr) auto auto; align-items:center; gap:0 12px; padding:9px 0; }
  .hf-row + .hf-row{ border-top:1px solid var(--edge); }
  .hf-row.no-thumb{ grid-template-columns:minmax(0,1fr) auto auto; min-height:38px; }
  .hf-row.no-thumb .hf-name{ margin-left:0; font-size:15px; }
  .hf-thumb{ width:38px; height:38px; border-radius:8px; object-fit:cover; display:block; background:var(--bg-elevated); }
  .hf-name{ font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:6px; }
  .hf-delta{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
  .hf-delta svg{ margin-right:10px; }
  .hf-delta.up{ color:#3fbf3f; }
  .hf-delta.down{ color:#f0364a; }
  .hf-delta.flat{ color:var(--text-faint); }
  .hf-pct{ font-size:14px; font-weight:700; min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
  .hf-more{
    margin-top:auto; width:100%; height:40px; border:0; border-radius:20px;
    background:var(--surface-1); color:var(--text); font:inherit; font-size:15px; font-weight:600;
    cursor:pointer; transition:background .15s ease;
  }
  .hf-more:hover{ background:var(--block-hover); }
  /* Sombre : fond blanc translucide (27/10), comme les boutons secondaires de
     Polymarket. Exception voulue au gris unique : le bouton se lit sur le bloc. */
  :root:not([data-theme="light"]) .hf-more{ background:rgba(255,255,255,0.08); }
  :root:not([data-theme="light"]) .hf-more:hover{ background:rgba(255,255,255,0.12); }

  .hf-main{ min-width:0; display:flex; flex-direction:column; padding-top:8px; }
  .hf-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .hf-cat{ font-size:15px; color:var(--text-dim); }
  .hf-fav{
    width:32px; height:32px; margin:-6px -6px -6px 0; border:0; border-radius:50%;
    background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .hf-fav:hover{ background:var(--surface-1); }
  .hf-fav[aria-pressed="true"] svg{ fill:currentColor; }
  .hero.hero-feat h1{ font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.01em; margin:14px 0 0; }
  .hf-legend{ display:flex; flex-wrap:nowrap; overflow:hidden; gap:24px; margin:22px 0 0; font-size:13px; }
  .hf-legend > span{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
  .hf-legend b{ font-weight:600; color:var(--text); }
  .hf-leg-pct{ color:var(--text-dim); margin-left:-2px; }
  .hf-chart{ margin-top:18px; flex:1 1 0; min-height:120px; position:relative; }
  .hf-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
  .hf-foot{ margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-dim); }
  .hf-foot b{ color:var(--text-dim); font-weight:500; }
  .hf-foot .legend-logo{ margin-left:0; }
  .hf-foot .legend-logo svg, .hf-foot .legend-logo img{ width:70px; height:auto; }

  .hf-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
  .hf-nav[hidden]{ display:none; }
  .hf-nav-r{ display:flex; gap:8px; }
  .hf-btn{
    width:40px; height:40px; border-radius:50%; border:0; background:var(--surface-1); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease;
  }
  .hf-btn:hover{ background:var(--block-hover); }
  .hf-btn .ic-play{ display:none; }
  .is-paused .hf-btn .ic-play{ display:block; }
  .is-paused .hf-btn .ic-pause{ display:none; }
  .hf-pips{ display:flex; align-items:center; gap:10px; }
  .hf-pip{
    width:7px; height:7px; padding:0; border:0; border-radius:4px; cursor:pointer;
    background:var(--text-faint); position:relative; overflow:hidden; transition:width .25s ease;
  }
  .hf-pip.active{ width:80px; background:var(--edge-hover); }
  .hf-pip-fill{
    position:absolute; inset:0; background:var(--text); border-radius:inherit;
    transform-origin:left center; transform:scaleX(0);
    animation-name:hfPip; animation-timing-function:linear; animation-fill-mode:forwards;
  }
  .is-paused .hf-pip-fill{ animation-play-state:paused; }
  @keyframes hfPip{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* ---------- Carrousel mobile des predikts en vedette ----------
     Desktop : rien. Le bloc statique #heroCard fait le travail, avec ses
     fleches. Sous 900 px il s'efface et ce rail prend sa place : les memes
     cartes, cote a cote, avec accrochage au balayage. La suivante depasse de
     ~10 % de l'ecran — c'est ce depassement qui dit qu'il y en a d'autres,
     bien mieux qu'un compteur. */
  .hero-carrousel{ display:none; }

  /* hero answers = même style barre de progression que les cartes, en un peu plus grand */
  .hero-answers .ca-name{ font-size:15px; }
  .hero-answers .ca-pct{ font-size:14px; padding:4px 13px; }
  .hero-answers .ca-bar{ height:5px; }
  .hero-answers{ gap:15px; margin:0; }
  /* L'entete et les barres bougent ensemble : c'est l'enveloppe qui se centre
     verticalement, plus les barres seules — sinon le titre de colonne se
     decrocherait de ce qu'il nomme. */
  .hero-answers-wrap{ margin:auto 0; }
  .ca-head{
    display:flex; align-items:center; gap:10px; margin:0 0 12px;
    font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-faint);
  }
  /* Les trois colonnes s'alignent par une largeur commune entete/donnee. */
  .ca-head .h-mult,
  .hero-answers .ca-mult{ min-width:56px; text-align:right; }
  .ca-head .h-odds,
  .hero-answers .ca-pct{ min-width:64px; text-align:center; box-sizing:border-box; }

  /* chart card (used in hero + trading page) */
  .chart-legend-v2{ display:flex; align-items:flex-start; gap:14px; font-size:12.5px; color:var(--text-dim); margin-bottom:10px; }
  .chart-legend-v2 span{ display:flex; align-items:center; gap:6px; }
  /* chaque réponse (nom + valeur) reste sur une seule ligne ; la liste passe à la ligne si besoin */
  #heroLegItems > span, #liveLegItems > span{ white-space:nowrap; flex-shrink:0; }
  .legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .legend-logo{ margin-left:auto; display:flex; align-items:center; opacity:0.4; filter:grayscale(1) brightness(1.7); flex-shrink:0; }
  /* Logo v2 (02/11, 197,6 x 44,2) : la largeur suit le nouveau rapport pour que
     le lettrage garde la hauteur qu'il avait avec la v1 (151,1 x 31,2). */
  .legend-logo svg, .legend-logo img{ width:51px; height:auto; display:block; }

  .chart-wrap{ position:relative; width:100%; }
  /* Page predikt : meme regle que le portefeuille, la courbe part du bord du
     bloc et non du bord du texte. Le hero de l'accueil garde son rembourrage :
     sa courbe vit dans une colonne, pas sur toute la largeur du bloc. */
  .trading-main > .chart-wrap{ margin-left:-22px; width:calc(100% + 22px); }
  .chart-wrap svg{ display:block; width:100%; height:auto; }
  /* point "live" pulsant du chart de la page détail */
  @keyframes livePulse{ 0%{ r:5px; opacity:.55; } 70%{ r:15px; opacity:0; } 100%{ r:15px; opacity:0; } }
  .live-pulse{ animation: livePulse 1.9s ease-out infinite; transform-box: fill-box; }
  .live-end-name{ font-weight:800; }
  .live-end-pct{ font-weight:800; }
  /* Les bulles flottantes des graphes ont ete remplacees le 15/09 par des
     etiquettes posees dans le SVG, a cote du point survole. */

  /* ---------- Market cards ---------- */
  /* Les cartes ne descendent pas sous 260 px : quand trois n'y tiennent plus,
     la grille passe a deux plutot que de les ecraser. */
  .markets-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }   /* 3 colonnes (22/10) */

  /* ---------- Page marches : colonne « Nouveaux predikts » ----------
     Bloc vedette a gauche, colonne a droite ; la grille est dessous, pleine
     largeur. Sous 1100 px la colonne disparait. */
  .markets-layout{ display:grid; grid-template-columns:minmax(0,1fr) 308px; gap:24px; align-items:start; }
  .markets-col{ min-width:0; }
  /* Sans fond, liste numerotee (Lumina, 22/10). */
  .mk-new{ position:sticky; top:89px; min-width:0; padding:30px 0 0; }
  .mk-new-title{ font-size:18px; line-height:1.3; font-weight:700; letter-spacing:-.01em; margin:0 0 14px; color:var(--text); }
  .mk-new-list{ display:flex; flex-direction:column; gap:2px; }
  .mk-new-row{
    display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:16px;
    /* Au survol, un fond arrondi derriere la ligne (27/10). Il deborde de
       10 px de chaque cote (marges negatives) : le texte reste aligne sur le
       titre « Nouveaux predikts ». */
    width:calc(100% + 20px); margin:0 -10px; box-sizing:border-box; min-height:56px;
    background:transparent; border:0; border-radius:12px; padding:8px 10px;
    color:var(--text); font:inherit; text-align:left; cursor:pointer;
    transition:background-color .15s ease;
  }
  .mk-new-row:hover, .mk-new-row:focus-visible{ background:var(--block-bg); }
  .mk-new-rang{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--edge-hover);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:500; color:var(--text-dim); font-variant-numeric:tabular-nums;
  }
  .mk-new-q{
    min-width:0; font-size:14px; line-height:1.4; font-weight:600;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .mk-new-cote{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:1.2; white-space:nowrap; }
  .mk-new-pct{ font-size:16px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .mk-new-nom{ font-size:13px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; }
  .market-card{
    background:var(--block-bg); border:0; border-radius:16px; padding:20px;
    display:flex; flex-direction:column; gap:14px; transition:.15s; cursor:pointer;
  }
  .card-title-row{ display:flex; align-items:flex-start; gap:12px; }
  .card-thumb{ width:60px; height:60px; border-radius:12px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .card-title-col{ flex:1; min-width:0; }
  .card-cat{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:4px; }
  /* Deux lignes maximum, puis des points de suspension : une question longue
     repoussait les cotes vers le bas et les cartes d'une meme rangee n'etaient
     plus comparables d'un coup d'oeil. */
  .card-title{
    font-size:15px; font-weight:700; line-height:1.4;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
    overflow:hidden; min-height:calc(2 * 1.4em);
  }
  .card-answers{ display:flex; flex-direction:column; gap:13px; }
  .ca-row{ display:flex; flex-direction:column; gap:7px; }
  .ca-top{ display:flex; align-items:center; gap:10px; }
  .ca-name{ font-size:14px; font-weight:700; color:var(--text); }
  .ca-right{ margin-left:auto; display:flex; align-items:center; gap:11px; }
  .ca-mult{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ca-pct{ font-weight:800; font-size:13px; padding:3px 11px; border-radius:999px; border:1.5px solid; white-space:nowrap; }
  .ca-pct.lead{ color:var(--accent); border-color:var(--accent); }
  .ca-pct.dim{ color:var(--non); border-color:var(--non); }
  .ca-bar{ height:4px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .ca-bar > span{ display:block; height:100%; border-radius:999px; }
  .ca-bar.lead > span{ background:var(--accent); }
  .ca-bar.dim > span{ background:var(--non); }
  .ca-more{ font-size:12.5px; color:var(--text-faint); padding-top:1px; }
  /* réponse avec vignette dédiée (marchés multi-réponses) */
  .ca-row.has-thumb{ flex-direction:row; align-items:center; gap:12px; }
  .ca-thumb{ width:42px; height:42px; border-radius:9px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .ca-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
  .card-foot{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-faint); border-top:1px solid var(--edge); padding-top:12px; }

  /* ---------- Trading (Live) page ---------- */
  .trading-layout{ display:grid; grid-template-columns: minmax(0,1fr) 300px; gap:24px 52px; align-items:start; }
  .trading-main{
    grid-column:1; grid-row:1; min-width:0;
    background:var(--block-bg); border:0; border-radius:18px; padding:22px;
  }                                                               /* contenu principal, en bloc (14/09) */
  .pk-rules{ grid-column:1; grid-row:2; }                         /* Market Rules, juste sous le contenu */
  .trading-more{ grid-column:1; grid-row:3; }                     /* autres marchés, en dernier */
  /* Marche a reponses multiples : les reponses appartiennent AU marche, elles
     passent donc avant les regles. Sur un binaire le bloc s'appelle « Autres
     marches en direct » et reste en pied de page — d'ou la classe, posee par
     selectMarket, plutot qu'un ordre unique. */
  .trading-layout.reponses-avant .trading-more{ grid-row:2; }
  .trading-layout.reponses-avant .pk-rules{ grid-row:3; }
  .tc-header-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
  .tc-thumb{ width:96px; height:96px; border-radius:19px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .tc-title-col{ flex:1; min-width:0; }
  .tc-header-row h1{ font-size:32px; font-weight:800; margin:0; line-height:1.12; letter-spacing:-0.01em; }
  .tc-meta{ margin-top:12px; }
  .tc-predicted-label{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--oui); margin-bottom:4px; }
  /* Le filigrane Predikt vit SUR la ligne de « Prévision actuelle », a toutes
     les largeurs : sur sa propre ligne il coutait une bande vide juste au-dessus
     du graphe. Libelle et valeur a gauche, filigrane a droite du libelle. */
  .tc-predicted{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  .tc-predicted .tc-predicted-label{ grid-column:1; grid-row:1; }
  .tc-predicted .tc-predicted-value{ grid-column:1; grid-row:2; }
  .tc-predicted .chart-legend-v2{ grid-column:2; grid-row:1; justify-content:flex-end; margin:0; }
  .tc-predicted-value{ font-size:22px; font-weight:800; margin-bottom:20px; }
  .tc-predicted-pct{ color:var(--text-dim); font-weight:600; font-size:16px; }

  .trading-panel{
    grid-column:2; grid-row:1 / span 2;
    background:var(--block-bg); border:0; border-radius:18px; padding:22px;
    display:flex; flex-direction:column; gap:16px; position:sticky; top:89px;
  }
  .tp-header{ display:flex; align-items:center; gap:10px; }
  .tp-thumb{ width:36px; height:36px; border-radius:9px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .tp-header-title{ font-weight:700; font-size:14px; line-height:1.3; }
  .tp-tabs-row{ display:flex; align-items:center; justify-content:space-between; }
  .tp-tabs{ display:flex; gap:18px; }
  .tp-tab{ background:none; border:none; color:var(--text-dim); font-weight:700; font-size:14px; padding:0; cursor:pointer; }
  .tp-tab.active{ color:var(--text); }
  .tp-market-select{ display:flex; align-items:center; gap:4px; color:var(--text-dim); font-size:13px; font-weight:600; cursor:default; }
  /* réponse sélectionnée (marchés multi-réponses) */
  .tp-selected{ display:flex; align-items:center; gap:11px; padding:4px 0 2px; }
  .tp-sel-thumb{ width:40px; height:40px; border-radius:9px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .tp-sel-name{ font-weight:800; font-size:16px; }
  /* Oui / Non : un seul segment, une pastille qui glisse d'un cote a l'autre.
     La pastille est le ::before de la piste, donc hors du flux flex : elle ne
     compte pas comme un troisieme bouton. Sa position suit la jambe active
     via :has() — aucune ligne de JS a ajouter, la bascule de la classe
     .active existait deja. Sa couleur suit la REPONSE (vert Oui, bleu Non),
     jamais le classement : c'est la regle de la charte. */
  .tp-outcomes{
    position:relative; display:flex; gap:0; padding:4px;
    background:var(--seg-track); border-radius:999px;
  }
  .tp-outcomes::before{
    content:""; position:absolute; z-index:0;
    top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
    border-radius:999px; background:var(--c-oui);
    transition: transform .24s cubic-bezier(.4,0,.2,1), background-color .24s ease;
  }
  .tp-outcomes:has(.tp-outcome-btn.non.active)::before{
    transform:translateX(100%); background:var(--c-non);
  }
  .tp-outcome-btn{
    position:relative; z-index:1;
    flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 10px; border-radius:999px; border:none; background:none;
    color:var(--text-dim); font-weight:800; font-size:15px; cursor:pointer;
    transition: color .18s ease;
  }
  .tp-outcome-btn span{ font-size:15px; font-weight:800; }
  /* Encre sombre sur la pastille : 6,5:1 sur le vert, 4,7:1 sur le bleu. */
  .tp-outcome-btn.active{ color:var(--on-accent); }
  .tp-outcome-btn:not(.active):hover{ color:var(--text); }
  .tp-outcome-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .tp-amount-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 2px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); }
  .tp-label{ color:var(--text-dim); font-size:13.5px; }
  .tp-amount{ font-size:22px; font-weight:800; }
  .tp-quick{ display:flex; gap:8px; }
  .tp-quick button{ flex:1; background:var(--bg-elevated); border:1px solid var(--edge); color:var(--text); font-weight:700; font-size:12.5px; padding:8px 0; border-radius:8px; cursor:pointer; }
  .tp-quick button:hover{ border-color:var(--edge-hover); }
  .tp-info{ font-size:12px; line-height:1.45; color:var(--text-dim); text-align:center; min-height:17px; }
  .tp-trade-btn:disabled{ opacity:.45; cursor:not-allowed; }
  .pk-empty{ color:var(--text-faint); padding:18px 0 !important; text-align:center !important; }
  .pk-empty a{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
  .pk-empty a:hover{ border-bottom-color:currentColor; }

  /* ---------- Historique : liste facon "Accueil" + panneau lateral de detail ---------- */
  #pkPanel-history{ padding:10px; }
  .pk-tx-list{ display:flex; flex-direction:column; }
  .pk-tx-day{
    font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-faint); padding:16px 12px 8px;
  }
  .pk-tx-day:first-child{ padding-top:4px; }
  .pk-tx{
    display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; text-align:left;
    background:transparent; border:0; border-radius:14px; padding:11px 12px;
    color:var(--text); font:inherit; cursor:pointer; transition:background .15s;
  }
  .pk-tx:hover, .pk-tx.sel{ background:var(--block-hover); }
  .pk-tx-ico{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-elevated); }
  .pk-tx-txt{ min-width:0; flex:1; }
  .pk-tx-t{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pk-tx-s{ font-size:12.5px; color:var(--text-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pk-tx-amt{ flex-shrink:0; text-align:right; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
  .pk-tx-amt small{ display:block; font-size:11.5px; font-weight:500; color:var(--text-faint); margin-top:3px; }

  .pk-dpanel{
    position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; z-index:220;
    background:var(--bg-elevated); border-left:1px solid var(--edge);
    transform:translateX(103%); transition:transform .24s ease;
    overflow-y:auto; padding:22px 22px 40px; box-sizing:border-box;
  }
  .pk-dpanel.open{ transform:none; }
  .pk-dbackdrop{ position:fixed; inset:0; z-index:215; background:rgba(0,0,0,.5); display:none; }
  .pk-dbackdrop.open{ display:block; }
  .pk-dclose{
    position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
    border:0; background:var(--block-bg); color:var(--text); cursor:pointer; font-size:18px; line-height:1;
  }
  .pk-dhead{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:20px 8px 24px; }
  .pk-dhead img{ width:62px; height:62px; border-radius:50%; object-fit:cover; background:var(--bg-elevated); }
  .pk-dtitle{ font-size:15.5px; font-weight:700; line-height:1.3; }
  .pk-damt{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
  .pk-dsub{ font-size:13px; color:var(--text-faint); }
  .pk-dblock{ background:var(--block-bg); border-radius:16px; padding:2px 14px; margin-bottom:14px; }
  .pk-drow{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; font-size:13.5px; border-bottom:1px solid var(--edge); }
  .pk-drow:last-child{ border-bottom:0; }
  .pk-drow span:first-child{ color:var(--text-faint); }
  .pk-drow span:last-child{ text-align:right; font-weight:600; }
  .pk-dbtn{
    display:block; width:100%; background:var(--accent); color:#0b0d07; border:0; border-radius:999px;
    padding:12px; font:inherit; font-weight:700; cursor:pointer;
  }
  .pk-dbtn:hover{ filter:brightness(1.08); }
  .pk-sub-money{ display:block; font-size:11.5px; color:var(--text-faint); }
  /* Pilule : le bouton d'achat s'aligne sur « Vendre » (.pk-dbtn) et sur les
     boutons du header, tous en 999px. */
  .tp-trade-btn{ background:var(--accent); color:#0b0d07; font-weight:800; font-size:15px; padding:13px; border:none; border-radius:999px; cursor:pointer; }
  .tp-trade-btn:hover{ filter:brightness(1.08); }
  .tp-fineprint{ font-size:11.5px; color:var(--text-faint); text-align:center; margin:0; }
  .tp-fineprint a{ color:var(--text-dim); text-decoration:underline; }

  /* liste des réponses possibles (page prédiction, multi-réponses) */
  .answer-row{ display:flex; align-items:center; gap:14px; background:var(--block-bg); border:0; border-radius:12px; padding:12px 16px; cursor:pointer; transition:.15s; }
  .answer-row:hover{ background:var(--block-hover); }
  /* la selection reste visible sans bordure permanente : trait interieur */
  /* La reponse selectionnee ne porte plus d'anneau : le bloc d'ordre a droite
     affiche deja de qui il s'agit, et l'anneau lime se lisait comme un etat
     de saisie. La classe reste posee — c'est elle qui porte la logique. */
  .ar-thumb{ width:40px; height:40px; border-radius:9px; object-fit:cover; flex-shrink:0; border:1px solid var(--edge); background:var(--bg-elevated); }
  .ar-name{ flex:1; font-weight:700; font-size:14.5px; min-width:0; }
  .ar-pct{ font-weight:800; font-size:16px; width:52px; text-align:right; }
  .ar-prices{ display:flex; gap:8px; flex-shrink:0; }
  .ar-price{ font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:8px; border:1px solid var(--edge); white-space:nowrap; background:var(--bg-elevated); }
  .ar-price.yes{ color:var(--accent); }
  .ar-price.no{ color:var(--text-dim); }

  /* ticker de trades « live » sur le chart */
  .live-trades{ position:absolute; left:16px; bottom:34px; display:flex; flex-direction:column-reverse; gap:1px; pointer-events:none; z-index:4; }
  /* dessin repris plus bas, dans le bloc « Couleurs de donnee » */
  .trade-chip{ opacity:0; animation: tradeFloat 2.5s ease-out forwards; }
  @keyframes tradeFloat{ 0%{ opacity:0; transform:translateY(8px);} 14%{ opacity:1;} 70%{ opacity:1;} 100%{ opacity:0; transform:translateY(-30px);} }

  .live-list{ display:flex; flex-direction:column; gap:10px; margin-top:32px; }
  .live-row{
    display:flex; align-items:center; gap:16px; background:var(--block-bg); border:0;
    border-radius:12px; padding:14px 18px; cursor:pointer; transition:.15s;
  }
  .live-row:hover{ background:var(--block-hover); }
  .live-row .lr-title{ flex:1; font-weight:600; font-size:14px; }
  .live-row .lr-pct{ font-weight:800; font-size:15px; width:52px; text-align:right; }
  .live-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase; }
  .live-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite; }

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--bg-elevated); border:1px solid var(--edge); color:var(--text);
    padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:600;
    opacity:0; pointer-events:none; transition:.25s; z-index:200; white-space:nowrap;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- Footer ----------
     Quatre colonnes (marque + reseaux, puis trois plans de site), une ligne
     legale, un avertissement. Tout est en gris : le footer ferme la page, il ne
     la concurrence pas. Le lime n'y apparait nulle part, pas meme dans le point
     du logo.

     Affiche sur les pages publiques seulement : `body.no-side` marque justement
     les pages sans rail de navigation (marches et page d un Predikt). */
  .pk-footer{ display:none; border-top:1px solid var(--edge); margin-top:56px; }
  body.no-side .pk-footer{ display:block; }
  .pk-footer-inner{ max-width:1180px; margin:0 auto; padding:44px 24px 32px; }

  .pk-footer-grid{
    display:grid; grid-template-columns:minmax(170px, 1.15fr) repeat(3, 1fr);
    gap:34px 28px;
  }
  /* Une seule colonne de liens depuis le 16/09 : la marque a gauche, les
     marches a droite, le reste de la largeur reste vide plutot que rempli de
     liens morts. */
  .pk-footer-grid:has(.pk-footer-col:only-of-type){ grid-template-columns:minmax(170px, 1.15fr) 1fr 1fr 1fr; }

  /* Logo du pied de page : image de la source unique, attenuee comme l'ancien
     --text-faint (voir aussi .logo-sombre / .logo-clair). */
  .pk-footer-logo img{ width:96px; height:auto; display:block; opacity:.45; }   /* v2 : meme hauteur de lettrage */
  .pk-footer-social{ display:flex; gap:14px; margin-top:18px; }
  .pk-footer-social a{
    display:inline-flex; color:var(--text-faint);
    transition:color .15s ease;
  }
  .pk-footer-social a:hover{ color:var(--text); }
  .pk-footer-social svg{ width:17px; height:17px; }

  /* Le crenage fait le libelle : pas de police a chasse fixe. */
  .pk-footer-h{
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-faint); margin:0 0 16px;
  }
  .pk-footer-col ul{ list-style:none; margin:0; padding:0; }
  .pk-footer-col li + li{ margin-top:11px; }
  .pk-footer-col a{
    font-size:13.5px; color:var(--text-dim);
    transition:color .15s ease;
  }
  .pk-footer-col a:hover{ color:var(--text); }

  .pk-footer-legal{
    display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px;
    margin-top:38px; padding-top:20px; border-top:1px solid var(--edge);
    font-size:12.5px; color:var(--text-faint);
  }
  .pk-footer-legal-links{ display:flex; flex-wrap:wrap; gap:12px 22px; margin-left:auto; }
  .pk-footer-legal-links a{ color:var(--text-faint); transition:color .15s ease; }
  .pk-footer-legal-links a:hover{ color:var(--text-dim); }

  .pk-footer-disclaimer{
    margin:18px 0 0; font-size:11px; line-height:1.65; color:var(--text-faint);
    max-width:none;
  }

  @media (max-width: 900px){
    .pk-footer-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
    .pk-footer-brand{ grid-column:1 / -1; }
    .pk-footer-inner{ padding:36px 18px 28px; }
  }
  @media (max-width: 520px){
    .pk-footer-grid{ grid-template-columns:1fr; }
    .pk-footer-legal-links{ margin-left:0; }
  }

  @media (max-width: 1000px){
    .trading-layout{ grid-template-columns:1fr; }
    /* ordre mobile suivant le DOM : contenu principal → trading → autres marchés */
    .trading-main, .trading-panel, .trading-more,
    .trading-layout.reponses-avant .trading-more,
    .trading-layout.reponses-avant .pk-rules{ grid-column:auto; grid-row:auto; }
    .trading-panel{ position:static; }
  }
  @media (max-width: 1100px){
    .markets-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
    .mk-new{ display:none; }
  }
  @media (max-width: 900px){
    .hero-body{ grid-template-columns:1fr; gap:24px; }
    /* Le bloc statique cede la place au carrousel. */
    #heroCard, #heroZone{ display:none !important; }
    .hero-carrousel{ display:block; margin-bottom:26px; }
    .hero-rail{
      display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; -ms-overflow-style:none;
      /* PAS de marge negative pour deborder des marges de la page : elle
         elargit le document et le controle « pas de debordement horizontal a
         390 px » du smoke test l'attrape. Le depassement de la carte suivante
         se joue donc a l'interieur du rail, par la largeur des cartes. */
      padding-bottom:2px;
    }
    .hero-rail::-webkit-scrollbar{ display:none; }
    .hero-rail > .hero{
      flex:0 0 88%; scroll-snap-align:start; box-sizing:border-box; margin:0;
    }
    .hero-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
    .hero-dot{
      width:6px; height:6px; border-radius:999px; background:var(--text-faint);
      opacity:.35; transition:width .18s ease, opacity .18s ease;
    }
    .hero-dot.active{ width:18px; opacity:1; background:var(--text); }
    .markets-grid{ grid-template-columns:repeat(2,1fr); }
    .search-wrap{ display:none; }
  }
  @media (max-width: 600px){
    .markets-grid{ grid-template-columns:1fr; }
  }

  /* Sous 900px le rail devient un tiroir ouvert par le burger du header. */
  @media (max-width: 900px){
    .app-shell{ grid-template-columns:minmax(0,1fr); gap:0; }
    .burger{
      display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
      border-radius:11px; border:1px solid var(--edge); background:transparent;
      color:var(--text); cursor:pointer; flex-shrink:0;
    }
    .side-menu{
      position:fixed; top:0; left:0; bottom:0; width:250px; z-index:210; box-sizing:border-box;
      background:var(--bg-elevated); border-right:1px solid var(--edge);
      padding:18px 14px; overflow-y:auto; align-self:stretch; height:100vh; height:100dvh;
      transform:translateX(-103%); transition:transform .22s ease;
    }
    .side-menu.open{ transform:none; }
    .side-backdrop.open{ display:block; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.55); }
    .page-title{ font-size:27px; margin-bottom:16px; }
  }

  @media (max-width: 600px){
    .pk-dpanel{
      top:auto; width:100%; max-width:100%; max-height:88vh; border-left:0;
      border-top-left-radius:20px; border-top-right-radius:20px;
      transform:translateY(103%);
    }
    .pk-dpanel.open{ transform:none; }
  }

  /* ===== Correctifs mobile (scroll horizontal) ===== */
  html, body{ max-width:100%; overflow-x:clip; }
  img, svg, canvas, video{ max-width:100%; }

  @media (max-width: 1000px){
    /* en 1 colonne, aucun bloc ne doit imposer sa largeur mini a la grille */
    .trading-layout > *{ min-width:0; }
  }

  @media (max-width: 600px){
    /* --- Header --- */
    /* min-height plutot qu'un rembourrage seul : la hauteur du header est
       sinon dictee par le plus grand de ses enfants (le bouton de profil),
       et devient imprevisible des qu'on y touche. */
    .header-inner{ padding:10px 16px; gap:12px; min-height:58px; }
    header{ --word-h:22px; --mark-h:32px; }
    .search-wrap{ min-width:0; }
    .header-actions{ gap:7px; margin-left:auto; }
    .header-actions .btn{ padding:8px 13px; font-size:12.5px; }
    .subnav-inner{ gap:18px; }

    /* --- Layout general --- */
    main{ padding:22px 16px 64px; }

    /* --- Hero --- */
    .hero{ padding:20px; }
    .hero h1, .hero-q{ font-size:24px; }
    .hero-top{ gap:12px; }
    .hero-thumb-lg{ width:64px; height:64px; border-radius:14px; }

    /* --- Lignes de reponses (cartes + hero) --- */
    .ca-top{ min-width:0; }
    .ca-name{ min-width:0; overflow-wrap:anywhere; }
    .ca-right{ flex-shrink:0; }

    /* --- Page prediction --- */
    .tc-header-row{ gap:12px; }
    .tc-thumb{ width:64px; height:64px; border-radius:14px; }
    .tc-header-row h1{ font-size:24px; }
    .tc-predicted-value{ font-size:20px; }
    .chart-legend-v2{ flex-wrap:wrap; gap:8px 14px; }

    .trading-panel{ padding:18px; }
    .trading-main{ padding:18px; }
    .trading-main > .chart-wrap{ margin-left:-18px; width:calc(100% + 18px); }
    /* Volume / cloture au-dessus de « Prévision actuelle », sur toute la largeur
       du bloc : posee a cote de la vignette elle n'avait qu'une demi-ligne. */
    .trading-main > .tc-meta{
      margin:2px 0 18px; padding-top:14px; border-top:1px solid var(--edge);
      justify-content:space-between; gap:12px;
    }
    /* Le predikt en vedette se lit a ses barres sur mobile : le graphe de cote
       y est trop petit pour dire quoi que ce soit, il prend juste de la hauteur. */
    .tp-tabs-row{ flex-wrap:wrap; gap:8px; }
    .tp-tabs{ flex-wrap:wrap; gap:14px; }
    .tp-outcome-btn{ padding:13px 8px; font-size:14px; }
    .tp-outcome-btn span{ font-size:14px; }
    .tp-quick button{ font-size:12px; }

    .answer-row{ gap:10px; padding:12px; }
    .ar-name{ overflow-wrap:anywhere; }
    .ar-prices{ gap:6px; }
    .ar-price{ padding:6px 9px; font-size:12px; }

    /* --- Divers --- */
    .live-row{ gap:10px; padding:12px 14px; }
    .toast{ white-space:normal; max-width:calc(100vw - 48px); }
  }

  /* ===== Correctifs mobile v2 (tabs / header / drag) ===== */
  /* 1. iOS gonfle la taille du texte tout seul (text inflation) -> le header deborde
        sur un vrai iPhone alors qu'il tient en test. On le desactive. */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  /* 2. Plus aucun rebond / chainage horizontal : ni la page, ni la barre d'onglets
        ne peuvent "partir" lateralement. */
  html, body{ overscroll-behavior-x:none; }

  /* 3. Le chrome (header + onglets) n'est pas du texte a selectionner ni a trainer. */
  header, .subnav{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  header a, header button, .subnav button, .subnav a{ -webkit-tap-highlight-color:transparent; }
  img{ -webkit-user-drag:none; user-drag:none; }

  /* 4. Barre d'onglets : defilement horizontal franc et contenu, avec accrochage. */
  .subnav{ position:relative; }
  .subnav-inner{
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-left:16px;
  }
  .subnav-pill{ scroll-snap-align:start; }

  /* Le gabarit ci-dessus a une largeur fixe et rogne son contenu : plus besoin
     de laisser le logo se comprimer, et surtout pas de max-width:100% sur les
     marques — elle ecraserait le mot au lieu de le laisser sortir par le haut. */
  .logo{ min-width:0; }

  @media (max-width: 900px){
    /* degrade a droite : indique que la barre d'onglets se fait defiler */
    .subnav::after{
      content:""; position:absolute; top:0; right:0; bottom:0; width:34px;
      pointer-events:none;
      background:linear-gradient(to right, rgba(11,13,7,0), rgba(11,13,7,0.92));
    }
  }

  @media (max-width: 600px){
    .subnav-inner{ gap:16px; padding-right:38px; }
  }

  /* Marge de securite supplementaire sur les tres petits ecrans. */
  @media (max-width: 400px){
    .header-inner{ padding:10px 14px; gap:10px; min-height:56px; }
    header{ --word-h:20px; --mark-h:30px; }
    .header-actions{ gap:6px; }
    .header-actions .btn{ padding:7px 11px; font-size:12px; }
    .subnav-inner{ padding-left:14px; }
    main{ padding-left:14px; padding-right:14px; }
  }

  /* ===== Correctifs mobile v3 (barre d'onglets : fin du defilement lateral) ===== */
  /* Cause reelle du "ca deborde a droite" : .subnav-inner est un vrai conteneur de
     defilement horizontal (mesure : +317px a 390, +387 a 320, +447 a 260). C'est la
     seule chose de la page qui puisse glisser. Sous 768px on le supprime : les onglets
     passent a la ligne, il n'y a plus rien a faire bouger. */
  @media (max-width: 767px){
    .subnav-inner{
      overflow-x:visible;
      flex-wrap:wrap;
      align-items:center;
      gap:10px 14px;
      padding:0 0 4px;
      scroll-snap-type:none;
      padding-right:16px;
    }
    .subnav-pill{ font-size:12.5px; padding:2px 0; scroll-snap-align:none; }
    .subnav-pill.active::after{ bottom:-4px; }
    .subnav-divider{ display:none; }
    .subnav::after{ display:none; }   /* degrade de defilement devenu inutile */
  }

  @media (max-width: 400px){
    .subnav-inner{ gap:9px 12px; padding-left:0; padding-right:0; }
    .subnav-pill{ font-size:12px; }
  }

  /* ===== Predikt v4 : entree via Cloudflare Access (Google) ===== */
  /* Ligne discrete ajoutee au footer quand l'utilisateur arrive via Google. */
  .sso-foot a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
  .sso-foot a:hover{ color:var(--text-dim); }

  /* ===== Predikt v6 : espace connecte (avatar, menu, Profil, Portfolio) ===== */
  [hidden]{ display:none !important; }

  .pk-user{ position:relative; }
  /* Declencheur : l'avatar seul, sans bordure ni prenom — meme gabarit sur
     mobile et sur desktop. Sans bordure, c'est le fond qui porte le survol. */
  .pk-user-trigger{ display:flex; align-items:center; background:transparent;
    border:0; border-radius:999px; padding:3px;
    cursor:pointer; color:var(--text); font:inherit; transition:background .15s ease; }
  .pk-user-trigger:hover, .pk-user-trigger[aria-expanded="true"]{ background:var(--surface-1); }
  .pk-user-trigger .pk-avatar{ width:36px; height:36px; font-size:14px; }
  /* L'avatar est toujours une pastille d'initiales ; la photo Google, quand elle
     existe et qu'elle charge, vient se poser par-dessus. */
  .pk-avatar{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
    color:#0b0d07; letter-spacing:.02em; line-height:1; user-select:none; }
  .pk-avatar > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
  .pk-chev{ width:12px; height:12px; color:var(--text-faint); transition:transform .18s ease; flex:0 0 auto; }

  /* Menus deroulants (27/10) : fond translucide flou, sans filet. Le flou
     garde le menu lisible au-dessus de n'importe quel contenu. */
  .pk-menu{ --menu-bg:rgba(24,24,26,0.62); --menu-hover:rgba(255,255,255,0.08);
    position:absolute; right:0; top:calc(100% + 8px); width:248px;
    background:transparent; border:0; border-radius:var(--radius); padding:6px;
    box-shadow:0 18px 44px rgba(0,0,0,.45); opacity:0; transform:translateY(-6px) scale(.98);
    pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:300; }
  .pk-menu.open{ opacity:1; transform:none; pointer-events:auto; }
  /* Le flou et la teinte sont sur un calque qui deborde de 40 px, recadre a
     la forme du menu : pres du bord, le flou dispose ainsi du vrai contenu
     au-dela. Pose sur le menu lui-meme, Chrome reflete le bord et le texte
     qui passe juste dessous restait lisible. */
  .pk-menu::before{ content:""; position:absolute; inset:-40px; z-index:-1; pointer-events:none;
    background:var(--menu-bg);
    -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
    -webkit-clip-path:inset(40px round var(--radius)); clip-path:inset(40px round var(--radius)); }
  :root[data-theme="light"] .pk-menu{ --menu-bg:rgba(255,255,255,0.68); --menu-hover:rgba(0,0,0,0.05); box-shadow:0 18px 44px rgba(0,0,0,.12); }
  /* En-tete sans avatar : il est deja juste au-dessus, dans le declencheur. */
  .pk-menu-head{ display:flex; align-items:center; padding:10px 12px 12px; }
  .pk-menu-head-txt{ min-width:0; }
  .pk-menu-name{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pk-menu-mail{ font-size:12px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pk-menu-sep{ height:1px; background:var(--border); margin:2px 6px; }
  /* Lignes hautes : la surface cliquable fait 44 px, le minimum confortable
     au doigt comme a la souris. */
  .pk-menu-item{ display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:none;
    color:var(--text); padding:12px; border-radius:10px; font:inherit; font-size:14px; cursor:pointer; text-align:left; }
  /* Survol : defini plus bas, sur un jeton de theme. */
  /* Meme regle que le rail : l'icone suit la couleur du texte, jamais l'accent. */
  .pk-menu-item svg{ width:18px; height:18px; color:var(--text-dim); flex:0 0 auto; transition:color .15s ease; }
  .pk-menu-item:hover svg{ color:var(--text); }
  .pk-menu-item.pk-out{ color:var(--text-dim); text-decoration:none; }
  .pk-menu-item.pk-out:hover{ color:var(--text); }

  /* Deconnexion, en pied de la page Profil. SANS FOND : ce n'est pas une carte
     de contenu mais une action de sortie, et lui donner l'apparence d'un bloc
     la placait au meme niveau visuel que les informations du compte.
     max-width reprend celle de .pk-2col : hors de la grille, le bloc prenait
     toute la largeur de la section et depassait les cartes de 300 px. */
  .pk-deconnexion{ max-width:760px; margin-top:22px; }

  .pk-page-title{ font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; }
  .pk-page-sub{ color:var(--text-dim); font-size:14px; margin:0 0 24px; }
  .pk-card{ background:var(--block-bg); border:0; border-radius:var(--radius); padding:18px; }
  .pk-card + .pk-card{ margin-top:14px; }
  .pk-card-title{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:600; margin:0 0 14px; }
  /* Profil & Settings : colonne unique, les blocs s'empilent verticalement.
     Largeur bornee pour que les lignes cle/valeur restent lisibles. */
  .pk-2col{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; max-width:760px; }

  .pk-hero{ display:flex; gap:18px; align-items:center; margin-bottom:22px; }
  .pk-hero .pk-avatar{ width:72px; height:72px; font-size:26px; }
  .pk-hero h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; }
  .pk-hero p{ margin:3px 0 0; color:var(--text-dim); font-size:14px; word-break:break-word; }
  .pk-badge{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; background:var(--accent-dim);
    color:var(--accent); border-radius:999px; padding:3px 10px; font-size:11px; font-weight:600; }
  .pk-badge svg{ width:12px; height:12px; }
  .pk-kv{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--edge); font-size:14px; }
  .pk-kv:last-child{ border-bottom:none; padding-bottom:0; }
  .pk-kv span:first-child{ color:var(--text-dim); flex:0 0 auto; }
  .pk-kv span:last-child{ text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .pk-tags{ display:flex; flex-wrap:wrap; gap:7px; }
  .pk-tag{ background:var(--block-bg); border:1px solid var(--edge); border-radius:999px; padding:5px 11px; font:inherit; font-size:12px; color:var(--text-dim); cursor:pointer; }
  .pk-tag.on{ background:var(--accent-dim); border-color:transparent; color:var(--accent); font-weight:600; }
  .pk-switch-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 0; border-bottom:1px solid var(--edge); font-size:14px; }
  .pk-switch-row:last-child{ border-bottom:none; padding-bottom:0; }
  .pk-switch-row small{ display:block; color:var(--text-faint); font-size:12px; margin-top:2px; }
  .pk-switch{ width:38px; height:22px; border-radius:999px; background:#2a2a32; position:relative; flex:0 0 auto; cursor:pointer; border:none; padding:0; }
  .pk-switch::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:.18s; }
  .pk-switch.on{ background:var(--accent-dim); }
  .pk-switch.on::after{ left:19px; background:var(--accent); }

  .pk-chart-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
                   margin:10px 0 18px; padding:16px 18px;
                   background:#ffffff08; border-radius:14px; }
  .pk-stat{ background:none; border:0; padding:0; }
  /* Le chiffre d'abord, le libelle en dessous. */
  .pk-stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; margin-top:4px; }

  /* Definition de la formule, au survol du libelle comme au clavier.
     L'infobulle se repere sur le declencheur lui-meme et non sur le bloc
     parent : ancree au bloc, elle se calait sur le bord gauche de la carte et
     pouvait apparaitre tres loin du « i » qu'on venait de survoler. Elle est
     desormais centree sous le « i ». Le parent garde position:relative pour
     servir de repli au calage pleine largeur du mobile. */
  .pk-chart-stats, .pk-chart-head > div:first-child{ position:relative; }
  /* Le declencheur est un vrai bouton : atteignable au clavier sans tabindex
     bricole, annonce comme ouvrant une boite de dialogue. Le padding negatif
     lui donne une cible tactile de 23 px sans deplacer le libelle d'un pixel. */
  .pk-aide{ display:inline-flex; align-items:center; justify-content:center;
    margin:-5px -5px -5px 0; padding:5px; background:none; border:0; color:inherit;
    font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
  .pk-stat-label{ display:inline-flex; align-items:center; gap:5px; }
  .pk-aide:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:50%; }
  /* la variation et son « i » sur une meme ligne */
  .pk-delta-ligne{ display:flex; align-items:center; gap:7px; margin-top:5px; }
  .pk-delta-ligne .pk-chart-delta{ margin-top:0; }
  .pk-info{ display:inline-flex; align-items:center; justify-content:center;
    width:13px; height:13px; border-radius:50%; border:1px solid currentColor;
    font-size:9px; font-weight:700; line-height:1; opacity:.7; flex-shrink:0; }
  .pk-aide:hover .pk-info{ opacity:1; }
  .pk-tip{ display:none; }
  /* Le « i » vit au pied du chiffre qu'il explique, pas a cote de son libelle :
     c'est la valeur qu'on interroge. align-items:flex-end le pose sur la ligne
     de base du nombre quelle que soit sa taille (44 px en tete, 24 px en tuile). */
  .pk-valeur-ligne{ display:flex; align-items:flex-end; gap:5px; }
  .pk-aide-val{ padding-bottom:6px; }
  /* Infobulle de survol (desktop a pointeur fin). Le popup centre reste la
     reference au clic, au doigt et au clavier — la bulle n'est qu'un raccourci
     de lecture. En position:fixed et bornee a la fenetre : elle ne peut plus
     deborder d'une carte comme l'ancienne version ancree du 12/09. */
  .pk-bulle{
    position:fixed; z-index:130; max-width:300px;
    background:var(--bg-elevated); border:1px solid var(--edge-hover); border-radius:10px;
    padding:10px 12px; box-shadow:0 12px 30px rgba(0,0,0,0.45);
    color:var(--text); font-size:12.5px; line-height:1.5; font-weight:400;
    letter-spacing:normal; text-transform:none; text-align:left; pointer-events:none;
  }
  .pk-bulle[hidden]{ display:none; }
  /* Le popup : un seul dans la page, centre, sur un fond assombri qui ferme au
     clic. Remplace les cinq infobulles ancrees sous leur « i » — leur calage
     dependait de la largeur de l'ecran et sortait de la carte sur les tuiles
     de bord. */
  .pk-pop-fond{ position:fixed; inset:0; z-index:120; display:flex;
    align-items:center; justify-content:center; padding:20px;
    background:rgba(0,0,0,0.62); }
  .pk-pop-fond[hidden]{ display:none; }
  .pk-pop{ position:relative; width:100%; max-width:420px; max-height:80vh; overflow-y:auto;
    background:var(--bg-elevated); border:1px solid var(--edge-hover); border-radius:14px;
    padding:18px 20px 20px; box-shadow:0 18px 48px rgba(0,0,0,0.55);
    color:var(--text); font-size:13.5px; line-height:1.55; font-weight:400;
    letter-spacing:normal; text-transform:none; text-align:left; }
  .pk-pop:focus{ outline:none; }
  .pk-pop-t{ margin:0 34px 9px 0; font-size:15px; font-weight:700; letter-spacing:-.01em; }
  .pk-pop-c{ color:var(--text); }
  .pk-pop-x{ position:absolute; top:12px; right:12px; width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--edge); border-radius:50%;
    color:var(--text-dim); font-size:15px; line-height:1; cursor:pointer; padding:0; }
  .pk-pop-x:hover{ color:var(--text); border-color:var(--edge-hover); }
  .pk-pop-x:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  body.pk-pop-ouvert{ overflow:hidden; }
  .pk-stat-value{ font-size:24px; font-weight:700; letter-spacing:-.02em; }
  .pk-stat-delta{ font-size:12px; margin-top:3px; color:var(--text-dim); }
  .pk-up{ color:var(--accent); }
  .pk-down{ color:#ff6b6b; }
  .pk-tabs{ display:flex; gap:8px; margin:26px 0 14px; }
  .pk-tab{ background:transparent; border:1px solid var(--edge); color:var(--text-dim);
           border-radius:999px; padding:8px 16px; font:inherit; font-size:13.5px;
           font-weight:500; cursor:pointer; }
  /* Etat actif : defini plus bas, en aplat plein (section « pastilles »). */
  .pk-panel{ display:none; }
  .pk-panel.active{ display:block; }
  .pk-table{ width:100%; border-collapse:collapse; font-size:14px; }
  .pk-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; padding:0 12px 10px 0; border-bottom:1px solid var(--edge); }
  .pk-table td{ padding:14px 12px 14px 0; border-bottom:1px solid var(--edge); vertical-align:middle; }
  .pk-table tr:last-child td{ border-bottom:none; }
  .pk-table th:last-child, .pk-table td:last-child{ text-align:right; padding-right:0; }
  .pk-pos-q{ font-weight:600; line-height:1.3; }
  .pk-pos-sub{ color:var(--text-faint); font-size:12px; margin-top:3px; }
  .pk-side{ font-weight:700; }
  .pk-side-oui{ color:var(--oui); }
  .pk-side-non{ color:var(--non); }
  .pk-chip{ display:inline-block; border-radius:999px; padding:3px 9px; font-size:11px; font-weight:700; }
  .pk-chip-oui{ background:var(--oui-dim); color:var(--oui); }
  .pk-chip-non{ background:var(--non-dim); color:var(--non); }
  .pk-chip-win{ background:var(--accent-dim); color:var(--accent); }
  .pk-chip-lose{ background:rgba(255,107,107,0.12); color:#ff6b6b; }
  .pk-money{ font-variant-numeric:tabular-nums; font-weight:600; }

  /* --- vignette d'une position ouverte --- */
  .pk-pos-cell{ display:flex; align-items:center; gap:11px; }
  .pk-thumb{ width:40px; height:40px; border-radius:9px; object-fit:cover; flex:0 0 auto;
             background:#17171c; border:1px solid var(--edge); }
  .pk-pos-txt{ min-width:0; }
  .pk-section-head{ font-size:12px; text-transform:uppercase; letter-spacing:.07em;
                    color:var(--text-faint); font-weight:700; margin:26px 0 10px; }

  /* --- courbe de valeur du portefeuille --- */
  .pk-chart-card{ background:var(--block-bg); border:0;
                  border-radius:var(--radius); padding:18px; margin-bottom:14px; }
  .pk-chart-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .pk-chart-total{ font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-top:6px; }
  .pk-chart-delta{ font-size:16px; font-weight:600; margin-top:5px; font-variant-numeric:tabular-nums; color:var(--text-dim); }
  .pk-ranges{ display:flex; gap:6px; }
  .pk-range{ background:transparent; border:1px solid var(--edge); color:var(--text-dim);
             border-radius:999px; padding:5px 12px; font:inherit; font-size:12px; cursor:pointer; }
  /* Etat actif : defini plus bas, en aplat plein (section « pastilles »). */
  .pk-range.is-off{ opacity:.32; cursor:not-allowed; }
  /* La courbe touche le bord gauche du bloc : le rembourrage de la carte est
     annule de ce cote-la seulement. L'axe reste a droite, dans le viewBox. */
  .pk-chart-wrap{ position:relative; margin-top:8px; margin-left:-18px; width:calc(100% + 18px); }
  .pk-chart-wrap svg{ width:100%; height:auto; display:block; }
  .pk-chart-note{ color:var(--text-faint); font-size:11px; margin:0 0 2px; }
  /* Courbe retiree de l'affichage (27/10). Le SVG est toujours trace (le
     calcul de la variation et les tests en dependent) mais masque, avec la
     note qui ne parlait que de lui. Le bloc garde le loader et le message
     d'erreur pendant le chargement. Pour la remettre : retirer ces regles. */
  #pkChart, .pk-chart-note{ display:none !important; }
  .pk-chart-wrap:not(:has(.pk-chart-etat)){ display:none; }
  .pk-chart-head + .pk-chart-wrap + .pk-chart-note + .pk-chart-stats{ margin-top:20px; }

  @media (max-width: 600px){
    .pk-menu{ width:236px; }
    .pk-hero{ gap:14px; }
    .pk-hero .pk-avatar{ width:58px; height:58px; font-size:21px; }
    .pk-page-title{ font-size:21px; }
    .pk-chart-stats{ gap:8px; margin:8px 0 14px; padding:13px 14px; border-radius:12px; }
    .pk-stat{ padding:0; }
    .pk-stat-label{ font-size:9.5px; letter-spacing:.05em; }
    .pk-stat-value{ font-size:17px; }
    /* Sur un ecran etroit le popup prend toute la largeur disponible : plus de
       calage a faire, il ne depend plus de la position du « i ». */
    .pk-pop-fond{ padding:14px; }
    .pk-pop{ max-width:none; padding:16px 16px 18px; }
    .pk-stat-delta{ font-size:11px; }
    .pk-chart-card{ padding:15px; }
    .pk-chart-wrap{ margin-left:-15px; width:calc(100% + 15px); }
    .pk-chart-note{ margin-top:6px; line-height:1.45; }
    .pk-ranges{ margin-top:12px; }
    .pk-chart-total{ font-size:33px; }
    .pk-chart-delta{ font-size:14px; }
    .pk-thumb{ width:34px; height:34px; border-radius:8px; }
    .pk-section-head{ margin:22px 0 9px; }
    .pk-card{ padding:15px; }
    .pk-table thead{ display:none; }
    .pk-table td[data-l]{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
    .pk-table td[data-l]::before{ content:attr(data-l); color:var(--text-faint); font-size:11px;
      text-transform:uppercase; letter-spacing:.07em; font-weight:600; flex:0 0 auto; }
    .pk-table td{ display:block; padding:4px 0; border-bottom:none; text-align:left !important; }
    .pk-table tr{ display:block; padding:14px 0; border-bottom:1px solid var(--edge); }
    .pk-table tr:last-child{ border-bottom:none; }
  }

/* --- etats de chargement et d'erreur du portefeuille --- */
  .pk-skel{ display:inline-block; height:1em; min-width:36px; border-radius:6px; vertical-align:middle;
    background:linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
    background-size:400% 100%; animation: pkSkel 1.4s ease infinite; }
  @keyframes pkSkel{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }
  .pk-chart-total .pk-skel{ height:0.78em; }
  .pk-chart-etat{ min-height:186px; display:flex; align-items:center; justify-content:center; }
  @media (max-width:600px){ .pk-chart-etat{ min-height:196px; } }
  /* Tableau des positions et historique : le loader seul, centre */
  div.pk-attente{ display:flex; justify-content:center; padding:28px 0; }
  .pk-table td.pk-attente{ text-align:center !important; padding:28px 0; }
  .pk-erreur{ text-align:center; padding:30px 18px; }
  .pk-erreur-t{ font-weight:800; font-size:15px; margin-bottom:7px; }
  .pk-erreur-s{ color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:0 auto 16px; max-width:380px; }
  .pk-retry{ background:var(--accent); color:#0b0d07; border:0; border-radius:999px;
    padding:9px 20px; font:inherit; font-weight:800; font-size:13.5px; cursor:pointer; transition:.15s; }
  .pk-retry:hover{ filter:brightness(1.08); }

/* --- Loader : icone Yi du Concept 6, les traits descendent cran par cran ---
   La fenetre a les proportions de l'icone (27.687 x 27.846) et rogne la bande
   (12 rangs de 11.193, soit 482.35 % de sa hauteur). Un cran = 1/12 de la
   bande. Cycle de 2,54 s : six crans de 0,24 s en decelerant, 0,12 s d'arret
   sur chaque trigramme, 0,5 s sur l'icone (plein-brise-plein, a -50 %).
   L'animation porte sur un element HTML, pas sur le SVG : rendu identique
   dans tous les navigateurs. */
  .pk-hexa{ --hexa:28px; display:inline-block; vertical-align:middle; flex-shrink:0;
    width:var(--hexa); height:calc(var(--hexa) * 27.846 / 27.687); overflow:hidden;
    color:var(--text); line-height:0; }
  .pk-hexa-sm{ --hexa:18px; color:currentColor; }
  .pk-hexa-lg{ --hexa:44px; }
  .pk-hexa-reel{ display:block; height:482.35%; transform:translateY(-50%);
    animation:pkHexa 2.54s cubic-bezier(.33,1,.68,1) infinite; will-change:transform; }
  .pk-hexa-reel svg{ display:block; width:100%; height:100%; }
  @keyframes pkHexa{
    0%{ transform:translateY(-75%); }
    9.449%{ transform:translateY(-66.667%); }
    14.173%{ transform:translateY(-66.667%); }
    23.622%{ transform:translateY(-58.333%); }
    28.346%{ transform:translateY(-58.333%); }
    37.795%{ transform:translateY(-50%); }
    57.48%{ transform:translateY(-50%); }
    66.929%{ transform:translateY(-41.667%); }
    71.654%{ transform:translateY(-41.667%); }
    81.102%{ transform:translateY(-33.333%); }
    85.827%{ transform:translateY(-33.333%); }
    95.276%{ transform:translateY(-25%); }
    100%{ transform:translateY(-25%); }
  }
  /* Mouvement reduit : l'icone fixe, et c'est l'opacite qui signale l'attente */
  @media (prefers-reduced-motion: reduce){
    .pk-hexa-reel{ animation:none; }
    .pk-hexa{ animation:pulse 1.6s ease-in-out infinite; }
  }

  /* Premier chargement : la page reste couverte (sous le header) jusqu'a
     l'arrivee des marches, plutot que d'afficher des tirets. Le loader
     n'apparait qu'au-dela de 150 ms, pour ne pas clignoter sur un chargement
     rapide. Filet de securite : si le script ne retire jamais le voile, il
     s'efface seul apres 12 s. */
  .pk-boot{ position:fixed; inset:0; z-index:90; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    animation:pkBootOut .3s 12s forwards; }
  .pk-boot .pk-hexa{ opacity:0; animation:pkBootIn .25s .15s forwards; }
  .pk-boot.fin{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s, visibility 0s .25s; animation:none; }
  .pk-boot.fin .pk-hexa-reel{ animation-play-state:paused; }
  @keyframes pkBootIn{ to{ opacity:1; } }
  @keyframes pkBootOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

  /* Bouton d'ordre pendant l'envoi : le loader a la place du libelle. Le
     bouton est desactive (pas de double envoi) mais garde son aplat. */
  .tp-trade-btn.pk-envoi, .tp-trade-btn.pk-envoi:disabled{ display:flex; align-items:center; justify-content:center;
    background:var(--accent-fill); color:var(--on-accent); opacity:1; cursor:progress; }


  /* ---------- Market Rules : conditions particulieres du Predikt ----------
     Deux niveaux de <details> : le bloc entier, et la sous-section Timeline.
     On garde <details>/<summary> plutot qu'un bouton maison — le clavier, le
     bouton « rechercher dans la page » et les lecteurs d'ecran suivent sans
     une ligne de JS. */
  .pk-rules-block{
    background:var(--block-bg); border:0; border-radius:18px; padding:4px 22px 8px;
  }
  .pk-rules-head{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    padding:16px 0; list-style:none; -webkit-user-select:none; user-select:none;
  }
  .pk-rules-head::-webkit-details-marker{ display:none; }
  .pk-rules-head::marker{ content:""; }
  .pk-rules-title{ font-size:17px; font-weight:700; letter-spacing:-.015em; }
  .pk-rules-subtitle{ font-size:14.5px; font-weight:700; }
  .pk-rules-ico{ width:19px; height:19px; color:var(--text-dim); flex:0 0 auto; }
  .pk-chevron{ width:18px; height:18px; margin-left:auto; color:var(--text-dim);
               flex:0 0 auto; transition:transform .18s ease; }
  details[open] > .pk-rules-head > .pk-chevron{ transform:rotate(180deg); }

  .pk-rules-body{ font-size:14px; line-height:1.62; color:var(--text-dim); padding-bottom:4px; }
  .pk-rules-body p{ margin:0 0 12px; }
  .pk-rules-body b{ color:var(--text); font-weight:700; }
  .pk-rules-quote{ color:var(--text); }
  .pk-rules-h{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
               color:var(--text-faint); margin:18px 0 7px; }
  .pk-rules-note{
    margin:16px 0 4px; padding-top:13px; border-top:1px solid var(--track);
    font-size:12.5px; line-height:1.5; color:var(--text-faint);
  }

  /* Sous-section : elle ouvre sur un filet, comme une ligne de tableau. */
  .pk-rules-sub{ border-top:1px solid var(--track); }
  .pk-rules-sub-body{ padding:2px 0 16px; }

  /* Timeline : une colonne de pastilles reliees par un trait continu. */
  .pk-tl{ display:flex; flex-direction:column; }
  .pk-tl-step{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:14px; }
  .pk-tl-mark{ position:relative; display:flex; justify-content:center; }
  .pk-tl-dot{ width:11px; height:11px; border-radius:50%; background:var(--track);
              margin-top:5px; flex:0 0 auto; }
  .pk-tl-step.done .pk-tl-dot{ background:var(--c-oui); }
  .pk-tl-step:not(:last-child) .pk-tl-mark::after{
    content:""; position:absolute; top:19px; bottom:-4px; left:50%; width:2px;
    margin-left:-1px; background:var(--track);
  }
  .pk-tl-body{ padding-bottom:18px; min-width:0; }
  .pk-tl-step:last-child .pk-tl-body{ padding-bottom:6px; }
  .pk-tl-name{ font-size:14px; font-weight:700; color:var(--text); }
  .pk-tl-when{ font-size:13px; color:var(--text-dim); margin-top:2px; }

  .pk-rules-ids{
    display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:14px;
    font-size:12.5px; color:var(--text-faint);
  }
  .pk-rules-ids b{ color:var(--text-dim); font-weight:600; }

  @media (max-width: 600px){
    .pk-rules-block{ padding:2px 18px 6px; }
    .pk-rules-title{ font-size:16px; }
  }

/* --- ecran d intro (anciennement <style id="introStyle">) --- */
#introGate{position:fixed;inset:0;z-index:100000;background:#000;display:none;align-items:center;justify-content:center;opacity:1;transition:opacity .55s ease}
#introGate.intro-hide{opacity:0}
#introGate .intro-video{width:100%;height:100%;object-fit:contain;background:#000}
#introGate .intro-skip{position:absolute;bottom:26px;right:28px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.2px;transition:background .2s}
#introGate .intro-skip:hover{background:rgba(255,255,255,.18)}


  /* Thèmes : les jetons sombre et clair sont dans ui/tokens.css. */
  :root{
    font-family:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  }

  /* ---------- Cartes : bordure fine, survol sobre ---------- */
  .hero,.market-card,.pk-dblock,.pk-card,.pk-chart-card,.answer-row,.live-row{
    border:1px solid var(--card-border);
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  }
  /* Aucune ombre au survol : seule la bordure change. Une ombre portee
     ferait flotter la carte au-dessus d'une page qui, elle, est plate. */
  .hero:hover,.market-card:hover,.answer-row:hover,.live-row:hover{
    border-color:var(--card-border-hover);
  }
  :root[data-theme="light"] .hero,
  :root[data-theme="light"] .market-card,
  :root[data-theme="light"] .pk-dblock,
  :root[data-theme="light"] .pk-card,
  :root[data-theme="light"] .pk-chart-card,
  :root[data-theme="light"] .answer-row,
  :root[data-theme="light"] .live-row{ background:var(--block-bg); }

  /* ---------- Titres : cadence guyhub ---------- */
  .page-title,.hero h1,.hero-q,.tc-header-row h1{ letter-spacing:-.025em; }
  .page-title{ font-weight:600; }
  /* Questions (hero en vedette + page predikt) : un cran plus gras que les
     titres de page, c'est le titre le plus lourd de l'ecran. */
  .hero h1,.hero-q,.tc-header-row h1{ font-weight:700; }

  /* ---------- Logo (28/10) : images de assets.predikt.work, la version blanche
     sur fond sombre, la noire sur fond clair. Seuls l'en-tete et le pied de page
     basculent ; le filigrane des graphiques garde la blanche, qu'il filtre. ---------- */
  .logo .logo-clair, .pk-footer-logo .logo-clair{ display:none; }
  :root[data-theme="light"] .logo .logo-sombre, :root[data-theme="light"] .pk-footer-logo .logo-sombre{ display:none; }
  :root[data-theme="light"] .logo .logo-clair, :root[data-theme="light"] .pk-footer-logo .logo-clair{ display:block; }
  :root[data-theme="light"] .legend-logo{ filter:brightness(0); opacity:.30; }

  /* ---------- Aplats lime : fond lime, texte sombre, dans les deux thèmes ---------- */
  .btn-solid,.tp-trade-btn,.pk-retry{ background:var(--accent-fill); color:var(--on-accent); }
  .tp-trade-btn:disabled,.tp-trade-btn[disabled]{ background:var(--surface-1); color:var(--text-faint); opacity:1; }

  /* ---------- Interrupteurs ---------- */
  .pk-switch{ background:var(--switch-off); }
  .pk-switch.on::after{ background:var(--accent-fill); }
  :root[data-theme="light"] .pk-switch::after{ background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,.25); }
  :root[data-theme="light"] .pk-switch.on{ background:var(--accent-fill); }
  :root[data-theme="light"] .pk-switch.on::after{ background:#ffffff; }

  /* ---------- Composants dont la couleur était écrite en dur ---------- */
  .pk-menu-item:hover{ background:var(--menu-hover); }
  .pk-chart-stats{ background:var(--surface-2); }

  /* ---------- Rail de navigation : pages connectées uniquement ---------- */
  body.no-side .side-menu{ display:none; }
  body.no-side .app-shell{ grid-template-columns:minmax(0,1fr); gap:0; }
  body.no-side .burger{ display:none; }

  /* ...sauf en mobile : le tiroir est le SEUL acces a la navigation une fois
     la barre laterale repliee, donc le burger reste sur toutes les pages.
     Le tiroir est hors ecran tant qu'il n'a pas la classe `open`. */
  @media (max-width: 900px){
    body.no-side .burger{ display:flex; }
    body.no-side .side-menu{ display:block; }
  }

  /* ---------- Fil d'Ariane et bouton retour (page d'un Predikt) ----------
     Le fil ne montre que le CHEMIN : la page courante n'y figure pas, son titre
     etant deja affiche en grand juste en dessous.

     Le bouton reprend le dessin de guyhub (`h-10 w-10 rounded-full bg-surface
     text-encre hover:bg-line`) : un disque de 40 px a fond doux, SANS bordure ni
     ombre, l'icone a la couleur du texte. Sur guyhub le fond est `#f7f7f7`, mais
     la page d'un Predikt repose deja sur cette teinte : on prend donc le jeton de
     surface, qui donne le meme aplat discret sur l'un et l'autre theme. */
  .pk-crumb{ display:flex; align-items:center; gap:14px; margin:0 0 18px; min-width:0; }
  .pk-back{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 auto; padding:0;
    border:0; border-radius:999px;
    background:var(--surface-1); color:var(--text); cursor:pointer;
    transition:background-color .15s ease;
  }
  .pk-back:hover{ background:var(--border); }
  .pk-back svg{ width:20px; height:20px; }
  .pk-crumb-trail{
    display:flex; align-items:center; flex-wrap:wrap; gap:7px;
    list-style:none; margin:0; padding:0; min-width:0;
    font-size:12.5px; color:var(--text-dim);
  }
  .pk-crumb-trail li{ display:flex; align-items:center; gap:7px; min-width:0; }
  .pk-crumb-trail li + li::before{ content:"/"; color:var(--text-faint); }
  .pk-crumb-trail a:hover{ color:var(--text); text-decoration:underline; }

  /* ---------- Retrait d'accessibilite ----------
     Le titre reste lu par les lecteurs d'ecran et alimente le titre du header,
     mais ne s'affiche pas : la page ouvre directement sur son contenu. */
  .pk-sr{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }

  /* ---------- Fondu au survol ----------
     Regle transversale : tout ce qui reagit au pointeur change de bordure, de
     fond ou de couleur EN FONDU, jamais d'un coup. Seules les proprietes de
     couleur sont animees — jamais une propriete qui deplace la mise en page.
     Les composants deja pourvus d'une transition ne sont pas listes ici. */
  .btn,
  .subnav-pill,
  .tp-quick button,
  .pk-tab,
  .pk-range,
  .pk-pop-x,
  .pk-menu-item{
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  }

  /* Un visiteur qui limite les animations au niveau systeme ne subit pas le fondu. */
  @media (prefers-reduced-motion: reduce){
    .btn, .subnav-pill, .tp-quick button, .pk-tab, .pk-range, .pk-pop-x,
    .pk-menu-item, .pk-back, .pk-user-trigger, .hero, .market-card, .pk-dblock,
    .pk-card, .pk-chart-card, .answer-row, .live-row, .side-link, .hf-btn,
    .tp-outcome-btn, .logo .logo-word,
    .tp-outcomes::before{
      transition-duration: .01ms;
    }
  }


  /* ---------- Couleurs de donnee ----------
     Les jetons (--c-oui, --c-non, teintes, alias) sont dans ui/tokens.css ;
     ici, leur application aux composants. */
  /* Cartes : la classe dit la reponse (oui/non) ou le rang (lead/dim). */
  .ca-pct.oui{ color:var(--c-oui); border-color:var(--c-oui); }
  .ca-pct.non{ color:var(--c-non); border-color:var(--c-non); }
  .ca-bar.oui > span{ background:var(--c-oui); }
  .ca-bar.non > span{ background:var(--c-non); }
  /* `lead` pointait sur --accent, c'est-a-dire sur la couleur de MARQUE : une
     reponse de marche portait donc le lime. On la ramene sur la couleur de
     classement, qui est une couleur de donnee. */
  .ca-pct.lead{ color:var(--chart-lead); border-color:var(--chart-lead); }
  .ca-bar.lead > span{ background:var(--chart-lead); }

  /* Les boutons Oui / Non ne suivent plus la regle des chips : depuis le
     14/09 c'est un segment a pastille glissante, et c'est la PASTILLE qui
     porte la couleur de la reponse. Voir .tp-outcomes plus haut. */

  /* Valeurs live : un vrai chip, sans ombre. L'ancienne ombre noire
     compensait un vert trop clair sur fond sombre et salissait le clair. */
  .trade-chip{
    display:inline-block; font-size:12px; font-weight:700;
    padding:4px 11px; border-radius:999px;
    /* Fond OPAQUE : le chip flotte au-dessus du degrade du graphe, une teinte
       translucide laissait passer ce fond changeant sous le montant.
       Pas de filet : c'est ce fond plein qui detache le montant, un contour
       en plus n'ajoutait rien. */
    background:var(--bg-elevated); color:var(--c-oui);
    font-variant-numeric:tabular-nums;
    opacity:0; animation: tradeFloat 2.5s ease-out forwards;
  }
  @media (max-width: 640px){
    /* Graphe bien plus etroit, meme cadence de chips : ils doivent se faire
       oublier plutot que de couvrir la courbe. */
    .trade-chip{ font-size:10.5px; padding:3px 8px; }
  }


  /* ---------- Liste deroulante de reglage ----------
     Un <select> natif : clavier, lecteur d'ecran et selecteur plein ecran des
     mobiles viennent gratuitement. On ne restyle que l'enveloppe. */
  .pk-select-wrap{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
  .pk-select{
    appearance:none; -webkit-appearance:none;
    font:inherit; font-size:14px; color:var(--text);
    background:transparent; border:1px solid var(--edge); border-radius:999px;
    padding:5px 32px 5px 14px; cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease, color .15s ease;
  }
  /* Meme regle que le bouton de profil : au survol, seule la bordure bouge. */
  .pk-select:hover, .pk-select:focus-visible{ border-color:var(--edge-hover); }
  .pk-select:focus{ outline:none; }
  .pk-select-wrap .pk-chev{ position:absolute; right:12px; pointer-events:none; }
  /* Le menu deroulant lui-meme est dessine par le systeme, pas par nous. */
  .pk-select option{ background:var(--bg-elevated); color:var(--text); }


  /* ---------- Burger : sans contour, icone plus grande ----------
     Il n'existe qu'en dessous de 900 px, donc au doigt : le filet ne servait
     qu'a dessiner le bouton, l'icone suffit. Cible conservee a 40 px.
     Le decalage negatif ramene le trait de l'icone sur la marge du header,
     la ou tombait la bordure : sans lui l'icone parait rentree. */
  @media (max-width: 900px){
    .burger{
      width:40px; height:40px; border:none; background:transparent;
      border-radius:10px; margin-left:-9px;
    }
    .burger svg{ width:26px; height:26px; }
  }

  /* ---------- Rail des barres de progression ----------
     `.ca-bar` avait bien un rail, mais en blanc a 8 % : INVISIBLE sur le fond
     blanc du mode clair. On ne lisait donc que la part atteinte, jamais son
     total. Un jeton par theme (--track, dans ui/tokens.css), et la barre
     redevient une part de 100 %. */
  .ca-bar{ background:var(--track); }


  /* ---------- Mobile : le trading en feuille glissante ----------
     Sous 1000 px, la grille se replie et le bloc de trading tombait dans le
     flux, entre le graphe et la liste des reponses : pour acheter il fallait
     le chercher en defilant. C'est l'action principale de la page.

     Le bloc n'est PAS duplique : c'est le meme noeud `.trading-panel`,
     repositionne par cette media query. Tous ses gestionnaires restent
     branches et il n'y a aucun etat a synchroniser entre deux copies. */
  .tp-bar, .tp-backdrop{ display:none; }


  @media (max-width: 1000px){
    body.tp-bar-on .tp-bar{
      display:block; position:fixed; left:0; right:0; bottom:0; z-index:225;
      /* Degrade plutot qu'un aplat a filet : le contenu s'eteint sous le
         bouton au lieu d'etre coupe net par une ligne. Le haut est transparent,
         la couleur de toile est atteinte a mi-hauteur. */
      background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 42%, var(--bg) 100%);
      border-top:none;
      padding:30px 16px calc(var(--tp-bas) + env(safe-area-inset-bottom, 0px));
      pointer-events:none;   /* le degrade laisse passer le defilement… */
    }
    .tp-bar .tp-trade-btn{ width:100%; pointer-events:auto; }  /* …le bouton, non */
    /* La barre couvre le bas du document : on lui rend sa hauteur, sinon la
       fin de page et le pied de page passent dessous. */
    body.tp-bar-on{ padding-bottom:80px; }
    /* Le toast vit a 24 px du bas : il tomberait derriere la barre. */
    body.tp-bar-on .toast{ bottom:100px; }

    body.tp-bar-on .tp-backdrop{
      display:block; position:fixed; inset:0; z-index:230;
      background:rgba(0,0,0,.55);
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .22s ease, visibility 0s linear .22s;
    }
    body.tp-bar-on .tp-backdrop.open{
      opacity:1; visibility:visible; pointer-events:auto;
      transition:opacity .22s ease;
    }

    .trading-panel{
      /* `top:auto` est OBLIGATOIRE : le bloc porte `top:166px` en desktop (il y
         est collant sous le header). Conserve ici, `top` ET `bottom` se
         retrouvent poses ensemble sur un element fixe — la hauteur est alors
         FORCEE a remplir l'ecart, et la feuille s'etirait jusqu'en haut au lieu
         d'epouser son contenu. */
      position:fixed; top:auto; left:0; right:0; bottom:0; z-index:240;
      max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
      border-radius:20px 20px 0 0;
      /* ⚠️ Fond OPAQUE, obligatoire ici. En bureau la carte herite de
         --block-bg, qui est un blanc a 6 % : pose sur la page il fait une
         carte, pose sur du contenu qui defile il laisse tout passer — on
         lisait le graphe et les Market Rules a travers le clavier. La feuille
         recouvre, elle ne teinte pas. */
      background:var(--bg-elevated);
      /* Meme rembourrage bas que la barre : le bouton d'action se retrouve
         exactement la ou il etait avant l'ouverture. */
      /* 16 px sur les cotes comme la barre : sinon le bouton se decale
         lateralement de 2 px a l'ouverture. */
      padding:14px 16px calc(var(--tp-bas) + env(safe-area-inset-bottom, 0px));
      transform:translateY(101%); transition:transform .24s ease;
      box-shadow:0 -14px 40px rgba(0,0,0,.35);
    }
    .trading-panel.open{ transform:none; }
    /* Ordre du bas de la feuille : avertissement, BOUTON, puis CLAVIER.
       Le clavier occupe le bas de l'ecran — sous le pouce, la zone la plus
       atteignable d'un telephone tenu a une main, et l'element sur lequel on
       tape le plus.

       ⚠️ Consequence assumee : le bouton d'achat ne coincide plus avec celui
       de la barre fixe. Il remonte de la hauteur du clavier a l'ouverture.
       `--tp-bas` garde son role d'espacement mais ne fait plus coincider deux
       positions — ne pas chercher a « reparer » ce decalage, il est voulu. */
    .trading-panel .tp-fineprint{ order:1; }
    .trading-panel .tp-trade-btn{ order:2; }
    .trading-panel .tp-pad{ order:3; }
    /* Poignee : dit que le bloc est une feuille, pas une carte du flux. */
    .trading-panel::before{
      content:""; width:38px; height:4px; border-radius:999px;
      background:var(--border-hover); align-self:center; flex:0 0 auto;
    }
    /* Le fond de page ne defile plus derriere la feuille ouverte. */
    body.tp-sheet-open{ overflow:hidden; }
  }

  /* Le toast doit passer AU-DESSUS de la feuille : il porte la confirmation
     d'un ordre execute. Il etait a 200, sous elle. */
  .toast{ z-index:400; }

  @media (prefers-reduced-motion: reduce){
    .trading-panel, .tp-backdrop{ transition-duration:.01ms; }
  }


  /* ---------- Navigation mobile : barre d'onglets en bas ----------
     Sous 900 px, le burger et son tiroir disparaissent : la navigation vit
     ici. Quatre entrees, les memes que le rail desktop.

     Rien en JS : les boutons portent `nav-btn` et `data-section`, le routeur
     existant fait le reste — y compris l'etat actif.

     ⚠️ C'est desormais le SEUL acces a la navigation en mobile. Si elle ne rend
     pas, le visiteur est bloque sur sa page. Un controle de la barriere de
     deploiement veille dessus. */
  .pk-tabbar{ display:none; }

  @media (max-width: 900px){
    .pk-tabbar{
      display:flex; position:fixed; z-index:226;
      /* Ajustee a ses deux onglets et centree (27/10), plus de pleine largeur. */
      left:50%; right:auto; transform:translateX(-50%); width:max-content;
      bottom:calc(10px + env(safe-area-inset-bottom, 0px));
      /* Fond translucide + flou : le contenu qui defile derriere se devine
         sans se lire, comme sous le header. */
      background:color-mix(in srgb, var(--bg-elevated) 68%, transparent);
      -webkit-backdrop-filter:blur(20px);
      backdrop-filter:blur(20px);
      border:1px solid var(--edge);
      border-radius:999px; padding:6px;
      box-shadow:0 6px 24px rgba(0,0,0,.14);
    }
    /* Sans flou possible, la barre redevient opaque : translucide seule, elle
       serait illisible par-dessus une courbe. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
      .pk-tabbar{ background:var(--bg-elevated); }
    }
    .pk-tabbtn{
      flex:0 0 auto; width:104px; min-width:0;
      display:flex; flex-direction:column; align-items:center; gap:3px;
      background:transparent; border:none; border-radius:999px;
      padding:8px 4px; cursor:pointer;
      color:var(--text-dim); font:inherit; font-size:11px; font-weight:700;
      transition:background-color .15s ease, color .15s ease;
    }
    .pk-tabbtn svg{ width:22px; height:22px; flex:0 0 auto; }
    .pk-tabbtn span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* L'entree courante prend une pastille pleine. C'est la pastille qui porte
       l'etat, pas une couleur d'accent : le lime reste reserve aux CTA. */
    .pk-tabbtn.active{ background:var(--surface-1); color:var(--text); }

    /* Le burger n'a plus lieu d'etre. Deux selecteurs pour battre, a
       specificite egale, le `body.no-side .burger{display:flex}` plus haut
       dans la feuille. */
    .burger, body.no-side .burger{ display:none; }

    /* La barre couvre le bas du document : on lui rend sa hauteur. */
    body{ padding-bottom:82px; }
    .toast{ bottom:104px; }

    /* Page d'un Predikt : le bouton d'achat occupe deja le bas de l'ecran.
       Empiler les deux mangeait ~130 px sur 844. La barre s'efface donc ici ;
       le fil d'Ariane et le bouton retour, en haut, assurent la sortie.
       `body.tp-bar-on` est pose par activateSection(). */
    body.tp-bar-on .pk-tabbar{ display:none; }

    /* Meme principe des qu'une COUCHE se pose par-dessus la page : feuille de
       detail d'une transaction, popup de definition, feuille d'ordre. La barre
       est a z-index 226, au-dessus de tout le reste — elle flottait donc sur la
       modale, mordait sur son contenu et proposait une navigation qui n'etait
       plus celle de l'ecran. Une couche n'est pas une page : elle se referme,
       elle ne se quitte pas. */
    body.pk-pop-ouvert .pk-tabbar,
    body.tp-sheet-open .pk-tabbar,
    body:has(.pk-dpanel.open) .pk-tabbar,
    body:has(.side-menu.open) .pk-tabbar{ display:none; }
  }


  /* ---------- Clavier de saisie du montant ----------
     Mobile seulement : en desktop il y a un vrai clavier, et la feuille
     n'existe pas. Chiffres en `tabular-nums` — les colonnes s'alignent et le
     montant affiche ne tressaute pas d'un chiffre a l'autre. */
  .tp-pad{ display:none; }

  @media (max-width: 1000px){
    .tp-pad{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
    .tp-pad button{
      display:flex; align-items:center; justify-content:center;
      background:var(--surface-2); border:1px solid var(--edge); border-radius:12px;
      color:var(--text); font:inherit; font-size:19px; font-weight:700;
      font-variant-numeric:tabular-nums;
      padding:11px 0; cursor:pointer;
      transition:border-color .15s ease, background-color .15s ease;
    }
    .tp-pad button:active{ background:var(--surface-1); }
    .tp-pad button svg{ width:22px; height:22px; }
  }

  /* Ecrans courts (iPhone SE et compagnie) : avec le clavier, la feuille
     atteignait son plafond de 88 vh et se mettait a defiler — le bouton
     d'achat passait alors sous la ligne de flottaison, dans un panneau dont
     rien n'indique qu'il defile. On resserre plutot que de laisser faire. */
  @media (max-width: 1000px) and (max-height: 720px){
    .trading-panel{ gap:11px; }
    .tp-pad{ gap:6px; }
    .tp-pad button{ padding:8px 0; font-size:17px; }
    .tp-fineprint{ display:none; }
  }


  /* ---------- Theme sombre : cartes sans filet ----------
     Le contraste toile/bloc suffit a les detacher, comme en clair. La bordure
     reste declaree mais transparente : elle garde sa place dans la boite,
     donc rien ne se decale au survol.

     ⚠️ Ces selecteurs pesent (0,3,0), la regle de survol du parc pese (0,2,0) :
     sans la seconde regle ci-dessous, ils l'ecrasaient et le survol n'affichait
     plus aucune bordure. On redeclare donc le survol au meme niveau de theme.
     Ne pas retirer l'une sans l'autre. */
  :root:not([data-theme="light"]) .pk-dblock,
  :root:not([data-theme="light"]) .pk-card,
  :root:not([data-theme="light"]) .pk-chart-card,
  :root:not([data-theme="light"]) .answer-row,
  :root:not([data-theme="light"]) .live-row{ border-color:transparent; }
  /* Cartes et bloc vedette (22/10) : fond gris neutre (--block-bg). Aucun
     filet au repos (27/10) ; au survol le filet apparait en 2 px (anneau
     interieur, donc sans decaler le contenu). Le fond ne bouge pas. */
  :root:not([data-theme="light"]) .hero,
  :root:not([data-theme="light"]) .market-card{ border-color:transparent; }
  :root:not([data-theme="light"]) .hero:hover,
  :root:not([data-theme="light"]) .market-card:hover{ border-color:rgba(255,255,255,0.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3); }
  :root[data-theme="light"] .hero:hover,
  :root[data-theme="light"] .market-card:hover{ box-shadow:inset 0 0 0 1px var(--card-border-hover); }

  :root:not([data-theme="light"]) .answer-row:hover,
  :root:not([data-theme="light"]) .live-row:hover{ border-color:var(--card-border-hover); }

  /* Un seul gris de fond (27/10) : un controle pose dans un bloc a la meme
     couleur que lui. Un filet interieur le detache (box-shadow : aucun
     decalage), et les survols prennent le gris de survol, de meme teinte. */
  :root:not([data-theme="light"]) .pk-stat,
  :root:not([data-theme="light"]) .tp-outcomes,
  :root:not([data-theme="light"]) .tp-trade-btn:disabled:not(.pk-envoi),
  :root:not([data-theme="light"]) .pk-switch:not(.on){ box-shadow:inset 0 0 0 1px var(--edge-hover); }
  :root:not([data-theme="light"]) .hf-fav:hover,
  :root:not([data-theme="light"]) .pk-user-trigger:hover,
  :root:not([data-theme="light"]) .pk-user-trigger[aria-expanded="true"],
  :root:not([data-theme="light"]) .pk-tabbtn.active,
  :root:not([data-theme="light"]) .tp-pad button:active,
  :root:not([data-theme="light"]) .pk-tab:hover,
  :root:not([data-theme="light"]) .pk-range:hover,
  :root:not([data-theme="light"]) .pk-back:hover{ background:var(--block-hover); }

  /* ---------- Portefeuille : trois indicateurs, trois blocs ----------
     Ils partageaient un seul fond. Chacun porte desormais le sien et l'ecart
     de la grille fait la separation. Le conteneur n'est plus qu'une grille. */
  .pk-chart-stats{ background:none; padding:0; border-radius:0; }
  .pk-stat{
    background:var(--surface-2); border-radius:14px; padding:14px 16px;
    position:relative;
    /* La tuile entiere ouvre sa definition — c'est le repli quand le « i » n'a
       plus la place de s'afficher, et c'est vrai a toutes les largeurs pour
       n'avoir qu'un seul comportement a expliquer. */
    cursor:pointer;
  }

  @media (max-width: 640px){
    /* Trois colonnes conservees, tailles reduites pour que le chiffre tienne
       sur UNE ligne. Avant ce lot, « 2 305,00 € » passait a la ligne et le
       symbole euro se retrouvait seul en dessous.

       ⚠️ `repeat(3, 1fr)` ne donnait PAS trois colonnes egales : `1fr` vaut
       `minmax(auto, 1fr)`, et une colonne ne peut pas descendre sous la largeur
       de son contenu. Les trois tuiles mesuraient 112 / 106 / 96 px — la plus
       chargee poussait les autres. `minmax(0, 1fr)` leve ce plancher et rend
       les trois colonnes reellement egales, condition pour calibrer la police.

       `nowrap` transforme un debordement eventuel en depassement VISIBLE plutot
       qu'en retour a la ligne silencieux : si un montant s'allonge un jour, ca
       se verra tout de suite. */
    .pk-chart-stats{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
    .pk-stat{ padding:11px 9px; border-radius:12px; }
    /* La taille suit la largeur de l'ecran, parce que la place disponible la
       suit aussi : trois colonnes dans (100vw - 60) px, moins 18 px de
       rembourrage, soit environ 33vw - 38px par chiffre. La droite ci-dessous
       est calee sur deux mesures reelles — 87 px de place a 390 px d'ecran,
       63 px a 320 — avec « 2 305,00 € » comme gabarit, le plus large des trois.
       Bornee a 15 px en haut pour ne pas depasser la taille de reference, et a
       10 px en bas pour rester lisible. Une valeur fixe ne pouvait pas tenir :
       14 px passe a 390 px mais deborde des 360. */
    .pk-stat-value{
      font-size:clamp(10px, calc(5.8vw - 8px), 15px);
      letter-spacing:-.01em; white-space:nowrap;
    }
    .pk-stat-label{ font-size:8.5px; letter-spacing:.04em; margin-top:3px; }

    /* Plus la place pour le « i » dans une tuile de 105 px : il sort de la mise
       en page. Mais PAS avec `display:none`, qui l'arracherait a l'ordre de
       tabulation et rendrait la definition inatteignable au clavier. Il est
       seulement retire du flux, et reprend sa taille normale s'il prend le
       focus. C'est desormais la TUILE ENTIERE qui ouvre la definition au clic
       (voir app.js) — a toutes les largeurs, pour n'avoir qu'un comportement. */
    .pk-stat .pk-aide{
      position:absolute; width:1px; height:1px; padding:0; margin:0;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    .pk-stat .pk-aide:focus-visible{
      position:static; width:auto; height:auto; padding:5px; margin:-5px -5px -5px 0;
      overflow:visible; clip-path:none;
    }
  }

  /* ---------- Onglets et plages : le remplissage porte l'etat ----------
     Regle guyhub : pas de contour permanent. L'actif garde sa pastille pleine,
     le reste n'a plus rien, le survol pose un fond discret. Le filet reste
     declare en transparent pour que la boite garde sa taille — sinon tout le
     rang se decale d'un pixel a chaque changement d'onglet. */
  .pk-tab, .pk-range{
    background:transparent; border:1px solid transparent; color:var(--text-dim);
  }
  .pk-tab:hover, .pk-range:hover{ background:var(--surface-2); color:var(--text); }
  /* L'actif est un APLAT PLEIN a la couleur de l'encre, libelle inverse.
     C'est la difference qui fait lire la pastille guyhub : jusqu'au 14/09
     l'actif portait le meme fond discret que le survol — il avait donc
     l'allure d'un element survole, pas d'un element choisi.
     Pas de regle .active:hover a ajouter : a specificite egale, .active est
     declare apres :hover et l'emporte donc deja. */
  .pk-tab.active, .pk-range.active{
    background:var(--text); border-color:transparent; color:var(--bg);
  }
  .pk-range.is-off:hover{ background:transparent; color:var(--text-dim); }

  /* Ordinateur : le conteneur des liens est transparent pour la mise en page */
  .pk-menu-liens{ display:contents; }
  .pk-menu-point, .pk-trigger-croix{ display:none; }

  /* ---------- Menu de l'avatar, mobile (27/10) ----------
     Plein ecran noir (le fond sombre de Predikt, dans les deux themes, sans
     accent) qui s'ouvre en cercle depuis l'avatar (0,3 s) et se referme en
     cercle vers lui (0,2 s) ; --mx, --my, --mr sont poses par le script.
     L'avatar devient une croix blanche et le logo passe en blanc, tous deux
     au-dessus du menu. Grands liens fins qui montent en cascade ; pied :
     nom, email, deconnexion. Une fois le cercle deploye (.is-ouvert), simple
     aplat sans clip-path. */
  @media (max-width: 900px){
    header:has(.pk-menu.open), header.pk-menu-fermeture{ z-index:400; }
    /* Verrou de defilement sur <html> seulement : le header est sticky (pas
       fixe) ; bloquer aussi <body> en ferait un conteneur de defilement a
       part, et le header remonterait hors de l'ecran avec lui. */
    html:has(.pk-menu.open){ overflow:hidden; }

    .pk-menu{
      position:fixed; inset:0; width:auto; z-index:300;
      background:#0b0d07; color:#f2f3f0; border-radius:0; box-shadow:none;
      display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto;
      grid-template-areas:"liens liens" "tete sortie"; align-items:end; gap:0 16px;
      padding:calc(env(safe-area-inset-top, 0px) + 96px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(16px, env(safe-area-inset-left, 0px));
      overflow-y:auto; overscroll-behavior:contain;
      opacity:1; transform:none; pointer-events:none; visibility:hidden;
      -webkit-clip-path:circle(0px at var(--mx, calc(100% - 40px)) var(--my, 38px));
      clip-path:circle(0px at var(--mx, calc(100% - 40px)) var(--my, 38px));
      transition:clip-path .2s cubic-bezier(.55,.055,.675,.19), -webkit-clip-path .2s cubic-bezier(.55,.055,.675,.19), visibility 0s linear .2s;
    }
    .pk-menu.open{
      visibility:visible; pointer-events:auto;
      -webkit-clip-path:circle(var(--mr, 150vmax) at var(--mx, calc(100% - 40px)) var(--my, 38px));
      clip-path:circle(var(--mr, 150vmax) at var(--mx, calc(100% - 40px)) var(--my, 38px));
      transition:clip-path .3s cubic-bezier(.55,.055,.675,.19), -webkit-clip-path .3s cubic-bezier(.55,.055,.675,.19), visibility 0s;
    }
    :root[data-theme="light"] .pk-menu{ box-shadow:none; }   /* noir aussi en theme clair */
    .pk-menu.open.is-ouvert{ -webkit-clip-path:none; clip-path:none; transition:none; }
    .pk-menu::before{ display:none; }
    .pk-menu-sep{ display:none; }

    .pk-menu-liens{ grid-area:liens; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(4px, 1.4vh, 14px); }
    .pk-menu-liens .pk-menu-item{
      position:relative; width:auto; min-height:0; padding:0; gap:0; border-radius:0; background:none;
      font-weight:400; font-size:clamp(2.2rem, 6vw, 3.75rem); letter-spacing:-.02em; line-height:1.15; color:#fff;
      opacity:0; transform:translateY(40px); transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); transition-delay:0s;
      touch-action:manipulation;
    }
    .pk-menu.open .pk-menu-liens .pk-menu-item{ opacity:1; transform:none; transition-delay:calc(.08s + var(--i) * .06s); }
    .pk-menu-liens .pk-menu-item:hover{ background:none; }
    .pk-menu-liens .pk-menu-item svg{ display:none; }
    .pk-menu-point{ position:absolute; left:-26px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#fff; opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .2s ease; }
    .pk-menu-liens .pk-menu-item[aria-current="page"] .pk-menu-point{ opacity:1; transform:none; }
    @media (hover:hover){ .pk-menu-liens .pk-menu-item:hover .pk-menu-point{ opacity:1; transform:none; } }

    /* Pied : nom et email a gauche, deconnexion a droite */
    .pk-menu-head{ grid-area:tete; padding:0; opacity:0; transition:opacity .4s ease .3s; }
    .pk-menu-name{ font-size:13px; font-weight:600; color:#f2f3f0; }
    .pk-menu-mail{ font-size:13px; color:#9a9ca3; }
    .pk-menu .pk-out{ grid-area:sortie; width:auto; min-height:0; padding:0; gap:8px; background:none; font-size:13px; color:#9a9ca3; opacity:0; transition:opacity .4s ease .3s; }
    .pk-menu .pk-out svg{ width:16px; height:16px; color:inherit; }
    .pk-menu .pk-out:hover{ background:none; }
    @media (hover:hover){ .pk-menu .pk-out:hover{ color:#fff; } }
    .pk-menu.open .pk-menu-head, .pk-menu.open .pk-out{ opacity:1; }

    /* Avatar -> croix blanche, au-dessus du menu */
    .pk-user-trigger{ position:relative; z-index:310; }
    .pk-trigger-croix{ display:block; position:absolute; inset:0; pointer-events:none; }
    .pk-trigger-croix span{ position:absolute; left:50%; top:50%; width:22px; height:2px; margin:-1px 0 0 -11px; border-radius:2px; background:#fff; opacity:0; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
    .pk-user-trigger .pk-avatar{ transition:opacity .2s ease, transform .3s cubic-bezier(.22,1,.36,1); }
    header:has(.pk-menu.open) .pk-user-trigger, header.pk-menu-fermeture .pk-user-trigger{ background:transparent; }
    header:has(.pk-menu.open) .pk-user-trigger .pk-avatar{ opacity:0; transform:scale(.6); }
    header:has(.pk-menu.open) .pk-trigger-croix span, header.pk-menu-fermeture .pk-trigger-croix span{ opacity:1; }
    header:has(.pk-menu.open) .pk-trigger-croix span:nth-child(1){ transform:rotate(45deg); }
    header:has(.pk-menu.open) .pk-trigger-croix span:nth-child(2){ transform:rotate(-45deg); }
    header.pk-menu-fermeture .pk-trigger-croix span{ opacity:0; transition-delay:.15s; }

    /* Logo du header en blanc, au-dessus du menu (le pied de page n'est pas concerne) */
    header .logo{ position:relative; z-index:310; }
    header:has(.pk-menu.open) .logo .logo-sombre{ display:block; }
    header:has(.pk-menu.open) .logo .logo-clair{ display:none; }
    header:has(.pk-menu.open)::before{ opacity:0; transition:none; }
  }
  /* De 768 a 900 px : liens alignes a gauche depuis le milieu, point blanc
     devant la page courante et au survol */
  @media (min-width: 768px) and (max-width: 900px){
    .pk-menu-liens{ align-items:flex-start; justify-content:flex-start; padding:22vh 0 0 50%; }
    .pk-menu-point{ display:block; }
  }
  @media (max-width: 900px) and (prefers-reduced-motion: reduce){
    .pk-menu, .pk-menu.open, .pk-menu-liens .pk-menu-item, .pk-menu-point, .pk-menu-head, .pk-menu .pk-out,
    .pk-trigger-croix span, .pk-user-trigger .pk-avatar{ transition-duration:.01ms !important; transition-delay:0s !important; }
  }