/* ════════════════════════════════════════════════════════════════════
   VERSION « ALLÉGÉE » — BASE COMMUNE (11/10)
   Chargée après les styles propres de la page, avec charte-tokens.css.
   Pages championnat, équipe et activité (validées par Daniel les 11 et
   12/10). Le propre de chaque page est dans
   ligue-leger.css, equipe-leger.css, activite-leger.css.

   Les règles, dans l'ordre :
     1. Une seule palette, celle de la charte (charte-tokens.css). Plus de
        couleurs GitHub (#E6EDF3, #8B949E, #3fb950…), plus d'accent par sport.
     2. Le gris par défaut. Turquoise = action. Vert/jaune/rouge = résultat
        de match, rien d'autre. Les couleurs des clubs restent sur l'écusson.
        Le violet du logo signe la marque (sondage, filet dégradé de
        l'invitation à l'appli) : il accompagne, il ne commande jamais.
     3. Moins de boîtes : le contenu principal garde sa surface, le reste
        est posé sur le fond, séparé par l'air et un titre.
     4. Deux colonnes au lieu de trois : le contenu, et une colonne calme à
        droite.
     5. Icônes au trait (ligue-leger.js) à la place des emojis.

   INTOUCHÉ, à la demande de Daniel : la mise en forme des équipes déjà sur
   PasseLaBalle (.team-tag.plb, .tcard.plb) et la jauge des équipes qui
   démarrent (.team-tag.plb-part). Aucune règle ci-dessous ne les vise ;
   les sélecteurs qui touchent aux pastilles les excluent explicitement.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. PALETTE : la page parle la langue de la charte ─────────────── */
:root{
  --teal:var(--plb-turquoise);
  --teal-d:var(--plb-turquoise-fonce);
  --violet:var(--plb-indigo);
  --orange:var(--plb-orange);
  --green:var(--plb-victoire);
  --red:var(--plb-defaite);

  --bg:var(--plb-nuit);
  --surface:var(--plb-nuit-2);
  --surface2:var(--plb-nuit-3);
  /* Traits : un voile du texte, pas une couleur de plus. */
  --border:color-mix(in srgb,var(--plb-texte-nuit) 9%,transparent);
  --text:var(--plb-texte-nuit);
  --strong:var(--plb-blanc);
  --muted:var(--plb-gris-clair);
  --dim:var(--plb-gris);

  /* Plus d'accent par sport (bleu futsal, vert foot à 7, violet five) :
     l'action a UNE couleur sur tout le site. Le sport se lit au logo de la
     ligue. !important car les pages posent --accent en style en ligne. */
  --futsal:var(--plb-turquoise);
  --foot7:var(--plb-turquoise);
  --five:var(--plb-turquoise);
  --accent:var(--plb-turquoise) !important;

  --win:var(--plb-victoire);
  --draw:var(--plb-nul);
  --loss:var(--plb-defaite);
  --warn-fg:var(--plb-texte-nuit);
}
:root[data-theme="light"]{
  --teal:var(--plb-turquoise-fonce);
  --teal-d:var(--plb-turquoise-fonce);
  --bg:var(--plb-clair);
  --surface:var(--plb-blanc);
  --surface2:var(--plb-clair);
  --border:color-mix(in srgb,var(--plb-encre) 9%,transparent);
  --text:var(--plb-encre);
  --strong:var(--plb-encre);
  --muted:var(--plb-gris);
  --dim:var(--plb-gris-clair);
  --futsal:var(--plb-turquoise-fonce);
  --foot7:var(--plb-turquoise-fonce);
  --five:var(--plb-turquoise-fonce);
  --accent:var(--plb-turquoise-fonce) !important;
  --warn-fg:var(--plb-encre);
}

body{font-size:15px}

/* ── FOND : les halos et le filigrane de la charte (§ 5 et § 8) ────────
   Deux halos très doux (turquoise en haut à droite, violet plus bas à
   gauche) et le logo en filigrane, pivoté de −12°, coupé par le bord droit,
   à 8 %. Accrochés au HAUT de la page, pas à l'écran : `fixed` saccade sur
   iPhone et laissait une coupure nette sur les pages longues. z-index
   négatif et aucun événement souris : jamais devant un texte. Pas dans le
   cadre de l'onglet Championnat (mode intégré) : la page parente a son fond. */
