/* atelier.css — PERcours v3. Jetons de design du handoff Claude Design (design/README_HANDOFF.md, palette Summer breeze).
   Règles (v6.1) : fond d'application blanc par défaut (variantes rose, vert, gris au choix), zones de contenu délimitées par un anneau intérieur
   de 2 px dans la couleur du type (cartes) ou 1,5 px neutre (boutons) ; infobulles claires ;
   trois ombres seulement, rayons hiérarchisés 5·8·11·14, aucune police ni icône chargée depuis le réseau. */

@font-face { font-family: "Public Sans"; src: url("/static/polices/PublicSans-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/static/polices/PublicSans-Italic-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* neutres */
  --blanc: #FFFFFF; --fond: #F4F5F6; --rail: #F1F3F4; --filet: #ECEEF0; --anneau-neutre: #DFE3E6; --anneau-fort: #C2C8CD;
  --fond-application: #FFFFFF; /* fond de l'écran : blanc par défaut ; variantes ci-dessous (Apparence) */
  --titre: #12161A; --texte: #32373D; --secondaire: #5B646D; --discret: #666D75; --picto-inactif: #8A9199; --repere: #DCE0E3;
  --voile: rgba(20, 23, 26, .52);
  /* action = bleu Lecture */
  --action: #1C6C8F; --action-fonce: #14526E; --action-pastel: #E6F4FB; --action-anneau: #A8DAEE; --action-teinte: #82C8E5;
  --alerte: #A45F00; --alerte-pastel: #FFF9CC; --erreur: #BE3F2E; --erreur-pastel: #FEEAE7; --ok: #1F7A47; --ok-pastel: #EAF9EC;
  --brun: #86673A; --brun-pastel: #F7F1E7; --ardoise: #6C777D;
  /* types d'activité : teinte / encre / pastel / anneau */
  --lecture-t: #82C8E5; --lecture: #1C6C8F; --lecture-p: #E6F4FB; --lecture-a: #A8DAEE;
  --langue-t: #F88379; --langue: #BE3F2E; --langue-p: #FEEAE7; --langue-a: #F9BBB3;
  --production-t: #ADEBB3; --production: #1F7A47; --production-p: #EAF9EC; --production-a: #7FD68C;
  --evaluation-t: #E6D8C4; --evaluation: #7B6D00; --evaluation-p: #F7F1E7; --evaluation-a: #CBB894;
  --oral-t: #FFEB3B; --oral: #A45F00; --oral-p: #FFF9CC; --oral-a: #E2CB18;
  --methodologie-t: #B4BFC4; --methodologie: #4F5B62; --methodologie-p: #EDF0F1; --methodologie-a: #D3DADD;
  /* types d'apprentissage (mêmes teintes, ordre fixe) */
  --acquisition-t: #82C8E5; --acquisition: #1C6C8F; --acquisition-p: #E6F4FB; --acquisition-a: #A8DAEE;
  --investigation-t: #ADEBB3; --investigation: #1F7A47; --investigation-p: #EAF9EC; --investigation-a: #7FD68C;
  --discussion-t: #E6D8C4; --discussion: #7B6D00; --discussion-p: #F7F1E7; --discussion-a: #CBB894;
  --entrainement-t: #FFEB3B; --entrainement: #A45F00; --entrainement-p: #FFF9CC; --entrainement-a: #E2CB18;
  --collaboration-t: #F88379; --collaboration: #BE3F2E; --collaboration-p: #FEEAE7; --collaboration-a: #F9BBB3;
  --production-la-t: #B4BFC4; --production-la: #4F5B62; --production-la-p: #EDF0F1; --production-la-a: #D3DADD;
  /* rayons, ombres, mesures */
  --r-jeton: 6px; --r-bouton: 8px; --r-pilule: 9px; --r-carte: 11px; --r-rail: 12px; --r-section: 14px;
  --ombre-pilule: 0 1px 2px rgba(12,16,20,.10); --ombre-soulevee: 0 18px 36px rgba(12,16,20,.24); --ombre-modale: 0 24px 64px rgba(12,16,20,.30);
  --ombre-selecteur: 0 14px 40px rgba(12,16,20,.22);
  --rail-largeur: 250px; --colonne: 268px; --bibliotheque: 300px;
  --police: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Variantes de fond (Apparence, mémorisées sur cet ordinateur) : html[data-fond] */
html[data-fond="gris"] { --fond-application: #F4F5F6; }
html[data-fond="rose"] { --fond-application: #FBF3F2; --rail: #F8ECEA; }
html[data-fond="vert"] { --fond-application: #F1F8F2; --rail: #EAF3EB; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--fond-application); color: var(--texte);
  font: 400 15.5px/1.7 var(--police); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--titre); line-height: 1.2; }
h2 { font-size: 26px; letter-spacing: -.022em; } h3 { font-size: 17px; } h4 { font-size: 14px; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
input, textarea { font: inherit; color: inherit; }
:is(button, input, textarea, [contenteditable], [tabindex], a, summary):focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
a { color: var(--action); }
.ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; stroke-width: 1.8; }
.ico-16 { width: 16px; height: 16px; } .ico-14 { width: 14px; height: 14px; } .ico-22 { width: 22px; height: 22px; } .ico-30 { width: 30px; height: 30px; }
.note { font-size: 12.5px; color: var(--secondaire); line-height: 1.45; }
.tabulaire { font-variant-numeric: tabular-nums; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etiquette { font-size: 12.5px; font-weight: 600; color: var(--secondaire); letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Couleurs par valeur : encre sur le texte, pastel sur le jeton, anneau sur la carte */
.c-Lecture { color: var(--lecture); } .c-Langue { color: var(--langue); } .c-Production { color: var(--production); }
.c-Évaluation { color: var(--evaluation); } .c-Oral { color: var(--oral); } .c-Méthodologie { color: var(--methodologie); }
.a-Acquisition { color: var(--acquisition); } .a-Investigation { color: var(--investigation); } .a-Discussion { color: var(--discussion); }
.a-Entraînement { color: var(--entrainement); } .a-Collaboration { color: var(--collaboration); } .a-Production { color: var(--production-la); }
.jeton.c-Lecture { background: var(--lecture-p); } .jeton.c-Langue { background: var(--langue-p); } .jeton.c-Production { background: var(--production-p); }
.jeton.c-Évaluation { background: var(--evaluation-p); } .jeton.c-Oral { background: var(--oral-p); } .jeton.c-Méthodologie { background: var(--methodologie-p); }
.jeton.a-Acquisition { background: var(--acquisition-p); } .jeton.a-Investigation { background: var(--investigation-p); } .jeton.a-Discussion { background: var(--discussion-p); }
.jeton.a-Entraînement { background: var(--entrainement-p); } .jeton.a-Collaboration { background: var(--collaboration-p); } .jeton.a-Production { background: var(--production-la-p); }
.anneau-Lecture { --anneau: var(--lecture-a); --teinte: var(--lecture-t); --encre: var(--lecture); --pastel: var(--lecture-p); }
.anneau-Langue { --anneau: var(--langue-a); --teinte: var(--langue-t); --encre: var(--langue); --pastel: var(--langue-p); }
.anneau-Production { --anneau: var(--production-a); --teinte: var(--production-t); --encre: var(--production); --pastel: var(--production-p); }
.anneau-Évaluation { --anneau: var(--evaluation-a); --teinte: var(--evaluation-t); --encre: var(--evaluation); --pastel: var(--evaluation-p); }
.anneau-Oral { --anneau: var(--oral-a); --teinte: var(--oral-t); --encre: var(--oral); --pastel: var(--oral-p); }
.anneau-Méthodologie { --anneau: var(--methodologie-a); --teinte: var(--methodologie-t); --encre: var(--methodologie); --pastel: var(--methodologie-p); }

/* ---------- Jetons, boutons ---------- */
.jeton { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-jeton);
  font-size: 12px; font-weight: 600; line-height: 1; background: var(--rail); color: var(--secondaire); white-space: nowrap; max-width: 100%; }
.jeton .ico { width: 14px; height: 14px; }
.jeton > span { overflow: hidden; text-overflow: ellipsis; }
.jeton.neutre { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anneau-neutre); color: var(--texte); }
.jeton.discret { background: transparent; color: var(--secondaire); padding: 0 4px; }
.jeton.alerte { background: var(--alerte-pastel); color: var(--alerte); }
.jeton.action { background: var(--action-pastel); color: var(--action); }
.jeton.grand { height: 28px; font-size: 13px; padding: 0 11px 0 9px; border-radius: 7px; }
button.jeton:hover { box-shadow: inset 0 0 0 1px currentColor; }
.jeton.actif, .jeton.choisi { box-shadow: inset 0 0 0 1.5px currentColor; }
.jeton .fermer { display: inline-flex; margin-left: 2px; margin-right: -4px; padding: 2px; border-radius: 50%; }
.jeton .fermer:hover { background: rgba(0,0,0,.08); }

.bouton { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-bouton);
  font-size: 13.5px; font-weight: 600; color: var(--titre); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--anneau-fort); white-space: nowrap; }
.bouton:hover { box-shadow: inset 0 0 0 1.5px var(--secondaire); }
.bouton.principal { background: var(--action); color: var(--blanc); box-shadow: none; }
.bouton.principal:hover { background: var(--action-fonce); }
.bouton.fantome { background: transparent; box-shadow: inset 0 0 0 1.5px var(--anneau-fort); color: var(--texte); }
.bouton.fantome:hover { box-shadow: inset 0 0 0 2px var(--action); color: var(--action); }
.bouton.fantome.bleu { box-shadow: inset 0 0 0 2px var(--action-teinte); color: var(--action); }
.bouton.danger { color: var(--erreur); }
.bouton.danger:hover { box-shadow: inset 0 0 0 1.5px var(--erreur); }
.bouton.petit { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.bouton.petit .ico { width: 14px; height: 14px; }
.bouton.lien { background: transparent; box-shadow: none; color: var(--action); padding: 0 6px; }
.bouton.lien:hover { text-decoration: underline; box-shadow: none; }
.bouton-icone { width: 36px; height: 36px; border-radius: var(--r-bouton); display: inline-flex; align-items: center; justify-content: center; color: var(--secondaire); }
.bouton-icone:hover { background: var(--rail); color: var(--titre); }
.bouton-icone.actif { background: var(--action-pastel); color: var(--action); }
.bouton-icone .ico { width: 20px; height: 20px; }
.bouton-icone.petit { width: 28px; height: 28px; } .bouton-icone.petit .ico { width: 16px; height: 16px; }
.bouton-aide { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--picto-inactif); vertical-align: middle; }
.bouton-aide:hover, .bouton-aide:focus-visible { color: var(--action); background: var(--action-pastel); }
.bouton-aide .ico { width: 16px; height: 16px; }

/* Rail segmenté (onglets) : rail gris rayon 12, pilule active blanche rayon 9 + ombre 1 */
.rail-segmente { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border-radius: var(--r-rail); background: var(--rail); }
.rail-segmente button { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; height: 34px; border-radius: var(--r-pilule); font-size: 13.5px; font-weight: 500; color: var(--secondaire); }
.rail-segmente button:hover { color: var(--titre); }
.rail-segmente button.actif { background: var(--blanc); box-shadow: var(--ombre-pilule); font-weight: 600; color: var(--titre); }
.rail-segmente.petit button { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* Champs de saisie */
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font-size: 12.5px; font-weight: 600; color: var(--secondaire); }
.champ input[type=text], .champ input[type=url], .champ textarea, .zone-texte { width: 100%; border: 0; border-radius: var(--r-bouton); background: var(--fond); padding: 8px 11px; font-size: 14.5px; line-height: 1.5; box-shadow: inset 0 0 0 1px transparent; }
.champ textarea, .zone-texte { resize: vertical; min-height: 60px; }
.champ input:focus, .champ textarea:focus, .zone-texte:focus { outline: none; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--action); }

