/* Styles d'Apteo. Aucune couleur, police ou arrondi écrit en dur :
   tout vient des variables de /theme.css (charte de l'organisme). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
a { color: var(--primaire); }
.texte-secondaire { color: var(--texte-secondaire); }

/* En-tête : bandeau (logo, compte) puis onglets ; l'onglet actif prend la couleur de la page. */
.entete { background: var(--entete); color: var(--sur-entete); padding: 0 1.25rem; }
.entete__haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; }
.entete__marque { color: inherit; text-decoration: none; display: flex; align-items: center; }
.entete__logo { max-height: 40px; }
.entete__nom { font-weight: 700; font-size: 1.15rem; }
.entete__compte { display: flex; align-items: center; gap: 1rem; }
.entete__compte form { margin: 0; }
.entete__compte .bouton--discret { color: inherit; border-color: currentColor; background: transparent; }
.entete__utilisateur { color: inherit; opacity: .85; }
.entete__utilisateur--actif { opacity: 1; font-weight: 700; }

.onglets-principaux { display: flex; align-items: flex-end; gap: .25rem; flex-wrap: wrap; }
.onglet {
  flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  color: var(--sur-entete); text-decoration: none; font-weight: 600; white-space: nowrap;
  border-radius: var(--rayon) var(--rayon) 0 0; border-top: 3px solid transparent; opacity: .8;
}
.onglet:hover { opacity: 1; background: color-mix(in srgb, var(--sur-entete) 12%, transparent); }
.onglet--actif, .onglet--actif:hover {
  opacity: 1; background: var(--fond); color: var(--primaire); border-top-color: var(--primaire);
}
.onglet:focus-visible { outline: 2px solid var(--sur-entete); outline-offset: -4px; }
@media (max-width: 900px) {
  .entete { padding: 0 .75rem; }
  .onglet { padding: 0 .65rem; font-size: .95rem; }
  .onglets-principaux { gap: .1rem; }
}
.onglets-principaux__separateur { flex: none; width: 1px; height: 24px; margin: 0 .5rem 10px; background: var(--sur-entete); opacity: .35; }

.page { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* Blocs */
.bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.bloc--etroit { max-width: 420px; margin: 2rem auto; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille .bloc { margin: 0; }

/* Boutons : cibles tactiles d'au moins 44 px (tablette) */
.bouton {
  min-height: 44px; padding: .5rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--rayon);
}
.bouton--primaire { background: var(--primaire); color: var(--sur-primaire); }
.bouton--secondaire { background: var(--secondaire); color: var(--sur-secondaire); }
.bouton--danger { background: var(--erreur); color: var(--sur-erreur); }
.bouton--discret { background: transparent; color: var(--texte); border-color: var(--bordure); min-height: 36px; }
.bouton:hover { filter: brightness(.94); }
.bouton:focus-visible, .champ__saisie:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }

/* Formulaires */
.formulaire { display: flex; flex-direction: column; gap: .9rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; }
.champ__libelle { font-weight: 600; font-size: .95rem; }
.champ__saisie {
  min-height: 44px; padding: .5rem .7rem; font: inherit; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
}

/* Messages et badges */
.message { padding: .7rem 1rem; border-radius: var(--rayon); border-left: 5px solid var(--bordure); background: var(--surface); }
.message--erreur { border-left-color: var(--erreur); background: color-mix(in srgb, var(--erreur) 10%, var(--surface)); color: var(--texte); font-weight: 600; }
.champ__saisie[aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 2px color-mix(in srgb, var(--erreur) 35%, transparent); }
.message--succes { border-left-color: var(--succes); }
.message--info { border-left-color: var(--primaire); }
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.badge--succes { background: var(--succes); color: var(--sur-succes); }
.badge--alerte { background: var(--alerte); color: var(--sur-alerte); }
.badge--erreur { background: var(--erreur); color: var(--sur-erreur); }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau form { margin: 0; }
.pastille { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; margin-right: .25rem; vertical-align: middle; border: 1px solid var(--bordure); }