body{
  /* `clip` et non `hidden` : le filigrane déborde à droite sans créer de
     défilement horizontal, et le volet du haut reste collant (sticky).
     Posé aussi sur <html> : sinon le navigateur reporte le overflow du body
     sur la fenêtre, et le body lui-même ne coupe plus rien. */
  position:relative;overflow-x:clip;
  background:
    radial-gradient(1000px 700px at 100% 0,color-mix(in srgb,var(--plb-turquoise) 9%,transparent),transparent 70%),
    radial-gradient(900px 800px at 0 900px,color-mix(in srgb,var(--plb-violet) 14%,transparent),transparent 70%),
    var(--bg);
}
body::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(58vw,700px);aspect-ratio:1;right:-150px;top:150px;
  background:url(images/filigrane.webp) center/contain no-repeat;
  opacity:.08;transform:rotate(-12deg);
}
:root[data-theme="light"] body::before{opacity:.07}
html{overflow-x:clip}
.embed body{background:transparent}
.embed body::before{display:none}
@media(max-width:720px){ body::before{width:105vw;right:-42vw;top:90px} }
h1,h2,h3{font-family:var(--plb-titre);letter-spacing:-.02em}

/* ── AVERTISSEMENTS : neutres, un filet orange (« alerte douce ») ──── */
.warnbar{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--orange);color:var(--muted);
}
/* Pas de flex : il espaçait chaque morceau de texte et chaque <b>. */
.warnbar.compact{display:block}
.warnbar.archive{border-left-color:var(--border)}
.warnbar b{color:var(--strong)}
.warnbar .ll-ico{color:var(--orange);vertical-align:-3px;margin-right:.45rem}
.warnbar.archive .ll-ico{color:var(--muted)}

/* ── 3. CARTES : moins de traits ───────────────────────────────────── */
.card{border-color:var(--border);border-radius:16px}
.card-head{border-bottom:0;padding:20px 24px 8px}
.card-head h2{font-size:19px;font-weight:800;color:var(--strong)}
.card-note{background:transparent;border-top:1px solid var(--border);padding:14px 24px 18px;color:var(--muted)}
.card-note b{color:var(--text)}

/* Étiquettes (« Journée 12 », « Tirage à venir ») : texte discret. */
.chip,.chip.is-accent{background:transparent;border-color:var(--border);color:var(--muted)}

/* ── TABLEAUX ──────────────────────────────────────────────────────── */
th{color:var(--dim);border-bottom-color:var(--border);letter-spacing:.12em}
/* Plus de trait entre les lignes, un peu plus de hauteur : le survol
   suffit à suivre une ligne. */
td{border-bottom:0;padding:12px 9px}
tbody tr:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.rk{color:var(--dim)}
.dim{color:var(--muted)}

/* Pastilles d'équipe ORDINAIRES : plus de voile de couleur derrière le nom,
   seul l'écusson porte le club. Leur pastille complète revient au survol
   (règles d'origine, qui utilisent --tg-a et non --tg-d).
   EXCLUES : .plb (équipe active), .plb-part (jauge), .mine, .out (coupe). */
.team-tag:not(.plb):not(.plb-part):not(.mine):not(.out){--tg-d:transparent}

/* Liste « Les équipes » : même principe pour les cartes ordinaires. Les
   cartes .plb gardent leur dégradé et leur cadre — elles ressortent
   d'autant mieux. */
.tcard:not(.plb):not(.sel){--c-d:transparent !important;--c-d2:transparent !important;border-color:transparent}

/* ── RÉSULTATS ─────────────────────────────────────────────────────── */
.mrow{border-bottom-color:transparent;padding-top:8px;padding-bottom:8px}
.sc{background:var(--surface)}
.sc.ko{background:transparent}

/* ── 4. MISE EN PAGE : contenu + une colonne calme (grille partagée de
   ligue-ui.css : /ligue et /equipe) ───────────────────────────────── */
/* Plus de boîtes dans la colonne : un titre en petites capitales et l'air.
   La carte « Mes équipes » (visiteur connecté) suit la même règle. */
.aside-card,.me-strip{background:transparent;border:0;border-radius:0;padding:0}
.aside-ttl,.me-lbl{
  font-family:var(--plb-titre);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;color:var(--dim);margin-bottom:.5rem;padding:0;
}
.side{gap:2rem}
.srcbox{padding:.45rem .5rem;margin:0 -.5rem}
.src-txt b{font-weight:500;color:var(--text)}
.srcbox:hover .src-txt b{color:var(--strong)}
.src-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
         background:var(--surface2);color:var(--accent);opacity:1}
.src-ico svg{width:15px;height:15px}
.srcbox.off .src-ico{color:var(--muted)}
.srcbox.lock .src-txt i,.srcbox.lock .src-go{color:var(--muted)}
.src-go svg{width:13px;height:13px;vertical-align:-2px}

