/* MatchVisionIA v1.7 — « Nuit de stade » : pelouse sous les projecteurs, craie, or.
   Le vert est réservé aux paris à jouer (TOP). Typo tableau d'affichage pour les chiffres. */
@font-face{font-family:"Big Shoulders";font-weight:600;font-display:swap;src:url(fonts/big-shoulders-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders";font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2")}

:root{
  --nuit:#09110E; --fond:#0D1813; --carte:#111E18; --carte2:#16261F; --carte3:#1C3027;
  --trait:rgba(232,238,226,.075); --trait2:rgba(232,238,226,.14);
  --texte:#ECEFE6; --doux:#9DAAA1; --pale:#66766C;
  --or:#E7B347; --or2:#F7D88A; --or-fond:rgba(231,179,71,.09);
  --vert:#4BE38E; --vert2:#2FBF6F; --vert-fond:rgba(75,227,142,.08);
  --rouge:#F0525A; --rouge-fond:rgba(240,82,90,.10);
  --bleu:#8FB8E8; --direct:#F0525A;
  --r:14px; --r2:10px;
  --titre:"Big Shoulders","Arial Narrow",sans-serif;
  --corps:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --barre:68px; --rail:236px; --haut:env(safe-area-inset-top,0px); --bas:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--nuit);color:var(--texte);font-family:var(--corps);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;overflow-x:hidden}
/* un seul effet d'ambiance : le halo des projecteurs en haut, et la pelouse tondue en bandes */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 520px at 70% -220px, rgba(247,216,138,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 120px, transparent 120px 240px),
    var(--nuit)}
button,input,select{font:inherit;color:inherit}
a{color:var(--or2)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:6px}
.app{max-width:620px;margin:0 auto;min-height:100vh;padding:0 0 calc(var(--barre) + var(--bas) + 24px)}

/* ---------- en-tête (mobile) / colonne de gauche (ordinateur) ---------- */
.entete{position:sticky;top:0;z-index:20;padding:calc(var(--haut) + 10px) 16px 10px;
  background:rgba(9,17,14,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--trait)}
.marque{display:flex;align-items:center;gap:10px}
.marque img{width:40px;height:40px}
.nom{font-family:var(--titre);font-weight:800;font-size:25px;letter-spacing:.02em;line-height:1}
.nom b{color:var(--or);font-weight:800}
.sous{font-size:12px;color:var(--pale);margin-top:2px}
.etat{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--doux);
  border:1px solid var(--trait2);padding:5px 10px;border-radius:99px;white-space:nowrap}
.point{width:7px;height:7px;border-radius:50%;background:var(--vert)}
.point.charge{background:var(--or);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}

.page{padding:20px 16px 0}
.titre-page{font-family:var(--titre);font-weight:800;font-size:44px;line-height:.95;margin:0 0 6px;letter-spacing:.005em}
.titre-page .or{color:inherit}
.date{color:var(--doux);font-weight:500;font-size:14.5px}
.date::first-letter{text-transform:uppercase}
.intro{color:var(--doux);font-size:14.5px;margin:6px 0 4px;max-width:62ch}

/* sélecteur de jour : un bandeau façon tableau d'affichage */
.jours{display:flex;gap:4px;margin:0 0 22px;border-bottom:1px solid var(--trait2)}
.jour-p{flex:1;border:none;background:none;padding:10px 6px 11px;cursor:pointer;text-align:left;color:var(--pale);position:relative}
.jour-p b{display:block;font-family:var(--titre);font-size:22px;font-weight:700;line-height:1;color:var(--doux)}
.jour-p small{font-size:12px;font-weight:500}
.jour-p.actif b{color:var(--texte)}
.jour-p.actif small{color:var(--doux)}
.jour-p.actif::after{content:"";position:absolute;left:0;right:12px;bottom:-1px;height:3px;background:var(--or);border-radius:3px 3px 0 0}
.jour-p:hover b{color:var(--texte)}