/* ---------- Structure ---------- */
.application { height: 100vh; display: flex; flex-direction: column; }
.application.mode-accueil .atelier { display: none; }
.application:not(.mode-accueil) .accueil { display: none; }
.atelier { flex: 1; min-height: 0; display: flex; }
.rail { width: var(--rail-largeur); flex: none; background: var(--blanc); border-right: 1px solid var(--filet); display: flex; flex-direction: column; min-height: 0; }
.scene { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.barre-outils { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 18px; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.barre-outils .recherche-globale { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: var(--r-bouton); background: var(--fond); color: var(--secondaire); width: 240px; margin-left: 8px; }
.barre-outils .recherche-globale input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13.5px; color: var(--titre); }
.barre-outils .recherche-globale:focus-within { box-shadow: inset 0 0 0 1.5px var(--action); background: var(--blanc); }
.barre-outils .temoin { margin-left: auto; font-size: 12.5px; color: var(--secondaire); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.temoin.modifie { color: var(--alerte); } .temoin.erreur { color: var(--erreur); }
.barre-filtre { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 22px; background: var(--blanc); border-bottom: 1px solid var(--filet); font-size: 13px; }
.barre-filtre .compte { color: var(--discret); } .barre-filtre .compte b { color: var(--titre); font-weight: 600; }
.barre-filtre .jeton.filtre { height: 28px; font-size: 13px; padding: 0 6px 0 10px; border-radius: 7px; background: var(--alerte-pastel); color: var(--alerte); }
.barre-filtre .jeton.filtre.bleu { background: var(--action-pastel); color: var(--action); }
.barre-filtre .droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.corps { flex: 1; min-height: 0; display: flex; }
.panneau-bibliotheque { width: var(--bibliotheque); flex: none; background: var(--blanc); border-right: 1px solid var(--filet); overflow-y: auto; min-height: 0; }
.centre { flex: 1; min-width: 0; min-height: 0; position: relative; }
.vue { position: absolute; inset: 0; overflow: hidden; }

/* Rail de séquence (écran 2b) */
.rail-filet { height: 4px; background: var(--action); flex: none; }
.rail-entete { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--filet); }
.rail-entete .contexte { font-size: 12.5px; color: var(--secondaire); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rail-entete .contexte .bouton-icone { margin-left: auto; }
.rail-titre { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--titre); padding: 2px 4px; margin: 0 -4px; border-radius: 6px; outline: none; }
.rail-titre:hover { background: var(--fond); } .rail-titre:focus { background: var(--fond); box-shadow: inset 0 0 0 1.5px var(--action); }
.rail-entete .resume { font-size: 12.5px; color: var(--secondaire); }
.rail-entete .resume b { color: var(--action); font-weight: 600; }
.rail-entete .jetons { display: flex; gap: 5px; flex-wrap: wrap; }
.rail-seances { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.rail-seances .etiquette { padding: 2px 8px 6px; font-size: 11.5px; color: var(--action); }
.rail-seance { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; text-align: left; width: 100%; color: var(--texte); font-size: 13.5px; }
.rail-seance:hover { background: var(--fond); }
.rail-seance.active { background: var(--action-pastel); color: var(--titre); font-weight: 600; }
.rail-seance .numero { width: 22px; font-size: 12px; font-weight: 700; color: var(--encre, var(--discret)); }
.rail-seance.active .numero { color: var(--action); font-weight: 700; }
.rail-seance .titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-seance .duree { font-size: 12.5px; color: var(--secondaire); }
.rail-seance.depasse .duree { color: var(--action); font-weight: 600; }
.rail-ajout { display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 13px; color: var(--discret); font-weight: 500; border-radius: 7px; }
.rail-ajout:hover { color: var(--action); background: var(--action-pastel); }
.rail-pied { margin-top: auto; padding: 14px 18px 12px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 8px; }
.rail-pied .etiquette { font-size: 11.5px; }
.barre-types { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; }
.barre-types i { display: block; height: 100%; }
.rail-pied .pourcentages { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; font-weight: 600; }

/* ---------- Accueil ---------- */
.accueil { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 34px 90px; }
.accueil-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.accueil-entete h2 { margin-right: auto; }
.accueil-entete .marque { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--action); width: 100%; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0 18px; }
.filtres .separateur { width: 1px; height: 18px; background: var(--anneau-neutre); margin: 0 6px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.carte-scenario { background: var(--blanc); border-radius: var(--r-section); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--anneau-neutre); text-align: left; }
.carte-scenario:hover { box-shadow: inset 0 0 0 2px var(--action-teinte); }
.carte-scenario h3 { font-size: 17px; line-height: 1.3; }
.carte-scenario .ligne-jetons { display: flex; gap: 6px; flex-wrap: wrap; }
.carte-scenario .bas { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.carte-scenario .bas .note { flex: 1; }
.carte-scenario .actions { display: flex; gap: 2px; opacity: 0; }
.carte-scenario:hover .actions, .carte-scenario:focus-within .actions { opacity: 1; }
.carte-scenario .actions button { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--secondaire); }
.carte-scenario .actions button:hover { background: var(--fond); color: var(--titre); }
.carte-nouveau { box-shadow: inset 0 0 0 2px var(--anneau-fort); background: transparent; align-items: center; justify-content: center; color: var(--secondaire); min-height: 150px; gap: 8px; }
.carte-nouveau:hover { color: var(--action); box-shadow: inset 0 0 0 2px var(--action); }
.carte-nouveau .ico { width: 28px; height: 28px; }
.carte-scenario.modele { box-shadow: inset 0 0 0 1.5px var(--anneau-fort); background: transparent; }
.bouton-flottant { position: fixed; right: 34px; bottom: 26px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--action); color: var(--blanc);
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: var(--ombre-soulevee); }
.bouton-flottant:hover { background: var(--action-fonce); }
.probleme { box-shadow: inset 0 0 0 1px var(--erreur); color: var(--erreur); background: var(--blanc); padding: 8px 12px; border-radius: var(--r-bouton); margin-bottom: 12px; font-size: 13px; }
.galerie-modeles { margin-top: 30px; }
.galerie-modeles h2 { font-size: 19px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

/* ---------- Storyboard ---------- */
.storyboard { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; display: flex; gap: 16px; padding: 18px 22px 14px; align-items: flex-start; }
.colonne { flex: 0 0 var(--colonne); width: var(--colonne); max-height: 100%; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r-carte); }
.colonne.cible-depot { background: rgba(28,108,143,.06); }
.colonne.en-deplacement { opacity: .35; }
/* v6.5 : en-tête de période — titre en entier sur plusieurs lignes, couleur de la dominante, objectif dessous, signe « fiche » */
.colonne-entete { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px 8px; cursor: pointer; border-radius: var(--r-carte); border-left: 4px solid var(--teinte, var(--anneau-neutre)); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--anneau, var(--anneau-neutre)); }
.colonne-entete:hover, .colonne-entete:focus-visible { box-shadow: inset 0 0 0 2px var(--encre, var(--action)); outline: none; }
.colonne-entete .ligne-haut { display: flex; align-items: center; gap: 8px; }
.colonne-entete .numero { font-size: 12px; font-weight: 700; color: var(--encre, var(--secondaire)); }
.colonne-entete .phase { font-size: 11.5px; font-weight: 600; color: var(--secondaire); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonne-entete .duree { font-size: 12.5px; color: var(--secondaire); white-space: nowrap; }
.colonne-entete .duree.depasse { color: var(--action); font-weight: 600; }
.colonne-entete .ligne-titre { display: flex; align-items: flex-start; gap: 6px; }
.colonne-entete .titre { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--titre); overflow-wrap: anywhere; }  /* v6.6 : noir, la couleur reste sur le filet et le numéro */
.colonne-entete .ouvrir-fiche { color: var(--encre, var(--secondaire)); opacity: .55; margin-top: 2px; flex: none; }
.colonne-entete:hover .ouvrir-fiche, .colonne-entete:focus-visible .ouvrir-fiche { opacity: 1; }
.colonne-entete:hover .titre { text-decoration: underline; text-decoration-color: var(--anneau, var(--action-teinte)); text-underline-offset: 3px; }
.colonne-entete .objectif { font-size: 12.5px; line-height: 1.35; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.colonne-entete .objectif.vide { color: var(--discret); font-style: italic; }
.colonne-entete .poignee { align-self: center; color: var(--picto-inactif); cursor: grab; display: inline-flex; opacity: 0; }
.colonne:hover .colonne-entete .poignee, .colonne:focus-within .colonne-entete .poignee { opacity: 1; }
.colonne-cartes { flex: 1 1 auto; min-height: 60px; overflow-y: auto; overflow-x: hidden; padding: 2px; display: flex; flex-direction: column; gap: 9px; }
.colonne-vide { font-size: 12.5px; color: var(--discret); padding: 14px 10px; text-align: center; border-radius: var(--r-carte); box-shadow: inset 0 0 0 1.5px var(--filet); }
.bouton-ajout { display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 13px; color: var(--discret); font-weight: 500; border-radius: var(--r-bouton); }
.bouton-ajout:hover { color: var(--action); background: var(--action-pastel); }
.colonne-fantome { flex: 0 0 var(--colonne); box-shadow: inset 0 0 0 1.5px var(--anneau-neutre); border-radius: var(--r-carte); min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--secondaire); text-align: center; padding: 16px; font-size: 13.5px; }
.colonne-fantome:hover { color: var(--action); box-shadow: inset 0 0 0 1.5px var(--action); }
.colonne-fantome .ico { width: 26px; height: 26px; }