/* Page Charte */
.charte { margin-bottom: 1rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.charte .bloc { margin: 0; }
.charte__couleurs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.couleur { display: flex; gap: .4rem; align-items: center; }
.couleur input[type=color] { width: 48px; height: 44px; padding: 0; border: 1px solid var(--bordure); border-radius: var(--rayon); background: none; }
.couleur .champ__saisie { flex: 1; min-width: 0; text-transform: uppercase; }
.apercu { position: sticky; top: 1rem; background: var(--fond); color: var(--texte); font-family: var(--police); }
.apercu__entete { display: flex; align-items: center; min-height: 52px; background: var(--entete); color: var(--sur-entete); padding: .6rem 1rem; border-radius: var(--rayon); font-weight: 700; margin-bottom: 1rem; }
.apercu__boutons, .apercu__badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.apercu__documents { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem; }
.apercu__avis { width: 150px; aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--bordure); padding: 8px; }
.apercu__avis-bandeau { background: var(--primaire); color: var(--sur-primaire); font-size: .7rem; font-weight: 700; padding: 4px 6px; margin-bottom: 8px; }
.apercu__ligne { height: 6px; background: var(--bordure); border-radius: 3px; margin: 6px 0; }
.apercu__ligne--courte { width: 60%; }
.carte-pvc { width: 214px; aspect-ratio: 85.6 / 54; background: #fff; border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; }
.carte-pvc__bandeau { background: var(--primaire); color: var(--sur-primaire); font-size: .75rem; font-weight: 700; padding: 6px 10px; }
.apercu__logo { max-height: 36px; max-width: 70%; }
.logo-actuel { display: flex; align-items: center; gap: 1rem; padding: .6rem; border: 1px dashed var(--bordure); border-radius: var(--rayon); background: var(--entete); }
.logo-actuel img { max-height: 40px; }
.case { display: flex; gap: .5rem; align-items: center; }
.case input { width: 22px; height: 22px; }
.carte-pvc__corps { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 10px; }
.carte-pvc__photo { width: 44px; height: 56px; background: var(--bordure); border-radius: 4px; }

@media (max-width: 820px) {
  .charte { grid-template-columns: 1fr; }
  .apercu { position: static; }
}

/* Utilisateurs */
.formulaire--ligne { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.en-ligne { display: inline-block; margin: 0; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.ligne--inactive td { color: var(--texte-secondaire); background: color-mix(in srgb, var(--texte-secondaire) 14%, var(--surface)); }
.ligne--inactive td a:not(.bouton) { color: var(--texte-secondaire); }
.ligne--inactive td:not(:last-child) { opacity: .75; }
.tableau-defilant { overflow-x: auto; }
.provisoire { border-left: 5px solid var(--alerte); }
.provisoire__mdp { font-family: Consolas, "Courier New", monospace; font-size: 1.5rem; letter-spacing: .08em; margin: .5rem 0 0; user-select: all; }

/* Sessions */
.ligne--aujourdhui td { background: var(--fond); font-weight: 600; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.fiche dt { font-weight: 600; color: var(--texte-secondaire); }
.fiche dd { margin: 0; }
.liste-simple { list-style: none; padding: 0; margin: 0; }
.liste-simple li { padding: .5rem 0; border-bottom: 1px solid var(--bordure); }

/* Formations */
.ligne--a-traiter td { background: var(--fond); }
.formulaire-ligne { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.formulaire-ligne .champ__saisie { flex: 1; min-width: 180px; }

/* Sessions et stagiaires */
.titre-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.titre-actions h1, .titre-actions h2 { margin-bottom: 0; }
a.bouton { display: inline-flex; align-items: center; text-decoration: none; }
.etiquette { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border: 1px solid var(--bordure); border-radius: 999px; color: var(--texte-secondaire); vertical-align: middle; }
.etiquette--alerte { border-color: var(--alerte); background: var(--alerte); color: var(--sur-alerte); }
.bloc--moyen { max-width: 720px; }
.vignette-cellule { width: 44px; }
.vignette { width: 36px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.vignette--vide { background: var(--fond); border: 1px dashed var(--bordure); }
.ligne-action { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fiche-stagiaire { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.fiche-stagiaire .bloc { margin: 0; }
.photo-identite { width: 180px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--bordure); display: block; margin-bottom: .5rem; }
.photo-identite--vide { display: flex; align-items: center; justify-content: center; color: var(--texte-secondaire); background: var(--fond); }
@media (max-width: 820px) { .fiche-stagiaire { grid-template-columns: 1fr; } }

/* Banque de questions */
.onglets { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.onglets a { padding: .45rem .9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); color: var(--texte); text-decoration: none; font-weight: 600; }
.onglets a[aria-current="page"] { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
.onglets .onglets__lien { margin-left: auto; border: none; background: none; color: var(--primaire); }
.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
.propositions { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.proposition { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; }
.proposition[hidden] { display: none; }
.proposition__lettre { font-weight: 700; text-align: center; }
textarea.champ__saisie { resize: vertical; font: inherit; }
.image-question { max-width: 320px; max-height: 220px; border: 1px solid var(--bordure); border-radius: var(--rayon); margin: .3rem 0; display: block; }
.marge-bas { margin-bottom: 1rem; }
.champ__saisie--court { width: 4.5rem; min-height: 44px; }
.reponse--bonne { font-weight: 700; color: var(--succes); }
.question-apercu h2 { font-size: 1.05rem; }
[hidden] { display: none !important; }
.etiquette--jour { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
.retirer-import { margin-top: .8rem; }
.retirer-import summary { cursor: pointer; color: var(--texte-secondaire); min-height: 44px; display: flex; align-items: center; }
.actions-ligne { white-space: nowrap; text-align: right; }
.actions-ligne .bouton { margin-left: .3rem; }
.message--alerte { border-left-color: var(--alerte); }
.champ-court { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.formulaire-ligne .champ__saisie--court { flex: none; min-width: 0; width: 5rem; }
.aide { margin-bottom: 1rem; } .aide summary { cursor: pointer; color: var(--primaire); min-height: 44px; display: flex; align-items: center; } .aide li { margin-bottom: .4rem; }
.champ__saisie--compact { min-height: 40px; padding: .3rem .5rem; width: auto; }
.champ__saisie--modifie { border-color: var(--primaire); font-weight: 600; }

/* Évaluation pratique certificative (atelier sur tablette / téléphone) */
.message--alerte { border-left-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 12%, var(--surface)); }
.texte-alerte { color: var(--texte); border-left: 4px solid var(--alerte); padding-left: .6rem; }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 1rem; }
.grille-2 .bloc { margin: 0; }
.champ--court { max-width: 240px; }
.badge-etat { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--texte-secondaire) 14%, var(--surface)); color: var(--texte); }
.badge-etat:empty { display: none; }
.badge-etat--acquis { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); color: var(--texte); box-shadow: inset 0 0 0 1px var(--succes); }
.badge-etat--non_acquis { background: color-mix(in srgb, var(--erreur) 14%, var(--surface)); color: var(--texte); box-shadow: inset 0 0 0 1px var(--erreur); }
.badge-etat--refuse { background: color-mix(in srgb, var(--alerte) 18%, var(--surface)); color: var(--texte); box-shadow: inset 0 0 0 1px var(--alerte); }
.badge-etat--grand { font-size: 1rem; padding: .35rem .9rem; }
.liste-binomes { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 1rem; }
.carte-binome { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface); }
.carte-binome__titre { font-weight: 700; }
.carte-binome__postes { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.carte-binome__exercices { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.carte-binome__exercices .champ { width: 100%; margin: 0; }
.evaluateurs-binomes { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bordure); }
.evaluateurs-binomes__poste { display: flex; gap: 0 .4rem; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 560px) { .evaluateurs-binomes { flex-direction: column; } .evaluateurs-binomes__poste { display: block; } }
.evaluateurs-binomes dt { color: var(--texte-secondaire); }
.evaluateurs-binomes dd { margin: 0; }

.atelier__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.postes { display: flex; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.poste { min-height: 44px; display: flex; align-items: center; padding: 0 1rem; text-decoration: none; color: var(--texte); background: var(--surface); font-weight: 600; }
.poste--actif { background: var(--primaire); color: var(--sur-primaire); }
.atelier__candidat { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: 1rem; }
.atelier__nom { margin: .1rem 0; font-size: 1.6rem; }
.atelier__corps { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.atelier__partie { font-size: 1.1rem; margin: .8rem 0 .5rem; color: var(--texte-secondaire); text-transform: uppercase; letter-spacing: .04em; }
.atelier__partie:first-child { margin-top: 0; }
.bloc-grille { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: .8rem; overflow: hidden; }
.bloc-grille__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: .7rem .9rem;
  background: color-mix(in srgb, var(--texte-secondaire) 7%, var(--surface)); }
.bloc-grille__condition { font-size: .85rem; }
.indicateur { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .7rem .9rem; border-top: 1px solid var(--bordure); }
.indicateur--liste { flex-direction: column; align-items: stretch; }
.indicateur__code { font-weight: 700; color: var(--texte-secondaire); margin-right: .2rem; }
.indicateur__trace, .indicateur__compte { display: block; font-size: .8rem; color: var(--texte-secondaire); margin-top: .2rem; }
.indicateur__trace:empty, .indicateur__compte:empty { display: none; }
.indicateur__choix { display: flex; gap: .4rem; flex-shrink: 0; }
.choix { min-height: 44px; min-width: 96px; padding: 0 .8rem; border-radius: var(--rayon); font: inherit; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--texte); border: 2px solid var(--bordure); }
.choix--a[aria-pressed="true"] { background: var(--succes); color: var(--sur-succes); border-color: var(--succes); }
.choix--n[aria-pressed="true"] { background: var(--erreur); color: var(--sur-erreur); border-color: var(--erreur); }
.indicateur[data-resultat="a"] { box-shadow: inset 4px 0 0 var(--succes); }
.indicateur[data-resultat="n"] { box-shadow: inset 4px 0 0 var(--erreur); }
.indicateur__liste { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: .5rem; }
.element { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .7rem; text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.element__case { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--bordure); border-radius: 5px; }
.element[aria-pressed="true"] { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 10%, var(--surface)); }
.element[aria-pressed="true"] .element__case { background: var(--succes); border-color: var(--succes); }
.choix:disabled, .element:disabled { cursor: default; opacity: .75; }
.atelier__resume { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1rem; }
.resume__role { display: flex; flex-direction: column; gap: .4rem; font-weight: 700; }
.resume__objectifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.resume__objectifs li { display: flex; justify-content: space-between; align-items: center; }
.resume__condition { font-size: .85rem; margin: 0; }
.bouton[aria-pressed="true"] { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 18%, var(--surface)); }

.validation-role__entete { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.validation-role__entete h2 { margin: 0; font-size: 1.15rem; }
.avis { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.avis legend { font-weight: 600; margin-bottom: .4rem; }
.avis__choix { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border: 2px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; font-weight: 600; }
.avis__choix--favorable:has(input:checked) { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 14%, var(--surface)); }
.avis__choix--defavorable:has(input:checked) { border-color: var(--erreur); background: color-mix(in srgb, var(--erreur) 12%, var(--surface)); }
.signature__cadre { width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; border: 2px dashed var(--bordure); border-radius: var(--rayon); background: var(--fond); margin-bottom: .5rem; }
.signature__image { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; object-fit: contain; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond); margin-bottom: .5rem; }

@media (max-width: 820px) {
  .atelier__corps { grid-template-columns: 1fr; }
  .atelier__resume { position: sticky; bottom: 0; top: auto; order: 2; border-radius: var(--rayon) var(--rayon) 0 0; padding: .7rem; gap: .4rem; z-index: 5; }
  .resume__objectifs { flex-direction: row; flex-wrap: wrap; gap: .3rem .8rem; }
  .resume__objectifs li { gap: .3rem; }
  .resume__condition { display: none; }
  .resume__role { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 560px) {
  .indicateur { flex-direction: column; align-items: stretch; }
  .indicateur__choix .choix { flex: 1; }
  .atelier__nom { font-size: 1.3rem; }
}
.lien-secondaire { display: inline-flex; align-items: center; min-height: 36px; font-size: .9rem; }
.liste-cases { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.liste-cases label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.bouton:disabled { background: var(--bordure); color: var(--texte-secondaire); border-color: var(--bordure); cursor: not-allowed; filter: none; }
.resume__role .badge-etat { align-self: flex-start; }
@media (max-width: 820px) {
  .atelier__resume { display: grid; grid-template-columns: 1fr 1fr; }
  .resume__role, .resume__objectifs { grid-column: 1 / -1; }
  .atelier__resume .bouton { min-height: 44px; padding: 0 .5rem; font-size: .9rem; }
}
.resume__autre { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .9rem; padding-top: .5rem; border-top: 1px solid var(--bordure); }
@media (max-width: 820px) { .resume__autre { grid-column: 1 / -1; } }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suppression-grilles { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--bordure); }
.tableau input[type="checkbox"] { width: 22px; height: 22px; }
.filtre-periode { margin-bottom: 1rem; }
.centre { text-align: center; }
.tableau-habilitations input[type="checkbox"] { width: 22px; height: 22px; }
#formateurs .formulaire { margin-top: 1rem; }
.annuler-lot summary { list-style: none; display: inline-flex; cursor: pointer; }
.annuler-lot summary::-webkit-details-marker { display: none; }
.annuler-lot[open] form { margin-top: .5rem; }
.liste-niveaux { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.niveau__form { display: flex; gap: .3rem; align-items: center; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .3rem; background: var(--fond); }
.niveau__form .champ__saisie { width: 11rem; }
.habilitations-pastilles { display: flex; flex-direction: column; }
.ligne-habilitation { padding: .7rem 0; border-bottom: 1px solid var(--bordure); }
.ligne-habilitation__nom { font-weight: 600; margin-bottom: .4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ligne-habilitation__tout { font-weight: 400; font-size: .9rem; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--primaire); text-decoration: underline; cursor: pointer; min-height: 32px; }
.pastilles { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce-niveau { position: relative; cursor: pointer; display: inline-flex; }
.puce-niveau input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-niveau span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .8rem; border: 1px solid var(--bordure); border-radius: 999px; background: var(--surface); }
.puce-niveau input:checked + span { background: var(--succes); color: var(--sur-succes); border-color: var(--succes); }
.puce-niveau input:checked + span::before { content: "✓ "; white-space: pre; }
.puce-niveau input:focus-visible + span { outline: 3px solid var(--primaire); outline-offset: 2px; }
.rattacher { display: inline-flex; gap: .3rem; align-items: center; margin-right: .3rem; }
.adresse-dendreo { font-size: .85rem; }

/* Aide en ligne */
.entete__aide { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid currentColor; color: var(--sur-entete); font-weight: 700; text-decoration: none; }
.entete__aide:hover { background: color-mix(in srgb, var(--sur-entete) 15%, transparent); }
.entete__aide--texte { width: 24px; height: 24px; color: var(--texte); font-size: .85rem; vertical-align: middle; }
.aide-accueil { text-align: center; padding: 2.2rem 1rem 1.6rem; margin: 0 0 1.2rem; border-radius: calc(var(--rayon) * 2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primaire) 10%, var(--surface)), var(--surface)); border: 1px solid var(--bordure); }
.aide-accueil h1 { margin: 0 0 .3rem; font-size: 1.9rem; }
.aide-accueil p { margin: 0 auto 1.2rem; max-width: 640px; color: var(--texte-secondaire); }
.aide-recherche { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: .6rem; background: var(--surface);
  border: 2px solid var(--bordure); border-radius: 999px; padding: 0 1.1rem; min-height: 54px; color: var(--texte-secondaire); }
.aide-recherche:focus-within { border-color: var(--primaire); }
.aide-recherche input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; background: transparent; color: var(--texte); }
.aide-raccourcis { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; font-size: .9rem; color: var(--texte-secondaire); align-items: center; }
.aide-raccourcis a { padding: .35rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); text-decoration: none; color: var(--texte); }
.aide-raccourcis a:hover { border-color: var(--primaire); }
.aide-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 1.5rem; }
.aide-carte { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.5); }
.aide-carte__icone { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primaire) 12%, var(--surface)); color: var(--primaire); margin-bottom: .3rem; }
.aide-carte__titre { font-weight: 700; font-size: 1.1rem; margin: 0; }
.aide-carte__pages { list-style: none; padding: 0; margin: .2rem 0 0; display: flex; flex-direction: column; gap: .15rem; }
.aide-carte__pages a { display: block; padding: .35rem 0; text-decoration: none; color: var(--texte); border-bottom: 1px dashed var(--bordure); }
.aide-carte__pages a::after { content: " →"; color: var(--primaire); }
.aide-carte__pages a:hover { color: var(--primaire); }
.aide-liste-resultats { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .6rem; }
.aide-resultat { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); text-decoration: none; color: var(--texte); }
.aide-resultat:hover { border-color: var(--primaire); }
.aide-resultat__rubrique { font-size: .8rem; color: var(--primaire); font-weight: 600; }
.aide-fil { font-size: .9rem; color: var(--texte-secondaire); margin: .2rem 0 1rem; }
.aide-fil a { color: var(--texte-secondaire); }
.aide-page { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1rem; align-items: start; }
.aide-toc { position: sticky; top: 1rem; font-size: .9rem; }
.aide-toc ul { padding-left: 1rem; margin: .4rem 0 0; }
.aide-contenu { line-height: 1.6; max-width: 860px; }
.aide-rubrique { display: inline-flex; align-items: center; gap: .4rem; color: var(--primaire); font-weight: 600; font-size: .9rem; }
.aide-contenu h1 { margin: .3rem 0 1rem; }
.aide-contenu h2 { margin-top: 1.8rem; border-top: 1px solid var(--bordure); padding-top: 1.1rem; font-size: 1.25rem; }
.aide-enbref { background: var(--fond); border-radius: var(--rayon); padding: .9rem 1rem; font-size: 1.02rem; }
.aide-contenu ol { list-style: none; counter-reset: etape; padding: 0; margin: .8rem 0; display: flex; flex-direction: column; gap: .7rem; }
.aide-contenu ol > li { counter-increment: etape; position: relative; padding-left: 2.6rem; min-height: 30px; }
.aide-contenu ol > li::before { content: counter(etape); position: absolute; left: 0; top: -.05rem; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primaire); color: var(--sur-primaire); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.aide-contenu table { border-collapse: collapse; width: 100%; margin: .8rem 0; display: block; overflow-x: auto; }
.aide-contenu th, .aide-contenu td { border: 1px solid var(--bordure); padding: .45rem .65rem; text-align: left; vertical-align: top; }
.aide-contenu th { background: var(--fond); }
.aide-contenu blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--primaire); background: color-mix(in srgb, var(--primaire) 6%, var(--surface)); }
.aide-contenu code { background: var(--fond); padding: 0 .3rem; border-radius: 4px; }
.ui-bouton { display: inline-block; padding: .02rem .55rem; border-radius: 6px; border: 1px solid var(--bordure); background: var(--surface);
  font-weight: 600; font-size: .9em; white-space: nowrap; box-shadow: 0 1px 0 var(--bordure); line-height: 1.6; }
