/* Signaux : la page du formateur. */
.depart { max-width: 760px; margin: 5vh auto; padding: 0 16px; display: grid; gap: 18px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 20px; display: grid; gap: 12px; box-shadow: var(--ombre); }
.carte label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.carte label.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.carte label.case.essai { background: var(--signal-f); border-radius: 10px; padding: 10px 12px; }
.carte input, .carte select { padding: 8px 10px; border: 1px solid var(--trait2); border-radius: 8px; background: var(--carte2); font-weight: 400; }
.ligne { display: flex; gap: 16px; flex-wrap: wrap; }
.ligne label { flex: 1; min-width: 140px; }
.avec-unite { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.avec-unite input { width: 90px; }
.aide { color: var(--doux); font-size: 14.5px; }
.erreur { color: var(--perd); font-weight: 700; min-height: 1.3em; }
.alerte { color: var(--signal); font-weight: 700; }

/* L'en-tête et les onglets. */
.p-tete { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 20px; background: var(--nuit); color: var(--sur-nuit); }
.pt-dossier, .pt-adr { color: color-mix(in srgb, var(--sur-nuit) 72%, transparent); font-size: 14.5px; }
.pt-adr b { color: var(--sur-nuit); }
.pt-ecran { margin-left: auto; text-decoration: none; padding: 8px 16px; font-size: 15px; background: var(--signal-vif); box-shadow: none; }
.pt-ecran:hover { background: var(--signal); }
.pt-quitter { color: var(--sur-nuit); font-weight: 600; font-size: 14px; opacity: .8; }
.p-onglets { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid var(--trait2); background: var(--carte); }
.p-onglets button { border: 1px solid var(--trait2); border-bottom: 0; background: var(--carte2); padding: 8px 16px; font-weight: 700; color: var(--doux); border-radius: 10px 10px 0 0; margin-bottom: -1px; }
.p-onglets button[aria-selected="true"] { background: var(--fond); color: var(--encre); box-shadow: inset 0 3px 0 var(--primaire); }

/* Piloter : le souffleur à gauche, les groupes à droite. */
.p-grille { display: grid; grid-template-columns: minmax(340px, 430px) 1fr; gap: 20px; padding: 16px 20px 60px; align-items: start; }
.p-gauche { display: grid; gap: 14px; position: sticky; top: 12px; }
.p-droite { min-width: 0; display: grid; gap: 12px; }
.souffleur { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; box-shadow: var(--ombre); }
.s-etape { justify-self: start; background: var(--primaire); color: var(--sur-primaire); border-radius: 99px; padding: 3px 12px; font-weight: 700; font-size: 14px; }
.s-dire { background: var(--primaire-f); border-left: 5px solid var(--primaire); border-radius: 12px; padding: 10px 14px; display: grid; gap: 3px; }
.s-dire span, .s-reponse span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primaire); }
.s-dire p { font-size: 17px; color: var(--encre); line-height: 1.45; }
.s-question { display: grid; gap: 4px; }
.s-question b { font-family: var(--f-titre); font-size: 17px; color: var(--encre); }
.s-reponse { background: var(--signal-f); border-left: 5px solid var(--signal-vif); border-radius: 12px; padding: 10px 14px; display: grid; gap: 3px; }
.s-reponse span { color: var(--signal); }
.s-ligne { font-size: 15px; }
.s-relances summary { cursor: pointer; font-weight: 700; color: var(--primaire); }
.s-relances ul { padding-left: 20px; display: grid; gap: 6px; margin-top: 8px; font-size: 14.5px; }
.commandes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.commandes .b-principal { font-size: 17px; padding: 13px 18px; flex: 1; }
.commandes .b-principal.cloture { background: var(--signal); box-shadow: 0 2px 0 #9a3209; }
.chrono { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chrono:empty { display: none; }
.ch-reste { font-family: var(--f-titre); font-weight: 800; font-size: 28px; color: var(--encre); min-width: 110px; }
.ch-reste.fini { color: var(--signal); }
.b-depeche { border-color: var(--signal-vif); color: var(--signal); }
input.d { width: 64px; padding: 4px 6px; border: 1px solid var(--trait2); border-radius: 6px; }
.deroule { list-style: none; padding: 0; display: grid; gap: 3px; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 8px; }
.deroule li { display: grid; grid-template-columns: 4em 1fr auto; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; color: var(--doux); font-size: 14.5px; }
.deroule li.fait { color: var(--texte); }
.deroule li.fait .d-heure::after { content: " ✓"; color: var(--ok); }
.deroule li.ici { background: var(--nuit); color: var(--sur-nuit); font-weight: 700; }
.d-heure { font-variant-numeric: tabular-nums; font-size: 13px; }
.d-duree { font-size: 13px; }

/* Les groupes pendant la manche. */
.p-droite h2 { font-size: 21px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.p-droite h2 small { font-family: var(--f-texte); font-weight: 600; font-size: 14px; color: var(--doux); }
.p-droite h3 { font-size: 17px; margin-top: 6px; }
.p-droite h3 small { font-family: var(--f-texte); font-weight: 600; font-size: 14px; color: var(--doux); margin-left: 6px; }
.cartes-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.c-groupe { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; display: grid; gap: 9px; box-shadow: var(--ombre); }
.c-groupe.absent { box-shadow: none; border-style: dashed; }
.c-groupe header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--doux); }
.cg-lettre { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--signal-vif); color: #fff; font-family: var(--f-titre); font-size: 19px; }
.absent .cg-lettre { background: var(--trait2); }
.b-voir { margin-left: auto; font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.cg-barres { display: grid; gap: 4px; }
.cg-l { display: grid; grid-template-columns: 8.5em 1fr 3.4em; gap: 8px; align-items: center; font-size: 13px; color: var(--doux); }
.cg-l small { text-align: right; font-variant-numeric: tabular-nums; }
.cg-b { height: 8px; border-radius: 99px; background: var(--carte2); box-shadow: inset 0 0 0 1px var(--trait); overflow: hidden; }
.cg-b .barre { display: block; height: 100%; background: var(--primaire); }
.cg-pied { font-size: 13px; color: var(--doux); }
.cg-prev { font-size: 13px; color: var(--texte); background: var(--carte2); border-radius: 8px; padding: 4px 8px; }
.t-prev td { font-size: 14px; }
.t-prev tr.reel { background: var(--signal-f); }
.t-prev tr.reel b { font-family: var(--f-titre); color: var(--signal); font-size: 17px; }
.t-prev td.hors { background: var(--perd-f); }

/* Les scores, partie par partie. */
.t-scores { width: 100%; background: var(--carte); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); font-size: 15px; }
.t-scores th, .t-scores td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; font-variant-numeric: tabular-nums; }
.t-scores thead th { font-size: 13px; color: var(--doux); background: var(--carte2); }
.t-scores thead small { display: block; font-weight: 400; }
.t-scores tbody th { font-family: var(--f-titre); font-size: 18px; color: var(--encre); }
.t-scores .rg { font-family: var(--f-titre); font-weight: 800; color: var(--signal); font-size: 18px; }
.t-scores td.top { background: var(--ok-f); }
.t-scores td.top .sc-v { color: var(--ok); }
.sc-v { font-weight: 700; display: block; }
.mini-b { display: block; height: 6px; border-radius: 99px; background: var(--carte2); overflow: hidden; margin-top: 3px; min-width: 60px; }
.mini-b .barre { display: block; height: 100%; background: var(--c); }
.t-scores .tot { font-family: var(--f-titre); font-weight: 800; font-size: 19px; color: var(--encre); }
.f-proba { --c: #2F5D99; } .f-effet { --c: #A8670D; } .f-metier { --c: #6B3FA0; } .f-action { --c: #1E7A4C; } .f-depart { --c: #0B6E78; } .f-avis { --c: #BF3326; }
.ecarts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14.5px; }
.ecart { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--c); border-radius: 8px; padding: 3px 9px; }
.d-groupe { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px; }
.d-groupe summary { cursor: pointer; }
.d-etape { font-weight: 700; color: var(--primaire); margin-top: 8px; font-size: 14px; }
.lignes { list-style: none; padding: 0; display: grid; gap: 5px; margin-top: 6px; font-size: 14px; }
.lignes li { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; align-items: start; }
.lp-pts { font-weight: 800; text-align: center; border-radius: 7px; padding: 1px 0; background: var(--carte2); font-variant-numeric: tabular-nums; }
.lignes li.ok .lp-pts { background: var(--ok-f); color: var(--ok); }
.lignes li.moyen .lp-pts { background: var(--moyen-f); color: var(--moyen); }
.lignes li.perd .lp-pts { background: var(--perd-f); color: var(--perd); }