.carte { position: relative; background: var(--blanc); border-radius: var(--r-carte); box-shadow: inset 0 0 0 2px var(--anneau, var(--anneau-neutre)); padding: 11px 13px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px; }
.carte:hover { box-shadow: inset 0 0 0 2px var(--encre, var(--secondaire)); background: var(--pastel, var(--blanc)); }
.carte.selectionnee { box-shadow: inset 0 0 0 2.5px var(--action); }
.carte.en-deplacement { opacity: .35; }
.carte.estompee { opacity: .42; }
.carte-haut { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.carte-haut .duree { font-weight: 600; color: var(--encre, var(--texte)); }
/* v6.4 : icônes d'activité plus grandes et plus visibles (pastille pastel pour le type, couleur pour l'apprentissage) */
.carte-haut .type { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pastel, var(--fond)); color: var(--encre, var(--texte)); flex: none; }
.carte-haut .type .ico { width: 20px; height: 20px; }
.carte-haut .discrets { margin-left: auto; display: inline-flex; gap: 6px; color: var(--secondaire); }
.carte-haut .discrets .ico { width: 19px; height: 19px; }
.carte-haut .poignee { color: var(--picto-inactif); cursor: grab; display: inline-flex; opacity: 0; margin-right: -4px; }
.carte:hover .carte-haut .poignee, .carte:focus-within .carte-haut .poignee { opacity: 1; }
.carte-titre { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--titre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.carte-bas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--secondaire); min-width: 0; }
.carte-bas .modalite { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-bas .modalite .ico { width: 17px; height: 17px; color: var(--secondaire); }
.carte-bas .jeton { height: 20px; font-size: 11.5px; padding: 0 6px 0 5px; }
.carte .a-verifier { font-size: 11.5px; color: var(--alerte); display: inline-flex; align-items: center; gap: 4px; }
.carte .menu-deplacer { position: absolute; right: 8px; top: 8px; opacity: 0; }
.carte:focus-visible .menu-deplacer, .carte:focus-within .menu-deplacer, .carte:hover .menu-deplacer { opacity: 1; }

/* Glisser-déposer : fantôme soulevé, créneau de dépôt (écran 2a) */
.glisse-fantome { position: fixed; z-index: 100; pointer-events: none; box-shadow: var(--ombre-soulevee); transform: rotate(1deg); opacity: .96; border-radius: var(--r-carte); background: var(--blanc); }
.creneau-depot { flex: none; min-height: 84px; border-radius: var(--r-carte); border: 1.5px dashed var(--action-teinte); background: var(--action-pastel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--action); font-size: 12.5px; font-weight: 600; }
.creneau-depot .note { color: var(--action); font-size: 11.5px; font-weight: 500; }
.creneau-depot.colonne-cible { min-width: 120px; min-height: 200px; }
body.en-glisser { cursor: grabbing; user-select: none; }
body.en-glisser * { cursor: grabbing !important; }

/* ---------- Modale (dialog natif) ---------- */
.modale, .dialogue-boite { border: 0; padding: 0; background: var(--blanc); color: var(--texte); border-radius: var(--r-section); box-shadow: var(--ombre-modale); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
.modale::backdrop, .dialogue-boite::backdrop { background: var(--voile); }
.modale { width: 900px; overflow: visible; }
.modale.moyenne { width: 720px; } .modale.etroite { width: 640px; }
.modale .filet-type { height: 4px; border-radius: var(--r-section) var(--r-section) 0 0; background: var(--teinte, var(--action-teinte)); }
.modale-corps { padding: 18px 28px 22px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 44px); overflow: auto; }
.modale-entete { display: flex; align-items: center; gap: 10px; }
.modale-entete .fil { font-size: 13px; color: var(--secondaire); display: flex; align-items: center; gap: 8px; min-width: 0; }
.modale-entete .fil b { color: var(--titre); font-weight: 600; }
.modale-entete .droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.modale-titre { font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--titre); width: 100%; border: 0; background: transparent; padding: 2px 6px; margin: -2px -6px; border-radius: 8px; }
.modale-titre:hover { background: var(--fond); } .modale-titre:focus { outline: none; background: var(--fond); box-shadow: inset 0 0 0 1.5px var(--action); }
.modale-titre.petit { font-size: 26px; letter-spacing: -.022em; }
.modale-ligne-titre { display: flex; align-items: center; gap: 18px; }
.modale-ligne-titre .creneau { flex: none; font-size: 13px; color: var(--secondaire); text-align: right; line-height: 1.4; }
.modale-ligne-titre .creneau b { display: block; font-size: 15.5px; color: var(--titre); font-weight: 600; }
.modale-pied { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--filet); }
.modale-pied .milieu { margin-left: auto; margin-right: auto; font-size: 13px; color: var(--secondaire); white-space: nowrap; }
.modale-pied .milieu.depasse { color: var(--alerte); font-weight: 600; }