.ui-bouton--primaire { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }
.ui-bouton--vert { background: var(--succes); color: var(--sur-succes); border-color: var(--succes); }
.ui-bouton--rouge { background: var(--erreur); color: var(--sur-erreur); border-color: var(--erreur); }
.ui-bouton--sombre { background: var(--secondaire); color: var(--sur-secondaire); border-color: var(--secondaire); }
.aide-encart { border-radius: var(--rayon); padding: .8rem 1rem; margin: 1rem 0; border-left: 5px solid var(--bordure); background: var(--fond); }
.aide-encart p { margin: 0; }
.aide-encart__titre { display: block; margin-bottom: .2rem; }
.aide-encart--astuce { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 9%, var(--surface)); }
.aide-encart--attention { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 11%, var(--surface)); }
.aide-encart--info { border-color: var(--secondaire); background: var(--fond); }
.aide-utile { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--bordure); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; color: var(--texte-secondaire); }
.aide-suite2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 2rem; max-width: 860px; }
.aide-suite2__lien { display: flex; flex-direction: column; padding: .8rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); text-decoration: none; color: var(--texte); font-weight: 600; }
.aide-suite2__lien:hover { border-color: var(--primaire); }
.aide-suite2__lien span { font-size: .8rem; color: var(--texte-secondaire); font-weight: 400; }
.aide-suite2__lien--droite { text-align: right; }
@media (max-width: 820px) { .aide-page { grid-template-columns: 1fr; } .aide-toc { position: static; order: -1; } }
@media (max-width: 560px) { .aide-accueil h1 { font-size: 1.5rem; } .aide-suite2 { grid-template-columns: 1fr; } .aide-suite2__lien--droite { text-align: left; } }

/* Petits écrans : rien ne doit déborder sur le côté */
.bloc, fieldset { min-width: 0; }
.champ__saisie { max-width: 100%; box-sizing: border-box; }
.proposition .champ__saisie { min-width: 0; }
.niveau__form { flex-wrap: wrap; }
@media (max-width: 560px) {
  .proposition { grid-template-columns: 2rem minmax(0, 1fr); }
  .proposition .case { grid-column: 2; }
  .liste-niveaux, .niveau { width: 100%; }
  .niveau__form .champ__saisie { flex: 1 1 100%; width: auto; }
  .rattacher { display: flex; flex-wrap: wrap; margin: 0 0 .4rem; }
}
.etiquette { white-space: nowrap; }
@media (max-width: 560px) {
  /* Téléphone : menu sur une seule ligne qui défile au doigt, en-tête plus compact */
  .onglets-principaux { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .onglets-principaux::-webkit-scrollbar { display: none; }
  .onglet { flex: none; }
  .entete__haut { gap: .5rem; padding: .4rem 0; }
  .entete__compte .bouton { min-height: 38px; padding: 0 .7rem; }
  h1 { font-size: 1.4rem; }
}

.aide-remarque { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.aide-remarque .champ { margin:0; }
.aide-avis-liste > li { margin-bottom:.6rem; }
.aide-remarques { margin:.3rem 0 0; padding-left:1.1rem; color:var(--texte); overflow-wrap:anywhere; }
.aide-remarques li { margin:.2rem 0; font-style:italic; }

/* Accueil */
.accueil-bandeau { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem 1.6rem; margin: 0 0 1.4rem; border-radius: calc(var(--rayon) * 2); border: 1px solid var(--bordure);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primaire) 10%, var(--surface)), var(--surface)); }
.accueil-bandeau h1 { margin: 0 0 .2rem; font-size: 1.9rem; }
.accueil-bandeau__date { margin: 0; color: var(--primaire); font-weight: 600; font-size: .95rem; }
.accueil-bandeau__resume { margin: 0; color: var(--texte-secondaire); }
.accueil-section { margin-bottom: 1.6rem; }
.accueil-titre { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-secondaire); margin: 0 0 .7rem; }
.accueil-alertes { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.accueil-alerte { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; text-decoration: none; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bordure); border-left: 4px solid var(--primaire); border-radius: var(--rayon); min-height: 44px; }
.accueil-alerte:hover { border-color: var(--primaire); }
.accueil-alerte > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.accueil-alerte__icone, .accueil-vide svg { color: var(--primaire); flex-shrink: 0; }
.accueil-alerte__icone { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primaire) 12%, var(--surface)); }
.accueil-alerte__fleche { color: var(--primaire); font-weight: 700; }
.accueil-sessions { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.accueil-session { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.5); min-width: 0; }
.accueil-session__titre { font-weight: 700; font-size: 1.1rem; color: var(--texte); text-decoration: none; overflow-wrap: anywhere; }
.accueil-session__titre:hover { color: var(--primaire); }
.accueil-session__infos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; color: var(--texte-secondaire); font-size: .95rem; }
.accueil-session__infos li { display: flex; gap: .45rem; align-items: flex-start; overflow-wrap: anywhere; }
.accueil-session__infos svg { margin-top: .2rem; flex-shrink: 0; }
.accueil-session__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.accueil-vide { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.2rem; color: var(--texte-secondaire);
  background: var(--surface); border: 1px dashed var(--bordure); border-radius: calc(var(--rayon) * 1.5); }
.accueil-avenir { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.5); overflow: hidden; }
.accueil-avenir li + li { border-top: 1px solid var(--bordure); }
.accueil-avenir a { display: flex; gap: 1rem; align-items: center; padding: .7rem 1.1rem; min-height: 44px; text-decoration: none; color: var(--texte); }
.accueil-avenir a:hover { background: var(--fond); }
.accueil-avenir__date { flex: 0 0 7.5rem; font-weight: 600; color: var(--primaire); }
.accueil-avenir__nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.accueil-avenir__nb { white-space: nowrap; }
.accueil-acces { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.accueil-acces a { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; text-decoration: none;
  color: var(--texte); font-weight: 600; background: var(--surface); border: 1px solid var(--bordure); border-radius: calc(var(--rayon) * 1.5); }
.accueil-acces a svg { color: var(--primaire); }
.accueil-acces a:hover { border-color: var(--primaire); }
@media (max-width: 560px) {
  .accueil-bandeau { padding: 1.1rem; }
  .accueil-bandeau h1 { font-size: 1.5rem; }
  .accueil-bandeau .bouton { width: 100%; text-align: center; }
  .accueil-sessions, .accueil-alertes { grid-template-columns: 1fr; }
  .accueil-avenir a { flex-wrap: wrap; gap: .1rem .8rem; }
  .accueil-avenir__date { flex-basis: auto; }
  .accueil-avenir__nom { flex-basis: 100%; order: 3; }
  .accueil-acces { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 561px) and (max-width: 1000px) { .accueil-acces { grid-template-columns: repeat(4, 1fr); } }

.case-restriction { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .8rem; padding: .7rem .9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.case-restriction input { width: 22px; height: 22px; margin-top: .1rem; flex-shrink: 0; }
.case-restriction > span { display: flex; flex-direction: column; gap: .15rem; }

/* Tableaux en fiches empilées sur téléphone (ajouter data-libelle aux cellules) */
@media (max-width: 560px) {
  .tableau--fiches, .tableau--fiches tbody, .tableau--fiches tr, .tableau--fiches td { display: block; width: 100%; }
  .tableau--fiches thead { display: none; }
  .tableau--fiches tr { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .7rem .9rem; margin-bottom: .7rem; background: var(--surface); }
  .tableau--fiches td { border: 0; padding: .2rem 0; overflow-wrap: anywhere; }
  .tableau--fiches td[data-libelle] { position: relative; padding-left: 6.1rem; min-height: 1.6rem; }
  .tableau--fiches td[data-libelle]::before { content: attr(data-libelle); position: absolute; left: 0; top: .25rem; width: 5.6rem; color: var(--texte-secondaire); font-size: .9rem; }
  .tableau--fiches .fiche__titre { font-weight: 600; font-size: 1.05rem; padding-bottom: .35rem; }
  .tableau--fiches .actions-ligne { padding-top: .5rem; }
  .tableau--fiches .actions-ligne .bouton { width: 100%; }
  .tableau-defilant:has(.tableau--fiches) { overflow-x: visible; }
}

.seulement-telephone { display: none; }
@media (max-width: 560px) {
  .seulement-telephone { display: inline; }
  .tableau--fiches .cache-telephone { display: none; }
  .tableau--stagiaires tr { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; }
  .tableau--stagiaires td { grid-column: 2; }
  .tableau--stagiaires td.vignette-cellule { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 0; }
}

@media (max-width: 560px) {
  .tableau--titre-d-abord tr { display: flex; flex-direction: column; }
  .tableau--titre-d-abord .fiche__titre { order: -1; }
  .tableau--fiches .actions-ligne { display: flex; flex-wrap: wrap; gap: .4rem; }
  .tableau--fiches .actions-ligne .en-ligne { flex: 1 1 auto; }
  .tableau--fiches .actions-ligne .annuler-lot { flex-basis: 100%; }
  .tableau--fiches .fiche__titre .etiquette { margin-top: .2rem; }
}

@media (max-width: 560px) {
  .tableau--fiches .fiche__plein { padding: .4rem 0; }
  .tableau--fiches .fiche__plein form, .tableau--fiches .fiche__plein .formulaire-ligne { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; width: 100%; }
  .tableau--fiches .fiche__plein .champ__saisie { width: 100%; max-width: none; min-width: 0; }
  .tableau--fiches .fiche__plein .champ__saisie--court { width: 6rem; }
  .tableau--fiches .fiche__plein .bouton { width: 100%; }
  .tableau--fiches .fiche__plein .lien-secondaire { display: inline-block; margin-top: .5rem; }
}
@media (max-width: 560px) {
  .tableau--fiches tr.ligne--a-traiter { border-left: 4px solid var(--primaire); }
  .tableau--fiches tr.ligne--a-traiter td { background: transparent; }
  .tableau--fiches tr.ligne--inactive { background: color-mix(in srgb, var(--texte-secondaire) 14%, var(--surface)); }
  .tableau--fiches tr.ligne--inactive td { background: transparent; }
}
@media (max-width: 560px) {
  .tableau--fiches .actions-ligne { white-space: normal; text-align: left; }
  .tableau--fiches .actions-ligne .bouton { margin-left: 0; max-width: 100%; }
  .tableau--fiches .actions-ligne > a.bouton { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; }
}

/* Sous-onglets d'une page (ex. Catalogue) */
.sous-onglets { display: flex; gap: .3rem; border-bottom: 2px solid var(--bordure); margin: 0 0 1.2rem; overflow-x: auto; scrollbar-width: none; }
.sous-onglets::-webkit-scrollbar { display: none; }
.sous-onglet { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; margin-bottom: -2px; white-space: nowrap;
  text-decoration: none; color: var(--texte-secondaire); font-weight: 600; border-bottom: 3px solid transparent; }
.sous-onglet:hover { color: var(--texte); }
.sous-onglet--actif { color: var(--primaire); border-bottom-color: var(--primaire); }
.sous-onglet__nb { font-size: .8rem; padding: 0 .45rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--bordure); color: var(--texte-secondaire); }
@media (max-width: 560px) { .sous-onglet { padding: 0 .7rem; font-size: .95rem; } }
@media (max-width: 560px) { .cache-telephone { display: none; } .sous-onglet { padding: 0 .6rem; } }
@media (max-width: 560px) {
  .tableau--fiches td.fiche__empile { padding-left: 0; padding-top: .4rem; }
  .tableau--fiches td.fiche__empile::before { position: static; display: block; width: auto; margin-bottom: .15rem; font-weight: 600; }
}
@media (max-width: 560px) {
  .tableau--fiches .actions-dendreo { flex-direction: column; align-items: stretch; }
  .tableau--fiches .actions-dendreo form, .tableau--fiches .actions-dendreo .rattacher { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
  .tableau--fiches .actions-dendreo .champ__saisie { width: 100%; max-width: none; }
  .tableau--fiches .actions-dendreo .bouton { width: 100%; }
  .tableau--fiches .actions .en-ligne { flex: 1 1 auto; }
  .tableau--fiches .actions .bouton { width: 100%; }
  .tableau--fiches td[data-libelle="Rôle"] .champ__saisie { width: 100%; }
}
.actions-dendreo { white-space: normal; min-width: 16rem; }
.actions-dendreo form { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; align-items: center; margin: .2rem 0; }
.actions-dendreo .bouton { margin-left: 0; }
.tableau td[data-libelle="E-mail"] { overflow-wrap: anywhere; }
@media (max-width: 560px) { .actions-dendreo { min-width: 0; } }
/* Liste des sessions : sur PC / tablette, les actions d'une ligne sont dans un menu « Actions ▾ » ; sur
   téléphone (fiches), les boutons restent visibles. */
.actions-telephone { display: none; }
.menu-actions { position: relative; display: inline-block; text-align: left; }
.menu-actions > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions__liste { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; min-width: 12rem; padding: .4rem;
  display: flex; flex-direction: column; gap: .3rem; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: 0 6px 20px color-mix(in srgb, var(--texte) 18%, transparent); }
.menu-actions__liste .en-ligne, .menu-actions__liste .bouton { display: block; width: 100%; margin: 0; text-align: left; }
@media (max-width: 560px) {
  .menu-actions { display: none; }
  .actions-telephone { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
  .actions-telephone .en-ligne { flex: 1 1 auto; }
  .actions-telephone > a.bouton { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; }
}
.tableau-defilant:has(.menu-actions) { overflow: visible; }

/* Saisie d'un résultat à la main */
.choix-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--bordure); }
.choix-resultat__libelle { flex: 1 1 14rem; font-weight: 600; }
.choix-resultat__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.choix-resultat__option { position: relative; }
.choix-resultat__option input { position: absolute; opacity: 0; inset: 0; }
.choix-resultat__option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--bordure);
  border-radius: var(--rayon); background: var(--surface); cursor: pointer; font-weight: 600; }