/* SONDAGE — il ne doit pas se perdre dans la colonne (Daniel, 11/10) : seul
   bloc de la colonne posé sur une surface, teintée du violet du logo. La
   réponse en tête en turquoise (jauge, libellé, nombre), les autres en
   violet clair. La pastille « Aperçu » reste (elle dit que c'est un exemple). */
:root{--ll-violet:var(--plb-violet-clair)}
:root[data-theme="light"]{--ll-violet:var(--plb-violet)}
#sondage-card.aside-card{
  background:color-mix(in srgb,var(--plb-violet) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--plb-violet) 40%,transparent);
  border-radius:14px;padding:14px 16px;
}
.sd-t{color:var(--ll-violet);font-family:var(--plb-titre);font-weight:700;letter-spacing:.16em}
.sd-tag{background:transparent;border:1px solid color-mix(in srgb,var(--ll-violet) 50%,transparent);color:var(--ll-violet)}
.sd-q{font-size:.9rem;color:var(--strong);font-family:var(--plb-titre);font-weight:700;letter-spacing:-.01em}
.sd-bar{height:6px;background:color-mix(in srgb,var(--text) 8%,transparent)}
.sd-bar i{background:color-mix(in srgb,var(--ll-violet) 60%,transparent)}
/* .win = réponse retenue (posée par ligue-ui.js) ; .tete = réponse en tête
   (posée par ligue-leger.js). */
.sd-o.win .sd-bar i,.sd-o.tete .sd-bar i{background:var(--accent)}
.sd-o.win .sd-lab,.sd-o.tete .sd-lab{color:var(--strong);font-weight:600}
.sd-o.win .sd-n,.sd-o.tete .sd-n{color:var(--accent);font-weight:700}

/* L'encart « Ton équipe joue ici ? » : la capture de l'appli (l'agenda)
   revient, et franchement (Daniel, 12/10 : « c'est important de parler de
   mon app ») — un écran de téléphone net, cadré, au lieu d'une image en
   fondu. La phrase et le lien suivent dessous. */
.nudge{padding:0;align-items:center;text-align:center;gap:.6rem}
.nudge img{
  max-width:168px;opacity:1;border-radius:18px;
  -webkit-mask-image:none;mask-image:none;
  border:4px solid var(--plb-nuit-3);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--plb-turquoise) 35%,transparent),
             0 18px 40px rgba(0,0,0,.45);
  transform:rotate(-3deg);
}
:root[data-theme="light"] .nudge img{border-color:var(--plb-blanc);box-shadow:0 0 0 1px var(--border),0 14px 30px rgba(15,20,32,.18)}
.nudge p{font-size:.82rem}

@media(min-width:901px){
  .layout{
    grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto 1fr;
    gap:0 3rem;
  }
  .layout > .col{grid-column:1;grid-row:1 / span 2}
  .layout > .side:not(.side-right){grid-column:2;grid-row:1;padding-top:6px}
  .layout > .side-right{grid-column:2;grid-row:2;margin-top:2rem}
}

/* Le bouton « Avant / Après » est stylé par ligue-leger.js, dans sa propre
   balise <style> : il reste visible quand ces feuilles sont coupées. */

/* ── BOUTONS « ITINÉRAIRE » des lignes de match ────────────────────────
   Le bleu Google Maps était la seule couleur hors charte de chaque ligne :
   un rond neutre, l'icône en turquoise (couleur d'action). */
.lieu-ico{color:var(--accent);background:var(--surface2);border-color:var(--border)}
.lieu-btn:hover .lieu-ico,.lieu-btn.solo:hover .lieu-ico{background:color-mix(in srgb,var(--accent) 16%,var(--surface2))}
.lieu-btn.solo .lieu-ico{background:var(--surface2)}
.go-maps{color:var(--accent);background:var(--surface2);border-color:var(--border)}
.go-maps:hover{background:color-mix(in srgb,var(--accent) 16%,var(--surface2))}
:root[data-theme="light"] .lieu-ico,:root[data-theme="light"] .go-maps,
:root[data-theme="light"] .go-maps span{color:var(--accent)}

/* ── ICÔNES DES FAITS DE MATCH (leger.js, faits()) ─────────────────────
   Chaque fait garde une couleur évidente, prise dans la charte : carton
   jaune = jaune « nul », carton rouge et absence injustifiée = rouge
   « défaite », retard = orange (alerte douce), passe décisive = violet clair,
   respect = turquoise, présence = vert. */
