/* Mon coach STEAVE — design MVP validé (E Équipes resserrée) */
:root {
  --bg:#F7F6F0; --card:#FFFFFF; --ink:#15180D; --sub:#7C8271; --line:#E4E7DA;
  --jaune:#FFED27; --bleu:#2882D0; --rouge:#D0282B; --vert:#319F1D; --vert-t:#EFF7EC;
  --steel:#EBEEF2; --steel2:#D7DCE3;
  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --body:'Space Grotesk','Trebuchet MS',system-ui,sans-serif;
}
* { box-sizing:border-box; }
html, body { overscroll-behavior:none; }
body { margin:0; font-family:var(--body); background:var(--bg); color:var(--ink); }
/* ---- V10 · ligne 5 — le fond d'écran ----
   Symétrique du grain (body::after) par le bas : UNE seule couche fixe, le voile
   et l'image voyagent dans la même déclaration. Pas de
   background-attachment:fixed — il saute et casse dès qu'un parent transforme.
   En fixed, l'image est recadrée par la FENÊTRE, pas par la page : une page
   longue ne l'étire plus. Les variables sont posées par chargerEtat(). */
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  display:none; background-image:var(--fond-voile), var(--fond-img);
  background-size:cover; background-position:var(--fond-pos, center); }
body.a-fond::before { display:block; }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

.h-display { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:0.01em; }
.kicker { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--sub); font-weight:800; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 2px 0 var(--line); position:relative; }
.hero { border:2px solid var(--ink); box-shadow:5px 5px 0 rgba(21,24,13,0.14); }
.btn { cursor:pointer; user-select:none; }
/* boutons : texte toujours centré verticalement ET horizontalement */
.btn1 { background:var(--jaune); color:var(--ink); font-weight:800; border:1.5px solid var(--ink); border-radius:8px; padding:12px 14px; text-align:center; font-size:13px; line-height:1.25; display:flex; align-items:center; justify-content:center; }
.btn1:hover { filter:brightness(1.04); }
.btn2 { border:1.5px solid var(--ink); color:var(--ink); border-radius:8px; padding:10px 14px; text-align:center; font-size:13px; font-weight:700; background:var(--card); line-height:1.25; display:flex; align-items:center; justify-content:center; }
.tag-jour { background:var(--card); border:1.5px solid var(--ink); border-radius:6px; padding:4px 10px; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; font-weight:800; display:inline-block; }
/* V10 · ligne 2 — « séance du jour · faite ✓ ». Teinte claire + liseré, jamais
   d'aplat. LE TAG SEUL change : la carte ne bouge pas. */
