/* Mémoire : charte Oteria adaptée à une interface métier (brand/oteria/interface).
   Règles : le rose marque la marque, la sélection et l'action, jamais une alerte ; on empile verticalement,
   on laisse respirer ; contraste AA, focus clavier visible. */

@font-face { font-family: "Fira Sans"; src: url(/fonts/FiraSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(/fonts/FiraSans-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(/fonts/FiraSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url(/fonts/FiraCode-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url(/fonts/FiraCode-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cy Grotesk"; src: url(/fonts/CyGrotesk-KeyBold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --rose: #ff2e66;
  --rose-pale: #ffd1de;
  --encre: #1c1c1c;
  --texte: #454545;
  --texte-2: #636363;
  --fond: #f5f5f5;
  --blanc: #ffffff;
  --trait: #e2e2e2;
  --trait-fort: #c9c9c9;
  --anomalie: #b3001f;
  --anomalie-fond: #fbe9ec;
  --attention: #9a4a00;
  --attention-fond: #fff1e0;
  --valide: #0e7c5a;
  --valide-fond: #e3f4ec;
  --neutre-fond: #efefef;
  --focus: var(--rose);
  --titres: "Cy Grotesk", "Fira Sans", Arial, sans-serif;
  --texte-police: "Fira Sans", Arial, sans-serif;
  --mono: "Fira Code", ui-monospace, monospace;
  --espace: 32px;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.6 var(--texte-police); }
h1, h2, h3 { color: var(--encre); margin: 0; }
h1 { font: 700 clamp(28px, 2.8vw, 40px)/1.1 var(--titres); letter-spacing: -0.5px; }
h2 { font: 700 21px/1.25 var(--titres); }
h3 { font: 600 17px/1.3 var(--texte-police); }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
a { color: var(--encre); text-underline-offset: 3px; }
code { font: 0.88em var(--mono); background: var(--neutre-fond); padding: 1px 5px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
blockquote { margin: 10px 0 0; padding: 10px 16px; border-left: 3px solid var(--trait-fort); background: #fafafa; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 10; background: var(--blanc); padding: 8px 12px; }

/* ---------- Mise en page ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.barre { background: var(--encre); color: #ddd; padding: 24px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marque { display: flex; align-items: center; gap: 12px; color: var(--blanc); text-decoration: none; margin: 0 6px 20px; }
.marque span { font: 700 20px/1.1 var(--titres); display: flex; flex-direction: column; }
.marque small { font: 11px var(--mono); color: #b5b5b5; letter-spacing: .5px; margin-top: 4px; }
.symbole { width: 30px; height: 30px; fill: var(--blanc); flex: none; }
.symbole-point { fill: var(--rose); }
.marque--claire { color: var(--encre); margin: 0; }
.marque--claire .symbole { fill: var(--encre); }
.marque--claire small { color: var(--texte-2); }
.barre nav { display: flex; flex-direction: column; gap: 2px; }
.barre-titre { font: 11px var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: #a8a8a8; margin: 18px 10px 6px; }
.barre-lien { color: #ececec; text-decoration: none; padding: 9px 12px; border-left: 3px solid transparent; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.barre-lien:hover { background: #2a2a2a; }
.barre-lien[aria-current="page"] { border-left-color: var(--rose); background: #2a2a2a; color: var(--blanc); font-weight: 600; }
.compteur { background: var(--rose); color: var(--encre); font: 600 12px var(--mono); padding: 1px 8px; }
.barre-pied { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid #333; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.barre-pied strong { color: var(--blanc); display: block; font-size: 14px; }
.barre-pied small { color: #b5b5b5; font: 11px var(--mono); word-break: break-all; }
.lien-discret { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }

.espace { min-width: 0; }
main { padding: 44px clamp(18px, 3vw, 64px) 96px; display: flex; flex-direction: column; gap: var(--espace); }
.bandeau { margin: 0; padding: 10px clamp(18px, 3vw, 64px); background: var(--neutre-fond); border-bottom: 1px solid var(--trait-fort); font-size: 14px; }
.bandeau--alerte { background: var(--anomalie-fond); color: var(--anomalie); }

.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.entete-texte { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.entete-description { color: var(--texte-2); font-size: 17px; margin: 0; }
.surtitre { font: 12px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--texte-2); margin: 0; }
.surtitre a { color: inherit; }
.aide { font-size: 14px; color: var(--texte-2); font-weight: 400; }
.sous { display: block; font-size: 13px; color: var(--texte-2); margin-top: 2px; }
.mono { font-family: var(--mono); font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.vide { color: var(--texte-2); font-style: italic; margin: 0; }

.pile { display: flex; flex-direction: column; gap: var(--espace); }
.pile--serree { gap: 16px; }
.carte { background: var(--blanc); border: 1px solid var(--trait); padding: 32px 36px; min-width: 0; }
.section-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-tete .aide { margin-top: 6px; max-width: 70ch; }
.defile { overflow-x: auto; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.separateur { border: 0; border-top: 1px solid var(--trait); margin: 28px 0; }

/* Onglets d'ancrage du dossier */
.onglets { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; flex-wrap: wrap; background: var(--fond); padding: 12px 0; border-bottom: 1px solid var(--trait-fort); }
.onglets a { text-decoration: none; padding: 8px 14px; font-size: 15px; border: 1px solid transparent; }
.onglets a:hover { background: var(--blanc); border-color: var(--trait-fort); }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--encre); background: var(--rose); color: var(--encre); padding: 11px 20px; font: 600 15px var(--texte-police); cursor: pointer; text-decoration: none; white-space: nowrap; }
.bouton:hover { background: #ff5a86; }
.bouton--secondaire { background: var(--blanc); }
.bouton--secondaire:hover { background: var(--rose-pale); }
.bouton--petit { padding: 7px 14px; font-size: 14px; }
.bouton--danger { background: var(--blanc); border-color: var(--anomalie); color: var(--anomalie); }
.bouton--danger:hover { background: var(--anomalie-fond); }
button.bouton--danger { background: var(--anomalie); color: var(--blanc); }
button.bouton--danger:hover { background: #8f0019; }
.section--danger { border-left: 4px solid var(--anomalie); }

/* ---------- Messages ---------- */
.message { padding: 14px 18px; border-left: 4px solid var(--valide); background: var(--valide-fond); margin: 0; }
.message--alerte { border-left-color: var(--anomalie); background: var(--anomalie-fond); color: var(--encre); }
.message--info { border-left-color: var(--encre); background: var(--blanc); }
.message ul { margin: 8px 0 0; padding-left: 22px; }
.message p { margin: 6px 0 0; }

/* ---------- États ---------- */
.etat { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--mono); padding: 3px 9px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.etat--valide { color: var(--valide); background: var(--valide-fond); }
.etat--rendu { color: var(--encre); background: var(--blanc); border-color: var(--encre); }
.etat--attendu { color: var(--texte-2); background: var(--blanc); border-color: var(--trait-fort); }
.etat--attendu::before { background: transparent; border: 1px solid currentColor; }
.etat--avenir { color: var(--texte-2); background: var(--neutre-fond); }
.etat--avenir::before { display: none; }
.etat--retard { color: var(--attention); background: var(--attention-fond); }
.etat--anomalie { color: var(--anomalie); background: var(--anomalie-fond); }
.etat--anomalie::before { border-radius: 0; transform: rotate(45deg); }
.etat--anomalie-discret { color: var(--anomalie); background: var(--blanc); border-color: var(--anomalie); }
.etat--anomalie-discret::before { display: none; }
.etats { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tag { font: 500 12px var(--mono); padding: 2px 8px; border: 1px solid var(--trait-fort); white-space: nowrap; }
.tag--benevole { border-style: dashed; }
.pastille-nouveau { font: 600 12px var(--mono); background: var(--rose-pale); color: var(--encre); padding: 2px 8px; }

/* ---------- Chiffres, tableaux, listes ---------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.chiffre { background: var(--blanc); border: 1px solid var(--trait); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.chiffre strong { font: 700 34px/1 var(--titres); color: var(--encre); }
.chiffre span { font-size: 14px; color: var(--texte-2); }
.chiffre--anomalie strong { color: var(--anomalie); }
.chiffre--attention strong { color: var(--attention); }
.tableau { border-collapse: collapse; width: 100%; background: var(--blanc); font-size: 15px; }
.tableau th { text-align: left; font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .8px; color: var(--texte-2); padding: 14px 14px; border-bottom: 1px solid var(--trait-fort); background: #fafafa; white-space: nowrap; }
.tableau td { padding: 16px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau tbody tr:hover td { background: #fcf7f9; }
.tableau--compact td { padding: 10px 12px; }
.tableau td.avant { color: var(--texte-2); text-decoration: line-through; }
.tableau .nowrap { white-space: nowrap; }
.carte > .tableau, .carte > .defile > .tableau { margin: 0; }
.filtres { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: var(--blanc); border: 1px solid var(--trait); padding: 16px 20px; }
.filtres input[type=search] { flex: 1 1 260px; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: 18px 0; border-bottom: 1px solid var(--trait); display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.liste > li:first-child { padding-top: 0; }
.liste > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ping--vu { opacity: .7; }
.definitions { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 14px 28px; margin: 0; }
.definitions dd, .voix, blockquote, .bloc p { overflow-wrap: anywhere; }
.bloc, .blocs { min-width: 0; }
.definitions dt { font-weight: 600; color: var(--encre); }
.definitions dd { margin: 0; white-space: pre-line; }

/* ---------- Formulaires : verticaux, largeur lisible ---------- */
.formulaire { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.formulaire--large { max-width: none; }
.champ { display: flex; flex-direction: column; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.champ > .aide { margin-top: -2px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { padding: 11px 14px; border: 1px solid var(--trait-fort); background: var(--blanc); min-height: 48px; color: var(--encre); width: 100%; max-width: 100%; }
input[type=file] { padding: 10px; border: 1px dashed var(--trait-fort); background: #fafafa; width: 100%; }
.filtres select, .filtres input, .ligne-champs input, .ligne-champs select { width: auto; }
input:focus, select:focus, textarea:focus { border-color: var(--encre); outline-offset: -2px; }
textarea { resize: vertical; min-height: 120px; }
.champ--court > input:not([type=checkbox]):not([type=radio]):not([type=file]), .champ--court > select { max-width: 260px; }
label, legend { font-weight: 600; color: var(--encre); font-size: 15px; }
label .aide, legend .aide { font-weight: 400; margin-left: 6px; }
legend { margin-bottom: 10px; padding: 0; }
.case { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--texte); }
.case input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.choix { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.choix--ligne { flex-direction: row; flex-wrap: wrap; }
.choix--ligne .choix-option { flex: 1 1 200px; }
.choix-option { border: 1px solid var(--trait-fort); padding: 16px 18px; background: var(--blanc); font-weight: 400; cursor: pointer; display: flex; gap: 14px; align-items: flex-start; }
.choix-option input { margin-top: 5px; flex: none; }
.choix-option strong { display: block; color: var(--encre); }
.choix-option:has(input:checked) { border-color: var(--encre); background: var(--rose-pale); }
.bloc-conditionnel { display: none; flex-direction: column; gap: 24px; border-left: 3px solid var(--encre); padding: 4px 0 4px 24px; }
.formulaire-kickoff:has(#format-tiers:checked) .bloc-tiers,
.formulaire-kickoff:has(#format-entrepreneuriat:checked) .bloc-entrepreneuriat { display: flex; }
.ligne-champs { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ligne-champs .champ { flex: 1 1 180px; }
.edition-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.edition-liste > li { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--trait); }
.edition-liste > li:first-child { padding-top: 0; }
.edition-liste .numero { font: 500 12px var(--mono); color: var(--texte-2); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- Sujet, versions ---------- */
.versions { list-style: none; margin: 0; padding: 0; }
.versions > li { border-bottom: 1px solid var(--trait); padding: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.versions > li:first-child { padding-top: 0; }
.versions > li:last-child { border-bottom: 0; padding-bottom: 0; }
details > summary { cursor: pointer; font-weight: 500; }
details[open] > summary { margin-bottom: 14px; }
.titre-sujet { font: 700 24px/1.2 var(--titres); color: var(--encre); margin: 6px 0 20px; }

/* ---------- Accueil : frise, prochaine action ---------- */
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.frise li { position: relative; padding: 24px 10px 0 0; font-size: 13px; color: var(--texte-2); }
.frise li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--trait-fort); }
.frise li::after { content: ""; position: absolute; top: 1px; left: 0; width: 14px; height: 14px; background: var(--blanc); border: 2px solid var(--trait-fort); }
.frise li strong { display: block; color: var(--encre); font-weight: 600; font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
.frise .frise-terminee::before, .frise .frise-terminee::after { background: var(--encre); border-color: var(--encre); }
.frise .frise-en_cours::after { background: var(--rose); border-color: var(--encre); }
.frise .frise-en_cours strong { text-decoration: underline 2px var(--rose); text-underline-offset: 4px; }
.prochaine { border: 1px solid var(--encre); background: var(--blanc); padding: 28px 32px; display: flex; justify-content: space-between; gap: 24px; align-items: center; box-shadow: 8px 8px 0 var(--rose); }
.prochaine h2 { font-size: 24px; margin: 6px 0 8px; }
.prochaine--importante { border-left: 8px solid var(--attention); }
.annonces { display: flex; flex-direction: column; gap: 16px; }
.annonce { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--encre); padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; }
.annonce--lue { border-left-color: var(--trait-fort); }
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.resume .carte { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.resume h2 { font-size: 18px; }

/* ---------- Blocs (livrables, entretiens) ---------- */
.bloc { border: 1px solid var(--trait); border-left: 4px solid var(--trait-fort); padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; background: var(--blanc); }
.bloc--actif { border-left-color: var(--encre); }
.bloc--alerte { border-left-color: var(--attention); }
.bloc-tete { display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start; gap: 16px; flex-wrap: wrap; }
.bloc-tete h3 { font: 700 19px/1.25 var(--titres); }
.blocs { display: flex; flex-direction: column; gap: 20px; }
.voix { display: flex; flex-direction: column; gap: 12px; }
.voix > div { background: #fafafa; border: 1px solid var(--trait); padding: 16px 20px; }
.voix .qui { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 1px; color: var(--texte-2); display: block; margin-bottom: 8px; }
.depot { border-top: 1px solid var(--trait); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.fichiers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.alertes-liste { display: flex; flex-direction: column; gap: 12px; }
.alerte-ligne { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-left: 4px solid var(--attention); background: var(--attention-fond); flex-wrap: wrap; }
.alerte-ligne--rouge { border-left-color: var(--anomalie); background: var(--anomalie-fond); }

/* ---------- Connexion ---------- */
body.connexion { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.connexion-carte { background: var(--blanc); border: 1px solid var(--trait); padding: 44px; width: min(500px, 100%); display: flex; flex-direction: column; gap: 24px; }
.connexion-carte .formulaire { gap: 18px; }
.connexion-carte h1 { margin: 0; }
.connexion-formulaire { display: flex; flex-direction: column; gap: 16px; }
.connexion-formulaire .bouton { margin-top: 6px; justify-content: center; }
.connexion-ou { display: flex; align-items: center; gap: 14px; margin: -4px 0; color: var(--texte-2); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: 1.2px; }
.connexion-ou::before, .connexion-ou::after { content: ""; flex: 1; border-top: 1px solid var(--trait); }
.bouton-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--encre); background: var(--blanc); color: var(--encre); font-weight: 600; text-decoration: none; }
.bouton-google:hover { background: var(--fond); box-shadow: 4px 4px 0 var(--rose); }
.bouton-google-logo { width: 20px; height: 20px; flex: none; }
.connexion-google-aide { margin: -14px 0 0; text-align: center; }
.demo { border-top: 1px solid var(--trait); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .barre { position: static; height: auto; padding: 14px 12px; }
  .marque { margin-bottom: 10px; }
  .barre nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .barre-titre { display: none; }
  .barre-lien { padding: 6px 10px; font-size: 14px; border-left: 0; border-bottom: 3px solid transparent; }
  .barre-lien[aria-current="page"] { border-bottom-color: var(--rose); }
  .barre-pied { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; }
  h1 { overflow-wrap: anywhere; }
  .entete { align-items: flex-start; }
  main { padding: 28px 18px 64px; --espace: 24px; }
  .bandeau { padding: 10px 18px; }
  .carte { padding: 22px 20px; }
  .definitions { grid-template-columns: 1fr; gap: 4px; }
  .definitions dd { margin-bottom: 10px; }
  .frise { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .prochaine { flex-direction: column; align-items: flex-start; }
  .tableau--empilable thead { display: none; }
  .tableau--empilable tr { display: block; border-bottom: 1px solid var(--trait-fort); padding: 10px 0; }
  .tableau--empilable td { display: block; border: 0; padding: 6px 14px; }
}

/* Compléments */
.carte--nue { padding: 0; }
.mini { display: grid; grid-template-columns: auto auto; gap: 6px 10px; margin: 0; align-items: center; justify-content: start; }
.mini dt { font-size: 13px; color: var(--texte-2); }
.mini dd { margin: 0; }
.liste-voeux { margin: 0; padding-left: 20px; }
.etats .etat { white-space: normal; text-align: left; align-items: flex-start; }
.etats .etat::before { margin-top: 6px; }
.section h3 { margin: 24px 0 10px; }
.section hr + h3 { margin-top: 0; }

/* ---------- Grands écrans : on occupe toute la largeur ---------- */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace); align-items: stretch; }
/* Cartes côte à côte : même hauteur. Une pile occupe toute la hauteur et sa dernière carte s'étire. */
.colonnes > .carte, .colonnes > .pile { height: 100%; }
.colonnes > .pile > :last-child { flex: 1 1 auto; }
.resume { align-items: stretch; }
.grille-cartes { align-items: stretch; }
.colonnes > * { min-width: 0; }
@media (min-width: 1380px) {
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonnes--large-etroite { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .blocs--grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: stretch; }
  .blocs--grille > .bloc { height: 100%; }
  .chiffres { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 2000px) {
  .colonnes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root { --espace: 40px; }
}
.compteur { margin-left: 8px; }
.blocs--grille > .bloc > :last-child:not(:first-child) { margin-top: auto; }

/* Utilisateurs */
.onglets--filtres { position: static; }
.onglets a[aria-current="page"] { background: var(--blanc); border-color: var(--encre); font-weight: 600; }
.tag--role { background: var(--blanc); }
.formulaire-utilisateur:has(#role-etudiant:checked) .bloc-etudiant,
.formulaire-utilisateur:has(#role-mentor:checked) .bloc-mentor,
.formulaire-roles:has(#coche-etudiant:checked) .bloc-etudiant,
.formulaire-roles:has(#coche-mentor:checked) .bloc-mentor { display: flex; }

/* Formulaire Kick Off (calqué sur le Google Forms) */
.section-formulaire { border: 0; border-top: 1px solid var(--trait); padding: 24px 0 0; margin: 0; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.section-formulaire:first-child { border-top: 0; padding-top: 0; }
.section-formulaire-titre { font: 700 19px/1.25 var(--titres); color: var(--encre); padding: 0; margin-bottom: 4px; }
.bloc-conditionnel > .section-formulaire:first-child { border-top: 1px solid var(--trait); padding-top: 24px; }
.formulaire-kickoff .bloc-conditionnel { border-left: 0; padding: 0; gap: 32px; }
.formulaire-kickoff:has(#format-rd:checked) .bloc-rd { display: flex; }
.requis { color: var(--anomalie); font-weight: 600; }
.echelle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.echelle-note { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 500; padding: 8px 12px; border: 1px solid var(--trait-fort); background: var(--blanc); cursor: pointer; }
.echelle-note:has(input:checked) { border-color: var(--encre); background: var(--rose-pale); }
.choix-autre { align-items: center; flex-wrap: wrap; }
.choix-autre input[type=text] { flex: 1 1 200px; min-height: 40px; }
.liste-puces { margin: 6px 0 0; padding-left: 22px; }
.liste-puces li { margin: 2px 0; }
.choix-option .aide { display: block; margin-top: 2px; }
.identite-kickoff { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; background: var(--fond); border: 1px solid var(--trait); padding: 12px 16px; margin: 0; }
.lecteur-pdf { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 85vh; height: auto; border: 1px solid var(--trait); background: var(--fond); }
@media (max-width: 900px) { .lecteur-pdf { height: 70vh; } }
.liste-livrables > li.ligne-livrable { display: grid; grid-template-columns: minmax(0, 1fr) 130px 170px 130px 170px; gap: 24px; align-items: center; justify-content: stretch; }
.ligne-livrable > .actions { justify-content: flex-end; }
.ligne-livrable-etat { justify-self: start; }
.ligne-livrable h3 { margin: 2px 0 4px; font: 700 19px/1.25 var(--titres); }
.ligne-livrable p { margin: 0; }
.bouton:disabled, .bouton[disabled] { opacity: .45; cursor: not-allowed; background: var(--trait); border-color: var(--trait-fort); }
@media (max-width: 1100px) { .liste-livrables > li.ligne-livrable { grid-template-columns: 1fr 1fr; } .ligne-livrable-titre { grid-column: 1 / -1; } .ligne-livrable > .actions { justify-content: flex-start; } }
.barre-titre--bientot { display: flex; align-items: center; gap: 8px; color: #6f6f6f; }
.bientot { font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--encre); background: #8a8a8a; padding: 2px 6px; }
.barre-lien--inactif { color: #6f6f6f; cursor: not-allowed; }
.barre-lien--inactif:hover { background: none; }
@media (max-width: 900px) { .barre-titre--bientot { display: none; } }
.publics { display: flex; flex-direction: column; gap: 10px; }
.publics-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.publics-ligne select { width: auto; }
.md { display: flex; flex-direction: column; gap: 10px; }
.md p, .md ul, .md ol { margin: 0; }
.md ul, .md ol { padding-left: 22px; }
.md .md-titre { margin: 6px 0 0; font: 700 18px/1.3 var(--titres); }
.md h4.md-titre { font-size: 16px; }
.md h5.md-titre { font-size: 15px; }
.md pre { background: var(--fond); border: 1px solid var(--trait); padding: 12px 14px; overflow-x: auto; margin: 0; }
.md code { font: 13px var(--mono); }
.md blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--trait-fort); }
.piece-pdf { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.piece-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.piece-tete .actions { display: flex; gap: 16px; }
.piece-nom { font: 13px var(--mono); color: var(--texte-2); }
.pieces { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.formulaire input.depot-fichiers, .depot-fichiers { width: 100%; padding: 28px 20px; border: 2px dashed var(--trait-fort); background: var(--fond); cursor: pointer; }
.formulaire input.depot-fichiers:hover, .depot-fichiers:hover { border-color: var(--encre); }
.annonce-publiee details summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.annonce-publiee details[open] summary { margin-bottom: 12px; }
.annonce-publiee { display: block; }
.md + .lecteur-pdf { margin-top: 28px; }
.md .md-titre:not(:first-child) { margin-top: 14px; }
.section--epinglee { border-top: 4px solid var(--rose); }
.nouvelle-annonce > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.nouvelle-annonce > summary::-webkit-details-marker { display: none; }
.nouvelle-annonce > summary::before { content: '+'; font: 700 22px var(--titres); }
.nouvelle-annonce[open] > summary::before { content: '−'; }
.nouvelle-annonce[open] > summary { margin-bottom: 20px; }
.texte-anomalie { color: var(--anomalie); }

/* ---------- Guide du mentor : page éditoriale ---------- */
.rose { color: var(--rose); }
.guide-hero { position: relative; background: var(--encre); color: #d8d8d8; padding: 56px 56px 44px; display: flex; flex-direction: column; gap: 18px; box-shadow: 10px 10px 0 var(--rose); margin-bottom: 18px; }
.guide-hero::before, .guide-hero::after { content: ""; position: absolute; width: 34px; height: 34px; border: 0 solid var(--rose); }
.guide-hero::before { top: 20px; left: 20px; border-top-width: 8px; border-left-width: 8px; }
.guide-hero::after { top: 20px; right: 20px; border-top-width: 8px; border-right-width: 8px; }
.guide-hero h1 { color: var(--blanc); font-size: clamp(32px, 4vw, 56px); line-height: 1.02; max-width: 22ch; }
.guide-hero-sur { font: 500 12px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rose); margin: 0; }
.guide-hero-chapo { font-size: 18px; line-height: 1.6; max-width: 62ch; color: #e6e6e6; margin: 0; }
.guide-chiffres { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #3a3a3a; }
.guide-chiffres li { padding: 18px 18px 0 0; display: flex; flex-direction: column; gap: 2px; }
.guide-chiffres li + li { padding-left: 18px; border-left: 1px solid #3a3a3a; }
.guide-chiffres strong { font: 700 26px/1.1 var(--titres); color: var(--rose); }
.guide-chiffres span { font: 13px var(--mono); color: #b5b5b5; }
.guide-hero-actions { display: flex; gap: 12px; margin-top: 6px; }
.guide-hero-actions:empty { display: none; }
.guide-hero-ok { font: 500 13px var(--mono); color: var(--encre); background: var(--rose-pale); padding: 6px 12px; }

.guide-corps { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 40px; }
.guide-sommaire { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; }
.guide-sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--trait); }
.guide-sommaire a { display: flex; gap: 10px; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--texte); font-size: 15px; }
.guide-sommaire a span { font: 12px/22px var(--mono); color: var(--texte-2); }
.guide-sommaire a:hover { border-left-color: var(--rose); color: var(--encre); }
.guide-sections { display: flex; flex-direction: column; gap: 64px; min-width: 0; max-width: 1040px; }
.guide-section { display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 24px; }
.guide-titre { display: flex; gap: 18px; align-items: flex-start; }
.guide-titre h2 { font-size: 30px; line-height: 1.1; }
.guide-titre .aide { margin: 8px 0 0; font-size: 16px; max-width: 70ch; }
.guide-num { font: 700 15px/1 var(--mono); color: var(--encre); background: var(--rose); padding: 9px 9px 8px; flex: none; }

.guide-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-carte { background: var(--blanc); border: 1px solid var(--trait); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.guide-carte h3 { font: 700 19px/1.25 var(--titres); }
.guide-carte p { margin: 0; }
.guide-carte--oui { border-top: 6px solid var(--rose); }
.guide-carte--non { border-top: 6px solid var(--encre); }
.guide-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-liste li { position: relative; padding-left: 26px; }
.guide-liste li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; background: var(--rose); }
.guide-carte--non .guide-liste li::before { background: none; width: 12px; height: 2px; top: 12px; background: var(--encre); }
.guide-liste--fine { gap: 6px; }
.guide-liste--fine li::before { width: 7px; height: 7px; top: 9px; }

.guide-frise { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.guide-frise::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--trait-fort); }
.guide-frise > li { position: relative; background: var(--blanc); border: 1px solid var(--trait); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.guide-frise > li::before { content: ""; position: absolute; left: -34px; top: 22px; width: 18px; height: 18px; background: var(--rose); border: 3px solid var(--fond); box-sizing: content-box; margin-left: -1px; }
.guide-frise h3 { font: 700 19px/1.25 var(--titres); }
.guide-frise p { margin: 0; }
.guide-quand { font: 500 12px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: var(--texte-2); }
.guide-outils { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px !important; }
.guide-outils a { font: 500 13px var(--mono); color: var(--encre); background: var(--rose-pale); padding: 4px 10px; text-decoration: none; }
.guide-outils a::after { content: " \2197"; }
.guide-outils a:hover { background: var(--rose); }

.guide-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: etape; }
.guide-etapes li { background: var(--blanc); border: 1px solid var(--trait); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.guide-etapes h3 { font: 700 19px/1.25 var(--titres); }
.guide-etapes p { margin: 0; }
.guide-etape-num { font: 700 44px/1 var(--titres); color: var(--rose); }
.guide-encart { border: 1px solid var(--encre); background: var(--blanc); padding: 24px 28px; box-shadow: 8px 8px 0 var(--rose-pale); display: flex; flex-direction: column; gap: 8px; }
.guide-encart p { margin: 0; }
.guide-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }

.guide-section--sombre { background: var(--encre); color: #d8d8d8; padding: 44px 48px; }
.guide-section--sombre h2 { color: var(--blanc); }
.guide-section--sombre .aide, .guide-section--sombre .surtitre { color: #b5b5b5; }
.guide-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #3a3a3a; border: 1px solid #3a3a3a; }
.guide-tuiles li { background: var(--encre); padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.guide-tuiles strong { font: 700 18px/1.2 var(--titres); color: var(--rose); }
.guide-tuiles span { font-size: 15px; color: #d8d8d8; }
.guide-pourquoi-titre { margin-top: 6px; }
.guide-pourquoi { list-style: none; margin: -10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-pourquoi li { border: 1px solid var(--rose); color: var(--blanc); padding: 8px 14px; font-weight: 500; }
.guide-note { margin: 0; color: #b5b5b5; font-size: 15px; }

.guide-regle { background: var(--rose); color: var(--encre); padding: 26px 30px; display: flex; flex-direction: column; gap: 6px; }
.guide-regle .surtitre, .guide-regle .aide { color: var(--encre); }
.guide-regle-texte { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--titres); margin: 0; }

.guide-signaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-signaux li { background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--encre); padding: 12px 16px; }
.guide-signaux li:last-child { border-left-color: var(--anomalie); }
.guide-escalier { list-style: none; margin: -10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.guide-escalier li { display: flex; align-items: center; gap: 12px; background: var(--blanc); border: 1px solid var(--trait); padding: 14px 16px; font-weight: 500; color: var(--encre); }
.guide-escalier li + li { border-left: 0; }
.guide-escalier span { font: 700 14px/1 var(--mono); background: var(--encre); color: var(--blanc); padding: 6px 8px; }

.guide-charte { background: var(--encre); color: #d8d8d8; padding: 48px 52px; box-shadow: 10px 10px 0 var(--rose); }
.guide-charte h2 { color: var(--blanc); font-size: 30px; }
.guide-engagements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #3a3a3a; border: 1px solid #3a3a3a; }
.guide-engagements li { background: var(--encre); padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; }
.guide-engagements span { font: 700 24px/1 var(--titres); color: var(--rose); flex: none; min-width: 34px; }
.guide-engagements p { margin: 0; color: #e6e6e6; }
.guide-charte-form { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; border-top: 1px solid #3a3a3a; padding-top: 24px; }
.guide-charte-form .case { color: var(--blanc); font-weight: 500; }
.guide-charte-etat { margin: 0; border-top: 1px solid #3a3a3a; padding-top: 22px; color: #d8d8d8; }
.guide-charte-etat--ok { color: var(--rose); font: 500 15px var(--mono); }
.guide-mot { border-left: 6px solid var(--rose); background: var(--blanc); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }

/* Guide : être un bon mentor, entretien type, relecture, situations. */
.guide-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--trait); background: var(--blanc); }
.guide-style { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.guide-style + .guide-style { border-left: 1px solid var(--trait); }
.guide-style h3 { font: 700 20px/1.2 var(--titres); }
.guide-style p { margin: 0; }
.guide-style:nth-child(1) { border-top: 6px solid var(--encre); }
.guide-style:nth-child(2) { border-top: 6px solid var(--rose); }
.guide-style:nth-child(3) { border-top: 6px solid var(--rose-pale); }
.guide-fleche { margin: -8px 0 0; padding-left: 16px; border-left: 3px solid var(--rose); color: var(--encre); font-weight: 500; }
.guide-reflexes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: reflexe; }
.guide-reflexes li { background: var(--blanc); border: 1px solid var(--trait); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; counter-increment: reflexe; }
.guide-reflexes li::before { content: counter(reflexe, decimal-leading-zero); font: 700 28px/1 var(--titres); color: var(--rose); }
.guide-reflexes h3 { font: 700 18px/1.25 var(--titres); }
.guide-reflexes p { margin: 0; }
.guide-pieges { background: var(--encre); color: var(--blanc); padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.guide-pieges .surtitre { color: var(--rose); }
.guide-pieges ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guide-pieges li { border: 1px solid #555; padding: 7px 12px 7px 32px; position: relative; }
.guide-pieges li::before, .guide-pieges li::after { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 2px; background: var(--rose); }
.guide-pieges li::before { transform: rotate(45deg); }
.guide-pieges li::after { transform: rotate(-45deg); }

.guide-questions { background: var(--rose-pale); padding: 14px 18px; margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.guide-questions .surtitre { color: var(--encre); }
.guide-questions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.guide-questions li { color: var(--encre); font-style: italic; }
.guide-questions li::before { content: "« "; font-style: normal; }
.guide-questions li::after { content: " »"; font-style: normal; }
.guide-questions--large { padding: 22px 26px; margin-top: 0; }
.guide-questions--large ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.guide-questions--large li { font-size: 17px; }

.guide-deroule { display: flex; flex-direction: column; gap: 10px; }
.guide-barre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(160px, 5fr) minmax(0, 20fr) minmax(0, 15fr) minmax(160px, 5fr); gap: 3px; }
.guide-barre li { background: var(--blanc); border: 1px solid var(--trait); border-top: 8px solid var(--rose); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-barre li:nth-child(2) { border-top-color: var(--encre); }
.guide-barre li:nth-child(3) { border-top-color: var(--rose); }
.guide-barre li:nth-child(4) { border-top-color: var(--encre); }
.guide-barre-min { font: 500 13px var(--mono); color: var(--texte-2); }
.guide-barre strong { font: 700 16px/1.25 var(--titres); color: var(--encre); }
.guide-barre-texte { font-size: 14px; line-height: 1.45; }

.guide-relire { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.guide-temps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--trait); background: var(--blanc); }
.guide-temps > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 20px 24px; }
.guide-temps > li + li { border-top: 1px solid var(--trait); }
.guide-temps h3 { font: 700 20px/1.2 var(--titres); }
.guide-temps > li:nth-child(2) h3 { color: var(--rose); }
.guide-modele { border: 1px solid var(--encre); background: var(--blanc); padding: 24px 26px; box-shadow: 8px 8px 0 var(--rose); display: flex; flex-direction: column; gap: 12px; }
.guide-modele dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-modele dt { font: 700 16px/1.25 var(--titres); color: var(--encre); }
.guide-modele dd { margin: 2px 0 0; padding: 8px 12px; background: var(--fond); border-left: 3px solid var(--trait-fort); font: 14px/1.5 var(--mono); }

.guide-situations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.guide-situation { background: var(--blanc); border: 1px solid var(--trait); }
.guide-situation summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; position: relative; font: 700 16px/1.3 var(--titres); color: var(--encre); }
.guide-situation summary::-webkit-details-marker { display: none; }
.guide-situation summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; background: var(--rose); color: var(--encre); font: 700 18px/1 var(--mono); }
.guide-situation[open] summary::after { content: "\2212"; background: var(--encre); color: var(--blanc); }
.guide-situation[open] { border-color: var(--encre); }
.guide-situation summary:hover { background: var(--rose-pale); }
.guide-situation .guide-liste { padding: 0 20px 18px; }

@media (max-width: 1100px) {
  .guide-reflexes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-relire { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .guide-styles, .guide-reflexes, .guide-situations, .guide-barre, .guide-questions--large ul { grid-template-columns: minmax(0, 1fr); }
  .guide-style + .guide-style { border-left: 0; }
  .guide-temps > li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Guide étudiant : compléments. */
.bouton--sombre { background: transparent; color: var(--blanc); border-color: #777; }
.bouton--sombre:hover { border-color: var(--rose); color: var(--rose); }
.guide-reflexes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-reflexes--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-avant-apres { background: var(--blanc); border: 1px solid var(--trait); padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.guide-avant-apres ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-avant-apres li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 0; align-items: stretch; }
.guide-theme { background: var(--neutre-fond); color: var(--texte-2); padding: 14px 16px; text-decoration: line-through; text-decoration-color: var(--rose); text-decoration-thickness: 2px; display: flex; align-items: center; position: relative; }
.guide-theme::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-left-color: var(--neutre-fond); border-right-width: 0; z-index: 1; }
.guide-q { background: var(--rose-pale); color: var(--encre); padding: 14px 16px 14px 26px; font-weight: 500; }
.guide-questions--coches li { font-style: normal; padding-left: 26px; position: relative; }
.guide-questions--coches li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; border: 2px solid var(--encre); background: var(--blanc); }
.guide-questions--coches li::after { content: none; }
.guide-methode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-methode .guide-etape-num { font-size: 32px; }
.guide-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 4px; }
.guide-etiquettes span { font: 500 12px var(--mono); border: 1px solid var(--trait-fort); padding: 3px 8px; color: var(--encre); }
.guide-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.guide-plan li { background: var(--blanc); border: 1px solid var(--trait); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.guide-plan li:nth-child(-n+3) { border-top: 6px solid var(--encre); }
.guide-plan li:nth-child(n+4) { border-top: 6px solid var(--rose); }
.guide-plan span { font: 700 30px/1 var(--titres); color: var(--rose); flex: none; min-width: 22px; }
.guide-plan h3 { font: 700 18px/1.25 var(--titres); }
.guide-plan p { margin: 4px 0 0; font-size: 15px; }
@media (max-width: 1100px) { .guide-reflexes--quatre, .guide-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .guide-reflexes--deux, .guide-reflexes--quatre, .guide-methode, .guide-plan { grid-template-columns: minmax(0, 1fr); }
  .guide-avant-apres li { grid-template-columns: minmax(0, 1fr); }
  .guide-theme::after { display: none; }
  .guide-q { padding-left: 16px; }
}

@media (max-width: 1100px) {
  .guide-corps { grid-template-columns: minmax(0, 1fr); }
  .guide-sommaire { position: static; }
  .guide-sommaire ol { display: flex; flex-wrap: wrap; border-left: 0; gap: 4px 16px; }
  .guide-sommaire a { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .guide-hero { padding: 48px 24px 32px; }
  .guide-chiffres, .guide-duo, .guide-trio, .guide-etapes, .guide-tuiles, .guide-signaux, .guide-escalier, .guide-engagements { grid-template-columns: minmax(0, 1fr); }
  .guide-chiffres li + li { padding-left: 0; border-left: 0; }
  .guide-escalier li + li { border-left: 1px solid var(--trait); border-top: 0; }
  .guide-section--sombre, .guide-charte { padding: 32px 22px; }
}

/* Liste déroulante à cases avec recherche (domaines du mentor). */
.libelle-champ { font-weight: 600; color: var(--encre); font-size: 15px; }
.libelle-champ .aide { font-weight: 400; margin-left: 6px; }
.multi { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.multi-boite > summary { list-style: none; cursor: pointer; border: 1px solid var(--trait-fort); background: var(--blanc); min-height: 48px; padding: 11px 44px 11px 14px; color: var(--encre); position: relative; }
.multi-boite > summary::-webkit-details-marker { display: none; }
.multi-boite > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: translateY(-70%) rotate(45deg); }
.multi-boite[open] > summary { border-color: var(--encre); }
.multi-boite[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.multi-panneau { margin-top: 6px; background: var(--blanc); border: 1px solid var(--encre); box-shadow: 8px 8px 0 var(--rose-pale); display: flex; flex-direction: column; }
.multi-recherche { border: 0 !important; border-bottom: 1px solid var(--trait) !important; }
.multi-vide { margin: 0; padding: 14px 16px; }
.multi-groupes { max-height: 380px; overflow-y: auto; padding: 6px 0 10px; }
.multi-groupe { border: 0; margin: 0; padding: 8px 16px 4px; }
.multi-groupe legend { font: 500 12px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--texte-2); padding: 4px 0 0; margin: 0 0 4px; }
.multi-groupe legend[data-compte]:not([data-compte=""])::after { content: attr(data-compte); margin-left: 8px; background: var(--rose); color: var(--encre); padding: 0 6px; letter-spacing: 0; }
.multi-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.multi-option { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--texte); padding: 5px 8px; margin: 0; cursor: pointer; font-size: 15px; }
.multi-option input { margin-top: 4px; width: 16px; height: 16px; flex: none; accent-color: var(--encre); }
.multi-option:hover { background: var(--fond); }
.multi-option:has(input:checked) { background: var(--rose-pale); color: var(--encre); }
.multi-option[hidden], .multi-groupe[hidden] { display: none; }
.multi-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.multi-puces:empty { display: none; }
.multi-puces li, .multi-puces button { font: 500 13px var(--mono); color: var(--encre); background: var(--rose-pale); padding: 4px 10px; border: 0; }
.multi-puces li:has(button) { padding: 0; background: none; }
.multi-puces button { cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.multi-puces button::after { content: "\00d7"; font-size: 15px; line-height: 1; }
.multi-puces button:hover { background: var(--rose); }
@media (max-width: 900px) { .multi-options { grid-template-columns: minmax(0, 1fr); } }

/* Sujets ouverts (mentor) : un projet par ligne */
.tableau--sujets td:first-child { min-width: 280px; }
.tableau--sujets .sous { line-height: 1.5; }
.tableau--sujets tr.ligne--active td { background: #fff4f7; }
.tableau--sujets tr.ligne--active td:first-child { box-shadow: inset 3px 0 0 var(--rose); }
.tableau-choix { min-width: 270px; }
.tableau-choix p { margin: 0 0 8px; }
.tableau-choix summary { cursor: pointer; font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.tableau-choix .formulaire { margin-top: 10px; gap: 12px; }