/* =====================================================================
   Scolevo (GEVA-Sco) : feuille de style unique
   Charte issue de la maquette « Scolevo - GEVA-Sco administratif » (octobre 2026) :
   fond papier, encre bleu nuit, accent bleu, quatre teintes de niveau A/B/C/D.
   Police : Luciole © Laurent Bourcellier & Jonathan Perez, licence CC BY 4.0
   (https://creativecommons.org/licenses/by/4.0/), servie depuis assets/fonts/.
   ===================================================================== */

@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
    --bg: #f4f4f1; --paper: #fff; --surface: #ebebe6; --ink: #1a2331;
    --n-400: #b9bcc2; --n-500: #8b9099; --n-600: #5f6570; --n-700: #474d57;
    --line: #dcdcd5; --line-2: #eaeae4;
    --acc: oklch(0.36 0.09 258); --acc-600: oklch(0.31 0.085 258); --acc-700: oklch(0.27 0.075 258);
    --acc-100: oklch(0.955 0.018 258); --acc-200: oklch(0.90 0.035 258);
    --grp: oklch(0.40 0.09 150);
    --lv-a: oklch(0.52 0.10 155); --lv-a-t: oklch(0.955 0.03 155); --lv-a-i: oklch(0.36 0.08 155); --lv-a-on: #fff;
    --lv-b: oklch(0.56 0.09 238); --lv-b-t: oklch(0.955 0.022 238); --lv-b-i: oklch(0.38 0.08 242); --lv-b-on: #fff;
    --lv-c: oklch(0.75 0.13 72); --lv-c-t: oklch(0.955 0.04 82); --lv-c-i: oklch(0.43 0.09 60); --lv-c-on: var(--ink);
    --lv-d: oklch(0.49 0.14 25); --lv-d-t: oklch(0.955 0.022 25); --lv-d-i: oklch(0.41 0.13 25); --lv-d-on: #fff;
    --sans: "Luciole", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --r: 6px; --r-lg: 10px;
    --cols: minmax(160px, 1fr) 196px minmax(0, 1.5fr) minmax(0, 1.5fr);
    --largeur: 1680px;
    /* Anciens noms, conserves pour les feuilles d'impression */
    --bleu: var(--acc); --bleu-fonce: var(--acc-700); --bleu-clair: var(--acc-100);
    --texte: var(--ink); --texte-doux: var(--n-600); --fond: var(--bg); --blanc: var(--paper);
    --bord: var(--line); --bord-fort: var(--n-400);
    --rouge: var(--lv-d); --rouge-clair: var(--lv-d-t); --vert: var(--lv-a); --vert-clair: var(--lv-a-t);
    --orange: var(--lv-c); --jaune-clair: var(--lv-c-t);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); }