.ll-e{display:inline-flex;align-items:center;vertical-align:-2px;line-height:1}
.ll-e svg{width:14px;height:14px}
.ll-e--orange{color:var(--plb-orange)}
.ll-e--rouge{color:var(--plb-defaite)}
.ll-e--violet{color:var(--ll-violet)}
.ll-e--turquoise{color:var(--accent)}
.ll-e--vert{color:var(--plb-victoire)}
.ll-e--gris{color:var(--muted)}
.ll-e--encre{color:var(--strong)}
.ll-e--herite{color:inherit}
.ll-carton{display:inline-block;width:9px;height:12px;border-radius:2px;
           transform:rotate(8deg);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.ll-e--carton-j .ll-carton{background:var(--plb-nul)}
.ll-e--carton-r .ll-carton{background:var(--plb-defaite)}
/* Dans la légende, un peu d'air entre l'icône et son libellé. */
.st-respect .ll-e{vertical-align:-3px}

/* ── LIGNE DE TEMPS DES CALENDRIERS (.chrono) — Daniel, 12/10 ─────────────
   Activité (« Moi »), Championnat (journée) et Équipe. Comme dans l'appli :
   un trait vertical le long de la liste — turquoise sur ce qui est à venir,
   gris sur ce qui est passé — et un point « Aujourd'hui » là où l'on en est
   (ligne .m-auj, posée par la page ou par leger.js). Les matchs passés
   (.m-passe) perdent un peu d'intensité : date, intitulé, pastilles — celles
   des équipes PasseLaBalle comprises. La case du score garde sa couleur.
   Le trait est un ::before sur chaque ligne, à 11 px du bord : le point du
   jour n'est pas coupé par la carte, et les lignes jointives font un trait
   continu. « Mon match » (.moi) garde son liseré à la couleur du club. */
.chrono > .mrow{position:relative;padding-left:30px}
.chrono > .mrow:not(.moi){box-shadow:none}
.chrono > .mrow::before{
  content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;
  background:var(--border);pointer-events:none;
}
.chrono > .mrow.avenir::before,
.chrono > .mrow[data-fx]:not(.m-passe)::before,
.chrono > .mrow[data-ev]:not(.m-passe)::before{background:color-mix(in srgb,var(--accent) 70%,transparent)}

.chrono > .mrow.m-auj{
  display:flex;align-items:center;gap:12px;padding:10px 22px 10px 30px;
  font:700 11px var(--plb-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.chrono > .mrow.m-auj::before{background:linear-gradient(180deg,
  color-mix(in srgb,var(--accent) 70%,transparent) 50%,var(--border) 50%)}
/* Liste croissante (passé en haut : Équipe, Championnat) : le segment du
   point s'inverse, sinon le trait était gris-turquoise-gris-turquoise. */
.chrono > .mrow.m-auj.ll-passe-haut::before{background:linear-gradient(180deg,
  var(--border) 50%,color-mix(in srgb,var(--accent) 70%,transparent) 50%)}
.chrono > .mrow.m-auj span{position:relative;white-space:nowrap}
.chrono > .mrow.m-auj span::before{        /* le point, sur le trait */
  content:"";position:absolute;left:-24px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
}
.chrono > .mrow.m-auj::after{              /* un filet jusqu'au bord, après le texte */
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
}

/* Quand le point « Aujourd'hui » est posé, c'est son CÔTÉ qui décide
   (leger.js, cotes()) : côté passé gris, l'autre turquoise — une ligne sans
   date rangée avant aujourd'hui n'est plus turquoise. Classe doublée pour
   passer devant les règles ci-dessus. */
.chrono > .mrow.ll-cote-p.ll-cote-p::before{background:var(--border)}
.chrono > .mrow.ll-cote-f.ll-cote-f::before{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.chrono > .mrow.ll-cote-p:not(.m-passe) .mwhen,
.chrono > .mrow.ll-cote-p:not(.m-passe) .mj{opacity:.62}

/* Matchs passés : un ton en dessous (pas la case du score). */
.chrono > .mrow.m-passe .mwhen,
.chrono > .mrow.m-passe .m-ev,
.chrono > .mrow.m-passe .mj{opacity:.62}
.chrono > .mrow.m-passe .mt,
.chrono > .mrow.m-passe .teams,
.chrono > .mrow.m-passe .place{opacity:.75}
.chrono > .mrow.m-passe .team-tag{filter:saturate(.6) brightness(.85)}

@media(max-width:720px){
  .chrono > .mrow,.chrono > .mrow.m-auj{padding-left:26px}
  .chrono > .mrow::before{left:9px}
  .chrono > .mrow.m-auj span::before{left:-22px}
}