.compteurs{display:flex;gap:26px;margin:16px 0 4px;flex-wrap:wrap}
.cpt b{display:block;font-family:var(--titre);font-size:34px;font-weight:700;line-height:1}
.cpt span{font-size:12.5px;color:var(--doux)}
.cpt.vert b{color:var(--vert)}
.cpt.or b{color:var(--or)}
.filtres{display:flex;gap:6px;margin:16px 0 4px;overflow-x:auto;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--trait2);background:transparent;border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--doux);cursor:pointer;white-space:nowrap}
.chip.actif{background:var(--texte);color:var(--nuit);border-color:var(--texte)}

/* ---------- programme ---------- */
.ligue{margin:0 0 18px}
.ligue.hors{opacity:.7}
.ligue-tete{display:flex;align-items:baseline;gap:9px;padding:0 2px 8px;border-bottom:1px solid var(--trait2)}
.drapeau{font-size:17px;line-height:1;align-self:center}
.ligue-tete > div{display:flex;align-items:baseline;gap:8px}
.ligue-nom{font-family:var(--titre);font-weight:700;font-size:21px;line-height:1}
.ligue-pays{font-size:12.5px;color:var(--pale)}
.ligue-top{margin-left:auto;font-size:12px;font-weight:700;color:var(--vert);align-self:center}
.ligue-note{font-size:12.5px;color:var(--pale);padding:8px 2px 2px}