/* Rangée des sélecteurs (écran 1a) */
.selecteurs-ligne { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.selecteur { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 6px 8px; border-radius: var(--r-bouton); min-width: 0; }
.selecteur:hover { background: var(--fond); }
.selecteur .etiquette { font-size: 12.5px; }
.selecteur .valeur { display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 600; color: var(--encre, var(--titre)); min-width: 0; }
.selecteur .valeur .picto { width: 30px; height: 30px; border-radius: 8px; background: var(--pastel, var(--fond)); color: var(--encre, var(--titre)); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.selecteur.neutre .valeur .picto { background: var(--fond); color: var(--titre); }
.selecteur .valeur > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecteur .valeur .chevron { margin-left: auto; color: var(--picto-inactif); }
.selecteur.neutre .valeur { color: var(--titre); }
.molette { display: flex; align-items: center; gap: 4px; }
.molette button { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--secondaire); box-shadow: inset 0 0 0 1px var(--anneau-neutre); }
.molette button:hover { color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.molette .nombre { min-width: 4.4rem; text-align: center; font-size: 22px; font-weight: 600; color: var(--titre); letter-spacing: -.02em; }
.molette .nombre small { font-size: 12.5px; font-weight: 500; color: var(--secondaire); margin-left: 2px; }
.ligne-per { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.ligne-per .etiquette { margin-right: 4px; }

/* Deux rôles côte à côte — v6.4 : mis en évidence (titre en couleur, cadre coloré, pictogramme plus grand) */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.role { --role: var(--action); --role-pastel: var(--action-pastel); --role-anneau: var(--action-anneau); border-top: 3px solid var(--role); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.role.enseignante { --role: var(--production); --role-pastel: var(--production-p); --role-anneau: var(--production-a); }
.role .en-tete { display: flex; align-items: center; gap: 9px; }
.role .picto { width: 34px; height: 34px; border-radius: 9px; background: var(--role-pastel); color: var(--role); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.role .picto .ico { width: 20px; height: 20px; }
.role h4 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; text-transform: none; color: var(--role); }
.role .en-tete .jeton { margin-left: auto; }
.role .zone-banque { position: relative; }
.role textarea { width: 100%; min-height: 118px; max-height: 190px; resize: vertical; border: 0; background: var(--blanc); border-radius: var(--r-bouton); padding: 10px 12px; font-size: 15.5px; line-height: 1.6; box-shadow: inset 0 0 0 1.5px var(--role-anneau); color: var(--titre); }
.role textarea::placeholder { color: var(--secondaire); }
.role textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--role); }
/* Banque des rôles : propositions sous le champ */
.banque-propositions { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; background: var(--blanc); border-radius: var(--r-bouton); box-shadow: inset 0 0 0 1.5px var(--role-anneau), var(--ombre-soulevee); padding: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow: auto; }
.banque-propositions .banque-titre { font-size: 11.5px; font-weight: 600; color: var(--role); display: flex; align-items: center; gap: 5px; padding: 2px 6px 4px; }
.banque-propositions button { text-align: left; font-size: 13.5px; line-height: 1.4; padding: 5px 8px; border-radius: 6px; color: var(--texte); display: flex; gap: 8px; align-items: baseline; white-space: normal; }
.banque-propositions button .fois { margin-left: auto; font-size: 11px; color: var(--secondaire); flex: none; }
.banque-propositions button:hover, .banque-propositions button.active { background: var(--role-pastel); color: var(--titre); }

/* Objectifs PER : jetons colorés par type (v6.4) et suggestions de capacités transversales à confirmer */
.jeton.per-disciplinaire { background: var(--action-pastel); color: var(--action); }
.jeton.per-ct { background: var(--production-p); color: var(--production); }
.jeton.per-fg { background: var(--brun-pastel); color: var(--brun); }
.jetons-per { display: contents; }
.suggestions-ct { display: contents; }
.suggestion-etiquette { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--production); font-size: 11.5px; }
.jeton.suggestion { background: var(--blanc); color: var(--production); box-shadow: inset 0 0 0 1.5px var(--production-a); border-style: dashed; }
.jeton.suggestion:hover { background: var(--production-p); box-shadow: inset 0 0 0 1.5px var(--production); }
/* Témoin d'enregistrement dans le pied de la fenêtre */
.temoin-modale { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ok); white-space: nowrap; margin-right: 6px; }
.temoin-modale.en-cours { color: var(--alerte); }

/* Bande basse : trace · différenciations · critères */
.bande-basse { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px; }
.bloc-bas { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bloc-bas h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.bloc-bas.trace h4 { color: var(--ok); } .bloc-bas.differenciations h4 { color: var(--erreur); } .bloc-bas.criteres h4 { color: var(--brun); }
.jetons-choix { display: flex; flex-wrap: wrap; gap: 5px; }
.jetons-choix .jeton { cursor: pointer; }
.jetons-choix .jeton.choisi { background: var(--ok-pastel); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); }
.differenciations .jetons-choix .jeton.choisi { background: var(--erreur-pastel); color: var(--erreur); box-shadow: inset 0 0 0 1.5px var(--erreur); }
.jetons-diff { display: contents; }
.bloc-bas .sous-etiquette { font-size: 11.5px; font-weight: 600; color: var(--secondaire); margin-top: 2px; }
.bloc-bas .champ input, .bloc-bas .champ textarea { font-size: 13px; padding: 6px 9px; min-height: 0; }
.bloc-bas .champ textarea { min-height: 58px; }
.liste-criteres { display: flex; flex-direction: column; gap: 4px; counter-reset: critere; }
.liste-criteres .critere { display: flex; align-items: center; gap: 6px; }
.liste-criteres .critere::before { counter-increment: critere; content: counter(critere) "."; font-size: 12.5px; font-weight: 600; color: var(--brun); width: 16px; flex: none; }
.liste-criteres .critere input { flex: 1; min-width: 0; border: 0; background: var(--fond); border-radius: 7px; padding: 5px 8px; font-size: 13px; }
.liste-criteres .critere input:focus { outline: none; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--action); }
.liste-criteres .critere .bouton-icone { flex: none; opacity: .5; } .liste-criteres .critere:hover .bouton-icone { opacity: 1; }

