/* Feuille de style commune à « matrice » (enseignant) et « matrice-vote » (participants).
   La CSP interdit tout style en ligne : uniquement des classes. */
:root {
  color-scheme: light;
  --fond: #f2f6f9;
  --carte: #ffffff;
  --bord: #d8e2ea;
  --encre: #16293a;
  --encre-2: #4c6072;
  --accent: #1b6ca8;
  --accent-fort: #145483;
  --accent-doux: #e3f0f8;
  --sur-accent: #ffffff;
  --danger: #b42318;
  --danger-doux: #fdecea;
  --sur-danger: #ffffff;
  --axe: #8fa2b2;
  --point: #1b6ca8;
  --moi: #0f3f63;
  --anneau: #ffffff;
  --focus: #1d4ed8;
  /* Barre du haut, de la même couleur en clair et en sombre pour y garder le logo. */
  --barre-fond: #0c2a40; --barre-texte: #ffffff; --barre-texte-2: #d6e4ef;
  --onglet-actif: #e5122a;
  /* Icônes et mises en avant : le bleu domine, le rouge reste une touche (les autres palettes les remplacent par leurs couleurs). */
  --ic1: #1b6ca8; --ic2: #e5122a; --ic3: #3a98c9;
  --ombre: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 5%);
  --trait: #d2dde6;
  --vide: #e3e9ee;
  /* Palette « Suisse », celle par défaut (ordre fixe : la couleur suit l'option). */
  --s0: #e5122a; --s1: #2a7cb8; --s2: #c98500; --s3: #2e7d4f; --s4: #6b7882; --s5: #c44a66; --s6: #3a98c9; --s7: #8c959d;
  --t0: #ffffff; --t1: #ffffff; --t2: #ffffff; --t3: #ffffff; --t4: #ffffff; --t5: #ffffff; --t6: #ffffff; --t7: #ffffff;
  /* Nuage de mots : rouge, bleu de lac, bordeaux. */
  --n0: #e5122a; --n1: #2a7cb8; --n2: #c44a66;
  /* Chrono : dernières secondes, métal du cadran, ciel de la fusée, herbe de l'escargot. */
  --c-urgent: #d92d20; --c-metal: #c9d1d9; --c-ciel: #dbeafe; --c-herbe: #b7e4c7;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #0d1720;
    --carte: #15232f;
    --bord: #2a3c4b;
    --encre: #e7eff5;
    --encre-2: #a5b7c5;
    --accent: #6db7dc;
    --accent-fort: #97cde8;
    --accent-doux: #16303f;
    --sur-accent: #06141c;
    --danger: #f28b82;
    --danger-doux: #3a1b19;
    --sur-danger: #1f0b09;
    --axe: #667a8a;
    --point: #6db7dc;
    --moi: #c5e3f3;
    --anneau: #15232f;
    --focus: #93c5fd;
    --barre-fond: #0a2333;
    --onglet-actif: #ff6b5e;
    --ic1: #3a98c9; --ic2: #ff6b5e; --ic3: #8cc6e6;
    --ombre: none;
    --trait: #33424f;
    --vide: #233240;
    --s0: #e8352a; --s1: #2a7cb8; --s2: #c98500; --s3: #2e7d4f; --s4: #6b7882; --s5: #c44a66; --s6: #3a98c9; --s7: #8c959d;
    --t0: #ffffff; --t1: #ffffff; --t2: #ffffff; --t3: #ffffff; --t4: #ffffff; --t5: #ffffff; --t6: #ffffff; --t7: #ffffff;
    --n0: #ff6b72; --n1: #8cc6e6; --n2: #e48fab;
    --c-urgent: #ff6b5e; --c-metal: #5b6670; --c-ciel: #1b2a44; --c-herbe: #1f3a2a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--accent-fort); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
[hidden] { display: none !important; }

/* ---------- Barre du haut ---------- */
.barre {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem max(16px, calc((100% - 1100px) / 2));
  background: var(--barre-fond); color: var(--barre-texte);
}
.barre :focus-visible { outline: 3px solid var(--barre-texte); outline-offset: 2px; }
.logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.logo-svg { display: block; height: 36px; width: auto; }
.btn-theme { min-height: 36px; padding: .3rem .7rem; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.btn-theme:hover { background: rgb(255 255 255 / 12%); }
/* Interrupteur de langue « FR [drapeau] DE » : la langue affichée en gras, son drapeau dans la piste, le rond de son côté. */
.bascule-langue { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .15rem .2rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 800; letter-spacing: .02em; cursor: pointer; }
.bascule-langue__code { opacity: .45; transition: opacity .2s; }
.bascule-langue[data-langue="fr"] .bascule-langue__code[lang="fr"], .bascule-langue[data-langue="de"] .bascule-langue__code[lang="de"] { opacity: 1; }
.bascule-langue:hover .bascule-langue__code { opacity: 1; }
.bascule-langue__piste { position: relative; display: block; width: 44px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 85%), 0 1px 3px rgb(0 0 0 / 35%); }
.bascule-langue[data-langue="fr"] .bascule-langue__piste { background: linear-gradient(90deg, #002654 0 58%, #ffffff 58% 79%, #ce1126 79%); }
.bascule-langue[data-langue="de"] .bascule-langue__piste { background: linear-gradient(180deg, #000000 0 33.34%, #dd0000 33.34% 66.67%, #ffcc00 66.67%); }
.bascule-langue__rond { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f5f6f8; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: left .2s; }
.bascule-langue[data-langue="de"] .bascule-langue__rond { left: calc(100% - 19px); }
.bascule-langue:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bascule-langue__rond, .bascule-langue__code { transition: none; } }
.sous-titre { color: var(--barre-texte-2); font-size: .9rem; }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
body.large main { max-width: none; padding: 1rem 2rem; }

/* ---------- Cartes, textes ---------- */
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--ombre);
}
.carte.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--bord)); }
.aide { color: var(--encre-2); margin: 0 0 1rem; }
.petit { font-size: .875rem; }
/* Textes d'aide lisibles (15.11.2026). */
.aide.petit { font-size: .9rem; line-height: 1.45; }
.erreur { color: var(--danger); font-weight: 600; }
small.erreur { display: block; font-size: .85rem; margin-top: .25rem; }
.meta { color: var(--encre-2); font-size: .9rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1rem; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--encre);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.btn.principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.btn.petit { min-height: 36px; padding: .35rem .75rem; font-size: .9rem; }
/* « Supprimer » bien visible partout (15.11.2026) : contour et texte rouges pleins. */
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:disabled { opacity: .5; }
.btn.danger:hover { background: var(--danger-doux); }
/* Bouton « Annuler » des pages de création : rouge plein, en haut à droite. */
.btn.annuler { background: var(--danger); border-color: var(--danger); color: var(--sur-danger); }
.btn.annuler:hover { background: color-mix(in srgb, var(--danger) 85%, #000); border-color: color-mix(in srgb, var(--danger) 85%, #000); }
.entete-outil { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.entete-outil h1 { margin-top: 0; }
.entete-outil.avec-actions { align-items: center; row-gap: .6rem; margin-bottom: .75rem; }
.entete-outil.avec-actions h1 { margin-bottom: 0; }
/* À droite de l'en-tête de création : dossier, Créer, Annuler ; l'import en dessous, aligné à droite. */
.entete-outil.avec-actions:has(.entete-droite > .btn-import, .message-case) { align-items: flex-start; }
.entete-droite { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; margin-left: auto; }
.entete-ligne { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem 1rem; }
.entete-ligne .ligne-dossier { margin-left: 0; }
/* Le bouton d'import prend toute la largeur du bloc : du début de « Dossier » à la fin d'« Annuler » (demande du 14.11.2026). */
.entete-droite > .btn-import { align-self: stretch; }
.entete-droite .message-case { margin: 0; max-width: 32rem; text-align: right; }
@media (max-width: 640px) {
  .entete-droite, .entete-ligne { align-items: stretch; justify-content: flex-start; width: 100%; }
  .entete-ligne .ligne-dossier { flex: 1 1 100%; min-width: 0; }
  .entete-ligne .ligne-dossier select { flex: 1; min-width: 0; }
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }

/* ---------- Formulaire de création ---------- */
.form-sondage { display: grid; gap: 1rem; }
.champ { display: grid; gap: .3rem; }
.champ > span { font-weight: 600; font-size: .92rem; }
input[type="text"], input[type="url"], input:not([type]), select {
  font: inherit; color: var(--encre); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px; width: 100%;
}
select { width: auto; }
input:focus, select:focus { border-color: var(--accent); }

/* Les 4 libellés disposés en croix, comme sur la matrice. */
.croix-form {
  display: grid; gap: .75rem 1rem; align-items: center;
  grid-template-columns: 1fr 70px 1fr;
  grid-template-areas: ". haut ." "gauche centre droite" ". bas .";
}
.croix-form .c-haut { grid-area: haut; grid-column: 1 / 4; justify-self: center; width: min(100%, 320px); }
.croix-form .c-bas { grid-area: bas; grid-column: 1 / 4; justify-self: center; width: min(100%, 320px); }
.croix-form .c-gauche { grid-area: gauche; }
.croix-form .c-droite { grid-area: droite; }
.croix-form .c-centre { grid-area: centre; display: flex; justify-content: center; }
.mini-croix {
  width: 56px; height: 56px; display: block;
  background:
    linear-gradient(var(--axe), var(--axe)) center / 2px 100% no-repeat,
    linear-gradient(var(--axe), var(--axe)) center / 100% 2px no-repeat;
}
@media (max-width: 640px) {
  .croix-form { grid-template-columns: 1fr; grid-template-areas: "haut" "gauche" "droite" "bas"; }
  .croix-form .c-haut, .croix-form .c-bas { grid-column: auto; width: 100%; }
  .croix-form .c-centre { display: none; }
}
.choix-mode { border: 1px solid var(--bord); border-radius: 8px; padding: .75rem 1rem; margin: 0; display: grid; gap: .5rem; }
.choix-mode legend { font-weight: 600; padding: 0 .25rem; }
.choix-mode label { display: flex; gap: .5rem; align-items: baseline; }
.form-sondage > .btn { justify-self: start; }

/* ---------- Liste des sondages ---------- */
.liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.liste li {
  display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--bord);
}
.liste li:last-child { border-bottom: 0; }
.liste a { font-weight: 600; }
.liste .meta { flex-basis: 100%; }
.etat { font-size: .8rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
.etat.ouvert { background: var(--accent-doux); color: var(--accent-fort); }
.etat.clos { background: color-mix(in srgb, var(--axe) 22%, transparent); color: var(--encre-2); }

/* ---------- Page « gérer » ---------- */
.entete-sondage { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1.25rem; }
.entete-sondage h1 { overflow-wrap: anywhere; }
.grille-gerer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.grille-gerer .carte { margin-bottom: 0; }
.grille-gerer + .carte { margin-top: 1.25rem; }
@media (max-width: 820px) { .grille-gerer { grid-template-columns: 1fr; } }
.qr-carte { display: grid; gap: .75rem; justify-items: start; }
.qr { background: #fff; border-radius: 8px; padding: 6px; width: 100%; max-width: 260px; height: auto; }
.lien { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.qr-carte .aide { margin: 0; }
.form-mode { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.graphe-carte { position: relative; }
.graphe-entete { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: center; }
.graphe-entete h2 { margin: 0; }

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
.chart.floute { opacity: .35; }
.voile {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 1;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre);
  padding: 1rem 1.25rem; text-align: center; max-width: 80%;
}
.voile p { margin: 0 0 .5rem; font-weight: 600; }
.voile.grand { font-size: 1.6rem; padding: 1.5rem 2rem; }
.voile.grand p { margin: 0; }

.table-scroll { overflow-x: auto; }
table.votes { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.votes th, table.votes td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
table.votes th { color: var(--encre-2); font-weight: 600; font-size: .85rem; }
table.votes td:last-child { text-align: right; }
table.votes td.vide { color: var(--encre-2); text-align: left; }
.actions-bas { margin: 1rem 0 0; }
.confirmer { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }

/* ---------- Mode présentation ---------- */
.projection { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 2rem; align-items: center; min-height: calc(100vh - 6rem); }
.projection-qr { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.projection-qr .qr { max-width: 340px; }
.lien-court { margin: 0; font-size: 1rem; color: var(--encre-2); overflow-wrap: anywhere; }
.compteur-grand { margin: 0; font-size: 2.4rem; font-weight: 700; color: var(--accent-fort); }
.projection-graphe { position: relative; }
.projection-graphe .chart svg { max-height: calc(100vh - 7rem); margin: 0 auto; }
@media (max-width: 900px) { .projection { grid-template-columns: 1fr; } }
/* Page de vote : option « Autre » suivie de son champ libre. */
.option-autre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.option-autre input[type="text"], .option-autre input:not([type]) { flex: 1 1 12rem; min-width: 0; }
/* Réponses libres de l'option « Autre », sous le graphique. */
.autres-reponses h3 { margin: 1rem 0 .5rem; font-size: 1.05rem; }
.autres-reponses ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.autres-reponses li { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte); overflow-wrap: anywhere; }
.autres-reponses .nb { margin-left: .5rem; font-weight: 700; color: var(--accent-fort); }
body.large .autres-reponses li { font-size: 1.2rem; }

/* ---------- Matrice (SVG) : les couleurs à l'écran suivent le thème ---------- */
.mx .mx-fond { fill: var(--carte); }
.mx .mx-titre { fill: var(--encre); }
.mx .mx-libelle, .mx .mx-aide { fill: var(--encre-2); }
.mx .mx-axes { stroke: var(--axe); }
.mx .mx-bouts { fill: var(--axe); }
.mx .mx-trait { stroke: var(--axe); }
.mx .mx-point { fill: var(--point); stroke: var(--anneau); }
.mx .moi .mx-point { fill: var(--moi); }
.mx .mx-nom { fill: var(--encre); stroke: var(--carte); }
.mx .mx-aide { stroke: var(--carte); }
.mx .mx-vote:hover .mx-point { stroke: var(--encre); }
.mx .mx-valeur { fill: var(--encre); }
.mx .mx-trait { stroke: var(--trait); }
.mx .mx-vide { fill: var(--vide); }
.mx .mx-part { stroke: var(--carte); }
.mx .mx-serie:hover path { opacity: .85; }
.serie-0 { fill: var(--s0); background: var(--s0); } .serie-1 { fill: var(--s1); background: var(--s1); }
.serie-2 { fill: var(--s2); background: var(--s2); } .serie-3 { fill: var(--s3); background: var(--s3); }
.serie-4 { fill: var(--s4); background: var(--s4); } .serie-5 { fill: var(--s5); background: var(--s5); }
.serie-6 { fill: var(--s6); background: var(--s6); } .serie-7 { fill: var(--s7); background: var(--s7); }
/* Option « Autre » des questions à choix : gris neutre, hors palette (même valeur que graphiques.ts). */
.serie-autre { fill: #6b7785; background: #6b7785; } .mx .serie-txt-autre { fill: #fff; }
.mx .serie-txt-0 { fill: var(--t0); } .mx .serie-txt-1 { fill: var(--t1); } .mx .serie-txt-2 { fill: var(--t2); } .mx .serie-txt-3 { fill: var(--t3); }
.mx .serie-txt-4 { fill: var(--t4); } .mx .serie-txt-5 { fill: var(--t5); } .mx .serie-txt-6 { fill: var(--t6); } .mx .serie-txt-7 { fill: var(--t7); }

/* ---------- Icônes ---------- */
.icone { width: 40px; height: 40px; flex: none; }
.icone.petite { width: 28px; height: 28px; }
.icone .ic-1 { fill: var(--ic1); } .icone .ic-2 { fill: var(--ic2); } .icone .ic-3 { fill: var(--ic3); }
.icone .ic-part { stroke: var(--carte); stroke-width: 1.2; }
.icone .ic-axe { stroke: var(--axe); stroke-width: 2; fill: none; }
.icone .ic-axe-bout { fill: var(--axe); }
.titre-icone { display: flex; align-items: center; gap: .6rem; }
.titre-icone .icone { width: 36px; height: 36px; }
.fil { margin: 0 0 .75rem; font-size: .9rem; }

/* ---------- Accueil : modèles de sondage ---------- */
.modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.modele {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .15rem; align-items: center;
  padding: .9rem 1rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte);
  color: var(--encre); text-decoration: none; min-height: 44px;
}
.modele:hover { border-color: var(--accent); background: var(--accent-doux); }
.modele .icone { grid-row: 1 / 3; width: 44px; height: 44px; }
.modele-nom { font-weight: 700; }
.modele-texte { color: var(--encre-2); font-size: .85rem; line-height: 1.35; }
/* Tuile des outils : onglets des types d'outils, réductible en une ligne d'icônes */
.entete-interaction { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
/* Double classe : la règle générale .onglets, plus bas, remettrait sa ligne et sa marge. */
.onglets.onglets-outils { border-bottom: 0; margin: 0; flex-wrap: wrap; min-width: 0; }
.onglets-outils button { font-size: 1.05rem; padding: .4rem .7rem .55rem; white-space: nowrap; }
.onglets-outils button:hover { color: var(--accent-fort); }
/* En face de la première ligne d’onglets (petit décalage : les boutons sont moins hauts que les onglets), même quand ceux-ci passent sur plusieurs lignes. */
.actions-interaction { display: flex; align-items: center; gap: .5rem; flex: none; margin-top: .2rem; }
.lien-animation { white-space: nowrap; }
/* Téléphone : pas la place à côté des onglets, les deux boutons passent au-dessus, à droite. */
@media (max-width: 640px) {
  .entete-interaction { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .actions-interaction { align-self: flex-end; margin-top: 0; }
}
.animation-faitools { width: min(1100px, 96vw); padding: 0; border: 0; border-radius: 12px; background: var(--carte); color: var(--encre); overflow: hidden; }
.animation-faitools::backdrop { background: rgb(0 0 0 / .7); }
.cadre-animation iframe { display: block; width: 100%; aspect-ratio: 1280 / 720; max-height: calc(96vh - 52px); border: 0; }
.barre-animation { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; height: 52px; padding: 0 .75rem; background: var(--barre-fond); color: var(--barre-texte); }
#position-animation { flex: 1; min-width: 0; accent-color: var(--barre-texte-2); cursor: pointer; }
#temps-animation { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .barre-animation { flex-wrap: wrap; height: auto; padding: .4rem .75rem; }
  #position-animation { flex-basis: 70%; }
}
.icone-animation { display: flex; width: 38px; height: 38px; padding: 7px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.icone-animation:hover { background: #ffffff26; }
.icone-animation:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.icone-animation svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.icone-animation svg path[fill] { stroke: none; }
.icone-animation.muet { background: #1b6ca8; }
.icone-animation .i-pause, .icone-animation.en-cours .i-lancer { display: none; }
.icone-animation.en-cours .i-pause { display: inline; }
.icone-animation .barre-muet, .icone-animation.muet .ondes { display: none; }
.icone-animation.muet .barre-muet { display: inline; }
.bascule-interaction { font-size: 1.2rem; line-height: 1; min-width: 40px; }
.panneau-outils > .aide { margin-top: .75rem; }
.panneau-outils[hidden] { display: none; }
/* Sans script : pas d'onglets, les deux listes l'une sous l'autre avec leur titre. */
body:not(.js) .onglets-outils { display: none; }
body.js .titre-sans-js { display: none; }
.titre-sans-js { margin: 1rem 0 0; font-size: 1.15rem; }
.nouvelle-interaction.reduite .sauf-reduite { display: none; }
.nouvelle-interaction.reduite .modeles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.nouvelle-interaction.reduite .modele { display: inline-flex; padding: .35rem; min-height: 0; border-radius: 10px; }
.nouvelle-interaction.reduite .modele .icone { width: 34px; height: 34px; }
.nouvelle-interaction.reduite .modele-nom, .nouvelle-interaction.reduite .modele-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.liste li { flex-wrap: nowrap; align-items: flex-start; }
.liste-texte { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; min-width: 0; }
.liste-texte a { overflow-wrap: anywhere; }

/* ---------- Formulaires de création ---------- */
fieldset.axe { border: 1px solid var(--bord); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0; display: grid; gap: .75rem; }
fieldset.axe legend { font-weight: 700; padding: 0 .25rem; }
.bornes-form { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
/* Les 2 questions de la matrice côte à côte sur un écran large, l'une sous l'autre sinon. */
.deux-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.actions-form { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 520px) { .bornes-form { grid-template-columns: 1fr; } }
.options-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
@media (max-width: 560px) { .options-form { grid-template-columns: 1fr; } }
.option-champ { display: flex; align-items: center; gap: .5rem; }
.option-champ input { flex: 1; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; margin-right: .45rem; vertical-align: -1px; }
.option-champ .pastille { margin-right: 0; }
/* « Graphique : » et ses choix sur une ligne, sans cadre. */
.ligne-graphique { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.ligne-graphique .libelle { font-weight: 600; }
.ligne-graphique label { display: flex; align-items: center; gap: .4rem; min-height: 44px; }
.ligne-graphique .icone { width: 30px; height: 30px; }
/* Graphique et dossier sur une ligne (l'un sous l'autre si la place manque). */
.ligne-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2.5rem; }
.ligne-dossier { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* Texte lu par les lecteurs d'écran seulement. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
fieldset.si-type { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-width: 0; }
fieldset.si-type[hidden] { display: none; }
.ligne-dossier .libelle { font-weight: 600; }
.ligne-dossier select { width: auto; min-width: 12rem; }
/* Question et réglage voisin sur une ligne ; la question prend la place restante. */
.ligne-question { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
.ligne-question > .champ:first-child { flex: 1 1 20rem; }
.ligne-question > .champ-court { flex: 0 0 auto; }
.rappel { margin: 0; padding-left: 1.25rem; display: grid; gap: .4rem; }
.rappel .meta { display: block; }
.options-rappel { list-style: none; padding: 0; }

/* ---------- Page de vote (matrice-vote) ---------- */
.vote main { max-width: 760px; }
.vote h1 { overflow-wrap: anywhere; }
.etape { margin: 0 0 .75rem; }
.champ-prenom { max-width: 320px; margin-bottom: 1rem; }
/* Accueil des élèves : « J'ai déjà un code » ou « C'est ma première connexion ». */
.choix-connexion { border: 0; padding: 0; margin: 0; display: grid; gap: .25rem; min-width: 0; }
.choix-connexion label { display: flex; gap: .55rem; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.choix-connexion input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); }
.consigne-prenom { margin: -1.6rem 0 0; max-width: 420px; }
.chart.placable { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 8px; }
.chart.placable:focus-visible { outline: 3px solid var(--focus); }
.barre-vote { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.message { padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1rem; background: var(--accent-doux); color: var(--encre); }
.message.attention { background: var(--danger-doux); }
.statut { color: var(--encre-2); font-size: .9rem; }
.question { margin: 1.25rem 0 0; border: 0; padding: 0; min-width: 0; }
.question legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .6rem; }
.question legend b { color: var(--accent-fort); }
/* Échelle de 0 à 10 : 11 boutons radio. */
.echelle { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.echelle label { position: relative; }
.echelle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.echelle span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--carte); font-weight: 700; font-size: .95rem; cursor: pointer;
}
.echelle input:hover + span { border-color: var(--accent); }
.echelle input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.echelle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.bornes-echelle { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .9rem; color: var(--encre-2); }
.bornes-echelle span:last-child { text-align: right; }
.apercu-titre { margin: 1.25rem 0 .25rem; font-weight: 600; color: var(--encre-2); font-size: .9rem; }
/* Question à choix : une ligne par option. */
.options-vote { display: grid; gap: .5rem; }
.options-vote label {
  display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .5rem .85rem;
  border: 1px solid var(--bord); border-radius: 10px; cursor: pointer; font-weight: 600;
}
.options-vote label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--accent); }
.options-vote input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.options-vote .pastille { margin: 0; }
@media (max-width: 480px) {
  main { padding: 1rem 10px 2rem; }
  .carte { padding: 1rem .75rem; }
  h1 { font-size: 1.3rem; }
}

/* ---------- Roue de tirage au sort ---------- */
.icone .ic-moyeu { fill: var(--carte); stroke: var(--axe); stroke-width: 1.5; }
.icone .ic-fleche { fill: var(--encre); }
textarea {
  font: inherit; color: var(--encre); background: var(--carte); width: 100%; resize: vertical;
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem;
}
textarea:focus { border-color: var(--accent); }
/* Champs restés au style du navigateur (15.11.2026) : nombres et choix de fichier au style commun. */
input[type="number"] {
  font: inherit; color: var(--encre); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px;
}
input[type="number"]:focus { border-color: var(--accent); }
input[type="file"] { font: inherit; color: var(--encre-2); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--accent-fort); background: transparent;
  border: 1px solid var(--accent); border-radius: 8px; padding: .45rem .9rem; margin-right: .7rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-doux); }
.case { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.case input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--accent); flex: none; }
/* Oui / non : l'interrupteur partout (15.11.2026), comme la dactylo et le sondage qualité, y compris dans les éditeurs
   du support et de l'examen. */
label.case:has(> input[type="checkbox"]) { align-items: center; }
label.case > input[type="checkbox"] {
  appearance: none; width: 2.4rem; height: 1.35rem; margin: 0; border-radius: 999px; background: var(--axe); position: relative; cursor: pointer; flex: none;
}
label.case > input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: left .15s;
}
label.case > input[type="checkbox"]:checked { background: var(--accent); }
label.case > input[type="checkbox"]:checked::after { left: calc(2.4rem - 1.35rem + 3px); }
label.case > input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { label.case > input[type="checkbox"]::after { transition: none; } }
.grille-roue { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; margin-top: 1rem; }
@media (max-width: 820px) { .grille-roue { grid-template-columns: 1fr; } }
.roue-carte { display: grid; justify-items: center; gap: .75rem; }
.roue { width: 100%; max-width: min(620px, 60vh); cursor: pointer; }
.roue svg { display: block; width: 100%; height: auto; }
.roue-part path { stroke: var(--carte); }
.roue-grise { fill: var(--vide); }
.roue-grise-txt { fill: var(--encre-2); opacity: .7; text-decoration: line-through; }
.roue-bord { stroke: var(--carte); }
.roue-moyeu { fill: var(--carte); stroke: var(--trait); }
.roue-fleche { fill: var(--encre); stroke: var(--carte); }
.resultat { margin: 0; min-height: 2.6rem; font-size: 1.15rem; font-weight: 700; text-align: center; color: var(--encre-2); }
.resultat.visible { font-size: 2.2rem; line-height: 1.2; color: var(--accent-fort); animation: apparition .35s ease-out; }
@keyframes apparition { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .resultat.visible { animation: none; } }
.btn.grand { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.1rem; }
.roue-actions { justify-content: center; }
.roue-panneau { display: grid; gap: .75rem; }
.roue-panneau h2 { margin: .5rem 0 0; }
.historique { margin: 0; padding-left: 1.6rem; display: grid; gap: .2rem; max-height: 320px; overflow-y: auto; }
.historique li::marker { color: var(--encre-2); font-size: .85rem; }
details.carte summary { cursor: pointer; font-weight: 700; }
details.carte[open] summary { margin-bottom: .75rem; }
/* Sections repliables (Dactylo enseignant) : le titre est le bouton, une flèche montre l'état. */
details.carte.repliable > summary { list-style: none; display: flex; align-items: center; gap: .5rem; }
details.carte.repliable > summary::-webkit-details-marker { display: none; }
details.carte.repliable > summary::before { content: "▸"; font-size: 1.1rem; transition: transform .15s; }
details.carte.repliable[open] > summary::before { transform: rotate(90deg); }
details.carte.repliable > summary h2 { margin: 0; }
@media (prefers-reduced-motion: reduce) { details.carte.repliable > summary::before { transition: none; } }
.epreuves-neiges { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; border: 0; padding: 0; margin: .4rem 0; }
.epreuves-neiges legend { font-weight: 700; padding: 0; margin-bottom: .2rem; }
.epreuves-neiges .indisponible { color: var(--encre-2); }
.roue-carte:fullscreen { background: var(--fond); border: 0; border-radius: 0; align-content: center; padding: 2rem; }
.roue-carte:fullscreen .roue { max-width: min(80vh, 90vw); }
.roue-carte:fullscreen .resultat.visible { font-size: 3.2rem; }

/* ---------- Dossiers et actions de la liste ---------- */
.js .sans-js { display: none; }
body:not(.js) .avec-js { display: none; }
.icone-dossier { width: 16px; height: 16px; fill: currentColor; opacity: .8; flex: none; }
.form-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.form-ligne input { flex: 1 1 220px; width: auto; min-height: 36px; }
.liste li { align-items: center; gap: .75rem; }
.liste-texte { flex: 1; }
.ligne-actions { display: flex; gap: .4rem; align-items: center; flex: none; }
.ligne-actions form { margin: 0; display: flex; gap: .4rem; }
.form-deplacer select { min-height: 36px; max-width: 170px; font-size: .85rem; padding: .3rem .5rem; }
.btn.icone-seule { padding: .35rem .55rem; }
.icone-action { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .liste li { flex-wrap: wrap; }
  .ligne-actions { width: 100%; justify-content: flex-end; }
}
.champ-court select { width: auto; min-width: 220px; }

/* ---------- Options d'une question à choix (+ / −) ---------- */
.options-liste { display: grid; gap: .5rem; }
.option-ligne { display: flex; align-items: center; gap: .5rem; }
.option-ligne input { flex: 1; }
.option-ligne .pastille { margin: 0; }
.retirer-option { min-width: 40px; font-size: 1.1rem; }
#ajouter-option { justify-self: start; }

/* ---------- Classement : liste à remettre dans l'ordre ---------- */
.classement-vote { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; touch-action: none; }
.classement-vote li {
  display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .4rem .5rem .4rem .75rem;
  border: 1px solid var(--bord); border-radius: 10px; background: var(--carte);
  cursor: grab; user-select: none; -webkit-user-select: none; font-weight: 600;
}
.classement-vote li.glisse { cursor: grabbing; border-color: var(--accent); box-shadow: 0 6px 18px rgb(0 0 0 / 18%); position: relative; z-index: 1; }
.classement-vote .rang { width: 1.6rem; text-align: center; font-weight: 800; color: var(--encre-2); flex: none; }
.classement-vote .pastille { margin: 0; }
.classement-vote .libelle { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.classement-vote .poignee { color: var(--encre-2); font-size: 1.2rem; flex: none; }
.classement-vote .fleches { display: flex; gap: .25rem; flex: none; }
.classement-vote .fleches .btn { min-width: 36px; padding: .2rem .4rem; }

/* ---------- Nuage de mots ---------- */
.mots-vote { display: grid; gap: .5rem; max-width: 420px; }
.mx .nuage-mot { cursor: default; }
.mx .nuage-c0 { fill: var(--n0); } .mx .nuage-c1 { fill: var(--n1); } .mx .nuage-c2 { fill: var(--n2); }
.mx .mx-serie:hover .nuage-mot { opacity: .8; }

/* ---------- Quiz (façon Kahoot) ---------- */
:root { --k0: #e5122a; --k1: #2a7cb8; --k2: #c98500; --k3: #2e7d4f; --tk0: #ffffff; --tk1: #ffffff; --tk2: #ffffff; --tk3: #ffffff; --kl0: #ffffff; --kl1: #000000; --kl2: #000000; --kl3: #ffffff; }
.icone .ic-quiz0 { fill: var(--k0); } .icone .ic-quiz1 { fill: var(--k1); } .icone .ic-quiz2 { fill: var(--k2); } .icone .ic-quiz3 { fill: var(--k3); }
.c0 { --k: var(--k0); --tk: var(--tk0, #fff); } .c1 { --k: var(--k1); --tk: var(--tk1, #fff); } .c2 { --k: var(--k2); --tk: var(--tk2, #fff); } .c3 { --k: var(--k3); --tk: var(--tk3, #fff); }
.forme { width: 1.4em; height: 1.4em; fill: currentColor; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Éditeur */
/* Autant de colonnes que la largeur disponible en permet, trois au plus : un tiers de la liste est le minimum d'une colonne. */
.quiz-questions, .questions-livre {
  --colonne-min: 22rem; --colonnes-max: 3; --ecart-colonnes: .75rem;
  display: grid; gap: var(--ecart-colonnes);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--colonne-min), calc((100% - (var(--colonnes-max) - 1) * var(--ecart-colonnes)) / var(--colonnes-max)))), 1fr));
}
.quiz-questions { list-style: none; margin: 0 0 1rem; padding: 0; }
.quiz-question { border: 1px solid var(--bord); border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.quiz-question-tete { display: flex; gap: .75rem; align-items: flex-start; }
.quiz-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-doux); color: var(--accent-fort);
  display: grid; place-items: center; font-weight: 800; }
.quiz-question-texte { flex: 1; display: grid; gap: .15rem; overflow-wrap: anywhere; }
.quiz-vignette { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.quiz-mini-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.tuile-mini { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: 6px; background: var(--k); color: var(--tk, #fff);
  font-size: .9rem; font-weight: 600; opacity: .55; min-width: 0; }
.tuile-mini.bonne { opacity: 1; }
.tuile-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-mini img { width: 32px; height: 24px; object-fit: cover; border-radius: 3px; }
.tuile-mini .coche { margin-left: auto; font-weight: 800; }
.tuile-mini .forme { width: 1em; height: 1em; }
.quiz-question-actions { margin-top: auto; }
.quiz-question-actions form { margin: 0; }
.quiz-ajout { margin-top: .5rem; }
.liste-refus { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.liste-refus li { margin-bottom: .35rem; overflow-wrap: anywhere; }
.liste-refus small { display: block; }
.apercu-blanc { background: var(--accent-doux); color: var(--accent-fort); border-radius: 4px; padding: 0 .25rem; font-weight: 600; }
.apercu-paires { margin: .3rem 0 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.ligne-assistant-ia { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.5rem; }
.ligne-assistant-ia > p { flex: 1 1 20rem; margin: 0; }
.bouton-assistant-ia { flex: none; display: inline-flex; align-items: center; gap: .4rem; }
.assistant-ia-corps { padding: .75rem 1rem 1rem; overflow: auto; }
.form-question textarea { font-size: 1.05rem; }
.modes-image { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.choix-image { display: grid; gap: .4rem; justify-items: start; }
.apercu-image { max-width: min(100%, 360px); max-height: 220px; border-radius: 8px; border: 1px solid var(--bord); }
.choisir-image { position: relative; overflow: hidden; }
.fichier-image { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.statut-image { color: var(--encre-2); }
.quiz-reponses-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 640px) { .quiz-reponses-form, .quiz-mini-reponses { grid-template-columns: 1fr; } }
.reponse-form { border-radius: 10px; padding: .5rem; background: var(--k); display: grid; gap: .4rem; }
.reponse-ligne { display: flex; align-items: center; gap: .5rem; }
.reponse-ligne input:not([type]) { flex: 1; }
.bonne-case { display: flex; align-items: center; gap: .25rem; color: var(--tk, #fff); font-weight: 800; cursor: pointer; min-height: 44px; padding: 0 .3rem; }
.bonne-case input { width: 22px; height: 22px; accent-color: var(--tk, #fff); }
.reponse-form .choix-image .btn { background: rgb(255 255 255 / 92%); color: #1f2933; }
.reponse-form .statut-image { color: var(--tk, #fff); }
.quiz-vf { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tuile-choix { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 10px; background: var(--k); color: var(--tk, #fff);
  font-weight: 800; font-size: 1.1rem; cursor: pointer; min-height: 56px; }
.tuile-choix input { width: 22px; height: 22px; accent-color: var(--tk, #fff); }

/* Tuiles de réponse (présentation et téléphone) */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
.tuile { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 84px; padding: .75rem 1rem;
  border: 0; border-radius: 10px; background: var(--k); color: var(--tk, #fff); font: inherit; font-weight: 700; font-size: 1.35rem; text-align: left;
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / 18%); overflow: hidden; }
.tuile .forme { width: 2.2rem; height: 2.2rem; }
.tuile-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; position: relative; z-index: 1; }
.tuile-image { max-height: 120px; max-width: 45%; object-fit: contain; border-radius: 6px; background: #fff; }
.tuile.fausse { opacity: .35; }
.tuile.bonne { outline: 4px solid var(--encre); outline-offset: 2px; }
.tuile-ok { font-size: 2rem; font-weight: 900; }
.tuile-compte { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; display: flex; align-items: flex-end; pointer-events: none; }
.tuile-barre { position: absolute; left: 0; bottom: 0; height: 8px; background: rgb(255 255 255 / 75%); }
.tuile-compte b { position: absolute; right: .75rem; top: .4rem; font-size: 1.6rem; z-index: 1; }

/* Écran de présentation */
/* Barre du haut toujours en haut (le contenu de chaque étape n'est plus centré verticalement). */
.scene-quiz { min-height: calc(100vh - 8rem); }
.quiz-attente { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .quiz-attente { grid-template-columns: 1fr; } }
.quiz-rejoindre { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.quiz-salle h1 { font-size: 2.4rem; }
.quiz-joueurs { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.quiz-joueurs li { background: var(--accent-doux); color: var(--accent-fort); font-weight: 700; padding: .3rem .8rem; border-radius: 999px; animation: apparition .3s ease-out; }
.quiz-q { display: grid; gap: 1rem; justify-items: center; }
.quiz-barre { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1rem; }
.quiz-chrono { width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800;
  background: var(--accent); color: var(--sur-accent); }
.quiz-chrono.urgent { background: var(--k0); color: var(--tk0, #fff); }
.quiz-chrono.fini { font-size: 1.1rem; background: var(--vide); color: var(--encre-2); }
.quiz-texte { font-size: clamp(1.5rem, 3.2vw, 2.6rem); text-align: center; margin: 0; overflow-wrap: anywhere; }
/* Présentation : contenu de la salle d'attente à côté du QR-code ; le titre du quiz est dans la barre du haut. */
.contenu-quiz { min-width: 0; align-self: start; }
.contenu-flash { min-width: 0; align-self: start; }
/* Titre avec icône (flex) : aligné à droite comme les autres titres de la barre. */
.barre-presentation h1.titre-icone { justify-content: flex-end; }
.scene-quiz .projection { min-height: 0; }
.quiz-classement h2 { font-size: 2.2rem; margin: 0; }
.quiz-image { max-width: 100%; max-height: 38vh; object-fit: contain; border-radius: 10px; }
.quiz-actions { justify-content: center; margin-top: .5rem; }
.quiz-classement, .quiz-fin { display: grid; justify-items: center; gap: 1.25rem; }
.quiz-classement h1, .quiz-fin h1 { font-size: 2.4rem; margin: 0; }
.quiz-top { list-style: none; padding: 0; margin: 0; width: min(100%, 640px); display: grid; gap: .5rem; }
.quiz-top li { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; border-radius: 10px; background: var(--carte);
  border: 1px solid var(--bord); font-size: 1.5rem; animation: apparition .35s ease-out both; }
.quiz-top li:nth-child(2) { animation-delay: .08s; } .quiz-top li:nth-child(3) { animation-delay: .16s; }
.quiz-top li:nth-child(4) { animation-delay: .24s; } .quiz-top li:nth-child(5) { animation-delay: .32s; }
.quiz-top .rang { width: 2.2rem; font-weight: 800; color: var(--encre-2); }
.quiz-top .nom { flex: 1; font-weight: 700; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); align-items: end; gap: .75rem; }
.marche { display: grid; justify-items: center; gap: .3rem; font-size: 1.3rem; }
.marche .nom { font-weight: 800; overflow-wrap: anywhere; text-align: center; }
.marche .socle { width: 100%; display: grid; place-items: center; color: #fff; font-size: 2.4rem; font-weight: 900; border-radius: 10px 10px 0 0; }
.marche.un .socle { height: 200px; background: var(--k2); color: var(--tk2, #fff); } .marche.deux .socle { height: 140px; background: var(--k1); color: var(--tk1, #fff); } .marche.trois .socle { height: 100px; background: var(--k3); color: var(--tk3, #fff); }
.marche.vide { visibility: hidden; }
.quiz-tous { width: min(100%, 640px); }

/* Téléphone (joueur) */
.jeu-quiz { display: grid; gap: 1rem; }
.quiz-joueur-centre { text-align: center; display: grid; gap: .6rem; justify-items: center; }
.quiz-bienvenue { font-size: 1.3rem; margin: 0; }
.quiz-gros { font-size: 1.8rem; font-weight: 800; margin: 0; }
.quiz-points { font-size: 1.5rem; font-weight: 800; color: var(--accent-fort); margin: 0; }
.quiz-score { font-size: 1.15rem; }
.resultat-juste { border-color: var(--k3); box-shadow: inset 0 6px 0 var(--k3); }
.resultat-faux { border-color: var(--k0); box-shadow: inset 0 6px 0 var(--k0); }
.quiz-joueur-q { display: grid; gap: .75rem; }
.quiz-texte-joueur { font-size: 1.15rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.tuiles.joueur .tuile { min-height: 110px; font-size: 1.1rem; flex-direction: column; justify-content: center; text-align: center; cursor: pointer; }
.tuiles.joueur .tuile:active { transform: translateY(2px); }
.tuiles.joueur .tuile:disabled:not(.choisie) { opacity: .4; }
.tuiles.joueur .tuile-image { max-width: 100%; max-height: 90px; }
.tuile-seule { width: min(100%, 320px); justify-content: center; }
.quiz-podium-liste { text-align: left; font-size: 1.1rem; }

/* ---------- Flash cartes ---------- */
.icone .ic-trait { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; fill: none; }
/* Lignes posées sur la carte, et non sur une forme colorée : visibles en clair comme en sombre. */
.icone .ic-ligne { stroke: var(--axe); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.icone .ic-trait-fonce { stroke: var(--ic3); stroke-width: 2; stroke-linecap: round; fill: none; }
.icone .ic-decoupe { stroke: var(--carte); stroke-width: 1; stroke-linecap: round; fill: none; }
.icone .ic-doigt { stroke: var(--carte); stroke-width: .5; }
/* Le A du nuage de mots passe devant les petites lettres : un contour couleur de carte les coupe. */
.icone .ic-devant { stroke: var(--carte); stroke-width: 2.6; stroke-linejoin: round; paint-order: stroke; }
.icone .ic-chiffre { fill: #fff; }
/* Vert et rouge fixes (sens « atteint / pas atteint »), lisibles sur carte claire comme sombre. */
.icone .ic-vu { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icone .ic-vu-oui { stroke: #2e9e5b; }
.icone .ic-vu-non { stroke: #e5122a; }
.barre-progres { display: inline-block; flex: 1; min-width: 80px; height: 12px; border-radius: 999px; background: var(--vide); overflow: hidden; vertical-align: middle; }
.barre-progres .rempli { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barre-progres .p0 { width: 0%; }
.barre-progres .p5 { width: 5%; }
.barre-progres .p10 { width: 10%; }
.barre-progres .p15 { width: 15%; }
.barre-progres .p20 { width: 20%; }
.barre-progres .p25 { width: 25%; }
.barre-progres .p30 { width: 30%; }
.barre-progres .p35 { width: 35%; }
.barre-progres .p40 { width: 40%; }
.barre-progres .p45 { width: 45%; }
.barre-progres .p50 { width: 50%; }
.barre-progres .p55 { width: 55%; }
.barre-progres .p60 { width: 60%; }
.barre-progres .p65 { width: 65%; }
.barre-progres .p70 { width: 70%; }
.barre-progres .p75 { width: 75%; }
.barre-progres .p80 { width: 80%; }
.barre-progres .p85 { width: 85%; }
.barre-progres .p90 { width: 90%; }
.barre-progres .p95 { width: 95%; }
.barre-progres .p100 { width: 100%; }
.classement-flash { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.classement-flash li { display: flex; align-items: center; gap: .75rem; padding: .45rem .7rem; border: 1px solid var(--bord); border-radius: 10px; }
.classement-flash .rang { width: 1.8rem; font-weight: 800; color: var(--encre-2); text-align: center; }
.classement-flash .nom { width: 9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement-flash .chiffres { white-space: nowrap; font-size: .9rem; color: var(--encre-2); }
body.large .classement-flash li { font-size: 1.4rem; padding: .7rem 1rem; }
body.large .classement-flash .nom { width: 14rem; }
body.large .barre-progres { height: 18px; }
.cartes-entete, .carte-ligne { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .5rem; align-items: start; }
.cartes-entete { font-weight: 700; font-size: .9rem; color: var(--encre-2); }
.cartes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.carte-num { padding-top: .6rem; text-align: right; color: var(--encre-2); font-size: .85rem; }
.carte-ligne textarea { min-height: 44px; }
@media (max-width: 560px) {
  .cartes-entete { display: none; }
  .carte-ligne { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .carte-ligne textarea { grid-column: 2; }
}
/* Téléphone */
.jeu-flash { display: grid; gap: .9rem; }
.flash-tete { display: grid; gap: .5rem; }
.flash-tete h1 { margin: 0; font-size: 1.3rem; }
.flash-avancement { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }
.flash-tete .btn { justify-self: start; }
.carte-flash { perspective: 1200px; cursor: pointer; min-height: 260px; outline: none; }
.carte-flash:focus-visible .face { outline: 3px solid var(--focus); outline-offset: 3px; }
.faces { position: relative; min-height: 260px; transition: transform .45s ease; transform-style: preserve-3d; }
.carte-flash.retournee .faces { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; padding: 1.5rem; text-align: center;
  border-radius: 16px; background: var(--carte); border: 1px solid var(--bord); box-shadow: 0 6px 22px rgb(0 0 0 / 10%);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: auto; }
.face p { margin: 0; font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.face.arriere { transform: rotateY(180deg); background: var(--accent-doux); }
.face.arriere p { font-size: 1.2rem; font-weight: 600; }
.face-nom { position: absolute; top: .7rem; left: 1rem; font-size: .8rem; font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
.face-aide { position: absolute; bottom: .7rem; left: 0; right: 0; font-size: .8rem; color: var(--encre-2); }
@media (prefers-reduced-motion: reduce) { .faces { transition: none; } }
.flash-reste { text-align: center; margin: 0; }
.flash-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.flash-revoir { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--bord)); }
/* Réponses à choix */
.flash-reglages { display: flex; gap: .5rem; flex-wrap: wrap; }
.flash-question { position: relative; min-height: 150px; display: grid; align-content: center; padding: 2.2rem 1.25rem 1.25rem; border-radius: 16px;
  background: var(--carte); border: 1px solid var(--bord); box-shadow: 0 6px 22px rgb(0 0 0 / 10%); }
.flash-terme { margin: 0; font-size: 1.6rem; font-weight: 700; overflow-wrap: anywhere; }
.flash-consigne { margin: .25rem 0 0; font-weight: 700; color: var(--encre-2); }
.flash-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.flash-option { display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .75rem 1rem; text-align: left; font: inherit; font-size: 1.05rem;
  color: var(--encre); background: var(--carte); border: 2px solid var(--bord); border-radius: 12px; cursor: pointer; }
.flash-option:hover:not(:disabled) { border-color: var(--accent); }
.flash-option:disabled { cursor: default; opacity: .75; }
.flash-option .num { flex: none; width: 1.6rem; font-weight: 800; color: var(--encre-2); text-align: center; }
.flash-option span:last-child { overflow-wrap: anywhere; }
.flash-option.juste { opacity: 1; border-color: var(--accent); background: var(--accent-doux); }
.flash-option.juste .num::before { content: "✓"; }
.flash-option.juste .num { font-size: 0; } .flash-option.juste .num::before { font-size: 1.1rem; color: var(--accent-fort); }
.flash-option.faux { opacity: 1; border-color: var(--danger); background: var(--danger-doux); }
.flash-pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.flash-chrono { margin: 0; text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.flash-bilan { display: grid; gap: .75rem; }
.flash-bilan h2, .flash-bilan p { margin: 0; }
.correction-ordre { margin-top: 1rem; }
.correction-ordre h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.correction-ordre ol { margin: 0; padding-left: 1.5rem; display: grid; gap: .3rem; }
.correction-ordre li.juste { color: var(--accent-fort); font-weight: 600; }
.correction-ordre li.faux { color: var(--danger); }

body.large h1.titre-icone { font-size: 2.2rem; }
body.large h1.titre-icone .icone { width: 48px; height: 48px; }

/* ---------- Mur virtuel ---------- */
:root {
  --pi0: #fff3a8; --pi1: #ffd1e0; --pi2: #cfe6ff; --pi3: #d4f2cf; --pi4: #ffdcb5; --pi5: #e5d6ff;
  --pi-encre: #1f2933; --pi-bord: rgb(0 0 0 / 10%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --pi0: #5c5320; --pi1: #5e2f40; --pi2: #22415f; --pi3: #2a4a2a; --pi4: #5e4024; --pi5: #45346a;
    --pi-encre: #f1f5f2; --pi-bord: rgb(255 255 255 / 12%);
  }
}
.pi-0 { --pi: var(--pi0); } .pi-1 { --pi: var(--pi1); } .pi-2 { --pi: var(--pi2); }
.pi-3 { --pi: var(--pi3); } .pi-4 { --pi: var(--pi4); } .pi-5 { --pi: var(--pi5); }
.icone .ic-cadre { fill: none; stroke: var(--axe); stroke-width: 1.6; }

.mur-consigne { margin: .25rem 0 1rem; color: var(--encre-2); white-space: pre-line; }
.mur-colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.mur-colonne { background: color-mix(in srgb, var(--axe) 10%, var(--carte)); border: 1px solid var(--bord); border-radius: 12px; padding: .75rem; min-width: 0; display: grid; gap: .6rem; }
.mur-colonne-titre { font-size: 1.05rem; margin: 0; display: flex; justify-content: space-between; gap: .5rem; overflow-wrap: anywhere; }
.mur-colonne-titre .nb { color: var(--encre-2); font-weight: 400; font-size: .9rem; }
.mur-postits { display: grid; gap: .6rem; }
.mur-vide { color: var(--encre-2); font-size: .9rem; margin: .25rem 0; }
.postit { background: var(--pi, var(--pi0)); color: var(--pi-encre); border: 1px solid var(--pi-bord); border-radius: 8px; padding: .7rem .8rem; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); display: grid; gap: .45rem; min-width: 0; }
.postit-texte { margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.4; }
.postit-image { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 6px; background: rgb(255 255 255 / 35%); }
.postit-pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.postit-auteur { font-weight: 600; opacity: .85; overflow-wrap: anywhere; }
.postit-likes { white-space: nowrap; }
.postit .form-moderer { margin: 0; }
.postit-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.postit.a-moi { outline: 2px solid color-mix(in srgb, var(--pi-encre) 25%, transparent); outline-offset: 1px; }
.aimer { min-height: 36px; min-width: 44px; border: 1px solid var(--pi-bord); border-radius: 999px; background: rgb(255 255 255 / 45%); color: var(--pi-encre); font: inherit; cursor: pointer; padding: .2rem .6rem; }
.aimer.actif { color: #c0182f; font-weight: 700; }
.aimer:disabled { cursor: default; opacity: .7; }
@media (prefers-color-scheme: dark) { .aimer { background: rgb(0 0 0 / 25%); } .aimer.actif { color: #ff8a9b; } }
.ajouter-postit { width: 100%; justify-content: center; border-style: dashed; }

.postit-editeur textarea { width: 100%; min-height: 6rem; resize: vertical; font: inherit; color: var(--pi-encre); background: rgb(255 255 255 / 55%); border: 1px solid var(--pi-bord); border-radius: 6px; padding: .5rem; }
@media (prefers-color-scheme: dark) { .postit-editeur textarea { background: rgb(0 0 0 / 25%); } }
.postit-editeur select { width: 100%; }
.postit-editeur .champ { margin: 0; }
.postit-editeur .actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.couleurs { display: flex; gap: .4rem; flex-wrap: wrap; }
.pastille-couleur { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--pi-bord); background: var(--pi); cursor: pointer; padding: 0; }
.pastille-couleur[aria-pressed="true"] { border-color: var(--pi-encre); box-shadow: 0 0 0 2px var(--carte); }
.editeur-image { display: grid; gap: .4rem; justify-items: start; }
.choisir-image { position: relative; justify-self: start; cursor: pointer; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.choisir-image:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.lien-bouton { background: none; border: 0; padding: .25rem 0; color: var(--accent-fort); text-decoration: underline; font: inherit; cursor: pointer; min-height: 32px; }
.mur-moi { color: var(--encre-2); margin: 0 0 1rem; }
.code-perso { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .08em; }
.champ-code { font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .12em; }
.code-nouveau { text-align: center; border: 2px solid var(--accent); }
.code-nouveau p { margin: .25rem 0; }
.code-grand { font-family: ui-monospace, Consolas, monospace; font-size: 2.6rem; font-weight: 800; letter-spacing: .15em; color: var(--accent-fort); }
.mur-accueil { max-width: 520px; }
.mur-colonnes.apercu { opacity: .8; }
@media (max-width: 700px) {
  .mur-colonnes { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
}

/* Gestion, projection, impression */
.reglages-mur { display: grid; gap: .5rem; }
.reglages-mur > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.reglages-mur .aide { margin: 0 0 .5rem; }
.bascule { display: inline-flex; gap: 0; }
.bascule .btn { border-radius: 0; }
.bascule .btn:first-child { border-radius: 8px 0 0 8px; }
.bascule .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.bascule .btn.actif { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.colonnes-liste { display: grid; gap: .4rem; padding-left: 1.6rem; margin: 0 0 .5rem; }
.colonnes-liste input { width: 100%; }
.tableau-participants { border-collapse: collapse; width: 100%; max-width: 520px; }
.tableau-participants th, .tableau-participants td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--bord); }
.mur-projection { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.mur-projection .projection-qr { position: sticky; top: 1rem; }
.mur-projection .qr { max-width: 220px; }
.mur-projection .mur-colonnes { grid-auto-columns: minmax(190px, 1fr); }
body.large .mur-projection .postit-texte { font-size: 1.2rem; }
@media (max-width: 900px) { .mur-projection { grid-template-columns: 1fr; } .mur-projection .projection-qr { position: static; } }
.mur-impression .mur-colonnes { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
.mur-impression .mur-postits { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media print {
  .barre, .ne-pas-imprimer, .fil { display: none !important; }
  body, main { background: #fff !important; padding: 0 !important; }
  :root { --pi0: #fff3a8; --pi1: #ffd1e0; --pi2: #cfe6ff; --pi3: #d4f2cf; --pi4: #ffdcb5; --pi5: #e5d6ff; --pi-encre: #1f2933; }
  .postit, .mur-colonne { break-inside: avoid; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mur-colonne { background: #fff; }
}

/* ---------- Paramètres ---------- */
.lien-parametres { color: var(--barre-texte); font-size: .9rem; }
.barre .lien-deconnexion { color: var(--barre-texte-2); }
/* Version d'essai (serveur Node) : discrète, en bas de page. */
.version-essai { margin: 2rem auto 1rem; text-align: center; font-size: .75rem; color: var(--encre-2); opacity: .8; }
.barre .btn-theme { margin-left: auto; }
.barre .logo + .bascule-langue { margin-left: auto; } /* page de connexion : pas de bouton de thème, la langue va à droite */
.barre .ajout-outil + .btn-theme { margin-left: 0; }
body.tuile-visible .ajout-outil + .btn-theme { margin-left: auto; }
.choix-palettes { border: 0; padding: 0; margin: 0; }
.choix-palettes legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; margin-top: .75rem; }
.carte-palette { position: relative; display: grid; gap: .5rem; padding: .85rem; border: 2px solid var(--bord); border-radius: 12px; background: var(--carte); cursor: pointer; }
.carte-palette:hover { border-color: var(--axe); }
.carte-palette:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.carte-palette:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.carte-palette input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.palette-entete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.palette-texte { color: var(--encre-2); font-size: .85rem; }
.palette-series { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.palette-series .pastille { width: auto; height: 22px; border-radius: 4px; margin: 0; }
.palette-apercu { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: end; }
.palette-barres { display: flex; align-items: end; gap: 3px; height: 38px; }
.palette-barres span { flex: 1; border-radius: 3px 3px 0 0; }
.palette-barres .h45 { height: 45%; } .palette-barres .h70 { height: 70%; } .palette-barres .h85 { height: 85%; } .palette-barres .h100 { height: 100%; }
.palette-quiz { display: grid; grid-template-columns: repeat(2, 16px); gap: 3px; }
.palette-quiz span { width: 16px; height: 16px; border-radius: 4px; background: var(--k); }
.palette-postits { display: flex; gap: 3px; }
.palette-postits span { width: 20px; height: 20px; border-radius: 3px; background: var(--pi); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); }
.apercu-icones { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; padding: 0; margin: .5rem 0 0; }
.apercu-icones .icone { width: 44px; height: 44px; }

.lien-integration { display: flex; gap: .5rem; align-items: center; }
.lien-integration .champ-copie { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

/* ---------- Vue intégrée (complément PowerPoint) : remplit l'iframe, sans barre ---------- */
body.integre main { max-width: none; padding: clamp(8px, 2vw, 24px); }
.projection-integree { min-height: calc(100vh - 2 * clamp(8px, 2vw, 24px)); grid-template-columns: minmax(160px, 30%) minmax(0, 1fr); gap: clamp(12px, 3vw, 32px); }
.projection-integree .projection-qr { gap: clamp(.25rem, 1.5vh, 1rem); }
/* QR-code et textes suivent la hauteur de l'iframe : le bouton « Clôturer » reste visible sans défiler. */
.projection-integree .qr { width: 100%; max-width: min(300px, 42vh); height: auto; }
.projection-integree .lien-court { font-size: clamp(.7rem, 2.2vh, 1rem); margin: 0; overflow-wrap: anywhere; }
.projection-integree .compteur-grand { font-size: clamp(1.2rem, 6vh, 2.6rem); margin: 0; }
.projection-integree .btn { min-height: 0; padding: clamp(.3rem, 1.2vh, .7rem) 1rem; }
.projection-integree .projection-graphe .chart svg { max-height: calc(100vh - 3 * clamp(8px, 2vw, 24px)); }
@media (max-width: 600px) { .projection-integree { grid-template-columns: 1fr; } }
/* Sondage intégré : barre du haut (commandes · compteur · titre à droite), puis QR-code et résultats sur toute la hauteur restante. */
.integration-sondage { display: flex; flex-direction: column; gap: clamp(.4rem, 1.5vh, 1rem); height: calc(100vh - 2 * clamp(8px, 2vw, 24px)); }
.barre-presentation { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: clamp(.5rem, 2vw, 1.5rem); }
.barre-presentation .actions { justify-self: start; display: flex; flex-wrap: nowrap; gap: .5rem; align-items: center; margin: 0; }
.barre-presentation .actions form, .barre-presentation .actions .etat { margin: 0; }
.barre-presentation .btn { min-height: 0; padding: clamp(.3rem, 1.2vh, .6rem) .9rem; }
.barre-presentation h1 { margin: 0; text-align: right; font-size: clamp(1rem, 4.5vh, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.barre-presentation .compteur-grand { justify-self: start; margin: 0; font-size: clamp(1.1rem, 5vh, 2.2rem); white-space: nowrap; }
.integration-sondage .projection-integree { flex: 1; min-height: 0; align-items: stretch; }
/* Mode présentation (page enseignant, sous l'en-tête du site) : le graphique occupe la hauteur restante de l'écran. */
.presentation-outil { display: flex; flex-direction: column; gap: 1rem; }
.presentation-outil > .projection { min-height: 0; }
.presentation-outil .projection-graphe .chart svg { max-height: calc(100vh - 14rem); }
.integration-sondage .projection-qr { align-content: center; }
.integration-sondage .projection-graphe { display: flex; flex-direction: column; min-height: 0; }
.integration-sondage .chart { flex: 1; min-height: 0; }
.integration-sondage .projection-graphe .chart svg { width: 100%; height: 100%; max-height: none; }
@media (max-width: 600px) {
  .barre-presentation { grid-template-columns: 1fr auto; }
  .barre-presentation .actions { flex-wrap: wrap; }
  .barre-presentation h1 { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .integration-sondage { height: auto; }
  .integration-sondage .chart svg { height: auto; }
}

/* ---------- Livres interactifs (Parcours) : plateau, page de lecture, suivi — maquette validée le 22.10.2026 ---------- */
:root {
  --p-fait: #2f855a; --p-fait-doux: #e3f1e8; --p-cours: #646cdf; --p-cours-doux: #eceefc;
  --p-aide: #c98500; --p-aide-doux: #fbf1dc; --p-bloque: #9aa5b1; --p-bloque-doux: #eef0f2;
  --p-bonus: #d55181; --p-bonus-doux: #fbe8ef;
  --lecture: Georgia, "Iowan Old Style", "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --p-fait: #4cb87c; --p-fait-doux: #1d3326; --p-cours: #7a82ea; --p-cours-doux: #23264a;
    --p-aide: #e0a530; --p-aide-doux: #3a2e14; --p-bloque: #6b7a72; --p-bloque-doux: #222a26;
    --p-bonus: #e47aa0; --p-bonus-doux: #3d1f2b;
  }
}
/* Couleur d'un chapitre : classes (la CSP interdit les styles en ligne). */
.chap-0 { --k: var(--s0); } .chap-1 { --k: var(--s3); } .chap-2 { --k: var(--s4); } .chap-3 { --k: var(--s1); }
.chap-4 { --k: var(--s2); } .chap-5 { --k: var(--s5); } .chap-6 { --k: var(--s6); } .chap-7 { --k: var(--s7); }
.chap-bonus { --k: var(--p-bonus); } .chap-fin { --k: var(--accent); }

.entete-livre .entete-outil { align-items: center; }
.livre-acces { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.livre-acces p { margin: .1rem 0; }
.qr-petit { width: 96px; height: 96px; background: #fff; border-radius: 6px; }
.rangee-boutons { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.rangee-boutons form { margin: 0; }
.zone-plateau { display: grid; gap: 1rem; margin-top: 1rem; }

.palette-types { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; }
.palette-types > span { color: var(--encre-2); margin-right: .25rem; }
.palette-types button { display: inline-flex; gap: .35rem; align-items: center; border: 1px solid var(--bord); background: var(--carte); color: var(--encre);
  border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .85rem; cursor: grab; }
.palette-types button .ico { color: var(--accent-fort); }
.palette-types button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); }
.palette-types button:disabled { cursor: not-allowed; opacity: .5; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Les chapitres s'enchaînent et passent à la ligne ; le trait entre deux chapitres est coupé en début de ligne. */
.livre-flux { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; overflow: hidden; padding: .3rem .3rem .3rem 0; }
.livre-flux > * { position: relative; }
.livre-flux > * + :not(.hors-route)::before { content: ""; position: absolute; right: 100%; width: 1.5rem; height: 3px; background: var(--bord);
  top: calc(.55rem + 1.3rem + .5rem + 22px - 1.5px); }
.groupe { display: grid; gap: .5rem; padding: .55rem .7rem .9rem; border-radius: 14px;
  background: color-mix(in srgb, var(--k) 9%, var(--carte)); border: 1px solid color-mix(in srgb, var(--k) 35%, var(--bord)); }
.groupe header { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; line-height: 1.3rem; white-space: nowrap; }
.groupe header .num { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: .68rem; flex: none; }
.groupe header small { margin-left: auto; padding-left: .75rem; color: var(--encre-2); font-weight: 600; display: inline-flex; align-items: center; gap: .2rem; }
.groupe.ferme { filter: grayscale(1); opacity: .55; }
.groupe.bonus { border-style: dashed; }
.groupe.nouveau { background: transparent; border: 2px dashed var(--bord); color: var(--encre-2); cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem;
  min-height: 82px; padding: .55rem 1rem; display: grid; place-items: center; }
.groupe.nouveau:hover { border-color: var(--accent); color: var(--accent-fort); }
.groupe.cible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.groupe-fin { padding-top: calc(.55rem + 1.3rem + .5rem); }
.cases { position: relative; display: flex; gap: .55rem; align-items: center; justify-self: start; }
.cases::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 3px; margin-top: -1.5px; background: color-mix(in srgb, var(--k) 40%, var(--bord)); }
.case-jeu { position: relative; width: 44px; height: 44px; border-radius: 11px; border: 2px solid var(--k); background: var(--carte); color: var(--k);
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; z-index: 1; transition: transform .12s; text-decoration: none; }
.case-jeu:hover { transform: translateY(-2px); }
.case-jeu .ico { width: 21px; height: 21px; }
.case-jeu.fait { background: var(--k); color: #fff; }
.case-jeu.ferme { border-color: var(--p-bloque); color: var(--p-bloque); background: var(--p-bloque-doux); filter: grayscale(1); opacity: .7; cursor: default; }
.case-jeu.ferme:hover { transform: none; }
.case-jeu.ici { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 30%, transparent); }
.case-jeu.choisie { outline: 3px solid var(--focus); outline-offset: 2px; }
.case-jeu.glisse { opacity: .35; }
.case-jeu.fin { border-radius: 50%; cursor: default; }
.case-jeu.ajout { border: 2px dashed var(--bord); color: var(--encre-2); background: var(--carte); }
.case-jeu.ajout:hover { border-color: var(--accent); color: var(--accent-fort); }
.case-jeu .marque { position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carte); border: 2px solid var(--p-fait); color: var(--p-fait); }
.case-jeu .marque .ico { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) { .case-jeu { transition: none; } .case-jeu:hover { transform: none; } }
.pion { width: 22px; height: 22px; border-radius: 50%; background: var(--ic1); color: #fff; border: 2px solid var(--carte); font-weight: 800; font-size: .66rem;
  display: grid; place-items: center; }
.pion.moi-pion { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); z-index: 2; }
.pions { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; z-index: 2; pointer-events: none; }
.pions .pion { width: 19px; height: 19px; font-size: .58rem; margin-left: -6px; }
.pions .pion:first-child { margin-left: 0; }
.pion.p1 { background: var(--s1); } .pion.p2 { background: var(--s3); } .pion.p3 { background: var(--s4); } .pion.p4 { background: var(--s5); }
.pion.plus { background: var(--encre); color: var(--fond); }

.detail-case { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--bord); border-radius: 14px; padding: .9rem 1rem; background: var(--fond); }
.detail-case:empty { display: none; }
.grand-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--k); color: #fff; flex: none; }
.grand-ico .ico { width: 26px; height: 26px; }
.detail-case .txt { flex: 1; min-width: 200px; }
.detail-case .txt small { color: var(--encre-2); }
.detail-case .txt input { font: inherit; font-weight: 700; border: 1px solid var(--bord); border-radius: 8px; padding: .2rem .45rem; background: var(--carte); color: var(--encre); width: min(100%, 340px); }
.detail-case .deplacements { display: flex; gap: .3rem; flex-wrap: wrap; flex-basis: 100%; }

/* Page de lecture : éditeur (enseignant) et lecture (élève). */
.editeur-riche { border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); overflow: hidden; }
.barre-outils { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .45rem .5rem; border-bottom: 1px solid var(--bord); background: var(--fond); position: sticky; top: 0; z-index: 5; }
.barre-outils select { font: inherit; font-size: .88rem; padding: .3rem .4rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--encre); }
.outil { min-width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0 .45rem; border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--encre); font: inherit; font-size: .9rem; cursor: pointer; }
.outil:hover, .outil[aria-pressed="true"] { background: var(--carte); border-color: var(--bord); }
.outil .ico { width: 18px; height: 18px; }
.barre-outils .sep { width: 1px; height: 22px; background: var(--bord); margin: 0 .2rem; }
.barre-outils .espace { flex: 1; }
.etat-enregistrement { font-size: .8rem; color: var(--encre-2); }
.etat-enregistrement.erreur { color: var(--danger); font-weight: 600; }
.feuille, .page-texte { font-family: var(--lecture); font-size: 1.08rem; line-height: 1.7; }
.feuille { padding: 1.5rem clamp(1rem, 4vw, 2.75rem) 2rem; min-height: 360px; }
.feuille .ProseMirror { outline: none; min-height: 320px; }
.feuille h1, .page-texte h1 { font-size: 1.8rem; }
.feuille h2, .page-texte h2 { font-size: 1.3rem; margin: 1.25rem 0 .4rem; }
.feuille h3, .page-texte h3 { font-size: 1.12rem; margin: 1rem 0 .3rem; }
.feuille h4, .page-texte h4 { font-size: 1rem; margin: .9rem 0 .25rem; font-style: italic; color: var(--encre-2); }
.feuille p, .page-texte p { margin: 0 0 .8rem; }
.feuille table, .page-texte table { border-collapse: collapse; margin: .5rem 0 1rem; font-size: .98rem; }
.feuille th, .feuille td, .page-texte th, .page-texte td { border: 1px solid var(--bord); padding: .35rem .7rem; text-align: center; vertical-align: top; }
.feuille th p, .feuille td p, .page-texte th p, .page-texte td p { margin: 0; }
.feuille img, .page-texte img { max-width: 100%; height: auto; border-radius: 8px; }
.feuille img.ProseMirror-selectednode { outline: 3px solid var(--focus); }
.feuille mark, .page-texte mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: 2px; }
/* Couleurs et tailles du texte (case Lecture) : contraste d'au moins 4,5:1 sur le fond de la carte, en clair comme en sombre. */
:root { --tc-rouge: #b42318; --tc-bleu: #1d4ed8; --tc-vert: #15803d; --tc-orange: #b45309; --tc-violet: #7e22ce; --tc-gris: #4b5563; }
@media (prefers-color-scheme: dark) {
  :root { --tc-rouge: #ff8a80; --tc-bleu: #93c5fd; --tc-vert: #86efac; --tc-orange: #fdba74; --tc-violet: #d8b4fe; --tc-gris: #cbd5e1; }
}
.tc-rouge { color: var(--tc-rouge); } .tc-bleu { color: var(--tc-bleu); } .tc-vert { color: var(--tc-vert); }
.tc-orange { color: var(--tc-orange); } .tc-violet { color: var(--tc-violet); } .tc-gris { color: var(--tc-gris); }
.tt-petite { font-size: .85em; } .tt-grande { font-size: 1.3em; } .tt-tres-grande { font-size: 1.7em; line-height: 1.3; }
.barre-outils select[data-couleur], .barre-outils select[data-taille] { max-width: 9rem; }
.encadre { background: var(--p-cours-doux); border-left: 4px solid var(--p-cours); border-radius: 0 10px 10px 0; padding: .6rem .9rem; margin: .75rem 0; }
.encadre > b:first-child, .feuille .encadre::before { display: block; font-family: "Segoe UI", system-ui, sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--p-cours); }
.feuille .encadre::before { content: "À retenir"; font-weight: 700; }
.encadre p:last-child { margin-bottom: 0; }
.tdm { font-family: "Segoe UI", system-ui, sans-serif; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond); padding: .7rem 1rem; font-size: .92rem; }
.editeur-riche .tdm { margin: 1.25rem clamp(1rem, 4vw, 2.75rem) 0; }
.tdm:empty { display: none; }
.tdm > b { display: flex; align-items: center; gap: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-2); margin-bottom: .35rem; }
.tdm > b small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tdm ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.tdm a { color: var(--encre); text-decoration: none; display: flex; gap: .5rem; }
.tdm a:hover { color: var(--accent-fort); text-decoration: underline; }
.tdm .n { color: var(--encre-2); font-variant-numeric: tabular-nums; min-width: 2.6rem; }
.tdm .niv-1 { font-weight: 700; } .tdm .niv-2 { padding-left: 1rem; } .tdm .niv-3 { padding-left: 2rem; font-size: .88rem; }
.tdm .niv-4 { padding-left: 3rem; font-size: .85rem; color: var(--encre-2); }

/* Suivi de la classe. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.chiffre { background: var(--fond); border: 1px solid var(--bord); border-radius: 14px; padding: .8rem 1rem; }
.chiffre b { display: block; font-size: 1.5rem; line-height: 1.1; }
.chiffre span { color: var(--encre-2); font-size: .88rem; }
.outils-suivi { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.outils-suivi .espace { flex: 1; }
.filtre { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--encre); }
.filtre[aria-pressed="true"], .segment button[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.segment { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.segment button { border: 0; background: var(--carte); color: var(--encre); font: inherit; font-size: .88rem; padding: .35rem .8rem; cursor: pointer; }
.tableau-suivi { overflow-x: auto; border: 1px solid var(--bord); border-radius: 14px; }
.tableau-suivi table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tableau-suivi th, .tableau-suivi td { padding: .5rem .6rem; border-bottom: 1px solid var(--bord); text-align: center; white-space: nowrap; }
.tableau-suivi th:first-child, .tableau-suivi td:first-child { text-align: left; position: sticky; left: 0; background: var(--carte); }
.tableau-suivi th { font-size: .78rem; color: var(--encre-2); }
.case-suivi { display: inline-grid; place-items: center; min-width: 34px; height: 26px; border-radius: 7px; font-weight: 700; font-size: .8rem; }
.case-suivi.f { background: var(--p-fait-doux); color: var(--p-fait); }
.case-suivi.c { background: var(--p-cours-doux); color: var(--p-cours); }
.case-suivi.b { color: var(--p-bloque); }
@media (max-width: 760px) { .chiffres { grid-template-columns: 1fr 1fr; } }

.titre-chapitre { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.titre-chapitre:hover { text-decoration: underline; }
/* Règles de base de ProseMirror (Tiptap ne les injecte pas : la CSP interdit les balises <style>). */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror [contenteditable="false"] { white-space: normal; }
.ProseMirror pre { white-space: pre-wrap; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid currentColor; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; }
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror .tableWrapper { overflow-x: auto; }
.ProseMirror .selectedCell { background: color-mix(in srgb, var(--focus) 18%, transparent); }
.tdm li { display: flex; gap: .5rem; }
.tdm li a { flex: 1; }

/* Livre interactif côté élève : connexion, plateau, page de lecture. */
.livre-eleve { max-width: 900px; margin: 0 auto; }
.connexion-livre { max-width: 480px; margin: 0 auto; }
.entete-plateau-eleve { display: flex; gap: .9rem; align-items: center; margin-bottom: .75rem; }
.entete-plateau-eleve h1 { margin: 0; }
.entete-plateau-eleve .aide { margin: .15rem 0 0; }
.avatar-eleve { width: 46px; height: 46px; border-radius: 50%; background: var(--ic1); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: none; }
.avancement-livre { display: flex; gap: .75rem; align-items: center; margin: 0 0 1rem; font-size: .92rem; }
.pied-livre { text-align: center; }
.page-lecture-eleve { display: grid; gap: 1rem; }
.page-lecture-eleve h1 { font-family: var(--lecture); font-size: 2rem; margin: 0; }
.surtitre { color: var(--p-cours); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.bas-page { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--bord); padding-top: 1rem; }
.bas-page:empty { display: none; }
/* Place pour le pion de l'élève au-dessus de sa case. */
.groupe:has(.moi-pion) .cases { margin-top: .55rem; }

/* ---------- Livres, lot 2 : détours, défi, éditeurs de quiz et de réponse libre ---------- */
.chap-aide { --k: var(--p-aide); }
.case-jeu .sous { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p-aide); color: #fff; border: 2px solid var(--carte); }
.case-jeu .sous .ico { width: 10px; height: 10px; }
.pion.detour-pion { background: var(--p-aide); }
.sous-liste { flex-basis: 100%; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .88rem; padding-top: .6rem; border-top: 1px solid var(--bord); }
.sous-liste > small { color: var(--p-aide); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
.mini-case { display: inline-flex; align-items: center; gap: .4rem; border: 2px dashed var(--p-aide); color: var(--encre); background: var(--carte);
  border-radius: 9px; padding: .2rem .55rem; font: inherit; font-size: .85rem; cursor: pointer; }
.mini-case .ico { color: var(--p-aide); width: 16px; height: 16px; }
.mini-case.fait { border-style: solid; }
.mini-case.ferme { opacity: .6; cursor: default; }
.editeur-quiz, .editeur-libre { display: grid; gap: .9rem; }
.editeur-quiz .barre-outils, .editeur-libre .barre-outils { border: 1px solid var(--bord); border-radius: 10px; position: static; }
.editeur-quiz input[type="number"], .editeur-libre input[type="number"] { width: 4.5rem; height: auto; }
/* Vidéo : aperçu 16:9. */
.apercu-video { aspect-ratio: 16 / 9; width: 100%; max-width: 44rem; background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.apercu-video .aide { color: #ddd; padding: 1rem; text-align: center; }
.apercu-video iframe, .apercu-video > div { width: 100%; height: 100%; border: 0; }
/* Vidéo, côté élève : lecteur 16:9. */
.lecteur-video { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 10px; overflow: hidden; }
.lecteur-video iframe, .lecteur-video > div { width: 100%; height: 100%; border: 0; }
.questions-livre { --colonne-min: 30rem; }
.question-livre { display: grid; align-content: start; gap: .6rem; box-shadow: none; margin-bottom: 0; }
.question-livre.incomplete { border-color: color-mix(in srgb, var(--p-aide) 60%, var(--bord)); }
.entete-question { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.entete-question .espace { flex: 1; }
.reponses-quiz { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.reponse-ligne { display: flex; gap: .4rem; align-items: center; }
.reponse-ligne input:not([type]) { flex: 1; min-width: 0; }
.lettre { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--fond); flex: none; }
.reponses-vf { display: flex; gap: 1rem; border: 0; padding: 0; margin: 0; }
.image-question { display: flex; gap: .75rem; align-items: center; }
.image-question img { max-height: 120px; max-width: 220px; border-radius: 8px; }
.avertissement { color: var(--p-aide); margin: 0; }
.editeur-libre textarea { width: 100%; }
@media (max-width: 760px) { .reponses-quiz { grid-template-columns: 1fr; } }
.question-livre input:not([type]), .question-livre select, .editeur-libre textarea { background: var(--carte); color: var(--encre); border: 1px solid var(--bord); border-radius: 8px; padding: .4rem .55rem; font: inherit; }
.question-livre > .btn, .question-livre .image-question .btn { justify-self: start; }

/* Suivi d'un livre : onglets, avancement par chapitre, liste des élèves, page d'un élève, annotation. */
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.onglets button { border: 0; border-bottom: 3px solid transparent; background: none; color: var(--encre-2); font: inherit; font-weight: 600; padding: .5rem .9rem; cursor: pointer; }
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--onglet-actif); }
/* Paramètres : onglets Thèmes / Admin, des liens vers deux pages ; l'actuel porte aria-current="page". */
.onglets-parametres { flex-wrap: wrap; }
/* « Retour » à gauche, « Modifier la vitrine » à droite, sur la même ligne. */
.fil-parametres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.onglets-parametres a { margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--encre-2); font-weight: 600; padding: .5rem .9rem; text-decoration: none; }
.onglets-parametres a:hover { color: var(--encre); }
.onglets-parametres a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--onglet-actif); }
.avancement-chapitres { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.avancement-chapitres li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(6rem, 40%); gap: .6rem; align-items: center; font-size: .92rem; }
.avancement-chapitres .titre-chap small { display: block; color: var(--encre-2); font-size: .8rem; white-space: normal; }
.avancement-chapitres .barre-progres { width: 100%; }
.num-chap { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.titre-chap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-eleves { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.liste-eleves a { display: grid; grid-template-columns: auto minmax(10rem, 1fr) minmax(6rem, 12rem) 3rem auto; gap: .75rem; align-items: center;
  padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 12px; color: var(--encre); text-decoration: none; background: var(--carte); }
.liste-eleves a:hover { border-color: var(--accent); }
.liste-eleves small { color: var(--encre-2); }
.liste-eleves .pct { font-weight: 700; text-align: right; }
.avatar-eleve.petit { width: 34px; height: 34px; font-size: .85rem; }
.case-suivi.a { background: var(--p-aide-doux); color: var(--p-aide); }
.liste-ratees, .liste-fiche { margin: .3rem 0 1rem; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .92rem; }
.plateau-fiche { margin-bottom: 1rem; }
.grille-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; margin: 1rem 0; }
.grille-fiche section { border: 1px solid var(--bord); border-radius: 12px; padding: .75rem 1rem; }
.recompenses { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.pastille-recompense { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px;
  background: var(--p-fait-doux); color: var(--p-fait); }
.chronologie { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.chronologie time { color: var(--encre-2); font-size: .8rem; display: inline-block; min-width: 8.5rem; }
.consigne { background: var(--fond); border-left: 4px solid var(--p-cours); padding: .5rem .8rem; border-radius: 0 8px 8px 0; }
.copie { font-family: var(--lecture); font-size: 1.05rem; line-height: 1.65; white-space: pre-wrap; padding: .75rem .9rem; border: 1px solid var(--bord);
  border-radius: 10px; background: var(--fond); margin: .5rem 0; }
mark.annote { background: color-mix(in srgb, var(--p-aide) 30%, transparent); color: inherit; border-bottom: 2px solid var(--p-aide); border-radius: 2px; padding: 0 .1rem; }
mark.annote sup { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 800; color: var(--p-aide); margin-left: .1rem; }
.annotations { display: grid; gap: .35rem; list-style: none; padding-left: 0; font-size: .92rem; }
.annotations b { color: var(--p-aide); margin-right: .3rem; }
.version-precedente { border-top: 1px solid var(--bord); padding-top: .5rem; margin-top: .5rem; }
@media (max-width: 760px) {
  .liste-eleves a { grid-template-columns: auto 1fr 3rem; }
  .liste-eleves a .barre-progres, .liste-eleves a .meta { display: none; }
}

/* Livre côté élève : messages, quiz, réponse libre, « Je me sens… ». */
.alerte { padding: .7rem 1rem; border-radius: 10px; border-left: 4px solid; font-size: .95rem; margin: .5rem 0; }
.alerte.info { background: var(--p-cours-doux); border-color: var(--p-cours); }
.alerte.aide { background: var(--p-aide-doux); border-color: var(--p-aide); }
.alerte.ok { background: var(--p-fait-doux); border-color: var(--p-fait); }
.activite { display: grid; gap: .6rem; }
.question-eleve { font-size: 1.15rem; font-weight: 600; margin: 0; }
.image-quiz { max-width: 100%; max-height: 260px; border-radius: 10px; justify-self: start; }
.choix-eleve { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.choix-reponse { display: flex; align-items: center; gap: .6rem; text-align: left; min-height: 54px; padding: .6rem .8rem; border-radius: 10px;
  border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; cursor: pointer; }
.choix-reponse:hover:not(:disabled) { border-color: var(--p-cours); }
.choix-reponse[aria-pressed="true"] { border-color: var(--p-cours); background: var(--p-cours-doux); }
.choix-reponse.juste { border-color: var(--p-fait); background: var(--p-fait-doux); }
.choix-reponse.faux { border-color: var(--danger); background: var(--danger-doux); }
.choix-reponse:disabled { cursor: default; }
.choix-reponse .lettre:empty { display: none; }
/* Degrés de certitude : trois boutons, le choix reste modifiable jusqu'à « Valider ». */
.certitude { border: 0; margin: .4rem 0 0; padding: 0; min-width: 0; }
.certitude legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.certitude-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.certitude-bouton { display: grid; justify-items: center; gap: .15rem; min-height: 54px; padding: .5rem .4rem; border-radius: 10px;
  border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; cursor: pointer; }
.certitude-bouton:hover:not(:disabled) { border-color: var(--p-cours); }
.certitude-bouton[aria-pressed="true"] { border-color: var(--p-cours); background: var(--p-cours-doux); box-shadow: inset 0 0 0 1px var(--p-cours); }
.certitude-bouton:disabled { cursor: default; }
.certitude-bouton:disabled:not([aria-pressed="true"]) { opacity: .55; }
.certitude-nom { font-weight: 600; }
.certitude-points { font-size: .85rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.certitude-resultat { margin: .3rem 0 0; }
.bilan-certitude { display: grid; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.bilan-certitude h2, .bilan-certitude h3 { margin: 0; }
.bilan-certitude p { margin: 0; }
.grille-certitude { border-collapse: separate; border-spacing: .3rem; width: 100%; max-width: 520px; }
.grille-certitude caption { text-align: left; font-weight: 600; padding-bottom: .2rem; }
.grille-certitude th { text-align: left; font-weight: 600; padding: .3rem; }
.grille-certitude td { padding: .45rem .55rem; border-radius: 8px; border: 2px solid var(--bord); }
.grille-certitude td b { float: right; font-variant-numeric: tabular-nums; }
.grille-certitude thead td { border: 0; }
/* Juste en vert, faux en rouge ; l'illusion de savoir est appuyée (bordure épaisse), jamais par la seule couleur : son nom est écrit. */
.grille-certitude .cat-maitrise, .grille-certitude .cat-consolider, .grille-certitude .cat-fragile { border-color: var(--p-fait); background: var(--p-fait-doux); }
.grille-certitude .cat-lacune, .grille-certitude .cat-surveiller, .grille-certitude .cat-illusion { border-color: var(--danger); background: var(--danger-doux); }
.grille-certitude .cat-illusion { border-width: 3px; font-weight: 600; }
.realisme-certitude, .liste-reprendre { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.liste-reprendre .cat-illusion > b:first-child { color: var(--danger); }
@media (max-width: 380px) { .certitude-choix { grid-template-columns: 1fr; } .certitude-bouton { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; } }
.score-quiz { font-size: 2.6rem; margin: .25rem 0; }
.liste-detour { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.liste-detour .mini-case { text-decoration: none; }
.ressenti { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .9rem; margin-right: auto; }
.ressenti button { border: 1px solid var(--bord); background: var(--carte); border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--encre); }
.ressenti button[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); }
.bas-page { align-items: center; }
.bulle-prof { display: flex; gap: .6rem; align-items: flex-start; }
.bulle-prof > div { background: var(--accent-doux); border-radius: 4px 14px 14px 14px; padding: .6rem .8rem; font-size: .93rem; white-space: pre-wrap; }
@media (max-width: 760px) { .choix-eleve { grid-template-columns: 1fr; } }

/* Page d'un livre dans l'éditeur : toujours blanche, comme une feuille de papier, même en thème sombre.
   Seule la page change : la barre d'outils et le reste de l'écran suivent le thème. */
.editeur-riche { background: #ffffff; }
.editeur-riche .tdm, .editeur-riche .feuille {
  color-scheme: light;
  --carte: #ffffff; --fond: #f2f6f9; --bord: #d8e2ea; --encre: #16293a; --encre-2: #4c6072;
  --accent-fort: #145483; --focus: #1d4ed8; --p-cours: #646cdf; --p-cours-doux: #eceefc;
  color: var(--encre);
}
.editeur-riche .feuille { background: #ffffff; }

/* Plateau auteur : un chapitre se déplace en glissant son en-tête. */
.groupe header[draggable="true"] { cursor: grab; }
.groupe.glisse { opacity: .45; }

/* ---------- Outil « Équipes » (maquette : maquette-equipes) ---------- */
:root { --e-faible: #fdecea; --e-moyen: #fbf3dc; --e-fort: #e3f1e8; --e-alerte: #b26a00; }
@media (prefers-color-scheme: dark) { :root { --e-faible: #3a1b19; --e-moyen: #3a3216; --e-fort: #1d3326; --e-alerte: #e0a33a; } }
.axes-equipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .5rem .9rem; }
.axe-ligne { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 10px; }
.axe-ligne input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.axe-ligne .pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: .35rem; }
.axe-ligne details summary { cursor: pointer; font-size: .82rem; color: var(--accent-fort); }
.axe-ligne ol { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--encre-2); }
.source { font-size: .76rem; color: var(--encre-2); }
/* Toile d'araignée : couleur de chaque membre par sa classe serie-N (fill) ; contour du meilleur de l'équipe en pointillés. */
.radar { width: 100%; height: auto; display: block; }
.radar-cadre { max-width: 420px; }
.radar-grille { fill: none; stroke: var(--trait); }
.radar-rayon { stroke: var(--trait); }
.radar text { fill: var(--encre-2); font-size: 11px; font-family: inherit; }
.radar-zone { fill-opacity: .14; stroke-width: 2.2; }
.radar-zone.serie-0 { stroke: var(--s0); } .radar-zone.serie-1 { stroke: var(--s1); } .radar-zone.serie-2 { stroke: var(--s2); } .radar-zone.serie-3 { stroke: var(--s3); }
.radar-zone.serie-4 { stroke: var(--s4); } .radar-zone.serie-5 { stroke: var(--s5); } .radar-zone.serie-6 { stroke: var(--s6); } .radar-zone.serie-7 { stroke: var(--s7); }
.radar-meilleur { fill: var(--accent); fill-opacity: .1; stroke: var(--accent-fort); stroke-width: 2.5; stroke-dasharray: 6 4; }
/* Notes par élève : carte de chaleur, défilement horizontal sur petit écran. */
.tableau-defilant { overflow-x: auto; }
table.chaleur { border-collapse: collapse; font-size: .85rem; width: 100%; }
table.chaleur th { font-weight: 600; color: var(--encre-2); padding: .35rem; text-align: center; white-space: nowrap; }
table.chaleur .nom { text-align: left; position: sticky; left: 0; background: var(--carte); color: var(--encre); }
table.chaleur td { text-align: center; padding: .35rem; border-top: 1px solid var(--bord); font-variant-numeric: tabular-nums; }
table.chaleur th a[aria-current] { color: var(--accent-fort); }
.n-faible { background: var(--e-faible); } .n-moyen { background: var(--e-moyen); } .n-fort { background: var(--e-fort); font-weight: 700; }
.reglages-equipes { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; align-items: end; }
.reglages-equipes .champ input { width: 6rem; }
.paires { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.paire { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .7rem; border: 1px solid var(--bord); border-radius: 999px; font-size: .88rem; background: var(--danger-doux); margin: 0; }
.score-equipes { margin: .8rem 0 .3rem; }
.equipes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; margin-top: .6rem; }
.equipe-carte { border: 1px solid var(--bord); border-radius: 12px; padding: 1rem; background: var(--carte); }
.equipe-carte.survol { outline: 3px dashed var(--accent); }
.equipe-carte h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-top: 0; }
.membres { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .35rem; }
.membre { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; padding: .35rem .5rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.js .membre[draggable="true"] { cursor: grab; }
.membre.glisse { opacity: .45; }
.membre .point { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.membre-nom { font-weight: 600; margin-right: auto; }
.membre form { display: inline-flex; gap: .3rem; margin: 0; }
.membre select { min-height: 32px; padding: .1rem .4rem; font-size: .82rem; border-radius: 999px; }
.manque { font-size: .85rem; color: var(--e-alerte); margin: .5rem 0 0; }
.bas-equipes { margin-top: 1rem; }
.bas-equipes form { margin: 0; }
/* Équipes, côté élève : questionnaire une affirmation à la fois, puis la toile de l'équipe. */
.questionnaire-equipes, .mon-equipe { max-width: 560px; margin: 0 auto; }
.haut-question { display: flex; justify-content: space-between; gap: 1rem; }
.progres-questions { display: block; width: 100%; height: 8px; margin: .4rem 0 .8rem; }
.axe-nom { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-fort); margin: .6rem 0 0; }
.affirmation { font-size: 1.2rem; font-weight: 700; margin: .3rem 0 .9rem; }
.likert { display: grid; gap: .5rem; }
.likert button { min-height: 52px; border-radius: 12px; border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; text-align: left; padding: .5rem .8rem; cursor: pointer; display: flex; align-items: center; gap: .7rem; }
.likert button:hover { border-color: var(--accent); }
.likert button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.likert button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-doux); }
.likert .points { display: inline-flex; gap: 3px; }
.likert .points i { width: 8px; height: 8px; border-radius: 50%; background: var(--vide); }
.likert .points i.on { background: var(--accent); }
.bas-question { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1rem; }
.legende-equipe { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .9rem; margin: .5rem 0 1rem; }
.legende-equipe button { font: inherit; background: none; border: 0; color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .25rem; border-radius: 6px; min-height: 32px; }
.legende-equipe button[aria-pressed="false"] { opacity: .4; }
.legende-equipe .trait { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.legende-equipe .trait-meilleur { background: var(--accent-fort); }
.forces { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.forces ul { margin: .3rem 0 0; padding-left: 1.1rem; }
@media (max-width: 520px) { .forces { grid-template-columns: 1fr; } }
/* Équipes : éditeur « Mes axes » (règles avec leur statut) et page de création. */
.sous-titre-axes { font-size: 1rem; margin: 1rem 0 .3rem; }
.regles-axe { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.regle { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .7rem; border-radius: 10px; border: 1px solid var(--bord); font-size: .92rem; }
.regle-icone { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; background: var(--vide); }
.regle.ok { border-color: var(--accent); }
.regle.ok .regle-icone { background: var(--accent); color: var(--sur-accent); }
.regle.erreur { border-color: var(--danger); background: var(--danger-doux); }
.regle.erreur .regle-icone { background: var(--danger); color: var(--sur-danger); }
.regle.conseil .regle-icone { background: var(--e-moyen); color: var(--encre); }
.regle-detail { color: var(--encre-2); }

/* ---------- Textes à trous (maquette : maquette-textes-trous) ---------- */
:root { --t-blanc: #eceefc; --t-blanc-bord: #646cdf; --t-juste: #e3f1e8; --t-juste-bord: #2f855a; --t-faux: #fdecea; --t-faux-bord: #b42318; }
@media (prefers-color-scheme: dark) { :root { --t-blanc: #23264a; --t-blanc-bord: #7a82ea; --t-juste: #1d3326; --t-juste-bord: #4cb87c; --t-faux: #3a1b19; --t-faux-bord: #f28b82; } }
.phrase-trous { font-size: 1.15rem; line-height: 2.4; }
.blanc { display: inline-flex; align-items: center; min-width: 6.5rem; min-height: 40px; padding: .1rem .6rem; margin: 0 .15rem; border: 2px dashed var(--t-blanc-bord); border-radius: 8px; background: var(--t-blanc); color: var(--encre); vertical-align: middle; font: inherit; font-weight: 600; line-height: 1.3; }
button.blanc { cursor: pointer; }
.blanc.rempli { border-style: solid; }
.blanc.juste { background: var(--t-juste); border: 2px solid var(--t-juste-bord); }
.blanc.faux { background: var(--t-faux); border: 2px solid var(--t-faux-bord); }
.blanc.actif { outline: 3px solid var(--focus); outline-offset: 2px; }
.blanc input, .blanc select { border: 0; background: transparent; color: var(--encre); min-height: 34px; width: 8rem; padding: 0 .2rem; font: inherit; font-weight: 600; }
.blanc .solution { font-size: .82rem; font-weight: 700; color: var(--t-juste-bord); margin-left: .4rem; }
.banque { display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); margin: .6rem 0; }
.mot { min-height: 40px; padding: .3rem .85rem; border-radius: 999px; border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; }
.mot[aria-pressed="true"] { border-color: var(--focus); background: var(--t-blanc); }
.mot.utilise { opacity: .35; text-decoration: line-through; cursor: default; }
.retour { border-radius: 10px; padding: .6rem .8rem; font-weight: 600; margin: .6rem 0; }
.retour.ok { background: var(--t-juste); } .retour.ko { background: var(--t-faux); }
/* Éditeur */
.phrase-edition { border: 1px solid var(--bord); border-radius: 12px; padding: .9rem 1rem; margin: .8rem 0; }
.phrase-edition header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.phrase-edition header .actions { margin-left: auto; }
.mots-cliquables { font-size: 1.05rem; line-height: 2.3; margin: .4rem 0; }
.mot-texte { padding: .15rem .2rem; border-radius: 6px; cursor: pointer; }
.mot-texte:hover, .mot-texte:focus-visible { background: var(--accent-doux); outline: none; }
.mot-texte.trou { background: var(--t-blanc); border: 2px dashed var(--t-blanc-bord); font: inherit; font-weight: 700; padding: .1rem .45rem; color: var(--encre); }
.mot-texte.trou.choisi { outline: 3px solid var(--focus); }
.editeur-blanc { border: 2px solid var(--t-blanc-bord); border-radius: 12px; padding: .8rem 1rem; background: var(--t-blanc); display: grid; gap: .5rem; justify-items: start; }
.etiquettes { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.etiquette { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .3rem .15rem .6rem; border-radius: 999px; background: var(--carte); border: 1px solid var(--bord); font-size: .9rem; }
.etiquette button { border: 0; background: none; cursor: pointer; color: var(--encre); font-size: 1rem; }
.etiquettes input { min-height: 34px; width: 12rem; }
.ligne-dossier.gauche { margin-left: 0; }
/* Projection et suivi */
.scene-trous { min-height: calc(100vh - 8rem); }
.contenu-trous { min-width: 0; }
.contenu-trous h2 { margin-top: 0; }
.attente-trous { display: flex; gap: 2.5rem; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.grand-nombre { font-size: 4rem; font-weight: 800; margin: .2rem 0 0; }
.phrase-projetee { font-size: 1.7rem; line-height: 2.2; }
.phrase-projetee .blanc { min-width: 9rem; font-size: 1.4rem; justify-content: center; }
.resultats-blancs { display: grid; gap: .8rem; margin-top: 1rem; }
.res-blanc { border: 1px solid var(--bord); border-radius: 12px; padding: .7rem 1rem; margin-bottom: .6rem; }
.barre-res { display: block; width: 100%; height: 14px; margin: .4rem 0; background: var(--t-faux); }
.barre-res .rempli { background: var(--t-juste-bord); }
.reponses-freq { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .9rem; margin-top: .3rem; }
.reponses-freq span { padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--bord); }
.reponses-freq span.ok { border-color: var(--t-juste-bord); background: var(--t-juste); }
/* Pendant la séance, le QR-code reste visible mais plus petit (en grand dans la salle d'attente). */
.scene-trous .projection { min-height: 0; align-items: start; }
.scene-trous .barre-presentation .compteur-grand { font-size: clamp(1.1rem, 4vh, 1.8rem); }

/* ---------- Associations (client/association-plateau.ts) ---------- */
.assoc { display: grid; gap: .8rem; }
.assoc-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.assoc-ligne { --lien: var(--bord); display: grid; grid-template-columns: minmax(0, 1fr) clamp(1rem, 6vw, 4rem) minmax(0, 1fr); align-items: stretch; border-radius: 16px; }
.assoc-colonnes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 12vw, 7rem); align-items: start; }
.assoc-colonne { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.assoc-colonne .assoc-carte { width: 100%; }
.assoc-liens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.assoc-liens line { stroke: var(--lien); stroke-width: 3; stroke-linecap: round; }
/* Couleurs fixes, pas celles de la palette de l'enseignant : ni rouge ni vert, réservés à la correction. */
.lien-0 { --lien: #646cdf; } .lien-1 { --lien: #0284c7; } .lien-2 { --lien: #8b5cf6; } .lien-3 { --lien: #b7791f; }
.assoc-carte { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem .8rem; border: 2px solid var(--lien, var(--bord)); border-radius: 14px; background: var(--carte); color: var(--encre);
  font: inherit; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
button.assoc-carte { cursor: pointer; }
button.assoc-carte[data-carte] { cursor: grab; touch-action: none; user-select: none; }
.assoc-gauche { font-style: italic; }
.assoc-carte[aria-pressed="true"] { border-color: var(--focus); background: var(--t-blanc); outline: 2px solid var(--focus); }
.assoc-trait { align-self: center; height: 3px; background: transparent; border-radius: 3px; }
.assoc-ligne.reliee .assoc-trait { background: color-mix(in srgb, var(--lien) 55%, transparent); }
.assoc-carte.cible { outline: 3px solid var(--focus); outline-offset: 2px; }
.assoc-carte.glisse { opacity: .35; }
.assoc-fantome { position: fixed; z-index: 100; margin: 0; transform: translate(-50%, -50%) rotate(-1.5deg); pointer-events: none; border-color: var(--encre); box-shadow: 0 10px 24px rgb(0 0 0 / 25%); }
.assoc-corrige .assoc-ligne.juste { --lien: var(--t-juste-bord); } .assoc-corrige .assoc-ligne.faux { --lien: var(--t-faux-bord); }
.assoc-corrige .assoc-ligne.juste .assoc-droite { background: var(--t-juste); } .assoc-corrige .assoc-ligne.faux .assoc-droite { background: var(--t-faux); }
.assoc-corrige .assoc-droite { flex-wrap: wrap; gap: .4rem; }
.assoc-corrige .solution { font-size: .85rem; font-weight: 700; color: var(--t-juste-bord); }
.assoc-projete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 6vw, 5rem); font-size: 1.3rem; }
.assoc-projete ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.consigne-assoc { font-size: 1.15rem; margin: .2rem 0 .8rem; }
.paires-edition { display: grid; gap: .4rem; margin: .5rem 0; }
.paire-edition { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.paire-edition.intrus-edition { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 480px) { .assoc-ligne { font-size: .92rem; } .assoc-carte { padding: .4rem .5rem; } }

/* « Masquer le QR-code » (client/qr-masquable.ts) : le QR-code et l'adresse disparaissent, la colonne se resserre. */
.qr-masque .projection-qr .qr, .qr-masque .projection-qr .lien-court,
.qr-masque .quiz-rejoindre .qr, .qr-masque .quiz-rejoindre .lien-court { display: none; }
.qr-masque .projection { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
.qr-masque .projection-integree { grid-template-columns: minmax(120px, 20%) minmax(0, 1fr); }
.qr-masque .mur-projection { grid-template-columns: 160px minmax(0, 1fr); }
@media (max-width: 900px) { .qr-masque .projection, .qr-masque .mur-projection { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .qr-masque .projection-integree { grid-template-columns: 1fr; } }
.qr-masque .integration-sondage .projection-qr { display: none; }
.qr-masque .integration-sondage .projection-integree { grid-template-columns: minmax(0, 1fr); }
.qr-masque .presentation-outil .projection-qr { display: none; }
.qr-masque .presentation-outil > .projection { grid-template-columns: minmax(0, 1fr); }

/* ---------- Chrono : chronomètre et minuteur (maquette validée : maquette-chrono) ---------- */
.chiffres-chrono.urgent { color: var(--c-urgent); }
.chiffres-chrono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.scene-chrono { display: grid; place-items: center; border-radius: 12px; overflow: hidden; }
.dessin-chrono { display: block; width: 100%; height: auto; max-height: calc(100vh - 13rem); }
body.integre .dessin-chrono { max-height: calc(100vh - 7rem); }
.ch-boitier { fill: var(--encre); } .ch-metal { fill: var(--c-metal); } .ch-cadran { fill: var(--carte); } .ch-graduation { stroke: var(--encre-2); }
.ch-anneau-fond { stroke: var(--vide); } .ch-anneau { stroke: var(--accent); } .ch-anneau.fini { stroke: var(--c-urgent); }
.ch-aiguille { stroke: var(--c-urgent); } .ch-pivot { fill: var(--c-urgent); }
.ch-chiffres { fill: var(--encre); color: var(--encre); }
.ch-ecran { fill: #34d399; } .ch-ecran-fond { fill: #34d399; opacity: .18; }
.scene-chrono.urgent .ch-ecran, .scene-chrono.urgent .ch-ecran-fond { fill: #ff4d4d; }
.scene-chrono.urgent .ch-chiffres { fill: var(--c-urgent); color: var(--c-urgent); animation: ch-pulse 1s ease-in-out infinite; }
.scene-chrono.urgent text.ch-ecran { animation: ch-pulse .5s steps(2) infinite; }
.scene-chrono.urgent .ch-tremble { animation: ch-tremble .12s linear infinite; }
.ch-clignote { animation: ch-pulse .5s steps(2) infinite; }
.ch-crepite { transform-box: fill-box; transform-origin: center; animation: ch-crepite .15s steps(2) infinite; }
.ch-particule { transform-box: fill-box; animation: ch-particule .5s ease-out infinite; }
.ch-particule.p2 { animation-delay: .17s; } .ch-particule.p3 { animation-delay: .33s; }
.ch-boum { transform-box: fill-box; transform-origin: center; animation: ch-boum .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.ch-ciel { fill: var(--c-ciel); } .ch-sol { fill: var(--c-herbe); } .ch-pas-de-tir { fill: var(--encre-2); }
.ch-fumee { fill: var(--c-metal); opacity: .8; transform-box: fill-box; transform-origin: center; transition: transform .8s ease-out; }
.ch-nuage .ch-fumee { transform: scale(1.9); }
.ch-decolle { animation: ch-decolle 2.4s ease-in forwards; }
.ch-flamme { transform-box: fill-box; transform-origin: top center; animation: ch-flamme .12s ease-in-out infinite alternate; }
.ch-piste { stroke: var(--encre-2); } .ch-mat { stroke: var(--encre); }
.ch-antenne { transform-box: fill-box; transform-origin: bottom center; animation: ch-antenne 1.2s ease-in-out infinite alternate; }
.ch-bravo { fill: var(--accent-fort); }
.ch-sobre { display: grid; gap: 1.2rem; justify-items: center; width: min(100%, 900px); padding: 2rem 0; }
.ch-affichage { margin: 0; line-height: 1; font-size: clamp(5rem, 16vw, 12rem); font-weight: 800; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }
.ch-jauge { width: 100%; height: 22px; border-radius: 999px; background: var(--vide); overflow: hidden; }
.ch-jauge span { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--accent); }
.scene-chrono.urgent .ch-jauge span { background: var(--c-urgent); }
.ch-bravo-html { margin: 0; font-size: 2rem; font-weight: 800; color: var(--accent-fort); }
.tours-chrono { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.tours-chrono li { padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte); font-family: ui-monospace, Consolas, monospace; }
@keyframes ch-pulse { 50% { opacity: .55; } }
@keyframes ch-tremble { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes ch-crepite { 50% { transform: scale(1.35) rotate(25deg); } }
@keyframes ch-particule { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(10px, -16px); opacity: 0; } }
@keyframes ch-boum { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ch-decolle { to { transform: translateY(-520px); } }
@keyframes ch-flamme { to { transform: scaleY(1.35); } }
@keyframes ch-antenne { to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .scene-chrono .ch-crepite, .scene-chrono .ch-particule, .scene-chrono .ch-flamme, .scene-chrono .ch-antenne, .scene-chrono .ch-clignote,
  .scene-chrono.urgent .ch-chiffres, .scene-chrono.urgent .ch-tremble, .scene-chrono.urgent text.ch-ecran { animation: none; }
}
/* Formulaire : durée en minutes et secondes, raccourcis, choix du thème en cartes. */
.duree-chrono { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.duree-chrono input { width: 5.2rem; text-align: center; font-size: 1.2rem; font-family: ui-monospace, Consolas, monospace; }
.duree-chrono .sep { font-weight: 800; font-size: 1.3rem; }
.raccourcis-duree { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: .6rem; }
.themes-chrono { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: .8rem 0; padding: 0; border: 0; }
.themes-chrono legend { margin-bottom: .4rem; }
.themes-chrono > small { grid-column: 1 / -1; }
.theme-chrono { position: relative; display: grid; gap: .35rem; justify-items: center; padding: .7rem .5rem; border: 2px solid var(--bord); border-radius: 12px; background: var(--carte); cursor: pointer; text-align: center; }
.theme-chrono input { position: absolute; opacity: 0; }
.theme-chrono b { font-size: .95rem; } .theme-chrono small { color: var(--encre-2); font-size: .8rem; line-height: 1.25; }
.theme-chrono:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.theme-chrono:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-chrono.indisponible { opacity: .4; cursor: not-allowed; }
.apercu-theme { width: 84px; height: 64px; }
.ap-cadran { fill: var(--carte); stroke: var(--encre); } .ap-encre { fill: var(--encre); } .ap-encre-trait { stroke: var(--encre); }
.ap-accent { stroke: var(--accent); } .ap-accent-plein { fill: var(--accent); } .ap-vide { fill: var(--vide); } .ap-trait { stroke: var(--encre-2); }
/* Chrono : panneau des réglages (ouvert par « ⚙ Réglages », refermé au démarrage). */
.reglages-chrono { margin: 0 0 1rem; }
.reglages-chrono .ligne-reglages { gap: .6rem 2rem; }
.reglages-chrono .sons-chrono { gap: .5rem .75rem; margin-top: .6rem; }
.reglages-chrono .sons-chrono .aide { flex-basis: 100%; margin: 0; }
.reglages-chrono input.champ-jalons { width: 10rem; flex: 0 0 auto; }
.reglages-chrono .themes-chrono { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.lien-ppt-chrono { display: grid; gap: .35rem; margin-top: .6rem; }

/* ---------- Examens (maquette validée : maquette-examen) ---------- */
.etat.attente { background: color-mix(in srgb, var(--ic1) 16%, transparent); color: var(--ic1); }
.etat.danger { background: var(--danger-doux); color: var(--danger); }
.reglages-examen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.reglages-examen fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; display: grid; gap: .35rem; }
.reglages-examen legend { font-weight: 700; padding: 0 .25rem; }
.reglages-examen > p { grid-column: 1 / -1; margin: 0; }
.reglages-examen .aide { margin: 0 0 .2rem; }
.interrupteur { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.interrupteur input { appearance: none; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--axe); position: relative; cursor: pointer; flex: none; margin: 0; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { left: calc(2.4rem - 1.35rem + 3px); }
.interrupteur input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .interrupteur input::after { transition: none; } }
.ligne-duree, .choix-ligne { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.choix-ligne label { display: inline-flex; gap: .35rem; align-items: center; }
input.champ-court { width: 6rem; }
.plateau-examen .groupe header .titre-partie { font: inherit; font-weight: 700; border: 1px solid transparent; background: transparent; color: inherit; padding: .05rem .3rem; border-radius: 6px; min-width: 6rem; max-width: 14rem; }
.plateau-examen .groupe header .titre-partie:hover, .plateau-examen .groupe header .titre-partie:focus { border-color: var(--bord); background: var(--carte); }
.case-jeu .pts-case { position: absolute; right: -8px; bottom: -8px; min-width: 1.35rem; height: 1.2rem; padding: 0 .25rem; border-radius: 999px; background: var(--k); color: #fff;
  font-size: .66rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.total-bareme { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--accent-doux); }
#statut-examen.attention { color: var(--danger); font-weight: 600; }
.editeur-question { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; }
.editeur-question fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .8rem .8rem; margin: 0; display: grid; gap: .45rem; }
.titre-question { margin: 0; display: flex; gap: .4rem; align-items: center; }
.option-quiz { display: flex; gap: .5rem; align-items: center; }
.option-quiz input[type="text"] { flex: 1; min-width: 0; }
.num-element { min-width: 1.5rem; color: var(--encre-2); font-weight: 700; }
.apercu-image img { display: block; max-width: min(100%, 360px); border-radius: 8px; margin-bottom: .4rem; }
.points-ponderation { display: flex; gap: .5rem .75rem; flex-wrap: wrap; align-items: end; padding: .6rem .8rem; border-radius: 10px; background: var(--fond); }
.points-ponderation input { width: 6rem; }
.points-ponderation .egal { font-weight: 700; padding-bottom: .55rem; }
.champ-en-ligne { display: inline-flex; gap: .4rem; align-items: center; }
/* Suivi */
.puces-eleves, .liste-demandes { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.puces-eleves li { display: inline-flex; gap: .3rem; align-items: center; padding: .1rem .3rem .1rem .7rem; border-radius: 999px; background: var(--accent-doux); }
.liste-demandes { flex-direction: column; }
.liste-demandes li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .7rem; border: 1px solid var(--bord); border-radius: 10px; }
.resume-examen { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.resume-examen div { background: var(--fond); border-radius: 10px; padding: .45rem .9rem; font-size: .85rem; color: var(--encre-2); }
.resume-examen b { display: block; font-size: 1.3rem; color: var(--encre); }
.defile-tableau { overflow-x: auto; }
.tableau-examen { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau-examen th { text-align: left; font-size: .78rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; padding: .45rem .55rem; border-bottom: 1px solid var(--bord); }
.tableau-examen td { padding: .45rem .55rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau-examen tr.choisi td { background: var(--accent-doux); }
.tableau-examen progress { width: 6rem; vertical-align: middle; accent-color: var(--ic1); }
.note-examen { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.note-examen.insuffisante, .grande-note.insuffisante { color: var(--danger); }
@media (max-width: 640px) { .masque-mobile { display: none; } }
.copie-question { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; display: grid; gap: .35rem; }
.copie-question.a-corriger { border-color: var(--s4); }
.copie-question header { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.copie-question p { margin: 0; }
.copie-question header .aide { margin: 0; }
.copie-question header .espace { flex: 1; }
.marque-juste { color: var(--accent-fort); font-weight: 800; }
.marque-partiel, .marque-attente { color: var(--s4); font-weight: 800; }
.marque-faux { color: var(--danger); font-weight: 800; }
.saisie-points { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; }
.saisie-points input { width: 5rem; }
.enonce-copie { white-space: pre-line; }
.texte-eleve { background: var(--fond); border-radius: 8px; padding: .5rem .7rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Élève */
.examen-eleve { max-width: 760px; margin: 0 auto; }
.attente-examen { text-align: center; }
.code-perso { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; letter-spacing: .05em; }
.barre-examen { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; padding: .6rem .9rem; margin-bottom: 1rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre); }
.barre-examen .espace { flex: 1; }
.minuteur-examen { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.25rem; }
.minuteur-examen.urgent { color: var(--danger); }
.progression-examen { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .3rem; }
.progression-examen button { min-width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--fond); color: var(--encre-2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.progression-examen button.repondue { background: color-mix(in srgb, var(--ic1) 18%, var(--carte)); border-color: var(--ic1); color: var(--encre); }
.progression-examen button.courante { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
/* Case vidéo : pastilles inactives pendant la vidéo, cadenas une fois verrouillée. */
.progression-examen button:disabled { cursor: not-allowed; opacity: .55; }
.progression-examen button.courante:disabled { opacity: 1; }
.progression-examen button.pastille-video { padding: 0 .45rem; }
.progression-examen button.verrouillee { background: var(--vide); border-style: dashed; }
.annonce-video { display: grid; gap: .3rem; padding-left: 1.2rem; margin: 0 0 .5rem; }
.video-examen .lecteur-video { margin: .5rem 0 .75rem; }
.recap-video { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.pause-recap { padding: .9rem 1rem; border: 1px solid var(--bord); border-radius: 10px; overflow-wrap: anywhere; }
.question-examen fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.corps-question { display: grid; gap: .7rem; }
.enonce-examen { font-size: 1.1rem; font-weight: 600; white-space: pre-line; padding: 0; margin-bottom: .4rem; }
.reponses-examen { display: grid; gap: .5rem; }
.reponse-examen { display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--bord); border-radius: 10px; cursor: pointer; }
.reponse-examen:has(input:checked) { border-color: var(--ic1); background: color-mix(in srgb, var(--ic1) 12%, var(--carte)); }
.classement-examen { padding-left: 1.6rem; margin: 0; display: grid; gap: .4rem; }
.classement-examen li { padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.classement-examen li span { display: inline-block; min-width: 50%; margin-right: .5rem; }
.classement-examen li.ordre-juste { background: var(--t-juste); }
.classement-examen li.ordre-faux { background: var(--t-faux); }
.classement-examen li .marque-ordre { min-width: 0; font-size: .85em; }
.phrase-examen { line-height: 2.5; }
.examen-eleve .phrase-examen input.trou-examen { display: inline-block; width: 9rem; max-width: 100%; border: 0; border-bottom: 2px solid var(--ic1); border-radius: 0; padding: .1rem .3rem;
  background: color-mix(in srgb, var(--ic1) 10%, var(--carte)); color: var(--encre); font: inherit; }
.donnee-texte { white-space: pre-line; background: var(--fond); border-radius: 8px; padding: .6rem .8rem; }
.image-question { display: block; max-width: 100%; max-height: 60vh; border-radius: 8px; }
.nav-examen { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.examen-eleve .centre, .carte.centre { text-align: center; }
.grande-note { font-size: 3rem; font-weight: 800; line-height: 1; margin: .3rem 0; }
#dialogue-remise, #dialogue-video { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; max-width: 30rem; background: var(--carte); color: var(--encre); }
#dialogue-remise::backdrop, #dialogue-video::backdrop { background: rgb(0 0 0 / 40%); }

/* Examen v2 : réglages en colonnes (temps, déroulement, barème), glisser-déposer sur le plateau. */
@media (min-width: 1000px) {
  .reglages-examen { grid-template-columns: minmax(15rem, 1fr) minmax(15rem, 1fr) minmax(24rem, 1.6fr); }
}
.choix-temps { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 2.2rem; }
.choix-temps input[type="number"], .choix-temps input[type="time"] { width: 7rem; }
.si-duree { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: center; }
.si-duree label { display: inline-flex; gap: .3rem; align-items: center; }
.ligne-notes { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.champ-note { display: grid; gap: .2rem; font-size: .85rem; color: var(--encre-2); }
.champ-note input { width: 6.5rem; }
.actions-reglages { display: flex; justify-content: flex-end; }
.palette-types button[draggable="true"] { cursor: grab; }
.plateau-examen .case-jeu[draggable="true"] { cursor: grab; }
.case-jeu.insertion::before { content: ""; position: absolute; left: -8px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--accent); }

/* ---------- Dactylographie (maquette validée : maquette-dactylo) ---------- */
/* Police OpenDyslexic (SIL OFL), servie par matrice-vote (public/polices). */
@font-face { font-family: "OpenDyslexic"; src: url("/polices/opendyslexic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/polices/opendyslexic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Atkinson Hyperlegible (SIL OFL) : l minuscule à queue, I majuscule à barres, 1 et l distincts. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/polices/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/polices/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --d-fait: #3f9a5a; --d-ici: #1d8ccc; --d-parfait: #d9961a; --d-examen: #ef7d1a; --d-ferme: #43546b; --d-erreur: #e5484d; --texte-dactylo: "Atkinson Hyperlegible", Verdana, "Segoe UI", system-ui, sans-serif;
  --main-actif: #1b6ca8; }
@media (prefers-color-scheme: dark) { :root { --d-fait: #4cb87c; --d-ici: #3a9fdb; --d-parfait: #e0a530; --d-examen: #f28c2e; --d-ferme: #4f5f74; --d-erreur: #f0656a; --main-actif: #6db7dc; } }
/* Réglages de la dactylo : 4 zones en 2 × 2 (Clavier | Longueur, Réussite | Unité de vitesse), de même hauteur par
   rangée, champs à la largeur de leur zone et au style commun (demande du 14.11.2026). Une colonne sur téléphone. */
.reglages-dactylo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 640px) { .reglages-dactylo { grid-template-columns: minmax(0, 1fr); } }
.reglages-dactylo fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; display: grid; gap: .55rem; align-content: start; }
.reglages-dactylo select, .reglages-dactylo .champ-note input, .reglages-dactylo textarea { width: 100%; }
.reglages-dactylo input[type="number"], .reglages-dactylo textarea {
  font: inherit; color: var(--encre); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px;
}
.reglages-dactylo input[type="number"]:focus, .reglages-dactylo textarea:focus { border-color: var(--accent); }
.reglages-dactylo legend { font-weight: 700; padding: 0 .25rem; }
.reglages-dactylo fieldset > label:not(.champ-note):not(.interrupteur) { display: flex; gap: .35rem; align-items: center; }
.reglages-dactylo .aide { margin: 0; }
.reglages-dactylo textarea { width: 100%; }
.reglages-dactylo > p { grid-column: 1 / -1; margin: 0; }
/* Plateau : étapes et grandes cases */
.etape-dactylo { padding: 1.1rem 0; border-top: 1px solid var(--bord); }
.etape-dactylo:first-of-type { border-top: 0; }
.etape-dactylo > header { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.etape-dactylo > header h2, .etape-dactylo > header h3 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.etape-dactylo.cible { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
.ecusson { width: 34px; height: 38px; flex: none; }
.ecusson path { fill: color-mix(in srgb, var(--axe) 25%, var(--carte)); stroke: var(--bord); stroke-width: 1.5; }
.ecusson.obtenu path { fill: var(--d-parfait); stroke: var(--d-parfait); }
.cases-dactylo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.case-dactylo { position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem; padding: 1.1rem .6rem .9rem; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--carte); box-shadow: var(--ombre); font: inherit; color: var(--encre); text-align: center; min-height: 168px; }
button.case-dactylo { cursor: pointer; transition: transform .12s; }
button.case-dactylo:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.case-dactylo .pastille { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--d-ferme);
  font: 700 1.6rem/1 var(--texte-dactylo); letter-spacing: .03em; }
.case-dactylo.test .pastille { width: 70px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; }
.case-dactylo.mots .pastille, .case-dactylo.perso .pastille { border-radius: 14px; font-size: 1.1rem; }
.case-dactylo.fait .pastille { background: var(--d-fait); }
.case-dactylo.ici .pastille { background: var(--d-ici); }
.case-dactylo .nom { font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.case-dactylo.fait .nom { color: var(--d-fait); }
.case-dactylo.ici .nom { color: var(--d-ici); }
.case-dactylo small, .case-dactylo .resultat { color: var(--encre-2); font-size: .78rem; }
.case-dactylo .marque { position: absolute; top: .45rem; right: .6rem; font-size: 1.05rem; }
.case-dactylo.fait .marque { color: var(--d-fait); }
.case-dactylo.ici .marque { color: var(--d-ici); }
/* Réussi sans aucune faute : jaune. */
.case-dactylo.fait.parfait .pastille { background: var(--d-parfait); }
.case-dactylo.fait.parfait .nom, .case-dactylo.fait.parfait .marque { color: var(--d-parfait); }
/* Examens : rosette orange à la place de la pastille. */
.case-dactylo.examen .pastille, .case-dactylo.examen.parfait .pastille { background: none; width: 64px; height: 70px; border-radius: 0; }
.rosette { width: 100%; height: 100%; display: block; }
.rosette .ruban, .rosette .sceau { fill: var(--d-examen); }
.case-dactylo.entrainement .rosette .ruban, .case-dactylo.entrainement .rosette .sceau { fill: var(--d-ici); } /* entraînement seulement : à ne pas confondre avec l'examen noté */
.rosette .bord { fill: var(--carte); stroke: var(--carte); stroke-width: 6; }
.rosette .anneau { fill: none; stroke: #fff; stroke-width: 4; }
.rosette .coche { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.case-dactylo:disabled { cursor: default; opacity: .7; }
.case-dactylo.perso { border-style: dashed; border-width: 2px; }
.case-dactylo[draggable="true"] { cursor: grab; }
.case-dactylo.glisse { opacity: .35; }
.case-dactylo.insertion::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--accent); }
.case-dactylo.ajout { border: 2px dashed var(--bord); box-shadow: none; color: var(--encre-2); font-weight: 600; align-content: center; cursor: pointer; }
.case-dactylo.ajout:hover { border-color: var(--accent); color: var(--accent-fort); }
.supprimer-case { position: absolute; top: .2rem; right: .5rem; margin: 0; }
.supprimer-case .lien-bouton { font-size: 1.2rem; text-decoration: none; color: var(--encre-2); }
#dialogue-exercice { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; max-width: 32rem; width: calc(100% - 2rem); background: var(--carte); color: var(--encre); }
#dialogue-exercice::backdrop { background: rgb(0 0 0 / 40%); }
/* Suivi */
.mini-dactylo { display: flex; flex-wrap: wrap; gap: 3px; }
.mini-dactylo i { width: 13px; height: 13px; border-radius: 4px; background: color-mix(in srgb, var(--axe) 20%, var(--carte)); border: 1px solid var(--bord); }
.mini-dactylo i.fait { background: var(--d-fait); border-color: var(--d-fait); }
.mini-dactylo i.ici { background: var(--d-ici); border-color: var(--d-ici); }
.mini-dactylo i.sep { width: 6px; background: none; border: 0; }
/* Élève : exercice */
.vote .dactylo-eleve { max-width: 1050px; margin: 0 auto; }
.exercice-dactylo .barre-exo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .8rem; }
.exercice-dactylo .barre-exo h1 { margin: 0; font-size: 1.4rem; }
.exercice-dactylo .espace { flex: 1; }
.mesures { display: flex; gap: .6rem; flex-wrap: wrap; }
.mesure { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: .3rem .9rem; text-align: center; min-width: 6.5rem; }
.mesure b { display: block; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mesure.vitesse b { font-size: 2rem; color: var(--accent-fort); }
.mesure.erreurs b { color: var(--d-erreur); }
.mesure small { color: var(--encre-2); font-size: .75rem; }
.options-eleve { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin: 0 0 .9rem; }
.zone-texte { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 1.2rem 1.5rem 1rem; box-shadow: var(--ombre); cursor: text; }
/* Pas de cadre au focus : le curseur souligné montre où taper (« Clique dans le texte » s'affiche si le texte perd le clavier). */
.zone-texte:focus, .zone-texte:focus-visible { outline: none; }
/* Trois lignes visibles : le texte défile pour garder la ligne en cours en vue. */
.texte-dactylo { font: 400 calc(2.5rem * var(--zoom-dactylo, 1))/1.9 var(--texte-dactylo); letter-spacing: .05em; max-height: calc(1.9em * var(--lignes-dactylo, 5)); overflow: hidden; position: relative; }
.dyslexie .texte-dactylo { font-family: "OpenDyslexic", var(--texte-dactylo); font-size: calc(2.1rem * var(--zoom-dactylo, 1)); letter-spacing: .03em; }
.texte-dactylo .mot-dactylo { display: inline-block; white-space: pre; }
.texte-dactylo span[data-i] { border-radius: 6px; padding: 0 .03em; }
.texte-dactylo .ok { color: var(--d-fait); }
.texte-dactylo .err { color: var(--d-fait); box-shadow: inset 0 -4px 0 var(--d-erreur); } /* faute dépassée : discrète, pour ne pas gêner la lecture */
.texte-dactylo span[data-i].err:not(.ici) { border-radius: 2px; } /* trait presque droit : l'arrondi des lettres le courberait */
.texte-dactylo .ici { box-shadow: inset 0 -5px 0 var(--focus); background: color-mix(in srgb, var(--focus) 14%, transparent); }
.texte-dactylo .err.ici { background: var(--d-erreur); color: #fff; box-shadow: none; } /* faute en cours : le curseur attend la bonne touche */
.progression-exo progress { width: 100%; height: 6px; margin-top: .6rem; accent-color: var(--accent); }
.resultat-dactylo { text-align: center; }
.resultat-dactylo .grand { font-size: 3rem; line-height: 1; margin: .2rem 0; }
.resultat-dactylo.reussi h1 { color: var(--d-fait); }
.resultat-dactylo.rate h1 { color: var(--d-erreur); }
.rangee-boutons.centre { justify-content: center; }
@media (prefers-reduced-motion: reduce) { button.case-dactylo { transition: none; } button.case-dactylo:hover:not(:disabled) { transform: none; } }
@media (max-width: 720px) { .texte-dactylo { font-size: calc(1.7rem * var(--zoom-dactylo, 1)); } .dyslexie .texte-dactylo { font-size: calc(1.5rem * var(--zoom-dactylo, 1)); } }
.boutons-taille { display: inline-flex; gap: .3rem; }
.boutons-taille .btn { min-width: 2.6rem; justify-content: center; font-weight: 700; }
/* Photo des mains au début d'un exercice : bout des doigts à utiliser cerclé de vert, touche au-dessus. */
.mains-exercice { margin: 0 0 1rem; padding: .6rem 1rem .8rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; text-align: center; }
.mains-exercice svg { width: min(100%, 620px); height: auto; display: block; margin: 0 auto; border-radius: 10px; }
.mains-exercice .anneau-fond { fill: color-mix(in srgb, var(--main-actif) 22%, transparent); stroke: #fff; stroke-width: 18; }
.mains-exercice .anneau { fill: none; stroke: var(--main-actif); stroke-width: 10; }
.mains-exercice .etiquette rect { fill: var(--main-actif); }
.mains-exercice .etiquette text { fill: #fff; font: 700 44px var(--texte-dactylo); }
.mains-exercice figcaption { color: var(--encre-2); font-size: .95rem; margin-top: .3rem; }

/* Aide « Comment faire » (photo des mains) : fenêtre avant l'exercice. */
#dialogue-aide { border: 1px solid var(--bord); border-radius: 16px; padding: 1rem 1.25rem 1.25rem; width: min(680px, calc(100% - 2rem)); background: var(--carte); color: var(--encre); }
#dialogue-aide::backdrop { background: rgb(0 0 0 / 55%); }
#dialogue-prenom { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; max-width: 26rem; width: calc(100% - 2rem); background: var(--carte); color: var(--encre); }
#dialogue-prenom::backdrop { background: rgb(0 0 0 / 55%); }
#dialogue-prenom h2 { margin-top: 0; }
.exercice-dactylo.en-pause .texte-dactylo { visibility: hidden; }
#dialogue-pause { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; max-width: 26rem; width: calc(100% - 2rem); background: var(--carte); color: var(--encre); text-align: center; }
#dialogue-pause::backdrop { background: rgb(0 0 0 / 55%); }
#dialogue-pause h2 { margin-top: 0; }
#dialogue-aide h2 { margin: 0 0 .5rem; }
#dialogue-aide .mains-exercice { border: 0; padding: 0; margin: 0 0 .8rem; }
#dialogue-aide .btn.principal { min-width: 9rem; justify-content: center; }

/* Dactylographie : devoirs (points verts / rouges, un par essai de la période). */
/* 5 points par ligne, puis la ligne suivante. */
.points-devoir { display: inline-grid; grid-template-columns: repeat(5, 7px); gap: 3px; justify-content: center; vertical-align: middle; }
.points-devoir i { width: 7px; height: 7px; border-radius: 50%; }
.points-devoir i.vert { background: var(--d-fait); }
.points-devoir i.rouge { background: var(--d-erreur); }
.devoir-case { display: grid; justify-items: center; gap: .15rem; margin-top: .2rem; }
.compte-devoir { font-size: .75rem; font-weight: 700; color: var(--encre-2); }
.devoir-case.fait .compte-devoir { color: var(--d-fait); }
.devoir-eleve { border-left: 6px solid var(--d-ici); }
.devoir-eleve.fait { border-left-color: var(--d-fait); }
.devoir-eleve h2 { margin: 0 0 .3rem; }
.devoir-eleve p { margin: .2rem 0; }
.liste-devoirs li { justify-content: space-between; align-items: center; }
.liste-devoirs form { margin: 0; }
.nouveau-devoir { margin-top: .8rem; }
.nouveau-devoir > summary { list-style: none; display: inline-flex; cursor: pointer; }
.nouveau-devoir > summary::-webkit-details-marker { display: none; }
.form-devoir { display: grid; gap: .8rem; margin-top: .8rem; }
.ligne-devoir { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.ligne-devoir input[name="nom"] { width: 14rem; }
.choix-exercices { border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .9rem .8rem; margin: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.choix-exercices legend { font-weight: 700; padding: 0 .25rem; }
.etape-devoir { display: grid; gap: .3rem; align-content: start; }
.exercices-etape { display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding-left: 1.6rem; }
.exercices-etape label, .tout-etape { display: inline-flex; gap: .3rem; align-items: center; }
.tableau-devoir th, .tableau-devoir td { text-align: center; }
/* Noms des exercices tels quels (« jf », pas « JF »). */
.tableau-devoir th { text-transform: none; font-size: .95rem; letter-spacing: 0; }
.tableau-devoir th:first-child, .tableau-devoir td:first-child { text-align: left; }
.tableau-devoir td.case-faite { background: color-mix(in srgb, var(--d-fait) 12%, transparent); }
/* Journal de l'élève : date et activité à gauche, mesures centrées. */
.tableau-journal th:nth-child(2), .tableau-journal td:nth-child(2) { text-align: left; }
.tableau-journal td:first-child { white-space: nowrap; }
.temps-journal { margin: .25rem 0 .5rem; font-size: 1.05rem; }

/* Étapes ajoutées par l'enseignant. */
.ajout-etape { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--bord); }
.supprimer-etape { margin: 0 0 0 auto; }

/* Dactylographie : sessions d'examen. */
.form-session { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.choix-temps-session { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.choix-temps-session label { display: inline-flex; gap: .35rem; align-items: center; }
.session-en-cours { padding: .7rem .9rem; border-radius: 10px; background: color-mix(in srgb, var(--d-ici) 12%, var(--carte)); }
.session-en-cours p { margin: 0 0 .4rem; }
.session-eleve { border-left: 6px solid var(--d-fait); }
.session-eleve.en-cours { border-left-color: var(--d-ici); }
.session-eleve h2 { margin: 0 0 .3rem; }
.mesure.session b { color: var(--d-ici); }

/* ---------- Jeu « Défense lunaire » (maquette : apps/matrice/maquette-jeu-dactylo) ---------- */
.jeu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.btn.jouer { background: linear-gradient(135deg, #3b2a8f, #1b6fa8); border: 0; color: #fff; padding: .6rem 1.1rem; font-size: 1.02rem; }
.btn.jouer:hover { filter: brightness(1.12); }
.icone-fusee { width: 26px; height: 26px; flex: none; }
.choix-jeu { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; margin-top: .6rem; }
@media (max-width: 760px) { .choix-jeu { grid-template-columns: 1fr; } }
.etapes-jeu { display: grid; gap: .6rem; margin-bottom: 1rem; }
.etape-jeu { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 2px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.etape-jeu[aria-pressed="true"] { border-color: var(--d-ici); background: color-mix(in srgb, var(--d-ici) 10%, var(--carte)); }
.etape-jeu small { display: block; color: var(--encre-2); }
.lettres-jeu { font-family: var(--texte-dactylo); font-weight: 700; letter-spacing: .06em; }
.record-jeu { font-size: .85rem; color: var(--encre-2); text-align: right; }
.planete-jeu { width: 42px; height: 42px; }
.classement-jeu { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; }
.classement-jeu li { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .5rem; padding: .35rem .6rem; border-radius: 8px; font-variant-numeric: tabular-nums; }
.classement-jeu li:nth-child(odd) { background: color-mix(in srgb, var(--encre) 4%, transparent); }
.classement-jeu li.moi { outline: 2px solid var(--d-ici); background: color-mix(in srgb, var(--d-ici) 12%, var(--carte)); font-weight: 700; }
.classement-jeu li.separateur { display: block; text-align: center; color: var(--encre-2); background: none; padding: 0; }
.classement-jeu .rang { font-weight: 700; text-align: center; }
.medaille-jeu { width: 26px; height: 26px; vertical-align: middle; }
.cadre-jeu { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgb(10 10 40 / 35%); }
.scene-jeu { position: relative; overflow: hidden; background: #070b1f; aspect-ratio: 16 / 9; max-height: 72vh; user-select: none; }
.scene-jeu canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voile-jeu { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(5 6 20 / 55%); backdrop-filter: blur(2px); color: #fff; text-align: center; }
.voile-jeu[hidden] { display: none; }
.panneau-jeu { display: grid; gap: .8rem; justify-items: center; padding: 1.4rem 1.8rem; max-width: 30rem; }
.panneau-jeu h2 { font: 700 2rem var(--texte-dactylo); margin: 0; }
.panneau-jeu p { margin: 0; opacity: .92; }
.panneau-jeu kbd { font: 700 .9rem var(--texte-dactylo); padding: .1rem .45rem; border: 1px solid rgb(255 255 255 / 50%); border-radius: 6px; }
.bandeau-vague { position: absolute; left: 0; right: 0; top: 38%; text-align: center; color: #fff; font: 700 2.4rem var(--texte-dactylo); letter-spacing: .06em; text-shadow: 0 0 18px #5ff2ff; pointer-events: none; opacity: 0; transition: opacity .4s; }
.bandeau-vague.visible { opacity: 1; }
.barre-jeu { display: flex; flex-wrap: wrap; align-items: stretch; background: linear-gradient(#141a33, #0b1024); border-top: 2px solid #2a3566; color: #fff; font: 700 1.1rem var(--texte-dactylo); }
.barre-jeu > div { padding: .45rem .9rem; display: grid; align-content: center; border-right: 1px solid #222b52; }
.barre-jeu small { display: block; font-size: .66rem; font-weight: 400; color: #9fb0d8; text-transform: uppercase; letter-spacing: .1em; }
.chiffre-jeu { font-variant-numeric: tabular-nums; }
.serie-jeu { color: #7dffa8; }
.vies-jeu { display: flex; gap: .3rem; }
.vies-jeu svg { width: 22px; height: 24px; }
.vies-jeu svg.perdue { opacity: .25; }
.mot-en-cours { flex: 1 1 12rem; border-right: 0 !important; background: rgb(255 255 255 / 4%); }
.mot-en-cours .frappe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.5rem; letter-spacing: .04em; min-height: 1.9rem; }
.mot-en-cours .ok { color: #7dffa8; }
.mot-en-cours .reste, .mot-en-cours .vide { color: #8a95bd; }
.mot-en-cours .vide { font-size: .95rem; font-weight: 400; }
.mot-en-cours .frappe.faute { animation: secoue-jeu .22s; }
.mot-en-cours .curseur { display: inline-block; width: 2px; height: 1.3rem; background: #ffd34d; vertical-align: -3px; animation: clignote-jeu 1s steps(1) infinite; }
@keyframes clignote-jeu { 50% { opacity: 0; } }
@keyframes secoue-jeu { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 640px) { .barre-jeu { flex-wrap: wrap; } .mot-en-cours { flex-basis: 100%; order: -1; border-bottom: 1px solid #222b52; } }
@media (prefers-reduced-motion: reduce) { .mot-en-cours .frappe.faute, .mot-en-cours .curseur { animation: none; } .bandeau-vague { transition: none; } }
.partie-jeu .sous-scene { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.fin-jeu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 760px) { .fin-jeu { grid-template-columns: 1fr; } }
.score-final { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 1.2rem; border-radius: 14px; background: linear-gradient(160deg, #141036, #1d3a66); color: #fff; }
.score-final .grand { font: 700 3rem/1 var(--texte-dactylo); }
.score-final .record-battu { color: #ffcf4a; font-weight: 700; }
.score-final .trophee { width: 90px; height: 90px; }
.mesures-jeu { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin-top: .4rem; }
.mesures-jeu div { display: grid; }
.mesures-jeu b { font-size: 1.3rem; }
.mesures-jeu small { opacity: .8; }
.actions-jeu { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: .6rem 0 0; }
.niveaux-jeu { border: 1px solid var(--bord); border-radius: 10px; padding: .5rem .9rem .7rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.niveaux-jeu legend { font-weight: 700; padding: 0 .3rem; }
.niveaux-jeu label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.niveaux-jeu small { color: var(--encre-2); }
.sante-jeu { display: block; width: 6.5rem; height: .8rem; margin-top: .3rem; border-radius: 999px; background: #222b52; border: 1px solid #3a4677; overflow: hidden; }
.sante-jeu i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fd47a, #8ff0b0); transition: width .3s; }
.sante-jeu.sante-3 i { width: 75%; background: linear-gradient(90deg, #9fd43f, #d6f08f); }
.sante-jeu.sante-2 i { width: 50%; background: linear-gradient(90deg, #f0b43f, #ffd98a); }
.sante-jeu.sante-1 i { width: 25%; background: linear-gradient(90deg, #f0573f, #ff9a8a); }
.sante-jeu.sante-0 i { width: 0; }
.voile-vie h2 { color: #ff8a8a; }
.compte-vie { font: 700 3rem/1 var(--texte-dactylo); color: #ffd34d; }
@media (prefers-reduced-motion: reduce) { .sante-jeu i { transition: none; } }
.lettres-jeu .plus-vues { font-family: inherit; font-weight: 400; letter-spacing: 0; color: var(--encre-2); }
.notes-tentative { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: .8rem 0; }
.notes-tentative > div { display: grid; justify-items: center; gap: .2rem; min-width: 11rem; padding: .7rem 1rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); }
.notes-tentative > div.meilleure { border-color: var(--d-fait); background: color-mix(in srgb, var(--d-fait) 10%, var(--carte)); }
.notes-tentative .note-examen { font-size: 2rem; line-height: 1.1; }
.notes-tentative small { color: var(--encre-2); }
.baremes-examens { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: flex-start; }
.baremes-examens details { flex-basis: 100%; }
.baremes-examens details:not([open]) { flex-basis: auto; }
.baremes-examens summary { list-style: none; display: inline-flex; }
.baremes-examens summary::-webkit-details-marker { display: none; }
.bareme-examen { margin-top: .6rem; }
.tableaux-bareme { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem; }
.tableau-bareme { border-collapse: collapse; min-width: 13rem; font-variant-numeric: tabular-nums; }
.tableau-bareme caption { text-align: left; font-weight: 700; padding-bottom: .3rem; }
.tableau-bareme th, .tableau-bareme td { border: 1px solid var(--bord); padding: .3rem .7rem; text-align: center; }
.tableau-bareme th { background: color-mix(in srgb, var(--encre) 6%, var(--carte)); font-size: .85rem; }
.tableau-bareme td.bonus { color: var(--d-fait); font-weight: 700; }
.tableau-bareme td.malus { color: var(--d-erreur); font-weight: 700; }
.dialogue-bareme { max-width: min(40rem, calc(100vw - 2rem)); border: 1px solid var(--bord); border-radius: 14px; background: var(--carte); color: var(--encre); padding: 1.2rem 1.4rem; }
.dialogue-bareme::backdrop { background: rgb(0 0 0 / 45%); }
.dialogue-bareme h2 { margin-top: 0; }
/* ---------- Choix du jeu ; « Sauvetage en mer » (maquette : apps/matrice/maquette-jeu-sauvetage) ---------- */
.jeux-dactylo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: .8rem; }
.carte-jeu-dactylo { display: grid; gap: .5rem; padding: 0; overflow: hidden; border: 2px solid var(--bord); border-radius: 14px; background: var(--carte); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.carte-jeu-dactylo:hover, .carte-jeu-dactylo:focus-visible { border-color: var(--d-ici); }
.carte-jeu-dactylo svg { width: 100%; height: auto; display: block; }
.carte-jeu-dactylo .texte { display: grid; gap: .2rem; padding: 0 1rem 1rem; }
.carte-jeu-dactylo b { font-size: 1.15rem; }
.jeu-mer .scene-jeu { background: #8fd3f4; }
.jeu-mer .voile-jeu { background: rgb(4 40 60 / 45%); }
.jeu-mer .panneau-jeu { background: rgb(4 40 60 / 55%); border-radius: 16px; }
.jeu-mer .bandeau-vague { text-shadow: 0 2px 12px rgb(0 60 90 / 70%); }
.jeu-mer .barre-jeu { background: linear-gradient(#0d4a66, #083348); border-top-color: #1c7aa0; }
.jeu-mer .barre-jeu > div { border-right-color: #14607f; }
.jeu-mer .barre-jeu small { color: #a7dcef; }
.jeu-mer .sante-jeu { background: #0a3a52; border-color: #1c7aa0; }
.jeu-mer .mot-en-cours .frappe { letter-spacing: .3em; }
.jeu-mer .mot-en-cours .ok { color: #ffe27a; }
.jeu-mer .mot-en-cours .vide { color: #a7dcef; letter-spacing: 0; }
.score-final.score-mer { background: linear-gradient(160deg, #0b6e94, #2cc6c9); }
.defile-bareme { overflow-x: auto; max-width: 100%; }
.grille-bareme { min-width: 0; }
.grille-bareme th, .grille-bareme td { padding: .3rem .45rem; white-space: nowrap; }
.grille-bareme tbody th { background: color-mix(in srgb, var(--encre) 6%, var(--carte)); font-size: .85rem; }
.grille-bareme td.suffisante { background: color-mix(in srgb, var(--d-fait) 22%, var(--carte)); }
.grille-bareme td.insuffisante { background: color-mix(in srgb, var(--d-erreur) 18%, var(--carte)); }
.dialogue-bareme { max-width: min(54rem, calc(100vw - 2rem)); }

/* ---------- Accueil en explorateur : dossiers imbriqués, mots-clés, glisser-déposer (maquette-classement) ---------- */
:root {
  --k-dossier: #c98500; --k-depot: #e3f1e8; --k-depot-bord: #2f855a; --k-refus: #fdecea; --k-refus-bord: #b42318;
  --k-auto: #eef0f2; --k-auto-bord: #9aa5b1;
}
@media (prefers-color-scheme: dark) {
  :root { --k-dossier: #e0a526; --k-depot: #1d3326; --k-depot-bord: #4cb87c; --k-refus: #3a1b19; --k-refus-bord: #f28b82; --k-auto: #222a26; --k-auto-bord: #5b6862; }
}
.classement { padding: 1rem; }
.classement .explorateur { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1rem; align-items: start; }
.classement .cote { border-right: 1px solid var(--bord); padding-right: .75rem; position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow: auto; }
.classement .cote-titre { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); margin: 1rem .3rem .35rem; }
.classement .cote-titre:first-child { margin-top: 0; }
.classement .cote ul { list-style: none; margin: 0; padding: 0; }
.btn.discret { border-color: transparent; background: transparent; }
.btn.discret:hover { border-color: var(--bord); }

.classement .ligne-arbre { display: flex; align-items: center; border-radius: 8px; border: 2px solid transparent; }
.classement .ligne-arbre:hover { background: var(--fond); }
.classement .ligne-arbre.actif { background: var(--accent-doux); }
.classement .ligne-arbre.actif .nom { font-weight: 700; color: var(--accent-fort); }
.classement .niv-1 { padding-left: 16px; } .classement .niv-2 { padding-left: 32px; } .classement .niv-3 { padding-left: 48px; }
.classement .niv-4 { padding-left: 64px; } .classement .niv-5 { padding-left: 80px; }
.classement .chevron { width: 24px; height: 30px; flex: none; border: 0; background: none; color: var(--encre-2); cursor: pointer; font-size: .8rem; border-radius: 6px; padding: 0; }
.classement .chevron[aria-expanded="true"] { transform: rotate(90deg); }
.classement .nom { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; color: var(--encre); text-decoration: none; font-size: .93rem; padding: .35rem .3rem; border-radius: 6px; }
.classement .nom .icone-dossier { width: 20px; height: 20px; color: var(--k-dossier); opacity: 1; }
.classement .nom .icone-maison { color: var(--encre-2); }
.classement .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classement .nb { margin-left: auto; color: var(--encre-2); font-size: .78rem; font-variant-numeric: tabular-nums; }
.classement .point, #dlg-classement .point { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.mc-c0 { background: var(--s0); } .mc-c1 { background: var(--s1); } .mc-c2 { background: var(--s2); } .mc-c3 { background: var(--s3); }
.mc-c4 { background: var(--s4); } .mc-c5 { background: var(--s5); } .mc-c6 { background: var(--s6); } .mc-c7 { background: var(--s7); }

.classement .puce { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte); font-size: .8rem; color: var(--encre); white-space: nowrap; text-decoration: none; }
.classement .puce.auto { background: var(--k-auto); border-style: dashed; border-color: var(--k-auto-bord); }
.classement .puce.auto.actif { background: var(--accent-doux); border-style: solid; border-color: var(--accent); color: var(--accent-fort); font-weight: 700; }
.classement .puce.filtre { background: var(--accent-doux); border-color: var(--accent); font-weight: 600; }
.classement .puce.filtre a { color: inherit; text-decoration: none; font-size: 1.05rem; line-height: 1; padding: 0 .1rem; }

.classement .haut { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .75rem; }
.classement .fil-ariane { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; flex: 1 1 260px; font-size: 1.05rem; }
.classement .fil-ariane li { display: flex; align-items: center; border: 2px solid transparent; border-radius: 8px; padding: .1rem .3rem; }
.classement .fil-ariane li + li::before { content: "›"; color: var(--encre-2); margin-right: .45rem; }
.classement .fil-ariane [aria-current] { font-weight: 700; }
.classement .form-recherche, .classement .form-tri { display: flex; gap: .4rem; align-items: center; margin: 0; }
.classement .recherche { min-height: 40px; width: 15rem; max-width: 100%; }
.classement .form-tri select { min-height: 40px; width: auto; }
.js .classement .form-recherche .btn { display: none; }
.classement .nouveau-dossier { flex-basis: 100%; }
.classement .nouveau-dossier summary { display: inline-flex; list-style: none; }
.classement .nouveau-dossier[open] summary { margin-bottom: .5rem; }

.classement .filtres-actifs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: 10px; margin-bottom: .8rem; font-size: .9rem; }
.classement .et { color: var(--encre-2); font-size: .78rem; font-weight: 700; }
.classement .zone-titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); margin: .6rem 0 .5rem; }
.classement .cartes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.classement .entree { position: relative; background: var(--carte); border: 2px solid var(--bord); border-radius: 12px; padding: .8rem .85rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.js .classement .entree, .js .classement [data-kind="dossier"] { cursor: grab; }
.classement .entree:hover { border-color: var(--accent); }
.classement .entree.choisie { border-color: var(--accent); background: var(--accent-doux); }
.classement .glisse { opacity: .4; }
.classement .entree-type { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; color: var(--encre-2); font-weight: 600; padding-right: 4.2rem; }
.classement .entree-type .icone.petite { width: 22px; height: 22px; }
.classement .entree h3 { margin: 0; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.classement .entree h3 a { color: var(--encre); text-decoration: none; }
.classement .entree h3 a:hover { text-decoration: underline; }
.classement .entree .meta, .classement .entree-chemin { margin: 0; font-size: .8rem; color: var(--encre-2); }
.classement .entree-chemin { display: flex; align-items: center; gap: .3rem; }
.classement .entree-chemin .icone-dossier { width: 14px; height: 14px; color: var(--k-dossier); }
.classement .mcs { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 0; padding: 0; }
.classement .coche { position: absolute; top: .75rem; right: 2.9rem; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); opacity: .4; cursor: pointer; }
.classement .entree:hover .coche, .classement .coche:checked, .classement .coche:focus-visible { opacity: 1; }
.classement .entree > .menu-plus { position: absolute; top: .45rem; right: .4rem; }
.classement .vide-etat { text-align: center; color: var(--encre-2); padding: 2.5rem 1rem; border: 2px dashed var(--bord); border-radius: 12px; margin: 0; }
.classement .depot-ok { background: var(--k-depot) !important; border-color: var(--k-depot-bord) !important; border-style: dashed !important; }
.classement .depot-non { background: var(--k-refus) !important; border-color: var(--k-refus-bord) !important; border-style: dashed !important; }

/* Menus « ⋯ » : une balise details, qui s'ouvre aussi sans JavaScript. */
.menu-plus { position: relative; }
.menu-plus > summary { list-style: none; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.classement .ligne-arbre .menu-plus, .classement .mc-puce .menu-plus { opacity: 0; }
.classement .ligne-arbre:hover .menu-plus, .classement .mc-puce:hover .menu-plus, .classement .menu-plus[open], .classement .menu-plus:focus-within { opacity: 1; }
.menu-panneau { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; display: grid; gap: .1rem; padding: .3rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / 18%); }
.menu-panneau > button, .menu-panneau form > button:not(.btn) { width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: .93rem; color: var(--encre); padding: .5rem .7rem; border-radius: 6px; cursor: pointer; }
.menu-panneau > button:hover, .menu-panneau form > button:not(.btn):hover { background: var(--fond); }
.menu-panneau form { margin: 0; }
.menu-panneau .form-ligne { padding: .3rem .4rem; }
.menu-panneau .form-ligne select, .menu-panneau .form-ligne input { flex: 1 1 140px; min-height: 36px; max-width: 100%; }
.menu-panneau .rouge { color: var(--danger); }

/* Barre de sélection, dialogue, message « Annuler », étiquette sous le pointeur pendant un glisser. */
.classement .barre-sel { position: sticky; bottom: 12px; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; background: var(--encre); color: var(--carte); border-radius: 12px; box-shadow: 0 6px 24px rgb(0 0 0 / 25%); z-index: 5; }
.classement .barre-sel strong { margin-right: auto; }
.classement .barre-sel .btn { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--carte) 40%, transparent); }
#dlg-classement { border: 1px solid var(--bord); border-radius: 14px; padding: 0; width: min(30rem, calc(100vw - 2rem)); background: var(--carte); color: var(--encre); }
#dlg-classement::backdrop { background: rgb(0 0 0 / 40%); }
#dlg-classement form { margin: 0; }
#dlg-classement .dlg-corps { padding: 1.1rem 1.2rem; max-height: 60vh; overflow: auto; }
#dlg-classement .dlg-pied { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.2rem; border-top: 1px solid var(--bord); }
#dlg-classement .dlg-corps > label { display: block; font-weight: 600; margin-bottom: .3rem; }
#dlg-classement .champ-dialogue { width: 100%; min-height: 40px; }
#dlg-classement .erreur-dialogue { color: var(--danger); margin: .5rem 0 0; }
#dlg-classement .erreur-dialogue:empty { display: none; }
#dlg-classement .choix-dossier { list-style: none; margin: 0; padding: 0; }
#dlg-classement .choix-dossier label, #dlg-classement .choix-mc label { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; border-radius: 8px; cursor: pointer; }
#dlg-classement .choix-dossier label:hover, #dlg-classement .choix-mc label:hover { background: var(--fond); }
#dlg-classement .choix-dossier .niv-1 { padding-left: 1.5rem; } #dlg-classement .choix-dossier .niv-2 { padding-left: 2.6rem; }
#dlg-classement .choix-dossier .niv-3 { padding-left: 3.7rem; } #dlg-classement .choix-dossier .niv-4 { padding-left: 4.8rem; }
#dlg-classement .choix-dossier .niv-5 { padding-left: 5.9rem; }
#dlg-classement input:disabled ~ span { opacity: .45; }
#dlg-classement .ligne-nouveau-mc { display: flex; gap: .5rem; margin-top: .75rem; }
.classement .toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: .8rem; align-items: center; background: var(--encre); color: var(--carte); padding: .6rem .6rem .6rem 1rem; border-radius: 10px; box-shadow: 0 6px 24px rgb(0 0 0 / 25%); z-index: 30; max-width: calc(100vw - 32px); }
.classement .toast button { border: 1px solid color-mix(in srgb, var(--carte) 45%, transparent); background: none; color: inherit; font: inherit; font-weight: 700; padding: .25rem .6rem; border-radius: 8px; cursor: pointer; }
.classement .fantome { position: fixed; top: -100px; left: -100px; padding: .35rem .7rem; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-weight: 700; font-size: .85rem; }
.classement .btn-tiroir { display: none; }

/* Nouveau dossier (arbre) : dossier vert avec un « + » blanc au centre. */
.btn-ajout-dossier { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.btn-ajout-dossier:hover { background: var(--accent-doux); }
.icone-nouveau-dossier { width: 30px; height: 30px; }
.icone-nouveau-dossier .corps { fill: var(--accent); }
.btn-ajout-dossier:hover .corps { fill: var(--accent-fort); }
.icone-nouveau-dossier .plus { fill: none; stroke: var(--sur-accent); stroke-width: 2.2; stroke-linecap: round; }

/* Nouvel outil (barre du haut) : icône de la matrice et petite étoile en haut à droite. */
.btn-ajout-outil { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--accent); border-radius: 12px;
  background: var(--carte); cursor: pointer; list-style: none; box-shadow: 0 1px 4px rgb(0 0 0 / 15%); }
.btn-ajout-outil::-webkit-details-marker { display: none; }
.btn-ajout-outil:hover, .ajout-outil[open] .btn-ajout-outil { background: var(--accent-doux); }
.btn-ajout-outil .icone { width: 30px; height: 30px; }
.btn-ajout-outil .etoile { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; fill: var(--s2); stroke: var(--carte); stroke-width: 1.5; stroke-linejoin: round; }

/* Accueil : barre du haut fixe, avec le « + » qui remplace la tuile des outils quand elle a défilé. */
body[data-page="accueil"] .barre { position: sticky; top: 0; z-index: 15; align-items: center; }
body[data-page="accueil"] .classement .cote { top: 4.5rem; max-height: calc(100vh - 5rem); }
.ajout-outil { position: relative; margin-left: auto; }
body.tuile-visible .ajout-outil { display: none; }
.ajout-panneau { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(24rem, calc(100vw - 32px)); max-height: 75vh; overflow: auto;
  padding: .75rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 8px 28px rgb(0 0 0 / 22%); }
.ajout-titre { margin: 0 0 .25rem; font-weight: 700; }
.ajout-groupe { margin: .6rem 0 .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.ajout-panneau ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .2rem; }
.ajout-panneau a { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: .9rem; }
.ajout-panneau a:hover, .ajout-panneau a:focus-visible { background: var(--accent-doux); }
.ajout-panneau .icone.petite { width: 26px; height: 26px; flex: none; }

/* Mots-clés en ligne au-dessus des cartes : clic = filtre, dépôt d'un outil = mot-clé ajouté. */
.classement .barre-mc { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.classement .barre-mc-titre { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); margin-right: .2rem; }
.classement .barre-mc ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.classement .mc-puce { display: inline-flex; align-items: center; border: 2px solid var(--bord); border-radius: 999px; background: var(--carte); }
.classement .mc-puce > a { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .3rem .2rem .65rem; color: var(--encre); text-decoration: none; font-size: .88rem; }
.classement .mc-puce .nb { margin-left: .15rem; }
.classement .mc-puce:hover { border-color: var(--accent); }
.classement .mc-puce.actif { background: var(--accent-doux); border-color: var(--accent); }
.classement .mc-puce.actif > a { font-weight: 700; color: var(--accent-fort); }
.classement .mc-puce .menu-plus summary { min-height: 26px; padding: 0 .35rem; }
.classement .barre-autos { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.classement .barre-autos ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.classement .barre-types { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.classement .barre-types ul { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.classement .type-filtre { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--bord); border-radius: 10px; background: var(--carte); }
.classement .type-filtre:hover { border-color: var(--accent); }
.classement .type-filtre.actif { border-color: var(--accent); background: var(--accent-doux); box-shadow: 0 0 0 2px var(--accent-doux); }
.classement .type-filtre .icone.petite { width: 26px; height: 26px; }
/* Type pas encore utilisé : visible mais grisé, rien à cliquer. */
.classement .type-filtre.vide { border-style: dashed; cursor: default; }
.classement .type-filtre.vide .icone { filter: grayscale(1); opacity: .4; }
.classement .type-filtre.vide:hover { border-color: var(--bord); }
.classement .btn-mot-cle { border-style: dashed; border-color: var(--accent); color: var(--accent-fort); border-radius: 999px; }

/* Téléphone : l'arbre devient un tiroir ; on range avec les cases et « Déplacer vers… ». */
@media (max-width: 760px) {
  .classement .explorateur { grid-template-columns: 1fr; }
  .classement .cote { position: static; max-height: none; border-right: 0; padding-right: 0; }
  .js .classement .cote { display: none; border-bottom: 1px solid var(--bord); padding-bottom: .75rem; }
  .js .classement .cote.ouvert { display: block; }
  .js .classement .btn-tiroir { display: inline-flex; }
  .classement .form-recherche { flex: 1 1 100%; }
  .classement .recherche { width: 100%; }
  .classement .coche, .classement .ligne-arbre .menu-plus, .classement .mc-puce .menu-plus { opacity: 1; }
}

/* Cartes-vote : vidéo du téléphone avec les cadres des cartes lues par-dessus. */
.scan-video { position: relative; width: 100%; background: #000; border-radius: var(--radius, 8px); overflow: hidden; }
.scan-video video, .scan-video canvas { display: block; width: 100%; height: auto; }
.scan-video canvas { position: absolute; inset: 0; height: 100%; pointer-events: none; }
.essai-lues { columns: 3 8rem; padding-left: 1.5rem; }

/* Cartes-vote : cartes à imprimer, une par page A4. Lettres tournées : chacune se lit droite quand son bord est en haut. */
.carte-imprimee { position: relative; width: 190mm; height: 270mm; margin: 0 auto 1rem; display: grid; place-items: center;
  background: #fff; color: #000; border: 1px dashed #999; break-after: page; page-break-after: always; }
.carte-motif svg { display: block; }
.carte-lettre { position: absolute; font: 700 14mm/1 system-ui, sans-serif; }
.carte-lettre-a { top: 5mm; left: 50%; transform: translateX(-50%); }
.carte-lettre-b { right: 5mm; top: 50%; transform: translateY(-50%) rotate(90deg); }
.carte-lettre-c { bottom: 5mm; left: 50%; transform: translateX(-50%) rotate(180deg); }
.carte-lettre-d { left: 5mm; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.carte-numero { position: absolute; top: 8mm; left: 8mm; font: 400 5mm/1 system-ui, sans-serif; color: #444; }
@media print {
  .pas-imprime { display: none; }
  .carte-imprimee { border: 0; margin: 0; }
  @page { size: A4 portrait; margin: 10mm; }
}

/* Cartes-vote (maquette validée : maquette-cartes/index.html). Lettres A–D aux couleurs de la palette. */
.cv-l0 { background: var(--s0); color: var(--t0); } .cv-l1 { background: var(--s1); color: var(--t1); }
.cv-l2 { background: var(--s2); color: var(--t2); } .cv-l3 { background: var(--s3); color: var(--t3); }
.lettre.petite { display: inline-grid; width: 1.6rem; height: 1.6rem; vertical-align: middle; }
.grille-cartes-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; align-items: start; margin-bottom: .75rem; }
/* Un fieldset garde par défaut la largeur de son contenu : le long menu des classes débordait sur la case voisine. */
.grille-cartes-reglages > fieldset { min-width: 0; }
.grille-cartes-reglages select { width: 100%; max-width: 100%; }
.grille-cartes-reglages fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0; }
.grille-cartes-reglages legend { font-weight: 700; padding: 0 .25rem; }
.grille-cartes-reglages .choix { display: flex; gap: .5rem 1rem; flex-wrap: wrap; }
.grille-cartes-reglages .choix label { display: inline-flex; gap: .35rem; align-items: center; }
.interrupteur { display: flex; align-items: center; gap: .6rem; margin: .35rem 0; font-weight: 600; }
.interrupteur input { appearance: none; width: 2.4rem; height: 1.35rem; border-radius: 999px; background: var(--axe); position: relative; cursor: pointer; flex: none; margin: 0; }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.35rem - 6px); height: calc(1.35rem - 6px); border-radius: 50%; background: #fff; transition: left .15s; }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { left: calc(2.4rem - 1.35rem + 3px); }
.reponses-cartes .reponse-ligne { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.reponses-cartes .lettre { width: 2.2rem; height: 2.2rem; font-size: 1rem; font-weight: 800; }
.reponse-ligne .bonne { display: inline-flex; gap: .3rem; align-items: center; font-size: .88rem; color: var(--encre-2); white-space: nowrap; }
.ligne-champs { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.entete-cartes { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
.qr-cartes { background: #fff; border-radius: 8px; padding: 6px; border: 1px solid var(--bord); }
.entete-cartes .ligne-titre { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entete-cartes h1 { margin: 0; }
.question-texte { font-size: 1.2rem; font-weight: 600; margin: .25rem 0 .5rem; }
.image-question { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; margin: .25rem 0 .75rem; }
.telephone { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .9rem; border-radius: 10px; background: var(--fond); }
.telephone .espace, .pied-diapo .espace, .ligne-diapo .espace { flex: 1; }
.compteur-cartes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .4rem; }
.compteur-cartes b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.manquants { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.manquants span { padding: .1rem .55rem; border-radius: 999px; background: var(--vide); color: var(--encre-2); font-size: .88rem; font-weight: 600; }
.barres-cartes { display: grid; gap: .55rem; }
.barre-carte { display: grid; grid-template-columns: 2.2rem 1fr 3rem; gap: .6rem; align-items: center; }
.barre-carte .lettre { width: 2.2rem; height: 2.2rem; font-size: 1rem; font-weight: 800; }
.barre-carte .fond-barre { height: 2.2rem; border-radius: 8px; background: var(--vide); overflow: hidden; position: relative; display: block; }
.barre-carte .remplie { display: block; height: 100%; border-radius: 8px; }
.barre-carte .libelle { position: absolute; inset: 0 auto 0 .7rem; display: flex; align-items: center; font-weight: 600; color: var(--encre); }
.barre-carte.bonne .fond-barre { outline: 3px solid var(--accent); outline-offset: 2px; }
.barre-carte .n { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.barre-carte .w0 { width: 0%; } .barre-carte .w5 { width: 5%; } .barre-carte .w10 { width: 10%; } .barre-carte .w15 { width: 15%; } .barre-carte .w20 { width: 20%; } .barre-carte .w25 { width: 25%; } .barre-carte .w30 { width: 30%; } .barre-carte .w35 { width: 35%; } .barre-carte .w40 { width: 40%; } .barre-carte .w45 { width: 45%; } .barre-carte .w50 { width: 50%; } .barre-carte .w55 { width: 55%; } .barre-carte .w60 { width: 60%; } .barre-carte .w65 { width: 65%; } .barre-carte .w70 { width: 70%; } .barre-carte .w75 { width: 75%; } .barre-carte .w80 { width: 80%; } .barre-carte .w85 { width: 85%; } .barre-carte .w90 { width: 90%; } .barre-carte .w95 { width: 95%; } .barre-carte .w100 { width: 100%; }
.resultats-masques { padding: 2rem 1rem; text-align: center; border: 2px dashed var(--bord); border-radius: 14px; color: var(--encre-2); }
.juste { color: var(--accent-fort); font-weight: 700; }
.faux { color: var(--danger); font-weight: 700; }
.sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.integration-vues code { word-break: break-all; }
.liste-cartes { max-width: 190mm; margin: 0 auto; background: #fff; color: #000; padding: 1rem; }
/* Vues PowerPoint : la diapo occupe toute la fenêtre du complément. */
.diapo-cartes { min-height: 100vh; display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.5rem; }
.diapo-cartes.qr-vue { align-items: center; justify-content: center; text-align: center; }
.qr-diapo { width: min(65vh, 90vw); height: auto; background: #fff; border-radius: 8px; padding: 8px; }
.diapo-cartes .question-texte { font-size: clamp(1.2rem, 3.5vh, 2rem); }
.diapo-cartes .barres-cartes { flex: 1; align-content: center; }
.ligne-diapo, .pied-diapo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pied-diapo .actions { display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 640px) { .entete-cartes { grid-template-columns: 1fr; } .reponses-cartes .reponse-ligne { grid-template-columns: 2.2rem 1fr; } .reponse-ligne .bonne { grid-column: 2; } }

/* Scanner Cartes-vote (téléphone de l'enseignant). */
.scanner { display: flex; flex-direction: column; gap: .7rem; min-height: calc(100dvh - 5rem); }
.scanner .barre-scan { display: flex; align-items: center; gap: .5rem; }
.scanner .barre-scan b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.scanner .attente-envoi { font-size: .82rem; color: var(--encre-2); }
.scanner .scan-video { flex: 1; min-height: 50vh; }
.scanner .scan-video video { height: 100%; object-fit: cover; }
.btn.plein { width: 100%; justify-content: center; padding: .8rem 1.2rem; font-size: 1.1rem; }

.tableau { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau th { text-align: left; font-size: .8rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); }
.tableau td { padding: .5rem .6rem; border-bottom: 1px solid var(--bord); }
.tableau-classe input[type=number] { width: 4.5rem; }
.tableau-classe input { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: .35rem .5rem; width: 100%; }
.tableau-classe td:first-child { width: 7rem; } .tableau-classe td:last-child { width: 5rem; }

/* ---------- Cartes-vote : plusieurs questions ---------- */
.question-cartes { border: 1px solid var(--bord); border-radius: 10px; padding: .7rem .9rem .9rem; margin: 0 0 .75rem; min-width: 0; }
.question-cartes legend { font-weight: 700; padding: 0 .25rem; }
.ligne-question { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.ligne-question .choix { display: flex; gap: .4rem 1rem; flex-wrap: wrap; }
.ligne-question .choix label { display: inline-flex; gap: .35rem; align-items: center; }
.ligne-question .espace { flex: 1; }
.nums-questions { display: flex; gap: .3rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.num-question { min-width: 2.2rem; min-height: 2.2rem; padding: 0 .35rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.num-question:hover { border-color: var(--accent); }
.num-question.lecture { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.num-question.fermee { background: var(--accent-doux); color: var(--accent-fort); }
.num-question.passee { color: var(--encre-2); text-decoration: line-through; }
.num-question.actuelle { outline: 3px solid var(--encre); outline-offset: 1px; }
.legende-questions { display: flex; gap: .2rem .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--encre-2); margin: .45rem 0 .9rem; }
.titre-question { margin: 0 0 .6rem; }
.zone-resultats { margin: .8rem 0; }
#scene > .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
#scene .actions .espace { flex: 1; }
.resume-classe { display: grid; gap: .2rem; margin-bottom: .5rem; }
.ligne-resume { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 3.2rem; gap: .6rem; align-items: center; padding: .25rem 0; }
.ligne-resume .texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-resume b { text-align: right; font-variant-numeric: tabular-nums; }
.ligne-resume.exclue { color: var(--encre-2); }
.onglets-cartes { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.onglets-cartes .btn[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fort); }
.titre-resultats { font-size: 1rem; margin: 1rem 0 .5rem; }
.diapo-cartes .pied-diapo { display: grid; gap: .4rem; }
.diapo-cartes .actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.diapo-cartes .actions .espace { flex: 1; }
@media (max-width: 640px) { .ligne-resume { grid-template-columns: minmax(0, 1fr) 4.5rem 3rem; } }
.scanner #scan-nums .num-question { min-width: 2.75rem; min-height: 2.75rem; }
.scanner .boutons-scan { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.scanner .boutons-scan .large { grid-column: 1 / -1; }
.scanner .question-texte { margin: .4rem 0 .2rem; }
.scanner #scan-zone[hidden] { display: none; }
/* La diapo tient dans la fenêtre : les commandes du bas restent visibles, le contenu défile s'il est trop long. */
.diapo-cartes:not(.qr-vue) { height: 100dvh; min-height: 0; overflow-y: auto; }
.diapo-cartes .pied-diapo .aide { display: none; }
.diapo-cartes .barres-cartes { min-height: 0; }
body.integre main:has(> .scene-cartes) { padding: 0; }

/* Page « Login » (administrateur). */
.table-login td:last-child { min-width: 14rem; }
.table-login { min-width: 46rem; }
.message-blocage { white-space: pre-line; }
.actions-login { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: flex-start; }
.actions-login form { margin: 0; }
.blocage summary { display: inline-flex; cursor: pointer; }
.blocage form { display: grid; gap: .5rem; margin-top: .5rem; text-align: left; justify-items: start; }
.blocage label { width: 100%; }
.blocage textarea { width: 100%; display: block; margin-top: .25rem; }
/* Import d'enseignants : panneau de l'e-mail, ouvert par le bouton « Confirmer l'inscription par email ». */
.panneau-courriel { margin-top: 1rem; }
.panneau-courriel > summary { display: inline-flex; cursor: pointer; list-style: none; }
.panneau-courriel > summary::-webkit-details-marker { display: none; }
.panneau-courriel > form { border: 1px solid var(--bord); border-radius: 12px; padding: 1rem; margin-top: .75rem; display: grid; gap: .75rem; }
.panneau-courriel label { width: 100%; }
.panneau-courriel input[type="text"], .panneau-courriel textarea { width: 100%; display: block; margin-top: .25rem; }
.panneau-courriel textarea { min-height: 14rem; }
.sans-courriel { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.courriel-coupe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 0; }

/* ---------- Sondage qualité (maquette validée : maquette-qualite/index.html) ---------- */
.q-n-4 { --n: 4; } .q-n-5 { --n: 5; } .q-n-9 { --n: 9; } .q-n-10 { --n: 10; }
.q-eleve { max-width: 640px; margin: 0 auto; }
.q-titre { text-align: center; font-size: 1.4rem; margin: 0 0 1rem; }
.q-carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 1.1rem 1.1rem 1rem; box-shadow: var(--ombre); margin: 0 0 .9rem; min-width: 0; }
.q-carte legend { float: left; width: 100%; padding: 0; margin-bottom: .6rem; font-weight: 500; }
.q-carte legend + * { clear: both; }
.q-carte.manque { border-color: var(--danger); }
.q-manque { color: var(--danger); font-size: .86rem; margin: .3rem 0 0; }
.q-merci { text-align: center; }
.q-merci h1 { margin: 0 0 .2rem; font-size: 1.4rem; }
.q-envoyer { width: 100%; min-height: 48px; }
.q-echelle { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); --v: 0; }
.q-ligne, .q-rempli { position: absolute; top: 21px; height: 3px; border-radius: 3px; left: calc(50% / var(--n)); }
.q-ligne { right: calc(50% / var(--n)); background: var(--axe); }
.q-rempli { background: var(--accent); width: calc((var(--v) - 1) * 100% / var(--n)); }
.q-echelle:not(:has(input:checked)) .q-rempli { display: none; }
.q-point { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; color: var(--encre-2); cursor: pointer; }
.q-point input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.q-rond { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
.q-rond span { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--axe); color: transparent; font-size: 0; transition: transform .1s; }
.q-point:hover .q-rond span { transform: scale(1.3); }
.q-point input:focus-visible ~ .q-rond span { outline: 3px solid var(--focus); outline-offset: 2px; }
.q-point.avant { color: var(--accent-fort); }
.q-point.avant .q-rond span { background: var(--accent); }
.q-point.choisi { z-index: 2; }
.q-point.choisi .q-rond span { width: 42px; height: 42px; background: var(--accent); color: var(--sur-accent); font-size: 1rem; font-weight: 700; transform: none; }
.q-point.choisi .q-num { visibility: hidden; }
.q-num { font-size: .95rem; min-height: 1.5em; }
.q-libelles { display: flex; justify-content: space-between; gap: 1rem; margin-top: .1rem; font-size: .82rem; line-height: 1.2; color: var(--encre-2); }
.q-extras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: .15rem; font-size: .82rem; line-height: 1.2; color: var(--encre-2); text-align: center; }
.q-extras span { grid-row: 1; min-width: 0; }
/* Éditeur */
.q-deux-cols { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 1.25rem; align-items: start; }
.q-telephone { border: 9px solid var(--encre); border-radius: 30px; background: var(--fond); padding: 1rem .7rem; max-height: 780px; overflow-y: auto; }
.q-telephone h2 { text-align: center; font-size: 1.1rem; }
.q-reglage { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--bord); }
.q-reglages .q-reglage:first-of-type, fieldset > .q-reglage:first-of-type { border-top: 0; }
.q-reglage .aide { grid-column: 1; margin: 0; }
.q-reglage > :last-child { grid-column: 2; grid-row: 1 / span 2; }
.q-libelles-edition { padding-bottom: .6rem; }
.q-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.q-extra-edition { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-top: .4rem; }
.q-edition { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.q-numero { font-weight: 700; color: var(--encre-2); min-width: 1.2rem; }
#q-ouverte-texte { width: 100%; margin-top: .3rem; }
.q-inter { position: relative; display: inline-flex; cursor: pointer; }
.q-inter input { position: absolute; inset: 0; width: 44px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.q-piste { position: relative; display: block; width: 44px; height: 24px; border-radius: 999px; background: var(--axe); transition: background .15s; }
.q-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.q-inter input:checked + .q-piste { background: var(--accent); }
.q-inter input:checked + .q-piste::after { left: 23px; }
.q-inter input:focus-visible + .q-piste { outline: 3px solid var(--focus); outline-offset: 2px; }
.q-inter input:disabled + .q-piste, .q-segments button:disabled { opacity: .5; cursor: not-allowed; }
.q-segments { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.q-segments button { font: inherit; font-weight: 600; min-height: 40px; min-width: 56px; padding: .3rem .8rem; border: 0; border-left: 1px solid var(--bord); background: var(--carte); color: var(--encre); cursor: pointer; }
.q-segments button:first-child { border-left: 0; }
.q-segments button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
/* Résultats */
.q-resultat { padding: .9rem 0; border-top: 1px solid var(--bord); break-inside: avoid; }
.q-resultat:first-of-type { border-top: 0; }
.q-resultat-haut { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .4rem; }
.q-moyenne { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-moyenne small { font-weight: 400; color: var(--encre-2); }
.q-barres { display: block; width: 100%; max-width: 440px; height: auto; }
.q-barre { fill: var(--accent); }
.q-barre:hover { fill: var(--accent-fort); }
.q-barre-base { stroke: var(--bord); }
.q-barre-nb, .q-barre-axe { fill: var(--encre-2); font-size: 15px; }
.q-libelles-barres { max-width: 440px; }
.q-commentaires { margin: .4rem 0 0; padding: 0; list-style: none; }
.q-commentaires li { background: var(--fond); border-radius: 10px; padding: .5rem .8rem; margin-bottom: .4rem; overflow-wrap: anywhere; }
.q-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.q-table th, .q-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: top; overflow-wrap: anywhere; }
.q-table thead th { font-size: .82rem; font-weight: 600; color: var(--encre-2); }
.q-table .q-nb { text-align: center; font-variant-numeric: tabular-nums; }
.q-legende { margin-top: .8rem; }
.q-legende li::marker { content: "Q" counter(list-item) " : "; }
@media (max-width: 900px) {
  .q-deux-cols { grid-template-columns: minmax(0, 1fr); }
  .q-telephone { width: 100%; max-width: 390px; margin: 0 auto; }
  .q-champs { grid-template-columns: 1fr; }
}
@media print {
  body[data-page="qualite-gerer"] { --carte: #fff; --fond: #fff; --encre: #1f2933; --encre-2: #52606d; --bord: #dde3de; --ombre: none; }
  body[data-page="qualite-gerer"] .carte { border: 0; box-shadow: none; padding: 0; background: #fff; color: var(--encre); }
  .q-barre { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Grilles d'évaluation ---------- */
/* Familles de critères : la couleur n'est jamais seule, le symbole et le titre portent aussi le sens. */
.famille { --f-doux: color-mix(in srgb, var(--f) 14%, var(--carte)); --f-texte: color-mix(in srgb, var(--f) 45%, var(--encre)); border-left: 4px solid var(--f); background: var(--f-doux); border-radius: 0 10px 10px 0; padding: .6rem .8rem; margin-top: .8rem; }
.famille.penalite { --f: var(--k0); --sur-f: var(--kl0); }
.famille.questions { --f: var(--k1); --sur-f: var(--kl1); --f-doux: transparent; }
.famille.bonus { --f: var(--k3); --sur-f: var(--kl3); }
.famille-titre { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; margin-bottom: .35rem; }
.famille-titre .symbole { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--f); color: var(--sur-f); font-weight: 700; font-size: .9rem; flex: none; }
.famille-titre strong { color: var(--f-texte); }
.famille-titre .regle { color: var(--encre-2); font-size: .85rem; display: inline; border: 0; background: none; padding: 0; margin: 0; }
.famille .btn.ajout { border-color: var(--f); color: var(--f-texte); margin-top: .2rem; }
/* Boutons d'ajout bleus comme partout (15.11.2026) : la couleur de la famille ne s'applique pas à eux. */
.famille .btn.ajout.principal { border-color: var(--accent); color: var(--sur-accent); }
.famille .q-inter input:checked + .q-piste { background: var(--f); }
.famille .q-reglage { padding: .2rem 0 0; border-top: 0; }
.g-trois-libelles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 0 0 .7rem; }
.g-chapitre { border: 1px solid var(--bord); border-radius: 12px; padding: .9rem 1rem; margin-top: 1rem; }
.g-chapitre-tete { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.g-chapitre-tete input { flex: 1 1 14rem; min-width: 0; font-weight: 700; }
.g-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.g-ligne input[type="text"] { width: 100%; min-width: 0; }
.g-points { display: flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--encre-2); }
.g-points input { width: 5rem; }
.g-boutons { display: flex; gap: .2rem; }
.g-boutons .btn.petit { min-width: 36px; padding-inline: .4rem; }
.g-ajouts { margin-top: 1rem; }
.g-bandeau { background: var(--accent-doux); border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 1rem; }
.g-pastille { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--vide); font-size: .85rem; margin: .15rem .2rem .15rem 0; }
.g-pastille.groupe { background: var(--accent-doux); }
.g-note { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; padding: .15rem .55rem; border-radius: 10px; background: var(--accent-doux); color: var(--accent-fort); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-note.vide { background: var(--vide); color: var(--encre-2); font-weight: 500; }
.g-remplir { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.g-remplir > * { min-width: 0; }
.g-liste { position: sticky; top: .5rem; padding: .6rem; }
.g-entree { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .2rem; border-radius: 8px; }
.g-entree.cible, .g-depot-seul.cible { outline: 3px dashed var(--accent); outline-offset: 1px; background: var(--accent-doux); }
.g-entree > button { flex: 1 1 0; min-width: 0; }
.g-glisser { cursor: grab; user-select: none; color: var(--encre-2); font-size: .82rem; padding: .1rem .3rem; border-radius: 6px; }
.g-glisser.saisi { opacity: .5; }
.g-membres-liste { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .2rem; padding: 0 .4rem .3rem 1.4rem; }
.g-membres-liste .g-glisser { background: var(--vide); color: var(--encre); }
.g-depot-seul { margin-top: .4rem; padding: .5rem; border: 1px dashed var(--bord); border-radius: 8px; color: var(--encre-2); font-size: .85rem; text-align: center; }
.g-aide-glisser { margin: 0 0 .4rem; }
.g-membres-fiche { margin-top: .8rem; border-top: 1px solid var(--bord); padding-top: .6rem; }
.g-membres-fiche .libelle { font-weight: 600; }
.g-membres-fiche ul { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .3rem; }
.g-membres-fiche li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.g-membres-fiche select { max-width: 100%; }
.g-ajout-membre { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.g-ajout-membre input { flex: 1 1 12rem; min-width: 0; }
.g-membres-fiche .erreur:empty { display: none; }
.g-entree > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .5rem; text-align: left; font: inherit; font-size: .92rem; min-height: 40px; padding: .35rem .5rem; border: 0; border-radius: 8px; background: none; color: var(--encre); cursor: pointer; }
.g-entree > button[aria-current="true"] { background: var(--accent-doux); font-weight: 600; }
.g-liste .aide { margin: 0; }
.g-ajout-eleve { margin-top: .6rem; border-top: 1px solid var(--bord); padding-top: .6rem; }
.g-ajout-eleve input { width: 100%; }
.g-ajout-eleve .erreur { margin: .3rem 0 0; font-size: .85rem; }
.g-ajout-eleve .erreur:empty { display: none; }
.g-chapitre-entete { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.g-chapitre-entete h2 { margin: 0; }
.g-critere { display: grid; grid-template-columns: 1fr auto 4.6rem; gap: .35rem .7rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--bord); }
.famille-titre + .g-critere { border-top: 0; }
.g-critere.hors .g-critere-texte { color: var(--encre-2); font-style: italic; }
.g-effet { text-align: right; font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--f-texte); font-weight: 600; }
.famille.questions .g-effet { color: var(--encre-2); font-weight: 400; }
.g-lien { border: 0; background: none; padding: 0 .1rem; font: inherit; font-size: .8rem; color: var(--encre-2); text-decoration: underline; cursor: pointer; }
.g-reponses { flex-wrap: wrap; }
.g-reponses button { min-height: 36px; min-width: 36px; padding: .15rem .5rem; font-size: .85rem; font-weight: 500; }
.famille .g-reponses button[aria-pressed="true"] { background: var(--f); color: var(--sur-f); font-weight: 700; }
.g-correction { border-top: 1px solid var(--bord); padding: .5rem 0; display: grid; gap: .4rem; }
.g-correction input { width: 100%; }
.g-correction .erreur:empty { display: none; }
.famille .btn.ajout { margin-top: .5rem; }
.g-remarque { margin-top: .8rem; display: block; }
.g-remarque textarea { width: 100%; }
.g-table-defile { overflow-x: auto; }
.g-membres { border-collapse: collapse; width: 100%; min-width: 30rem; }
.g-membres th, .g-membres td { padding: .35rem .5rem; border-top: 1px solid var(--bord); text-align: left; font-size: .9rem; }
.g-membres input[type="number"] { width: 5.2rem; }
.g-membres input[type="text"] { width: 100%; }
.g-note-finale { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--carte); border: 1px solid var(--accent); border-radius: 12px; padding: .7rem 1rem; z-index: 2; }
.g-note-finale .g-note { font-size: 1.25rem; }
.g-rendu { border-top: 1px solid var(--bord); padding-top: .6rem; margin-top: .8rem; }
.g-rendu h3 { margin: 0 0 .2rem; }
.g-rendu ul { margin: .3rem 0; padding-left: 1.2rem; }
.g-copie { display: block; padding: .2rem 0; }
.g-bandeau .btn { margin: .3rem .4rem 0 0; }
#g-export-message:not(:empty) { margin: 0 0 1rem; font-weight: 600; }
.g-code { display: inline-block; padding: .05rem .5rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--vide); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; vertical-align: middle; }
.g-code-fichier { margin: 0 0 .8rem; }
.g-notes-chapitres { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
@media (max-width: 800px) {
  .g-trois-libelles { grid-template-columns: 1fr; }
  .g-ligne { grid-template-columns: 1fr auto; }
  .g-ligne input[type="text"] { grid-column: 1 / -1; }
  .g-remplir { grid-template-columns: 1fr; }
  .g-liste { position: static; }
  .g-critere { grid-template-columns: 1fr 4.6rem; }
  .g-reponses { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Bibliothèque de prompts (maquette validée : maquette-ia) ---------- */
.recherche-prompts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-bottom: .6rem; }
.filtres-prompts { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtre-prompt { font-size: .88rem; border: 1px solid var(--bord); background: var(--carte); color: var(--encre); border-radius: 99px; padding: .25rem .75rem; text-decoration: none; }
.filtre-prompt:hover { border-color: var(--accent); }
.filtre-prompt[aria-current="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fort); font-weight: 600; }
.grille-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; margin: .9rem 0; }
.fiche-prompt { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--bord); border-radius: 12px; padding: .8rem; }
.fiche-prompt h2 { font-size: 1rem; margin: 0; }
.fiche-prompt p { margin: 0; color: var(--encre-2); font-size: .9rem; flex: 1; }
.fiche-prompt.masquee { border-style: dashed; }
.tete-fiche-prompt { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.droite-fiche-prompt { display: flex; align-items: center; gap: .3rem; flex: none; }
.categorie-prompt { font-size: .75rem; font-weight: 600; background: var(--accent-doux); color: var(--accent-fort); border-radius: 99px; padding: .1rem .55rem; white-space: nowrap; }
.actions-fiche-prompt { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.forme-bouton { display: inline; margin: 0; }
.etoile-prompt { font-size: 1.15rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--encre-2); padding: 0 .15rem; }
.etoile-prompt[aria-pressed="true"] { color: var(--d-parfait); }
.avertissement-prompt { background: var(--e-moyen); color: var(--e-alerte); font-weight: 600; font-size: .92rem; }
.colonnes-prompt { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.champs-prompt { display: grid; gap: .65rem; }
.rendu-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font: .93rem/1.55 ui-monospace, Consolas, monospace; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: .8rem; margin: 0 0 .7rem; max-height: 420px; overflow: auto; }
.rendu-prompt mark { background: var(--accent-doux); color: var(--accent-fort); border-radius: 4px; padding: 0 .15rem; font-weight: 600; }
.rendu-prompt mark.vide { background: var(--e-moyen); color: var(--e-alerte); }
.texte-prompt { font: .93rem/1.55 ui-monospace, Consolas, monospace; min-height: 11rem; }
.confirme-prompt { color: var(--accent-fort); font-weight: 600; font-size: .9rem; }
@media (max-width: 720px) { .colonnes-prompt { grid-template-columns: 1fr; } }

/* Choix du thème dans les paramètres */
.choix-theme { border: 0; padding: 0; margin: 0 0 1.25rem; }
.choix-theme legend { font-weight: 700; padding: 0; }
.radio-theme { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .8rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.radio-theme:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }

/* ---------- Carte heuristique ---------- */
/* La hauteur de l'éditeur laisse la barre du site et celle de la carte ; sur téléphone, il reste une bande pour faire défiler la page. */
body[data-page="heuristique"] main { padding: .6rem 1rem 2rem; }
.heuristique-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .6rem; }
.heuristique-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; flex: 1 1 22rem; min-width: 0; margin: 0; }
.heuristique-titre { flex: 1 1 12rem; min-width: 0; min-height: 36px; padding: .25rem .5rem; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 1.15rem; font-weight: 700; }
.heuristique-titre:hover { border-color: var(--bord); }
.heuristique-titre:focus { background: var(--carte); }
.heuristique-apparences { display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); overflow: hidden; }
.heuristique-apparences label { display: inline-flex; cursor: pointer; }
.heuristique-apparences input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.heuristique-apparences span { display: inline-flex; align-items: center; min-height: 34px; padding: .25rem .75rem; font-size: .9rem; font-weight: 600; }
.heuristique-apparences input:checked + span { background: var(--accent); color: var(--sur-accent); }
.heuristique-apparences input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.heuristique-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.heuristique-menu { position: relative; }
.heuristique-menu summary { list-style: none; }
.heuristique-menu summary::-webkit-details-marker { display: none; }
.heuristique-menu-liste { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; display: grid; gap: .3rem; min-width: 9rem; padding: .4rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); box-shadow: var(--ombre); }

.heuristique-zone { position: relative; height: calc(100dvh - 9.5rem); min-height: 420px; max-width: 100%; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden;
  background-color: var(--carte); background-image: radial-gradient(color-mix(in srgb, var(--encre-2) 16%, transparent) 1px, transparent 1.2px); background-size: 24px 24px; }
.heuristique-zone > .aide { padding: 1rem; }
/* L'arbre invisible reste en haut de la zone : le focus clavier ne doit jamais faire défiler la page. */
.heuristique-zone > [role="tree"] { top: 0; left: 0; }
.heuristique-toile { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.heuristique-toile.sur-noeud { cursor: pointer; }
.heuristique-toile.glisse { cursor: grabbing; }
.heuristique-selection { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.heuristique-toile.focus-arbre .heuristique-selection { stroke: var(--focus); stroke-width: 2.5; }
.heuristique-survol { fill: color-mix(in srgb, var(--accent) 5%, transparent); stroke: none; pointer-events: none; }
.heuristique-marque circle { fill: var(--accent); stroke: var(--carte); stroke-width: 2; }
.heuristique-marque path { fill: none; stroke: var(--sur-accent); stroke-width: 1.5; stroke-linecap: round; }
.heuristique-marque.ferme circle { fill: var(--encre-2); }
.heuristique-marque.ferme path { stroke: var(--carte); }
/* Nuage : œil en exposant de chaque mot (page de l'enseignant), visible au survol ou au clavier. */
.nuage-oeil { cursor: pointer; opacity: 0; transition: opacity .15s; }
.nuage-oeil circle { fill: var(--carte); stroke: var(--bord); stroke-width: 1; }
.nuage-oeil > g { stroke: var(--encre-2); }
.mx-serie:hover .nuage-oeil, .nuage-oeil:focus, .nuage-oeil:focus-visible { opacity: 1; }
.nuage-oeil:hover circle, .nuage-oeil:focus-visible circle { stroke: var(--accent); }
.nuage-oeil:focus-visible { outline: none; }
.nuage-oeil:focus-visible circle { stroke: var(--focus); stroke-width: 3; }
.mots-masques { margin-top: .75rem; }
.mots-masques summary { cursor: pointer; font-weight: 600; }
.mots-masques ul { list-style: none; margin: .4rem 0 0; padding: 0; max-width: 28rem; }
.mots-masques li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--bord); }
.oeil-mot { display: inline-grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 1px solid var(--bord); border-radius: 50%; background: var(--carte); color: var(--encre-2); cursor: pointer; }
.oeil-mot svg { width: 15px; height: 15px; }
.oeil-mot:hover { color: var(--accent); border-color: var(--accent); }
.heuristique-cible { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.heuristique-a-deplacer { fill: none; stroke: var(--encre-2); stroke-width: 2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.heuristique-repli, .heuristique-replier, .heuristique-repere-note { cursor: pointer; }
.heuristique-repere-note.fantome { opacity: .55; }
.heuristique-repere-note.fantome circle { stroke-dasharray: 2 2; }
.heuristique-repere-note.fantome:hover { opacity: 1; }
.heuristique-outils-noeud .outil-gras { font-weight: 800; }
.heuristique-outils-noeud .outil-italique { font-style: italic; font-family: Georgia, serif; }
.heuristique-outils-noeud .outil-couleur { display: inline-grid; place-items: center; min-width: 36px; }
.outil-couleur-pastille { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 1px var(--bord); }
.heuristique-outils-noeud .outil-couleur:disabled .outil-couleur-pastille { opacity: .45; }
.heuristique-outils-noeud [aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--carte)); border-color: var(--accent); }
/* Palette de couleurs du nœud, juste au-dessus de la barre du nœud. */
.heuristique-palette { position: absolute; z-index: 3; bottom: 4.1rem; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; max-width: calc(100% - 1rem); padding: .4rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); box-shadow: var(--ombre); }
.heuristique-palette[hidden] { display: none; }
.heuristique-palette .pastille-couleur { width: 32px; height: 32px; min-height: 0; padding: 0; border: 2px solid var(--carte); border-radius: 50%; outline: 1px solid var(--bord); cursor: pointer; }
.heuristique-palette [aria-pressed="true"] { outline: 3px solid var(--encre); }
.heuristique-palette .pastille-couleur:focus-visible { outline: 3px solid var(--focus); }
.heuristique-bulle { position: absolute; z-index: 3; max-width: min(20rem, calc(100% - 1rem)); padding: .45rem .7rem; border-radius: 10px; background: var(--encre); color: var(--carte); font-size: .9rem; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; box-shadow: var(--ombre); pointer-events: none; }
.heuristique-bulle[hidden] { display: none; }
.heuristique-fenetre-note { width: min(28rem, calc(100% - 2rem)); padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--bord); border-radius: 16px; background: var(--carte); color: var(--encre); }
.heuristique-fenetre-note::backdrop { background: rgb(0 0 0 / 45%); }
.heuristique-fenetre-note h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.heuristique-fenetre-note textarea { width: 100%; }
.heuristique-fenetre-note .actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .6rem; }

.heuristique-outils { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; border: 1px solid var(--bord); border-radius: 12px; background: color-mix(in srgb, var(--carte) 92%, transparent); box-shadow: var(--ombre); }
.heuristique-outils[hidden] { display: none; }
.heuristique-outils-vue { top: .6rem; right: .6rem; }
.heuristique-outils-vue .btn { min-width: 36px; }
.heuristique-outils-noeud { bottom: .6rem; left: 50%; transform: translateX(-50%); justify-content: center; width: max-content; max-width: calc(100% - 1rem); }
.heuristique-indice { position: absolute; left: .75rem; top: .75rem; margin: 0; max-width: calc(100% - 20rem); color: var(--encre-2); font-size: .8rem; pointer-events: none; }
.heuristique-saisie { position: absolute; z-index: 3; transform: translateY(-50%); min-height: 0; height: auto; margin: 0; padding: .3rem .6rem; border: 2px solid var(--accent); border-radius: 10px; background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.heuristique-saisie[hidden] { display: none; }
.heuristique-annonce { position: absolute; z-index: 4; bottom: 4.2rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); margin: 0; padding: .5rem .9rem; border-radius: 10px; background: var(--encre); color: var(--carte); font-size: .92rem; }
/* Vide au repos, mais toujours présente : une zone aria-live doit exister avant de recevoir son texte. */
.heuristique-annonce:empty { padding: 0; background: none; }
.heuristique-garde { position: absolute; z-index: 4; top: .6rem; left: 50%; transform: translateX(-50%); display: grid; gap: .4rem; width: min(32rem, calc(100% - 1rem)); max-height: calc(100% - 1.2rem); overflow-y: auto; }
.heuristique-garde-entree { display: grid; gap: .4rem; padding: .75rem; border: 1px solid var(--danger); border-radius: 12px; background: var(--danger-doux); color: var(--encre); }
.heuristique-garde p { margin: 0; }
.heuristique-garde output { display: block; padding: .4rem .6rem; border-radius: 8px; background: var(--carte); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.heuristique-suppression { margin-top: 1.25rem; }

.heuristique-dialogue { width: min(30rem, calc(100% - 2rem)); padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--bord); border-radius: 16px; background: var(--carte); color: var(--encre); }
.heuristique-dialogue::backdrop { background: rgb(0 0 0 / 45%); }
.heuristique-dialogue.panneau { width: min(34rem, calc(100% - 2rem)); }
.heuristique-dialogue-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.heuristique-dialogue-tete h2 { margin: 0; }
.heuristique-dialogue [data-statut] { min-height: 1.3rem; margin: .25rem 0; }
.heuristique-partage-texte { margin: 0 0 .5rem; font-weight: 700; overflow-wrap: anywhere; }
.heuristique-qr { display: block; width: min(14rem, 100%); height: auto; margin: 0 auto .75rem; border-radius: 10px; background: #fff; }
.heuristique-ligne-lien { display: flex; gap: .4rem; margin-bottom: .5rem; }
.heuristique-lien { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: .9rem; }
.heuristique-liste { display: grid; gap: .75rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.heuristique-liste li { padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: 12px; }
.heuristique-liste p { margin: .2rem 0 .5rem; }
.heuristique-liste-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; overflow-wrap: anywhere; }

/* Présenter : la carte seule, sans aucune barre du site. */
body[data-page="heuristique-presenter"] > :not(main) { display: none; }
body[data-page="heuristique-presenter"] main { position: relative; padding: 0; }
.heuristique-zone[data-mode="presenter"] .heuristique-toile:not(.focus-arbre) .heuristique-selection { display: none; }
body[data-page="heuristique-presenter"] .heuristique-zone { height: 100dvh; border: 0; border-radius: 0; }
.heuristique-retour { position: absolute; z-index: 3; top: .6rem; left: .6rem; }

@media (max-width: 760px) {
  body[data-page="heuristique"] main { padding: .5rem 10px 2rem; }
  /* Retour et titre sur la même ligne : la carte reste le plus près possible du haut de l'écran. */
  .heuristique-reglages { display: contents; }
  .heuristique-titre { flex: 1 1 8rem; font-size: 1rem; }
  .heuristique-zone { height: 72dvh; min-height: 360px; }
  .heuristique-indice { display: none; }
  .heuristique-outils-vue .btn, .heuristique-outils-noeud .btn { min-height: 40px; }
  .heuristique-outils-noeud .btn { padding: .3rem .55rem; }
}

/* ---------- Cases « Nuage de mots » et « Carte heuristique » d'un support (élève) ---------- */
.saisie-mots { display: grid; gap: .5rem; max-width: 28rem; }
.saisie-mots label { font-weight: 600; font-size: .9rem; }
.saisie-mots .btn { justify-self: start; margin-top: .3rem; }
.question-nuage { margin: 0 0 .6rem; font-size: 1.15rem; }
.nuage-case { min-height: 160px; }
.nuage-case + .aide { text-align: center; }
/* Carte d'une case : moins haute que la page de la carte, la consigne et la légende restent visibles. */
.heuristique-zone.heuristique-case { height: min(70dvh, 560px); min-height: 360px; }
.heuristique-case .heuristique-indice { display: none; }
.heuristique-raison { position: absolute; z-index: 2; top: .6rem; left: .6rem; max-width: calc(100% - 12rem); margin: 0; padding: .3rem .6rem; border-radius: 10px;
  background: color-mix(in srgb, var(--carte) 92%, transparent); color: var(--encre-2); font-size: .85rem; pointer-events: none; }
.heuristique-raison:empty, .heuristique-raison[hidden] { display: none; }
.heuristique-mien { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; pointer-events: none; }
/* Nœud d'un camarade : voile couleur de fond, il paraît grisé sans changer le dessin de la carte. */
.heuristique-camarade { fill: color-mix(in srgb, var(--carte) 45%, transparent); stroke: none; pointer-events: none; }
.heuristique-cadenas { font-size: 13px; pointer-events: none; }
.legende-carte { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .5rem 0 0; color: var(--encre-2); font-size: .85rem; }
.legende-carte > span { display: inline-flex; align-items: center; gap: .35rem; }
.legende-carte .echantillon { display: inline-block; width: 22px; height: 12px; border-radius: 4px; }
.legende-carte .echantillon.mien { border: 2px dashed var(--accent); }
.legende-carte .echantillon.camarade { background: color-mix(in srgb, var(--encre-2) 25%, transparent); }
@media (max-width: 760px) {
  .heuristique-raison { max-width: calc(100% - 1.2rem); top: 3.4rem; }
}

/* ---------- Cordée (enseignant) ---------- */
/* Largeurs en classes (pas de style en ligne : CSP). Le serveur arrondit les parts au multiple de 5 le plus proche. */
.larg-0 { width: 0%; }
.larg-5 { width: 5%; }
.larg-10 { width: 10%; }
.larg-15 { width: 15%; }
.larg-20 { width: 20%; }
.larg-25 { width: 25%; }
.larg-30 { width: 30%; }
.larg-35 { width: 35%; }
.larg-40 { width: 40%; }
.larg-45 { width: 45%; }
.larg-50 { width: 50%; }
.larg-55 { width: 55%; }
.larg-60 { width: 60%; }
.larg-65 { width: 65%; }
.larg-70 { width: 70%; }
.larg-75 { width: 75%; }
.larg-80 { width: 80%; }
.larg-85 { width: 85%; }
.larg-90 { width: 90%; }
.larg-95 { width: 95%; }
.larg-100 { width: 100%; }
.cordee-lien { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cordee-lien .lien-copiable { overflow-wrap: anywhere; font-weight: 600; }
.cordee-lien .qr { width: 7.5rem; height: 7.5rem; background: #fff; padding: .25rem; border-radius: 8px; }
.cordee-periodes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.cordee-periodes a[aria-current="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.cordee-suivi-corps { margin: .5rem 0 .25rem; padding: .75rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.cordee-suivi-bilan { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .5rem; }
.cordee-suivi-bilan .trop { color: var(--danger); font-weight: 700; }
.cordee-suivi-taches { list-style: none; margin: 0; padding: 0; }
.cordee-suivi-taches > li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: start; padding: .55rem 0; border-top: 1px solid var(--bord); }
.cordee-suivi-taches .tache { font-weight: 600; overflow-wrap: anywhere; }
.cordee-suivi-taches .etat-tache { display: block; font-weight: 400; color: var(--encre-2); font-size: .85rem; }
.cordee-suivi-taches .cordee-jauge-bloc, .cordee-suivi-taches .phrase { grid-column: 1 / -1; }
.cordee-suivi-taches .phrase { margin: 0; color: var(--encre-2); font-size: .88rem; }
.verdict { border-radius: 999px; padding: .1rem .6rem; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.verdict.trop { background: var(--cordee-suivi-trop-doux); color: var(--danger); }
.verdict.ok { background: var(--cordee-suivi-ok-doux); color: var(--cordee-suivi-ok-texte); }
.verdict.reste { background: var(--vide); color: var(--encre-2); }
.cordee-jauge { position: relative; height: 1.3rem; background: var(--vide); border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
.cordee-jauge .rempli { position: absolute; top: 0; bottom: 0; left: 0; background: var(--cordee-suivi-ok); }
.cordee-jauge .rempli.trop { background: var(--cordee-suivi-trop); }
/* Trait du temps prévu : 100 % sur une échelle de 150 % (JAUGE_MAX_POURCENT). */
.cordee-jauge .cent { position: absolute; top: 0; bottom: 0; left: calc(100% * 100 / 150); width: 2px; background: var(--encre); }
.cordee-jauge .pct { position: absolute; top: 0; bottom: 0; right: .4rem; display: flex; align-items: center; font-size: .8rem; font-weight: 700; }
.cordee-jauge-reperes { position: relative; height: 1.1rem; font-size: .75rem; color: var(--encre-2); }
.cordee-jauge-reperes span { position: absolute; top: 0; left: 0; white-space: nowrap; }
.cordee-jauge-reperes .prevu { left: calc(100% * 100 / 150); transform: translateX(-50%); }
.barre-temps { display: flex; height: 1.1rem; border-radius: 6px; overflow: hidden; background: var(--vide); border: 1px solid var(--bord); }
.barre-temps > span { display: block; height: 100%; }
.barre-sur { background: var(--s3); }
.barre-sans { background: var(--s2); }
.barre-absent { background: var(--s7); }
.barre-hors { background: var(--s1); }
.cordee-legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0; margin: .5rem 0; font-size: .9rem; }
.cordee-legende i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
/* Création et réglages : domaine de l'Assistant (le type de projet se choisit pour chaque groupe, depuis le pouls). */
.cordee-choix-assistant { display: grid; gap: .5rem; align-content: start; }
.cordee-choix-assistant .champ { margin: 0; }
/* Réglages en onglets (maquette-cordee-v3/reglages.html, 14.11.2026) : Projet, Horaires, Calendrier. Sans script, les sections se suivent. */
.cordee-reglages-titre { margin: 0 0 .8rem; font-size: 1.5rem; }
.cordee-reglages { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; align-items: start; }
body:not(.js) .cordee-reglages { grid-template-columns: minmax(0, 1fr); }
.cordee-reglages-nav { position: sticky; top: 1rem; display: grid; gap: .25rem; padding: .5rem; }
.cordee-reglages-nav a { display: flex; gap: .55rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--encre); font-weight: 600; }
.cordee-reglages-nav a:hover { background: var(--accent-doux); }
.cordee-reglages-nav a[aria-current="true"] { background: var(--accent); color: var(--sur-accent); }
.cordee-reglages-nav .resume { display: block; font-weight: 400; font-size: .75rem; opacity: .85; overflow-wrap: anywhere; }
.cordee-reglages-sections { display: grid; gap: 1rem; min-width: 0; }
/* Page de création : pas de menu des onglets, donc une seule colonne ; les sections des réglages suivent le formulaire. */
.cordee-reglages.cordee-nouveau { grid-template-columns: minmax(0, 1fr); }
.cordee-creation-reglages { display: grid; gap: 1rem; }
.cordee-calendrier-replie > summary { cursor: pointer; padding: .2rem 0; }
.cordee-calendrier-replie > summary .aide { margin: 0; }
.cordee-calendrier-replie > .cordee-section { border: 0; box-shadow: none; background: none; padding: .8rem 0 0; }
.cordee-calendrier-replie > .cordee-section h2 { display: none; }
/* Groupes : l'outil dans la carte du titre (15.11.2026). */
.repartition-dans-carte { margin-top: 1rem; }
.repartition-dans-carte .carte { box-shadow: none; }
/* Dates des réglages au style commun des champs (le navigateur les montrait sur fond clair). */
.cordee-reglages input[type="date"] {
  font: inherit; color: var(--encre); background: var(--carte); color-scheme: light dark;
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px;
}
.cordee-section { display: grid; gap: 1rem; min-width: 0; }
.cordee-section[hidden] { display: none; }
.cordee-section h2, .cordee-section h3 { margin: 0; }
.cordee-section > div > p { margin: .2rem 0 0; }
.cordee-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: start; }
.cordee-deux .champ { margin: 0; }
.cordee-barre-enregistrer { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: flex-end; padding: .7rem 1rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre); }
.cordee-barre-enregistrer .aide { margin: 0 auto 0 0; }
@media (max-width: 47.5rem) {
  .cordee-reglages { grid-template-columns: minmax(0, 1fr); }
  .cordee-reglages-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .cordee-reglages-nav .resume { display: none; }
}
/* Horaires : une ligne = des jours (pastilles), un début et une fin ; frise de la semaine dessous. */
.cordee-horaires-lignes { display: grid; gap: .5rem; }
.cordee-horaire { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--bord); border-radius: 12px; }
.cordee-horaire .duree { margin-right: auto; }
.cordee-horaire input[type="time"] { box-sizing: border-box; height: 2.5rem; border: 1px solid var(--bord); border-radius: 10px; padding: .3rem .5rem; background: var(--carte); color: var(--encre); font: inherit; }
.cordee-jours { display: inline-flex; gap: .2rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.jour-pastille { position: relative; display: inline-grid; }
.jour-pastille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jour-pastille span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--bord); background: var(--carte); font-weight: 700; font-size: .8rem; }
.jour-pastille input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.jour-pastille input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn.fantome { border-style: dashed; color: var(--accent); font-weight: 700; }
.cordee-frise { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: .4rem; }
.cordee-frise .jour { border-radius: 10px; background: var(--fond); padding: .35rem; min-height: 4.5rem; display: grid; align-content: start; gap: .2rem; }
.cordee-frise b { text-align: center; font-size: .78rem; color: var(--encre-2); }
.cordee-frise span { background: var(--accent); color: var(--sur-accent); border-radius: 6px; font-size: .75rem; font-weight: 700; text-align: center; padding: .15rem; }
.cordee-resume-heures { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.cordee-resume-heures span { background: var(--accent-doux); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; font-weight: 700; }
/* Calendrier : un clic sur un jour de cours le marque « sans cours ». */
.cordee-chiffres-cal { display: flex; flex-wrap: wrap; gap: .6rem; }
.cordee-chiffres-cal p { margin: 0; padding: .45rem .7rem; border-radius: 10px; background: var(--fond); font-size: .82rem; color: var(--encre-2); }
.cordee-chiffres-cal b { display: block; font-size: 1.2rem; color: var(--encre); }
.cordee-legende-cal { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--encre-2); }
.cordee-legende-cal i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.cordee-legende-cal i.cours { background: var(--accent-doux); } .cordee-legende-cal i.conge { background: var(--cordee-p1); }
.cordee-legende-cal i.fin { background: var(--danger); } .cordee-legende-cal i.aujourdhui { outline: 2px solid var(--accent); }
.cordee-mois-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .9rem; }
.cordee-mois-grille .mois h4 { margin: 0 0 .3rem; font-size: .9rem; text-transform: capitalize; }
.cordee-mois-grille .jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cordee-mois-grille .nom { font-size: .65rem; text-align: center; color: var(--encre-2); font-weight: 700; }
.cordee-mois-grille button { aspect-ratio: 1; border: 0; border-radius: 6px; background: none; padding: 0; font: inherit; font-size: .75rem; color: var(--encre); cursor: pointer; }
.cordee-mois-grille button.cours { background: var(--accent-doux); font-weight: 800; }
.cordee-mois-grille button.conge { background: var(--cordee-p1); color: var(--cordee-sur-personne); font-weight: 800; }
.cordee-mois-grille button.fin { background: var(--danger); color: var(--carte); font-weight: 800; }
.cordee-mois-grille button.hors { color: color-mix(in srgb, var(--encre-2) 55%, transparent); cursor: default; }
.cordee-mois-grille button.aujourdhui { outline: 2px solid var(--accent); }
.cordee-mois-grille button:not(:disabled):hover { outline: 2px solid var(--focus); }
.cordee-periode { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.cordee-periode h3 { flex-basis: 100%; font-size: 1rem; }
.cordee-periode .champ { margin: 0; }
.cordee-sans-cours-texte summary { cursor: pointer; font-weight: 700; }
.cordee-sans-cours-texte .champ { margin: .5rem 0 0; }
.cordee-zone-texte textarea { width: 100%; min-height: 6rem; font: inherit; }
.cordee-zone { min-height: 12rem; }
@media (max-width: 40rem) { .cordee-membre, .cordee-suivi > summary { grid-template-columns: 1fr; } .cordee-membre .en-cours, .cordee-alertes { grid-column: 1; } }
/* Cordée : tableau d'un groupe (cordee-vue.ts), de haut en bas : ligne du temps, sommet du jour, prochain pas et
   Rafale côte à côte, tableau. Maquette de référence : apps/matrice/maquette-cordee-v2 (sommet « Neige »). */
:root {
  --cordee-sommet: #eaf3fb; --cordee-sur-sommet: #16293a; --cordee-sommet-bord: #2a7cb8;
  --cordee-eclair: #f1c40f; --cordee-sur-eclair: #1f2933; --cordee-eclair-doux: #fff6d1;
  --cordee-pas: #2e7d4f; --cordee-pas-doux: #e3f3ea; --cordee-sur-pas: #ffffff;
  --cordee-choix: #1d7a46; --cordee-choix-doux: #dcf3e4; --cordee-sur-choix: #ffffff;
  /* Étoile jaune du bouton de l'Assistant. */
  --cordee-etoile: #ffd43b;
  /* Ligne du temps : 6 niveaux, du bleu (échéance lointaine) au rouge (dépassée). */
  --cordee-lt-0: #2a7cb8; --cordee-lt-1: #3b6fb0; --cordee-lt-2: #6a5aa6; --cordee-lt-3: #9a4a8e; --cordee-lt-4: #c43d5e; --cordee-lt-5: #b42318;
  --cordee-sur-lt: #ffffff; --cordee-lt-axe: #9fb3c4; --cordee-lt-jour: #2e7d4f;
  /* Suivi par élève : jauge dans le temps prévu (vert) ou au-delà (rouge). */
  --cordee-suivi-ok: #5fae7e; --cordee-suivi-ok-doux: #e3f3ea; --cordee-suivi-ok-texte: #1f6b3e;
  --cordee-suivi-trop: #e07b73; --cordee-suivi-trop-doux: #fde8e6;
  /* Couleurs des personnes (pastilles des prénoms), texte foncé dessus. */
  --cordee-p0: #cfe3ff; --cordee-p1: #ffd8c2; --cordee-p2: #cdeed5; --cordee-p3: #e6d6ff;
  --cordee-p4: #ffeaa0; --cordee-p5: #ffd0e0; --cordee-p6: #c4eeea; --cordee-p7: #e4dfd2; --cordee-sur-personne: #16293a;
  /* Cases d'À faire. */
  --cordee-case-urgent: #d92d20; --cordee-case-ensuite: #f08c00; --cordee-case-important: #1c7ed6;
}
@media (prefers-color-scheme: dark) { :root {
  --cordee-sommet: #13283a; --cordee-sur-sommet: #e7eff5; --cordee-sommet-bord: #5aa7de;
  --cordee-eclair: #e0b50c; --cordee-sur-eclair: #1f2933; --cordee-eclair-doux: #2e2708;
  --cordee-pas: #6fd39b; --cordee-pas-doux: #12301f; --cordee-sur-pas: #06140c;
  --cordee-choix: #6fd39b; --cordee-choix-doux: #123623; --cordee-sur-choix: #06140c;
  --cordee-etoile: #ffd43b;
  --cordee-lt-0: #4a9ad6; --cordee-lt-1: #5a86cc; --cordee-lt-2: #8a74c4; --cordee-lt-3: #b763a8; --cordee-lt-4: #e05a78; --cordee-lt-5: #f0645a;
  --cordee-sur-lt: #0d1720; --cordee-lt-axe: #4c6072; --cordee-lt-jour: #6fd39b;
  --cordee-suivi-ok: #4f9f6f; --cordee-suivi-ok-doux: #12301f; --cordee-suivi-ok-texte: #6fd39b;
  --cordee-suivi-trop: #c65a52; --cordee-suivi-trop-doux: #3a1b19;
  --cordee-p0: #1f4c7a; --cordee-p1: #7a3e1d; --cordee-p2: #1f5c34; --cordee-p3: #553a80;
  --cordee-p4: #6b5410; --cordee-p5: #7a2a48; --cordee-p6: #145c58; --cordee-p7: #4f4a3c; --cordee-sur-personne: #f2f6f9;
  --cordee-case-urgent: #f0645a; --cordee-case-ensuite: #ffa94d; --cordee-case-important: #4dabf7;
} }
.cordee-monte { display: grid; gap: .75rem; position: relative; }
.cordee-monte > * { min-width: 0; }
.cordee-monte :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Titres du tableau, 3 niveaux : sections 1.15rem, colonnes 1rem, cases d'À faire .95rem (sans majuscules forcées). */
.cordee-monte h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.cordee-monte p { margin: 0; }
.cordee-annonce { padding: .5rem .75rem; border-radius: 8px; background: var(--accent-doux); color: var(--encre); }
.cordee-annonce.attention { background: var(--danger-doux); }
.cordee-annonce:empty { padding: 0; }
.cordee-moi:empty { display: none; }
.cordee-moi .message { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
/* Voile du début de cours : le formulaire du sommet couvre le tableau (le reste est inerte). */
.cordee-voile { position: absolute; inset: 0; z-index: 5; background: rgb(13 23 32 / 72%); border-radius: 10px; padding: 1rem; display: grid; justify-items: center; align-items: start; }
.cordee-voile[hidden] { display: none; }
.cordee-voile-carte { position: sticky; top: 1rem; width: min(36rem, 100%); background: var(--carte); color: var(--encre); border-radius: 16px; padding: 1.4rem; display: grid; gap: .8rem; box-shadow: 0 12px 40px rgb(0 0 0 / 35%); }
.cordee-voile-carte .grand-icone { font-size: 3rem; line-height: 1; }
.cordee-monte .cordee-voile-carte h2 { font-size: 1.6rem; margin: 0; }
.cordee-voile-carte input:not([type]) { font-size: 1.3rem; padding: .55rem .7rem; }
.cordee-monte .actions, .cordee-choix { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cordee-tableau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: start; }
.cordee-col { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre); padding: .7rem; min-width: 0; min-height: 8rem; }
.cordee-col h2 { font-size: 1rem; }
.cordee-barre-taches { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1rem; }
.cordee-monte .cordee-barre-taches h2 { margin: 0; font-size: 1.15rem; }
.cordee-creation { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem; }
.cordee-creation .champ { margin: 0; }
.cordee-creation .champ:first-child { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.cordee-creation input, .cordee-creation select { box-sizing: border-box; height: 2.6rem; font: inherit; }
.cordee-creation input[name="titre"] { width: min(18rem, 60vw); }
.cordee-creation .btn.creation { box-sizing: border-box; height: 2.6rem; min-height: 0; padding: 0 1rem; border-radius: 999px; font-size: 1rem; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.cordee-creation .btn.assistant .etoile { color: var(--cordee-etoile); font-size: 1.3em; line-height: 1; }
.cordee-matrice { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.cordee-case { border-radius: 10px; padding: .5rem; min-height: 5rem; min-width: 0; }
.cordee-case h3 { margin: 0; font-size: .95rem; }
.cordee-case .aide-case { font-size: .78rem; color: var(--encre-2); }
/* Cases d'À faire : Urgent en rouge, Ensuite en orange, Important en bleu (choix de l'utilisateur, 06.11.2026). */
.case-maintenant { background: color-mix(in srgb, var(--cordee-case-urgent) 15%, var(--carte)); }
.case-confier { background: color-mix(in srgb, var(--cordee-case-ensuite) 17%, var(--carte)); }
.case-planifier { background: color-mix(in srgb, var(--cordee-case-important) 15%, var(--carte)); }
/* Boutons d'une tâche du Camp de base : une pastille de la couleur de la case visée (le libellé dit la case). */
.cordee-tache .btn.vers-case { display: inline-flex; align-items: center; gap: .3rem; }
/* Nom propre à la Cordée : « .puce » seul écrasait les puces de l'accueil (année scolaire, mots-clés). */
.pastille-case { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; flex: none; border: 1px solid var(--encre-2); }
.pastille-case.case-maintenant { background: var(--cordee-case-urgent); } .pastille-case.case-confier { background: var(--cordee-case-ensuite); }
.pastille-case.case-planifier { background: var(--cordee-case-important); }
.cordee-liste { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.cordee-liste .vide { color: var(--encre-2); font-size: .85rem; font-style: italic; }
.cordee-tache { background: var(--carte); color: var(--encre); border: 1px solid var(--bord); border-left: 5px solid var(--s7); border-radius: 10px; padding: .45rem .6rem; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); display: grid; gap: .2rem; cursor: grab; }
.cordee-tache.q-maintenant { border-left-color: var(--cordee-case-urgent); }
.cordee-tache.q-confier { border-left-color: var(--cordee-case-ensuite); }
.cordee-tache.q-planifier { border-left-color: var(--cordee-case-important); }
.cordee-tache.cadenas { background: var(--vide); border-style: dashed; border-left-style: solid; }
.cordee-tache.a-moi { box-shadow: 0 0 0 2px var(--accent); }
.cordee-tache.glisse { opacity: .5; }
.cordee-tache .titre { font-weight: 600; overflow-wrap: anywhere; }
.cordee-tache .meta { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .82rem; color: var(--encre-2); }
.cordee-tache .meta span { overflow-wrap: anywhere; }
/* Pastille d'une personne : même couleur sur les cartes et dans l'équipe (classePersonne). */
.cordee-monte .qui { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.cordee-monte .personne { display: inline-block; border-radius: 999px; padding: .05rem .55rem; font-weight: 700; color: var(--cordee-sur-personne);
  background: var(--vide); border: 1px solid var(--bord); }
.cordee-monte .personne.p-0 { background: var(--cordee-p0); } .cordee-monte .personne.p-1 { background: var(--cordee-p1); }
.cordee-monte .personne.p-2 { background: var(--cordee-p2); } .cordee-monte .personne.p-3 { background: var(--cordee-p3); }
.cordee-monte .personne.p-4 { background: var(--cordee-p4); } .cordee-monte .personne.p-5 { background: var(--cordee-p5); }
.cordee-monte .personne.p-6 { background: var(--cordee-p6); } .cordee-monte .personne.p-7 { background: var(--cordee-p7); }
.cordee-tache .depassee, .cordee-tache .sos { color: var(--danger); font-weight: 600; }
.cordee-tache .btn.petit, .cordee-eclair .btn.petit { min-height: 32px; padding: .2rem .55rem; font-size: .85rem; }
.col-termine .cordee-tache { cursor: default; }
.survol { outline: 3px dashed var(--accent); outline-offset: 2px; }
.cordee-eclairs { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cordee-eclairs .vide { color: var(--encre-2); font-style: italic; }
.cordee-eclair { display: inline-flex; gap: .2rem; align-items: center; }
.cordee-eclair .btn.eclair { background: var(--cordee-eclair); color: var(--cordee-sur-eclair); border-color: var(--cordee-eclair); border-radius: 999px; overflow-wrap: anywhere; text-align: left; }
.cordee-dialogue { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); background: var(--carte); color: var(--encre); }
.cordee-dialogue::backdrop { background: rgb(0 0 0 / 50%); }
.cordee-dialogue h2 { margin-top: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.cordee-dialogue h3 { margin: .5rem 0 .3rem; font-size: .95rem; }
.cordee-dialogue-corps { display: grid; gap: .75rem; }
.cordee-dialogue-corps p { margin: 0; }
.cordee-dialogue fieldset { border: 1px solid var(--bord); border-radius: 8px; padding: .5rem .75rem; margin: 0; display: grid; gap: .4rem; }
.cordee-form-dialogue { display: grid; gap: .5rem; }
/* Boutons des fenêtres en bas à droite : [à gauche (ex. Supprimer)] … [Annuler] [principal]. */
.cordee-form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end;
  border-top: 1px solid var(--bord); padding-top: .75rem; margin-top: .25rem; }
.cordee-form-actions .a-gauche { margin-right: auto; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cordee-form-actions .a-gauche:empty { display: none; }
.cordee-form-actions .a-gauche > .cordee-choix > .message { flex-basis: 100%; margin: 0; }
.cordee-coches label { display: flex; gap: .4rem; align-items: center; overflow-wrap: anywhere; }
.cordee-dialogue-bas { border-top: 1px solid var(--bord); padding-top: .5rem; display: flex; justify-content: flex-end; }
.cordee-dialogue .aide { color: var(--encre-2); font-size: .9rem; }
.cordee-assistant { display: grid; gap: .75rem; }
.cordee-assistant h3 { margin: 0; }
.cordee-assistant h4 { margin: .4rem 0 .2rem; font-size: .9rem; }
.cordee-assistant ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cordee-option { display: flex; gap: .5rem; align-items: flex-start; overflow-wrap: anywhere; }
.cordee-option input { margin-top: .25rem; flex: none; }
.cordee-option .texte { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; min-width: 0; }
.cordee-option .texte strong { flex-basis: 100%; }
.cordee-assistant .meta { color: var(--encre-2); font-size: .85rem; }
.cordee-assistant .tag { display: inline-block; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--vide); color: var(--encre); font-size: .78rem; font-weight: 600; }
.cordee-assistant .aide-suggestion { margin: .1rem 0 0 1.6rem; color: var(--encre-2); font-size: .85rem; overflow-wrap: anywhere; }
.cordee-suggestions input:disabled + .texte { opacity: .7; }
.cordee-parcours { display: grid; gap: .5rem; }
.cordee-parcours > .btn { justify-self: start; }
.cordee-parcours-filtres { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .5rem; }
.cordee-parcours-filtres input, .cordee-parcours-filtres select { width: 100%; }
.cordee-parcours-liste { max-height: 18rem; overflow-y: auto; }
.cordee-parcours-liste .btn { width: 100%; text-align: left; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .cordee-parcours-filtres { grid-template-columns: minmax(0, 1fr); } }
/* Assistant : panneau par-dessus le tableau ; au centre la tâche, à gauche « avant », à droite « après » ; choisi = vert. */
.cordee-dialogue.cordee-panneau { width: min(74rem, calc(100% - 1.5rem)); height: min(54rem, calc(100% - 1.5rem)); max-width: none; max-height: none; padding: 0; overflow: hidden; }
.cordee-dialogue.cordee-panneau[open] { display: flex; flex-direction: column; }
.cordee-dialogue.cordee-panneau::backdrop { background: rgb(6 20 30 / 62%); }
.cordee-panneau > h2 { margin: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--bord); }
.cordee-panneau .cordee-dialogue-corps { flex: 1; min-height: 0; display: flex; }
.cordee-pa { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
.cordee-pa-grille { display: grid; grid-template-columns: minmax(0, 36rem); justify-content: center; gap: 1rem; padding: 1rem; overflow: auto; align-items: start; }
.cordee-pa-grille.choisie { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); justify-content: stretch; }
.cordee-pa-centre { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.cordee-pa-saisie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.cordee-pa-saisie input { width: 100%; font-size: 1.1rem; min-height: 3rem; }
.cordee-pa-saisie select { min-height: 3rem; }
.cordee-pa-col { display: grid; gap: .5rem; align-content: start; padding: .6rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); min-width: 0; }
.cordee-pa-col h3 { margin: 0; font-size: 1rem; }
.cordee-pa-col .aide.attention { color: var(--encre); font-weight: 600; }
.cordee-assistant .cordee-pa-liste { gap: .5rem; }
.cordee-pa-carte { width: 100%; text-align: left; font: inherit; color: var(--encre); background: var(--carte); border: 2px solid var(--bord); border-radius: 12px; padding: .6rem .75rem .6rem 2.4rem; min-height: 3rem; cursor: pointer; position: relative; display: grid; gap: .1rem; overflow-wrap: anywhere; }
.cordee-pa-carte::before { content: ""; position: absolute; left: .7rem; top: .8rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--encre-2); box-sizing: border-box; }
.cordee-pa-carte:hover:not(:disabled) { border-color: var(--cordee-choix); }
.cordee-pa-carte[aria-pressed="true"] { border-color: var(--cordee-choix); background: var(--cordee-choix-doux); }
.cordee-pa-carte[aria-pressed="true"]::before { content: "✓"; background: var(--cordee-choix); border-color: var(--cordee-choix); color: var(--cordee-sur-choix); font-size: .75rem; font-weight: 800; line-height: .95rem; text-align: center; }
.cordee-pa-carte:disabled { cursor: not-allowed; opacity: .6; }
.cordee-pa-carte .tag { justify-self: start; }
.cordee-pa-carte .aide-suggestion { margin: .15rem 0 0; }
.cordee-pa-centre .cordee-pa-carte[aria-pressed="true"] { border-width: 3px; box-shadow: 0 0 0 4px var(--cordee-choix-doux); }
.cordee-pa-centre.choisie .cordee-pa-carte[aria-pressed="false"] { opacity: .6; }
.cordee-pa-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--bord); }
.cordee-pa-pied .cordee-pa-resume { margin: 0 auto 0 0; font-weight: 600; }
.cordee-pa-pied .message { flex-basis: 100%; }
.cordee-pa-pied .btn.cordee-pa-ajouter:not(:disabled), .cordee-pa-pied .btn.cordee-pa-ajouter:not(:disabled):hover { background: var(--cordee-choix); border-color: var(--cordee-choix); color: var(--cordee-sur-choix); }
@media (max-width: 54rem) {
  .cordee-dialogue.cordee-panneau { width: 100%; height: 100%; border-radius: 0; }
  .cordee-pa-grille.choisie { grid-template-columns: minmax(0, 1fr); }
  .cordee-pa-grille.choisie .cordee-pa-centre { order: -1; }
}
.cordee-pas-moi { display: flex; justify-content: flex-end; margin: 0 0 .5rem; }
.cordee-entree { display: grid; gap: .75rem; }
.cordee-entree h2 { margin: 0; }
.cordee-code { display: grid; gap: .5rem; max-width: 20rem; }
.cordee-code label { font-weight: 700; }
.cordee-code input { font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
@media (max-width: 64rem) { .cordee-tableau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .col-a-faire { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 40rem) { .cordee-tableau { grid-template-columns: minmax(0, 1fr); } .col-a-faire { grid-row: auto; } }
/* Bandeau d'effacement de fin d'année (accueil) */
.bandeau-effacement { margin-bottom: 1rem; }
.bandeau-effacement h2 { margin-top: 0; font-size: 1.1rem; }
.tableau-effacement { width: 100%; border-collapse: collapse; margin-bottom: .75rem; }
.tableau-effacement th, .tableau-effacement td { padding: .4rem .5rem; text-align: left; border-bottom: 1px solid var(--bord); }
.tableau-effacement td:nth-child(n+3), .tableau-effacement th:nth-child(n+3) { text-align: center; width: 5rem; }
/* Cordée : page « Personnaliser la base » (pages-cordees.tsx), sans JavaScript. */
.cordee-base-compte { font-weight: 700; }
.cordee-base-filtre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .75rem; }
.cordee-base-etape h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.cordee-base-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cordee-base-ligne { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); }
.cordee-base-ligne .texte { display: grid; gap: .1rem; min-width: 0; flex: 1 1 18rem; overflow-wrap: anywhere; }
.cordee-base-ligne .titre { font-weight: 600; }
.cordee-base-ligne .meta { color: var(--encre-2); font-size: .88rem; }
.cordee-base-ligne .tag { display: inline-block; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--cordee-choix); color: var(--encre); background: var(--cordee-choix-doux); font-size: .78rem; font-weight: 600; }
.cordee-base-ligne .actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cordee-base-ligne form { margin: 0; }
.cordee-base-ligne.retiree { background: var(--fond); border-style: dashed; }
.cordee-base-ligne.retiree .titre { text-decoration: line-through; color: var(--encre-2); }
.cordee-base-suppression summary { list-style: none; cursor: pointer; }
.cordee-base-suppression summary::-webkit-details-marker { display: none; }
.cordee-base-suppression[open] { display: flex; gap: .35rem; align-items: center; }

/* ---------- Cordée : fiches de connexion (une par élève, à découper) ---------- */
/* La fiche reste « papier » (fond blanc, encre foncée) même en thème sombre : c'est ce qui sera imprimé. */
.cordee-fiches-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cordee-fiches-liste li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.cordee-fiches-liste .prenom { font-weight: 700; }
.cordee-fiches-liste .aide { margin: 0; }
.cordee-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin-top: 1rem; border: 1px dashed #52606d; background: #fff; }
.cordee-fiche { border: 1px dashed #52606d; padding: .8rem; display: grid; justify-items: center; gap: .25rem; text-align: center; color: #16293a; background: #fff; break-inside: avoid; }
.cordee-fiche p { margin: 0; }
.cordee-fiche img { width: 150px; height: 150px; }
.cordee-fiche .prenom { font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.cordee-fiche .code { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; letter-spacing: .12em; font-weight: 700; }
.cordee-fiche .projet, .cordee-fiche .groupe, .cordee-fiche .mention { font-size: .8rem; color: #4c6072; overflow-wrap: anywhere; }
@media print {
  body[data-page="cordee-fiches"] .barre, body[data-page="cordee-fiches"] .fil, .cordee-fiches-gestion { display: none; }
  .cordee-fiches { grid-template-columns: repeat(3, 1fr); border: 0; margin: 0; }
}

/* Panneau de choix d'un élément pour une case de support */
.panneau-choix { width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre); }
.panneau-choix::backdrop { background: rgb(0 0 0 / .5); }
.panneau-choix[open] { display: flex; flex-direction: column; }
.pc-tete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bord); }
.pc-tete h2 { margin: 0; font-size: 1.15rem; }
.pc-filtres { display: grid; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bord); }
.pc-puces { display: flex; flex-wrap: wrap; gap: .35rem; }
.pc-puces:empty { display: none; }
.pc-puces .puce { border: 1px solid var(--bord); background: transparent; color: inherit; cursor: pointer; }
.pc-puces .puce.actif { background: var(--accent); border-color: var(--accent); color: var(--carte); }
.pc-filtres input[type="search"] { width: 100%; padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--fond); color: inherit; font: inherit; }
.pc-puces .puce { font: inherit; font-size: .9em; }
.pc-corps { display: grid; grid-template-columns: 240px 1fr; min-height: 0; flex: 1; overflow: hidden; }
.pc-dossiers, .pc-liste { overflow-y: auto; padding: .75rem; min-height: 16rem; }
.pc-dossiers { border-right: 1px solid var(--bord); }
.pc-dossiers ul, .pc-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.pc-dossier { width: 100%; padding: .35rem .5rem; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pc-dossier:hover, .pc-element:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, var(--carte)); }
.pc-dossier.actif { background: color-mix(in srgb, var(--accent) 22%, var(--carte)); font-weight: 600; }
.pc-niv-1 { padding-left: .5rem; } .pc-niv-2 { padding-left: 1.25rem; } .pc-niv-3 { padding-left: 2rem; } .pc-niv-4 { padding-left: 2.75rem; } .pc-niv-5 { padding-left: 3.5rem; }
.pc-element { display: grid; gap: .15rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--bord); border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pc-element:disabled { opacity: .65; cursor: not-allowed; }
.pc-refus { font-style: italic; }
.pc-section { margin-top: .6rem; padding: .25rem .5rem; font-size: .85rem; font-weight: 600; color: var(--encre-2); }
@media (max-width: 640px) {
  .pc-corps { grid-template-columns: 1fr; overflow-y: auto; }
  .pc-dossiers { border-right: 0; border-bottom: 1px solid var(--bord); min-height: 0; max-height: 11rem; }
  .pc-liste { min-height: 0; overflow: visible; }
}

/* Épingles : placer des mots sur une image */
:root { --e-neutre: #1b6ca8; --e-juste: #2e7d4f; --e-juste-doux: #e3f1e8; --e-faux: #c0264d; --e-faux-doux: #fdecef; }
@media (prefers-color-scheme: dark) { :root { --e-juste-doux: #1d3326; --e-faux-doux: #3a1b24; } }
.ep-plateau, .ep-edition { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ep-resume { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .ep-resume { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .ep-plateau, .ep-edition { grid-template-columns: minmax(0, 1fr); } }
.ep-image { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); background: var(--carte); user-select: none; -webkit-user-select: none; }
.ep-image img { display: block; width: 100%; height: auto; pointer-events: none; }
.ep-calque, .ep-trace { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ep-trace polyline { fill: none; stroke: #16293a; stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
/* La pointe du crayon (2, 22) est le point exact du tracé. */
.ep-dessin { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z' fill='%23f4c542' stroke='%2316293a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 22, crosshair; touch-action: none; }
.ep-en-attente { cursor: copy; outline: 3px dashed var(--accent); outline-offset: -3px; }
.ep-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; touch-action: none; cursor: grab; padding: 0; border: 0; background: none; font: inherit; }
div.ep-pin { cursor: default; }
.ep-pin svg { width: 30px; height: 40px; display: block; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 30%)); }
.ep-pin.neutre svg path:first-child { fill: var(--e-neutre); }
.ep-pin.juste svg path:first-child { fill: var(--e-juste); }
.ep-pin.faux svg path:first-child { fill: var(--e-faux); }
.ep-pin.choisi .ep-pin-mot { outline: 3px solid var(--focus); }
.ep-pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ep-pin-mot { background: #fff; color: #16293a; font-size: .78rem; font-weight: 700; padding: 0 .4rem; border-radius: 6px; white-space: nowrap; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); margin-bottom: 1px; }
.ep-calque[hidden], .ep-pin[hidden] { display: none; }
.ep-fantome { position: fixed; z-index: 50; pointer-events: none; }
.ep-curseur { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 3px solid var(--focus); border-radius: 50%; background: rgb(255 255 255 / 45%); pointer-events: none; }
.ep-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid #fff; background: var(--e-neutre); }
.ep-point.juste { background: var(--e-juste); }
.ep-point.faux { background: var(--e-faux); }
.ep-banque { display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); min-height: 62px; align-content: flex-start; }
.ep-mot { min-height: 44px; padding: .3rem .85rem; border-radius: 999px; border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; cursor: grab; touch-action: none; }
.ep-mot.fixe { display: inline-flex; align-items: center; cursor: default; }
.ep-mot.choisi { border-color: var(--accent); background: var(--accent-doux); }
.ep-mot:disabled { cursor: default; opacity: .7; }
.ep-liste-mots { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ep-ligne-mot { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border: 2px solid var(--bord); border-radius: 10px; }
.ep-ligne-mot.actif { border-color: var(--accent); background: var(--accent-doux); }
.ep-ligne-mot input { flex: 1; min-width: 0; }
.ep-pastille { width: 26px; height: 26px; flex: none; border-radius: 6px; border: 2px solid #ffffffaa; cursor: pointer; }
.message-zone { min-height: 1.6em; margin: .5rem 0 0; font-weight: 600; color: var(--accent-fort); }
.badge { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--vide); color: var(--encre-2); }
.badge.juste { background: var(--e-juste-doux); color: var(--e-juste); }
.badge.faux { background: var(--e-faux-doux); color: var(--e-faux); }
@media (prefers-color-scheme: dark) { .badge.juste { color: #7fd6a4; } .badge.faux { color: #f59ab2; } }
.ep-table { width: 100%; border-collapse: collapse; }
.ep-table th, .ep-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.ep-table tbody tr { cursor: pointer; }
.ep-table tbody tr:hover, .ep-table tbody tr.choisi { background: var(--accent-doux); }
.ep-score { font-weight: 800; white-space: nowrap; }
.ep-stats { display: grid; gap: .2rem; }
.ep-barre-mot { display: grid; grid-template-columns: 7rem 1fr 3rem; gap: .5rem; align-items: center; width: 100%; padding: .3rem .4rem; border: 2px solid transparent; background: none; color: var(--encre); font: inherit; cursor: pointer; border-radius: 8px; text-align: left; }
.ep-barre-mot.actif { border-color: var(--accent); background: var(--accent-doux); }

/* ---------- QR code ---------- */
.qr-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .qr-grille { grid-template-columns: 1fr; } }
.qr-reglages { display: grid; gap: 1rem; min-width: 0; }
.qr-bloc { border: 1px solid var(--bord); border-radius: 10px; padding: .75rem 1rem 1rem; margin: 0; display: grid; gap: .75rem; min-width: 0; }
.qr-bloc legend, .qr-bloc > summary { font-weight: 700; padding: 0 .25rem; }
.qr-bloc > summary { cursor: pointer; }
details.qr-bloc[open] > summary { margin-bottom: .5rem; }
.qr-volet { display: grid; gap: .6rem; }
.qr-volet[hidden], .qr-si-degrade[hidden], .qr-si-lineaire[hidden], .qr-si-yeux[hidden], .qr-si-logo[hidden] { display: none; }
.qr-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem 1rem; }
.qr-ligne { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.5rem; }
.qr-couleur, .qr-case { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.qr-couleur input[type="color"] { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); cursor: pointer; }
.qr-case input { width: 1.15rem; height: 1.15rem; }
.qr-curseur input[type="range"] { width: 100%; max-width: 320px; }
.qr-formes { display: flex; flex-wrap: wrap; gap: .5rem; }
.qr-forme { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .7rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.qr-forme:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.qr-forme:has(input:focus-visible) { outline: 3px solid var(--focus, #1d4ed8); outline-offset: 2px; }
.qr-forme input { position: absolute; opacity: 0; pointer-events: none; }
.qr-pastille { width: 18px; height: 18px; background: currentColor; }
.qr-pastille-rond { border-radius: 50%; }
.qr-pastille-arrondi { border-radius: 5px; transform: scale(.9); }
.qr-pastille-losange { transform: rotate(45deg) scale(.75); }
.qr-pastille-fluide { border-radius: 9px 9px 2px 9px; }
.qr-apercu { position: sticky; top: 1rem; display: grid; gap: .75rem; }
@media (max-width: 900px) { .qr-apercu { position: static; } }
/* Damier : rend visible un fond transparent. */
.qr-damier { border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#e6ebef 0 25%, #ffffff 0 50%) 0 0 / 20px 20px; }
#qr-dessin { aspect-ratio: 1; display: grid; }
#qr-dessin svg { width: 100%; height: 100%; display: block; }
.qr-avertissements { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.qr-avertissements:empty { display: none; }
.qr-avertissements li { padding: .55rem .8rem; border-radius: 8px; background: var(--danger-doux); color: var(--danger); font-size: .92rem; }
.qr-projection { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; cursor: zoom-out; }
.qr-projection svg { width: min(92vw, 92vh); height: min(92vw, 92vh); }
.qr-reglages input[type="url"], .qr-reglages input[type="email"], .qr-reglages input[type="tel"] {
  font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px; width: 100%;
}
.qr-reglages textarea { width: 100%; }
/* Vidéo interactive : éditeur en frise (lecteur et frise à gauche, question de la pause choisie à droite, dessous sous 800 px) */
#video-statut { position: sticky; top: 0; z-index: 4; background: var(--carte); margin: 0; padding: .3rem 0; }
.video-editeur { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 800px) { .video-editeur { grid-template-columns: minmax(0, 1fr); } }
.video-gauche { min-width: 0; }
.video-editeur .apercu-video { max-width: none; }
.frise { display: grid; gap: .35rem; margin-top: .75rem; }
.frise-entete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.frise-piste { position: relative; height: 2.75rem; cursor: pointer; }
.frise-rail { position: absolute; inset: 0 .9rem; }
.frise-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); background: var(--vide); border-radius: 3px; }
.frise-progression { position: absolute; left: 0; top: 50%; width: 0; height: 6px; transform: translateY(-50%); background: var(--accent); border-radius: 3px; pointer-events: none; }
.frise-points { position: absolute; inset: 0; }
.frise-point { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.75rem; height: 1.75rem; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--carte); border-radius: 50%; background: var(--accent-fort); color: var(--sur-accent); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.frise-point[aria-pressed="true"] { background: var(--carte); color: var(--accent-fort); border-color: var(--accent-fort); box-shadow: 0 0 0 2px var(--accent-fort); z-index: 1; }
.frise-point.incomplete { background: var(--p-aide-doux); color: var(--encre); border: 2px dashed var(--e-alerte); }
.frise-point.incomplete[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--e-alerte); }
.frise-point:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 2; }
.frise-graduation { display: flex; justify-content: space-between; padding: 0 .9rem; font-size: .8rem; color: var(--encre-2); }
.frise-message { margin: .25rem 0 0; }
.frise-message:empty, .video-panneau [data-message-temps]:empty { display: none; }
.video-panneau { min-width: 0; border: 1px solid var(--bord); border-radius: 10px; padding: .75rem; background: var(--carte); }
.video-panneau .palette-types { margin: .5rem 0; }
.video-panneau [aria-invalid="true"] { border-color: var(--danger); }

/* Examen : case « Vidéo » (lien, lecture, frise avec point de fin, reprise d'une Vidéo interactive) */
.case-video-examen { display: grid; gap: .5rem; }
.case-video-examen .choix-lecture { border: 1px solid var(--bord); border-radius: 10px; padding: .4rem .75rem .6rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.case-video-examen .choix-lecture legend { padding: 0 .3rem; font-weight: 600; }
.case-video-examen .video-editeur { margin-top: 0; }
.case-video-examen [aria-invalid="true"] { border-color: var(--danger); }
.frise-fin { position: absolute; top: 15%; bottom: 15%; width: 4px; transform: translateX(-50%); background: var(--danger); border-radius: 2px; pointer-events: none; }
.fin-video { margin-top: .25rem; }
.dialogue-video-examen { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; max-width: 32rem; width: calc(100% - 2rem); background: var(--carte); color: var(--encre); }
.dialogue-video-examen::backdrop { background: rgb(0 0 0 / 40%); }
.dialogue-video-examen h2 { margin-top: 0; }
.dialogue-video-examen .erreur:empty { display: none; }
.liste-reprise { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .4rem; max-height: 50vh; overflow-y: auto; }
.liste-reprise .btn { width: 100%; justify-content: flex-start; text-align: left; }
.liste-reprise .ico { width: 18px; height: 18px; flex: none; }

/* Vidéo interactive : page de l'élève (lecteur, frise à points, question sous la vidéo) */
.video-eleve .lecteur-video { margin-bottom: .75rem; }
.frise-eleve { padding: 0 .6rem; }
.frise-eleve-rail { position: relative; height: 1.25rem; }
.frise-eleve-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: var(--vide); border-radius: 2px; }
.frise-eleve-point { position: absolute; top: 50%; width: .9rem; height: .9rem; transform: translate(-50%, -50%); border: 2px solid var(--accent-fort); border-radius: 50%; background: var(--carte); box-sizing: border-box; }
.frise-eleve-point.fait { background: var(--accent-fort); }
.frise-eleve-texte { margin: .25rem 0 .75rem; text-align: center; color: var(--encre-2); font-size: .9rem; }
.question-sous-video { margin-top: .75rem; padding: 1rem; border: 2px solid var(--p-cours); border-radius: 10px; background: var(--carte); overflow-wrap: anywhere; }
.question-sous-video[hidden] { display: none; }
.titre-question-video { margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; color: var(--encre-2); }
.titre-question-video:focus { outline: none; }
.titre-question-video:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.retour.neutre { background: var(--accent-doux); }
.explication-video { color: var(--encre-2); }
.score-video { font-size: 1.3rem; text-align: center; }
.enonce-bilan { margin: .25rem 0; white-space: pre-line; }
.verdict-video { margin: .25rem 0; font-weight: 600; }
.boutons-video { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }


/* Vidéo interactive en direct : écran projeté. Pendant une pause, le lecteur sort de l'écran sans être masqué : un cadre en display:none perd son lecteur. */
.contenu-video { min-width: 0; display: grid; gap: 1rem; }
.presentation-video .actions .actions { display: inline-flex; gap: .5rem; }
.presentation-video[data-phase="attente"] .lecteur-video, .presentation-video[data-phase="fin"] .lecteur-video { display: none; }
.presentation-video[data-phase="pause"] .lecteur-video, .presentation-video[data-phase="resultats"] .lecteur-video { position: absolute; left: -9999px; width: 640px; }
.enonce-projete { margin: .25rem 0 1rem; white-space: pre-line; overflow-wrap: anywhere; }
.liste-projetee { margin: 0; padding-left: 1.25rem; font-size: 1.3rem; display: grid; gap: .4rem; overflow-wrap: anywhere; }
.colonnes-projetees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.resume-video { display: grid; gap: .6rem; margin-top: 1rem; }
.barre-video { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 4rem; gap: .75rem; align-items: center; font-size: 1.2rem; overflow-wrap: anywhere; }
.barre-video b { text-align: right; }
.classement-projete { margin: 0; padding-left: 1.5rem; font-size: 1.2rem; display: grid; gap: .4rem; }
.classement-projete li span + span { margin-left: .75rem; }
.solution-projetee { margin-top: 1rem; padding: .75rem 1rem; border: 2px solid var(--accent-fort); border-radius: 10px; font-size: 1.2rem; overflow-wrap: anywhere; }

/* Groupes : vue projetée du lien PowerPoint (prénoms en grand, lecture seule). */
.repartition-projection { padding: 1rem; }
.repartition-projection h1 { margin: 0 0 1rem; }
.repartition-tableau { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.repartition-groupe { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: .75rem 1rem; }
.repartition-groupe h2 { font-size: 1.2rem; margin: 0 0 .4rem; }
.repartition-groupe ul { list-style: none; margin: 0; padding: 0; font-size: 1.25rem; display: grid; gap: .2rem; overflow-wrap: anywhere; }
.repartition-vide { font-size: 1.3rem; color: var(--encre-2); }

/* Groupes : page de travail (maquette apps/matrice/maquette-groupes). Niveaux 1 à 5 en couleurs, bandeau de sauvegarde. */
:root { --g-alerte: #8a5a00; --g-alerte-doux: #fff4dc; --g-alerte-bord: #f0c36d; --g-absent-doux: #f1f1f4;
  --g-n1: #c0264d; --g-n2: #c46a12; --g-n3: #8a7a00; --g-n4: #3f8a4d; --g-n5: #1b6ca8; --g-sur-niveau: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --g-alerte: #f5c97a; --g-alerte-doux: #33280f; --g-alerte-bord: #6b531f; --g-absent-doux: #1b2630;
  --g-n1: #f59ab2; --g-n2: #f2b27a; --g-n3: #e0d37a; --g-n4: #8fd3a0; --g-n5: #8cc8e8; --g-sur-niveau: #06141c; } }
.sauvegarde-bandeau { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; padding: .8rem 1rem; border-radius: 10px; background: var(--g-alerte-doux); border: 1px solid var(--g-alerte-bord); margin: 0 0 1rem; }
.sauvegarde-bandeau strong { color: var(--g-alerte); }
.sauvegarde-bandeau p { margin: 0; flex: 1 1 320px; }
.sauvegarde-bandeau .actions { margin-top: 0; }
.rep-confidentiel { color: var(--encre-2); font-size: .9rem; }
.rep-etapes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rep-etapes .btn { border-radius: 999px; }
.rep-etapes .btn.actif { background: var(--accent-doux); border-color: var(--accent); }
.rep-num { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--vide, #e3e9ee); font-size: .8rem; margin-right: .35rem; }
.rep-etapes .actif .rep-num { background: var(--accent); color: var(--sur-accent); }
#rep-liste { width: 100%; min-height: 150px; }
.rep-ligne { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .4rem 0; }
.rep-matieres { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.rep-matieres .btn.actif { background: var(--accent-doux); border-color: var(--accent); }
.rep-niveaux { margin-top: 1rem; }
.rep-niveaux table { width: 100%; border-collapse: collapse; }
.rep-niveaux th, .rep-niveaux td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--bord); }
.rep-niv { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; }
.rep-niv button { min-width: 40px; min-height: 40px; border: 0; border-right: 1px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; }
.rep-niv button:last-child { border-right: 0; }
.rep-niv button:focus-visible { outline: 3px solid var(--focus, #1d4ed8); outline-offset: -3px; }
.rep-niv button[aria-pressed="true"] { color: var(--g-sur-niveau); }
.rep-niv button[data-n="1"][aria-pressed="true"], .rep-point[data-n="1"] { background: var(--g-n1); }
.rep-niv button[data-n="2"][aria-pressed="true"], .rep-point[data-n="2"] { background: var(--g-n2); }
.rep-niv button[data-n="3"][aria-pressed="true"], .rep-point[data-n="3"] { background: var(--g-n3); }
.rep-niv button[data-n="4"][aria-pressed="true"], .rep-point[data-n="4"] { background: var(--g-n4); }
.rep-niv button[data-n="5"][aria-pressed="true"], .rep-point[data-n="5"] { background: var(--g-n5); }
.rep-tableau { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.rep-groupe { border: 1px solid var(--bord); border-radius: 10px; padding: .6rem; background: var(--carte); min-height: 110px; }
.rep-groupe.cible { border-color: var(--accent); background: var(--accent-doux); }
.rep-groupe header { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; margin-bottom: .4rem; }
.rep-groupe h3 { margin: 0; font-size: 1rem; }
.rep-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rep-absents { margin-top: .8rem; background: var(--g-absent-doux); border-style: dashed; min-height: 70px; }
.rep-absents ul { display: flex; flex-wrap: wrap; }
.rep-eleve { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); cursor: grab; user-select: none; overflow-wrap: anywhere; }
.rep-eleve:focus-visible { outline: 3px solid var(--focus, #1d4ed8); outline-offset: 2px; }
.rep-eleve.saisi { opacity: .45; }
.rep-eleve.choisi { outline: 2px solid var(--accent); }
.rep-point { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--bord); }
.rep-deplacer { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .6rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--accent-doux); }
.rep-impression { display: none; }
@media print {
  body[data-page="repartition"] .rep-impression { display: block; }
  body[data-page="repartition"] main > *:not(#repartition), body[data-page="repartition"] #repartition > *:not(.rep-impression) { display: none !important; }
  .rep-impression .rep-groupe { break-inside: avoid; }
}

/* ---------- Import de listes : bouton mis en avant et panneau (maquette : apps/matrice/maquette-import-ia) ---------- */
.btn-import {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem 1.1rem .5rem .6rem;
  border: 2px solid var(--accent); border-radius: 10px; background: var(--accent-doux); color: var(--accent-fort);
  text-decoration: none; text-align: left; line-height: 1.25; transition: background .15s, transform .15s;
}
.btn-import:hover { background: color-mix(in srgb, var(--accent) 16%, var(--carte)); transform: translateY(-1px); }
.btn-import .pastille { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: var(--sur-accent); flex: none; }
.btn-import svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Étoile jaune, dans le prolongement de la pointe de flèche : entre deux de ses branches, sans la toucher. */
.btn-import svg .etincelle { fill: #f5c84c; stroke: none; }
.btn-import b { display: block; font-size: 1.02rem; }
.btn-import small { display: block; color: var(--encre-2); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .btn-import { transition: none; } .btn-import:hover { transform: none; } }

.panneau-import .pi-form { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre); }
.pi-commun { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1rem; padding: 1rem 1.1rem 0; align-items: start; }
.pi-commun .champ-court select, .pi-commun select { width: 100%; min-width: 0; }
.pi-commun .pi-titre { grid-column: span 2; }
/* Deux couleurs du thème (celles des icônes) : la première pour l'importation manuelle, la deuxième pour l'Assistant IA. */
.panneau-import {
  --couleur-manuel: var(--ic1); --couleur-ia: var(--ic2);
  --titre-manuel: color-mix(in srgb, var(--ic1) 80%, var(--encre)); --titre-ia: color-mix(in srgb, var(--ic2) 80%, var(--encre));
}
/* Rangée en 3 colonnes : titre à gauche, interrupteur centré exactement entre les deux zones, titre à droite.
   Interrupteur : rond blanc numéroté (1 = manuelle, 2 = Assistant IA), piste à la couleur de la méthode choisie. */
.pi-choix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .6rem 1.1rem; border-bottom: 1px solid var(--bord); }
.pi-nom { font: inherit; font-size: 1.365rem; font-weight: 700; line-height: 1.2; border: 0; background: none; cursor: pointer; padding: .3rem .2rem; border-radius: 6px; }
.pi-nom[data-methode="manuel"] { justify-self: start; text-align: left; color: var(--titre-manuel); }
.pi-nom[data-methode="ia"] { justify-self: end; text-align: right; color: var(--titre-ia); }
/* Titre de la méthode non choisie : grisé. */
.pi-nom[aria-current="false"] { color: var(--encre-2); opacity: .45; }
.pi-nom[aria-current="false"]:hover { opacity: .75; }
.pi-interrupteur { --piste: var(--couleur-manuel);
  position: relative; width: 65px; height: 34px; flex: none; border: 0; border-radius: 99px; padding: 0; cursor: pointer;
  background: var(--piste); box-shadow: inset 0 2px 5px rgb(0 0 0 / 22%); transition: background .2s ease; }
.pi-interrupteur[aria-checked="true"] { --piste: var(--couleur-ia); }
.pi-interrupteur:hover { background: color-mix(in srgb, var(--piste) 82%, #000); }
.pi-interrupteur .rond { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .8rem; color: var(--piste); background: linear-gradient(145deg, #ffffff, #e4e8ec);
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%), inset 0 -1px 0 rgb(0 0 0 / 8%); transition: left .2s ease, color .2s ease; }
.pi-interrupteur[aria-checked="true"] .rond { left: 35px; }
@media (prefers-reduced-motion: reduce) { .pi-interrupteur, .pi-interrupteur .rond { transition: none; } }

.pi-corps { display: grid; grid-template-columns: 1fr 1fr; }
.pi-zone { position: relative; min-width: 0; padding: 1rem 1.1rem 1.1rem; }
.pi-zone + .pi-zone { border-left: 1px solid var(--bord); }
.pi-zone > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .8rem; align-content: start; }
/* Zone choisie : teinte très claire de sa couleur. */
.pi-zone.choisie[data-zone="manuel"] { background: color-mix(in srgb, var(--couleur-manuel) 7%, var(--carte)); }
.pi-zone.choisie[data-zone="ia"] { background: color-mix(in srgb, var(--couleur-ia) 5%, var(--carte)); }
/* Zone non choisie : grisée et désactivée ; un clic dessus la choisit (bouton transparent posé par-dessus). */
.pi-zone:not(.choisie) > fieldset { opacity: .42; filter: grayscale(1); }
.pi-activer { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.pi-activer:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pi-zone.choisie .pi-activer { display: none; }
/* « Format attendu » : un simple texte, pas un champ. */
.format-attendu { margin: 0; font-size: .9rem; color: var(--encre-2); }
.format-attendu b { color: var(--encre); }
.zone-colle { position: relative; }
.zone-colle textarea { font: .88rem/1.45 ui-monospace, Consolas, monospace; }
.zone-colle .bouton-coller { position: absolute; right: .5rem; bottom: .5rem; }
.zone-colle:has(small.erreur) .bouton-coller { bottom: 2rem; }
.avis-ia { margin: 0; font-size: .85rem; color: var(--encre-2); border-left: 3px solid var(--e-alerte); padding: .2rem 0 .2rem .6rem; }
.pi-pied { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.1rem; border-top: 1px solid var(--bord); }

.zone-assistant { display: grid; gap: .7rem; }
.zone-assistant .aide { margin: 0; }
.zone-assistant .grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.zone-assistant select { width: 100%; }
.zone-assistant input[type="number"] { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; min-height: 44px; width: 100%; }
.zone-assistant .rendu-prompt { margin: 0; max-height: 260px; background: var(--carte); }
.ligne-copier { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Panneau ouvert par-dessus la page */
.dialogue-import { width: min(1180px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0;
  border: 1px solid var(--bord); border-radius: 14px; background: var(--fond); color: var(--encre); box-shadow: 0 20px 60px rgb(0 0 0 / 30%); }
.dialogue-import[open] { display: flex; flex-direction: column; }
.dialogue-import::backdrop { background: rgb(12 42 64 / 55%); }
.dialogue-import .pc-tete { background: var(--carte); }
.dialogue-import-corps { overflow: auto; padding: 1rem; }
.dialogue-import .panneau-import .pi-form { box-shadow: none; }
.dialogue-import #apercu { margin-bottom: 0; }
/* « Vérifier la liste » reste visible pendant qu'on fait défiler le panneau. */
.dialogue-import .pi-pied { position: sticky; bottom: -1rem; background: var(--carte); border-radius: 0 0 12px 12px; z-index: 1; }

@media (max-width: 760px) {
  .pi-corps, .zone-assistant .grille-2 { grid-template-columns: 1fr; }
  .pi-commun .pi-titre { grid-column: auto; }
  .pi-choix { gap: .4rem; padding-inline: .6rem; }
  .pi-nom { font-size: 1rem; }
  .pi-zone + .pi-zone { border-left: 0; }
  /* Sur téléphone, l'interrupteur montre une seule méthode à la fois. */
  body.js .pi-zone:not(.choisie) { display: none; }
  .dialogue-import { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .dialogue-import-corps { padding: .5rem; }
}

/* ---------- Rendez-vous (maquette-rendez-vous v5) ----------
   Tokens --r-* : présences (oui, si nécessaire), plages prises, heures indisponibles hachurées, date retenue (violet).
   Les composants sont rangés sous .rdv : plusieurs noms (classement, segment, legende…) existent déjà pour d'autres outils. */
:root {
  --r-oui: #2f7d44; --r-oui-doux: #e3f3e7; --r-peut: #8a5a00; --r-peut-doux: #fff4dc;
  --r-pris: #eef1f4; --r-pris-texte: #7a8a98; --r-indispo: repeating-linear-gradient(135deg, #eef1f4 0 6px, #e2e7ec 6px 12px);
  --r-retenu: #6b3fa0; --r-retenu-doux: #f1eafa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --r-oui: #8fd3a0; --r-oui-doux: #173322; --r-peut: #f5c97a; --r-peut-doux: #33280f;
    --r-pris: #1b2630; --r-pris-texte: #7f93a3; --r-indispo: repeating-linear-gradient(135deg, #1b2630 0 6px, #22303c 6px 12px);
    --r-retenu: #c9a6f0; --r-retenu-doux: #2a1d3a;
  }
}
.rdv .aide { margin: .4rem 0; }
.rdv .titre-icone { flex-wrap: wrap; overflow-wrap: normal; }
.rdv .actions { margin-top: .8rem; }
.rdv .btn.actif { background: var(--accent-doux); border-color: var(--accent); }
.rdv .badge { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--vide); color: var(--encre-2); }
.rdv .badge.accent { background: var(--accent-doux); color: var(--accent-fort); }
.rdv .badge.oui { background: var(--r-oui-doux); color: var(--r-oui); }
.rdv .badge.peut { background: var(--r-peut-doux); color: var(--r-peut); }
.rdv .badge.retenu { background: var(--r-retenu-doux); color: var(--r-retenu); }
.rdv .badge.attention { background: var(--danger-doux); color: var(--danger); }
.rdv .message { border: 1px solid var(--bord); margin: .6rem 0; }
.rdv .legende { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--encre-2); margin-top: .6rem; }
.rdv .legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: var(--c, var(--vide)); }
.rdv .legende .rdv-reservee { --c: var(--accent-doux); }
.rdv .legende .rdv-libre::before { background: var(--carte); outline: 1px dashed var(--bord); }
.rdv .tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rdv .tableau th, .rdv .tableau td { text-align: left; padding: .45rem .4rem; border-bottom: 1px solid var(--bord); overflow-wrap: break-word; }
.rdv .tableau .btn { white-space: nowrap; }
@media (max-width: 560px) { .rdv .carte { padding: 1rem .75rem; } .rdv .tableau th, .rdv .tableau td { padding: .4rem .25rem; } }
.rdv .badge.attention { display: inline; border-radius: 6px; line-height: 1.8; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rdv .qr.grand { max-width: min(520px, 100%); }
.rdv input[type=text], .rdv input[type=date], .rdv input[type=time], .rdv input[type=number], .rdv input[type=datetime-local], .rdv select, .rdv textarea {
  font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; min-height: 40px; padding: .4rem .6rem; max-width: 100%; }
.rdv textarea { width: 100%; min-height: 110px; resize: vertical; margin-top: .5rem; }
.rdv fieldset { border: 1px solid var(--bord); border-radius: 10px; padding: .6rem 1rem .8rem; margin: .8rem 0 0; min-width: 0; }
.rdv legend { font-weight: 700; padding: 0 .25rem; }
.rdv .ligne-choix { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center; }
.rdv .ligne-choix label { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; }
.rdv .rdv-options { flex-direction: column; align-items: flex-start; }
.rdv #rdv-places { width: 4.5rem; }

/* Écran 1 : création visuelle */
.rdv .c-tete { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.rdv .c-titre { flex: 1 1 260px; font-size: 1.2rem; font-weight: 700; border: none; border-bottom: 2px solid var(--bord); border-radius: 0; padding-left: 0; background: transparent; }
.rdv .segment { flex-wrap: wrap; }
.rdv .segment button { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .8rem; font-size: 1rem; font-weight: 600; }
.rdv .segment button + button { border-left: 1px solid var(--bord); }
.rdv .segment button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.rdv .c-ligne { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .6rem 0; }
.rdv .c-lib { font-weight: 700; min-width: 11rem; }
.rdv .puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.rdv .puce-date { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: .3rem .65rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--encre); font: inherit; cursor: pointer; line-height: 1.2; }
.rdv .puce-date small { color: var(--encre-2); font-size: .8rem; }
.rdv .puce-date[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.rdv .puce-date[aria-pressed="true"] small { color: var(--sur-accent); }
.rdv .puce-date:disabled { background: var(--r-pris); color: var(--r-pris-texte); border-color: var(--bord); cursor: not-allowed; text-decoration: line-through; }
.rdv .dessin-outils { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.rdv .dessin-outils .aide { margin: 0 0 0 auto; }
/* touch-action: manipulation (et non none) : au doigt, on dessine par deux touchers, la page doit pouvoir défiler. */
.rdv .dessin { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: var(--carte); user-select: none; touch-action: manipulation; }
.rdv .dessin .entete { padding: .35rem; text-align: center; font-size: .85rem; font-weight: 700; border-bottom: 1px solid var(--bord); background: var(--fond); }
.rdv .dessin .entete small { display: block; font-weight: 400; color: var(--encre-2); }
.rdv .dessin .col { position: relative; border-left: 1px solid var(--bord); cursor: crosshair; background-image: linear-gradient(var(--bord) 1px, transparent 1px); }
.rdv .dessin .col.passe { cursor: not-allowed; background-color: var(--r-pris); }
.rdv .col-heures { position: relative; }
.rdv .col-heures span { position: absolute; right: 4px; font-size: .72rem; color: var(--encre-2); transform: translateY(-50%); }
.rdv .bloc { position: absolute; left: 3px; right: 3px; z-index: 1; border-radius: 7px; border: 2px solid var(--accent); color: var(--accent-fort); font-size: .75rem; font-weight: 700; padding: 2px 5px; cursor: pointer; overflow: hidden;
  background-color: var(--accent-doux); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--pas) - 1px), color-mix(in srgb, var(--accent) 45%, transparent) calc(var(--pas) - 1px) var(--pas)); }
.rdv .bloc.sondage { background-image: none; border-color: var(--r-oui); background-color: var(--r-oui-doux); color: var(--r-oui); }
.rdv .bloc.actif { outline: 3px solid var(--focus); }
.rdv .bloc.brouillon { opacity: .6; border-style: dashed; background-image: none; pointer-events: none; }
/* Écran « Modifier » : plages déjà enregistrées, en gris et sans action (la liste sous la semaine sert à les retirer). */
.rdv .bloc.fixe { z-index: 0; border: 1px solid var(--bord); background: var(--vide); color: var(--encre-2); font-weight: 600; pointer-events: none; cursor: default; }
.rdv .bloc .x { position: absolute; top: 1px; right: 2px; min-width: 24px; min-height: 24px; border: none; background: transparent; color: inherit; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px; }
.rdv .bloc .choisir { all: unset; position: absolute; inset: 0; display: block; padding: 2px 5px; cursor: pointer; overflow: hidden; }
.rdv .bloc .choisir:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.rdv .bloc .x { z-index: 1; }
.rdv .dessin .evt.indispo { position: absolute; left: 0; right: 0; pointer-events: none; }
.rdv .copie { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0 0; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; white-space: normal; }
.rdv .copie .repeter { margin: 0 0 0 .6rem; }
/* Jour déjà couvert par un bloc de l'enseignant : désactivé, mais pas barré (ce n'est pas « pris »). */
.rdv .copie .puce-date.couvert:disabled { text-decoration: none; }
.rdv .puce-date.passee { opacity: .75; }
.rdv .rdv-bloc-clavier { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; }
.rdv .rdv-bloc-clavier label { display: grid; gap: .2rem; font-weight: 600; font-size: .9rem; }
.rdv .rdv-bloc-clavier .erreur { flex-basis: 100%; margin: 0; }
.rdv .resume { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0 .2rem; padding: .7rem .9rem; border-radius: 10px; background: var(--accent-doux); font-weight: 600; }
.rdv .resume .gros { font-size: 1.4rem; font-weight: 800; color: var(--accent-fort); }
.rdv .c-reglages { border-top: 1px solid var(--bord); margin-top: 1rem; padding-top: .4rem; }
.rdv .c-details { border: 1px solid var(--bord); border-radius: 10px; padding: .5rem .8rem; margin-top: .5rem; }
.rdv .c-details summary { cursor: pointer; min-height: 32px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .rdv .c-lib { min-width: 0; width: 100%; }
  .rdv .dessin-outils .aide { margin-left: 0; }
  .rdv .dessin-outils b { flex: 1 1 0; min-width: 0; text-align: center; }
  .rdv .segment button { flex: 1 1 auto; }
  .rdv .bloc { font-size: .66rem; padding: 1px 2px; overflow-wrap: anywhere; }
  .rdv .bloc .choisir { padding: 1px 2px; }
  .rdv .bloc .x { min-width: 20px; min-height: 20px; padding: 0; }
}

/* Écrans 2 et 4 : agendas semaine et mois */
.rdv .agenda-outils { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.rdv .agenda-outils .periode { font-weight: 700; margin: 0 .4rem; }
@media (max-width: 560px) { .rdv .agenda-outils .periode { flex: 1 1 0; min-width: 0; text-align: center; margin: 0; } }
/* Sur téléphone, la semaine garde des colonnes lisibles et défile de côté dans son cadre (la page, elle, ne défile pas). */
.rdv .defile { overflow-x: auto; }
.rdv .defile > .semaine { min-width: 34rem; }
.rdv .agenda-outils .vues { margin-left: auto; display: inline-flex; gap: .3rem; }
.rdv .agenda-avec-panneau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.rdv .agenda-avec-panneau.panneau { grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 820px) { .rdv .agenda-avec-panneau.panneau { grid-template-columns: minmax(0, 1fr); } }
.rdv .semaine { display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: var(--carte); }
.rdv .semaine.jours-7 { grid-template-columns: 48px repeat(7, minmax(0, 1fr)); }
.rdv .semaine .entete { padding: .4rem .3rem; text-align: center; font-size: .85rem; font-weight: 700; border-bottom: 1px solid var(--bord); background: var(--fond); }
.rdv .semaine .entete small { display: block; font-weight: 400; color: var(--encre-2); }
.rdv .col-jour { position: relative; border-left: 1px solid var(--bord); background-image: linear-gradient(var(--bord) 1px, transparent 1px); }
.rdv .evt { position: absolute; left: 3px; right: 3px; z-index: 1; border-radius: 6px; padding: 2px 5px; font-size: .74rem; line-height: 1.25; overflow: hidden; border: 1px solid var(--accent); background: var(--accent-doux); color: var(--accent-fort); cursor: pointer; text-align: left; font-family: inherit; }
.rdv .evt b { display: block; }
.rdv .evt .remplissage { height: 4px; border-radius: 2px; background: var(--vide); margin-top: 2px; }
.rdv .evt .remplissage i { display: block; height: 100%; border-radius: 2px; background: var(--r-oui); }
.rdv .evt.retenu { border-color: var(--r-retenu); background: var(--r-retenu-doux); color: var(--r-retenu); }
.rdv .evt.libre { border-style: dashed; background: var(--carte); color: var(--encre-2); border-color: var(--bord); }
.rdv .evt.indispo { z-index: 0; border: none; background: var(--r-indispo); color: var(--r-pris-texte); cursor: default; }
.rdv .evt.surligne { outline: 3px solid var(--focus); }
.rdv .evt.passee { text-decoration: line-through; opacity: .7; }
.rdv .evt.compact { font-size: .68rem; padding: 0 4px; cursor: default; white-space: nowrap; text-overflow: ellipsis; }
.rdv .mois { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rdv .mois .jour { min-width: 0; min-height: 92px; border: 1px solid var(--bord); border-radius: 8px; padding: 4px; background: var(--carte); font-size: .78rem; }
.rdv .mois .jour .num { font-weight: 700; color: var(--encre-2); }
.rdv .mois .jour.hors { opacity: .45; }
.rdv .mois .puce { display: block; width: 100%; margin-top: 3px; padding: 1px 4px; border: 0; border-radius: 4px; background: var(--accent-doux); color: var(--accent-fort); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv .mois .puce.retenu { background: var(--r-retenu-doux); color: var(--r-retenu); }
.rdv .mois-entetes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; font-size: .8rem; font-weight: 700; color: var(--encre-2); text-align: center; margin-bottom: 4px; }
.rdv .classement { list-style: none; margin: 0; padding: 0; }
.rdv .classement li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .4rem; align-items: center; padding: .45rem .3rem; border-bottom: 1px solid var(--bord); }
.rdv .classement li.choisie { background: var(--accent-doux); }
.rdv .classement li button { all: unset; cursor: pointer; min-width: 0; }
.rdv .classement li:focus-within { outline: 3px solid var(--focus); }
.rdv .classement .rang { font-weight: 700; color: var(--encre-2); text-align: center; }
.rdv .classement .noms { display: block; font-size: .78rem; color: var(--encre-2); }
.rdv .barre-votes { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--vide); margin-top: 3px; }
.rdv .barre-votes .o { background: var(--r-oui); }
.rdv .barre-votes .p { background: var(--r-peut); }
@media (max-width: 560px) { .rdv .semaine.jours-7 .entete { font-size: .7rem; padding: .3rem 0; } .rdv .agenda-outils .vues { margin-left: 0; } }

/* Écran 6 : ordre de passage */
.rdv .ordre { list-style: none; margin: .6rem 0; padding: 0; }
.rdv .ordre li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.rdv .ordre li.jour-titre { display: block; margin-top: .6rem; font-weight: 700; color: var(--encre-2); }
.rdv .ordre .heure { font-variant-numeric: tabular-nums; color: var(--encre-2); font-weight: 700; font-size: .9rem; }
.rdv .ordre .nom { min-height: 40px; display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--encre); font: inherit; text-align: left; cursor: grab; }
.rdv .ordre .nom::before { content: "⋮⋮"; color: var(--encre-2); letter-spacing: -2px; }
.rdv .ordre.lecture li { grid-template-columns: auto 1fr; }
.rdv .ordre .nom.prise { border-color: var(--accent); background: var(--accent-doux); }
.rdv .ordre .nom.survol { outline: 3px dashed var(--accent); }
.rdv .ordre .nom.surplus { border-color: var(--danger); }

/* Écran 7 : disponibilités */
.rdv .grille-dispo { display: grid; grid-template-columns: 2.6rem repeat(5, minmax(0, 1fr)); gap: 2px; user-select: none; }
.rdv .grille-dispo .t { font-size: .72rem; color: var(--encre-2); text-align: right; padding-right: 3px; line-height: 20px; }
.rdv .grille-dispo .j { font-size: .78rem; font-weight: 700; text-align: center; color: var(--encre-2); }
.rdv .grille-dispo .j small { display: block; font-weight: 400; }
.rdv .grille-dispo .c { height: 20px; border-radius: 3px; background: var(--vide); border: none; padding: 0; cursor: pointer; }
.rdv .grille-dispo .c.hors { background: var(--r-indispo); cursor: default; }
.rdv .grille-dispo .c[aria-pressed="true"] { background: var(--r-oui); }
.rdv .grille-dispo.commune .c.tous { background: var(--r-retenu); }

/* Fenêtre « Déplacer » (ajoutée à la fin de la page, hors de .rdv) */
.rdv-dialogue { border: 1px solid var(--bord); border-radius: 14px; padding: 1.25rem; width: min(30rem, calc(100% - 2rem)); background: var(--carte); color: var(--encre); }
.rdv-dialogue::backdrop { background: rgb(0 0 0 / 40%); }
.rdv-dialogue h2 { margin-top: 0; font-size: 1.15rem; }
.rdv-dialogue select { width: 100%; min-height: 44px; margin: .3rem 0 .5rem; padding: .4rem .6rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--encre); font: inherit; }
.rdv-dialogue .actions { margin-top: .8rem; }
/* Pages des participants (matrice-vote, /u/:jeton) : écrans 3, 5, 6 et 7 de la maquette v5, sur téléphone d'abord. */
.rdv-public h1 { font-size: 1.3rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.rdv-public h2 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; overflow-wrap: anywhere; }
.rdv .rdv-champ { display: block; margin-top: .8rem; font-weight: 600; }
.rdv .rdv-champ input { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
.rdv .sem-ligne { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--bord); align-items: start; }
.rdv .sem-ligne .sem-lib { font-weight: 700; font-size: .9rem; color: var(--encre-2); padding-top: .45rem; }
@media (max-width: 560px) { .rdv .sem-ligne { grid-template-columns: minmax(0, 1fr); gap: .3rem; } .rdv .sem-ligne .sem-lib { padding-top: 0; } }
.rdv .puce-date[data-etat="oui"] { border-color: var(--r-oui); background: var(--r-oui-doux); color: var(--r-oui); }
.rdv .puce-date[data-etat="peut"] { border-color: var(--r-peut); border-style: dashed; background: var(--r-peut-doux); color: var(--r-peut); }
.rdv .puce-date[data-etat="oui"] small, .rdv .puce-date[data-etat="peut"] small { color: inherit; }
.rdv .puce-date .cpt { font-size: .74rem; font-weight: 700; }
.rdv .puce-date.sienne:disabled { border-color: var(--r-oui); background: var(--r-oui-doux); color: var(--r-oui); text-decoration: none; cursor: default; }
.rdv .message.reussi { background: var(--r-oui-doux); color: var(--r-oui); }
.rdv .message .actions { margin-top: .5rem; }
.rdv .rdv-lien code { display: block; margin: .3rem 0; overflow-wrap: anywhere; }
.rdv .actions.colonne { flex-direction: column; align-items: stretch; }
.rdv .btn.large { width: 100%; }
.rdv .rdv-messages:empty { display: none; }
.rdv .ordre.lecture .nom { cursor: default; }
.rdv .ordre.lecture .nom::before { content: none; }
.rdv .ordre .nom.moi { border-color: var(--r-oui); background: var(--r-oui-doux); color: var(--r-oui); font-weight: 700; }
/* Peindre au doigt : sans « touch-action: none », le geste ferait défiler la page au lieu de cocher les cases. */
.rdv .grille-dispo.peindre { touch-action: none; margin-top: .6rem; }
/* Cases de 24 px au moins sur la page publique (cible tactile, WCAG 2.5.8) ; la vue de l'enseignant garde 20 px. */
.rdv-public .grille-dispo .c { height: 24px; }
.rdv-public .grille-dispo .t { line-height: 24px; }
.rdv .grille-dispo .c.ancre { outline: 2px dashed var(--focus); outline-offset: 1px; }
.rdv .grille-dispo .c.hors.libre { background: color-mix(in srgb, var(--r-oui) 35%, var(--r-pris)); }

/* ---------- Éditeur à une page : éléments en accordéon (quiz d'abord, puis les outils à gros éléments) ---------- */
/* Largeur de lecture : un champ de texte ne s'étire pas sur tout l'écran. */
.champ-lecture, .accordeon textarea, .qz-reponses, .qz-image, .accordeon .paires-edition, .accordeon .mots-cliquables, .reponses-cartes { max-width: 46rem; }
.question-cartes .choix { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.question-cartes .choix label { display: inline-flex; gap: .35rem; align-items: center; }
.titre-elements { display: flex; align-items: baseline; gap: .6rem; margin: 1.25rem 0 .6rem; font-size: 1.1rem; }
.acc-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.acc-item { border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); min-width: 0; }
.acc-item.ouvert { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.acc-tete { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .5rem .7rem; background: none; border: 0; border-radius: 10px;
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.acc-tete:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.acc-num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--accent-doux); color: var(--accent-fort); }
.acc-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acc-titre.vide { color: var(--danger); font-weight: 500; font-style: italic; }
.acc-info { flex: none; font-size: .82rem; color: var(--encre-2); }
.acc-chevron { flex: none; color: var(--encre-2); transition: transform .15s; }
.acc-item.ouvert .acc-chevron { transform: rotate(90deg); }
.acc-corps { padding: .2rem .9rem .9rem 3.1rem; display: grid; gap: .55rem; }
.acc-corps textarea { width: 100%; }
.acc-corps > p, .acc-corps > .champ { margin: 0; }
.acc-pied { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: space-between; padding-top: .6rem; border-top: 1px dashed var(--bord); }
.ajout-elements { margin-top: .7rem; padding: .6rem; border: 2px dashed var(--bord); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .acc-chevron { transition: none; } }
@media (max-width: 640px) {
  .acc-corps { padding: .2rem .7rem .8rem; }
  .acc-info { display: none; }
}

/* Quiz : outils de la question, réponses en 2 × 2, vrai/faux, images. */
.qz-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .9rem; }
.qz-outils .libelle { color: var(--encre-2); }
.qz-outils .q-segments button { min-height: 36px; }
.acc-statut:empty { display: none; }
.acc-statut { color: var(--danger); margin: 0; }
.qz-reponses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.qz-rep { display: flex; align-items: center; gap: .45rem; min-width: 0; border: 1px solid var(--bord); border-left: 6px solid var(--k); border-radius: 8px;
  padding: .25rem .35rem .25rem .5rem; background: var(--carte); }
.qz-rep > .forme { color: var(--k); }
.qz-rep input[type="text"] { flex: 1; min-width: 0; width: 0; border: 0; padding: .35rem .2rem; background: transparent; color: inherit; font: inherit; }
.qz-rep input[type="text"]:focus { outline: none; }
.qz-rep:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.qz-rep.juste { background: color-mix(in srgb, var(--k3) 10%, var(--carte)); }
.qz-bonne { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--bord); cursor: pointer; font-weight: 800; color: var(--encre-2); }
.qz-bonne input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.qz-bonne:has(input:checked) { background: var(--k3); border-color: var(--k3); color: var(--tk3, #fff); }
.qz-bonne:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.qz-mini { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.qz-vf { display: flex; gap: .5rem; max-width: 26rem; }
.qz-tuile { flex: 1; display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--bord);
  border-left: 6px solid var(--k); cursor: pointer; font-weight: 600; }
.qz-tuile .forme { color: var(--k); }
.qz-tuile:has(input:checked) { background: color-mix(in srgb, var(--k3) 12%, var(--carte)); border-color: var(--k3); border-left-color: var(--k); }
.qz-image { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem; border: 1px dashed var(--bord); border-radius: 8px; }
.qz-apercu { max-height: 90px; max-width: 160px; border-radius: 6px; }
.qz-choisir { cursor: pointer; }
.qz-choisir:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.qz-pastilles { display: inline-flex; gap: 3px; flex: none; }
.qz-pastilles i { width: .8rem; height: .8rem; border-radius: 3px; background: var(--k); opacity: .3; }
.qz-pastilles i.juste { opacity: 1; outline: 2px solid var(--encre); outline-offset: 1px; }
@media (max-width: 640px) { .qz-reponses { grid-template-columns: minmax(0, 1fr); } }
.btn.lien { justify-self: start; border-color: transparent; background: none; color: var(--accent-fort); padding-inline: .3rem; }
.btn.lien:hover { text-decoration: underline; }

/* Cordée v3 (13.11.2026, maquette-cordee-v3) : panneaux repliables ; Sommet, Prochain pas, Rafale et Cordée en cartes côte à côte ;
   échéances au choix en Barres, Jalons ou Compte à rebours. Positions et largeurs par le CSSOM (cordee-vue.ts). */
.cordee-monte { --cordee-gantt-etiquette: 14rem; }
.cordee-volet { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; box-shadow: var(--ombre); min-width: 0; }
.cordee-volet[hidden] { display: none; }
.cordee-monte .cordee-volet-tete { margin: 0; font-size: 1rem; }
.cordee-volet-tete button { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 48px; padding: .6rem .85rem; background: none; border: 0;
  border-radius: 14px; color: var(--encre); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.cordee-volet-tete .ico { flex: none; width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; background: var(--accent-doux); }
.cordee-volet-tete .titre { flex: none; }
.cordee-volet-tete .resume { flex: 1; min-width: 0; color: var(--encre-2); font-size: .85rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cordee-volet[data-ouvert="true"] .cordee-volet-tete .resume { display: none; }
.cordee-volet-tete .chevron { flex: none; margin-left: auto; color: var(--encre-2); transition: transform .15s; }
.cordee-volet[data-ouvert="true"] .chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .cordee-volet-tete .chevron { transition: none; } }
.cordee-volet-corps { padding: 0 1rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; }
.cordee-volet-corps[hidden] { display: none; }
.carte-sommet .ico { background: var(--cordee-sommet); }
.carte-pas .ico { background: var(--cordee-pas-doux); }
.carte-rafale .ico { background: var(--cordee-eclair-doux); }
.cordee-cartes-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; align-items: stretch; }
.cordee-cartes-jour > [hidden] { display: none; }
/* Cartes de la zone « Aujourd'hui » : même hauteur sur une rangée, non repliables (demande du 13.11.2026). */
.cordee-carte-jour { border: 1px solid var(--bord); border-radius: 12px; padding: .7rem .85rem .85rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; background: var(--carte); }
.cordee-monte .cordee-carte-tete { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .98rem; }
.cordee-carte-tete .ico { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; background: var(--accent-doux); }
.cordee-carte-corps { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.cordee-rafale-ajout { display: flex; gap: .4rem; margin-top: auto; padding-top: .3rem; }
.cordee-rafale-ajout input { flex: 1; min-width: 0; min-height: 36px; font: inherit; }

/* Outils des échéances : affichage, période, légende */
.cordee-lt-outils { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.cordee-segment { display: inline-flex; border: 1px solid var(--bord); border-radius: 999px; overflow: hidden; }
.cordee-segment .btn.petit { border: 0; border-radius: 0; background: none; min-height: 32px; }
.cordee-segment .btn.petit[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.cordee-monte .cordee-lt-legende { margin-left: auto; display: flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--encre-2); }
.cordee-lt-legende .pastille { width: .8rem; height: .8rem; border-radius: 50%; margin: 0; }
.cordee-lt-defile { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .3rem; }
.cordee-monte .n0 { --c: var(--cordee-lt-0); } .cordee-monte .n1 { --c: var(--cordee-lt-1); } .cordee-monte .n2 { --c: var(--cordee-lt-2); }
.cordee-monte .n3 { --c: var(--cordee-lt-3); } .cordee-monte .n4 { --c: var(--cordee-lt-4); } .cordee-monte .n5 { --c: var(--cordee-lt-5); }
.cordee-monte .finie { --c: var(--cordee-suivi-ok); }
.cordee-lt-legende .pastille { background: var(--c); }

/* Pastilles rondes des personnes (initiale), mêmes couleurs que les prénoms */
.cordee-avatars { display: inline-flex; flex: none; }
.cordee-monte .avatar { width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 800;
  border: 2px solid var(--carte); flex: none; }
.cordee-monte .avatar + .avatar { margin-left: -.45rem; }
.cordee-monte .avatar.libre { background: transparent; border: 2px dashed var(--encre-2); color: var(--encre-2); }
.cordee-monte .avatar.grand { width: 2.9rem; height: 2.9rem; font-size: 1.05rem; }

/* Barres (Gantt) */
.cordee-gantt { display: grid; min-width: 42rem; align-items: center; }
.cordee-gantt .jour { text-align: center; font-size: .75rem; color: var(--encre-2); padding-bottom: .35rem; font-variant-numeric: tabular-nums; }
.cordee-gantt .jour b { display: block; font-size: .9rem; color: var(--encre); }
.cordee-gantt .jour.we { opacity: .6; }
.cordee-gantt .jour.auj b { background: var(--accent); color: var(--sur-accent); border-radius: 999px; width: 1.9rem; margin: 0 auto; }
.cordee-gantt .colonne { align-self: stretch; border-left: 1px dashed var(--bord); }
.cordee-gantt .colonne.we { background: color-mix(in srgb, var(--bord) 30%, transparent); }
.cordee-gantt .colonne.auj { border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cordee-gantt .libelle { grid-column: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .3rem .6rem .3rem 0;
  position: sticky; left: 0; z-index: 2; background: var(--carte); }
.cordee-gantt .textes { display: grid; min-width: 0; }
.cordee-gantt .titre { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cordee-gantt .sous { font-size: .75rem; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cordee-gantt .depassee { color: var(--danger); font-weight: 700; }
.cordee-gantt .hors { font-size: .78rem; color: var(--encre-2); text-align: right; padding-right: .5rem; z-index: 1; }
.cordee-gantt .gantt-barre { position: relative; z-index: 1; height: 2.1rem; margin: .25rem 0; padding: 0; border: 0; border-radius: 999px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--c) 25%, var(--carte)); font: inherit; }
.cordee-gantt .gantt-barre .rempli { position: absolute; inset: 0 auto 0 0; background: var(--c); border-radius: 999px; }
.cordee-gantt .gantt-barre.trop .rempli { background: repeating-linear-gradient(45deg, var(--c) 0 .5rem, var(--cordee-suivi-trop) .5rem 1rem); }
.cordee-gantt .gantt-barre .pct { position: relative; display: block; padding: 0 .7rem; font-size: .85rem; font-weight: 800; color: var(--c); text-align: right; }
.cordee-gantt .gantt-barre .pct.dedans { color: var(--cordee-sur-lt); }
.cordee-gantt .gantt-barre.coupee-avant { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cordee-gantt .gantt-barre.coupee-apres { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cordee-gantt .gantt-barre:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Jalons */
.cordee-jalons { position: relative; height: 13rem; }
.cordee-jalons .axe { position: absolute; left: 0; right: 0; top: 6.3rem; height: 6px; border-radius: 3px; background: var(--cordee-lt-axe); opacity: .5; }
.cordee-jalons .semaine { position: absolute; top: 6.9rem; transform: translateX(-50%); font-size: .75rem; color: var(--encre-2); white-space: nowrap; }
.cordee-jalons .aujourdhui { position: absolute; top: 3.4rem; height: 4.6rem; border-left: 2px dashed var(--cordee-lt-jour); }
.cordee-jalons .aujourdhui span { position: absolute; top: -1.1rem; left: .25rem; font-size: .72rem; font-weight: 700; color: var(--cordee-lt-jour); white-space: nowrap; }
.cordee-jalons .jalon { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: .15rem; width: 8.5rem;
  padding: 0; border: 0; background: none; color: var(--encre); font: inherit; cursor: pointer; }
.cordee-jalons .jalon.r0 { top: 2.8rem; } .cordee-jalons .jalon.r2 { top: .2rem; }
.cordee-jalons .jalon.r1, .cordee-jalons .jalon.r3 { flex-direction: column; }
.cordee-jalons .jalon.r1 { top: 8rem; } .cordee-jalons .jalon.r3 { top: 10.4rem; }
.cordee-jalons .jalon.r2 .repere, .cordee-jalons .jalon.r3 .repere { display: none; }
.cordee-jalons .repere { width: 2.1rem; height: 2.1rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); display: grid; place-items: center; box-shadow: var(--ombre); }
.cordee-jalons .jalon.r1 .repere { border-radius: 50% 0 50% 50%; }
.cordee-jalons .repere span { transform: rotate(45deg); color: var(--cordee-sur-lt); font-size: .75rem; font-weight: 800; }
.cordee-jalons .lib { font-size: .75rem; line-height: 1.15; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow-wrap: anywhere; background: var(--carte); border-radius: 4px; padding: 0 .2rem; }
.cordee-jalons .jalon.r2 .lib, .cordee-jalons .jalon.r3 .lib { border-bottom: 3px solid var(--c); }
.cordee-jalons .jalon.finie .lib { text-decoration: line-through; color: var(--encre-2); }
.cordee-jalons .jalon:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cordee-prochaines { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
/* Jalons : zone Urgences (tâches dépassées) à gauche de l'axe ; au-dessus sur téléphone. */
/* La zone Urgences prend toute la hauteur de l'axe, même avec une seule tâche ; sans tâche dépassée, elle n'est pas créée. */
.cordee-jalons-rangee { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: stretch; }
.cordee-jalons-rangee > :only-child { grid-column: 1 / -1; }
.cordee-urgences { width: 13rem; border-radius: 12px; padding: .6rem; background: color-mix(in srgb, var(--cordee-lt-5) 9%, var(--carte));
  border: 1px solid color-mix(in srgb, var(--cordee-lt-5) 40%, var(--carte)); display: grid; gap: .4rem; align-content: start; }
.cordee-monte .cordee-urgences h3 { margin: 0; font-size: .9rem; color: var(--cordee-lt-5); }
.cordee-urgences ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cordee-urgences .urgence { display: flex; align-items: flex-start; gap: .45rem; width: 100%; padding: .3rem .4rem; border: 0; border-radius: 8px; background: var(--carte);
  color: var(--encre); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.cordee-urgences .urgence b { flex: none; background: var(--cordee-lt-5); color: var(--cordee-sur-lt); border-radius: 999px; padding: .05rem .45rem; font-size: .75rem; white-space: nowrap; }
.cordee-urgences .urgence:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 40rem) { .cordee-jalons-rangee { grid-template-columns: minmax(0, 1fr); } .cordee-urgences { width: auto; } }
.cordee-prochaines li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem .2rem .25rem; border-radius: 999px; font-size: .82rem;
  background: color-mix(in srgb, var(--c) 14%, var(--carte)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--carte)); overflow-wrap: anywhere; }
.cordee-prochaines b { background: var(--c); color: var(--cordee-sur-lt); border-radius: 999px; padding: .05rem .5rem; font-size: .75rem; white-space: nowrap; }

/* Compte à rebours */
.cordee-rebours { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: .6rem; }
.carte-rebours { border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .3rem; align-content: start;
  background: color-mix(in srgb, var(--c) 10%, var(--carte)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--carte)); }
.cordee-monte .carte-rebours .j { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--c); }
.carte-rebours .j small { margin-left: .35rem; font-size: .78rem; font-weight: 600; color: var(--encre-2); }
.carte-rebours .titre { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.carte-rebours .bas { display: flex; align-items: center; gap: .45rem; }
.carte-rebours .jauge { flex: 1; height: .45rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--c) 20%, var(--carte)); }
.carte-rebours .jauge i { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.carte-rebours .jauge.trop i { background: var(--cordee-suivi-trop); }
.carte-rebours .pct { font-size: .78rem; color: var(--encre-2); }

/* Anneaux (sommet du jour, temps des membres) */
.cordee-anneau { --v: 0; --c: var(--accent); flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), color-mix(in srgb, var(--c) 15%, var(--carte)) 0); }
.cordee-anneau > span { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--carte); display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.cordee-membres-tableau .cordee-anneau { width: 2.9rem; height: 2.9rem; padding: 0; border: 0; color: var(--encre); }
.cordee-membres-tableau .cordee-anneau > span { width: 2.2rem; height: 2.2rem; font-size: .72rem; }
:is(.cordee-monte, .pouls) .cordee-anneau.p-0 { --c: var(--cordee-lt-0); background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p0) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-1 { --c: #d9622b; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p1) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-2 { --c: var(--cordee-pas); background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p2) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-3 { --c: var(--cordee-lt-2); background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p3) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-4 { --c: #a67c00; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p4) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-5 { --c: var(--cordee-lt-4); background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p5) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-6 { --c: #1a8a84; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p6) 0); }
:is(.cordee-monte, .pouls) .cordee-anneau.p-7 { --c: var(--encre-2); background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--cordee-p7) 0); }

/* Sommet du jour */
.carte-sommet .sommet-haut { display: flex; gap: .8rem; align-items: center; }
.carte-sommet .textes { display: grid; gap: .15rem; min-width: 0; }
.carte-sommet .texte { font-weight: 800; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.carte-sommet .progression, .carte-sommet .resume-jour { font-size: .85rem; color: var(--encre-2); overflow-wrap: anywhere; }
.carte-sommet .btn { align-self: flex-start; }
.carte-sommet.sans-sommet { border: 2px solid var(--cordee-sommet-bord); }
.cordee-coches-sommet { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
.cordee-coches-sommet li { display: flex; gap: .45rem; align-items: baseline; overflow-wrap: anywhere; }
.cordee-coches-sommet .coche { color: var(--encre-2); font-weight: 800; }
.cordee-coches-sommet .faite { color: var(--encre-2); }
.cordee-coches-sommet .faite .coche { color: var(--cordee-suivi-ok-texte); }

/* Prochain pas */
.carte-pas { border: 2px solid var(--cordee-pas); }
.carte-pas .corps { display: grid; gap: .4rem; min-width: 0; }
.carte-pas .suggestion, .carte-pas .ma-tache { font-weight: 800; overflow-wrap: anywhere; }
.carte-pas .raisons { color: var(--encre-2); font-size: .88rem; }

/* Cordée : un membre par case */
.cordee-membres-tableau { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .8rem .5rem; }
.cordee-membres-tableau li { display: grid; justify-items: center; align-content: start; text-align: center; gap: .2rem; min-width: 0; }
.cordee-membres-tableau .prenom { font-weight: 700; overflow-wrap: anywhere; }
.cordee-membres-tableau .etat { padding: 0; border-radius: 0; font-weight: 400; white-space: normal; color: var(--encre-2); font-size: .78rem; line-height: 1.2; overflow-wrap: anywhere; }
.cordee-membres-tableau .signal { color: var(--danger); background: var(--danger-doux); border-radius: 999px; padding: 0 .5rem; font-size: .75rem; font-weight: 600; }
.cordee-membres-tableau .actions { justify-content: center; }
.cordee-membres-tableau .actions .btn.petit { min-height: 28px; padding: .1rem .45rem; font-size: .75rem; }
@media (max-width: 40rem) { .cordee-monte { --cordee-gantt-etiquette: 8.5rem; } .cordee-gantt .libelle .cordee-avatars { display: none; } }

/* Pouls de la classe v3 (13.11.2026, maquette-cordee-v3/pouls.html, variante B) : chiffres de la classe, une ligne par groupe,
   suivi d'un élève dans un tiroir (attribut popover). Anneaux : part remplie par classe v-N (pas de style en ligne, CSP). */
.cordee-anneau.v-0 { --v: 0; } .cordee-anneau.v-5 { --v: 5; } .cordee-anneau.v-10 { --v: 10; } .cordee-anneau.v-15 { --v: 15; }
.cordee-anneau.v-20 { --v: 20; } .cordee-anneau.v-25 { --v: 25; } .cordee-anneau.v-30 { --v: 30; } .cordee-anneau.v-35 { --v: 35; }
.cordee-anneau.v-40 { --v: 40; } .cordee-anneau.v-45 { --v: 45; } .cordee-anneau.v-50 { --v: 50; } .cordee-anneau.v-55 { --v: 55; }
.cordee-anneau.v-60 { --v: 60; } .cordee-anneau.v-65 { --v: 65; } .cordee-anneau.v-70 { --v: 70; } .cordee-anneau.v-75 { --v: 75; }
.cordee-anneau.v-80 { --v: 80; } .cordee-anneau.v-85 { --v: 85; } .cordee-anneau.v-90 { --v: 90; } .cordee-anneau.v-95 { --v: 95; }
.cordee-anneau.v-100 { --v: 100; }
.pouls { display: grid; gap: .9rem; }
.pouls > * { margin: 0; min-width: 0; }
.pouls .cordee-lien { margin-top: .6rem; padding: .5rem .7rem; border-radius: 12px; background: var(--accent-doux); gap: .8rem; }
.pouls .cordee-lien p { margin: 0; }
.pouls .cordee-lien .qr { width: 4.5rem; height: 4.5rem; }
.pouls-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.pouls-chiffres .chiffre { display: flex; gap: .7rem; align-items: center; margin: 0; color: var(--encre-2); font-size: .85rem; }
.pouls-chiffres .chiffre b { display: block; font-size: 1.45rem; line-height: 1.15; color: var(--encre); }
.pouls-chiffres .ico { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--accent-doux); }
.pouls-chiffres .alerte .ico { background: var(--danger-doux); }
.pouls-chiffres .alerte b { color: var(--danger); }
.pouls-outils { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; }
.pouls-outils h2 { margin: 0 .5rem 0 0; font-size: 1.15rem; }
.pouls .cordee-periodes { display: inline-flex; margin: 0; gap: 0; border: 1px solid var(--bord); border-radius: 999px; overflow: hidden; }
.pouls .cordee-periodes a { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .85rem; color: var(--encre); text-decoration: none; font-size: .88rem; }
.pouls .cordee-periodes a[aria-current="true"] { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.pouls .cordee-legende { margin: 0 0 0 auto; font-size: .8rem; color: var(--encre-2); }
.pouls-defile { overflow-x: auto; }
.pouls-tableau { width: 100%; min-width: 54rem; border-collapse: collapse; }
.pouls-tableau thead th { padding: .4rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.pouls-tableau tbody th, .pouls-tableau td { padding: .75rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.pouls-tableau tbody tr:last-child > * { border-bottom: 0; }
.pouls-tableau .nom-groupe { display: block; font-size: 1.05rem; font-weight: 800; }
.pouls-tableau tbody th { min-width: 8.5rem; }
.pouls-tableau td:last-child { text-align: right; }
.pouls-tableau .btn { white-space: nowrap; }
.pouls-tableau tbody th .aide { display: block; font-weight: 400; font-size: .8rem; }
.pouls-sommet { display: flex; gap: .6rem; align-items: center; min-width: 13rem; margin: 0; padding: .5rem .65rem; border-radius: 12px; background: var(--cordee-sommet); color: var(--cordee-sur-sommet); }
.pouls-sommet p { margin: 0; }
.pouls-sommet .texte { font-weight: 700; overflow-wrap: anywhere; }
.pouls-sommet .aide { font-size: .78rem; }
.pouls-sommet.vide { color: var(--encre-2); font-size: .85rem; }
.pouls .cordee-anneau { width: 2.9rem; height: 2.9rem; }
.pouls .cordee-anneau > span { width: 2.2rem; height: 2.2rem; font-size: .72rem; }
.pouls .cordee-anneau.grand { width: 4.2rem; height: 4.2rem; }
.pouls .cordee-anneau.grand > span { width: 3.2rem; height: 3.2rem; font-size: .9rem; }
.pouls-eleves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pouls-eleve { display: grid; justify-items: center; gap: .1rem; padding: .2rem .3rem; border: 0; border-radius: 10px; background: none; color: var(--encre); font: inherit; cursor: pointer; }
.pouls-eleve:hover { background: var(--accent-doux); }
.pouls-eleve .prenom { font-size: .8rem; font-weight: 700; }
.pouls-eleve .point { width: .5rem; height: .5rem; border-radius: 50%; background: var(--danger); }
.pouls-eleve .point.vide { visibility: hidden; }
.pouls-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; min-width: 12rem; }
.badge-alerte { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0; padding: .15rem .55rem; border-radius: 10px; font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.badge-alerte.danger { background: var(--danger-doux); color: var(--danger); }
.badge-alerte.signal { background: color-mix(in srgb, var(--cordee-case-ensuite) 18%, var(--carte)); color: var(--encre); }
.badge-alerte.ok { display: inline-flex; background: var(--cordee-suivi-ok-doux); color: var(--cordee-suivi-ok-texte); }
.badge-alerte form { margin: 0; }
/* Tiroir de suivi : à droite, toute la hauteur ; fermé par le bouton, Échap ou un clic à côté. */
.cordee-tiroir { position: fixed; inset: 0 0 0 auto; width: min(30rem, 100%); height: 100%; max-height: none; margin: 0; padding: 1rem 1.1rem; overflow-y: auto;
  border: 0; border-left: 1px solid var(--bord); background: var(--carte); color: var(--encre); box-shadow: -10px 0 40px rgb(0 0 0 / 18%); }
.cordee-tiroir:popover-open { display: grid; gap: .8rem; align-content: start; }
.cordee-tiroir::backdrop { background: rgb(0 0 0 / 25%); }
.cordee-tiroir p { margin: 0; }
.tiroir-tete { display: flex; gap: .7rem; align-items: center; }
.tiroir-tete .nom { flex: 1; min-width: 0; }
.tiroir-tete h2 { margin: 0; font-size: 1.3rem; }
.tiroir-repartition { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tiroir-repartition li { padding: .45rem .6rem; border-radius: 10px; background: var(--fond); font-size: .8rem; color: var(--encre-2); }
.tiroir-repartition b { display: block; font-size: 1.05rem; color: var(--encre); }
/* Plusieurs projets dans un cours (13.11.2026, maquette-cordee-v3/projets.html) : type de projet de chaque groupe. */
.type-projet { display: inline-flex; align-items: center; width: fit-content; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--cordee-sur-personne); }
.type-projet.t-0 { background: var(--cordee-p0); } .type-projet.t-1 { background: var(--cordee-p1); } .type-projet.t-2 { background: var(--cordee-p2); } .type-projet.t-3 { background: var(--cordee-p3); }
.type-projet.t-4 { background: var(--cordee-p4); } .type-projet.t-5 { background: var(--cordee-p5); } .type-projet.t-6 { background: var(--cordee-p6); } .type-projet.t-7 { background: var(--cordee-p7); }
.pouls-tableau tbody th .type-projet { margin: .25rem 0 .15rem; }
.pouls-types { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.pouls-chiffres div.chiffre { margin: 0; }
.pouls-chiffres .chiffre.projets { grid-column: 1 / -1; }
.pouls-types .type-projet { white-space: nowrap; }
.cordee-type-projet { margin: 0 0 .6rem; width: fit-content; padding: .2rem .7rem; border-radius: 999px; background: var(--accent-doux); font-size: .85rem; font-weight: 700; }
.cordee-type-projet[hidden] { display: none; }
.cordee-deplacer { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--bord); }
.cordee-deplacer summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.cordee-deplacer[open] { display: grid; gap: .5rem; }
.cordee-deplacer ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.cordee-tiroir .cordee-suivi-corps { margin: 0; padding: 0; border: 0; background: none; }
/* Tiroir d'un groupe (pouls, 14.11.2026) : nom, type en cartes, élèves en étiquettes ; déplacer et supprimer en bas. */
.pouls-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.menu-groupe { font-size: 1.05rem; min-width: 2.4rem; justify-content: center; }
.pouls-vide { display: grid; gap: .6rem; padding: 1rem; border: 1px dashed var(--bord); border-radius: 12px; }
.pouls-vide p { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cordee-tiroir-groupe h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cordee-form-groupe { display: grid; gap: .9rem; }
.cordee-form-groupe .champ { margin: 0; }
.cordee-cartes-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.cordee-cartes-types legend { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; padding: 0; }
.carte-type { position: relative; display: grid; border: 2px solid var(--bord); border-radius: 12px; padding: .55rem .65rem; cursor: pointer; background: var(--carte); }
.carte-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.carte-type > span { display: grid; gap: .15rem; }
.carte-type b { font-size: .88rem; }
.carte-type .aide { font-size: .72rem; }
.carte-type:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.carte-type:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cordee-champ-prenoms { display: grid; gap: .35rem; }
.cordee-champ-prenoms > label { font-weight: 600; font-size: .9rem; }
.cordee-champ-prenoms textarea { width: 100%; font: inherit; }
.cordee-etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-height: 2.9rem; padding: .4rem; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.cordee-etiquettes .puces { display: contents; }
.cordee-etiquettes:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cordee-etiquettes .puce { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .3rem .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--cordee-sur-personne); }
.cordee-etiquettes .puce.p-0 { background: var(--cordee-p0); } .cordee-etiquettes .puce.p-1 { background: var(--cordee-p1); } .cordee-etiquettes .puce.p-2 { background: var(--cordee-p2); } .cordee-etiquettes .puce.p-3 { background: var(--cordee-p3); }
.cordee-etiquettes .puce.p-4 { background: var(--cordee-p4); } .cordee-etiquettes .puce.p-5 { background: var(--cordee-p5); } .cordee-etiquettes .puce.p-6 { background: var(--cordee-p6); } .cordee-etiquettes .puce.p-7 { background: var(--cordee-p7); }
.cordee-etiquettes .puce button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: rgb(0 0 0 / 10%); color: inherit; cursor: pointer; font-size: .75rem; }
.cordee-etiquettes input { flex: 1; min-width: 9rem; border: 0; background: none; color: var(--encre); padding: .3rem; font: inherit; }
.cordee-etiquettes input:focus { outline: none; }
.cordee-champ-prenoms > .aide { margin: 0; }
.cordee-reprendre { display: grid; gap: .4rem; }
.cordee-eleves-classe { display: flex; flex-wrap: wrap; gap: .3rem; }
.cordee-tiroir-groupe .pied { display: flex; gap: .5rem; justify-content: flex-end; position: sticky; bottom: -1rem; background: var(--carte); padding: .7rem 0 .2rem; border-top: 1px solid var(--bord); }
.cordee-deplacer form, .cordee-supprimer-groupe form { display: grid; gap: .5rem; margin-top: .5rem; }
.cordee-supprimer-groupe { padding-top: .6rem; border-top: 1px solid var(--bord); }
.cordee-supprimer-groupe summary { cursor: pointer; font-weight: 700; color: var(--danger); }
/* Téléphone : chaque groupe devient un bloc empilé (pas de défilement horizontal). */
@media (max-width: 40rem) {
  .pouls .cordee-legende { margin-left: 0; }
  .pouls-tableau { min-width: 0; }
  .pouls-tableau thead { display: none; }
  .pouls-tableau, .pouls-tableau tbody, .pouls-tableau tr, .pouls-tableau tbody th, .pouls-tableau td { display: block; width: 100%; }
  .pouls-tableau tr { padding: .6rem 0; border-bottom: 1px solid var(--bord); }
  .pouls-tableau tbody th, .pouls-tableau td { padding: .3rem 0; border-bottom: 0; min-width: 0; }
  .pouls-tableau td:last-child { text-align: left; }
  .pouls-sommet, .pouls-alertes { min-width: 0; }
}

/* Jeux des neiges : projecteur (écrans « télé » toujours sur fond nuit, quel que soit le thème de l'appareil). */
.neiges-tv, .neiges-scene, .neiges-cockpit {
  --nv-fond: #0a1322; --nv-2: #101c2e; --nv-3: #182840; --nv-trait: rgb(255 255 255 / 9%);
  --nv-texte: #eef3f8; --nv-texte-2: #a9b8c9; --nv-signal: #ff5a36; --nv-glace: #9fd3f5; --nv-dore: #f2c14e;
  --nv-metal-or: linear-gradient(#f6d98a, #c9962c); --nv-metal-argent: linear-gradient(#eef1f5, #9aa7b4); --nv-metal-bronze: linear-gradient(#ebb487, #a5653a);
  /* Polices déjà présentes sur les appareils : pas de police de titre distribuée pour ce jeu. */
  --nv-f-titre: "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  color: var(--nv-texte);
}
.neiges-tv { background: radial-gradient(900px 340px at 15% -20%, #1c3658 0%, transparent 65%), radial-gradient(700px 300px at 100% 120%, #13283f 0%, transparent 60%), var(--nv-fond); border-radius: 16px; padding: 1.5rem; position: relative; overflow: hidden; }
.neiges-note { font-size: .85rem; color: var(--nv-texte-2); margin: .8rem 0 0; }
.neiges-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.neiges-chiffres { font-family: var(--nv-f-titre); font-variant-numeric: tabular-nums; font-weight: 700; }
.neiges-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--nv-trait); margin-bottom: 1.2rem; }
.neiges-surtitre { font: 600 .8rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--nv-glace); margin-bottom: .45rem; display: flex; align-items: center; gap: .5rem; }
.neiges-surtitre::before { content: ""; width: 1.4rem; height: 3px; background: var(--nv-signal); border-radius: 2px; }
.neiges-titre { font: 700 clamp(2rem, 4.5vw, 3.2rem)/.95 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.neiges-titre-rang { text-transform: none; }
.neiges-compteur { text-align: right; }
.neiges-compteur .neiges-chiffres { font-size: 3.4rem; line-height: .9; display: block; }
.neiges-compteur span:last-child { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--nv-texte-2); }
.neiges-pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.neiges-invite { background: var(--nv-2); border: 1px solid var(--nv-trait); border-radius: 10px; padding: .5rem .9rem; font-size: .95rem; color: var(--nv-texte-2); }
.btn.neiges-btn-tv { background: #fff; border-color: #fff; color: var(--nv-fond); display: inline-flex; align-items: center; gap: .45rem; }
.btn.neiges-btn-tv:hover { background: var(--nv-glace); border-color: var(--nv-glace); }
.btn.neiges-btn-tv:disabled { opacity: .45; }

.neiges-dossards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .55rem; }
.neiges-dossard { font: inherit; color: var(--nv-texte); text-align: left; cursor: pointer; display: grid; grid-template-columns: 4px 2.2rem 1fr; align-items: center; gap: .6rem; padding: .55rem .7rem .55rem 0; border-radius: 9px; background: var(--nv-2); border: 1px solid var(--nv-trait); overflow: hidden; }
.neiges-dossard:hover { border-color: rgb(255 255 255 / 30%); }
.neiges-dossard:focus-visible { outline: 3px solid var(--nv-glace); outline-offset: 2px; }
.neiges-bande { align-self: stretch; margin: -.55rem 0; }
.neiges-num { font: 600 1.05rem/1 var(--nv-f-titre); color: var(--nv-texte-2); font-variant-numeric: tabular-nums; }
.neiges-nom { font: 700 1.2rem/1.1 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.neiges-dossard small { display: block; font: 500 .75rem/1.2 system-ui, sans-serif; color: var(--nv-texte-2); text-transform: none; letter-spacing: 0; }
.neiges-dossard.neiges-retire { opacity: .55; }
.neiges-dossard.neiges-retire .neiges-nom { text-decoration: line-through; }
.neiges-dossard.neiges-repos { opacity: .7; border-style: dashed; }

.neiges-regles { text-align: center; padding: 2rem 1rem; }
.neiges-regles p { font: 600 clamp(1.4rem, 3vw, 2.2rem)/1.35 var(--nv-f-titre); max-width: 42rem; margin: 1.2rem auto 0; }
.neiges-ferme { text-align: center; padding: 2rem 1rem; }
.neiges-ferme p { font-size: 1.15rem; margin: 1rem 0 1.4rem; }

.neiges-scene { display: grid; grid-template-columns: minmax(0, 1fr) 236px; background: var(--nv-fond); border-radius: 16px; overflow: hidden; }
.neiges-scene > * { min-width: 0; }
/* Plein écran : le conteneur de la page (écran + commandes) passe en plein écran, les commandes restent accessibles en bas. */
.neiges-racine:fullscreen { background: #0a1322; padding: 1rem; overflow: auto; display: flex; flex-direction: column; justify-content: center; }
.neiges-racine:fullscreen .neiges-prof { justify-content: center; opacity: .75; }
.neiges-racine:fullscreen .neiges-prof:hover, .neiges-racine:fullscreen .neiges-prof:focus-within { opacity: 1; }
.neiges-centre { justify-content: center; }
.neiges-defile { overflow-x: auto; }
.neiges-piste-zone { position: relative; }
.neiges-piste-zone canvas { display: block; width: 100%; height: auto; }
.neiges-bug { position: absolute; top: .8rem; left: .8rem; display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
.neiges-bug-a { background: #c43a1c; color: #fff; display: grid; place-items: center; padding: 0 .55rem; }
.neiges-bug-b { background: rgb(10 19 34 / 92%); padding: .3rem .75rem; font: 700 1.15rem/1.2 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .06em; }
.neiges-chrono { position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); background: rgb(10 19 34 / 92%); border-radius: 8px; padding: .15rem 1rem .35rem; text-align: center; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); min-width: 7.5rem; }
.neiges-chrono .neiges-chiffres { font-size: 2.1rem; line-height: 1.05; display: block; }
.neiges-jauge { height: 3px; border-radius: 2px; background: var(--nv-trait); overflow: hidden; }
.neiges-jauge i { display: block; height: 100%; background: var(--nv-glace); width: 100%; }
.neiges-chrono.neiges-fin .neiges-chiffres { color: #ff8a6b; }
.neiges-pause-badge { position: absolute; top: 4.6rem; left: 50%; transform: translateX(-50%); background: var(--nv-dore); color: #1b1404; font: 700 1rem/1 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .1em; padding: .35rem .8rem; border-radius: 99px; }
.neiges-fil { display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .45rem .8rem; background: #070f1b; border-top: 1px solid var(--nv-trait); overflow: hidden; }
.neiges-fil:empty::before { content: "Les annonces de course s'affichent ici"; font: 500 .95rem/1 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .08em; color: var(--nv-texte-2); }
.neiges-bandeau { display: flex; align-items: center; gap: .55rem; width: fit-content; background: rgb(10 19 34 / 92%); border-left: 4px solid var(--nv-signal); padding: .35rem .8rem .35rem .6rem; font: 600 1.05rem/1.2 var(--nv-f-titre); letter-spacing: .03em; text-transform: uppercase; animation: neiges-glisse .35s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
.neiges-bandeau .neiges-ico { color: var(--nv-signal); }
@keyframes neiges-glisse { from { transform: translateX(-24px); opacity: 0; } }
.neiges-compte { position: absolute; inset: 0 0 3rem 0; display: grid; place-items: center; background: radial-gradient(circle, rgb(10 19 34 / 55%), rgb(10 19 34 / 20%)); pointer-events: none; }
.neiges-compte span { font: 700 9rem/1 var(--nv-f-titre); color: #fff; text-shadow: 0 6px 40px rgb(0 0 0 / 50%); animation: neiges-pulse 1s ease-out infinite; }
@keyframes neiges-pulse { from { transform: scale(1.25); opacity: .2; } 30% { transform: scale(1); opacity: 1; } }

.neiges-tour { border-left: 1px solid var(--nv-trait); padding: .8rem .6rem; background: linear-gradient(var(--nv-2), var(--nv-fond)); overflow: hidden; }
.neiges-tour h2 { font: 600 .75rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--nv-texte-2); margin: .1rem .3rem .7rem; }
.neiges-tour ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.neiges-tour li { display: grid; grid-template-columns: 1.6rem 3px 1fr auto; align-items: center; gap: .5rem; padding: .2rem .35rem; border-radius: 5px; font: 600 1rem/1.25 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .03em; }
.neiges-tour li:nth-child(odd) { background: rgb(255 255 255 / 3%); }
.neiges-pos { color: var(--nv-texte-2); text-align: right; font-variant-numeric: tabular-nums; }
.neiges-tour li:nth-child(1) .neiges-pos { color: var(--nv-dore); }
.neiges-barre { height: 1rem; border-radius: 2px; }
.neiges-tour .neiges-nom { font: inherit; display: flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neiges-ecart { color: var(--nv-texte-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.neiges-tour li.neiges-lache { background: rgb(255 90 54 / 22%); }

.neiges-prof { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.neiges-prof .btn { display: inline-flex; align-items: center; gap: .45rem; }
.neiges-message { margin-top: .8rem; }

.neiges-tv table { border-collapse: collapse; width: 100%; font: 600 1.2rem/1.2 var(--nv-f-titre); letter-spacing: .02em; }
.neiges-tv th, .neiges-tv td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--nv-trait); }
.neiges-tv th { font: 600 .75rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--nv-texte-2); }
.neiges-tv td { text-transform: uppercase; }
.neiges-tv td.neiges-n, .neiges-tv th.neiges-n { text-align: right; font-variant-numeric: tabular-nums; }
.neiges-medaille { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 700 1rem/1 var(--nv-f-titre); color: var(--nv-texte-2); }
.neiges-medaille.neiges-m1 { background: var(--nv-metal-or); color: #3a2a05; }
.neiges-medaille.neiges-m2 { background: var(--nv-metal-argent); color: #27313c; }
.neiges-medaille.neiges-m3 { background: var(--nv-metal-bronze); color: #3a1f0b; }
.neiges-pts { font-size: 1.4rem; }
.neiges-puce { display: inline-block; font: 600 .8rem/1 system-ui, sans-serif; text-transform: none; letter-spacing: 0; padding: .22rem .6rem; border-radius: 99px; background: rgb(111 207 151 / 16%); color: #8fe0b0; }

@media (prefers-reduced-motion: reduce) {
  .neiges-bandeau, .neiges-compte span { animation: none; }
}
@media (max-width: 760px) {
  .neiges-scene { grid-template-columns: minmax(0, 1fr); }
  .neiges-tour { border-left: 0; border-top: 1px solid var(--nv-trait); }
  .neiges-tour ol { grid-template-columns: 1fr 1fr; }
  .neiges-tour li:nth-child(n+9) { display: none; }
  .neiges-chrono .neiges-chiffres { font-size: 1.5rem; }
  .neiges-compte span { font-size: 5rem; }
}

/* Jeux des neiges : écran de l'élève (salle d'attente, course de Luge à la première personne, résultats). */
.neiges-salle h1, .neiges-bilan h1 { margin-bottom: .8rem; }
.neiges-salle p, .neiges-bilan p { font-size: 1.05rem; }
.neiges-sous-titre { font: 600 .85rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--nv-texte-2); margin: 1.4rem 0 .7rem; }
.neiges-teintes { display: flex; flex-wrap: wrap; gap: .6rem; }
.neiges-teinte { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid transparent; background: var(--neiges-teinte, #fff); color: #0a1322; font: 700 1.2rem/1 system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; }
.neiges-teinte[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--nv-fond), 0 0 0 4px rgb(255 255 255 / 35%); }
.neiges-teinte:focus-visible { outline: 3px solid var(--nv-glace); outline-offset: 3px; }
.neiges-pied-salle { margin-top: 1.4rem; }
.neiges-bilan { text-align: center; }
/* Entraînement contre les fantômes : classement compact au centre, boutons alignés. */
.neiges-bilan .classement-jeu { max-width: 24rem; margin: 1rem auto; text-align: left; font-size: 1.05rem; }
.neiges-bilan .classement-jeu li:nth-child(odd) { background: rgb(159 211 245 / 8%); }
.neiges-bilan .classement-jeu li.moi { outline-color: var(--nv-signal); background: rgb(159 211 245 / 16%); }
.neiges-eleve .actions-jeu { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
/* Slalom (maquette ski.html v2) : piste de jour, pastilles blanches en haut à gauche, voile du compte à rebours. */
.slalom-piste { position: relative; border-radius: 14px; overflow: hidden; background: #eef1f5; outline: none; cursor: text; color: #1d2a3e; }
.slalom-piste:focus-visible { box-shadow: 0 0 0 3px #2f6fdb; }
.slalom-piste canvas { display: block; width: 100%; height: auto; }
.slalom-hud { position: absolute; top: 2.6%; left: 1.6%; display: flex; gap: .6rem; flex-wrap: wrap; }
.slalom-pastille { display: flex; align-items: center; gap: .45em; padding: .42em 1em .42em .8em; border-radius: 999px; background: #fff; border: 1.5px solid #dfe4eb;
  box-shadow: 0 2px 8px rgb(40 60 90 / 8%); font-weight: 700; font-size: clamp(13px, 2vw, 24px); line-height: 1; font-variant-numeric: tabular-nums; color: #1d2a3e; }
.slalom-pastille svg { width: 1.2em; height: 1.2em; flex: none; color: #ef6a51; }
.slalom-pastille small { font-size: .7em; color: #5d6b80; }
.slalom-penalite { color: #d6402a; font-size: .7em; animation: slalom-monte .8s ease-out both; }
@keyframes slalom-monte { from { transform: translateY(4px); opacity: 1; } to { transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slalom-penalite { animation: none; } }
.slalom-voile { position: absolute; inset: 0; display: grid; place-content: center; pointer-events: none; }
.slalom-voile > div { min-width: min(320px, 70vw); padding: 1rem 1.6rem; border-radius: 20px; text-align: center; background: rgb(255 255 255 / 92%);
  border: 1.5px solid #dfe4eb; box-shadow: 0 10px 30px rgb(40 60 90 / 14%); }
.slalom-voile b { display: block; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; }
.slalom-voile span { display: block; margin-top: .3rem; color: #5d6b80; }
/* Mots bonus (maquette-jeux-neiges/bonus, v7) : carte dorée en haut à droite, annonces, calques des effets. */
.neiges-bonus { position: absolute; right: 4%; top: 22%; z-index: 4; min-width: 190px; padding: .55rem .8rem .6rem; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgb(255 243 196 / 78%), rgb(255 207 74 / 78%)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #3a2a00; box-shadow: 0 0 0 3px rgb(255 207 74 / 35%), 0 10px 24px rgb(0 0 0 / 30%); animation: neiges-bonus-arrive .35s ease-out; pointer-events: none; }
.neiges-bonus.neiges-bonus-choisi { box-shadow: 0 0 0 4px #fff, 0 0 30px #ffcf4a; }
@keyframes neiges-bonus-arrive { from { transform: translateX(40px) scale(.8); opacity: 0; } }
.neiges-bonus-effet { font-size: .82rem; font-weight: 700; }
.neiges-bonus-mot { font-size: 1.9rem; font-weight: 700; letter-spacing: .02em; }
.neiges-bonus-mot .fait { opacity: .35; }
.neiges-bonus-mot .ici { text-decoration: underline 3px; text-underline-offset: 5px; }
.neiges-bonus-mot .espace { display: inline-block; width: .5em; }
.neiges-bonus-jauge { height: 4px; border-radius: 2px; background: rgb(58 42 0 / 20%); margin-top: .3rem; overflow: hidden; }
.neiges-bonus-jauge > div { height: 100%; background: #3a2a00; transform-origin: left; }
.neiges-bonus-annonce { position: absolute; left: 50%; top: 13%; z-index: 5; margin: 0; padding: .45rem 1rem; border-radius: 999px; font-weight: 700;
  white-space: nowrap; opacity: 0; transform: translate(-50%, -10px); transition: opacity .2s, transform .2s; pointer-events: none; }
.neiges-bonus-annonce.visible { opacity: 1; transform: translate(-50%, 0); }
.neiges-bonus-annonce.envoi { background: #ffcf4a; color: #3a2a00; }
.neiges-bonus-annonce.recu { background: #eaf2ff; color: #0e1a33; }
.neiges-bonus-annonce.rate { background: #ff6a4d; color: #fff; }
.neiges-bonus-annonce.info { background: rgb(8 17 32 / 85%); color: #9fd3f5; }
.neiges-effets { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.neiges-buee { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; -webkit-backdrop-filter: blur(9px) brightness(1.15); backdrop-filter: blur(9px) brightness(1.15);
  background: radial-gradient(ellipse at 50% 60%, rgb(220 232 250 / 35%), rgb(220 232 250 / 55%)); }
.neiges-splat { position: absolute; left: 44%; top: 50%; width: 30%; transform: translate(-50%, -50%) scale(.2); animation: neiges-splat 3.6s forwards; filter: drop-shadow(0 4px 10px rgb(0 0 0 / 30%)); }
.neiges-splat svg { width: 100%; height: auto; display: block; }
@keyframes neiges-splat { 8% { transform: translate(-50%, -50%) scale(1.08); } 14% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -40%) scale(1, 1.06); } to { opacity: 0; transform: translate(-50%, -18%) scale(.9, 1.2); } }
.neiges-vent canvas { animation: neiges-tangue .9s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes neiges-tangue { 20% { transform: translateX(-14px) rotate(-1.6deg); } 35% { transform: translateX(9px) rotate(1.1deg); } 55% { transform: translateX(-6px) rotate(-.7deg); }
  70% { transform: translateX(16px) rotate(1.8deg); } 85% { transform: translateX(-4px) rotate(-.4deg); } }
.neiges-rafale { position: absolute; left: -15%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgb(240 246 255 / 85%), transparent); animation: neiges-souffle .5s linear both; }
@keyframes neiges-souffle { to { transform: translateX(130vw); } }
.neiges-flocon-geant { position: absolute; top: -20%; color: #f4f8ff; text-shadow: 0 0 12px rgb(255 255 255 / 70%); animation: neiges-tombe 4.5s linear forwards; }
@keyframes neiges-tombe { to { transform: translate(40px, 135vh) rotate(160deg); } }
.neiges-fartage { box-shadow: 0 0 0 4px #ffcf4a, 0 0 40px rgb(255 207 74 / 55%); }
.neiges-projectile { position: absolute; left: 50%; bottom: 18%; font-size: 64px; animation: neiges-vole .9s ease-in forwards; }
@keyframes neiges-vole { to { transform: translate(-50%, -330px) scale(.25); opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .neiges-splat, .neiges-flocon-geant, .neiges-projectile { animation-duration: .01s; }
  .neiges-vent canvas { animation: none; }
  .neiges-rafale, .neiges-bonus { animation: none; }
  .neiges-rafale { display: none; }
}
/* Pause des entraînements : bouton en haut à droite, panneau par-dessus la piste. */
.neiges-btn-pause { position: absolute; top: .55rem; right: .55rem; z-index: 4; }
.neiges-btn-pause kbd { font: inherit; font-size: .75em; opacity: .75; }
.neiges-pause { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; background: rgb(8 17 32 / 62%); }
.neiges-pause > div { min-width: min(340px, 80vw); padding: 1.2rem 1.6rem; border-radius: 16px; text-align: center; background: var(--carte); color: var(--encre); }
.neiges-pause h2 { margin: 0 0 .4rem; }
.slalom-annonce { position: absolute; left: 0; right: 0; bottom: .6rem; margin: 0; text-align: center; font-weight: 700; color: #1d2a3e; }
.neiges-points { margin: .4rem 0; }
.neiges-points .neiges-chiffres { font-size: 3.4rem; line-height: 1; }
.neiges-cockpit { position: relative; background: linear-gradient(#0c1a2c, #081120); border-radius: 16px; color: var(--nv-texte); overflow: hidden; outline: none; cursor: text; }
.neiges-cockpit:focus-visible { box-shadow: inset 0 0 0 3px var(--nv-glace); }
.neiges-vue canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 7rem); margin: 0 auto; }
.neiges-cockpit.neiges-derape .neiges-vue canvas { filter: saturate(.55) brightness(.95); }
/* Encart discret en haut à gauche : rang, écart avec l'élève devant, mini-piste, chrono et distance. */
.neiges-encart { position: absolute; top: .55rem; left: .55rem; z-index: 3; display: grid; grid-template-columns: auto auto auto; gap: .75rem; align-items: center; padding: .3rem .7rem .35rem; border-radius: 10px; background: rgb(8 17 32 / 78%); }
.neiges-rang { display: flex; align-items: baseline; gap: .2rem; }
.neiges-rang b { font: 700 1.55rem/.9 var(--nv-f-titre); }
.neiges-rang span { font: 600 .8rem/1 var(--nv-f-titre); color: var(--nv-texte-2); text-transform: uppercase; }
.neiges-ecart-devant { font: 600 .8rem/1.2 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--nv-texte-2); }
.neiges-ecart-devant b { color: var(--nv-texte); }
.neiges-minipiste { position: relative; width: 130px; height: 4px; border-radius: 3px; background: var(--nv-3); margin-top: .3rem; }
.neiges-minipiste i { position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--nv-texte-2); }
.neiges-minipiste i.neiges-moi { width: 9px; height: 9px; box-shadow: 0 0 0 1.5px #fff; z-index: 2; }
.neiges-minipiste .neiges-fenetre { position: absolute; top: -4px; bottom: -4px; right: 0; border-radius: 4px; background: rgb(159 211 245 / 12%); border-left: 2px solid var(--nv-signal); }
.neiges-cockpit-chrono { text-align: right; }
.neiges-cockpit-chrono .neiges-chiffres { font-size: 1.15rem; line-height: 1; display: block; }
.neiges-cockpit-chrono small { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--nv-texte-2); }
.neiges-cockpit-pied { display: flex; align-items: center; gap: 1.2rem; padding: .6rem 1.2rem .8rem; border-top: 1px solid var(--nv-trait); }
.neiges-elan { display: grid; gap: .35rem; justify-items: center; }
.neiges-elan .neiges-chiffres { font-size: 1.5rem; line-height: 1; }
.neiges-elan small { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--nv-texte-2); }
.neiges-barres { display: flex; gap: 3px; }
.neiges-barres i { width: 16px; height: 6px; border-radius: 2px; background: var(--nv-3); }
.neiges-barres i.neiges-on { background: var(--nv-glace); }
.neiges-elan.neiges-elan-max .neiges-chiffres { color: var(--nv-glace); }
.neiges-annonce { margin: 0; font: 600 1rem/1.3 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .04em; color: #ffb3a1; }
.neiges-voile { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; text-align: center; padding: 1rem; background: rgb(8 17 32 / 72%); font: 700 clamp(1.6rem, 4vw, 2.6rem)/1.2 var(--nv-f-titre); text-transform: uppercase; letter-spacing: .05em; pointer-events: none; }
.neiges-voile small { display: block; font: 400 1rem/1.4 system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--nv-texte-2); margin-top: .4rem; }
.neiges-voile.neiges-voile-leger { background: transparent; font-size: clamp(2.4rem, 7vw, 4.5rem); text-shadow: 0 4px 24px rgb(0 0 0 / 60%); }
/* Connexion perdue pendant la compétition : discret, sans déplacer la piste. */
.neiges-reseau { position: fixed; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 20; margin: 0; padding: .35rem .9rem; border-radius: 99px; background: #0a1322; color: #ffd2c7; border: 1px solid #ff8a6b; font-size: .9rem; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
@media (max-width: 760px) {
  .neiges-encart { gap: .5rem; padding: .25rem .5rem; }
  .neiges-minipiste { width: 80px; }
  .neiges-barres i { width: 9px; }
}

/* ---------- Pages de création : aperçu à droite (maquette validée le 14.11.2026) ---------- */
.creation-deux { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.creation-apercu { position: sticky; top: 1rem; display: grid; gap: .5rem; }
.creation-apercu-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.titre-apercu { margin: 0; font-size: .85rem; color: var(--encre-2); }
.apercu-contenu { display: grid; gap: .5rem; }
.apercu-contenu h2 { text-align: center; font-size: 1.05rem; margin: .2rem 0 .6rem; overflow-wrap: anywhere; }
.apercu-telephone { max-height: none; }
/* Cadres des aperçus harmonisés (14.11.2026) : téléphone et écran projeté ont le même contour que l'aperçu du sondage
   qualité (q-telephone : 9px, couleur de l'encre), le même fond, et les mêmes blocs à l'intérieur. */
.apercu-vide { border: 2px dashed color-mix(in srgb, var(--encre) 45%, transparent); border-radius: 18px; padding: 1.2rem; text-align: center; }
.apercu-bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: .6rem .75rem; margin-bottom: .6rem; overflow-wrap: anywhere; }
.apercu-projete { border: 9px solid var(--encre); border-radius: 18px; background: var(--fond); padding: .8rem .7rem; overflow: hidden; }
.apercu-projete svg { display: block; width: 100%; height: auto; }
.apercu-piste { height: 4px; background: var(--bord); border-radius: 2px; position: relative; margin: .9rem .3rem .4rem; }
.apercu-piste i { position: absolute; left: 50%; top: -7px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--accent); }
.apercu-bornes { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--encre-2); }
.apercu-ordre { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.apercu-ordre li { display: flex; gap: .5rem; align-items: center; background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: .45rem .6rem; overflow-wrap: anywhere; }
.apercu-bouton { margin: .8rem 0 0; text-align: center; background: var(--accent); color: var(--sur-accent); border-radius: 8px; padding: .5rem; font-weight: 700; opacity: .6; }
.apercu-colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; margin-top: .5rem; font-size: .78rem; }
.apercu-colonnes > div { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: .35rem; min-height: 5rem; overflow-wrap: anywhere; }
.apercu-postit { margin: .35rem 0 0; background: #f5e08a; color: #2b2400; border-radius: 4px; padding: .3rem; }
.apercu-flash { display: grid; place-items: center; width: 100%; min-height: 9rem; padding: 1rem; border: 2px solid var(--accent); border-radius: 12px;
  background: var(--accent-doux); color: var(--encre); font: inherit; font-weight: 700; font-size: 1.1rem; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.apercu-flash.verso { background: var(--carte); font-weight: 500; font-size: 1rem; }
.apercu-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.apercu-tuiles .tuile { display: flex; align-items: center; gap: .4rem; min-height: 3.2rem; padding: .5rem; border-radius: 8px; background: var(--k); color: var(--tk, #fff); font-weight: 700; font-size: .85rem; overflow-wrap: anywhere; }
.apercu-quiz-projete { display: grid; gap: .6rem; position: relative; }
.apercu-temps { position: absolute; top: .3rem; right: .4rem; font-size: .75rem; font-weight: 700; color: var(--encre-2); }
.apercu-phrase { line-height: 2.4; margin: 0; }
.apercu-relier { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.apercu-relier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.apercu-relier li { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: .4rem .5rem; font-size: .85rem; overflow-wrap: anywhere; }
.apercu-choix { display: inline-flex; gap: .25rem; }
.apercu-image-epingles { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--bord); margin-bottom: .6rem; }
.apercu-grille { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .82rem; }
.apercu-grille li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; align-items: center; }
.apercu-grille li > span:first-child { overflow-wrap: anywhere; }
.apercu-choix-grille { border: 1px solid var(--bord); border-radius: 6px; padding: 0 .35rem; background: var(--fond); white-space: nowrap; }
.apercu-points { color: var(--encre-2); white-space: nowrap; }
.apercu-total { margin: .2rem 0 0; font-weight: 700; text-align: right; }
.apercu-choix [aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bouton-apercu, .fermer-apercu { display: none; }
/* Écrans sans aperçu : des champs moins larges, plus lisibles. */
.form-etroit { max-width: 760px; }
/* Grille : le tableau garde toute la largeur, seul le nom de la grille est limité. */
#form-grille > .champ { max-width: 760px; }
@media (max-width: 900px) {
  .creation-deux { grid-template-columns: minmax(0, 1fr); }
  /* Écran étroit : l'aperçu devient un panneau qui monte du bas, ouvert par le bouton « Aperçu ». */
  .creation-apercu { display: none; position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 85vh; overflow-y: auto;
    background: var(--carte); border-top: 1px solid var(--bord); border-radius: 16px 16px 0 0; padding: 1rem 16px 1.5rem; box-shadow: 0 -8px 30px rgb(0 0 0 / 35%); }
  .creation-apercu.ouvert { display: grid; }
  .fermer-apercu { display: inline-block; }
  .bouton-apercu { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 59; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
  body:not(.js) .bouton-apercu { display: none; }
}

/* ---------- Palettes (généré par build.mjs depuis src/palettes.ts) ---------- */
[data-palette="faitools"] { --s0: #e5122a; --s1: #2a7cb8; --s2: #c98500; --s3: #2e7d4f; --s4: #6b7882; --s5: #c44a66; --s6: #3a98c9; --s7: #8c959d; --t0: #ffffff; --t1: #ffffff; --t2: #ffffff; --t3: #ffffff; --t4: #ffffff; --t5: #ffffff; --t6: #ffffff; --t7: #ffffff; --k0: #e5122a; --k1: #2a7cb8; --k2: #c98500; --k3: #2e7d4f; --tk0: #ffffff; --tk1: #ffffff; --tk2: #ffffff; --tk3: #ffffff; --kl0: #ffffff; --kl1: #000000; --kl2: #000000; --kl3: #ffffff; --n0: #e5122a; --n1: #2a7cb8; --n2: #c44a66; --point: #e5122a; --moi: color-mix(in srgb, #e5122a 70%, #000); --pi0: color-mix(in srgb, #e5122a 32%, #fff); --pi1: color-mix(in srgb, #2a7cb8 32%, #fff); --pi2: color-mix(in srgb, #c98500 32%, #fff); --pi3: color-mix(in srgb, #2e7d4f 32%, #fff); --pi4: color-mix(in srgb, #6b7882 32%, #fff); --pi5: color-mix(in srgb, #c44a66 32%, #fff); }
[data-palette="alpes"] { --s0: #1b6ca8; --s1: #e5122a; --s2: #ffbe2a; --s3: #2e7d4f; --s4: #4f7391; --s5: #6db7dc; --s6: #b3263f; --s7: #8fa2b2; --t0: #ffffff; --t1: #ffffff; --t2: #1f2933; --t3: #ffffff; --t4: #ffffff; --t5: #1f2933; --t6: #ffffff; --t7: #1f2933; --k0: #e5122a; --k1: #1b6ca8; --k2: #ffbe2a; --k3: #2e7d4f; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #ffffff; --kl0: #ffffff; --kl1: #ffffff; --kl2: #000000; --kl3: #ffffff; --n0: #1b6ca8; --n1: #e5122a; --n2: #4f7391; --point: #1b6ca8; --moi: color-mix(in srgb, #1b6ca8 70%, #000); --pi0: color-mix(in srgb, #1b6ca8 32%, #fff); --pi1: color-mix(in srgb, #e5122a 32%, #fff); --pi2: color-mix(in srgb, #ffbe2a 32%, #fff); --pi3: color-mix(in srgb, #2e7d4f 32%, #fff); --pi4: color-mix(in srgb, #4f7391 32%, #fff); --pi5: color-mix(in srgb, #6db7dc 32%, #fff); }
[data-palette="alpes"] { --ic1: #1b6ca8; --ic2: #e5122a; --ic3: #ffbe2a; }
@media (prefers-color-scheme: dark) { [data-palette="alpes"] { --moi: color-mix(in srgb, #1b6ca8 55%, #fff); --n0: color-mix(in srgb, #1b6ca8 70%, #fff); --n1: color-mix(in srgb, #e5122a 70%, #fff); --n2: color-mix(in srgb, #4f7391 70%, #fff); --pi0: color-mix(in srgb, #1b6ca8 38%, #161b18); --pi1: color-mix(in srgb, #e5122a 38%, #161b18); --pi2: color-mix(in srgb, #ffbe2a 38%, #161b18); --pi3: color-mix(in srgb, #2e7d4f 38%, #161b18); --pi4: color-mix(in srgb, #4f7391 38%, #161b18); --pi5: color-mix(in srgb, #6db7dc 38%, #161b18); } }
[data-palette="origine"] { --s0: #646cdf; --s1: #e57c73; --s2: #4a52a0; --s3: #1baf7a; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #e34948; --t0: #ffffff; --t1: #1f2933; --t2: #ffffff; --t3: #1f2933; --t4: #ffffff; --t5: #ffffff; --t6: #ffffff; --t7: #ffffff; --k0: #e34948; --k1: #646cdf; --k2: #c98500; --k3: #008300; --tk0: #ffffff; --tk1: #ffffff; --tk2: #ffffff; --tk3: #ffffff; --kl0: #000000; --kl1: #000000; --kl2: #000000; --kl3: #ffffff; --n0: #e34948; --n1: #4a52a0; --n2: #d55181; --point: #646cdf; --moi: color-mix(in srgb, #646cdf 70%, #000); --pi0: color-mix(in srgb, #646cdf 32%, #fff); --pi1: color-mix(in srgb, #e57c73 32%, #fff); --pi2: color-mix(in srgb, #4a52a0 32%, #fff); --pi3: color-mix(in srgb, #1baf7a 32%, #fff); --pi4: color-mix(in srgb, #c98500 32%, #fff); --pi5: color-mix(in srgb, #d55181 32%, #fff); }
[data-palette="origine"] { --ic1: #646cdf; --ic2: #e57c73; --ic3: #4a52a0; }
@media (prefers-color-scheme: dark) { [data-palette="origine"] { --moi: color-mix(in srgb, #646cdf 55%, #fff); --n0: color-mix(in srgb, #e34948 70%, #fff); --n1: color-mix(in srgb, #4a52a0 70%, #fff); --n2: color-mix(in srgb, #d55181 70%, #fff); --pi0: color-mix(in srgb, #646cdf 38%, #161b18); --pi1: color-mix(in srgb, #e57c73 38%, #161b18); --pi2: color-mix(in srgb, #4a52a0 38%, #161b18); --pi3: color-mix(in srgb, #1baf7a 38%, #161b18); --pi4: color-mix(in srgb, #c98500 38%, #161b18); --pi5: color-mix(in srgb, #d55181 38%, #161b18); } }
[data-palette="tableau"] { --s0: #4e79a7; --s1: #f28e2b; --s2: #e15759; --s3: #76b7b2; --s4: #59a14f; --s5: #edc948; --s6: #b07aa1; --s7: #ff9da7; --t0: #ffffff; --t1: #1f2933; --t2: #ffffff; --t3: #1f2933; --t4: #ffffff; --t5: #1f2933; --t6: #ffffff; --t7: #1f2933; --k0: #e15759; --k1: #4e79a7; --k2: #f28e2b; --k3: #59a14f; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #ffffff; --kl0: #000000; --kl1: #000000; --kl2: #000000; --kl3: #000000; --n0: #4e79a7; --n1: #e15759; --n2: #b07aa1; --point: #4e79a7; --moi: color-mix(in srgb, #4e79a7 70%, #000); --pi0: color-mix(in srgb, #4e79a7 32%, #fff); --pi1: color-mix(in srgb, #f28e2b 32%, #fff); --pi2: color-mix(in srgb, #e15759 32%, #fff); --pi3: color-mix(in srgb, #76b7b2 32%, #fff); --pi4: color-mix(in srgb, #59a14f 32%, #fff); --pi5: color-mix(in srgb, #edc948 32%, #fff); }
[data-palette="tableau"] { --ic1: #4e79a7; --ic2: #f28e2b; --ic3: #e15759; }
@media (prefers-color-scheme: dark) { [data-palette="tableau"] { --moi: color-mix(in srgb, #4e79a7 55%, #fff); --n0: color-mix(in srgb, #4e79a7 70%, #fff); --n1: color-mix(in srgb, #e15759 70%, #fff); --n2: color-mix(in srgb, #b07aa1 70%, #fff); --pi0: color-mix(in srgb, #4e79a7 38%, #161b18); --pi1: color-mix(in srgb, #f28e2b 38%, #161b18); --pi2: color-mix(in srgb, #e15759 38%, #161b18); --pi3: color-mix(in srgb, #76b7b2 38%, #161b18); --pi4: color-mix(in srgb, #59a14f 38%, #161b18); --pi5: color-mix(in srgb, #edc948 38%, #161b18); } }
[data-palette="nordique"] { --s0: #5e81ac; --s1: #bf616a; --s2: #a3be8c; --s3: #ebcb8b; --s4: #b48ead; --s5: #88c0d0; --s6: #d08770; --s7: #4c566a; --t0: #ffffff; --t1: #ffffff; --t2: #1f2933; --t3: #1f2933; --t4: #1f2933; --t5: #1f2933; --t6: #1f2933; --t7: #ffffff; --k0: #bf616a; --k1: #5e81ac; --k2: #ebcb8b; --k3: #a3be8c; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #1f2933; --kl0: #000000; --kl1: #000000; --kl2: #000000; --kl3: #000000; --n0: #5e81ac; --n1: #bf616a; --n2: #4c566a; --point: #5e81ac; --moi: color-mix(in srgb, #5e81ac 70%, #000); --pi0: color-mix(in srgb, #5e81ac 32%, #fff); --pi1: color-mix(in srgb, #bf616a 32%, #fff); --pi2: color-mix(in srgb, #a3be8c 32%, #fff); --pi3: color-mix(in srgb, #ebcb8b 32%, #fff); --pi4: color-mix(in srgb, #b48ead 32%, #fff); --pi5: color-mix(in srgb, #88c0d0 32%, #fff); }
[data-palette="nordique"] { --ic1: #5e81ac; --ic2: #bf616a; --ic3: #a3be8c; }
@media (prefers-color-scheme: dark) { [data-palette="nordique"] { --moi: color-mix(in srgb, #5e81ac 55%, #fff); --n0: color-mix(in srgb, #5e81ac 70%, #fff); --n1: color-mix(in srgb, #bf616a 70%, #fff); --n2: color-mix(in srgb, #4c566a 70%, #fff); --pi0: color-mix(in srgb, #5e81ac 38%, #161b18); --pi1: color-mix(in srgb, #bf616a 38%, #161b18); --pi2: color-mix(in srgb, #a3be8c 38%, #161b18); --pi3: color-mix(in srgb, #ebcb8b 38%, #161b18); --pi4: color-mix(in srgb, #b48ead 38%, #161b18); --pi5: color-mix(in srgb, #88c0d0 38%, #161b18); } }
[data-palette="bonbon"] { --s0: #ef476f; --s1: #ffd166; --s2: #06d6a0; --s3: #118ab2; --s4: #9b5de5; --s5: #f15bb5; --s6: #00bbf9; --s7: #26547c; --t0: #ffffff; --t1: #1f2933; --t2: #1f2933; --t3: #ffffff; --t4: #ffffff; --t5: #ffffff; --t6: #1f2933; --t7: #ffffff; --k0: #ef476f; --k1: #118ab2; --k2: #ffd166; --k3: #06d6a0; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #1f2933; --kl0: #000000; --kl1: #000000; --kl2: #000000; --kl3: #000000; --n0: #ef476f; --n1: #26547c; --n2: #9b5de5; --point: #ef476f; --moi: color-mix(in srgb, #ef476f 70%, #000); --pi0: color-mix(in srgb, #ef476f 32%, #fff); --pi1: color-mix(in srgb, #ffd166 32%, #fff); --pi2: color-mix(in srgb, #06d6a0 32%, #fff); --pi3: color-mix(in srgb, #118ab2 32%, #fff); --pi4: color-mix(in srgb, #9b5de5 32%, #fff); --pi5: color-mix(in srgb, #f15bb5 32%, #fff); }
[data-palette="bonbon"] { --ic1: #ef476f; --ic2: #ffd166; --ic3: #06d6a0; }
@media (prefers-color-scheme: dark) { [data-palette="bonbon"] { --moi: color-mix(in srgb, #ef476f 55%, #fff); --n0: color-mix(in srgb, #ef476f 70%, #fff); --n1: color-mix(in srgb, #26547c 70%, #fff); --n2: color-mix(in srgb, #9b5de5 70%, #fff); --pi0: color-mix(in srgb, #ef476f 38%, #161b18); --pi1: color-mix(in srgb, #ffd166 38%, #161b18); --pi2: color-mix(in srgb, #06d6a0 38%, #161b18); --pi3: color-mix(in srgb, #118ab2 38%, #161b18); --pi4: color-mix(in srgb, #9b5de5 38%, #161b18); --pi5: color-mix(in srgb, #f15bb5 38%, #161b18); } }
[data-palette="neon"] { --s0: #ff006e; --s1: #3a86ff; --s2: #8338ec; --s3: #fb5607; --s4: #ffbe0b; --s5: #06d6a0; --s6: #118ab2; --s7: #ef476f; --t0: #ffffff; --t1: #ffffff; --t2: #ffffff; --t3: #ffffff; --t4: #1f2933; --t5: #1f2933; --t6: #ffffff; --t7: #ffffff; --k0: #ff006e; --k1: #3a86ff; --k2: #ffbe0b; --k3: #06d6a0; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #1f2933; --kl0: #000000; --kl1: #000000; --kl2: #000000; --kl3: #000000; --n0: #ff006e; --n1: #8338ec; --n2: #3a86ff; --point: #ff006e; --moi: color-mix(in srgb, #ff006e 70%, #000); --pi0: color-mix(in srgb, #ff006e 32%, #fff); --pi1: color-mix(in srgb, #3a86ff 32%, #fff); --pi2: color-mix(in srgb, #8338ec 32%, #fff); --pi3: color-mix(in srgb, #fb5607 32%, #fff); --pi4: color-mix(in srgb, #ffbe0b 32%, #fff); --pi5: color-mix(in srgb, #06d6a0 32%, #fff); }
[data-palette="neon"] { --ic1: #ff006e; --ic2: #3a86ff; --ic3: #8338ec; }
@media (prefers-color-scheme: dark) { [data-palette="neon"] { --moi: color-mix(in srgb, #ff006e 55%, #fff); --n0: color-mix(in srgb, #ff006e 70%, #fff); --n1: color-mix(in srgb, #8338ec 70%, #fff); --n2: color-mix(in srgb, #3a86ff 70%, #fff); --pi0: color-mix(in srgb, #ff006e 38%, #161b18); --pi1: color-mix(in srgb, #3a86ff 38%, #161b18); --pi2: color-mix(in srgb, #8338ec 38%, #161b18); --pi3: color-mix(in srgb, #fb5607 38%, #161b18); --pi4: color-mix(in srgb, #ffbe0b 38%, #161b18); --pi5: color-mix(in srgb, #06d6a0 38%, #161b18); } }
[data-palette="terre"] { --s0: #287271; --s1: #2a9d8f; --s2: #e9c46a; --s3: #f4a261; --s4: #e76f51; --s5: #8ab17d; --s6: #9c6644; --s7: #6d597a; --t0: #ffffff; --t1: #ffffff; --t2: #1f2933; --t3: #1f2933; --t4: #ffffff; --t5: #1f2933; --t6: #ffffff; --t7: #ffffff; --k0: #e76f51; --k1: #287271; --k2: #e9c46a; --k3: #8ab17d; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #1f2933; --kl0: #000000; --kl1: #ffffff; --kl2: #000000; --kl3: #000000; --n0: #287271; --n1: #e76f51; --n2: #9c6644; --point: #287271; --moi: color-mix(in srgb, #287271 70%, #000); --pi0: color-mix(in srgb, #287271 32%, #fff); --pi1: color-mix(in srgb, #2a9d8f 32%, #fff); --pi2: color-mix(in srgb, #e9c46a 32%, #fff); --pi3: color-mix(in srgb, #f4a261 32%, #fff); --pi4: color-mix(in srgb, #e76f51 32%, #fff); --pi5: color-mix(in srgb, #8ab17d 32%, #fff); }
[data-palette="terre"] { --ic1: #287271; --ic2: #2a9d8f; --ic3: #e9c46a; }
@media (prefers-color-scheme: dark) { [data-palette="terre"] { --moi: color-mix(in srgb, #287271 55%, #fff); --n0: color-mix(in srgb, #287271 70%, #fff); --n1: color-mix(in srgb, #e76f51 70%, #fff); --n2: color-mix(in srgb, #9c6644 70%, #fff); --pi0: color-mix(in srgb, #287271 38%, #161b18); --pi1: color-mix(in srgb, #2a9d8f 38%, #161b18); --pi2: color-mix(in srgb, #e9c46a 38%, #161b18); --pi3: color-mix(in srgb, #f4a261 38%, #161b18); --pi4: color-mix(in srgb, #e76f51 38%, #161b18); --pi5: color-mix(in srgb, #8ab17d 38%, #161b18); } }
[data-palette="jardin"] { --s0: #2b9348; --s1: #f9c74f; --s2: #f3722c; --s3: #577590; --s4: #90be6d; --s5: #f94144; --s6: #43aa8b; --s7: #f8961e; --t0: #ffffff; --t1: #1f2933; --t2: #1f2933; --t3: #ffffff; --t4: #1f2933; --t5: #ffffff; --t6: #1f2933; --t7: #1f2933; --k0: #f94144; --k1: #577590; --k2: #f9c74f; --k3: #2b9348; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #ffffff; --kl0: #000000; --kl1: #ffffff; --kl2: #000000; --kl3: #000000; --n0: #2b9348; --n1: #f94144; --n2: #577590; --point: #2b9348; --moi: color-mix(in srgb, #2b9348 70%, #000); --pi0: color-mix(in srgb, #2b9348 32%, #fff); --pi1: color-mix(in srgb, #f9c74f 32%, #fff); --pi2: color-mix(in srgb, #f3722c 32%, #fff); --pi3: color-mix(in srgb, #577590 32%, #fff); --pi4: color-mix(in srgb, #90be6d 32%, #fff); --pi5: color-mix(in srgb, #f94144 32%, #fff); }
[data-palette="jardin"] { --ic1: #2b9348; --ic2: #f9c74f; --ic3: #f3722c; }
@media (prefers-color-scheme: dark) { [data-palette="jardin"] { --moi: color-mix(in srgb, #2b9348 55%, #fff); --n0: color-mix(in srgb, #2b9348 70%, #fff); --n1: color-mix(in srgb, #f94144 70%, #fff); --n2: color-mix(in srgb, #577590 70%, #fff); --pi0: color-mix(in srgb, #2b9348 38%, #161b18); --pi1: color-mix(in srgb, #f9c74f 38%, #161b18); --pi2: color-mix(in srgb, #f3722c 38%, #161b18); --pi3: color-mix(in srgb, #577590 38%, #161b18); --pi4: color-mix(in srgb, #90be6d 38%, #161b18); --pi5: color-mix(in srgb, #f94144 38%, #161b18); } }
[data-palette="retro"] { --s0: #d1495b; --s1: #edae49; --s2: #00798c; --s3: #30638e; --s4: #4f6d7a; --s5: #66a182; --s6: #8d5a97; --s7: #e07a5f; --t0: #ffffff; --t1: #1f2933; --t2: #ffffff; --t3: #ffffff; --t4: #ffffff; --t5: #ffffff; --t6: #ffffff; --t7: #1f2933; --k0: #d1495b; --k1: #30638e; --k2: #edae49; --k3: #66a182; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #ffffff; --kl0: #000000; --kl1: #ffffff; --kl2: #000000; --kl3: #000000; --n0: #d1495b; --n1: #30638e; --n2: #8d5a97; --point: #d1495b; --moi: color-mix(in srgb, #d1495b 70%, #000); --pi0: color-mix(in srgb, #d1495b 32%, #fff); --pi1: color-mix(in srgb, #edae49 32%, #fff); --pi2: color-mix(in srgb, #00798c 32%, #fff); --pi3: color-mix(in srgb, #30638e 32%, #fff); --pi4: color-mix(in srgb, #4f6d7a 32%, #fff); --pi5: color-mix(in srgb, #66a182 32%, #fff); }
[data-palette="retro"] { --ic1: #d1495b; --ic2: #edae49; --ic3: #00798c; }
@media (prefers-color-scheme: dark) { [data-palette="retro"] { --moi: color-mix(in srgb, #d1495b 55%, #fff); --n0: color-mix(in srgb, #d1495b 70%, #fff); --n1: color-mix(in srgb, #30638e 70%, #fff); --n2: color-mix(in srgb, #8d5a97 70%, #fff); --pi0: color-mix(in srgb, #d1495b 38%, #161b18); --pi1: color-mix(in srgb, #edae49 38%, #161b18); --pi2: color-mix(in srgb, #00798c 38%, #161b18); --pi3: color-mix(in srgb, #30638e 38%, #161b18); --pi4: color-mix(in srgb, #4f6d7a 38%, #161b18); --pi5: color-mix(in srgb, #66a182 38%, #161b18); } }
[data-palette="ardoise"] { --s0: #3d5a80; --s1: #ee6c4d; --s2: #98c1d9; --s3: #5c677d; --s4: #81b29a; --s5: #f2cc8f; --s6: #e07a5f; --s7: #6d6875; --t0: #ffffff; --t1: #ffffff; --t2: #1f2933; --t3: #ffffff; --t4: #1f2933; --t5: #1f2933; --t6: #1f2933; --t7: #ffffff; --k0: #ee6c4d; --k1: #3d5a80; --k2: #f2cc8f; --k3: #81b29a; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #1f2933; --kl0: #000000; --kl1: #ffffff; --kl2: #000000; --kl3: #000000; --n0: #3d5a80; --n1: #ee6c4d; --n2: #6d6875; --point: #3d5a80; --moi: color-mix(in srgb, #3d5a80 70%, #000); --pi0: color-mix(in srgb, #3d5a80 32%, #fff); --pi1: color-mix(in srgb, #ee6c4d 32%, #fff); --pi2: color-mix(in srgb, #98c1d9 32%, #fff); --pi3: color-mix(in srgb, #5c677d 32%, #fff); --pi4: color-mix(in srgb, #81b29a 32%, #fff); --pi5: color-mix(in srgb, #f2cc8f 32%, #fff); }
[data-palette="ardoise"] { --ic1: #3d5a80; --ic2: #ee6c4d; --ic3: #98c1d9; }
@media (prefers-color-scheme: dark) { [data-palette="ardoise"] { --moi: color-mix(in srgb, #3d5a80 55%, #fff); --n0: color-mix(in srgb, #3d5a80 70%, #fff); --n1: color-mix(in srgb, #ee6c4d 70%, #fff); --n2: color-mix(in srgb, #6d6875 70%, #fff); --pi0: color-mix(in srgb, #3d5a80 38%, #161b18); --pi1: color-mix(in srgb, #ee6c4d 38%, #161b18); --pi2: color-mix(in srgb, #98c1d9 38%, #161b18); --pi3: color-mix(in srgb, #5c677d 38%, #161b18); --pi4: color-mix(in srgb, #81b29a 38%, #161b18); --pi5: color-mix(in srgb, #f2cc8f 38%, #161b18); } }
[data-palette="daltonisme"] { --s0: #0072b2; --s1: #e69f00; --s2: #009e73; --s3: #cc79a7; --s4: #56b4e9; --s5: #d55e00; --s6: #f0e442; --s7: #7f7f7f; --t0: #ffffff; --t1: #1f2933; --t2: #ffffff; --t3: #ffffff; --t4: #1f2933; --t5: #ffffff; --t6: #1f2933; --t7: #ffffff; --k0: #d55e00; --k1: #0072b2; --k2: #e69f00; --k3: #009e73; --tk0: #ffffff; --tk1: #ffffff; --tk2: #1f2933; --tk3: #ffffff; --kl0: #000000; --kl1: #ffffff; --kl2: #000000; --kl3: #000000; --n0: #0072b2; --n1: #d55e00; --n2: #009e73; --point: #0072b2; --moi: color-mix(in srgb, #0072b2 70%, #000); --pi0: color-mix(in srgb, #0072b2 32%, #fff); --pi1: color-mix(in srgb, #e69f00 32%, #fff); --pi2: color-mix(in srgb, #009e73 32%, #fff); --pi3: color-mix(in srgb, #cc79a7 32%, #fff); --pi4: color-mix(in srgb, #56b4e9 32%, #fff); --pi5: color-mix(in srgb, #d55e00 32%, #fff); }
[data-palette="daltonisme"] { --ic1: #0072b2; --ic2: #e69f00; --ic3: #009e73; }
@media (prefers-color-scheme: dark) { [data-palette="daltonisme"] { --moi: color-mix(in srgb, #0072b2 55%, #fff); --n0: color-mix(in srgb, #0072b2 70%, #fff); --n1: color-mix(in srgb, #d55e00 70%, #fff); --n2: color-mix(in srgb, #009e73 70%, #fff); --pi0: color-mix(in srgb, #0072b2 38%, #161b18); --pi1: color-mix(in srgb, #e69f00 38%, #161b18); --pi2: color-mix(in srgb, #009e73 38%, #161b18); --pi3: color-mix(in srgb, #cc79a7 38%, #161b18); --pi4: color-mix(in srgb, #56b4e9 38%, #161b18); --pi5: color-mix(in srgb, #d55e00 38%, #161b18); } }