/* Le guide : des fiches repliables ; le corrigé : des sous-onglets. */
.p-doc { padding: 16px 20px 80px; }
.doc { max-width: 1060px; margin: 0 auto; display: grid; gap: 12px; }
.doc h2 { font-size: 21px; }
.doc ol, .doc ul { padding-left: 22px; display: grid; gap: 5px; }
.trente { background: var(--nuit); color: var(--sur-nuit); border-radius: 16px; padding: 16px 20px; display: grid; gap: 8px; }
.trente h2 { color: var(--sur-nuit); }
.fiche { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); }
.fiche summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 20px; list-style: none; }
.fiche summary::-webkit-details-marker { display: none; }
.fiche summary::before { content: "+"; font-family: var(--f-titre); font-weight: 800; color: var(--primaire); width: 1em; }
.fiche[open] summary::before { content: "−"; }
.fiche[open] summary { border-bottom: 1px solid var(--trait); }
.f-titre { font-family: var(--f-titre); font-weight: 800; font-size: 19px; color: var(--encre); }
.f-sous { color: var(--doux); font-size: 14.5px; }
.f-corps { padding: 14px 20px 18px; display: grid; gap: 10px; }
.chapeau { font-size: 17px; font-weight: 700; color: var(--encre); }
blockquote { margin: 0; background: var(--signal-f); border-left: 4px solid var(--signal-vif); border-radius: 8px; padding: 12px 16px; font-size: 16.5px; }
.frise { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 10px !important; }
.frise li { background: var(--carte2); border-radius: 12px; padding: 12px; display: grid; gap: 4px; align-content: start; font-size: 14.5px; border-top: 4px solid var(--primaire); }
.frise b { font-family: var(--f-titre); font-size: 17px; color: var(--encre); }
.f-heure { color: var(--doux); font-weight: 700; font-size: 13px; }
.f-duree { font-weight: 700; color: var(--signal); }
.outils { display: grid; grid-template-columns: 13em 1fr; gap: 8px 16px; margin: 0; }
.outils dt { font-weight: 700; color: var(--encre); }
.outils dd { margin: 0; }
.faq { display: grid; gap: 6px; }
.faq details { background: var(--carte2); border-radius: 10px; padding: 8px 12px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--encre); }
.faq p { margin-top: 6px; }
.t-doc { width: 100%; font-size: 14.5px; }
.t-doc th, .t-doc td { border: 1px solid var(--trait); padding: 6px 9px; vertical-align: top; text-align: left; }
.t-doc thead th { background: var(--carte2); font-size: 13px; }
.t-doc tbody th { font-weight: 700; }
.t-doc small { color: var(--doux); font-weight: 400; }
.sous-onglets { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 5; background: var(--fond); padding: 6px 0; }
.sous-onglets button { border: 1px solid var(--trait2); background: var(--carte); border-radius: 99px; padding: 5px 13px; font-weight: 700; font-size: 14px; color: var(--doux); }
.sous-onglets button[aria-selected="true"] { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); }
.c-section { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 18px 22px; display: grid; gap: 10px; box-shadow: var(--ombre); }
.nat { font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 2px 8px; white-space: nowrap; background: var(--carte2); }
.nat.n-signal { background: var(--signal-f); color: var(--signal); }
.nat.n-piege { background: var(--perd-f); color: var(--perd); }
.nat.n-cle { background: var(--ok-f); color: var(--ok); }
@media (max-width: 1000px) { .p-grille { grid-template-columns: 1fr; } .p-gauche { position: static; } .frise { grid-template-columns: 1fr 1fr; } .outils { grid-template-columns: 1fr; } }
/* Les simulations. */
.sim-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sim-tuiles div { background: var(--carte2); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.sim-tuiles span { font-weight: 700; color: var(--doux); font-size: 14px; }
.sim-tuiles b { font-family: var(--f-titre); font-size: 26px; color: var(--encre); }
.sim-tuiles small { color: var(--doux); }
.c-section b.pos { color: var(--signal); } .c-section b.neg { color: var(--doux); }
.c-section h3 { font-size: 17px; margin-top: 8px; }

/* Le souffleur pendant le futur : le fil des clics, l'étape où l'on est, le prochain clic. */
.s-fil { background: var(--carte2); border-radius: 12px; padding: 8px 12px; }
.s-fil summary { cursor: pointer; font-weight: 700; color: var(--primaire); }
.s-fil summary small { color: var(--doux); font-weight: 400; margin-left: 6px; }
.s-fil .aide { font-size: 13px; margin: 6px 0; }
.s-fil ol { padding-left: 22px; display: grid; gap: 3px; font-size: 13.5px; }
.s-fil li.fait { color: var(--doux); }
.s-fil li.ici { color: var(--encre); background: var(--primaire-f); border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.s-ici { font-size: 12px; font-weight: 700; color: var(--sur-primaire); background: var(--primaire); border-radius: 99px; padding: 0 8px; margin-left: 4px; }
.s-vous { padding-left: 22px; margin-top: 4px; display: grid; gap: 3px; }
.s-clic { background: var(--primaire-f); border-radius: 10px; padding: 6px 12px; }
.s-clic b { color: var(--primaire); }

/* Le point de départ d'un groupe : chaque essai et son bonus. */
.cg-dep { font-size: 13px; color: var(--texte); }
.cg-dep .ok { color: var(--ok); font-weight: 700; } .cg-dep .perd { color: var(--perd); font-weight: 700; }

/* La nature de l'information d'un document (séance 1). */
.nat.ni-incertitude { background: var(--h1-f); color: var(--h1); }
.nat.ni-rupture { background: var(--perd-f); color: var(--perd); }
.nat.ni-tendance { background: var(--h0-f); color: var(--h0); }
.nat.ni-signal { background: var(--moyen-f); color: var(--moyen); }
.d-comptes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.t-lecture td:nth-child(3) { min-width: 150px; }
.t-lecture .nat { display: inline-block; margin-top: 4px; white-space: normal; }

/* Les simulations : les comportements par catégorie, les contrôles. */
.t-doc tr.t-cat th { background: var(--primaire-f); color: var(--primaire); font-size: 13.5px; }
.sim-controles { padding-left: 0; list-style: none; display: grid; gap: 6px; }
.sim-controles li { border-left: 4px solid var(--trait2); padding: 4px 10px; background: var(--carte2); border-radius: 6px; font-size: 14.5px; }
.sim-controles li b { margin-right: 6px; }
.sim-controles li.ok { border-color: var(--ok); } .sim-controles li.ok b { color: var(--ok); }
.sim-controles li.limite { border-color: var(--moyen); } .sim-controles li.limite b { color: var(--moyen); }
.sim-controles li.perd { border-color: var(--perd); } .sim-controles li.perd b { color: var(--perd); }