.choix-resultat__option input:focus-visible + span { outline: 2px solid var(--primaire); outline-offset: 2px; }
.choix-resultat__option--acquis input:checked + span { background: var(--succes); border-color: var(--succes); color: var(--sur-succes); }
.choix-resultat__option--non_acquis input:checked + span { background: var(--erreur); border-color: var(--erreur); color: var(--sur-erreur); }
.choix-resultat__option--refuse input:checked + span, .choix-resultat__option--non_passe input:checked + span { background: var(--alerte); border-color: var(--alerte); color: var(--sur-alerte); }
fieldset:disabled .choix-resultat__option span { cursor: default; opacity: .85; }
.justificatifs { list-style: none; padding: 0; margin: 0 0 1rem; }
.justificatifs li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--bordure); overflow-wrap: anywhere; }
.saisie-resultat fieldset.bloc { min-width: 0; }
.champ__lecture { margin: 0; min-height: 44px; display: flex; align-items: center; padding: 0 .2rem; font-weight: 600; overflow-wrap: anywhere; }

/* Documents de la session */
.documents { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.document { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); min-width: 0; }
.document__apercu { flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--rayon); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--fond); border: 1px solid var(--bordure); text-decoration: none; }
.document__apercu img { width: 100%; height: 100%; object-fit: cover; }
.document__pdf { font-weight: 700; color: var(--primaire); }
.document__infos { display: flex; flex-direction: column; gap: .2rem; min-width: 0; overflow-wrap: anywhere; align-items: flex-start; }
.document__nom { font-weight: 600; }
.document__retrait summary { cursor: pointer; color: var(--primaire); text-decoration: underline; min-height: 32px; display: flex; align-items: center; }
.document__retrait .formulaire { margin-top: .4rem; }
.actions--session { margin: 0 0 1rem; gap: .6rem; }
.form-documents > .champ { margin-top: .6rem; }
.form-documents > .bouton { margin-top: .4rem; }