body.modale-ouverte { overflow: hidden; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: var(--acc); }
a:hover { color: var(--acc-700); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
::selection { background: var(--acc-200); }
[hidden] { display: none !important; }
/* Masque a l'ecran, present pour les gestionnaires de mots de passe */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Recherche : pas de croix native, l'apparence reste celle des champs */
input[type="search"] { -webkit-appearance: none; appearance: none; }
code { font-size: 12px; background: var(--bg); padding: 1px 6px; border-radius: 4px; }
.ico { width: 18px; height: 18px; flex: none; }
.muted { color: var(--n-600); }

/* --- Boutons ------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font: 700 14px/1.2 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line); padding: 9px 14px; border-radius: var(--r); text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--bg); color: var(--ink); }
.btn:active { background: var(--surface); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; }
.btn-primary, .btn-principal { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn-primary:hover, .btn-principal:hover { background: var(--acc-600); color: #fff; }
.btn-primary:active, .btn-principal:active { background: var(--acc-700); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--acc); padding-inline: 10px; }
.btn-ghost:hover { background: var(--acc-100); color: var(--acc); }
.btn.is-on { background: var(--acc-100); border-color: var(--acc); color: var(--acc); }
.btn-danger { color: var(--lv-d-i); border-color: color-mix(in srgb, var(--lv-d) 45%, transparent); }
.btn-danger:hover { background: var(--lv-d-t); color: var(--lv-d-i); }
.btn-danger-solid { background: var(--lv-d); border-color: var(--lv-d); color: #fff; }
.btn-danger-solid:hover { background: var(--lv-d-i); color: #fff; }
.btn-succes { color: var(--lv-a-i); border-color: color-mix(in srgb, var(--lv-a) 45%, transparent); }
.btn-succes:hover { background: var(--lv-a-t); color: var(--lv-a-i); }
.btn-attention { color: var(--lv-c-i); border-color: color-mix(in srgb, var(--lv-c) 60%, transparent); }
.btn-attention:hover { background: var(--lv-c-t); color: var(--lv-c-i); }
.btn-discret { background: var(--paper); }
.btn-petit { padding: 6px 10px; font-size: 13px; }
.btn-large { width: 100%; padding: 12px; font-size: 15px; }

/* --- Champs ---------------------------------------------------------------- */
.input, .champ input[type="text"], .champ input[type="password"], .champ input[type="date"], .champ select, .champ textarea {
    width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--n-400); border-radius: var(--r);
}
.input:hover, .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--n-600); }
.input:focus-visible, .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { border-color: var(--acc); outline: 3px solid var(--acc-200); outline-offset: 0; }
.input:disabled, textarea:disabled { background: var(--bg); cursor: not-allowed; }
.champ, .field { margin-bottom: 16px; }
.champ > label, .field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.champ .aide, .field small { display: block; font-size: 12px; color: var(--n-600); margin-top: 6px; }
.obligatoire, .field > label em { font-style: normal; color: var(--lv-d); }
.grille-2, .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ligne-champ { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ligne-champ .champ { margin-bottom: 0; min-width: 260px; }
.sel { position: relative; }
.sel select { appearance: none; padding-right: 40px; cursor: pointer; }
.sel .ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--n-600); }
/* Choix de la discipline : champ de recherche et liste filtree (assets/choix-discipline.js) */
.combo { position: relative; }
.combo-champ { position: relative; }
.combo-champ > .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-500); pointer-events: none; }
.combo-champ .input { padding-left: 38px; padding-right: 44px; }
.combo-champ .input.rempli { font-weight: 700; }
.combo-bascule { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--n-600); cursor: pointer; border-radius: var(--r); }
.combo-bascule:hover { background: var(--bg); }
.combo-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 10px 28px rgba(26, 35, 49, 0.16); max-height: min(360px, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.combo-famille { padding: 10px 14px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--n-600); }
.combo-option { padding: 9px 14px; cursor: pointer; font-size: 15px; }
.combo-option.active, .combo-option:hover { background: var(--acc-100); color: var(--acc-700); }
.combo-option[aria-selected="true"] { font-weight: 700; }
.combo-option.autre { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 11px; color: var(--n-700); }
.combo-vide { padding: 9px 14px; font-size: 13px; color: var(--n-600); }

/* --- Bandeau d'en-tete ---------------------------------------------------- */
.band { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--acc); }
.top { display: flex; align-items: center; gap: 24px; max-width: var(--largeur); margin: 0 auto; padding: 17px 32px 14px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.mark { width: 44px; height: 41px; flex: none; display: block; }
.brand-name { font: 700 23px/1 var(--sans); letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--n-600); margin-top: 4px; }
.topnav { display: flex; gap: 2px; flex-wrap: wrap; }
.topnav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: var(--n-700); text-decoration: none; font-size: 14px; font-weight: 700; border-radius: var(--r); }
.topnav a:hover { background: var(--bg); color: var(--ink); }
.top-purge { color: var(--lv-d-i); }
.top-purge .ico { color: var(--lv-d); }
.topnav a.on { color: var(--acc); background: var(--acc-100); }

/* --- Corps de page -------------------------------------------------------- */
.wrap { max-width: var(--largeur); margin: 0 auto; padding: 8px 32px 56px; }
.intro { display: flex; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin: 28px 0 24px; }
.intro h1 { font-size: 32px; margin-bottom: 6px; }
.intro-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lead { max-width: 70ch; color: var(--n-700); text-wrap: pretty; }
.retour { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-decoration: none; margin-bottom: 10px; }
.pied { text-align: center; color: var(--n-500); font-size: 12px; margin: 0 0 24px; }