/* Grille de choix de modèle (« + Activité ») */
.grille-modeles-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grille-modeles-entete .recherche-globale { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: var(--r-bouton); background: var(--fond); color: var(--secondaire); width: 260px; }
.grille-modeles-entete .recherche-globale input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13.5px; }
.grille-modeles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-height: 470px; overflow-y: auto; padding: 2px; }
.tuile-modele { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 13px; border-radius: var(--r-carte); background: var(--blanc); box-shadow: inset 0 0 0 2px var(--anneau, var(--anneau-neutre)); min-height: 118px; }
.tuile-modele:hover { box-shadow: inset 0 0 0 2px var(--encre, var(--action)); }
.tuile-modele .haut { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--encre, var(--texte)); font-weight: 600; }
.tuile-modele .haut .discrets { margin-left: auto; display: inline-flex; gap: 4px; color: var(--picto-inactif); }
.tuile-modele .titre { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--titre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tuile-modele .resume { font-size: 12px; color: var(--secondaire); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tuile-modele .bas { margin-top: auto; display: flex; gap: 5px; align-items: center; }
.tuile-modele.zero { box-shadow: inset 0 0 0 1.5px var(--action-anneau); background: var(--action-pastel); color: var(--action); align-items: center; justify-content: center; text-align: center; }
.tuile-modele.zero .ico { width: 28px; height: 28px; }
.tuile-modele.zero .titre { color: var(--action); }
.preference-modeles { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--secondaire); margin-left: auto; }
.preference-modeles input { accent-color: var(--action); }

/* Aperçu de modèle (bibliothèque) */
.apercu { display: flex; flex-direction: column; gap: 12px; }
.apercu .ligne-jetons { display: flex; gap: 6px; flex-wrap: wrap; }
.apercu .roles .role p { background: var(--fond); border-radius: var(--r-bouton); padding: 10px 12px; min-height: 90px; font-size: 14.5px; line-height: 1.6; }
.apercu .bande-basse p { font-size: 13px; line-height: 1.5; }
.apercu .origine { font-size: 12.5px; color: var(--secondaire); padding: 8px 12px; border-radius: var(--r-bouton); background: var(--fond); }

/* ---------- Sélecteur iconographique flottant (3 × 2) ---------- */
.popover { position: fixed; z-index: 120; background: var(--blanc); border-radius: var(--r-rail); box-shadow: var(--ombre-selecteur); padding: 10px; max-width: min(520px, 96vw); max-height: min(72vh, 600px); overflow: auto; }
.popover .popover-titre { font-size: 12.5px; font-weight: 600; color: var(--secondaire); padding: 2px 4px 8px; display: flex; align-items: center; gap: 6px; }
.tuiles { display: grid; grid-template-columns: repeat(var(--colonnes, 3), 1fr); gap: 6px; }
.tuile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 96px; height: 70px; padding: 6px; border-radius: 9px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--secondaire); background: var(--blanc); line-height: 1.15; box-shadow: inset 0 0 0 1px transparent; }
.tuile .ico { width: 22px; height: 22px; }
.tuile:hover { background: var(--fond); color: var(--titre); }
.tuile.choisie { background: var(--action-pastel); box-shadow: inset 0 0 0 2px var(--action); color: var(--action); }
/* Choix multiples (v6.4) : coche visible sur les tuiles retenues */
.tuile.cochable { position: relative; }
.tuile.cochable .coche { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--action); color: var(--blanc); display: none; align-items: center; justify-content: center; }
.tuile.cochable.choisie .coche { display: inline-flex; }
.tuile.large { height: auto; min-height: 58px; }
.tuile .grand { font-size: 17px; font-weight: 700; color: var(--titre); }
.popover .description { font-size: 13px; color: var(--secondaire); padding: 8px 4px 2px; min-height: 1.6em; line-height: 1.5; max-width: 330px; }
.popover .recherche { display: flex; align-items: center; gap: 6px; background: var(--fond); border-radius: 7px; padding: 5px 9px; margin-bottom: 8px; }
.popover .recherche input { border: 0; outline: none; flex: 1; font-size: 14px; background: transparent; }
.liste-cochable { display: flex; flex-direction: column; gap: 2px; }
.liste-cochable label { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: start; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.35; }
.liste-cochable label:hover { background: var(--fond); }
.liste-cochable input { margin: 2px 0 0; accent-color: var(--action); }
.liste-cochable .code { font-weight: 700; white-space: nowrap; color: var(--titre); }
.liste-cochable .jeton { height: 18px; font-size: 10.5px; padding: 0 5px; }
/* Descripteurs des capacités transversales (v6.8) : repliés sous l'objectif, texte officiel du PER */
.liste-cochable .descripteurs { margin: -2px 6px 6px 50px; font-size: 12.5px; line-height: 1.4; color: var(--secondaire); }
.liste-cochable .descripteurs [data-descripteurs] { font-size: 12px; }
.liste-cochable .descripteurs.ouvert [data-descripteurs] svg { transform: rotate(90deg); }
.liste-cochable .descripteurs p { margin: 5px 0 0; }
.liste-cochable .descripteurs p b { color: var(--titre); }
.liste-cochable .descripteurs .visee { font-style: italic; }
.popover .pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--filet); }
.popover .lien-discret { font-size: 12.5px; color: var(--action); display: inline-flex; align-items: center; gap: 4px; }
.menu-liste { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.menu-liste button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; text-align: left; font-size: 13.5px; color: var(--texte); }
.menu-liste button:hover { background: var(--fond); color: var(--titre); }

/* ---------- Bibliothèque (panneau gauche) ---------- */
.biblio-entete { position: sticky; top: 0; z-index: 2; background: var(--blanc); padding: 12px 14px; border-bottom: 1px solid var(--filet); display: flex; flex-direction: column; gap: 8px; }
.biblio-entete h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--action); }
.biblio-entete h3 .bouton-icone { margin-left: auto; }
.biblio-entete .recherche { display: flex; align-items: center; gap: 6px; background: var(--fond); border-radius: 7px; padding: 6px 9px; }
.biblio-entete .recherche input { border: 0; outline: none; flex: 1; font-size: 13.5px; background: transparent; }
.biblio-filtres { display: flex; gap: 4px; flex-wrap: wrap; }
.biblio-filtres .jeton { height: 22px; font-size: 11.5px; padding: 0 7px 0 5px; }
.biblio-liste { padding: 10px 14px 24px; display: flex; flex-direction: column; gap: 8px; }
.mini-carte { border-radius: var(--r-carte); box-shadow: inset 0 0 0 2px var(--anneau, var(--anneau-neutre)); padding: 9px 11px; background: var(--blanc); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.mini-carte:hover { box-shadow: inset 0 0 0 2px var(--encre, var(--action)); }
.mini-carte .ligne { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--secondaire); }
.mini-carte .ligne .ico { width: 17px; height: 17px; }
.mini-carte .ligne .duree { font-weight: 600; color: var(--encre, var(--titre)); }
.mini-carte .carte-titre { font-size: 13.5px; }
.mini-carte .actions { display: flex; gap: 4px; margin-top: 2px; }
.biblio-aide { font-size: 12px; color: var(--secondaire); padding: 0 14px 6px; line-height: 1.4; }