/* Spécialités */
.choix-regle { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.liste-specialites { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.specialite__form { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.specialite__form .champ__saisie:not(.champ__saisie--court) { flex: 1 1 14rem; min-width: 0; }
.specialite__code { font-weight: 700; min-width: 4.5rem; }
.specialite__parcours { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.specialite--inactive { opacity: .6; }
.specialites-stagiaire summary { cursor: pointer; list-style: none; display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; min-height: 32px; }
.specialites-stagiaire summary::-webkit-details-marker { display: none; }
.specialites-stagiaire[open] summary { margin-bottom: .4rem; }
.specialites-stagiaire__form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: .5rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.etiquette--modifie { border-color: var(--primaire); color: var(--primaire); }
.specialites-session { display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; }
.lien-secondaire + .lien-secondaire { margin-left: 1rem; }
.specialite { padding-bottom: .5rem; border-bottom: 1px dashed var(--bordure); }
.tableau tr:has(+ .ligne-specialites) > td { border-bottom: 0; padding-bottom: .2rem; }
.ligne-specialites > td { padding-top: 0; }
.ligne-specialites__contenu { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.specialites-stagiaire__choix { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.lien-modifier { color: var(--primaire); text-decoration: underline; font-size: .9rem; }
.specialites-stagiaire[open] { flex-basis: 100%; }
@media (max-width: 820px) { .ligne-specialites > td:first-child { display: none; } .ligne-specialites__contenu { position: sticky; left: .5rem; max-width: calc(100vw - 4.5rem); } }
.etiquette--icone { display: inline-flex; align-items: center; gap: .25rem; }
.etiquette--icone svg { flex: none; }
.col-case { width: 2.5rem; }
.col-case input { width: 1.2rem; height: 1.2rem; }
.suppression-lot { margin-top: 1rem; padding: .8rem; border: 1px solid var(--erreur); border-radius: var(--rayon); }
.suppression-lot__compte { margin: 0; align-self: center; }
.aide-avis-liste--cases, .aide-avis-liste--cases .aide-remarques { list-style: none; padding-left: 0; }
.aide-avis-liste--cases .aide-remarques { margin-left: 1.8rem; }
.aide-avis-liste--cases > li { margin-bottom: .6rem; }

/* --- Cartes éditées (format CR80) --- */
.boutons-carte { display: flex; flex-wrap: wrap; gap: .5rem; }
.case--texte { align-items: flex-start; min-height: 44px; margin: .5rem 0; }
.case--texte input { flex: none; margin-top: .15rem; }
.logo-carte { padding: .6rem; border: 1px dashed var(--bordure); border-radius: var(--rayon); background: var(--surface); max-width: 320px; }
.logo-carte img { display: block; max-width: 100%; max-height: 90px; }
.fiche-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.fiche-carte .bloc { margin: 0; }
.carte-apercu { margin: 0 0 1rem; }
.carte-apercu img { display: block; width: 100%; max-width: 520px; height: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.infos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0 0 1rem; }
.infos dt { color: var(--texte-secondaire); }
.infos dd { margin: 0; overflow-wrap: anywhere; }
.verification { max-width: 640px; margin: 0 auto; }
.verification__etat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.05rem; }
.depliant > summary { cursor: pointer; color: var(--primaire); min-height: 44px; display: flex; align-items: center; }
@media (max-width: 820px) { .fiche-carte { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .infos { grid-template-columns: 1fr; } .infos dd { margin-bottom: .4rem; } }

/* Catalogue › Groupes Dendreo : réglage par formation */
.reglage-groupe { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.reglage-groupe__parcours { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.reglage-groupe .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.reglage-groupe p { margin: 0; }
.reglage-groupe__ajout { margin-top: 1rem; }
.reglage-groupe__ajout summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primaire); font-weight: 600; }

/* Bilan de fin de formation */
.etiquette--succes { border-color: var(--succes); background: var(--succes); color: var(--sur-succes); }
.etiquette--erreur { border-color: var(--erreur); background: var(--erreur); color: var(--sur-erreur); }
.liste-resultats { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .4rem; }
.liste-resultats li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.liste-resultats .etiquette { font-size: .85rem; }
.liste-non-acquis { padding-left: 1.1rem; margin: 0 0 .8rem; }
.liste-non-acquis > li { margin-bottom: .4rem; }
.liste-non-acquis ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--texte-secondaire); }

/* Filtre instantané d'un tableau (recherche, listes) */
.filtre-tableau { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: 0 0 .6rem; }
.filtre-tableau .champ { margin: 0; flex: 0 1 auto; }
.filtre-tableau .champ:first-child { flex: 1 1 16rem; }
.filtre-tableau__resultat { margin: 0 0 .5rem; }
.tableau tr[hidden] { display: none; }
.formulaire-ligne .mention-propre { flex: 1 1 100%; min-width: 0; }

/* Évaluations des parcours (Catalogue) */
.epreuve { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .6rem; }
.epreuve__champs { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.epreuve__champs .champ { margin: 0; flex: 0 1 auto; }
.epreuve__libelle { flex: 1 1 16rem !important; }
.champ--court { max-width: 7rem; }
.epreuve__actions { align-items: flex-end; }
.epreuve__actions .champ { margin: 0; }
.suites-parcours { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .5rem; }
.suites-parcours .etiquette { white-space: normal; }
.tableau-epreuves td { vertical-align: middle; }
.champ__saisie--note { width: 5.5rem; min-width: 0; }
.tableau-epreuves .etiquette { margin-left: .3rem; }
.epreuves-stagiaire { display: contents; }
.epreuves-stagiaire .etiquette { text-decoration: none; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.epreuves-stagiaire__titre { margin-left: .6rem; }
@media (max-width: 960px) { .epreuves-stagiaire::before { content: ""; flex-basis: 100%; height: 0; } .epreuves-stagiaire__titre { margin-left: 0; } }
@media (max-width: 560px) { .epreuves-stagiaire .etiquette { border-radius: var(--rayon); } }
.etiquette--neutre { border-color: var(--bordure); }

/* Évaluation à critères (tablette) */
.liste-criteres { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.critere { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .6rem .7rem; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.critere__texte { flex: 1 1 14rem; font-weight: 600; }
.critere__choix { display: flex; gap: .4rem; }
.bascule { position: relative; cursor: pointer; display: inline-flex; }
.bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bascule span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); font-weight: 600; }
.bascule--a input:checked + span { background: var(--succes); color: var(--sur-succes); border-color: var(--succes); }
.bascule--n input:checked + span { background: var(--erreur); color: var(--sur-erreur); border-color: var(--erreur); }
.bascule input:focus-visible + span { outline: 3px solid var(--primaire); outline-offset: 2px; }
.bascule input:disabled + span { cursor: default; opacity: .8; }
.bouton--petit { min-height: 36px; padding: 0 .6rem; font-size: .9rem; }
.epreuve__champs .champ { max-width: 100%; min-width: 0; }
.epreuve__champs .champ__saisie { max-width: 100%; }

/* Grilles construites dans Apteo : saisie (tablette) et éditeur du Catalogue */
.texte-erreur { color: var(--erreur); font-weight: 600; }
.grille-bloc { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem; margin: 0 0 1rem; min-width: 0; }
.grille-bloc__titre { font-weight: 700; font-size: 1.05rem; padding: 0 .3rem; }
.grille-bloc__regle { margin: 0 0 .6rem; }
.critere--eliminatoire { border-left: 4px solid var(--erreur); }
.editeur-bloc { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem; margin: 0 0 1rem; min-width: 0; }
.editeur-bloc__entete { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
.editeur-bloc__titre { flex: 1 1 16rem; min-width: 0; }
.editeur-bloc__spe { margin: .6rem 0 0; }
.editeur-boutons { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.editeur-criteres { margin: .8rem 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.editeur-critere { min-width: 0; }
.editeur-critere textarea { width: 100%; resize: vertical; min-height: 44px; }
.editeur-critere__options { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin-top: .3rem; }
.editeur-spe summary, .editeur-coller summary { cursor: pointer; gap: .3rem; color: var(--texte-secondaire); min-height: 44px; display: flex; align-items: center; }
.editeur-spe[open] { flex-basis: 100%; }
.editeur-coller textarea { width: 100%; margin: .4rem 0; }

/* Fiche session : stagiaires en fiches sur téléphone et tablette (pas de défilement de côté) */
.seulement-fiche { display: none; }
@media (max-width: 960px) {
  .tableau-defilant:has(.tableau-inscrits) { overflow-x: visible; }
  .tableau-inscrits, .tableau-inscrits tbody { display: block; width: 100%; }
  .tableau-inscrits thead, .tableau-inscrits tr.ligne-inscrit > td.cache-fiche { display: none; }
  .tableau-inscrits .seulement-fiche { display: inline; }
  .tableau-inscrits tr.ligne-inscrit { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; align-items: start;
    border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .7rem .9rem .7rem calc(.9rem + 44px + .8rem); margin-top: .7rem; background: var(--surface); }
  .tableau-inscrits tr.ligne-inscrit > td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; background: transparent; }
  .tableau-inscrits tr.ligne-inscrit > td.vignette-cellule { position: absolute; left: .9rem; top: .7rem; width: 44px; }
  .tableau-inscrits td.inscrit__nom { grid-column: 1 / -1; font-weight: 600; font-size: 1.05rem; }
  .tableau-inscrits td[data-libelle] { grid-column: span 1; }
  .tableau-inscrits td[data-libelle]::before { content: attr(data-libelle); display: block; color: var(--texte-secondaire); font-size: .85rem; font-weight: 400; }
  .tableau-inscrits td[data-libelle="Parcours"] .champ__saisie { width: 100%; max-width: none; }
  .tableau-inscrits tr.ligne-inscrit > td.actions-ligne { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; white-space: normal; text-align: left; padding-top: .3rem; }
  .tableau-inscrits td.actions-ligne:empty { display: none; }
  .tableau-inscrits td.actions-ligne .en-ligne { flex: 1 1 8rem; }
  .tableau-inscrits td.actions-ligne .bouton { width: 100%; margin: 0; }
  .tableau-inscrits tr.ligne--inactive { background: color-mix(in srgb, var(--texte-secondaire) 14%, var(--surface)); }
  /* La ligne des spécialités se colle sous la fiche du stagiaire. */
  .tableau-inscrits tr.ligne-inscrit:has(+ .ligne-specialites) { border-bottom: 0; border-radius: var(--rayon) var(--rayon) 0 0; padding-bottom: .3rem; }
  .tableau-inscrits tr.ligne-specialites { display: block; border: 1px solid var(--bordure); border-top: 0; border-radius: 0 0 var(--rayon) var(--rayon); padding: 0 .9rem .7rem calc(.9rem + 44px + .8rem); background: var(--surface); }
  .tableau-inscrits tr.ligne-specialites.ligne--inactive { background: color-mix(in srgb, var(--texte-secondaire) 14%, var(--surface)); }
  .tableau-inscrits tr.ligne-specialites > td { display: block; border: 0; padding: 0; background: transparent; }
  .tableau-inscrits tr.ligne-specialites > td:first-child { display: none; }
  .tableau-inscrits .ligne-specialites__contenu { position: static; max-width: none; }
}
@media (max-width: 560px) {
  .tableau-inscrits tr.ligne-inscrit { grid-template-columns: minmax(0, 1fr); }
  .tableau-inscrits tr.ligne-inscrit > td.actions-ligne { margin-left: calc(-44px - .8rem); }
  .tableau-inscrits tr.ligne-specialites { padding-left: .9rem; }
}

/* Recadrage de la photo d'un stagiaire avant l'enregistrement */
.choix-photo { position: relative; overflow: hidden; }
.choix-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.recadrage__cadre { position: relative; width: min(270px, 100%); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--rayon); border: 2px solid var(--primaire); background: var(--fond); touch-action: none; cursor: grab; margin: .5rem 0; user-select: none; }
.recadrage__cadre img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.recadrage__repere { position: absolute; left: 22%; right: 22%; top: 12%; height: 58%; border: 2px dashed color-mix(in srgb, var(--surface) 85%, transparent); border-radius: 50%; pointer-events: none; }
.recadrage__zoom { max-width: 270px; }
.recadrage__zoom input { width: 100%; min-height: 44px; }

/* Fiche session : programme, déroulé et documents à imprimer */
.liste-programme { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .4rem; }
.liste-programme li { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.liste-programme li > .texte-secondaire:first-child { min-width: 10rem; }
.doc-formation { border-top: 1px solid var(--bordure); padding: .8rem 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.doc-formation select.champ__saisie, [data-ajout] select.champ__saisie { max-width: 100%; }
.doc-formation:first-of-type { border-top: 0; padding-top: 0; }
.doc-formation__ligne { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }

/* Examen en ligne avec jetons (ex. AIPR) : une fiche par stagiaire, jeton lisible de loin, boutons Copier. */
.examen-entete { display: flex; flex-direction: column; gap: .5rem; }
.examen-entete form { margin: 0; }
.examen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1rem; }
.examen-carte { border: 1px solid var(--bordure); border-left: 4px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); padding: .9rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.examen-carte--reussi { border-left-color: var(--succes); }
.examen-carte--echec { border-left-color: var(--erreur); }
.examen-carte__titre { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.examen-jeton { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-radius: var(--rayon); background: var(--fond); }
.examen-jeton__ligne { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.examen-jeton__valeur { font-family: Consolas, "Courier New", monospace; font-size: 1.15rem; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.examen-jeton__valeur--grand { font-size: 1.45rem; font-weight: 700; }
.examen-score { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0; }
.examen-score .champ { margin: 0; }
.examen-tentatives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.examen-tentatives li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.examen-corriger { width: 100%; }
.examen-corriger summary { cursor: pointer; color: var(--texte-secondaire); font-size: .9rem; }
.tableau-profils .champ__saisie--note { max-width: 7rem; }
@media (max-width: 560px) { .examen-jeton__ligne { grid-template-columns: 1fr auto; } .examen-jeton__ligne > .texte-secondaire { grid-column: 1 / -1; } }
.specialites-session .case { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
dl dd { min-width: 0; }
.examen-import { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0; }
.examen-import .champ { margin: 0; flex: 1 1 16rem; min-width: 0; }
.examen-resume { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem .7rem; background: var(--fond); }
.examen-resume summary { cursor: pointer; }
.examen-questions { margin: .5rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.examen-questions__donnee { color: var(--erreur); }
.examen-questions__attendue { color: var(--succes); font-weight: 600; }
.examen-attribuer { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.examen-attribuer .examen-score .champ { flex: 1 1 14rem; min-width: 0; }
.examen-attribuer form { margin: 0; }
.carte-reglage__image { display: block; max-width: 220px; max-height: 90px; margin: .3rem 0; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }

/* Catalogue › Carte : galerie des modèles de carte (une vignette par modèle) */
.galerie-modeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .8rem; }
.galerie-modeles__choix { display: flex; flex-direction: column; gap: .35rem; padding: .7rem; border: 2px solid var(--bordure);
  border-radius: 8px; cursor: pointer; min-width: 0; }
.galerie-modeles__choix:has(input:checked) { border-color: var(--primaire, #1155CC); background: var(--fond); }
.galerie-modeles__choix img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px var(--bordure); }
.galerie-modeles__choix input { align-self: flex-start; width: 1.2rem; height: 1.2rem; }
.galerie-modeles__titre { font-weight: 600; }

/* Pastille « Formateurs » cliquable : montrer / masquer la session aux formateurs */
.bascule-formateurs { display: inline; }
.etiquette--bouton { font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; background: transparent; min-height: 28px; }
.etiquette--bouton.etiquette--alerte { background: var(--alerte); }
.etiquette--bouton:hover { border-color: var(--primaire); }
.etiquette--bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* Fiche session : vignette cliquable (prendre ou remplacer la photo) et fenêtre de prise de photo */
.vignette-bouton { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; min-width: 36px; min-height: 44px; }
.vignette-bouton:hover .vignette, .vignette-bouton:focus-visible .vignette { outline: 2px solid var(--primaire); outline-offset: 1px; }
.vignette-bouton:focus-visible { outline: none; }
.vignette--a-prendre { display: flex; align-items: center; justify-content: center; font-size: 1rem; opacity: .7; }
.fenetre-photo { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--bordure); border-radius: 12px; padding: 1rem; background: var(--surface); color: var(--texte); }
.fenetre-photo::backdrop { background: rgb(0 0 0 / .45); }
.fenetre-photo__entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.fenetre-photo__entete h2 { margin: 0; font-size: 1.1rem; }
.fenetre-photo .photo-identite { margin: 0 auto .5rem; }

/* Registre des cartes : filtres (recherche, état, dates) */
.filtre-cartes .champ, .filtre-questions .champ { flex: 1 1 160px; min-width: 0; }
.filtre-cartes .champ--court { flex: 1 1 150px; }
.filtre-cartes input[type="date"] { min-width: 140px; }
.doc-formation input[type="date"], [data-ajout] input[type="date"] { min-width: 150px; }
.doc-formation__nom { font-weight: 600; }
.doc-formation__modifier > summary { font-size: .9rem; }

/* Documents de l'organisme */
.tableau-bord-docs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.doc-formation .depliant { margin: 0; }
.doc-formation .depliant > summary { padding: .2rem 0; }
/* Actions d'un document : liens côte à côte (Modifier · Nouvelle version · Historique), le formulaire ouvert prend toute la largeur */
.doc-actions { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; align-items: flex-start; margin-top: .3rem; }
.doc-actions > details { min-width: 0; }
.doc-actions > details[open] { flex: 1 1 100%; }
.doc-actions > details > summary { display: inline-flex; min-height: 36px; padding: 0; list-style: none; font-size: .95rem; }
.doc-actions > details > summary::-webkit-details-marker { display: none; }
.doc-actions > details > summary:hover { text-decoration: underline; }
.doc-actions > details[open] > summary { font-weight: 600; }
.doc-organisme__choix { min-height: 0; margin: 0; }
.type-doc { border-top: 1px solid var(--bordure); padding-top: .6rem; margin-top: .6rem; }
.lien-public { display: flex; gap: .4rem; align-items: center; }
.lien-public input { flex: 1; min-width: 0; font-size: .85rem; }
.doc-validation { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; padding: .5rem; border: 1px dashed var(--alerte); border-radius: var(--rayon); }

/* Modèles d'e-mails */
.champs-email { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.apercu-email { width: 100%; min-height: 420px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; }
.groupe-programmes > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 44px; }
.groupe-programmes[open] > summary { margin-bottom: .6rem; }
.filtre-programmes { max-width: 40rem; }
.groupe-programmes > summary { list-style: none; }
.groupe-programmes > summary::-webkit-details-marker { display: none; }
.groupe-programmes > summary::before { content: "▸"; color: var(--primaire); width: 1em; display: inline-block; }
.groupe-programmes[open] > summary::before { content: "▾"; }

/* --- Supports de formation (alvéoles, lecteur, quiz projeté, roue) --- */
.supports-bandeau { background: var(--entete); color: var(--sur-entete); border-radius: var(--rayon); padding: 1.6rem 1.5rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.supports-bandeau h1 { margin: .4rem 0 .5rem; font-size: 2rem; line-height: 1.1; }
.supports-bandeau p { margin: 0; max-width: 46rem; white-space: pre-line; opacity: .92; }
.supports-bandeau a:not(.bouton) { color: inherit; }
.supports-surtitre { display: inline-block; background: var(--primaire); color: var(--sur-primaire); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: calc(var(--rayon) / 2); }
.supports-titre { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.supports-titre h1 { margin: .2rem 0 0; }
.supports-sous-titre { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primaire); }

/* Nid d'abeille : rangées imbriquées (PC, tablette) ; grille simple sur téléphone. */
.nid { overflow-x: auto; padding: .5rem 0 1rem; }
.nid__rangs { display: flex; flex-direction: column; align-items: center; min-width: min-content; }
.nid__rang { display: flex; gap: 8px; }
.nid__rang + .nid__rang { margin-top: -38px; }
.alveole {
  --l: 168px; width: var(--l); height: calc(var(--l) * 1.1547); flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  text-align: center; text-decoration: none; padding: 0 1.4rem; transition: transform .15s ease, filter .15s ease;
  background: color-mix(in srgb, var(--bordure) 70%, var(--surface)); color: var(--texte);
}
.alveole:hover { transform: scale(1.05); filter: brightness(1.05); }
.alveole:focus-visible { outline: 3px solid var(--texte); outline-offset: -6px; }
.alveole--pret { background: var(--primaire); color: var(--sur-primaire); }
.alveole--en_cours { background: var(--entete); color: var(--sur-entete); }
.alveole--masque { opacity: .45; }
.alveole__haut { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.alveole__num { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.alveole__nom { font-weight: 700; line-height: 1.15; font-size: 1rem; }
.alveole__bas { font-size: .75rem; font-weight: 600; opacity: .9; }
.alveole[hidden] { display: none; }
/* Image de fond d'une alvéole : nette et voilée de la couleur de la charte quand c'est prêt, pâle et grisée
   (translucide) tant que ce n'est pas finalisé. */
.alveole--image { position: relative; isolation: isolate; text-shadow: 0 1px 3px color-mix(in srgb, var(--texte) 55%, transparent); }
.alveole--image::before, .alveole--image::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.alveole--image::before { background: var(--img) center / cover no-repeat; }
.alveole--image.alveole--pret::after { background: linear-gradient(180deg, color-mix(in srgb, var(--primaire) 5%, transparent) 15%, color-mix(in srgb, var(--primaire) 70%, transparent) 85%); }
.alveole--image.alveole--en_cours { background: var(--surface); }
.alveole--image.alveole--en_cours::before { opacity: .5; filter: grayscale(1); }
.alveole--image.alveole--en_cours::after { background: color-mix(in srgb, var(--entete) 45%, transparent); }
.alveole--image.alveole--a_construire::before { opacity: .22; filter: grayscale(1); }
.alveole--image.alveole--a_construire { text-shadow: none; }
.image-alveole { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.image-alveole > .formulaire { flex: 1 1 260px; min-width: 0; max-width: 100%; }
.image-alveole input[type=file], .vignette-choix input[type=file] { max-width: 100%; min-width: 0; }
.image-alveole__apercu { --l: 130px; pointer-events: none; padding: 0 1rem; }
.image-alveole__apercu .alveole__nom { font-size: .85rem; }
.image-alveole__apercu--petit { --l: 96px; padding: 0 .6rem; }
.image-alveole__apercu--petit .alveole__nom { font-size: .7rem; }
.hexa { display: inline-block; width: 18px; height: 21px; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--bordure) 70%, var(--surface)); vertical-align: middle; }
.hexa--pret { background: var(--primaire); }
.hexa--en_cours { background: var(--entete); }
.legende-alveoles { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--texte-secondaire); align-items: center; }
.legende-alveoles span { display: inline-flex; gap: .45rem; align-items: center; }
@media (max-width: 600px) {
  .nid__rangs { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 6px 8px; }
  .nid__rang { display: contents; }
  .nid__rang + .nid__rang { margin-top: 0; }
  .alveole { --l: 150px; padding: 0 1.1rem; }
  .alveole__nom { font-size: .9rem; }
  .supports-bandeau h1 { font-size: 1.5rem; }
}

/* Page d'un thème : liste des thèmes, lecteur, mini-modules */
.supports-theme { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.supports-theme__liste { flex: 1 1 220px; max-width: 280px; }
.supports-theme__contenu { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.liste-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.liste-themes a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .5rem; text-decoration: none; color: var(--texte); border-radius: calc(var(--rayon) / 2); }
.liste-themes a:hover { background: color-mix(in srgb, var(--primaire) 8%, var(--surface)); }
.liste-themes a[aria-current] { background: color-mix(in srgb, var(--primaire) 12%, var(--surface)); font-weight: 700; }
.liste-themes .hexa { width: 26px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: var(--texte); }
.liste-themes .hexa--pret, .liste-themes .hexa--en_cours { color: var(--sur-primaire); }
.liste-themes .hexa--en_cours { color: var(--sur-entete); }
@media (max-width: 820px) { .supports-theme__liste { max-width: none; order: 2; } }
.entete-theme { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.entete-theme .hexa { width: 72px; height: 83px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--sur-primaire); }
.entete-theme .hexa--en_cours { color: var(--sur-entete); }
.entete-theme h1 { margin: 0; }
.lecteur { background: var(--entete); color: var(--sur-entete); border-radius: var(--rayon); overflow: hidden; display: flex; flex-wrap: wrap; }
.lecteur__ecran { flex: 3 1 420px; min-width: 0; max-width: 100%; min-height: 260px; background: color-mix(in srgb, var(--entete) 75%, var(--texte)); display: flex; align-items: center; justify-content: center; position: relative; }
.lecteur__ecran iframe, .lecteur__ecran img { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; object-fit: contain; background: color-mix(in srgb, var(--entete) 75%, var(--texte)); }
.lecteur__ecran--video { aspect-ratio: 16 / 9; }
.lecteur__ecran--document iframe { min-height: 480px; background: var(--surface); }
.lecteur__vide { padding: 2rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.lecteur__infos { flex: 1 1 240px; min-width: 0; padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.lecteur__infos h2 { margin: 0; font-size: 1.35rem; }
.lecteur__infos p { margin: 0; opacity: .9; }
.lecteur__genre { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--primaire) 55%, var(--sur-entete)); }
.lecteur__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.lecteur__actions .bouton--discret { color: inherit; border-color: currentColor; }
.lecteur:fullscreen { border-radius: 0; }
.lecteur:fullscreen .lecteur__ecran { flex-basis: 100%; height: 100vh; aspect-ratio: auto; }
.lecteur:fullscreen .lecteur__infos { display: none; }
.cartes-modules { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.carte-module { display: flex; flex-direction: column; gap: .4rem; min-height: 130px; padding: .9rem 1rem; text-decoration: none; color: var(--texte); background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--rayon); }
.carte-module:hover { border-color: color-mix(in srgb, var(--primaire) 50%, var(--bordure)); }
.carte-module[aria-current] { border-color: var(--primaire); }
.carte-module__haut { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primaire); }
.carte-module__titre { font-weight: 700; line-height: 1.25; }
.carte-module__vignette { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: calc(var(--rayon) / 2); background: var(--surface); }
.carte-module__bas { margin-top: auto; font-size: .85rem; color: var(--texte-secondaire); }

/* Bouton flottant « La roue » */
.bouton-roue {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; width: 84px; height: 97px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--primaire); color: var(--sur-primaire); text-decoration: none; font-weight: 800; font-size: .8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
}
.bouton-roue:hover { filter: brightness(1.08); }
.page--supports { padding-bottom: 7rem; }

/* Quiz projeté */
.quiz-projete { max-width: 960px; margin: 0 auto; }
.quiz-projete__question { font-size: 1.6rem; line-height: 1.3; margin: .5rem 0 1rem; }
.quiz-projete__propositions { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.quiz-projete__propositions li { display: flex; gap: .8rem; align-items: center; font-size: 1.2rem; padding: .7rem 1rem; border: 2px solid var(--bordure); border-radius: var(--rayon); background: var(--surface); }
.quiz-projete__lettre { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--fond); }
.quiz-projete--revele .reponse--bonne { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 15%, var(--surface)); font-weight: 700; }
.quiz-projete--revele .reponse--bonne .quiz-projete__lettre { background: var(--succes); color: var(--sur-succes); }
.quiz-projete__image { max-width: 100%; max-height: 320px; border-radius: var(--rayon); margin-bottom: 1rem; }
.quiz-projete__barre { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.quiz-projete__etape[hidden] { display: none; }

/* Roue des stagiaires */
.roue-page { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.roue-page__roue { flex: 999 1 420px; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; min-width: 0; }
.roue-page__cote { flex: 1 1 300px; display: flex; flex-direction: column; gap: 1rem; }
.roue { position: relative; width: min(500px, 100%); aspect-ratio: 1; }
.roue__fleche { position: absolute; left: 50%; top: -8px; width: 40px; height: 48px; margin-left: -20px; z-index: 3; background: var(--texte); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.roue__cadre { position: absolute; inset: 0; border-radius: 50%; background: var(--entete); padding: 10px; }
.roue__disque { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; background: var(--fond); }
.roue__centre { position: absolute; left: 50%; top: 50%; width: 88px; height: 101px; margin: -50px 0 0 -44px; z-index: 2; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--primaire); border: 0; color: var(--sur-primaire); font: inherit; font-weight: 800; cursor: pointer; }
.roue-resultat { background: var(--entete); color: var(--sur-entete); border-radius: var(--rayon); padding: 1.25rem 1.4rem; min-height: 9rem; }
.roue-resultat__titre { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--primaire) 55%, var(--sur-entete)); }
.roue-resultat__nom { font-size: 2rem; font-weight: 800; line-height: 1.15; margin: .4rem 0; overflow-wrap: anywhere; }
.liste-roue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.liste-roue button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; padding: .3rem .6rem; font: inherit; text-align: left; color: var(--texte); background: transparent; border: 0; border-radius: calc(var(--rayon) / 2); cursor: pointer; }
.liste-roue button:hover { background: color-mix(in srgb, var(--primaire) 8%, var(--surface)); }
.liste-roue .absent { text-decoration: line-through; color: var(--texte-secondaire); }
.liste-roue .courant { background: color-mix(in srgb, var(--primaire) 14%, var(--surface)); font-weight: 700; }
.liste-roue__etat { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--texte-secondaire); }

/* Administration des supports */
.module-admin { border-top: 1px solid var(--bordure); padding: .6rem 0; }
.module-admin__ligne { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.formulaire-ordre { display: inline-flex; gap: .25rem; }
.formulaire-ordre .bouton { min-height: 36px; min-width: 40px; padding: .2rem .5rem; }
[data-pour-genre][hidden] { display: none; }
.vignette-choix { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: .6rem; }
.vignette-choix__apercu { width: 192px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--rayon) / 2); border: 1px solid var(--bordure); background: var(--fond); }

/* Cartes à éditer */
.titre-actions__boutons { display: flex; gap: .5rem; flex-wrap: wrap; }
.carte-a-editer { margin-top: 1.5rem; }
.carte-a-editer__session { font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.carte-a-editer__session .texte-secondaire { font-size: .9rem; font-weight: normal; }

/* Tests sur tablette : écrans du stagiaire (grosses cibles tactiles, pas de menu) */
body.tablette { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); min-height: 100vh; display: flex; flex-direction: column; }
.tablette__entete { background: var(--entete); color: var(--sur-entete); padding: .9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tablette__marque { display: flex; align-items: center; gap: .8rem; font-weight: 800; font-size: 1.25rem; min-width: 0; }
.tablette__logo { height: 40px; width: auto; }
.tablette__lien-entete { color: inherit; font-weight: 600; font-size: 1.05rem; padding: .6rem 0; }
.tablette__page { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 3rem; box-sizing: border-box; }
.tablette__centre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.tablette__titre { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: .2rem 0; line-height: 1.15; }
.tablette__consigne { font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--texte-secondaire); margin: 0; }
.tablette__formulaire { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 460px; }
.tablette__lien { font-size: 1.15rem; font-weight: 700; color: var(--texte); padding: .8rem; }
.tablette__suite { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.champ-code { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cases-chiffres { display: flex; gap: .8rem; align-items: center; }
.cases-chiffres span { width: clamp(64px, 16vw, 100px); height: clamp(78px, 19vw, 120px); background: var(--surface); border: 3px solid var(--bordure); border-radius: var(--rayon); display: flex; align-items: center; justify-content: center; font-size: clamp(2.4rem, 8vw, 4.4rem); font-weight: 800; }
.cases-chiffres span.case-chiffre--active { border-color: var(--texte); }
.cases-chiffres i { font-style: normal; font-size: 2.6rem; font-weight: 800; color: var(--texte-secondaire); }
.cases-chiffres--date span { width: clamp(56px, 13vw, 84px); }
.pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; width: 100%; }
.pave__touche { min-height: 76px; font: inherit; font-size: 2rem; font-weight: 700; background: var(--surface); color: var(--texte); border: 1.5px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; touch-action: manipulation; }
.pave__touche:active { background: var(--fond); }
.pave__touche--texte { font-size: 1.1rem; background: transparent; }
.pave__touche--valider { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); font-size: 1.3rem; font-weight: 800; }
.noms-tablette { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .8rem; margin: 1.2rem 0; }
.nom-tablette { min-height: 84px; padding: .7rem 1.1rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; background: var(--surface); color: var(--texte); border: 1.5px solid var(--bordure); border-radius: var(--rayon); text-decoration: none; }
.nom-tablette strong { font-size: 1.45rem; }
.nom-tablette span { font-size: 1.05rem; }
.nom-tablette:hover { border-color: var(--texte); }
.nom-tablette--pris { background: color-mix(in srgb, var(--bordure) 45%, var(--fond)); color: var(--texte-secondaire); }
.minuteur { text-align: right; line-height: 1.1; }
.minuteur strong { display: block; font-size: 1.8rem; }
.minuteur span { font-size: .85rem; opacity: .85; }
.minuteur--fin strong { color: var(--alerte); }
.question-tablette { display: flex; flex-direction: column; gap: 1.1rem; }
.question-tablette__avance { display: flex; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.15rem; flex-wrap: wrap; }
.barre-avance { flex: 1; min-width: 120px; height: 10px; background: color-mix(in srgb, var(--bordure) 60%, var(--fond)); border-radius: 999px; overflow: hidden; }
.barre-avance span { display: block; height: 100%; background: var(--primaire); }
.question-tablette__enonce { font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.3; margin: 0; }
.question-tablette__image { max-width: 100%; max-height: 40vh; object-fit: contain; align-self: center; border-radius: var(--rayon); }
.question-tablette__consigne { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--texte-secondaire); }
.question-tablette__consigne--multi { color: var(--primaire); }
.reponses-tablette { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.reponse-tablette { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 80px; padding: .7rem 1.1rem; background: var(--surface); border: 3px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; }
.reponse-tablette input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reponse-tablette__lettre { width: 50px; height: 50px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; background: color-mix(in srgb, var(--bordure) 55%, var(--surface)); border-radius: var(--rayon); }
.reponse-tablette__texte { font-size: clamp(1.15rem, 2.8vw, 1.45rem); font-weight: 600; line-height: 1.3; }
.reponse-tablette:has(input:checked) { border-color: var(--primaire); background: color-mix(in srgb, var(--primaire) 8%, var(--surface)); }
.reponse-tablette:has(input:checked) .reponse-tablette__lettre { background: var(--primaire); color: var(--sur-primaire); }
.reponse-tablette:has(input:focus-visible) { outline: 3px solid var(--texte); outline-offset: 2px; }
.question-tablette__navigation { display: flex; gap: .8rem; flex-wrap: wrap; }
.question-tablette__navigation .bouton { flex: 1 1 200px; }
.bouton--grand { min-height: 68px; font-size: 1.2rem; padding: 0 1.4rem; }
.pastilles-questions { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille-question { min-width: 44px; min-height: 44px; font: inherit; font-weight: 700; background: var(--surface); color: var(--texte); border: 1.5px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; }
.pastille-question--faite { background: color-mix(in srgb, var(--succes) 18%, var(--surface)); border-color: var(--succes); }
.pastille-question--courante { border: 3px solid var(--texte); }
.hexa-fin { width: 130px; height: 150px; background: var(--succes); color: var(--sur-succes); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; }

/* Tests sur tablette : écran du formateur */
.test-formateur { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.test-formateur__code { flex: 1 1 320px; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.test-formateur__liste { flex: 999 1 520px; min-width: 0; }
.code-test { background: var(--entete); color: var(--sur-entete); border-radius: var(--rayon); padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.code-test--ferme { opacity: .6; }
.code-test__titre { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.code-test__chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.code-test__chiffres span { background: var(--surface); color: var(--texte); border-radius: var(--rayon); font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 800; text-align: center; padding: .3rem 0; }
.code-test__aide { font-size: .95rem; line-height: 1.45; }
.compteurs-test { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.compteurs-test div { background: var(--fond); border-radius: var(--rayon); padding: .6rem .8rem; display: flex; flex-direction: column; }
.compteurs-test strong { font-size: 1.7rem; }
.compteurs-test span { font-size: .85rem; color: var(--texte-secondaire); }
.liste-test { list-style: none; margin: 0; padding: 0; }
.liste-test__ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 5rem auto; gap: .4rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--bordure); min-height: 44px; }
.liste-test__nom { font-weight: 700; }
.liste-test__etat { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; }
.liste-test__note { font-weight: 700; text-align: right; }
.liste-test__actions { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.liste-test__actions form { margin: 0; }
.liste-test__ligne--non_passe { opacity: .6; }
.liste-test__etat .hexa--fini { background: var(--succes); }
.liste-test__etat .hexa--en_cours, .liste-test__etat .hexa--connecte { background: var(--primaire); }
.liste-test__etat .hexa--non_passe { background: var(--bordure); }
.decalage { padding: .6rem 0; border-top: 1px solid var(--bordure); }
.decalage .actions form { margin: 0; }
.tests-session__liste { list-style: none; margin: 0; padding: 0; }
.tests-session__liste li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--bordure); }
.tests-session__liste form { margin: 0; }
@media (max-width: 600px) {
  .liste-test__ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .liste-test__etat { grid-column: 1; }
  .liste-test__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.bloc--alerte { border: 1.5px solid var(--alerte); background: color-mix(in srgb, var(--alerte) 8%, var(--surface)); }
.bouton--appui { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.bouton--appui > span:last-child { position: relative; }
.bouton--appui__jauge { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--primaire) 55%, transparent); }

/* Correction d'un test question par question */
.barre-reussite { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bordure) 50%, var(--fond)); min-width: 120px; flex: 1; }
.barre-reussite__ok { background: var(--succes); }
.barre-reussite__ko { background: var(--erreur); }
.barre-reussite__vide { background: var(--bordure); }
.correction-liste { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.correction-question__tete { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.correction-question__taux { font-size: 1.8rem; font-weight: 800; min-width: 4.5rem; }
.correction-question--difficile .correction-question__taux { color: var(--erreur); }
.correction-question__score { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.correction-question__enonce { font-size: 1.2rem; margin: .8rem 0 .4rem; }
.correction-question__image { max-width: 100%; max-height: 220px; border-radius: var(--rayon); margin-bottom: .6rem; }
.correction__texte { flex: 1; min-width: 0; }
.correction__compte { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.correction__jauge { width: 90px; height: 10px; background: color-mix(in srgb, var(--bordure) 50%, var(--fond)); border-radius: 999px; overflow: hidden; }
.correction__jauge span { display: block; height: 100%; background: var(--texte-secondaire); }
.correction-liste .reponse--bonne { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 12%, var(--surface)); font-weight: 700; }
.correction-liste .reponse--bonne .correction__jauge span { background: var(--succes); }
.correction-projetee .correction__compte, .correction-projetee .correction-projetee__score { visibility: hidden; }
.correction-projetee.quiz-projete--revele .correction__compte, .correction-projetee.quiz-projete--revele .correction-projetee__score { visibility: visible; }
.correction-projetee.quiz-projete--revele .reponse--bonne .correction__jauge span { background: var(--succes); }
.correction-projetee__score { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: 1.3rem; }
@media (max-width: 600px) { .correction__jauge { width: 50px; } }
.correction-question__score .barre-reussite { flex: none; width: 100%; }
.correction-projetee:fullscreen { background: var(--fond); padding: 2rem; max-width: none; overflow: auto; }
.correction-projetee:fullscreen .quiz-projete__question { font-size: 2.2rem; }
.lecteur__ecran--image-lien .lecteur__vide { gap: 1rem; padding: 1rem; }
.lecteur__image-lien { max-width: min(100%, 520px); max-height: 46vh; object-fit: contain; border-radius: var(--rayon); }
.champ-code-html { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.4; white-space: pre; overflow: auto; }
.lecteur__ecran--html iframe { background: var(--surface); }
.lecteur__ecran--html { aspect-ratio: auto; height: min(80vh, 900px); }
.lecteur__test { gap: 1rem; }
.lecteur__test form { margin: 0; }
.lecteur__test-titre { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lecteur__code { width: min(100%, 420px); }
.lecteur__test-info { font-size: 1rem; opacity: .85; }
.lecteur__vide .texte-secondaire { color: inherit; opacity: .8; }

/* --- Supports : activité hors projection --- */
.lecteur__activite { color: var(--sur-entete); }
.lecteur__activite .lecteur__vide { gap: .8rem; }
.lecteur__activite-genre { font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.lecteur__activite-titre { font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.2; max-width: 22ch; }
.lecteur__ecran .lecteur__activite-photo { width: auto; height: auto; min-height: 0; max-width: 100%; max-height: 62vh; border-radius: var(--rayon); object-fit: contain; }
.lecteur__activite--photo .lecteur__activite-titre { font-size: clamp(1.1rem, 2.6vw, 1.6rem); }
.lecteur:fullscreen .lecteur__ecran .lecteur__activite-photo { max-height: 78vh; }
.lecteur__consignes { margin-left: auto; align-self: center; color: inherit; opacity: .85; }
.supports-liens { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

/* --- Consignes du formateur (téléphone) --- */
.consignes-page { max-width: 760px; margin: 0 auto; }
.consignes-entete { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.consignes-entete h1 { margin: 0; }
.consignes-suivi { white-space: nowrap; }
.consignes-titre { margin: .2rem 0 .1rem; font-size: 1.5rem; line-height: 1.25; }
.consignes-bloc { margin-top: 1rem; }
.consignes-bloc h3 { margin: 0 0 .4rem; font-size: 1rem; }
.consignes-bloc--materiel { border-left: 4px solid var(--alerte); }
.consignes-texte { font-size: 1.08rem; line-height: 1.5; overflow-wrap: anywhere; }
.consignes-texte p { margin: 0 0 .6rem; }
.consignes-texte ul { margin: 0 0 .6rem; padding-left: 1.3rem; }
.consignes-texte li { margin: .2rem 0; }
.consignes-question { margin-top: 1rem; border-left: 4px solid var(--primaire); }
.consignes-question__enonce { font-size: 1.15rem; font-weight: 700; margin: .4rem 0 .6rem; }
.consignes-question__props { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .4rem; }
.consignes-question__props li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .4rem .5rem; border-radius: var(--rayon); }
.consignes-question__bonne { background: color-mix(in srgb, var(--succes) 14%, var(--surface)); font-weight: 700; }
.consignes-question__bonne .quiz-projete__lettre { background: var(--succes); color: var(--sur-succes); }
.consignes-question__ok { font-size: .8rem; color: var(--succes); margin-left: auto; }
.consignes-photo { display: block; width: 100%; max-height: 60vh; object-fit: contain; margin-top: 1rem; border-radius: var(--rayon); background: var(--surface); }
.consignes-navigation { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.consignes-officiel { margin: .4rem 0 1rem; }
.consignes-jour { margin: 1.2rem 0 .4rem; }
.consignes-deroule { margin: 0; padding-left: 1.4rem; }
.consignes-deroule > li { margin: 0 0 .8rem; }
.consignes-deroule__theme { font-weight: 700; }
.consignes-deroule ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; }
.consignes-deroule ul li { padding: .45rem .6rem; border-radius: var(--rayon); display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.consignes-deroule ul a { min-height: 32px; display: inline-flex; align-items: center; }
.consignes-deroule__ici { background: color-mix(in srgb, var(--primaire) 12%, var(--surface)); border-left: 4px solid var(--primaire); }
.consignes-mes-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.consignes-mes-notes > li { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .7rem .8rem; overflow-wrap: anywhere; }
.note-formateur { border-top: 1px solid var(--bordure); padding: .5rem 0; }
.proposition { margin-bottom: 1rem; }

/* --- Mode de l'appareil (normal, projection, suivi) --- */
.entete__mode { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  color: var(--sur-entete); border: 1px solid currentColor; text-decoration: none; white-space: nowrap; }
.mode-page { max-width: 760px; margin: 0 auto; }
.mode-grille { display: grid; gap: .8rem; margin: 1rem 0; }
.mode-choix { margin: 0; }
.mode-choix__bouton { width: 100%; text-align: left; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem; min-height: 72px;
  background: var(--surface); color: var(--texte); border: 2px solid var(--bordure); border-radius: var(--rayon); font: inherit; cursor: pointer; }
.mode-choix__bouton:hover, .mode-choix__bouton:focus-visible { border-color: var(--primaire); }
.mode-choix--conseille .mode-choix__bouton { border-color: var(--primaire); background: color-mix(in srgb, var(--primaire) 6%, var(--surface)); }
.mode-choix__titre { font-size: 1.15rem; font-weight: 800; }
.mode-choix__texte { color: var(--texte-secondaire); }

.consignes-module { border-top: 1px solid var(--bordure); padding-top: .9rem; margin-top: .9rem; }
.consignes-module__titre { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Plein écran du lecteur : bouton de sortie toujours accessible (Échap peut rester dans une page intégrée). */
.lecteur:fullscreen { position: relative; }
.lecteur__sortir { position: absolute; bottom: .6rem; right: .6rem; z-index: 5; min-height: 40px; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--sur-entete); background: var(--entete); color: var(--sur-entete); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; opacity: .75; box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
.lecteur__sortir:hover, .lecteur__sortir:focus-visible { opacity: 1; }

.lecteur__choix-quiz { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; }
.lecteur__choix-quiz form { margin: 0; }
.lecteur__vide .bouton--discret { color: inherit; border-color: currentColor; }

/* QR code du test (projeté) : ouvre /test?code=… sans taper le code. */
.qr-test { display: inline-block; background: #fff; padding: .4rem; border-radius: var(--rayon); width: 140px; max-width: 40vw; line-height: 0; }
.qr-test svg { width: 100%; height: auto; display: block; }
.lecteur__code-qr { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.lecteur:fullscreen .qr-test { width: 220px; }
.code-test .qr-test { margin-top: .8rem; }

.entete__mode--normal { opacity: .7; font-weight: 600; }
.entete__mode--normal:hover { opacity: 1; }

/* Vue « Par déroulé » : modules sous chaque thème, rangement (flèches, glisser-déposer). */
.deroule-theme { display: block; }
.deroule-theme__ligne { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; justify-content: space-between; }
.deroule-fleches { display: inline-flex; gap: .25rem; margin: 0; }
.deroule-fleches .bouton { min-height: 32px; padding: 0 .55rem; }
.deroule-modules { list-style: none; margin: .2rem 0 .6rem 2.6rem; padding: 0; display: grid; gap: .15rem; font-size: .92rem; }
.deroule-theme[draggable="true"] { cursor: grab; }
.deroule-theme--tire { opacity: .45; }
.deroule-jour--cible { outline: 2px dashed var(--primaire); outline-offset: 2px; }
.deroule-jour--nouveau { border-style: dashed; }
.deroule-modules a { display: inline; min-height: 0; padding: 0; color: var(--texte); text-decoration: underline; text-decoration-color: var(--bordure); }
.deroule-modules li { line-height: 1.35; }
.deroule-theme__ligne > a { flex: 1 1 12rem; }
.deroule-fleches .bouton { min-height: 28px; padding: 0 .45rem; font-size: .8rem; }
.deroule-theme { padding-bottom: .3rem; border-bottom: 1px solid var(--bordure); }
.deroule-theme:last-child { border-bottom: 0; }

.deroule-jour--reserve { border-style: dashed; background: color-mix(in srgb, var(--fond) 60%, var(--surface)); }
.deroule-session__coche { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .2rem; }
.deroule-session__coche input[name=commentaire] { flex: 1 1 10rem; min-height: 32px; padding: .2rem .5rem; }
.deroule-session__coche select { min-height: 32px; }
.deroule-session__realise, .deroule-session__vu { font-size: .85rem; margin: .1rem 0; }

.consignes-realise { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .6rem; }
.consignes-realise input[name=commentaire] { flex: 1 1 8rem; min-height: 36px; }

/* Consignes des formateurs dans les déroulés (interrupteur « Afficher les consignes des formateurs »). */
.deroule-consignes { display: none; margin: .3rem 0 .6rem; padding: .5rem .7rem; border-left: 3px solid var(--alerte); background: color-mix(in srgb, var(--alerte) 6%, var(--surface)); border-radius: calc(var(--rayon) / 2); font-size: .92rem; }
.avec-consignes .deroule-consignes { display: block; }
.deroule-consignes__bloc { margin: .35rem 0; }
.deroule-consignes .consignes-texte { font-size: .92rem; }
.deroule-consignes p { margin: .2rem 0; }
.deroule-interrupteur { margin: 0 0 .8rem; }