/* --- Chiffres cles ---------------------------------------------------------- */
.stats { display: inline-flex; max-width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); flex-wrap: wrap; margin-bottom: 24px; }
.intro .stats { margin: 0 0 0 auto; }
.stat { padding: 12px 22px; display: flex; flex-direction: column; gap: 2px; min-width: 118px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .n, .stat-valeur { font: 700 26px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.stat .l, .stat-libelle { font-size: 12px; color: var(--n-600); }
.stat.vert .stat-valeur { color: var(--lv-a-i); }
.stat.orange .stat-valeur { color: var(--lv-c-i); }
.stat.rouge .stat-valeur { color: var(--lv-d-i); }
.stat.gris .stat-valeur { color: var(--n-600); }
.stat.violet .stat-valeur { color: var(--acc); }

/* --- Messages -------------------------------------------------------------- */
.message { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-lg); margin-bottom: 18px; font-size: 14px; border: 1px solid var(--line); background: var(--paper); }
.message .ico { margin-top: 1px; }
.message.erreur { background: var(--lv-d-t); color: var(--lv-d-i); border-color: color-mix(in srgb, var(--lv-d) 35%, transparent); }
.message.succes { background: var(--lv-a-t); color: var(--lv-a-i); border-color: color-mix(in srgb, var(--lv-a) 35%, transparent); }
.message.info { background: var(--acc-100); color: var(--acc); border-color: var(--acc-200); }
.message.attention { background: var(--lv-c-t); color: var(--lv-c-i); border-color: color-mix(in srgb, var(--lv-c) 55%, transparent); }
.message a { color: inherit; font-weight: 700; }

/* --- Sections et panneaux --------------------------------------------------- */
.panneau, .step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.section { margin-bottom: 28px; }
.panneau .section:last-child { margin-bottom: 0; }
.titre-section { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.aide-section { color: var(--n-600); font-size: 13px; margin-bottom: 14px; }
.kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--acc); }
.vide { text-align: center; padding: 40px; color: var(--n-600); }

/* --- Tableaux -------------------------------------------------------------- */
.tbl, table.liste { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); }
.tbl th, table.liste th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--n-600); padding: 9px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.tbl td, table.liste td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.liste tbody tr:hover td { background: var(--bg); }
table.liste tr.inactif td { color: var(--n-500); }
.actions-cellule { white-space: nowrap; }
.actions-cellule form { display: inline; }
table.liste.compacte { font-size: 13px; }
table.liste.compacte td { padding: 5px 10px; line-height: 1.3; }
table.liste.compacte td.date { white-space: nowrap; color: var(--n-600); font-variant-numeric: tabular-nums; }
table.liste.compacte tbody tr:nth-child(even) td { background: #fafaf8; }

/* --- Pastilles d'etat ------------------------------------------------------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-actif { background: var(--lv-a-t); color: var(--lv-a-i); }
.badge-inactif { background: var(--surface); color: var(--n-600); }
.badge-attention { background: var(--lv-c-t); color: var(--lv-c-i); }
.badge-danger { background: var(--lv-d-t); color: var(--lv-d-i); }

/* --- Barres et puces de niveaux A/B/C/D ------------------------------------- */
.bar { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; width: 100%; }
.bar span { display: block; height: 100%; }
.bar .a { background: var(--lv-a); } .bar .b { background: var(--lv-b); } .bar .c { background: var(--lv-c); } .bar .d { background: var(--lv-d); } .bar .z { background: var(--line); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 4px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip i, .disc { font-style: normal; width: 20px; height: 20px; border-radius: 3px; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.chip.a { background: var(--lv-a-t); color: var(--lv-a-i); } .chip.a i, .disc.a { background: var(--lv-a); color: var(--lv-a-on); }
.chip.b { background: var(--lv-b-t); color: var(--lv-b-i); } .chip.b i, .disc.b { background: var(--lv-b); color: var(--lv-b-on); }
.chip.c { background: var(--lv-c-t); color: var(--lv-c-i); } .chip.c i, .disc.c { background: var(--lv-c); color: var(--lv-c-on); }
.chip.d { background: var(--lv-d-t); color: var(--lv-d-i); } .chip.d i, .disc.d { background: var(--lv-d); color: var(--lv-d-on); }
.chip.zero { background: transparent; color: var(--n-500); }
.chip.zero i { background: transparent; box-shadow: inset 0 0 0 1px var(--n-400); color: var(--n-500); }

/* --- Fenetres (modales) ------------------------------------------------------ */
.modale { position: fixed; inset: 0; display: none; place-items: center; padding: 24px; background: color-mix(in srgb, var(--ink) 50%, transparent); z-index: 30; overflow-y: auto; }
.modale.ouverte { display: grid; }
.modale-contenu { width: min(480px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 20px 50px rgba(20, 28, 40, 0.25); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; }
.modale-contenu.large { width: min(820px, 100%); }
.modale-contenu h2 { font-size: 22px; }
.modale-contenu .message { margin-bottom: 0; }
.modale-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.dialog-body { font-size: 14px; color: var(--n-700); }

/* --- Bandeau de confirmation (toast) en haut d'ecran ------------------------ */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--lv-a-i); color: #fff; padding: 11px 18px; border-radius: var(--r); font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 24px rgba(20, 28, 40, 0.18); z-index: 40; }

/* =====================================================================
   Connexion (seule page en colonne centree)
   ===================================================================== */
body.page-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; box-shadow: inset 0 3px 0 var(--acc); }
.carte-connexion { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(20, 28, 40, 0.08); width: 100%; max-width: 420px; padding: 36px 34px; }
.carte-connexion .logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-bottom: 26px; }
.carte-connexion .logo img { width: 64px; height: 60px; }
.carte-connexion .logo h1 { font-size: 28px; }
.carte-connexion .logo p { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--n-600); }

