:root {
  --fond: #16213e;
  --fond-2: #1d2b50;
  --fond-3: #25375f;
  --texte: #f4f1ea;
  --texte-doux: #b9c1d6;
  --papier: #fbf8f1;
  --encre: #1c1c24;
  --encre-douce: #5d5f6e;
  --accent: #f2c200;

  --geo: #1f6fd1;
  --div: #e0479e;
  --his: #f2c200;
  --art: #8a5a2b;
  --sci: #2e9e4f;
  --spo: #f07c1b;

  --rayon: 16px;
  --ombre: 0 10px 30px rgba(0, 0, 0, .35);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
  background-image: radial-gradient(circle at 20% -10%, #2a3d6e 0, transparent 55%);
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom);
}

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2 { line-height: 1.15; margin: 0 0 .6em; }
h2 { font-size: 1.5rem; }

/* ---------- Barre du haut ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(22, 33, 62, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1.15rem;
  white-space: nowrap;
}
.brand b { color: var(--accent); }
.brand-img { display: block; height: 46px; width: auto; }
.topnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.topnav a {
  text-decoration: none;
  font-size: .9rem;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--texte-doux);
  white-space: nowrap;
}
.topnav a.actif { background: var(--fond-3); color: var(--texte); }

@media (max-width: 560px) {
  .topnav { display: none; }
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.chargement { text-align: center; color: var(--texte-doux); margin-top: 30vh; }

/* ---------- Accueil ---------- */
.hero { text-align: center; padding: 20px 0 24px; }
.hero-logo { width: 104px; height: 104px; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.hero h1 { font-size: 2.6rem; margin: 0 0 4px; letter-spacing: -.02em; }
.hero-img { display: block; width: min(280px, 70vw); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.hero h1 b { color: var(--accent); }
.hero-sous { color: var(--texte-doux); margin: 0; }

.menu { display: grid; gap: 12px; }
@media (min-width: 600px) { .menu { grid-template-columns: 1fr 1fr; } }
.menu-item {
  display: block;
  text-decoration: none;
  background: var(--fond-2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--rayon);
  padding: 18px;
  transition: transform .15s, background .15s;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--fond-3); transform: translateY(-2px); }
.menu-titre { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.menu-desc { display: block; color: var(--texte-doux); font-size: .92rem; }

.legende {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 16px;
  color: var(--texte-doux);
  font-size: .92rem;
}
.legende li { display: flex; align-items: center; gap: 8px; }

.pastille {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--c);
}

.installer { text-align: center; margin-top: 24px; }

/* ---------- Boutons ---------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: #1c1c24;
  cursor: pointer;
  transition: transform .1s, filter .15s;
}
a.btn { display: inline-block; text-align: center; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn-clair { background: var(--fond-3); color: var(--texte); }
.btn-ok { background: #3cb96a; color: #fff; }
.btn-ko { background: #d9534f; color: #fff; }
.btn-lien {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0;
  font: inherit;
  color: var(--texte-doux);
  text-decoration: underline;
  cursor: pointer;
}
.btn:focus-visible, .btn-lien:focus-visible, .ligne-q:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.actions .btn { flex: 1 1 160px; max-width: 260px; }

.astuce { text-align: center; color: var(--texte-doux); font-size: .88rem; margin-top: 14px; }

.barre { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; color: var(--texte-doux); font-size: .92rem; }
.barre select { padding: 6px 10px; font-size: .88rem; flex: 1 1 auto; max-width: 260px; }

/* ---------- Carte ---------- */
.carte {
  background: var(--papier);
  color: var(--encre);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #ece6d8;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: .85rem;
  color: var(--encre-douce);
}
.carte-tete .num { font-variant-numeric: tabular-nums; color: var(--encre); font-size: 1rem; }

.ligne-q {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 0 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid #e6dfcf;
  padding: 14px 18px 14px 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ligne-q:first-of-type { border-top: 0; }
.ligne-q::before { content: ""; background: var(--c); border-radius: 0 4px 4px 0; grid-row: 1 / span 3; }
.ligne-q .cat {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-texte, var(--c));
}
.ligne-q .q { font-size: 1.02rem; font-weight: 500; }
.ligne-q .r {
  margin-top: 6px;
  font-weight: 800;
  color: var(--encre);
  display: none;
}
.ligne-q .r::before { content: "→ "; color: var(--c-texte, var(--c)); }
.ligne-q.ouvert .r { display: block; animation: apparait .25s ease-out; }
.ligne-q .indice { font-size: .78rem; color: var(--encre-douce); margin-top: 4px; }
.ligne-q.ouvert .indice { display: none; }

@keyframes apparait { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.niv {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; opacity: .75;
}

/* ---------- Partie ---------- */
.formulaire fieldset {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.formulaire legend { padding: 0 6px; font-weight: 700; }
.choix { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choix label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.liste-joueurs { display: grid; gap: 8px; margin-bottom: 6px; }
.joueur-champ { display: flex; gap: 8px; }
input[type="text"], input[type="search"], input[type="number"], select {
  font: inherit;
  color: var(--texte);
  background: var(--fond-2);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.joueur-champ input { flex: 1; }
.joueur-champ button { flex: none; }

.scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.score {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--fond-2);
  border: 2px solid transparent;
}
.score.actif { border-color: var(--accent); background: var(--fond-3); }
.score .nom { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score .meta { font-size: .8rem; color: var(--texte-doux); }
.scores-compacts { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.scores-compacts .score { padding: 6px 7px; gap: 6px; min-width: 0; }
.scores-compacts .points-rond { width: 28px; height: 28px; font-size: .85rem; }
.scores-compacts .nom { font-size: .92rem; }
.choix-joueurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.choix-joueurs .btn { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement .meta { color: var(--texte-doux); font-size: .9rem; }

.tour { text-align: center; }
.tour .carte { text-align: left; margin-bottom: 16px; }
.tour .carte .ligne-q { cursor: default; }
.message { color: var(--texte-doux); margin: 8px 0 16px; }
.partie-actions { text-align: center; margin-top: 26px; }
.trophee { font-size: 4rem; line-height: 1; margin: 0 0 10px; }

/* ---------- Solo ---------- */
h3 { font-size: 1.1rem; margin: 24px 0 10px; }
.regle { color: var(--texte-doux); font-size: .9rem; margin: 0 0 16px; }
.records { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.records li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fond-2);
  font-size: .9rem;
}
.records li span { color: var(--texte-doux); }
.records li b { color: var(--accent); white-space: nowrap; }

.solo-tete { display: flex; justify-content: space-between; align-items: center; color: var(--texte-doux); }
.solo-score b { font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.solo-info { color: var(--texte-doux); font-size: .9rem; margin: 2px 0 12px; min-height: 1.3em; }
.vies { display: inline-flex; gap: 6px; }
.vies i { width: 14px; height: 14px; border-radius: 50%; background: var(--fond-3); }
.vies i.on { background: #d9534f; }
#solo-jeu .carte { margin-bottom: 16px; }

.solo-fin { text-align: center; }
.solo-config-rappel { color: var(--texte-doux); font-size: .9rem; margin: 0; }
.solo-total { font-size: 1.2rem; margin: 6px 0 2px; }
.solo-total b { display: block; font-size: 4rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.solo-record { margin: 6px 0 0; color: var(--texte-doux); }
.solo-record.nouveau { color: var(--accent); font-weight: 700; }
.barres { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 8px; text-align: left; }
.barres li { display: grid; grid-template-columns: 9.5em 1fr 3em; gap: 10px; align-items: center; font-size: .9rem; }
.barre-fond { height: 10px; border-radius: 999px; background: var(--fond-3); overflow: hidden; }
.barre-val { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.barre-chiffre { text-align: right; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.ratees { margin-top: 12px; }

/* Réponse au micro ou au clavier */
.repondre { display: grid; gap: 10px; justify-items: center; }
.btn-micro { display: inline-flex; align-items: center; gap: 10px; }
.micro { display: inline-flex; }
.btn-micro.ecoute-active { background: #d9534f; color: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, .6); } 50% { box-shadow: 0 0 0 12px rgba(217, 83, 79, 0); } }
.saisie { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.saisie input { flex: 1; }
.saisie .btn { padding: 10px 18px; }
.ecoute { min-height: 1.4em; margin: 0; color: var(--texte-doux); font-style: italic; text-align: center; }
.verdict { margin: 0 0 12px; font-weight: 800; font-size: 1.15rem; }
.verdict.juste { color: #5fd68b; }
.verdict.faux { color: #ff8a80; }
.verdict .entendu { display: block; margin-top: 4px; font-weight: 400; font-size: .9rem; color: var(--texte-doux); }

.btn-lire { text-decoration: none; font-weight: 700; color: var(--texte); }
.btn-lire:hover { text-decoration: underline; }

/* ---------- Carte du jour ---------- */
.menu-jour {
  display: block;
  text-decoration: none;
  margin-bottom: 14px;
  padding: 18px 20px;
  border-radius: var(--rayon);
  background: linear-gradient(120deg, #f2c200, #f07c1b);
  color: #1c1c24;
  box-shadow: var(--ombre);
}
.menu-jour.fait { background: var(--fond-2); color: var(--texte); box-shadow: none; border: 1px solid rgba(255, 255, 255, .1); }
.menu-jour-titre { display: block; font-weight: 800; font-size: 1.25rem; }
.menu-jour-etat { display: block; font-size: .92rem; margin-top: 2px; }
.menu-jour.fait .menu-jour-etat { color: var(--texte-doux); }
.lien-reglages { text-align: center; margin-top: 18px; }
.lien-reglages a { color: var(--texte-doux); }

.jour-cases { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.jour-case {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--c);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
}
.jour-case.ko { opacity: .45; }
.jour-stats { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jour-stats li { background: var(--fond-2); border-radius: 12px; padding: 10px 4px; text-align: center; font-size: .78rem; color: var(--texte-doux); }
.jour-stats b { display: block; font-size: 1.5rem; color: var(--texte); }
#jour-contenu { text-align: center; }
#jour-contenu .resultats { text-align: left; }

/* ---------- Partage et défi ---------- */
.partage { display: grid; gap: 10px; justify-items: center; margin: 10px 0 18px; }
.btn-partage { min-width: 220px; }
.partage-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lien-partage {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .15);
  background: var(--fond-2);
  color: var(--texte);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
}
.lien-partage:hover { background: var(--fond-3); }
.partage-info { margin: 0; font-size: .88rem; color: var(--texte-doux); min-height: 1.2em; white-space: pre-line; }
.bloc-defi { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.bloc-defi h3 { margin-top: 0; }
.champ-nom { display: inline-flex; gap: 8px; align-items: center; color: var(--texte-doux); font-size: .9rem; }
.champ-nom input { width: 160px; padding: 6px 10px; }
.defi-intro { text-align: center; padding-top: 10px; }
.defi-cible { font-size: 3.5rem; margin: 0; }
.solo-record.defi-gagne { color: #5fd68b; font-weight: 700; }
.solo-record.defi-perdu { color: #ff8a80; font-weight: 700; }
.solo-record.defi-egalite { color: var(--accent); font-weight: 700; }

/* Classement du jour, groupes d'amis, rappel */
.classement-jour, .groupes, .rappel { margin: 22px 0; }
.classement-phrase { font-weight: 700; font-size: 1.05rem; margin: 4px 0 12px; }
.histogramme { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 130px; margin: 8px 0; }
.barre { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; gap: 3px; min-width: 0; }
.barre-zone { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.barre-remplie { display: block; width: 100%; min-height: 3px; background: var(--fond-3); border-radius: 6px 6px 2px 2px; }
.barre.moi .barre-remplie { background: var(--accent); }
.barre-nb, .barre-label { font-size: .75rem; color: var(--texte-doux); }
.barre.moi .barre-label { color: var(--accent); font-weight: 800; }
.groupe { background: var(--fond-2); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.groupe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.groupe-tete h4 { margin: 0; font-size: 1.05rem; }
.tableau-groupe { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .95rem; }
.tableau-groupe th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--texte-doux); padding: 4px 6px; }
.tableau-groupe td { padding: 7px 6px; border-top: 1px solid var(--fond-3); }
.tableau-groupe td:first-child, .tableau-groupe th:first-child { width: 1.8em; color: var(--texte-doux); }
.tableau-groupe tr.moi td { color: var(--accent); }
.tableau-groupe tr.moi td:nth-child(2) { font-weight: 800; }
.groupe-inviter summary, .nouveau-groupe summary, .rappel-agenda summary { cursor: pointer; color: var(--texte-doux); padding: 6px 0; }
.groupe-inviter .partage { margin-top: 8px; }
.nouveau-groupe .formulaire { margin-top: 8px; }
.invitation-groupe { border: 2px solid var(--accent); border-radius: var(--rayon); padding: 4px 14px; margin-bottom: 18px; }
.rappel select { font: inherit; padding: 4px 6px; border-radius: 8px; }
.rappel-agenda .partage-liens { justify-content: flex-start; }

/* Profil et code de transfert */
.mon-code { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.code-profil { font-size: 1.5rem; letter-spacing: .12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.code-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code-ligne input { flex: 1 1 150px; min-width: 0; font-size: 1.15rem; letter-spacing: .15em; text-transform: uppercase; }
.recuperer-profil summary { cursor: pointer; color: var(--texte-doux); padding: 6px 0; }
.banniere-profil { border: 2px solid var(--accent); border-radius: var(--rayon); padding: 12px 16px; margin: 0 0 18px; }
.banniere-profil h3 { margin: 0 0 6px; }
.code-installation { background: var(--fond-2); border-radius: 12px; padding: 10px 14px; margin: 8px 0 12px; }

/* ---------- Réglages ---------- */
.aide { color: var(--texte-doux); font-size: .88rem; margin: 0 0 8px; }
.champ { display: grid; gap: 6px; margin-bottom: 14px; font-size: .92rem; color: var(--texte-doux); }
.champ select, .champ input[type="range"] { width: 100%; }
#form-reglages input[type="text"] { width: 100%; }
.aide-voix { margin-top: 14px; font-size: .9rem; color: var(--texte-doux); }
.aide-voix summary { cursor: pointer; color: var(--texte); font-weight: 700; }
.aide-voix li { margin-bottom: 6px; }

/* ---------- Soirée entre amis ---------- */
.code-salle { text-transform: uppercase; letter-spacing: .3em; font-size: 1.3rem; font-weight: 800; }
.code-grand {
  text-align: center; font-size: 3.2rem; font-weight: 900; letter-spacing: .25em;
  margin: 8px 0 0; color: var(--accent); font-variant-numeric: tabular-nums;
}
.soiree-attente { text-align: center; padding: 30px 0; }
.salon-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.equipe { background: var(--fond-2); border-radius: 12px; padding: 10px 12px; border-top: 5px solid var(--c); }
.equipe ul, .liste-salon { margin: 6px 0 0; padding-left: 20px; }
.liste-salon { grid-column: 1 / -1; font-size: 1.05rem; }
.liste-salon li, .equipe li { margin: 3px 0; }
.btn-retirer {
  margin-left: 8px; border: 0; background: var(--fond-3); color: var(--texte-doux);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}
.choix-equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.choix-equipe .btn { background: var(--c); color: #fff; }
#soiree-contenu .score > div { min-width: 0; }
#soiree-contenu .score[style*="--c"] { border-left: 5px solid var(--c); }
.points-rond {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--encre); font-weight: 900; font-size: .95rem;
}
.minuteur { text-align: center; font-weight: 800; font-size: 1.15rem; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.minuteur.urgent { color: #ff8a80; }
.reponses-soiree { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 6px; }
.reponses-soiree li { background: var(--fond-2); border-radius: 10px; padding: 8px 12px; border-left: 4px solid #ff8a80; }
.reponses-soiree li.juste { border-left-color: #5fd68b; }
.classement { font-size: 1.1rem; padding-left: 26px; }
.classement li { margin: 6px 0; }
.classement li:first-child { color: var(--accent); }
.arbitrage { margin: 14px 0; background: var(--fond-2); border-radius: 12px; padding: 10px 14px; }
.arbitrage summary { cursor: pointer; color: var(--texte-doux); }
.reponse-cachee { margin: 10px 0; }

/* ---------- Parcourir ---------- */
.filtres { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .filtres { grid-template-columns: 2fr 1fr 1fr; } }
.resultats-info { color: var(--texte-doux); font-size: .9rem; }
.resultats { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.resultats li {
  background: var(--fond-2);
  border-left: 5px solid var(--c);
  border-radius: 10px;
  padding: 10px 14px;
}
.resultats .meta { font-size: .78rem; color: var(--texte-doux); }
.resultats .meta a { color: var(--texte-doux); }
.resultats .r { font-weight: 700; color: var(--accent); }

/* Carte du jour : la semaine (rattrapage jusqu'à dimanche) */
.semaine-jour { margin: 18px 0; }
.sem-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sem-jour {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px;
  border-radius: 10px; background: var(--fond-2); color: var(--texte-doux); font: inherit; border: 2px solid transparent;
}
.sem-nom { font-size: .72rem; text-transform: capitalize; }
.sem-val { font-weight: 800; font-size: .9rem; min-height: 1.2em; color: var(--texte); }
.sem-jour.jouee { background: var(--fond-3); }
.sem-jour.manquee { border-color: var(--accent); cursor: pointer; }
.sem-jour.manquee .sem-val { color: var(--accent); font-size: .78rem; }
.sem-jour.aujourdhui { border-color: var(--texte-doux); }
.sem-jour.avenir { opacity: .45; }
.sem-jour.vu { border-color: var(--texte); }
button.sem-jour.jouee { cursor: pointer; }

/* Classement de groupe : bonnes réponses et points jour par jour */
.cases-semaine { display: inline-grid; grid-template-columns: repeat(7, minmax(2.3em, 1fr)); gap: 3px; }
.case-sem {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 1px; border-radius: 6px;
  background: var(--fond-3); color: var(--texte-doux); position: relative; line-height: 1.1;
}
.case-jour { font-size: .6rem; opacity: .75; }
.case-bonnes { font-size: .8rem; font-weight: 800; min-height: 1.1em; }
.case-points { font-size: .62rem; min-height: 1.1em; white-space: nowrap; }
.case-sem.faite { background: var(--sci); color: #fff; }
.case-sem.faite .case-jour { opacity: .9; }
.case-sem.avenir { opacity: .35; }
.case-sem.aujourdhui { outline: 1px solid var(--texte-doux); }
.case-sem.retard::after { content: '⏰'; position: absolute; top: -.5em; right: -.35em; font-size: .62rem; }
.total-semaine { white-space: nowrap; }
.total-semaine b, .total-semaine span { display: block; }
.tableau-groupe td:nth-child(3), .tableau-groupe th:nth-child(3) { white-space: nowrap; }
.total-semaine span { margin: 0; line-height: 1.3; }
/* Téléphone : nom et total sur une ligne, les sept jours en dessous, sur toute la largeur. */
@media (max-width: 600px) {
  .tableau-groupe thead { display: none; }
  .tableau-groupe tr { display: grid; grid-template-columns: 1.6em 1fr auto; grid-template-areas: "rang nom total" "jours jours jours";
    align-items: center; border-top: 1px solid var(--fond-3); padding: 8px 0; }
  .tableau-groupe td { border-top: 0; padding: 0 4px; }
  .tableau-groupe td:nth-child(1) { grid-area: rang; }
  .tableau-groupe td:nth-child(2) { grid-area: nom; text-align: left; }
  .tableau-groupe td:nth-child(3) { grid-area: jours; padding-top: 6px; }
  .tableau-groupe td:nth-child(4) { grid-area: total; text-align: right; }
  .cases-semaine { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; }
  .total-semaine b, .total-semaine span { display: inline; }
  .total-semaine span::before { content: ' · '; }
}

/* Historique : d'une semaine à l'autre (trois semaines en arrière) */
.nav-semaine { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.nav-semaine-titre { font-weight: 700; text-align: center; flex: 1; }
.btn-nav {
  width: 2.2em; height: 2.2em; border-radius: 50%; border: 0; background: var(--fond-3); color: var(--texte);
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.btn-nav:disabled { opacity: .3; cursor: default; }
.sem-pts { font-size: .62rem; color: var(--texte-doux); }
.sem-jour.passee { opacity: .6; }
.groupe-corps.chargement { opacity: .5; }