/* ---------- Vues d'analyse : titre, phrase-clé, cartes de section ---------- */
.analyse { position: absolute; inset: 0; overflow: auto; padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.analyse-entete { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.analyse-entete h2 { display: flex; align-items: center; gap: 10px; color: var(--action); }
.analyse-entete .cle { font-size: 15.5px; color: var(--secondaire); flex: 1 1 320px; line-height: 1.5; }
.analyse-entete .cle b { color: var(--titre); font-weight: 600; }
.analyse-entete .droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.section-carte { background: var(--blanc); border-radius: var(--r-section); padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: inset 0 0 0 1.5px var(--action-anneau); }
.section-carte h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--action); }
.section-carte h3 .bouton-aide { margin-left: 2px; }
.analyse-vide { color: var(--secondaire); padding: 40px; text-align: center; background: var(--blanc); border-radius: var(--r-section); }
.lecture-guidee { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.55; color: var(--texte); }
.lecture-guidee p { display: flex; gap: 8px; align-items: flex-start; }
.lecture-guidee p .ico { margin-top: 4px; color: var(--secondaire); }
.legende-pied { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--secondaire); }
.legende-pied .item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.legende-pied .puce { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Frise (écran 3b) */
.frise-outils { display: flex; align-items: center; gap: 12px; }
.frise-defilement { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.frise { display: flex; flex-direction: column; gap: 18px; min-width: max-content; }
.frise-seance { display: flex; flex-direction: column; gap: 6px; }
.frise-seance .en-tete { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.frise-seance .en-tete .numero { font-size: 12px; font-weight: 600; color: var(--discret); }
.frise-seance .en-tete .titre { font-weight: 600; color: var(--titre); }
.frise-seance .en-tete .total { font-size: 12.5px; color: var(--secondaire); }
.frise-seance .en-tete .total.depasse { color: var(--action); font-weight: 600; }
.frise-piste { position: relative; height: 58px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--periode-px) - 1px), var(--repere) calc(var(--periode-px) - 1px), var(--repere) var(--periode-px)); }
.frise-piste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--filet); }
.frise-piste.cible-depot { background-color: rgba(28,108,143,.06); }
.bloc-frise { position: absolute; top: 4px; height: 50px; border-radius: var(--r-carte); background: var(--teinte); box-shadow: inset 0 0 0 1.5px var(--encre); color: var(--encre); padding: 6px 12px 6px 12px; display: flex; flex-direction: column; justify-content: center; gap: 1px; cursor: grab; overflow: hidden; user-select: none; }
.bloc-frise .ligne1 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bloc-frise .ligne1 .ico { width: 14px; height: 14px; }
.bloc-frise .titre { font-size: 13px; font-weight: 500; color: var(--titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-frise.etroit { padding: 6px 8px; } .bloc-frise.etroit .titre { display: none; }
.bloc-frise.actif, .bloc-frise:focus-visible { box-shadow: inset 0 0 0 1.5px var(--action), 0 6px 18px rgba(28,108,143,.20); outline: none; }
.bloc-frise.estompe { opacity: .42; }
.bloc-frise.en-deplacement { opacity: .35; }
.bloc-frise .poignee { position: absolute; top: 13px; width: 5px; height: 24px; border-radius: 3px; background: var(--encre); opacity: .55; cursor: ew-resize; }
.bloc-frise .poignee.gauche { left: 4px; } .bloc-frise .poignee.droite { right: 4px; }
.bloc-frise:hover .poignee, .bloc-frise.actif .poignee { opacity: .9; width: 7px; height: 32px; top: 9px; box-shadow: 0 0 0 3px rgba(28,108,143,.18); }
.frise-regle { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--action-anneau) 0, var(--action-anneau) 1px, transparent 1px, transparent var(--pas-px)); opacity: 0; }
.frise-piste.en-geste .frise-regle { opacity: 1; }
.frise-guide { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--action); opacity: .6; pointer-events: none; }
.frise-echelle { display: flex; font-size: 11.5px; color: var(--discret); position: relative; height: 16px; }
.frise-echelle span { position: absolute; transform: translateX(-50%); }
.frise-bloc-fantome { position: absolute; top: 4px; height: 50px; border-radius: var(--r-carte); border: 1.5px dashed var(--action-teinte); background: var(--action-pastel); pointer-events: none; }
.bandeau-depassement { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-bouton); background: var(--alerte-pastel); color: var(--alerte); font-size: 13px; font-weight: 600; }

/* Équilibre (écran 4b) */
.equilibre { display: grid; grid-template-columns: minmax(380px, 5fr) 6fr; gap: 16px; align-items: start; }
/* v6.5 : le cercle suit la largeur de sa colonne (au lieu de 176 px fixes) */
.anneau-bloc { display: grid; grid-template-columns: minmax(170px, 42%) 1fr; gap: 14px; align-items: center; }
.anneau { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border-radius: 50%; position: relative; background: var(--rail); }
.anneau::after { content: ""; position: absolute; inset: 16.5%; border-radius: 50%; background: var(--blanc); }
.anneau .centre-texte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; text-align: center; }
.anneau .centre-texte b { font-size: clamp(18px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; color: var(--titre); }
.anneau .centre-texte span { font-size: 12px; color: var(--secondaire); }
.anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.anneau svg path { cursor: pointer; }
.anneau svg path:hover { opacity: .85; }
.liste-types { display: flex; flex-direction: column; gap: 4px; }
.liste-types button { display: grid; grid-template-columns: 12px 1fr auto 3.4rem; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 7px; font-size: 13.5px; text-align: left; color: var(--texte); white-space: nowrap; }
.liste-types button:hover { background: var(--fond); }
.liste-types .puce { width: 12px; height: 12px; border-radius: 50%; }
.liste-types .puce.creuse { background: transparent; box-shadow: inset 0 0 0 1.4px var(--anneau-neutre); }
.liste-types .min { font-size: 12.5px; color: var(--secondaire); }
.liste-types .pct { font-weight: 600; text-align: right; }
.liste-types .aucune { color: var(--discret); font-style: italic; }
.conseil { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-carte); background: var(--fond); }
.conseil .picto { width: 36px; height: 36px; border-radius: 9px; background: var(--brun-pastel); color: var(--brun); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.conseil .texte { flex: 1; font-size: 14px; line-height: 1.5; }
.conseil .boutons { display: flex; gap: 6px; margin-top: 8px; }
.escalier { display: flex; flex-direction: column; gap: 6px; }
.marche { display: grid; grid-template-columns: 22px 108px 1fr 60px 84px; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; padding: 2px 6px; border-radius: 7px; }
.marche:hover { background: var(--fond); }
.marche .barre { height: 34px; border-radius: var(--r-pilule); background: var(--rail); overflow: hidden; }
.marche .barre > i { display: block; height: 100%; border-radius: var(--r-pilule); }
.marche .pct { font-weight: 600; text-align: right; }
.marche .nb { font-size: 12.5px; color: var(--secondaire); }
.barre-modalites { display: flex; height: 22px; border-radius: var(--r-carte); overflow: hidden; background: var(--rail); }
.barre-modalites button { height: 100%; min-width: 4px; }
.barre-modalites button:hover { filter: brightness(.95); }
.a-verifier-bandeau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--alerte); padding: 8px 14px; background: var(--alerte-pastel); border-radius: var(--r-bouton); }
.a-verifier-bandeau > span { flex: 1 1 180px; }