/* =====================================================================
   Tableau de bord : liste des eleves a gauche, fiche de l'eleve a droite
   ===================================================================== */
.board { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.roster { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.search { position: relative; }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-500); }
.search .input { padding-left: 38px; min-height: 42px; }
.roster-list { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; max-height: calc(100vh - 110px); overflow-y: auto; }
.stu { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px 12px 12px; border-left: 3px solid transparent; background: transparent; color: inherit; text-decoration: none; }
.stu + .stu { border-top: 1px solid var(--line-2); }
.stu:hover { background: var(--bg); color: inherit; }
.stu.on { background: var(--acc-100); border-left-color: var(--acc); }
.av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 16px/1 var(--sans); background: var(--surface); color: var(--n-700); }
.stu.on .av { background: var(--acc); color: #fff; }
.stu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stu-name { font-weight: 700; font-size: 15px; }
.stu-meta { font-size: 12px; color: var(--n-600); }
.stu .bar { margin-top: 6px; height: 5px; }
.empty { font-size: 13px; color: var(--n-600); padding: 12px 14px; }

.detail { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.d-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.d-head h2 { font-size: 30px; margin-top: 3px; }
.d-meta { font-size: 14px; color: var(--n-600); margin-top: 4px; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.d-sum { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--bg); border-radius: var(--r); }
.d-sum-t { font-size: 13px; color: var(--n-600); }
.d-sum .bar { height: 10px; }
.sums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sum { display: flex; align-items: center; gap: 10px; }
.sum .n { font: 700 24px/1 var(--sans); min-width: 28px; font-variant-numeric: tabular-nums; }
.sum .l { font-size: 12px; line-height: 1.3; color: var(--n-700); display: flex; gap: 7px; align-items: center; }
.sum .l b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; font-size: 11px; flex: none; }
.sum.a .n { color: var(--lv-a-i); } .sum.a b { background: var(--lv-a); color: var(--lv-a-on); }
.sum.b .n { color: var(--lv-b-i); } .sum.b b { background: var(--lv-b); color: var(--lv-b-on); }
.sum.c .n { color: var(--lv-c-i); } .sum.c b { background: var(--lv-c); color: var(--lv-c-on); }
.sum.d .n { color: var(--lv-d-i); } .sum.d b { background: var(--lv-d); color: var(--lv-d-on); }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--bg); }
.tbl tbody tr.is-sel td { background: var(--acc-100); }
.tbl td:last-child { text-align: right; }
.tbl .col-sel { width: 36px; }
.dt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dt span { color: var(--n-600); margin-left: 8px; font-variant-numeric: tabular-nums; }
.lvcell { display: flex; align-items: center; gap: 16px; }
.lvcell .bar { width: 110px; flex: none; }
.ck { appearance: none; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--n-500); background: var(--paper); display: grid; place-items: center; cursor: pointer; margin: 0; }
.ck:checked { background: var(--acc); border-color: var(--acc); }
.ck:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.selbar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--r-lg); background: var(--ink); color: #eef0f3; position: sticky; bottom: 16px; font-size: 14px; }
.selbar .grow { margin-right: auto; }
.selbar .btn-ghost { color: #d7dae0; }
.selbar .btn-ghost:hover { background: #2a3444; color: #fff; }
.selbar .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.selbar .btn-primary:hover { background: #e6e8ec; color: var(--ink); }

/* Apercu d'un formulaire */
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.pv-row .nm { font-weight: 700; }
.pv-row .lvl { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pv-row .none { color: var(--n-500); }
.pv-row .com { grid-column: 1 / -1; font-size: 13px; color: var(--n-700); margin-top: -2px; }
.pv-row .com b { color: var(--ink); }
.pv-evol { background: var(--bg); padding: 12px 14px; border-radius: var(--r); font-size: 14px; white-space: pre-wrap; }

/* =====================================================================
   Formulaire d'observation (enseignant)
   ===================================================================== */
.fwrap { max-width: var(--largeur); margin: 0 auto; padding: 8px 32px 150px; display: flex; flex-direction: column; gap: 20px; }
.fwrap .intro { margin: 28px 0 6px; }
.step { gap: 20px; padding: 24px 26px 26px; }
.step-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.num { width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--sans); flex: none; }
.step-h h3 { font-size: 22px; }
.fwrap .input { min-height: 42px; font-size: 15px; }
.fwrap .field { margin-bottom: 0; }
.legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 13px; line-height: 1.35; text-wrap: pretty; }
.lg .disc { width: 24px; height: 24px; font-size: 12px; border-radius: 4px; }
.lg em { font-style: normal; font-weight: 700; display: block; margin-top: 2px; }
.lg.a { background: var(--lv-a-t); color: var(--lv-a-i); } .lg.b { background: var(--lv-b-t); color: var(--lv-b-i); }
.lg.c { background: var(--lv-c-t); color: var(--lv-c-i); } .lg.d { background: var(--lv-d-t); color: var(--lv-d-i); }
.acts-head { display: grid; grid-template-columns: var(--cols); gap: 16px; padding: 9px 12px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--n-600); background: var(--bg); border-radius: var(--r); }
/* Bandeau de groupe d'activites (vert fonce, texte blanc) */
.grp { font: 700 19px/1.2 var(--sans); color: #fff; background: var(--grp); padding: 10px 14px; border-radius: var(--r); margin-top: 22px; letter-spacing: 0.01em; }
.acts > .grp:first-child { margin-top: 8px; }
.act { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: start; padding: 12px; border-bottom: 1px solid var(--line-2); transition: opacity 0.15s; }
.act-name { font-weight: 700; font-size: 15px; padding-top: 9px; display: flex; gap: 8px; align-items: center; }
.act-name .ico { color: var(--lv-a); width: 16px; height: 16px; }
.picker { display: flex; gap: 6px; }
.pk { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--n-400); background: var(--paper); font: 700 15px var(--sans); color: var(--n-700); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pk:disabled { cursor: not-allowed; }
.pk.a:hover:not(:disabled) { background: var(--lv-a-t); border-color: var(--lv-a); color: var(--lv-a-i); }
.pk.b:hover:not(:disabled) { background: var(--lv-b-t); border-color: var(--lv-b); color: var(--lv-b-i); }
.pk.c:hover:not(:disabled) { background: var(--lv-c-t); border-color: var(--lv-c); color: var(--lv-c-i); }
.pk.d:hover:not(:disabled) { background: var(--lv-d-t); border-color: var(--lv-d); color: var(--lv-d-i); }
.pk.a[aria-pressed="true"] { background: var(--lv-a); border-color: var(--lv-a); color: var(--lv-a-on); }
.pk.b[aria-pressed="true"] { background: var(--lv-b); border-color: var(--lv-b); color: var(--lv-b-on); }
.pk.c[aria-pressed="true"] { background: var(--lv-c); border-color: var(--lv-c); color: var(--lv-c-on); }
.pk.d[aria-pressed="true"] { background: var(--lv-d); border-color: var(--lv-d); color: var(--lv-d-on); }
.req-note { font-size: 12px; font-weight: 700; color: var(--lv-d-i); margin-top: 7px; display: flex; gap: 5px; align-items: center; }
.req-note .ico { width: 14px; height: 14px; }
textarea.input { min-height: 40px; height: 40px; padding: 9px 12px; resize: vertical; font-size: 14px; line-height: 1.4; }
textarea.input.evol { height: 110px; }
textarea.need { border-color: var(--lv-d); background: var(--lv-d-t); }
textarea.need::placeholder { color: var(--lv-d-i); }
/* Regle bloquante C/D : tant que « Points d'appui » manque, le reste de la grille est inerte */
.acts.verrouillee .act:not(.bloquante) { opacity: 0.38; }
.act.bloquante { background: var(--lv-d-t); border-radius: var(--r); }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20, 28, 40, 0.06); z-index: 10; }
.sb-in { max-width: var(--largeur); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 28px; }
.prog { display: flex; flex-direction: column; gap: 7px; width: 260px; flex: none; }
.prog-t { font-size: 14px; color: var(--n-700); }
.prog-t b { font: 700 20px var(--sans); color: var(--ink); }
.status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--n-700); margin-right: auto; }
.status.ok { color: var(--lv-a-i); }
.status.warn { color: var(--lv-d-i); }
.sb-act { display: flex; gap: 8px; }

