/* Formation Privée — composants nouveaux de la refonte de l'interface (15 octobre 2026) : carte « Prochain examen » en vedette,
   liste d'échéances, carte d'évolution (courbe, objectif, matières), compteurs « à traiter », cartes de groupe, filtres,
   séance « À revoir ». Valeurs de docs/DESIGN.md ; formes des maquettes docs/maquettes/maquette-cliquable-*-20261015.html.
   Ajouté après style.css et coque.css. Le rouge reste réservé aux erreurs ; majuscules réservées aux titres de page. */

/* ---------- Mise en page des écrans : une ou deux colonnes ---------- */
.ecran { display: grid; gap: var(--space-5); align-content: start; }
.ecran > * { min-width: 0; }
.col { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.deux-col { display: grid; gap: var(--space-5); align-content: start; }
.salut { display: grid; gap: 2px; margin-bottom: var(--space-2); }
.salut p { margin: 0; color: var(--color-ink-muted); }
.bloc-titre { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-2); }
.bloc-titre h2 { margin: 0; font-size: 1.5rem; text-transform: uppercase; font-weight: 700; }
.lien-simple { color: var(--color-accent); font-weight: 600; font-size: var(--fs-petit); min-height: var(--cible); display: inline-flex; align-items: center; text-decoration: none; }
.lien-bouton { border: 0; background: none; padding: 0 4px; min-height: var(--cible); display: inline-flex; align-items: center; color: var(--color-accent); font-weight: 600; font-size: var(--fs-petit); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Carte « Prochain examen » ---------- */
.vedette {
  position: relative; overflow: hidden; display: grid; gap: var(--space-3); padding: var(--space-5);
  background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-carte); box-shadow: var(--ombre-vedette);
}
.vedette > *:not(.vedette__etoile) { position: relative; }
.vedette__etoile { position: absolute; right: -26px; top: -22px; width: 150px; height: 150px; opacity: .12; fill: var(--color-gold); pointer-events: none; }
.vedette__sur { margin: 0; font-size: var(--fs-petit); font-weight: 600; color: var(--color-gold-light); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vedette__ouverte { background: rgba(255, 255, 255, .14); color: var(--color-on-accent-soft); border-radius: var(--radius-gelule); padding: 1px 10px; font-weight: 600; }
.vedette h2 { margin: 0; color: var(--color-accent-contrast); font-size: 1.75rem; line-height: 1.1; font-weight: 700; }
.vedette__meta { margin: 0; color: var(--color-on-accent-soft); font-size: var(--fs-petit); }
.vedette__compte { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.vedette__compte small { color: var(--color-on-accent-soft); font-size: var(--fs-petit); }
.vedette__compte b { font-family: var(--font-titre); font-size: 3.25rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vedette .btn { justify-self: start; background: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-accent); }
.vedette .btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-accent); }
.vedette details { color: var(--color-on-accent-soft); font-size: var(--fs-petit); }
.vedette summary { min-height: var(--cible); display: flex; align-items: center; cursor: pointer; }
.vedette ul { margin: 0 0 var(--space-2); padding-left: 1.25rem; }
.vedette :focus-visible { outline-color: var(--color-gold-light); }
.vedette__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

/* ---------- Cartes simples, listes, étiquettes ---------- */
.carte-simple { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); padding: var(--space-4); }
.carte-simple h2, .carte-simple h3 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.carte-simple p { color: var(--color-ink-muted); }
.carte-simple .btn { justify-self: start; }
.carte-gauche { border-left: 4px solid var(--color-accent); }
.carte-or { border-left: 4px solid var(--color-gold-text); }
.carte-aide { display: grid; gap: var(--space-3); justify-items: start; }
.carte-aide p { margin: 0; }
.liste { display: grid; padding: 0; margin: 0; list-style: none; }
.liste > li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-separator); }
.liste > li:first-child { border-top: 0; padding-top: 0; }
.liste > li:last-child { padding-bottom: 0; }
.liste b { display: block; font-size: var(--fs-corps); line-height: 1.3; }
/* Dans une liste, le lien du titre ne grossit plus la ligne (il laissait un trou sous le titre par rapport aux lignes sans lien) :
   la cible de 44 px reste dans la boite du lien (marge interieure de 12 px), compensee par une marge exterieure negative, donc la mise en
   page ne bouge pas, que le titre tienne sur une ou deux lignes. La hauteur propre du lien reste mesurable (regle des 44 px des tests). */