.tag-jour.tag-fait { background:var(--vert-t); border-color:var(--vert); color:#2C7A1A; }

/* ---- layout ---- */
.app { display:flex; min-height:100vh; position:relative; z-index:1; }
.nav { width:224px; background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 14px; flex-shrink:0; position:sticky; top:0; height:100vh; overflow:hidden; transition:width 0.22s ease; }
.navitem { display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:6px; color:var(--sub); font-size:14px; font-weight:700; cursor:pointer; }
.navitem svg { flex-shrink:0; }
.navactive { background:var(--jaune); color:var(--ink); border:1.5px solid var(--ink); }
.dossard { background:var(--ink); border-radius:8px; padding:8px 12px; transform:rotate(-2deg); margin-top:10px; transition:width 0.22s ease, height 0.22s ease, padding 0.22s ease, border-radius 0.22s ease; }

/* ---- V10 · ligne 1 — la nav en rail ----
   ⚠️ `.rail` est DÉJÀ pris par le rail du panneau STEAVE (#rail, à droite).
   Le rail de gauche est un ÉTAT de la nav : body.nav-pliee. Aucune mémoire —
   l'app s'ouvre toujours dépliée (tranché par Max le 11 sept.).
   Deux durées : 0,22 s pour la largeur et le chevalier (la valeur du panneau),
   0,09 s pour les libellés — ils s'effacent AVANT que la largeur bouge. */
.nav-tete { display:flex; align-items:center; gap:10px; }
.nav-titre { font-size:22px; line-height:0.95; }
.nav-liste { display:flex; flex-direction:column; gap:5px; margin-top:16px; }
.dossard-kicker, .dossard-focus, .navitem span { white-space:nowrap; transition:opacity 0.09s ease, width 0.09s ease; }
/* le titre garde son comportement déplié (deux lignes, <br> explicite) :
   le nowrap n'apparaît qu'au repli, sinon un mot trop large serait coupé. */
.nav-titre { transition:opacity 0.09s ease, width 0.09s ease; }
.chevalier img { transition:width 0.22s ease, height 0.22s ease; }
.dossard-kicker { font-size:9px; letter-spacing:0.14em; font-weight:700; opacity:0.7; color:#fff; }
.dossard-num { font-size:30px; color:var(--jaune); transition:font-size 0.22s ease; }
.dossard-focus { font-size:10px; font-weight:700; color:#fff; }
/* le pied : Réglages, et la bascule qui VOYAGE en diagonale vers sa place */
.nav-pied { margin-top:auto; position:relative; height:42px; transition:height 0.22s ease; }
/* V10.1 — nav dépliée ET page Réglages ouverte : l'entrée active occupait toute
   la colonne et la bascule tombait dans le bloc jaune. L'entrée s'arrête à
   160 px, la bascule vit dans le blanc. L'état rail reprend la main plus bas. */
.nav-pied .navitem { width:160px; }
.nav-bascule { position:absolute; left:170px; top:8px; width:26px; height:26px;
  border:1.5px solid var(--line); border-radius:5px; background:var(--card);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:left 0.22s ease, top 0.22s ease; }
.nav-bascule:hover { border-color:var(--ink); }
.nav-bascule svg { transition:transform 0.22s ease; }

body.nav-pliee .nav { width:72px; }
body.nav-pliee .nav-tete { justify-content:center; }
body.nav-pliee .chevalier img { width:44px; height:65px; }
/* les libellés ne perdent pas que leur encre : ils perdent leur LARGEUR.
   Sinon ils poussent l'icône et le chevalier hors du rail (overflow:hidden). */
body.nav-pliee .nav-tete { gap:0; }
body.nav-pliee .nav-titre, body.nav-pliee .navitem span { opacity:0; width:0; overflow:hidden; white-space:nowrap; }
body.nav-pliee .dossard { width:44px; height:34px; padding:0; border-radius:7px; align-self:center;
  display:flex; align-items:center; justify-content:center; }
body.nav-pliee .dossard-kicker, body.nav-pliee .dossard-focus { opacity:0; height:0; overflow:hidden; }
body.nav-pliee .dossard-num { font-size:19px; }
body.nav-pliee .nav-liste { align-items:center; }
body.nav-pliee .navitem { width:44px; height:44px; padding:0; gap:0; justify-content:center; align-self:center; }
body.nav-pliee .nav-pied { height:78px; }
body.nav-pliee .nav-bascule { left:9px; top:48px; }
body.nav-pliee .nav-bascule svg { transform:rotate(180deg); }
/* le mouvement respecte le réglage système (même sélecteur, sinon aucune
   spécificité ajoutée — piège déjà payé sur le squelette) */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-pied, .nav-bascule, .chevalier img, .dossard, .dossard-num { transition:none; }
}
.contenu { flex:1 1 0; min-width:0; padding:24px 32px 26px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:clip; }  /* V11 : clip, pas hidden — sinon l'en-tête sticky du Programme ne colle pas */
/* l'illustration de fond reste TOUJOURS derrière les blocs (y compris depuis que
   le contenu est encapsulé dans des .page — sinon elle repasse au-dessus) */
.contenu > *, .page > * { position:relative; z-index:1; }
.rail { width:60px; background:var(--card); border-left:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:12px; flex-shrink:0; cursor:pointer; position:sticky; top:0; height:100vh; }
.rail:hover { background:#FDFCF6; }
.badge { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:var(--rouge); border:2px solid var(--card); display:none; }
.badge.on { display:block; }

/* ---- semaine ---- */
.grille7 { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.seance { border-radius:8px; padding:9px 10px; display:flex; flex-direction:column; gap:3px; font-size:12px; line-height:1.35; }
.creneau { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sub); font-weight:800; }
.chip-fait { background:var(--vert-t); border:1.5px solid var(--vert); }
.chip-fait .creneau { color:#2C7A1A; }
.chip-prevu { background:var(--card); border:1.5px solid var(--line); }
.chip-auj { border:2px solid var(--ink); }
/* V10 · ligne 3 — l'étiquette de colonne de « Ma semaine ». Elle était écrite en
   styles en ligne dans app.js : elle passe ici. Aujourd'hui porte une pastille
   encre, et le suffixe « · auj. » disparaît — la pastille le dit déjà. */
/* V10.1 — les SEPT étiquettes ont la même hauteur (19 px), sinon la carte du
   jour partait 6 px plus bas que ses six voisines et la ligne du haut du
   bandeau n'en était plus une. La pastille ne change plus que la couleur. */
.jour-etiq { font-size:11px; text-align:center; font-weight:700; color:var(--sub); padding:3px 0; }
.jour-etiq-auj { display:block; width:fit-content; margin:0 auto; background:var(--ink);
  color:#FFFFFF; border-radius:11px; padding:3px 11px; font-size:11px; font-weight:700; }
.chip-repos { border:1.5px dashed var(--line); color:var(--sub); text-align:center; padding:14px 8px; font-size:11px; border-radius:8px; }
.chip-esquisse { border:1.5px dashed var(--line); color:var(--sub); font-style:italic; background:transparent; }
.pastille-adapt { position:absolute; top:-5px; right:-5px; width:11px; height:11px; border-radius:50%; background:var(--card); border:2px solid var(--ink); }  /* encore portée par Ma semaine (page Aujourd'hui) */
.legend { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--sub); font-weight:600; }

/* ---- panneau STEAVE : dans le flux, il POUSSE le dashboard (jamais par-dessus) ---- */
.panneau { width:0; flex-shrink:0; overflow:hidden; background:var(--card); border-left:0 solid var(--ink);
  display:flex; flex-direction:column; transition:width .22s ease; position:sticky; top:0; height:100vh; }
.panneau.ouvert { width:400px; border-left-width:1.5px; }
.panneau > * { width:400px; flex-shrink:0; box-sizing:border-box; }
.panneau > .pan-corps { flex:1 1 0; }
body.pan-open .rail { display:none; }
body.pan-open #mode-ia { display:none; }
.pan-head { display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1.5px solid var(--line); }
.pan-ctx { padding:8px 16px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sub); border-bottom:1.5px solid var(--bg); font-weight:700; }
.pan-corps { flex:1 1 0; overflow-y:auto; overscroll-behavior:contain; padding:16px; display:flex; flex-direction:column; gap:11px; }
.bsteave { background:#F0EFE6; border-radius:10px 10px 10px 2px; padding:10px 12px; font-size:13px; line-height:1.5; max-width:88%; align-self:flex-start; white-space:pre-wrap; }
.bmoi { background:var(--card); border:1.5px solid var(--ink); border-radius:10px 10px 2px 10px; padding:10px 12px; font-size:13px; line-height:1.5; align-self:flex-end; max-width:84%; white-space:pre-wrap; }
.sysrow { align-self:center; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#2C7A1A; background:var(--vert-t); border:1.5px solid var(--vert); border-radius:14px; padding:4px 12px; text-align:center; }
.hstamp { align-self:center; font-size:10px; color:var(--sub); font-weight:600; }
.minibtn { font-size:12px; border:1.5px solid var(--ink); border-radius:6px; padding:6px 11px; font-weight:700; background:var(--card); cursor:pointer; display:inline-block; }
.minibtn:hover { background:var(--jaune); }
.boutons { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
/* ---- saisie multi-ligne (V9) : jusqu'à 6 lignes, puis défilement ----
   La hauteur est posée ligne à ligne en JS (autoTaille) ; max-height est le
   garde-fou : 6 × 19,5 px de ligne + 20 px de padding + 3 px de bordures. */
.pan-saisie { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; }
.pan-ligne { display:flex; gap:8px; align-items:flex-end; }
.pan-saisie textarea { flex:1 1 0; min-width:0; display:block; border:1.5px solid var(--line);
  border-radius:8px; padding:10px 12px; font-size:13px; line-height:19.5px; font-family:var(--body);
  color:var(--ink); outline:none; resize:none; overflow-y:auto; max-height:140px; }
.pan-saisie textarea:focus { border-color:var(--ink); }
.pan-envoi { width:40px; height:43px; flex-shrink:0; border-radius:8px; background:var(--jaune); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ---- pastilles de dépôt (V9) : le fichier se pose dans le champ et attend ----
   Une pastille par fichier. Elle porte les faits — ou son propre refus, jamais
   STEAVE : un fichier refusé ne lui est pas raconté, il n'est jamais entré. */
.pan-pastilles { display:flex; flex-direction:column; gap:6px; }
.pan-pastilles:empty { display:none; }
.pastille-fit { display:flex; align-items:center; gap:9px; background:var(--card);
  border:1.5px solid var(--ink); border-radius:8px; padding:7px 9px; }
.pastille-fit .fit-ico { width:28px; height:28px; border-radius:6px; font-size:8px; }
.pf-corps { flex:1 1 0; min-width:0; }
.pf-nom { font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-faits { font-size:10px; font-weight:600; color:var(--sub); margin-top:1px; }
.pf-x { flex-shrink:0; width:20px; height:20px; border-radius:5px; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; color:var(--sub); cursor:pointer; }
.pf-x:hover { background:var(--bg); color:var(--ink); }
.pastille-fit.refus { border-color:var(--rouge); }
.pastille-fit.refus .fit-ico { background:var(--card); border-color:var(--rouge); color:var(--rouge); }
.pastille-fit.refus .pf-faits { color:var(--rouge); font-weight:700; }
/* pendant la lecture du fichier : une barre grise, jamais une progression */
.pf-barre { height:9px; width:54%; border-radius:2px; background:var(--line); margin-top:3px;
  animation:battement 1.6s ease-in-out infinite; }

/* ---- squelette d'attente (V9) : la place du message à venir ----
   Trois barres grises qui battent lentement, là où le message va s'écrire.
   JAMAIS une barre de progression : on ne sait pas combien de temps ça prend. */
.squelette { align-self:flex-start; width:72%; max-width:88%; }
.squelette-nom { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sub);
  font-weight:700; margin-bottom:7px; }
.squelette span { display:block; height:9px; border-radius:2px; background:var(--line); }
.squelette span + span { margin-top:7px; }
.squelette span:nth-of-type(1) { width:92%; animation:battement 1.6s ease-in-out infinite; }
.squelette span:nth-of-type(2) { width:100%; animation:battement 1.6s ease-in-out 0.18s infinite; }
.squelette span:nth-of-type(3) { width:54%; animation:battement 1.6s ease-in-out 0.36s infinite; }
@keyframes battement { 0%, 100% { opacity:1; } 50% { opacity:0.42; } }

/* ---- dépôt d'un fichier (V9) : toute la fenêtre accepte, le panneau est désigné ----
   Le panneau s'ouvre AU LÂCHER, jamais au survol : le survol se contente de dire
   où le fichier va tomber. Panneau fermé, c'est le rail qui en tient lieu. */
/* V10 · ligne 7 — remise en conformité avec le banc d'essai
   (docs/design/v9-depot-banc-essai.html). La V9 n'avait livré qu'un liseré bleu :
   il disait OÙ le fichier tombe, le sous-titre dit CE QUI VA SE PASSER — la seule
   chose qui prévient que le lâcher n'envoie pas tout de suite.
   Le bleu était hors-charte : une cible est une ACTION, donc jaune cerclé d'encre. */
.depot-voile { display:none; position:fixed; inset:0; z-index:900; pointer-events:none;
  background:rgba(247,246,240,0.72); backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
  justify-content:flex-end; align-items:stretch; padding:10px; }
body.depot .depot-voile { display:flex; }
.depot-cible { width:340px; border:2px dashed var(--ink); border-radius:8px;
  background:rgba(255,237,39,0.20); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px; text-align:center; padding:20px; }
body.pan-open .depot-cible { width:380px; }
.depot-pastille { width:14px; height:14px; border-radius:50%; background:var(--jaune); border:1.5px solid var(--ink); }
.depot-titre { font-size:22px; }
.depot-sous { font-size:12.5px; color:var(--sub); font-weight:600; line-height:1.35; max-width:260px; }

/* ---- numéro de séance dans la modale (V9) : silencieux ---- */
.fiche-tete { display:flex; align-items:baseline; gap:12px; margin-bottom:7px; }
.fiche-num { margin-left:auto; font-size:11px; font-weight:600; color:var(--sub); flex-shrink:0; }
.fit-chip { display:flex; align-items:center; gap:10px; }
.fit-ico { width:34px; height:34px; border-radius:8px; background:var(--jaune); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; flex-shrink:0; }

/* divers */
.lien { font-size:12px; color:var(--sub); text-decoration:underline; font-weight:700; cursor:pointer; text-align:center; display:flex; align-items:center; justify-content:center; line-height:1.25; padding:6px 0; }
.depose-zone.drag { outline:3px dashed var(--bleu); outline-offset:4px; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.attente { animation:pulse 1.1s infinite; }
/* Animations coupées si l'utilisateur les refuse.
   PIÈGE : une media query n'ajoute AUCUNE spécificité. `.squelette span` ne
   pouvait pas battre `.squelette span:nth-of-type(1)` — il faut répéter le
   même sélecteur. Vérifié au navigateur, dans les deux réglages. */
@media (prefers-reduced-motion: reduce) {
  .attente, .pf-barre,
  .squelette span:nth-of-type(1),
  .squelette span:nth-of-type(2),
  .squelette span:nth-of-type(3) { animation:none; }
}

/* ---- pages ---- */
.page { display:flex; flex-direction:column; gap:16px; }
[hidden] { display:none !important; }

/* ---- programme ---- */
.segbtn { font-size:13px; padding:6px 16px; border-radius:6px; color:var(--sub); font-weight:700; }
.segactive { background:var(--jaune); color:var(--ink); font-weight:800; border:1.5px solid var(--ink); }
.phase-chip { display:flex; flex-direction:column; gap:3px; padding:9px 12px; border-radius:8px; font-size:11px; }
.day { border:1px solid var(--line); border-radius:6px; padding:5px 6px 6px; display:flex; flex-direction:column; gap:3px; min-height:72px; background:var(--card); position:relative; overflow:hidden; }
.day-hors { opacity:0.45; }
.dnum { font-size:10px; color:var(--sub); font-weight:700; }
.mini { font-size:10px; border-radius:4px; padding:3px 5px; line-height:1.25; font-weight:600; }
.mini-p { background:var(--card); border:1.5px solid var(--sub); }
.mini-f { background:var(--vert-t); border:1.5px solid var(--vert); }
.mini-e { border:1.5px dashed var(--line); color:var(--sub); font-style:italic; }
.alleg { opacity:0.72; }  /* Planifiée — révisable (au-delà de la fenêtre ~10 j) */
.mcren { display:block; font-size:8.5px; letter-spacing:0.06em; text-transform:uppercase; opacity:0.7; font-style:normal; }
.lrow { display:flex; align-items:center; gap:14px; border-radius:8px; padding:10px 14px; background:var(--card); border:1.5px solid var(--line); position:relative; }
.lrow-fait { background:var(--vert-t); border-color:var(--vert); }
.lrow-auj { border:1.5px solid var(--ink); }
.lrow-esquisse { background:transparent; border-style:dashed; color:var(--sub); font-style:italic; }
.sem-head { display:flex; align-items:baseline; justify-content:space-between; padding:8px 2px 0; }
.sem-passee { display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--line); border-radius:8px; padding:8px 14px; color:var(--sub); font-size:12px; font-weight:600; }
.jrow { font-size:12px; color:var(--sub); font-weight:600; display:flex; gap:8px; }

/* ---- séances cliquables : affordance au survol ---- */
.cliquable { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.cliquable:hover { transform:translateY(-2px); box-shadow:0 3px 0 rgba(21,24,13,0.16); }

/* ---- semaine en cours mise en avant dans le calendrier ---- */
.band-sem { background:var(--bg); border-radius:8px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.bcol { display:flex; flex-direction:column; gap:5px; min-width:0; }
.bjour { font-size:11px; text-align:center; font-weight:700; color:var(--sub); padding:3px 0; }
.bjour.auj span { display:block; width:fit-content; margin:-3px auto; background:var(--ink); color:#FFFFFF; border-radius:11px; padding:3px 11px; }

/* ---- V11 · la page Programme ----
   Le run est la norme : il porte un point bleu devant le créneau et pèse 800 ;
   les autres sports pèsent 500. Le sport se lit en filigrane dans le bandeau et
   en vignette dans la liste — jamais dans les cases du mois. */
.cren-l { display:flex; align-items:center; gap:4px; }
.creneau.cren-l { gap:5px; }
.pt-run { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--bleu); flex-shrink:0; }
.pt-run-g { width:9px; height:9px; }
.titre-run { font-weight:800; }
.titre-autre { font-weight:500; }
.filigrane { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:30px; height:30px; opacity:0.22; pointer-events:none; }
.ico-boite { width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ico-sport { width:22px; height:22px; }
/* V11.1 : la date en pastille retirée de la liste (Max, passe de test) — le vert des faites et le cadre encre suffisent */
/* la coupure de phase : le premier jour d'une phase, et lui seul */
.day-coupe { border-left:3px solid var(--ink); border-radius:0 6px 6px 0; }
.dnum-coupe { color:var(--ink); display:flex; gap:4px; align-items:baseline; min-width:0; }
.dnum-phase { font-size:8px; letter-spacing:0.06em; text-transform:uppercase; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }  /* le vrai nom d'une phase est long : une ligne, coupée, le nom entier dans la trajectoire */
.lrow-coupe { border-left:3px solid var(--ink); }
.chip-phase { font-family:var(--body); text-transform:none; letter-spacing:0; font-size:10px; padding:2px 9px; margin-left:8px; vertical-align:3px; }
/* la liste continue : les mois la séparent, l'en-tête de la page reste visible */
.sep-mois { display:flex; align-items:center; gap:12px; padding:18px 0 0; scroll-margin-top:96px; }
.sep-mois span:last-child { flex:1; border-top:1.5px solid var(--line); }
.sem-head { scroll-margin-top:96px; }
/* V11.1 · l'en-tête est une fenêtre sur le fond d'écran : il peint la même image fixe
   que body::before, au même endroit, et les cartes passent dessous. Sans fond : crème.
   background-attachment:fixed tient ici parce qu'aucun parent de l'en-tête n'est
   transformé ni animé — à surveiller si ça change un jour (cf. le fond, V10). */
.prog-tete { position:sticky; top:0; z-index:5; margin:-24px -32px 0; padding:24px 32px 10px; background:var(--bg); }
body.a-fond .prog-tete { background-image:var(--fond-voile), var(--fond-img); background-attachment:fixed;
  background-size:cover; background-position:var(--fond-pos, center); }

/* ---- fiche séance (modale) ---- */
.voile { position:fixed; inset:0; background:rgba(21,24,13,0.32); backdrop-filter:blur(1.5px); z-index:60; display:flex; align-items:center; justify-content:center; padding:26px; }
.fiche { width:640px; max-width:94vw; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; background:var(--card); border:2px solid var(--ink); box-shadow:6px 6px 0 rgba(21,24,13,0.16); border-radius:10px; padding:22px 26px; display:flex; flex-direction:column; gap:14px; position:relative; }
.fiche-x { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; font-weight:800; }
.fiche-x:hover { background:var(--steel); }
.chip-neutre { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--ink); border-radius:14px; padding:3px 11px; font-size:11px; font-weight:800; }
.deroule-card { background:var(--bg); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.etape { display:flex; gap:11px; font-size:13.5px; line-height:1.45; align-items:flex-start; }
.etape-num { width:22px; height:22px; border-radius:50%; background:var(--jaune); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0; margin-top:1px; }
.fiche-adapt { background:var(--bg); border-radius:8px; padding:10px 14px; font-size:12.5px; display:flex; align-items:center; gap:9px; }

/* ---- mon profil d'athlète ---- */
.frow { padding:7px 10px; margin:0 -10px; border-radius:7px; cursor:pointer; }
.frow:hover, .frow.ouvert { background:#F0EFE6; }
.frow-bonus { cursor:default; }
.frow-bonus:hover { background:transparent; }
.pal { display:flex; gap:3px; width:104px; flex-shrink:0; }
.pal i { display:block; width:100%; height:9px; border-radius:2px; background:var(--card);
  border:1.5px solid var(--line); box-sizing:border-box; }
.pal i.ok { background:var(--vert-t); border-color:var(--vert); }
.pal i.cible { border-color:var(--ink); border-style:dashed; }
.nivnum { font-family:var(--display); font-size:15px; line-height:1; white-space:nowrap;
  width:44px; text-align:right; }
.ftag { font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:800;
  border-radius:5px; padding:3px 7px; background:var(--steel); color:var(--ink);
  white-space:nowrap; width:66px; text-align:center; }
.ftag-sommeil { background:var(--card); border:1.5px dashed var(--sub); color:var(--sub); }
.ftag-neuf { background:var(--card); border:1.5px solid var(--line); color:var(--sub); }
.fpoints { border:1.5px solid var(--ink); border-radius:6px; padding:1px 8px 3px; font-weight:800;
  line-height:1; letter-spacing:1px; cursor:pointer; }
.volet { position:absolute; background:var(--card); border:2px solid var(--ink); border-radius:10px;
  box-shadow:5px 5px 0 rgba(21,24,13,0.14); padding:14px 16px; width:330px; z-index:40; }
.vrow { display:flex; align-items:flex-start; gap:9px; font-size:11.5px; line-height:1.4; padding:5px 0; }
.vnum { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); color:var(--sub);
  font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; }
.vnum.suiv { background:var(--jaune); border-color:var(--ink); color:var(--ink); }
.vnum.ok { background:var(--vert-t); border-color:var(--vert); color:#2C7A1A; }
.vlegende { font-size:10px; color:var(--sub); font-weight:600; line-height:1.5; }
.prep { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800;
  color:var(--bleu); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.fmenu { position:absolute; background:var(--card); border:1.5px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 rgba(21,24,13,0.14); padding:5px; width:200px; z-index:41; }
.fmenu div { font-size:12px; font-weight:600; padding:7px 10px; border-radius:5px; cursor:pointer; }
.fmenu div:hover { background:var(--bg); }
.fmenu div.dang { color:var(--rouge); font-weight:700; }
.carte-semaine { margin:2px 0 0; border:2px solid var(--ink); border-radius:8px;
  box-shadow:4px 4px 0 rgba(21,24,13,0.14); padding:13px 14px; display:flex;
  flex-direction:column; gap:9px; }

/* ---- page objectifs ---- */
.jauge { height:10px; border-radius:5px; background:var(--steel); position:relative; }
.jauge > div { height:100%; border-radius:5px; background:var(--jaune); border:1.5px solid var(--ink); box-sizing:border-box; min-width:10px; }
.jalon { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; }
.jpuce { width:16px; height:16px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* ---- activités ---- */
.filt { font-size:12px; border:1.5px solid var(--line); border-radius:16px; padding:5px 13px; color:var(--sub); font-weight:600; background:var(--card); cursor:pointer; }
.filt:hover { border-color:var(--ink); color:var(--ink); }
.filton { background:var(--jaune); color:var(--ink); border:1.5px solid var(--ink); font-weight:800; }
.arow { display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:8px; padding:10px 14px; font-size:13px; background:var(--card); }
.arow-rec { border-color:var(--ink); }
.vbar { border-radius:3px 3px 0 0; background:var(--steel2); box-sizing:border-box; align-self:flex-end; flex:1 1 0; min-width:8px; }
.vbar-cours { background:var(--jaune); border:1.5px solid var(--ink); }
.vbar-pic { background:var(--bleu); }

/* ---- réglages ---- */
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; }
.hint { font-size:11px; color:var(--sub); }

/* ---- réglages : colonnes plutôt que grille (V8.1) ----
   En grille, les deux colonnes avancent rangée par rangée : une carte courte
   laissait un trou jusqu'à la rangée suivante. En colonnes CSS, chaque carte
   se pose sous la précédente et les vides disparaissent. */
/* V10 · ligne 6 — la banque de fonds. Un SÉLECTEUR : ni ajout, ni téléversement,
   ni suppression, ni consigne technique. La vignette montre l'image SOUS SON
   VOILE — ce que Max verra, pas l'image brute. */
.fonds { display:flex; flex-wrap:wrap; gap:12px; }
.fond-v { position:relative; width:132px; height:88px; border-radius:8px; cursor:pointer;
  border:1.5px solid var(--line); background-color:var(--bg); background-size:cover;
  background-position:center; overflow:hidden; }
.fond-v.on { border:2px solid var(--ink); box-shadow:0 0 0 3px var(--jaune); }
.fond-nom { position:absolute; left:0; right:0; bottom:0; padding:3px 6px; text-align:center;
  font-size:10px; font-weight:700; background:rgba(255,255,255,0.86); }
.fond-coche { position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%;
  background:var(--jaune); border:1.5px solid var(--ink); display:none;
  align-items:center; justify-content:center; font-size:10px; font-weight:900; }
.fond-v.on .fond-coche { display:flex; }

#reg-grille { column-count:2; column-gap:16px; }
#reg-grille > .card { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 16px; width:100%; }
#reg-pleine { display:flex; flex-direction:column; gap:16px; }
@media (max-width:1100px) { #reg-grille { column-count:1; } }

/* markdown minimal dans les bulles de STEAVE (V8.1) */
.bsteave code, .deroule-card code { background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 4px; font-size:11.5px; }
.bsteave .mdli { display:block; padding-left:13px; text-indent:-13px; }
.bsteave .mdli::before { content:"• "; color:var(--sub); }
.chipr { font-size:11px; border:1.5px solid var(--line); border-radius:14px; padding:4px 10px; background:var(--card); font-weight:600; cursor:pointer; user-select:none; }
.chipr.off { opacity:0.45; text-decoration:line-through; }
/* V15 — Q-A bis : les sept jours d'un créneau actif. Le parcours d'entrée
   les écrit ; sans ces pastilles, personne ne pourrait les corriger — et Q-A
   serait rouverte par la porte qu'elle venait de fermer. */
.chipr-on { background:var(--jaune); border-color:var(--ink); font-weight:800; }

/* V15 — D7 : un vide daté n'est pas une attente, c'est un compte à rebours.
   Le contenu vient du seul endroit plein au jour 1 : le programme. */
.vide-date { font-size:12.5px; line-height:1.55; color:var(--sub); font-weight:600; }
.vide-date b { color:var(--ink); font-weight:800; }
.seg2 { display:flex; background:var(--bg); border:1.5px solid var(--line); border-radius:7px; padding:2px; flex-shrink:0; }
.seg2 div { font-size:11px; padding:4px 10px; border-radius:5px; color:var(--sub); font-weight:600; cursor:pointer; white-space:nowrap; }
.seg2 .on { background:var(--ink); color:#FFFFFF; font-weight:800; }
.tog { width:34px; height:19px; border-radius:10px; background:var(--jaune); border:1.5px solid var(--ink); position:relative; flex-shrink:0; box-sizing:border-box; cursor:pointer; }
.tog::after { content:""; position:absolute; top:1.5px; right:2px; width:12px; height:12px; border-radius:50%; background:var(--ink); }
.togoff { background:var(--steel); border-color:var(--sub); }
.togoff::after { right:auto; left:2px; background:var(--sub); }
.ajout { border:1.5px dashed var(--sub); border-radius:8px; padding:7px; text-align:center; font-weight:700; font-size:11px; color:var(--sub); cursor:pointer; }
.ajout:hover { border-color:var(--ink); color:var(--ink); }
.danger { border:1.5px solid var(--rouge); color:var(--rouge); border-radius:8px; padding:9px 14px; font-weight:800; font-size:12.5px; text-align:center; cursor:pointer; background:var(--card); }
.danger:hover { background:#FDF1F1; }

input.champ, select.champ { border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px; font-family:var(--body); color:var(--ink); outline:none; background:var(--card); width:100%; }
input.champ:focus, select.champ:focus { border-color:var(--ink); }
.flabel { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sub); font-weight:800; margin-bottom:5px; }
.etoile-pick { display:flex; gap:6px; }
.etoile-pick .btn { padding:4px; border-radius:6px; }

/* ---- illustrations & mascotte (V8) ----
   Régime provisoire : la même image sert d'illustration ET de pictogramme.
   Elle s'INSCRIT dans sa boîte (contain), jamais recadrée — les 14 dessins
   vont du format 1,82 au format 0,82. */
.illu-grande { width:190px; height:156px; display:block; object-fit:contain; flex-shrink:0; }
.illu-petite { display:block; object-fit:contain; flex-shrink:0; }
.masc { display:block; object-fit:contain; }
.jourj-tag { background:var(--ink); color:#FFFFFF; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; padding:4px 10px; border-radius:12px; }

/* ---- journal de diagnostic (V8) ---- */
.journal { background:var(--ink); color:#E8EAE0; border-radius:8px; padding:11px 13px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; line-height:1.65; max-height:280px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.journal .jl-erreur { color:#FF9B93; font-weight:700; }
.journal .jl-alerte { color:#FFED27; }

/* ==== V12 · LA COURSE ====
   Le jour J (T4.1, décidé le 13 sept.) : le noir plein, le damier devant « Jour J »,
   le sticker qui SORT de la carte — le seul élément de l'app qui sort de sa boîte.
   La fiche de la course, la frise des phases, la zone GPX, l'état « Passée ». */
.chip-jourj { background:var(--ink); color:#FFFFFF; border:2px solid var(--ink); position:relative; overflow:visible; }
.chip-jourj .creneau { color:rgba(255,255,255,0.75); }
.chip-jourj .titre-jourj { font-weight:800; padding-right:22px; }
.damier { flex-shrink:0; display:inline-block; }
.sticker { position:absolute; z-index:3; transform:rotate(8deg); filter:drop-shadow(1px 2px 0 rgba(21,24,13,0.35)); pointer-events:none; height:auto; }
.sticker-chip { width:62px; right:-18px; top:-22px; }
.sticker-mini { width:38px; right:-16px; top:-14px; }
.mini-jourj { background:var(--ink); color:#FFFFFF; font-weight:800; position:relative; overflow:visible; }
.mini-jourj .mcren { opacity:0.75; }
.mini-jourj .titre-jourj { padding-right:14px; }
.day-jourj { overflow:visible; }            /* la case laisse sortir le sticker */
.lrow-jourj { background:var(--ink); color:#FFFFFF; border-color:var(--ink); min-height:68px; }
.tag-jourj { background:var(--ink) !important; color:#FFFFFF !important; border-color:var(--ink) !important; display:inline-flex !important; align-items:center; gap:6px; }
.hero-jourj:hover { transform:none; box-shadow:5px 5px 0 rgba(21,24,13,0.14); }   /* la carte héros ne se soulève pas : elle a déjà son ombre */
.tag-passee { border-color:var(--line) !important; color:var(--sub) !important; }
/* la frise des phases — composant neuf */
.frise { display:flex; height:22px; border:1.5px solid var(--ink); border-radius:6px; overflow:hidden; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; }
.frise-seg { display:flex; align-items:center; padding:0 9px; border-right:1.5px solid var(--ink); position:relative; min-width:82px; }
.frise-seg > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frise-faite { background:var(--vert-t); color:#2C7A1A; }
.frise-cours { background:var(--jaune); color:var(--ink); }
.frise-avenir { background:var(--card); color:var(--sub); }
.frise-auj { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); }
/* la zone GPX (option 1) */
.gpx-zone { display:flex; align-items:center; gap:12px; border:1.5px dashed var(--line); border-radius:8px; padding:10px 12px; }
.gpx-zone.gpx-survol { border-color:var(--ink); background:var(--bg); }
.gpx-nom { font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* V12.1 · la fiche qui défile garde ses actions sous la main : barre collante en bas de la modale */
/* ==== O3 · LES COURSES PASSÉES ====
   La ligne d'une course courue, sur la page Objectifs et dans le choix d'activité.
   Une ligne, pas une carte : le bloc ne pèse rien sur une page déjà chargée. */
/* un lien DANS une phrase : `.lien` est en display:flex et casse la ligne */
.lienx { color:var(--bleu); font-weight:700; text-decoration:underline; cursor:pointer; }
.lienx:hover { color:var(--ink); }
.crow { display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:8px;
        padding:12px 15px; background:var(--card); cursor:pointer; }
.crow:hover { border-color:var(--ink); }
.fiche-actions { position:sticky; bottom:-22px; display:flex; gap:10px; margin:4px -26px -22px; padding:12px 26px 22px; background:var(--card); border-top:1.5px solid var(--line); }

/* ---- V17 · G3 — la carte de la journée (planche D) ----
   Deux formes, une seule carte : `.hero-row` quand il n'y a qu'une séance
   (ou le repos, ou le jour J) avec sa grande illustration ; `.hero-jour`
   dès qu'il y en a plusieurs, où l'illustration cède la place et où chaque
   séance devient une ligne avec son icône de sport. Prix assumé par Max :
   la carte n'a pas la même allure selon les jours. */
.hero-row { padding:26px 28px; display:flex; gap:26px; align-items:center; }
.hero-act { display:flex; flex-direction:column; gap:10px; justify-content:center; width:250px; flex-shrink:0; }
.hero-jour { padding:22px 28px 20px; display:flex; flex-direction:column; gap:2px; }
/* V17.1 — c'était `baseline` : ça aligne deux textes de même taille, pas une
   pastille encadrée avec un Anton de 30 px, dont la hauteur de lettre est tout
   autre. Vu par Max à la passe de test. */
.hero-jour-tete { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:6px; }
.jrow { display:flex; align-items:center; gap:16px; padding:14px 0; }
.jrow + .jrow { border-top:1.5px solid var(--line); }
.jbtn { width:210px; flex-shrink:0; }
.jfait { width:210px; flex-shrink:0; text-align:center; font-size:12.5px; font-weight:800;
  color:#2C7A1A; background:var(--vert-t); border:1.5px solid var(--vert);
  border-radius:8px; padding:11px 14px; }

/* ---- V17 · P3 — la frontière de replanification (planche C) ----
   Un trait, une date, une phrase. Il n'existe QUE dans la liste : la grille
   du mois retombe sur la pâleur seule (`.alleg`). */
/* V17.1 — la frontière est RETIRÉE (décision de Max à la passe de test).
   Retour à la planche A : la pâleur `.alleg`, expliquée par une légende sous
   la liste. Ne pas la remettre sans rouvrir la question avec lui. */
.legende-alleg { display:flex; align-items:center; gap:9px; padding-top:14px;
  font-size:11px; color:var(--sub); font-weight:600; }
.legende-puce { width:22px; height:12px; border-radius:3px; flex-shrink:0;
  border:1.5px solid var(--sub); opacity:0.72; }

/* ---- V17 · T9 — le détail pas encore écrit (planche B) ---- */
.chip-attente { border-style:dashed; border-color:var(--sub); color:var(--sub); font-weight:700; }

/* ---- V17 · T5 — la séance proposée, dans la bulle de STEAVE (planche B) ----
   Le pointillé dit « pas encore réel » sans un mot. Éteinte : acceptée,
   refusée, ou restée sans réponse une fois le jour passé (décision 12). */
/* V18.1 · ligne 6 — LA CARTE DE PROPOSITION EST COMPACTE.
   Relevé par Max à la passe 1 du contrat : elle était trop haute. Elle
   empilait deux rangées — l'en-tête, puis les boutons — alors qu'elle ne
   porte que quatre informations : le sport, le titre, le jour, la durée.
   Une seule rangée : l'icône, le texte, les boutons à droite. En étroit,
   les boutons passent dessous (wrap), jamais de débordement.
   Le pointillé reste : il porte « pas encore réel », et c'est le même
   vocabulaire que les vides datés, « Repos » et « Semaine libre ». */
/* ⚠⚠ LA CARTE EST DU MARKUP DANS UNE BULLE DE PROSE — ELLE REPREND LA MAIN
   SUR `white-space`. La bulle est en pre-wrap pour garder les retours à la
   ligne de STEAVE ; la carte en hérite, et CHAQUE saut de ligne du HTML
   devient une ligne vide. Trois lignes fantômes = ~117 px de carte pour rien.
   Mesuré le 23 septembre : 242 px avec, 100 px sans. C'était TOUTE la hauteur
   dont Max se plaignait — pas le dessin.
   Même famille que le défaut de la V17 : une chose écrite pour un contrat,
   réutilisée dans un autre, et qui ment sans le dire. */
.propo { border:1.5px dashed var(--ink); border-radius:8px; padding:9px 11px;
  display:flex; flex-direction:column; gap:8px; background:var(--card); margin-top:9px;
  white-space:normal; }
.propo-tete { display:flex; align-items:center; gap:9px; min-width:0; }
.propo-txt { flex:1 1 0; min-width:0; }
.propo-titre { font-size:13px; font-weight:800; line-height:1.3; }
/* le sous-titre tient sur UNE ligne : « Dimanche 27 · Gainage et chaîne
   postérieure » en prenait deux, et deux lignes dans un panneau de 400 px,
   c'est 35 px de carte pour une information secondaire. */
.propo-sous { font-size:11px; color:var(--sub); font-weight:600; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.propo-btns .minibtn { padding:5px 10px; font-size:11px; }
.propo-btns { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.propo-oui { background:var(--jaune); }
.propo-eteinte { opacity:0.55; border-color:var(--line); }
.propo-etat { font-size:11px; font-weight:700; color:var(--sub);
  letter-spacing:0.04em; text-transform:uppercase; flex-shrink:0; }

/* ---- V17.1 — deux retouches vues à la passe de test ----
   Une LIGNE dans une carte n'est pas une carte : elle ne se soulève pas et ne
   prend pas d'ombre, sinon un morceau du bloc décolle au survol. Elle garde
   son clic, et s'éclaire. */
.jrow.cliquable:hover { transform:none; box-shadow:none; background:#FBFAF4; border-radius:6px; }
.dmd-zone { display:flex; flex-direction:column; align-items:flex-start; }

/* ---- V18 · le bloc de synthèse et sa courbe (D3) ---- */
/* La bande « Ma trajectoire » dit OÙ JE VAIS ; ce bloc dit CE QUE ÇA DEMANDE.
   Le bleu reste le métier des durées : les barres sont bleues, et le pointillé
   porte « pas encore réel » — ici l'affûtage, qui allège au lieu de construire. */
.courbe-sem { background:var(--bg); border-radius:8px; padding:16px 18px 12px; }
.barres-sem { display:flex; align-items:flex-end; gap:10px; height:104px; }
.barre-sem { flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.barre-sem-num { font-size:9.5px; color:var(--sub); font-weight:700; }
.courbe-leg { display:flex; gap:20px; margin-top:12px; font-size:11px; color:var(--sub); font-weight:600; align-items:center; flex-wrap:wrap; }
.courbe-leg span { display:inline-flex; align-items:center; gap:6px; }

/* ---- V18 · le vide nommé dans le calendrier (D5) ---- */
/* Sept « Repos » ne disent pas pourquoi. Une chose nommée, si. */
.sem-libre { border:1.5px dashed var(--sub); border-radius:8px; padding:14px 16px; background:var(--card);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sem-avant-tete { font-size:11px; color:var(--sub); font-weight:700; padding:2px 2px 0; }
.sem-avant { opacity:0.45; }

@media (max-width: 760px) {
  .barres-sem { height:72px; gap:4px; }
  .barre-sem-num { font-size:8px; }
  .courbe-leg { gap:10px; font-size:10px; }
  .courbe-leg span:last-child { display:none; }   /* la ligne d'explication saute avant la légende */
}

/* ---- V18.1 · C9 — l'état vide de la conversation ---- */
.conv-vide { display:flex; flex-direction:column; gap:9px; align-items:flex-start;
  border:1.5px dashed var(--sub); border-radius:8px; padding:14px 16px; background:var(--card); }