/* Le Salon : la page de pilotage (ordinateur du formateur, 1280 px et plus ; 3 colonnes). */
.b-prof { background: var(--papier); font-size: 15px; }
.doux { color: var(--doux); }
.petit { font-size: 13.5px; }
.vert { color: var(--vert); }
.rouge { color: var(--rouge); font-weight: 700; }
.erreur { color: var(--rouge); font-weight: 700; }
/* Création */
.creation { max-width: 620px; margin: 40px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 18px; }
.creation h1 { font-size: 40px; color: var(--cafe); }
.c-form { background: var(--carte); border-radius: 14px; padding: 20px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 12px; }
.c-form h2 { font-size: 20px; }
.c-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.c-form label.case { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.c-form label.retrait { margin-left: 28px; }
.c-form input:not([type=checkbox]), .c-form select { font-size: 17px; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 8px; font-weight: 400; }
.c-form input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; }
.p-attente { padding: 40px; font-size: 18px; }
/* Barre du haut */
.p-barre { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; background: var(--encre); color: #fff; }
.p-barre .btn { border-color: #fff; }
.p-barre .btn:not(.plein) { background: transparent; color: #fff; }
.p-barre .btn.plein { background: #fff; color: var(--encre); }
.p-barre .btn.lien { color: #E6D6C4; }
.p-marque { display: flex; flex-direction: column; line-height: 1.15; }
.p-marque > b { font-family: var(--f-titre); font-size: 20px; color: var(--creme); }
.p-essai { background: var(--or); color: var(--encre); border-radius: 99px; padding: 0 8px; font-weight: 700; }
/* La frise : une ligne, des noms courts ; les étapes passées s'effacent, l'étape en cours ressort */
.p-frise { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.p-frise button { flex: none; border: 1px solid transparent; background: transparent; color: #E6D6C4; border-radius: 99px; padding: 4px 9px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.p-frise button:hover { border-color: rgba(255, 255, 255, .45); }
.p-frise button.manche { font-weight: 700; }
.p-frise button.groupe { margin-left: 10px; }
.p-frise button.fait { color: #9C8B78; }
.p-frise button.fait::before { content: "✓ "; }
.p-frise button.ici { background: var(--creme); color: var(--encre); border-color: var(--creme); font-weight: 700; }
.p-chrono { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.p-haut-droite { display: flex; gap: 6px; align-items: center; }
.p-b-outils { white-space: nowrap; }
/* Sur un écran de moins de 1700 px, la frise prend sa propre ligne, sous les boutons */
@media (max-width: 1699px) { .p-frise { order: 9; flex-basis: 100%; } }
.p-chrono b { font-family: var(--f-titre); font-size: 30px; min-width: 86px; text-align: right; }
.p-chrono b.urgent { color: #FF9C87; }
/* Le panneau des outils, à droite : il se déplie et se réduit avec le bouton « Outils » */
.p-outils { position: fixed; top: var(--haut-barre, 64px); right: 0; bottom: 0; width: 240px; z-index: 9; overflow-y: auto; background: var(--carte); border-left: 1px solid var(--trait);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .12); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.p-outils .btn { width: 100%; text-align: left; margin-top: 8px; }
.p-outils p { margin: 0; }
.p-o-haut { display: flex; justify-content: space-between; align-items: center; }
.p-o-haut h2 { font-size: 18px; }
.p-o-haut .btn { width: auto; margin: 0; }
@media (min-width: 1600px) { .p-grille.avec-outils { margin-right: 240px; } }
/* Grille */
.p-grille { display: grid; grid-template-columns: 310px minmax(0, 1fr) 290px; gap: 14px; padding: 14px; align-items: start; }
.p-panneau { background: var(--carte); border-radius: 14px; padding: 14px 16px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 10px; }
.p-panneau h2 { font-size: 19px; color: var(--encre); }
.p-panneau h3 { font-size: 15px; color: var(--cafe); margin-top: 6px; text-transform: uppercase; letter-spacing: .05em; }
.p-sur { font-size: 13px; color: var(--doux); font-weight: 700; }
.p-faire { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.p-dire { background: var(--creme); border-radius: 10px; padding: 10px 12px; font-size: 15.5px; }
.p-alertes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.p-alertes li { border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 14px; }
.p-alertes .alerte { background: var(--rouge-f); color: #7A1A12; }
.p-alertes .action { background: var(--orange-f); color: #6B3906; }
.p-alertes .info { background: var(--bleu-f); color: #1D4371; font-weight: 400; }
.large { width: 100%; }
.p-q { font-size: 16px; color: var(--encre); }
/* Équipes */
.p-eqs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.p-eqs li { border-left: 5px solid var(--c); background: var(--papier); border-radius: 8px; padding: 7px 10px; }
.p-eq-l1 { display: grid; grid-template-columns: 30px auto 1fr auto; gap: 6px; align-items: center; }
.p-eq-l2 { font-size: 13px; margin-top: 2px; }
/* Accueil */
.p-acc { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.p-qr svg { width: 100%; height: auto; display: block; }
.p-essai-note { background: var(--orange-f); border-radius: 10px; padding: 8px 10px; }
.p-nb select { margin-left: 8px; font-size: 15px; padding: 4px 8px; }
.p-nom { font-size: 15px; padding: 5px 8px; border: 1.5px solid var(--trait); border-radius: 8px; width: 180px; }
.p-tel { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; font-size: 13px; }
.p-tel select { font-size: 12.5px; }
/* Tableaux */
.p-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-tab th { text-align: left; font-size: 12.5px; color: var(--doux); padding: 4px 6px; border-bottom: 1px solid var(--trait); }
.p-tab td { padding: 6px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.p-tab tr.ici td { background: var(--creme); }
.p-defile { overflow-x: auto; }
.p-matrice { border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.p-matrice th { font-size: 12px; color: var(--doux); text-align: center; white-space: nowrap; padding: 2px 4px; }
.p-matrice th small { display: block; color: var(--or); }
.p-matrice thead th { font-size: 13px; color: var(--texte); }
.p-matrice thead th small { color: var(--doux); font-weight: 400; font-size: 11.5px; }
.p-matrice tbody th { text-align: left; color: var(--texte); font-size: 13px; white-space: normal; min-width: 150px; max-width: 210px; }
.p-matrice tbody th small { color: var(--doux); display: block; font-weight: 400; font-size: 11.5px; }
.p-matrice tbody th .pastille { margin-right: 5px; }
.p-matrice td { min-width: 70px; height: 34px; text-align: center; border-radius: 6px; background: var(--carte2); cursor: pointer; font-size: 12.5px; position: relative; }
.p-matrice.large td { min-width: 50px; font-size: 11.5px; cursor: default; padding: 2px 4px; line-height: 1.2; white-space: nowrap; }
.p-matrice.large td .btn.lien { display: block; font-size: 11px; padding: 0; margin: 2px auto 0; }
.p-matrice td small { position: absolute; top: 1px; right: 4px; font-size: 10px; font-weight: 700; }
.p-matrice.serree thead th { font-size: 12px; padding: 2px 1px; }
.p-matrice.serree thead th .pastille { display: block; margin: 0 auto 2px; }
.p-matrice.serree tbody th { min-width: 128px; }
.p-matrice.serree td { min-width: 54px; }
.p-matrice td.vide { background: var(--carte2); }
.p-matrice td.main { background: var(--bleu-f); color: #1D4371; }
.p-matrice td.faux { background: var(--orange-f); color: #6B3906; font-weight: 700; }
.p-matrice td.ok { background: var(--vert-f); color: #0F5132; }
.p-matrice td.ko { background: var(--rouge-f); color: #7A1A12; }
.p-matrice td.sel { outline: 3px solid var(--focus); }
.p-detail { background: var(--papier); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.p-directs { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.p-directs li { background: var(--papier); border-radius: 8px; padding: 6px 10px; }
.p-directs li.ici { background: #FFF4D6; border: 2px solid var(--or); }
.p-actions { display: flex; gap: 8px; }
.p-liste { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
/* Tiroir */
.p-voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 20; }
.p-tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(880px, 92vw); background: var(--papier); z-index: 21; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: -10px 0 30px rgba(0, 0, 0, .2); }
.p-t-haut { display: flex; justify-content: space-between; align-items: center; }
.p-onglets { display: flex; gap: 6px; }
.p-faq dt { font-weight: 700; margin-top: 10px; }
.p-faq dd { margin: 2px 0 0; }
@media (max-width: 1180px) { .p-grille { grid-template-columns: 280px minmax(0, 1fr); } .p-droite { grid-column: 1 / -1; } }
/* Le grand bouton du chrono : impossible à rater quand la manche attend son top départ */
.btn.depart { background: #1F8A5B; border-color: #1F8A5B; color: #fff; font-weight: 700; }
.p-barre .btn.depart { background: #2FB577; border-color: #2FB577; color: #fff; animation: battre 1.6s ease-in-out infinite; }
.btn.depart.grand { font-size: 22px; padding: 14px 22px; width: 100%; animation: battre 1.6s ease-in-out infinite; }
@keyframes battre { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .55); } 50% { box-shadow: 0 0 0 10px rgba(31, 138, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .btn.depart, .btn.depart.grand { animation: none; } }
.p-depart { background: #FFF4D6; border: 2px solid var(--or); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.p-depart.pause { background: var(--orange-f); }
.p-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-fin .btn { min-height: 52px; font-size: 16px; }
.p-fichiers { flex-wrap: wrap; }
.p-fichiers .btn { white-space: nowrap; }
/* Le déroulé prévu */
.p-deroule { background: var(--papier); border-radius: 10px; padding: 8px 10px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
/* Les réponses en direct */
.p-fil-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.p-fil-haut select { font-size: 14px; padding: 4px 8px; }
.p-fil { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; max-height: 420px; overflow-y: auto; }
.p-fil li { display: grid; grid-template-columns: 46px 14px 96px 1fr; gap: 6px; align-items: baseline; padding: 4px 6px; border-bottom: 1px solid var(--trait); }
.p-essais { padding-left: 22px; font-size: 14px; }
.p-clic { cursor: pointer; }
.p-clic:hover { background: var(--creme); }
.p-matrice tbody th.p-clic:hover { text-decoration: underline; }
.p-notion { font-style: italic; }
/* La fiche : la carte comme l'équipe la lit */
.p-fiche { position: fixed; top: 6vh; left: 50%; transform: translateX(-50%); width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; background: var(--papier); z-index: 31;
  border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
[data-zone="fiche"] .p-voile { z-index: 30; }
.p-carte { background: var(--carte); border: 1px solid var(--trait); border-left: 6px solid var(--accent); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.p-carte .c-haut { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--doux); flex-wrap: wrap; }
.p-carte .c-qui { font-weight: 700; color: var(--encre); }
.p-carte .c-texte { font-size: 17.5px; line-height: 1.4; color: var(--encre); }
.p-carte .c-note { font-size: 14.5px; background: var(--carte2); border-radius: 8px; padding: 8px 10px; }
.p-carte .c-label { font-size: 14.5px; color: var(--doux); }
.p-carte .c-anti { background: var(--bleu-f); border-radius: 8px; padding: 8px 10px; font-size: 14.5px; }
.p-reponse { background: var(--vert-f); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.p-reponse h3 { margin-top: 0; }
.p-oui-non { white-space: nowrap; }
.p-matrice.large thead th:first-child, .p-matrice.large tbody th { min-width: 110px; }