.liste .lilink { font-size: var(--fs-corps); line-height: 1.3; min-height: 0; padding: 12px 0; margin: -12px 0; }
.liste small { color: var(--color-ink-muted); font-size: var(--fs-petit); display: block; }
.liste--dates > li { grid-template-columns: auto 1fr auto; gap: var(--space-4); padding: var(--space-3) 0; }
.lilink { display: inline-flex; align-items: center; min-height: var(--cible); font-weight: 700; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-pale-border); text-underline-offset: 3px; }
.lilink:hover { color: var(--color-accent); }
.date { width: 58px; text-align: center; border-radius: 10px; background: var(--color-accent-pale); color: var(--color-accent); padding: 6px 0 5px; line-height: 1; }
.date b { font-family: var(--font-titre); font-size: 1.75rem; font-weight: 700; display: block; }
.date small { display: block; color: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.date.or { background: var(--color-gold-bg); color: var(--color-gold-text); }
.tag { font-size: var(--fs-legende); font-weight: 600; border-radius: var(--radius-gelule); padding: 2px 10px; background: var(--color-accent-pale); color: var(--color-accent); white-space: nowrap; display: inline-block; }
.tag.or { background: var(--color-gold-bg); color: var(--color-gold-text); border: 1px solid var(--color-gold-border); }
.tag.gris { background: var(--color-missed-bg); color: var(--color-ink-strong-gray); }
.tag.rouge { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.chevauche { color: var(--color-gold-text) !important; font-weight: 600; }
.voir-plus { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); padding-top: 4px; border-top: 1px solid var(--color-separator); }
.voir-plus span { color: var(--color-ink-muted); font-size: var(--fs-petit); }
.vide-note { color: var(--color-ink-muted); margin: 0; font-size: var(--fs-petit); }

/* État vide soigné : disque vert pâle avec une icône au trait, phrase centrée, et au besoin un bouton d'action dans la phrase.
   S'ajoute à .vide-note (« vide-note etat-vide etat-vide--liste ») ; l'attribut hidden continue de le masquer. Icônes : même jeu
   au trait que les icônes du site (Lucide, voir img/LICENCE-lucide.txt), en vert de la marque. */
.etat-vide { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-6) var(--space-4); max-width: 30rem; margin: 0 auto; line-height: 1.5; }
.etat-vide::before {
  content: ""; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--color-accent-pale-border);
  background-color: var(--color-accent-pale); background-repeat: no-repeat; background-position: center; background-size: 28px 28px;
  background-image: var(--icone-vide, none);
}
.etat-vide .btn { margin-top: var(--space-1); }
.etat-vide--liste { --icone-vide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314452B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4v-1h6v1M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.etat-vide--calendrier { --icone-vide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314452B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16'/%3E%3C/svg%3E"); }
.etat-vide--groupe { --icone-vide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314452B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M16 5a3 3 0 0 1 0 6M21 20v-1a5 5 0 0 0-3-4.6'/%3E%3C/svg%3E"); }
.etat-vide--resultats { --icone-vide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314452B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E"); }

/* ---------- Filtres et onglets en gélules ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.filtre {
  min-height: var(--cible); display: inline-flex; align-items: center; padding: 0 var(--space-4); border-radius: var(--radius-gelule);
  border: 1px solid var(--color-border-field); background: var(--color-surface); font-size: var(--fs-petit); font-weight: 600; color: var(--color-ink); cursor: pointer;
}
.filtre[aria-pressed="true"] { background: var(--color-accent-pale); border-color: var(--color-accent); color: var(--color-accent); }
/* Téléphone : une seule rangée qui défile sur le côté au lieu de plusieurs lignes de gélules (un bout de gélule dépasse toujours, ce qui montre
   qu'on peut faire défiler). Seules les rangées de gélules (role="group") sont concernées : la grille de champs de la bibliothèque garde sa mise en page. */
@media (max-width: 639.98px) {
  .filtres[role="group"] { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px; margin: -4px -2px calc(var(--space-4) - 4px); }
  .filtres[role="group"]::-webkit-scrollbar { display: none; }
  .filtres[role="group"] .filtre { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Carte d'évolution ---------- */
.carte-evo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); padding: var(--space-4); display: grid; gap: var(--space-4); align-content: start; }
.carte-evo__titre { margin: 0; font-size: 1.625rem; }
.evo-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.evo-lib { color: var(--color-ink-muted); font-size: var(--fs-petit); display: block; margin-bottom: 2px; }
.evo-grand { font-family: var(--font-titre); font-weight: 700; font-size: 3.75rem; line-height: .95; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.evo-grand small { font-size: 1.375rem; color: var(--color-ink-muted); font-weight: 600; margin-left: 4px; }
.delta { display: inline-flex; align-items: center; background: var(--color-accent-pale); color: var(--color-accent); border-radius: var(--radius-gelule); padding: 4px 12px; font-size: var(--fs-petit); font-weight: 700; }
.delta.bas { background: var(--color-gold-bg); color: var(--color-gold-text); }
.evo-vide { color: var(--color-ink-muted); font-size: var(--fs-petit); margin: 0; }
.evo-sub { font-size: var(--fs-petit); font-weight: 700; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.evo-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.evo-chart .g { stroke: #E7E9E4; stroke-width: 1; }
.evo-chart .ax { fill: var(--color-ink-muted); font-size: 12px; font-family: var(--font-ui); }
.evo-chart .ln { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.evo-chart .ar { fill: var(--color-accent); opacity: .08; }
.evo-chart .dt { fill: #fff; stroke: var(--color-accent); stroke-width: 2; }
.evo-chart .dt.last { fill: var(--color-accent); stroke: #fff; }
.evo-chart .lab { fill: var(--color-accent); font-weight: 700; font-size: 14px; font-family: var(--font-ui); }
.evo-chart .hit { fill: transparent; cursor: pointer; }
.evo-chart .hit:focus-visible { outline: none; stroke: var(--color-accent); stroke-width: 2; }
.evo-chart .tip { pointer-events: none; display: none; }
.evo-chart .tip rect { fill: var(--color-ink); }
.evo-chart .tip text { fill: #fff; font-size: 12px; font-family: var(--font-ui); }
.evo-chart g.pt.on .tip { display: block; }
.evo-chart .objl { stroke: var(--color-gold-text); stroke-width: 1.5; stroke-dasharray: 6 4; }
.evo-chart .objt { fill: var(--color-gold-text); font-size: 12px; font-weight: 700; font-family: var(--font-ui); }
.obj { display: flex; align-items: center; gap: 4px var(--space-3); flex-wrap: wrap; font-size: var(--fs-petit); }
.obj b { font-variant-numeric: tabular-nums; }
.obj-ed { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--color-bg); border-radius: 10px; padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.obj-ed .pas { width: var(--cible); height: var(--cible); border-radius: 10px; border: 1px solid var(--color-border-field); background: #fff; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.obj-ed .pas:disabled { opacity: .5; cursor: not-allowed; }
.obj-ed output { font-family: var(--font-titre); font-size: 1.875rem; font-weight: 700; min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
.mat { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.mat li { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-3); align-items: baseline; }
.mat .nom { font-size: var(--fs-petit); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mat .val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-petit); }
.mat .track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--color-separator); overflow: hidden; }
.mat .track i { display: block; height: 100%; border-radius: 4px; background: var(--color-accent); }
.mat .faible .track i { background: var(--color-gold); }
.renf { font-size: var(--fs-legende); font-weight: 700; color: var(--color-gold-text); background: var(--color-gold-bg); border: 1px solid var(--color-gold-border); border-radius: var(--radius-gelule); padding: 0 10px; }
.encart--revoir { display: grid; gap: var(--space-3); margin: 0; }
.encart--revoir p { margin: 0; }
.encart--revoir .btn { justify-self: start; }

/* ---------- Thèmes à choisir (S'entraîner) ---------- */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.theme { text-align: left; border: 2px solid var(--color-border); background: #fff; border-radius: 12px; padding: var(--space-3) var(--space-4); display: grid; gap: 2px; min-height: 88px; align-content: start; color: var(--color-ink); cursor: pointer; }
.theme[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-pale); }
.theme b { font-size: var(--fs-corps); }
.theme small { color: var(--color-ink-muted); font-size: var(--fs-petit); }
.theme .tag { justify-self: start; margin-top: 4px; }

/* ---------- Résultats : lignes avec note ---------- */
.res-li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-separator); align-items: center; }
.res-li:first-child { border-top: 0; padding-top: 0; }
.res-li small { color: var(--color-ink-muted); font-size: var(--fs-petit); }
.res-li .pts { font-family: var(--font-titre); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; grid-row: 1 / 3; grid-column: 2; }
.res-li .pts small { font-family: var(--font-ui); font-size: var(--fs-petit); font-weight: 400; }

/* ---------- À revoir ---------- */
.bande-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bande-jours div { text-align: center; border: 1px solid var(--color-border); border-radius: 10px; padding: 6px 0; background: #fff; font-size: 12px; color: var(--color-ink-muted); display: grid; gap: 2px; }
.bande-jours div b { font-size: 1.375rem; font-family: var(--font-titre); color: var(--color-ink); line-height: 1; }
.bande-jours .auj { border-color: var(--color-accent); background: var(--color-accent-pale); }
.bande-jours .auj b { color: var(--color-accent); }
.bande-jours .zero b { color: var(--color-zero); }
.qi { border-top: 1px solid var(--color-separator); }
.qi:first-child { border-top: 0; }
.qi summary { list-style: none; min-height: var(--cible); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) 0; cursor: pointer; align-items: center; }
.qi summary::-webkit-details-marker { display: none; }
.qi summary b { font-size: var(--fs-corps); font-weight: 600; line-height: 1.35; }
.qi summary small { color: var(--color-ink-muted); font-size: var(--fs-petit); grid-column: 1; }
.qi summary .tag { grid-row: 1 / 3; grid-column: 2; }
.qi .corps { padding: 0 0 var(--space-4); display: grid; gap: var(--space-2); font-size: var(--fs-petit); }
.qi .corps p { color: var(--color-ink-muted); margin: 0; }
.rep { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.rep .l { font-weight: 700; font-size: var(--fs-legende); border-radius: var(--radius-gelule); padding: 0 10px; }
.rep .l.mal { background: var(--color-danger-bg); color: var(--color-danger); }
.rep .l.bon { background: var(--color-accent-pale); color: var(--color-accent); }

/* ---------- Compteurs « à traiter » (formateur, administration) ---------- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.compteur { text-align: left; border: 1px solid var(--color-border); background: #fff; border-radius: var(--radius-carte); padding: var(--space-4); display: grid; gap: 2px; color: var(--color-ink); box-shadow: var(--ombre-carte); text-decoration: none; }
a.compteur:hover { border-color: var(--color-accent); color: var(--color-ink); }
.compteur .n { font-family: var(--font-titre); font-size: 3rem; line-height: 1; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.compteur .l { font-weight: 700; font-size: var(--fs-corps); line-height: 1.25; }
.compteur small { color: var(--color-ink-muted); font-size: var(--fs-petit); line-height: 1.3; }
.compteur .go { color: var(--color-accent); font-weight: 600; font-size: var(--fs-petit); margin-top: 6px; }
.compteur.zero .n { color: var(--color-zero); }
.tout-ok { display: grid; gap: 4px; border-left: 4px solid var(--color-accent); }
.tout-ok p { color: var(--color-ink-muted); margin: 0; }
.gcard { text-align: left; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center; color: var(--color-ink); text-decoration: none; margin: 0; }
.gcard:hover { border-color: var(--color-accent); color: var(--color-ink); }
.gcard .g-t b { display: block; font-size: 1.0625rem; }
.gcard .g-t small { color: var(--color-ink-muted); font-size: var(--fs-petit); }
.gcard .g-m { font-family: var(--font-titre); font-size: 2.125rem; font-weight: 700; color: var(--color-accent); text-align: right; line-height: 1; }
.gcard .g-m small { font-family: var(--font-ui); font-size: var(--fs-petit); color: var(--color-ink-muted); font-weight: 400; }
.gcard .delta { justify-self: end; }
.gcard svg.spark { display: block; }

/* ---------- Bureau ---------- */
@media (min-width: 640px) {
  .themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .deux-col { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-6); }
  .deux-col--egal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vedette { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2) 3rem; padding: 2rem 2.25rem; }
  .vedette h2 { font-size: 2.375rem; }
  .vedette__meta { font-size: 1.0625rem; }
  .vedette__etoile { width: 220px; height: 220px; right: -40px; top: -40px; }
  .vedette__gauche { display: grid; gap: var(--space-3); justify-items: start; }
  .vedette__droite { background: rgba(255, 255, 255, .1); border-radius: 12px; padding: var(--space-4) 2rem; text-align: center; display: grid; gap: 2px; }
  .vedette__droite small { color: var(--color-on-accent-soft); font-size: var(--fs-petit); }
  .vedette__droite b { font-family: var(--font-titre); font-size: 4.25rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .salut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  .encart--revoir { grid-template-columns: 1fr auto; align-items: center; }
}
@media (max-width: 959.98px) {
  .vedette__droite { display: none; }
}

/* ---------- Accueil de l'élève : zones ---------- */
.accueil-zones { display: grid; gap: var(--space-5); grid-template-areas: "venir" "entr" "evo"; }   /* téléphone : le défi du jour avant la courbe */
.zone-venir { grid-area: venir; } .zone-evo { grid-area: evo; } .zone-entr { grid-area: entr; }
.zone-venir, .zone-evo, .zone-entr { min-width: 0; display: grid; gap: var(--space-2); align-content: start; }
@media (min-width: 960px) {
  .accueil-zones { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); grid-template-areas: "venir evo" "entr evo"; grid-template-rows: auto 1fr; align-items: start; }
  .vedette__compte { display: none; }
}

/* ---------- S'entraîner : carte « À revoir » ---------- */
.carte-revoir { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.carte-revoir h2 { margin: 0 0 2px; font-size: 1.25rem; }
.carte-revoir p { margin: 0; }

/* Refonte (16 octobre 2026) : listes à lignes et mise en page à deux colonnes des écrans de travail (maquettes). */
.deux-colonnes { display: grid; gap: var(--space-4); align-items: start; }
.deux-colonnes > .colonne { display: grid; gap: var(--space-4); min-width: 0; }
@media (min-width: 960px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); } }
.deux-colonnes > .panel, .deux-colonnes > .carte { margin: 0; }   /* cartes posées directement dans la grille : l'espacement vient de la grille */
.lignes { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.lignes > li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--color-separator); }
.lignes > li:first-child { border-top: 0; padding-top: 0; }
.lignes b { display: block; font-size: var(--fs-corps); line-height: 1.3; }
.lignes small { display: block; color: var(--color-ink-muted); font-size: var(--fs-petit); }
.lignes .val { font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.resultat-concours h2 { margin: 0 0 var(--space-2); }
.resultat-concours__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.resultat-concours__ligne p { margin: 0; }
.resultat-concours .grand-chiffre { color: var(--color-accent); margin: 0; }
.resultat-concours .raisons { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-ink); }
.resultat-concours .corrige-rang { margin: var(--space-2) 0 0; font-weight: 400; color: var(--color-ink-muted); }
/* Deux colonnes qui n'en font qu'une quand l'une est vide (par exemple la copie remise avant la correction). */
.deux-colonnes > .colonne:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 960px) { .deux-colonnes--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } }
.ecrit-correction { display: grid; gap: var(--space-4); }
.ecrit-correction h2, .carte-simple h3 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.carte-simple h3 { font-family: var(--font-titre); font-weight: 700; }

/* Onglets d'une page de travail (js/onglets-page.js) : gélules de 44 px, courante en vert pâle bordée de vert ; un panneau à la fois. */
.onglets-page { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.onglets-page:empty { display: none; }
.onglet-page {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--cible); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-field); border-radius: var(--radius-gelule); background: var(--color-surface);
  color: var(--color-ink); font: inherit; font-size: var(--fs-petit); font-weight: 700; cursor: pointer;
}
@media (max-width: 639.98px) {   /* même principe que les filtres : une rangée qui défile ; js/onglets-page.js amène l'onglet choisi dans la vue */
  .onglets-page { position: relative; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px; margin: -4px -2px calc(var(--space-4) - 4px); }
  .onglets-page::-webkit-scrollbar { display: none; }
  .onglet-page { flex: 0 0 auto; white-space: nowrap; }
}
.onglet-page:hover { background: var(--color-surface-alt); }
.onglet-page[aria-selected="true"] { background: var(--color-accent-pale); border-color: var(--color-accent); color: var(--color-accent); }
.panneau--masque { display: none !important; }
.carte-simple.section { margin-bottom: var(--space-4); }
.carte-simple.section > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-3); }
.carte-simple.section > h2 + p { margin-top: 0; }
#zone-epreuve > .actions-sujet { margin-bottom: var(--space-4); }
/* Résultats d'un concours blanc (formateur) : tableau qui défile dans sa carte au lieu de déborder, noms sur une ligne. */
#zone-resultats .carte-tableau { overflow-x: auto; position: relative; box-shadow: none; }
#tableau-resultats { min-width: 40rem; }
#tableau-resultats td, #tableau-resultats th { overflow-wrap: normal; word-break: normal; }
#tableau-resultats td:nth-child(2) { min-width: 8rem; }
.disposition-laterale > .main { min-width: 0; }   /* un tableau large défile dans sa carte au lieu d'élargir la page */
#tableau-resultats td:last-child { min-width: 12rem; }
/* Épreuves d'un concours (formateur) : dans la colonne de droite, le texte passe au-dessus des boutons. */
.deux-colonnes #liste-epreuves > .item { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.deux-colonnes #liste-epreuves .item__action { flex-wrap: wrap; }