/* Fenetre d'accueil du formulaire */
.instructions .bloc { display: flex; flex-direction: column; gap: 6px; }
.instructions .bloc h3 { font-size: 15px; }
.instructions ul { margin: 0 0 0 18px; padding: 0; line-height: 1.55; font-size: 14px; color: var(--n-700); }
.instructions li { margin-bottom: 4px; }
.instructions li.regle { color: var(--lv-d-i); }
.instructions .mention { background: var(--bg); border-radius: var(--r); padding: 12px 14px; }
.instructions .mention p { font-size: 13px; line-height: 1.55; color: var(--n-700); }
.case-compris { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }

/* =====================================================================
   Petits ecrans
   ===================================================================== */
@media screen and (max-width: 1000px) {
    .top { flex-wrap: wrap; padding: 14px 18px; }
    .topnav { order: 3; width: 100%; }
    .wrap, .fwrap { padding-left: 16px; padding-right: 16px; }
    .board { grid-template-columns: 1fr; }
    .roster { position: static; }
    .roster-list { max-height: none; }
    .legend, .sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intro .stats { margin-left: 0; }
    .act { grid-template-columns: 1fr 196px; }
    .acts-head { display: none; }
    .act textarea { grid-column: 1 / -1; }
    .grille-2, .grid2 { grid-template-columns: 1fr; }
    .sb-in { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
    .prog { width: 100%; }
    .pv-row { grid-template-columns: 1fr; }
}

/* Impression (page de garde, fiches) : feuille autonome assets/impression.css */

/* Tableau de bord : colonne de cases et barre de selection visibles en mode selection seulement */
.detail:not(.mode-selection) .col-sel, .detail:not(.mode-selection) .selbar { display: none; }
.detail.mode-selection .tbl tbody tr:hover td { background: var(--acc-100); }

/* Telephone : legende et repartition sur une colonne */
@media screen and (max-width: 600px) {
    .legend, .sums { grid-template-columns: 1fr; }
    .lg { padding: 8px 12px; }
    .intro h1 { font-size: 26px; }
    .step, .panneau, .detail { padding: 18px 16px; }
    .brand-sub { letter-spacing: 0.05em; }
}

/* Page Disciplines (Vie scolaire) : liste par famille, filtre */
.recherche-liste { max-width: 420px; margin: 4px 0 14px; }
.famille-titre { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--n-600); margin: 22px 0 8px; }
table.disciplines td:first-child { width: 46%; }
table.disciplines td:nth-child(3) { width: 10%; }