.ligne{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:11px 10px 11px 6px;border-bottom:1px solid var(--trait);cursor:pointer;position:relative;border-radius:2px}
.ligne:hover{background:rgba(232,238,226,.025)}
.heure{font-family:var(--titre);font-weight:700;font-size:19px;color:var(--doux)}
.equipes{min-width:0}
.eq{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:14.5px;white-space:nowrap}
.eq span:first-child{overflow:hidden;text-overflow:ellipsis}
.eq .sc{font-family:var(--titre);font-size:20px;font-weight:700;min-width:16px;text-align:right}
.eq + .eq{margin-top:1px}
.sous-ligne{font-size:13px;color:var(--doux);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sous-ligne b{color:var(--texte);font-weight:700}
.raison{font-size:12.5px;color:var(--pale);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* la tuile de droite = le tableau d'affichage du match */
.tuile-m{min-width:76px;text-align:center;border-radius:8px;padding:5px 8px 6px;border:1px solid var(--trait2)}
.tuile-m b{display:block;font-family:var(--titre);font-weight:800;font-size:22px;line-height:1}
.tuile-m small{display:block;font-size:10.5px;font-weight:600;margin-top:2px;color:var(--pale)}
.tuile-m.top{background:var(--vert);border-color:var(--vert);color:#06170D}
.tuile-m.top small{color:#155330}
.tuile-m.pick{border-color:rgba(231,179,71,.55);color:var(--or2)}
.tuile-m.pick small{color:var(--or)}
.tuile-m.lecture{border-style:dashed;color:var(--doux)}
.tuile-m.gagne{background:var(--vert);border-color:var(--vert);color:#06170D}
.tuile-m.gagne small{color:#155330}
.tuile-m.perdu{background:var(--rouge);border-color:var(--rouge);color:#fff}
.tuile-m.perdu small{color:#ffd9db}
.tuile-m.direct{border-color:var(--direct);color:var(--direct)}
.tuile-m.direct b{animation:pulse 1.6s infinite}
.tuile-m.retire{border-color:rgba(240,82,90,.5);color:var(--rouge)}
.tuile-m.vide{border-color:transparent;color:var(--pale)}

.ligne.top{background:linear-gradient(90deg,rgba(75,227,142,.11),rgba(75,227,142,0) 75%)}
.ligne.top::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--vert)}
.ligne.top .heure{color:var(--vert)}
.ligne.pick::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--or)}
.tag{display:inline-block;font-size:11px;font-weight:700;color:var(--vert);margin-left:6px}
.etoiles{color:var(--or);letter-spacing:1px;font-size:12px}
.etoiles i{color:#2A3B33;font-style:normal}

/* badges (résultats, cartes) */
.badge{font-family:var(--titre);font-weight:800;font-size:15px;padding:3px 9px;border-radius:7px;white-space:nowrap;text-align:center;display:inline-block}
.b-top{color:#06170D;background:var(--vert)}
.b-pick{color:var(--or2);border:1px solid rgba(231,179,71,.55)}
.b-nobet,.b-attente{color:var(--pale);border:1px solid var(--trait2)}
.b-retire{color:var(--rouge);border:1px solid rgba(240,82,90,.5)}
.b-gagne{color:#06170D;background:var(--vert)}
.b-perdu{color:#fff;background:var(--rouge)}
.b-direct{color:#fff;background:var(--direct)}

/* colonne « À jouer » à côté du programme */
.ajouer{border:1px solid rgba(75,227,142,.28);border-radius:var(--r);padding:16px 16px 6px;margin:0 0 24px;
  background:linear-gradient(180deg,rgba(75,227,142,.07),rgba(75,227,142,.01))}
.ajouer h2{font-family:var(--titre);font-weight:800;font-size:26px;margin:0;line-height:1}
.ajouer > p{font-size:13px;color:var(--doux);margin:4px 0 8px}
.aj-l{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-top:1px solid var(--trait);cursor:pointer}
.aj-l .m{font-size:13px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aj-l .p{font-weight:700;font-size:14.5px}
.aj-l .c{grid-row:1/span 2;grid-column:2;font-family:var(--titre);font-weight:800;font-size:30px;color:var(--vert);align-self:center}
.aj-vide{font-size:13.5px;color:var(--doux);padding:10px 0 12px;border-top:1px solid var(--trait)}
.aj-lien{display:block;font-size:13px;font-weight:700;color:var(--or2);padding:10px 0;border-top:1px solid var(--trait);text-decoration:none}

/* ---------- top ---------- */
.total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--trait2);border-bottom:1px solid var(--trait2);padding:12px 2px;margin:16px 0}
.total b{font-family:var(--titre);font-size:28px;color:var(--or)}
.grille-top{display:grid;gap:14px;margin:16px 0}
.carte-top{position:relative;border-radius:var(--r);padding:18px 18px 14px;cursor:pointer;
  background:linear-gradient(180deg,#14261D,#0F1C16);border:1px solid rgba(75,227,142,.30)}
.carte-top:hover{border-color:rgba(75,227,142,.55)}
.carte-top .rang{position:absolute;right:16px;top:12px;font-family:var(--titre);font-weight:800;font-size:15px;color:#06170D;background:var(--vert);border-radius:6px;padding:2px 8px}
.carte-top .meta,.meta{font-size:12.5px;color:var(--doux);font-weight:500}
.carte-top .affiche{font-family:var(--titre);font-weight:800;font-size:28px;line-height:1.02;margin:6px 70px 14px 0}
.jeu{border-top:1px solid var(--trait2);padding:12px 0 2px;display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center}
.jeu .type{font-size:12px;color:var(--doux);font-weight:500}
.jeu .pari{font-weight:800;font-size:17px;line-height:1.25}
.jeu .cote{grid-row:1 / span 2;grid-column:2;text-align:right}
.jeu .cote b{display:block;font-family:var(--titre);font-weight:800;font-size:46px;line-height:.9;color:var(--vert)}
.jeu .cote span{font-size:11.5px;color:var(--doux)}
.jeu-bas{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pastille{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--trait2);color:var(--doux)}
.pastille.mise{color:var(--or2);border-color:rgba(231,179,71,.45)}
.pastille.ok{color:var(--vert);border-color:rgba(75,227,142,.35)}
.pourquoi{margin:14px 0 0;padding:0;list-style:none}
.pourquoi li{position:relative;padding:0 0 7px 16px;font-size:13.5px;color:#D1D8CF}
.pourquoi li::before{content:"";position:absolute;left:1px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--vert)}
.mini{font-size:12.5px;color:var(--pale);margin-top:8px}
.vide{padding:34px 22px;border:1px dashed var(--trait2);border-radius:var(--r);margin:18px 0}
.vide img{display:none}
.vide .gros{font-family:var(--titre);font-size:30px;font-weight:800;margin:0 0 6px;line-height:1}
.vide p{color:var(--doux);margin:0;max-width:52ch;font-size:14.5px}
.liste-simple{border-top:1px solid var(--trait2)}
.liste-simple .ligne{grid-template-columns:52px 1fr auto}
.section{font-family:var(--titre);font-weight:800;font-size:26px;margin:34px 0 4px;line-height:1}

/* ---------- résultats ---------- */
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:18px 0;border-top:1px solid var(--trait2);border-bottom:1px solid var(--trait2)}
.tuile{padding:14px 4px;text-align:left}
.tuile + .tuile{border-left:1px solid var(--trait);padding-left:16px}
.tuile b{display:block;font-family:var(--titre);font-size:42px;font-weight:800;line-height:1}
.tuile span{font-size:12.5px;color:var(--doux)}
.tuile.v b{color:var(--vert)} .tuile.p b{color:var(--rouge)}
.bilan{display:flex;justify-content:space-between;align-items:center;border-radius:var(--r);padding:14px 16px;margin-bottom:6px;border:1px solid var(--trait2)}
.bilan b{font-family:var(--titre);font-size:36px;font-weight:800}
.bilan.plus b{color:var(--vert)} .bilan.moins b{color:var(--rouge)}
.res-ligne{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--trait)}
.ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.ico.gagne{background:var(--vert);color:#06170D}
.ico.perdu{background:var(--rouge);color:#fff}
.ico.attente{border:1px dashed var(--trait2);color:var(--pale)}
.ico.annule{border:1px solid var(--trait2);color:var(--pale)}
.res-droite{text-align:right}
.res-droite b{font-family:var(--titre);font-size:22px}
.res-droite .g{color:var(--vert)} .res-droite .p{color:var(--rouge)}

/* ---------- gros gains ---------- */
.calendrier{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;margin:16px 0 6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.jour{scroll-snap-align:start;flex:0 0 auto;width:60px;border-radius:10px;border:1px solid var(--trait2);padding:8px 0 7px;text-align:center;cursor:pointer}
.jour small{display:block;font-size:11px;color:var(--doux);font-weight:500}
.jour b{display:block;font-family:var(--titre);font-size:28px;font-weight:800;line-height:1.05}
.jour i{display:block;font-style:normal;font-size:11px;color:var(--vert);font-weight:700}
.jour.actif{background:var(--texte);color:var(--nuit);border-color:var(--texte)}
.jour.actif small{color:#3d4a42} .jour.actif i{color:#14753f}
.grille-gains{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px}
.vignette{aspect-ratio:9/16;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;border:1px solid rgba(231,179,71,.35);
  background:linear-gradient(180deg,#16291F,#0A130F);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 10px;text-align:center}
.vignette:hover{border-color:var(--or)}
.vignette img{width:40px}
.vignette .ok{font-family:var(--titre);font-weight:800;color:var(--vert);font-size:17px}
.vignette .vt{font-family:var(--titre);font-weight:800;font-size:19px;line-height:1.05}
.vignette .vp{font-size:11.5px;color:#D1D8CF;font-weight:600}
.vignette .vc{font-family:var(--titre);font-weight:800;font-size:46px;line-height:1;color:var(--or)}
.vignette .vm{font-size:9px;color:var(--doux)}
.vignette.combi{border-color:rgba(75,227,142,.45)}

/* ---------- compte ---------- */
.bloc{border:1px solid var(--trait2);border-radius:var(--r);padding:4px 16px;margin:14px 0}
.bloc h3{font-family:var(--titre);font-weight:800;font-size:22px;margin:14px 0 4px}
.champ{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--trait)}
.bloc h3 + .champ,.champ:first-child{border-top:none}
.champ label{font-weight:700;font-size:14.5px}
.champ small{display:block;color:var(--pale);font-size:12.5px;font-weight:400;margin-top:2px}
.champ input[type=text],.champ input[type=number],.champ input[type=password],.champ input[type=email],.champ select{
  width:118px;background:var(--nuit);border:1px solid var(--trait2);border-radius:8px;padding:9px 10px;text-align:right;font-weight:700;outline:none}
.champ input:focus{border-color:var(--or)}
.champ input.large{width:100%;text-align:left}
.interrupteur{position:relative;width:46px;height:28px;flex:0 0 auto}
.interrupteur input{opacity:0;width:0;height:0}
.interrupteur span{position:absolute;inset:0;border-radius:99px;background:#2A3A32;transition:.2s;cursor:pointer}
.interrupteur span::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.interrupteur input:checked + span{background:var(--vert2)}
.interrupteur input:checked + span::after{transform:translateX(18px)}
.interrupteur input:focus-visible + span{outline:2px solid var(--or);outline-offset:2px}
.bouton{display:block;width:100%;border:none;border-radius:10px;padding:14px;font-weight:800;font-size:15px;cursor:pointer;margin:12px 0;background:var(--or);color:#1E1503}
.bouton:hover{background:var(--or2)}
.bouton.sombre{background:transparent;color:var(--texte);border:1px solid var(--trait2)}
.bouton.sombre:hover{border-color:var(--doux)}
.bouton.petit{display:inline-block;width:auto;padding:9px 14px;font-size:13px;margin:6px 0}
.lien-admin{display:block;text-align:center;color:var(--pale);font-size:13px;margin:22px 0 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;background:none;border:none;width:100%}
.bientot{position:relative;border-radius:var(--r);padding:16px;margin:14px 0;border:1px solid rgba(143,184,232,.3)}
.bientot .etq{position:absolute;right:14px;top:14px;font-size:12px;font-weight:700;color:var(--bleu)}
.bientot h4{font-family:var(--titre);font-size:24px;font-weight:800;margin:0 0 4px}
.bientot p{margin:0;color:var(--doux);font-size:13.5px}
.responsable{font-size:12.5px;color:var(--pale);margin:26px 0 0;line-height:1.5;max-width:70ch}
.responsable b{color:var(--doux)}
.sources-l{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--trait);font-size:13.5px}
.bloc h3 + .sources-l{border-top:none}
.sources-l .pt{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pt.ok{background:var(--vert)} .pt.panne{background:var(--rouge)} .pt.inconnu{background:var(--pale)}
.sources-l small{display:block;color:var(--pale);font-size:12px}
.journal{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--doux);max-height:340px;overflow:auto;background:var(--nuit);border-radius:8px;padding:10px;margin:10px 0 14px;white-space:pre-wrap}
.journal .erreur{color:var(--rouge)} .journal .alerte{color:var(--or2)}
.ligues-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;padding:8px 0 14px}
.ligues-choix label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;border:1px solid var(--trait);border-radius:8px;padding:8px 10px;cursor:pointer}

/* ---------- fiche match (panneau) ---------- */
.voile{position:fixed;inset:0;background:rgba(4,8,6,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}
.voile.ouvert{opacity:1;pointer-events:auto}
.panneau{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:620px;margin:0 auto;max-height:92vh;overflow-y:auto;
  background:var(--fond);border:1px solid var(--trait2);border-bottom:none;border-radius:20px 20px 0 0;
  transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);padding:0 20px calc(26px + var(--bas))}
.panneau.ouvert{transform:none}
.poignee{position:sticky;top:0;padding:10px 0 8px;background:var(--fond);z-index:2;display:flex;justify-content:center}
.poignee span{width:40px;height:4px;border-radius:9px;background:#2C3D34}
.fermer{position:absolute;right:0;top:8px;width:34px;height:34px;border-radius:50%;border:1px solid var(--trait2);background:var(--fond);color:var(--doux);font-size:18px;cursor:pointer}
.f-meta{font-size:13px;color:var(--doux);font-weight:500}
.f-affiche{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:16px 0 6px;text-align:center}
.f-affiche .eqn{font-family:var(--titre);font-weight:800;font-size:28px;line-height:1}
.f-affiche .vs{font-family:var(--titre);font-weight:800;font-size:36px;color:var(--or)}
.bandeau{border-radius:10px;padding:12px 14px;margin:14px 0 4px;font-weight:700;display:flex;gap:10px;align-items:center}
.bandeau.top{background:var(--vert);color:#06170D}
.bandeau.top small{color:#155330}
.bandeau.pick{border:1px solid rgba(231,179,71,.45);color:var(--or2)}
.bandeau.nobet{border:1px solid var(--trait2);color:var(--doux)}
.bandeau.retire{border:1px solid rgba(240,82,90,.45);color:var(--rouge)}
.bandeau small{display:block;font-weight:500;color:var(--doux);font-size:13px;margin-top:2px}
.f-titre{font-family:var(--titre);font-weight:800;font-size:24px;margin:24px 0 8px;display:flex;gap:8px;align-items:center}
.f-titre .n{display:none}
.rejet{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--trait);font-size:13.5px}
.bloc .rejet:first-child{border-top:none}
.rejet b{font-weight:700}
.rejet span{color:var(--doux);font-size:12.5px}
.rejet .c{font-family:var(--titre);font-size:20px;color:var(--doux);white-space:nowrap}
details.repli{border-top:1px solid var(--trait2);margin:0;padding:0 2px}
details.repli:last-of-type{border-bottom:1px solid var(--trait2)}
details.repli summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:14.5px;list-style:none;display:flex;justify-content:space-between}
details.repli summary::-webkit-details-marker{display:none}
details.repli summary::after{content:"+";color:var(--or);font-size:18px;line-height:1}
details.repli[open] summary::after{content:"–"}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--trait);font-size:13px}
.kv span{color:var(--doux)} .kv b{text-align:right;font-weight:600}
.filtre{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--trait);font-size:13px}
.filtre .code{font-family:var(--titre);font-weight:800;font-size:16px;min-width:44px;color:var(--doux)}
.filtre.bloque .code{color:var(--rouge)} .filtre.ok .code{color:var(--vert)} .filtre.alerte .code{color:var(--or2)}
.compo{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12.5px;padding-bottom:12px}
.compo b{display:block;font-family:var(--titre);font-size:18px;margin-bottom:4px;color:var(--or2)}
.compo div{color:#D1D8CF}
.alerte-l{font-size:13px;color:var(--or2);padding:6px 0}

/* ---------- carte TikTok ---------- */
.apercu{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:10px}
.apercu canvas{width:min(78vw,320px);height:auto;border-radius:14px;border:1px solid var(--trait2)}
.actions{display:flex;gap:10px;width:100%}
.actions .bouton{margin:0}

/* ---------- barre du bas (mobile) ---------- */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:6px 8px calc(6px + var(--bas));
  background:rgba(9,17,14,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--trait)}
.barre nav{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr)}
.onglet{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--pale);font-size:11px;font-weight:600;text-decoration:none;position:relative;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.onglet svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.onglet:hover{color:var(--doux)}
.onglet.actif{color:var(--texte)}
.onglet.actif svg{stroke:var(--or)}
.onglet .pastille-n{position:absolute;top:2px;left:calc(50% + 6px);background:var(--vert);color:#06170D;font-size:10.5px;font-weight:800;border-radius:99px;padding:0 5px;line-height:16px}

.toast{position:fixed;left:50%;bottom:calc(var(--barre) + var(--bas) + 16px);transform:translateX(-50%) translateY(20px);opacity:0;z-index:60;
  background:var(--texte);color:var(--nuit);font-weight:700;padding:10px 16px;border-radius:10px;transition:.25s;font-size:14px;pointer-events:none;max-width:90vw}
.toast.vu{opacity:1;transform:translateX(-50%)}
.chargement{display:flex;justify-content:center;padding:60px 0}
.chargement span{width:30px;height:30px;border-radius:50%;border:3px solid var(--trait2);border-top-color:var(--or);animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.connexion{max-width:420px;margin:40px auto;padding:0 18px}
.connexion img{width:90px}
.info-avenir{margin:14px 0 0;font-size:13.5px;color:var(--doux);border-left:3px solid var(--bleu);padding:4px 0 4px 12px;max-width:62ch}
.test-band{font-size:13.5px;color:var(--doux);border-left:3px solid var(--bleu);padding:4px 0 4px 12px;margin:14px 0;max-width:66ch}
.test-band b{color:var(--bleu)}

/* combinés */
.carte-combi{margin:14px 0;border-radius:var(--r);padding:16px 16px 14px;border:1px solid rgba(231,179,71,.35);background:linear-gradient(180deg,#1A2419,#111B15)}
.combi-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.combi-tete .meta{font-family:var(--titre);font-weight:800;font-size:22px;color:var(--texte)}
.combi-chances{font-size:13px;color:var(--doux);margin-top:2px}
.combi-cote{text-align:right}
.combi-cote b{display:block;font-family:var(--titre);font-weight:800;font-size:46px;line-height:.9;color:var(--or)}
.combi-cote span{font-size:11.5px;color:var(--doux)}
.combi-leg{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--trait);cursor:pointer}
.combi-leg .h{font-family:var(--titre);font-weight:700;color:var(--doux);font-size:18px}
.combi-leg b{display:block;font-size:13.5px}
.combi-leg small{color:var(--doux);font-size:12.5px}
.combi-leg .c{font-family:var(--titre);font-weight:800;font-size:21px}
.combi-leg.gagne .c{color:var(--vert)} .combi-leg.perdu .c{color:var(--rouge)}

/* détecteur de value */
.value-l{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:13px 0;border-top:1px solid var(--trait)}
.bloc .value-l:first-child{border-top:none}
.value-l .m{font-weight:700;font-size:14.5px}
.value-l .d{font-size:12.5px;color:var(--doux)}
.value-l .c{text-align:right}
.value-l .c b{display:block;font-family:var(--titre);font-size:34px;font-weight:800;color:var(--vert);line-height:1}
.value-l .c span{font-size:12px;color:var(--doux)}
.ecart{display:inline-block;font-size:12px;font-weight:800;color:#06170D;background:var(--vert);border-radius:6px;padding:1px 6px;margin-left:6px}
.livre{display:inline-block;font-size:12px;font-weight:700;color:var(--or2);border:1px solid rgba(231,179,71,.4);border-radius:6px;padding:1px 6px}

/* ---------- grand écran : colonne de navigation à gauche, contenu large ---------- */
@media (min-width:1000px){
  body{padding-left:var(--rail)}
  .app{max-width:1180px;padding:0 40px 60px}
  .entete{position:fixed;left:0;top:0;width:var(--rail);padding:28px 22px 18px;background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:31}
  .marque{flex-wrap:wrap}
  .marque img{width:44px;height:44px}
  .etat{position:fixed;left:22px;bottom:22px;margin:0}
  .barre{top:0;bottom:0;right:auto;width:var(--rail);padding:150px 14px 20px;border-top:none;border-right:1px solid var(--trait);background:rgba(13,24,19,.6)}
  .barre nav{display:flex;flex-direction:column;gap:2px;max-width:none}
  .onglet{flex-direction:row;gap:12px;padding:11px 12px;font-size:15px;border-radius:8px;justify-content:flex-start}
  .onglet svg{width:21px;height:21px}
  .onglet:hover{background:rgba(232,238,226,.04)}
  .onglet.actif{background:rgba(232,238,226,.06)}
  .onglet .pastille-n{position:static;margin-left:auto;font-size:12px;line-height:18px;padding:0 7px}
  .page{padding:40px 0 0}
  .titre-page{font-size:64px}
  .jours{max-width:560px}
  .mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
  .mise-en-page .ajouer{position:sticky;top:30px;order:2}
  .grille-top{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
  .combis{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
  .combis .carte-combi{margin:0}
  .panneau{left:auto;right:0;top:0;bottom:0;max-height:none;width:560px;max-width:none;border-radius:0;border:none;border-left:1px solid var(--trait2);transform:translateX(105%)}
  .panneau.ouvert{transform:none}
  .poignee span{visibility:hidden}
  .toast{bottom:28px}
  .etroit{max-width:720px}
}
.tel{display:none}
@media (min-width:1000px){
  .tel:not([hidden]){display:block;margin:26px 12px 0;padding:14px 0 0;border-top:1px solid var(--trait);font-size:12px;color:var(--doux)}
  .tel b{display:block;font-size:13px;color:var(--texte);margin-bottom:8px}
  .tel img{display:block;width:120px;height:120px;border-radius:6px;image-rendering:pixelated;margin-bottom:8px}
  .tel code{display:block;font-family:inherit;font-weight:700;color:var(--or2);font-size:12.5px;margin:2px 0;word-break:break-all}
  .tel small{color:var(--pale)}
  /* contenu collé à la colonne de gauche, largeur de lecture tenue */
  .app{margin:0;max-width:1240px;padding:0 56px 60px}
  .mise-en-page{grid-template-columns:minmax(0,760px) 340px;justify-content:start;gap:48px}
}
/* très grands écrans (iMac, Studio Display) : tout est agrandi */
@media (min-width:1700px){html{zoom:1.15}}
@media (min-width:2200px){html{zoom:1.35}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v1.8 : cote Gold, système value, combiné fun */
.carte-combi.gold{border:1.5px solid var(--or);background:radial-gradient(520px 220px at 100% 0%,rgba(231,179,71,.18),transparent 70%),linear-gradient(180deg,#1F2716,#121B14);margin:18px 0 6px}
.carte-combi.gold .meta{color:var(--or2)}
.carte-combi.systeme{border-color:rgba(75,227,142,.45)}
.carte-combi.systeme .combi-cote b{color:var(--vert)}
.combi-note{font-size:13px;color:var(--doux);margin:0 0 6px;max-width:60ch}
.aj-gold{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-decoration:none;color:var(--texte);border-top:1px solid var(--trait);padding:12px 0}
.aj-gold span{font-weight:800;color:var(--or2);font-size:14px}
.aj-gold b{grid-row:1/span 2;grid-column:2;font-family:var(--titre);font-size:32px;color:var(--or);align-self:center}
.aj-gold small{color:var(--doux);font-size:12.5px}
.tuile-m.gold{background:var(--or);border-color:var(--or);color:#1E1503}
.tuile-m.gold small{color:#5a4210;font-weight:700}
.ligne.gold{background:linear-gradient(90deg,rgba(231,179,71,.14),rgba(231,179,71,0) 75%)}
.ligne.gold::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--or)}
.ligne.gold .heure{color:var(--or)}
.sous-ligne.gold{color:var(--or2)}
.aj-gold.fun span{color:var(--vert)} .aj-gold.fun b{color:var(--vert)}
.tuile-fin{font-size:11px;color:var(--pale);min-width:76px;text-align:center}
.freq-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 14px}
.freq-chiffres div{background:rgba(232,238,226,.04);border:1px solid var(--trait);border-radius:10px;padding:10px 6px;text-align:center}
.freq-chiffres b{display:block;font-family:var(--titre);font-size:28px;line-height:1;color:var(--or2)}
.freq-chiffres small{display:block;font-size:11px;color:var(--pale);margin-top:4px}
.freq-jours{display:grid;gap:4px;margin-bottom:10px}
.freq-j{display:grid;grid-template-columns:70px 1fr 34px 54px;align-items:center;gap:8px;font-size:12px}
.freq-j span{color:var(--pale)}
.freq-j i{display:block;height:8px;border-radius:4px;background:var(--vert);min-width:2px}
.freq-j b{text-align:right}
.freq-j small{color:var(--vert);font-size:10.5px}
@media (max-width:520px){.freq-chiffres{grid-template-columns:repeat(2,1fr)}}