/* Correction d'une copie (formateur, d'après la maquette) : critères avec boutons − et +, note en évidence. */
.critere { border: 0; border-top: 1px solid var(--color-separator); border-radius: 0; background: transparent; padding: var(--space-3) 0; margin: 0; }
.critere:first-child { border-top: 0; padding-top: 0; }
.critere__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.critere__titre b { display: block; line-height: 1.3; }
.critere__titre small { display: block; color: var(--color-ink-muted); font-size: var(--fs-petit); }
.critere .critere__points { display: flex; align-items: center; gap: 6px; margin: 0; flex: none; }
.critere .critere__points input { width: 4rem; text-align: center; font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; padding: 0; min-height: 44px; -moz-appearance: textfield; appearance: textfield; }
.critere .critere__points input::-webkit-outer-spin-button, .critere .critere__points input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.critere .pas { width: 44px; height: 44px; border: 1px solid var(--color-border-field); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.critere .pas:hover { background: var(--color-surface-alt); }
.critere .pas[disabled] { opacity: 0.5; cursor: not-allowed; }
.critere__commentaire { margin: var(--space-2) 0 0; }
.critere__commentaire label { font-size: var(--fs-petit); font-weight: 600; color: var(--color-ink-muted); }
.correction-note { font-size: var(--fs-corps); font-weight: 700; margin: var(--space-3) 0; padding: var(--space-3); background: var(--color-accent-pale); border-radius: 10px; color: var(--color-accent); }
.correction-note:empty { display: none; }

/* Fiche d'un compte (administration, d'après la maquette) */
.fiche { display: grid; gap: var(--space-4); }
.fiche__etat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-ink-muted); }
.fiche__carte { display: grid; gap: var(--space-2); align-content: start; }
.fiche__carte h2 { margin: 0 0 var(--space-1); }
.fiche__carte p { margin: 0; color: var(--color-ink-muted); }
.fiche__info { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--color-separator); }
.fiche__info:first-of-type { border-top: 0; padding-top: 0; }
.fiche__info span { color: var(--color-ink-muted); overflow-wrap: anywhere; }
.fiche__carte .actions-compte { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Progression par matière (page « Résultats ») : une ligne par matière, barre de réussite (classes .progression de style.css). */
.carte-matieres { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.carte-matieres h2, .carte-matieres p { margin: 0; }
.prog-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.prog-ligne { display: grid; gap: var(--space-2); }
.prog-ligne__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); align-items: baseline; }