/* PER (écran 5a) */
.grille-per { display: flex; flex-direction: column; }
.grille-per .ligne { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--rail); }
.grille-per .ligne.en-tete { border-top: 0; padding-bottom: 6px; font-size: 12.5px; color: var(--secondaire); }
.grille-per .objectif { width: 436px; flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.grille-per .objectif .picto { display: inline-flex; color: var(--encre); flex: none; }
.grille-per .objectif .code { font-size: 12.5px; font-weight: 600; color: var(--encre); width: 52px; flex: none; }
.grille-per .objectif .lib { font-size: 13.5px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grille-per .cellules { flex: 1; display: flex; gap: 4px; align-items: center; }
.grille-per .cellule { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 28px; }
.grille-per .cellule.en-tete { font-size: 12.5px; font-weight: 600; color: var(--secondaire); text-align: center; }
.pastille { border-radius: 50%; background: var(--teinte); display: inline-block; cursor: pointer; transition: transform .15s; border: 0; padding: 0; }
.pastille.vide { width: 4px; height: 4px; background: var(--anneau-neutre); cursor: default; }
.pastille.creuse { width: 12px; height: 12px; background: transparent; box-shadow: inset 0 0 0 1.4px #CBB894; }
.pastille:hover, .pastille:focus-visible { transform: scale(1.2); }
.grille-per .total { width: 154px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.grille-per .total .barre { width: 76px; height: 6px; border-radius: 3px; background: var(--rail); overflow: hidden; }
.grille-per .total .barre i { display: block; height: 100%; background: var(--teinte); }
.grille-per .total b { font-size: 13px; font-weight: 600; color: var(--titre); width: 52px; text-align: right; }
.grille-per .total .jamais { font-size: 11.5px; font-weight: 600; color: var(--evaluation); display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1.2px #CBB894; white-space: nowrap; }
.per-pied { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.per-pied .couverture b { font-size: 17px; font-weight: 600; color: var(--titre); }
.per-pied .phrase { font-size: 14px; color: var(--texte); flex: 1 1 300px; }
.a-verifier-per { font-size: 11px; font-weight: 600; color: var(--alerte); background: var(--alerte-pastel); padding: 1px 6px; border-radius: 5px; margin-left: 4px; flex: none; }

/* Matrice (écran 6a) */
.matrice-grille { display: grid; grid-template-columns: 196px repeat(6, 1fr); gap: 4px 8px; align-items: center; }
.matrice-grille .colonne-titre { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; padding-bottom: 6px; }
.matrice-grille .ligne-titre { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--titre); padding: 6px 4px; }
.matrice-grille .ligne-titre .ico { color: var(--secondaire); }
.matrice-grille .ligne-titre small { font-weight: 400; color: var(--secondaire); font-size: 12px; }
.cadran-cellule { display: flex; justify-content: center; align-items: center; height: 66px; }
.cadran { width: 52px; height: 52px; border-radius: 50%; position: relative; cursor: pointer; background: var(--rail); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; }
.cadran::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--blanc); }
.cadran.jamais { background: transparent; cursor: default; }
.cadran.jamais::after { width: 7px; height: 7px; background: #EDEFF1; }
.cadran:hover:not(.jamais), .cadran:focus-visible { transform: scale(1.06); }
.cadran .valeur { position: absolute; font-size: 10.5px; font-weight: 600; color: var(--titre); z-index: 1; opacity: 0; }
.cadran:hover .valeur { opacity: 1; }

/* ---------- Infobulle, dialogue, messages ---------- */
/* Infobulle claire (v6.1) : blanc, texte sombre, anneau neutre 1,5 px et ombre soulevée pour la détacher du fond */
.infobulle { position: fixed; z-index: 140; background: var(--blanc); color: var(--texte); border-radius: 8px; padding: 9px 12px; max-width: 320px; font-size: 13px; line-height: 1.45; box-shadow: inset 0 0 0 1.5px var(--anneau-fort), var(--ombre-soulevee); }
.infobulle b { font-weight: 600; color: var(--titre); } .infobulle .ligne { display: flex; gap: 6px; margin-top: 3px; } .infobulle .ligne b { white-space: nowrap; color: var(--secondaire); }
.infobulle .note { color: var(--secondaire); }
.dialogue-boite { width: min(460px, 92vw); padding: 20px 22px; }
.dialogue-boite.large { width: min(760px, 94vw); }
.dialogue-boite h2 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 10px; }
.dialogue-boite .dialogue-contenu { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; max-height: 70vh; overflow: auto; }
.dialogue-boite .boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.choix-fond { display: flex; flex-direction: column; gap: 6px; }
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-fond-option { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-bouton); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--anneau-neutre); }
.choix-fond-option:hover, .choix-fond-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--action); }
.choix-fond-option input { margin: 0; accent-color: var(--action); }
.choix-fond-option .pastille { width: 28px; height: 28px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1.5px var(--anneau-fort); }
.pastille-blanc { background: #FFFFFF; } .pastille-rose { background: #FBF3F2; } .pastille-vert { background: #F1F8F2; } .pastille-gris { background: #F4F5F6; }
.dialogue-boite input[type=text] { border: 0; background: var(--fond); border-radius: var(--r-bouton); padding: 9px 11px; width: 100%; font-size: 15px; }
.dialogue-boite input[type=text]:focus { outline: none; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--action); }
.dialogue-boite textarea { width: 100%; border: 0; background: var(--fond); border-radius: var(--r-bouton); padding: 9px 11px; font: inherit; font-size: 14px; min-height: 90px; }
.messages { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: flex; flex-direction: column; gap: 6px; max-width: 26rem; }
.message { background: var(--titre); color: var(--blanc); border-radius: var(--r-bouton); padding: 9px 14px; font-size: 13.5px; box-shadow: var(--ombre-pilule); }
.message.succes { background: var(--ok); } .message.erreur { background: var(--erreur); }
.sources { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.sources section { display: flex; flex-direction: column; gap: 6px; }
.sources h3 { font-size: 15px; } .sources ul { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 4px; }
.jeton.origine { background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anneau-neutre); color: var(--secondaire); text-decoration: none; }
.jeton.origine:hover { color: var(--titre); }
.export-resultats { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12.5px; max-height: 160px; overflow: auto; }
.export-resultats .ok { color: var(--ok); } .export-resultats .probleme { color: var(--alerte); }
.avertissement { border-left: 3px solid var(--alerte); color: var(--alerte); padding: 6px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; background: var(--fond); border-radius: 0 var(--r-bouton) var(--r-bouton) 0; }
.liste-liens { display: flex; flex-direction: column; gap: 6px; }
.ligne-lien { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.ligne-lien input { min-width: 0; border: 0; background: var(--fond); border-radius: 7px; padding: 6px 9px; font-size: 13.5px; }
.etat-ok { color: var(--ok); } .etat-mort { color: var(--erreur); } .etat-inconnu { color: var(--alerte); }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.fiche-grille .pleine { grid-column: 1 / -1; }
.propriete { display: flex; flex-direction: column; gap: 4px; }
.propriete .valeur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

@keyframes apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.carte.nouvelle, .popover, .message { animation: apparait .18s ease-out; }

/* ---------- Écrans plus étroits (≤ 1320 px) : la barre d'outils garde une seule ligne ---------- */
.barre-outils { overflow: hidden; }
.barre-outils .recherche-globale { flex: 0 1 240px; min-width: 150px; }
@media (max-width: 1600px) {  /* v6.7 : sept onglets → barre compacte plus tôt */
  .barre-outils { gap: 8px; padding: 10px 14px; }
  .rail-segmente button { padding: 0 10px; }
  .barre-outils .bouton:not(.bouton-icone) > svg + * { display: none; }
  .barre-outils #bouton-bibliotheque, .barre-outils #bouton-exporter { padding: 0 11px; font-size: 0; gap: 0; }
  .barre-outils #bouton-bibliotheque .ico, .barre-outils #bouton-exporter .ico { width: 20px; height: 20px; }
  .barre-outils .temoin { display: none; }
}
@media (max-width: 1320px) { :root { --rail-largeur: 224px; --colonne: 248px; } }

/* v6 : version dans le pied du rail (ouvre « À propos ») */
.version-pied { text-align: left; font-size: 11.5px; color: var(--discret); padding: 2px 0 0; }
.version-pied:hover { color: var(--action); }

/* v6.5 : légende des icônes (boîte de dialogue) */
.legende { display: flex; flex-direction: column; gap: 14px; }
.legende section { display: flex; flex-direction: column; gap: 8px; }
.legende h3 { font-size: 15px; color: var(--action); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.legende h3 .note { font-weight: 500; }
.legende-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.legende-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.35; }
.legende-item .picto { width: 34px; height: 34px; border-radius: 8px; background: var(--fond); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.legende-item .picto .jeton { height: 20px; font-size: 10.5px; padding: 0 5px; }
.legende-item b { display: block; font-weight: 600; color: var(--titre); }
.legende-item .note { display: block; font-size: 12px; }
/* v6.5 : fiche de la planification — périodes en une fiche, champs qui grandissent avec leur contenu */
.planif-en-une-fiche { display: flex; flex-direction: column; gap: 4px; }
.planif-en-une-fiche .tempo-ligne { display: grid; grid-template-columns: 30px 1fr auto; gap: 4px 10px; align-items: baseline; padding: 6px 10px; border-radius: var(--r-bouton); border-left: 4px solid var(--teinte, var(--anneau-neutre)); background: var(--blanc); box-shadow: inset 0 0 0 1px var(--anneau-neutre); text-align: left; cursor: pointer; }
.planif-en-une-fiche .tempo-ligne:hover { box-shadow: inset 0 0 0 1.5px var(--encre, var(--action)); }
.planif-en-une-fiche .numero { font-size: 12px; font-weight: 700; color: var(--encre, var(--secondaire)); }
.planif-en-une-fiche .titre { font-size: 14px; font-weight: 600; color: var(--titre); }
.fiche-per { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.planif-en-une-fiche .duree { font-size: 12px; color: var(--secondaire); white-space: nowrap; }
.planif-en-une-fiche .objectif { grid-column: 2 / -1; font-size: 12.5px; color: var(--texte); line-height: 1.35; }
.planif-en-une-fiche .objectif.vide { color: var(--discret); font-style: italic; }
.champ textarea.auto { overflow: hidden; resize: none; }

/* ---------- v6.7 (M0e) : vue « Planification » — périodes par lignes, autant que la largeur le permet ---------- */
.planif-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; align-items: start; }
.planif-tempo { background: var(--blanc); border-radius: var(--r-carte); box-shadow: inset 0 0 0 1.5px var(--anneau, var(--anneau-neutre)); border-left: 4px solid var(--teinte, var(--anneau-neutre)); display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 10px; min-width: 0; }
.planif-tempo-entete { display: flex; flex-direction: column; gap: 3px; text-align: left; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.planif-tempo-entete:hover { background: var(--fond); }
.planif-tempo-entete .ligne-haut { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.planif-tempo-entete .numero { font-weight: 700; color: var(--encre, var(--secondaire)); }
.planif-tempo-entete .phase { color: var(--secondaire); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planif-tempo-entete .duree { color: var(--secondaire); white-space: nowrap; } .planif-tempo-entete .duree.depasse { color: var(--action); font-weight: 600; }
.planif-tempo-entete .titre { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--titre); overflow-wrap: anywhere; }
.planif-tempo-entete .objectif { font-size: 12px; line-height: 1.35; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.planif-activites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.planif-activite { display: grid; grid-template-columns: 30px 22px 1fr 18px; gap: 6px; align-items: center; width: 100%; text-align: left; padding: 5px 7px; border-radius: 8px; background: var(--pastel, var(--fond)); box-shadow: inset 0 0 0 1.5px var(--anneau, var(--anneau-neutre)); font-size: 12.5px; color: var(--titre); min-width: 0; }
.planif-activite:hover { box-shadow: inset 0 0 0 2px var(--encre, var(--action)); }
.planif-activite .duree { font-weight: 700; color: var(--encre, var(--texte)); font-size: 12px; }
.planif-activite .type { display: inline-flex; color: var(--encre, var(--texte)); }
.planif-activite .titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.planif-activite .modalite { display: inline-flex; color: var(--secondaire); }
.planif-voir { align-self: flex-start; margin-top: 2px; }

/* ---------- v6.7 (M0e) : vue « Période » — la colonne à gauche, le déroulé détaillé à droite ---------- */
.tempo-direct .analyse-entete { align-items: center; gap: 14px; }
.tempo-navigation { display: inline-flex; align-items: center; gap: 4px; }
.tempo-position { font-size: 13px; font-weight: 700; color: var(--action); min-width: 4.4rem; text-align: center; }
.tempo-titre { font-size: 24px; letter-spacing: -.02em; color: var(--titre); border-left: 5px solid var(--teinte, var(--action-teinte)); padding-left: 12px; flex: 1 1 300px; min-width: 0; }
.tempo-direct .analyse-entete .cle { flex: 0 1 auto; }
.tempo-direct-corps { display: grid; grid-template-columns: var(--colonne) 1fr; gap: 16px; align-items: start; }
.tempo-colonne { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tempo-cartes { display: flex; flex-direction: column; gap: 9px; }
.tempo-infos { padding: 14px 16px; gap: 10px; font-size: 13.5px; }
.tempo-infos p { margin: 2px 0 0; line-height: 1.45; }
.tempo-infos .etiquette { display: block; margin-bottom: 3px; }
.tempo-deroule { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.deroule-activite { display: grid; grid-template-columns: 112px 1fr; gap: 14px; background: var(--blanc); border-radius: var(--r-carte); box-shadow: inset 0 0 0 1.5px var(--anneau, var(--anneau-neutre)); border-left: 5px solid var(--teinte, var(--anneau-neutre)); padding: 12px 16px 12px 12px; }
.deroule-activite.selectionnee { box-shadow: inset 0 0 0 2.5px var(--action); }
.deroule-activite .minutage { display: flex; flex-direction: column; gap: 2px; }
.deroule-activite .minutage b { font-size: 15px; color: var(--encre, var(--titre)); }
.deroule-activite .minutage span { font-size: 12.5px; color: var(--secondaire); }
.deroule-activite .detail { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.deroule-titre { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 17px; font-weight: 700; color: var(--titre); letter-spacing: -.01em; line-height: 1.25; }
.deroule-titre .type { display: inline-flex; color: var(--encre, var(--texte)); }
.deroule-titre:hover span:last-child { text-decoration: underline; text-decoration-color: var(--anneau, var(--action-teinte)); text-underline-offset: 3px; }
.deroule-activite .ligne-jetons { display: flex; gap: 6px; flex-wrap: wrap; }
.deroule-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.deroule-roles .role { border-top-width: 2px; padding-top: 6px; gap: 4px; }
.deroule-roles .role .picto { width: 26px; height: 26px; border-radius: 7px; } .deroule-roles .role .picto .ico { width: 15px; height: 15px; }
.deroule-roles .role h4 { font-size: 12.5px; }
.deroule-roles .role p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texte); }
.deroule-bas { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--texte); }
.deroule-bas > div { display: flex; gap: 8px; align-items: baseline; }
.deroule-bas .etiquette { display: inline-flex; align-items: center; gap: 4px; flex: none; min-width: 120px; }
@media (max-width: 1320px) { .tempo-direct-corps { grid-template-columns: 1fr; } .tempo-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }

/* ---------- Mode serveur (v7.0) : écran de connexion, bouton Mon compte ---------- */
.ecran-connexion { position: fixed; inset: 0; z-index: 200; background: var(--fond-application); display: flex; align-items: center; justify-content: center; }
.boite-connexion { width: min(380px, 92vw); background: var(--blanc); border-radius: var(--r-section); box-shadow: inset 0 0 0 1.5px var(--anneau-neutre), var(--ombre-soulevee); padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; }
.boite-connexion .marque { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--action); }
.boite-connexion h2 { font-size: 22px; }
.boite-connexion input { border: 0; background: var(--fond); border-radius: var(--r-bouton); padding: 9px 11px; font-size: 15px; }
.boite-connexion input:focus { outline: none; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--action); }
.boite-connexion .bouton { margin-top: 8px; justify-content: center; }
.boite-connexion .erreur-connexion { color: var(--erreur); min-height: 1.2em; }
.alerte-texte { color: var(--alerte); }