.input-court { width: 4.5rem; min-width: 0; }

/* Défi du jour, série et plan de révision (16 octobre 2026) : carte de l'accueil et page « Défi du jour ». Téléphone d'abord, puis
   deux colonnes à l'ordinateur (.deux-colonnes). */
.carte-defi { display: grid; gap: var(--space-3); align-content: start; border-left: 4px solid var(--color-gold); }
.carte-defi h2, .defi-entete h2 { margin: 0; font-size: 1.5rem; }
.defi-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.defi-serie-nb { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.defi-serie-nb .icone { width: 1.25rem; height: 1.25rem; color: var(--color-gold-text); align-self: center; }
.defi-serie-nb b { font-family: var(--font-titre); font-size: 2.25rem; line-height: 1; color: var(--color-accent); }
.defi-objectif { display: grid; gap: var(--space-1); }
.defi-objectif__texte { margin: 0; font-size: 0.9375rem; }
.defi-semaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
.defi-jour { display: grid; justify-items: center; gap: 4px; font-size: 0.8125rem; color: var(--color-ink-muted); }
.defi-jour__rond { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--color-border); display: grid; place-items: center; background: var(--color-surface); }
.defi-jour .icone { width: 1rem; height: 1rem; }
.defi-jour--atteint .defi-jour__rond { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.defi-jour--auj .defi-jour__rond { border-color: var(--color-gold); }
.defi-jour--auj .defi-jour__nom { font-weight: 700; color: var(--color-ink); }
.defi-concours { margin: 0; font-weight: 600; color: var(--color-accent); }
.defi-pied, .defi-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.defi-score { margin: 0; font-weight: 700; color: var(--color-success); }
.defi-objectif-choix { margin-top: var(--space-3); }
.defi-plan-form { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.defi-plan-boutons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.defi-resume { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-accent-pale); border: 1px solid var(--color-accent-pale-border); border-radius: var(--radius-carte); }
.defi-resume p { margin: 0; color: var(--color-ink); }
.defi-formation { max-width: 24rem; }
@media (min-width: 960px) {
  .defi-jour__rond { width: 2.5rem; height: 2.5rem; }
  .defi-jour .icone { width: 1.25rem; height: 1.25rem; }
}

/* Épreuve blanche chronométrée (16 octobre 2026) : page de lancement et historique. */
.epreuve-encours { border-left: 4px solid var(--color-gold); display: grid; gap: var(--space-2); }
.epreuve-encours h2 { margin: 0; }
.epreuve-reste { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.epreuve-reste span:first-child { font-family: var(--font-titre); font-size: 2.5rem; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.epreuve-conditions { margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.epreuve-conditions > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.epreuve-conditions dt { color: var(--color-ink-muted); font-size: var(--fs-petit); }
.epreuve-conditions dd { margin: 0; font-weight: 600; color: var(--color-ink); }
.epreuve-regles { margin: 0 0 var(--space-4); padding-left: 1.25rem; display: grid; gap: var(--space-2); color: var(--color-ink-muted); }
.epreuve-lancer { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.epreuve-lancer p { margin: 0; }
.epreuve-confirmer { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--color-gold-bg); border: 1px solid var(--color-gold-text); border-radius: var(--radius-carte); }
.epreuve-confirmer p { margin: 0; color: var(--color-ink); font-weight: 600; }
.epreuve-note { font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.epreuve-ligne p { margin: 0; }

/* Badges par matière, badges généraux et classement hebdomadaire (16 octobre 2026). Téléphone d'abord : une colonne ; deux colonnes de
   cartes à partir de 640 px, trois à partir de 960 px. */
:root { --badge-bronze: #A8642A; --badge-argent: #75808E; --badge-or: var(--color-gold); }
.badge-grille, .badge-familles { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.badge-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); }
.badge-carte--vide { background: var(--color-surface-alt); box-shadow: none; }
.badge-carte__corps { display: grid; gap: var(--space-1); min-width: 0; }
.badge-carte__corps p { margin: 0; }
.badge-carte__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.badge-carte__tete strong { overflow-wrap: anywhere; }
.badge-niveau { font-weight: 600; color: var(--color-ink); }
.badge-objectif { font-size: var(--fs-petit); color: var(--color-ink-muted); }
.badge-medaille { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--color-border-field); flex: none; }
.badge-medaille .icone { width: 1.5rem; height: 1.5rem; }
.badge-medaille--aucun { background: var(--color-separator); color: var(--color-zero); }
.badge-medaille--decouverte { background: var(--color-accent); }
.badge-medaille--bronze { background: var(--badge-bronze); }
.badge-medaille--argent { background: var(--badge-argent); }
.badge-medaille--or { background: var(--badge-or); color: var(--color-ink); box-shadow: 0 0 0 3px var(--color-gold-bg); }
.badge-nouveau { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-gelule); background: var(--color-gold-bg); border: 1px solid var(--color-gold-border); color: var(--color-gold-text); font-size: 0.75rem; font-weight: 700; line-height: 1.5; margin-left: var(--space-2); }
.badge-carte__tete .badge-nouveau { margin-left: 0; }
.badge-famille { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-carte); box-shadow: var(--ombre-carte); align-content: start; }
.badge-famille p { margin: 0; }
.badge-famille__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); }
.badge-famille__valeur { font-family: var(--font-titre); font-size: 1.25rem; color: var(--color-accent); }
.badge-paliers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge-palier { display: inline-flex; align-items: center; gap: 4px; min-height: 2rem; padding: 0 var(--space-3); border-radius: var(--radius-gelule); border: 1px dashed var(--color-border-field); color: var(--color-ink-muted); font-size: var(--fs-petit); font-weight: 600; background: var(--color-surface-alt); }
.badge-palier--obtenu { border: 1px solid var(--color-accent-pale-border); background: var(--color-accent-pale); color: var(--color-success); }
.badge-palier .icone { width: 0.9rem; height: 0.9rem; }
.classement-form { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); max-width: 28rem; }
.classement-moi { margin: 0 0 var(--space-3); font-weight: 700; color: var(--color-accent); }
.classement-liste { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.classement-ligne { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: var(--cible); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-carte); background: var(--color-surface); }
.classement-ligne--moi { border-color: var(--color-gold); background: var(--color-gold-bg); }
.classement-rang { font-weight: 700; color: var(--color-accent); }
.classement-nom { font-weight: 600; overflow-wrap: anywhere; }
.classement-points { white-space: nowrap; color: var(--color-ink-muted); }
.classement-points strong { color: var(--color-ink); font-size: 1.0625rem; }
@media (min-width: 640px) {
  .badge-grille, .badge-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .badge-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .badge-medaille { width: 3.5rem; height: 3.5rem; }
}

/* Rappels de l'accueil : épreuve blanche en cours, nouveaux badges. */
.rappels { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.rappel { display: grid; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-carte); border: 1px solid var(--color-gold-border); background: var(--color-gold-bg); }
.rappel--badge { border-color: var(--color-accent-pale-border); background: var(--color-accent-pale); }
.rappel__texte { display: grid; gap: 2px; color: var(--color-ink); }
.rappel__texte strong { font-size: 1.0625rem; }
@media (min-width: 640px) { .rappel { grid-template-columns: minmax(0, 1fr) auto; } }

/* Accueil : carte « S'entraîner » (deux actions), invitation à renseigner la date du concours, aperçu du classement et des badges. */
.carte-aide__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.carte-aide .hint { margin: 0; }
.defi-date { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-gold-border); border-radius: var(--radius-carte); background: var(--color-gold-bg); }
.defi-date p { margin: 0; color: var(--color-ink); }
.defi-date label { font-weight: 600; }
.defi-date__rangee { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.defi-date__rangee input { min-height: var(--cible); padding: 0 var(--space-3); border: 1px solid var(--color-border-field); border-radius: var(--radius-champ); background: var(--color-surface); }
.apercu-progres { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
@media (min-width: 640px) { .apercu-progres { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.apercu-lien { display: flex; align-items: center; gap: var(--space-3); min-height: var(--cible); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-carte); background: var(--color-surface); box-shadow: var(--ombre-carte); color: var(--color-ink); text-decoration: none; }
.apercu-lien:hover { border-color: var(--color-accent); color: var(--color-ink); }
.apercu-lien .icone { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-accent); }
.apercu-lien__texte { display: grid; gap: 1px; min-width: 0; }
.apercu-lien__texte strong { font-size: var(--fs-petit); }
.apercu-lien__texte span { font-size: var(--fs-legende); color: var(--color-ink-muted); overflow-wrap: anywhere; }
.badge-partager { margin-top: var(--space-2); }

/* Rangée de boutons en bas d'un formulaire (S'entraîner : commencer / télécharger pour l'hors ligne) : à la ligne quand la place manque. */
.actions-formulaire { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479.98px) { .actions-formulaire .btn { flex: 1 1 100%; } }