/* Feuille de style applicative posée par-dessus Bootstrap.
   Mobile d'abord : la mise en page à deux colonnes n'apparaît qu'à partir de 768px,
   en dessous le menu est replié derrière un bouton (§8 de la spec).

   Aucune dépendance externe : pas de police d'icônes, pas de bibliothèque de graphiques.
   Les icônes sont du SVG inline (voir Icon.razor) et les visualisations du tableau de bord
   sont du SVG produit côté serveur. Zéro requête réseau supplémentaire — c'est la contrainte
   qui commande, les écoles visées travaillent sur des liaisons instables. */

/* ---------- Identité visuelle EduConnect ----------

   Bleu pétrole + ambre. Volontairement distinct du bleu Bootstrap (#0d6efd, teinte OKLCH ~262)
   et de l'ancien bleu marine : la teinte 232 tire vers le cyan, ce qui se voit immédiatement
   à côté d'un bouton Bootstrap par défaut.

   La rampe est construite en OKLCH à teinte constante, donc régulière à l'œil — un dégradé
   fait en RVB vire au gris dans les tons moyens. Les valeurs qui servent aux graphiques ont été
   validées (bande de clarté, plancher de chroma, contraste sur le fond de carte) ; les modifier
   sans revalider casserait la lisibilité des visualisations, en particulier pour un daltonien. */

:root {
    --ec-primary-50: #ebf9ff;
    --ec-primary-100: #d5f2ff;
    --ec-primary-200: #abe2ff;
    --ec-primary-300: #77c9f3;
    --ec-primary-350: #5dbae8;  /* piste du méteur : plancher ordinal 2:1 sur fond blanc */
    --ec-primary-400: #3ea7d8;
    --ec-primary-500: #0082b0;  /* couleur des marques de graphique */
    --ec-primary-600: #00688f;  /* couleur d'interface : boutons, liens, titres de carte */
    --ec-primary-700: #004f6e;
    --ec-primary-800: #00384f;  /* fond du menu latéral */
    --ec-primary-900: #002739;

    --ec-accent-300: #f9aa60;
    --ec-accent-400: #e68c2c;   /* accent : marqueur d'élément actif, liseré */
    --ec-accent-500: #d27900;
    --ec-accent-600: #a96000;   /* accent en texte : contraste 4,8 sur blanc */

    /* Alias historiques : tout le code existant les utilise déjà. */
    --ec-primary: var(--ec-primary-600);
    --ec-primary-dark: var(--ec-primary-800);
    --ec-accent: var(--ec-accent-500);

    /* Surfaces et encres */
    --ec-surface: #f2f5f7;      /* plan de page */
    --ec-card: #ffffff;         /* surface de carte, et fond des graphiques */
    --ec-border: #dde4e8;
    --ec-ink: #10161a;
    --ec-ink-2: #4d5b63;
    --ec-ink-muted: #6d7c85;

    /* Graphiques */
    --ec-viz-series: var(--ec-primary-500);
    --ec-viz-track: var(--ec-primary-350);
    --ec-viz-grid: #e6ebee;
    --ec-viz-axis: #cdd6db;

    --ec-radius: 0.75rem;
    --ec-radius-sm: 0.5rem;
    --ec-shadow: 0 1px 2px rgba(16, 22, 26, 0.05), 0 1px 3px rgba(16, 22, 26, 0.04);
    --ec-shadow-lg: 0 4px 12px rgba(16, 22, 26, 0.08), 0 1px 3px rgba(16, 22, 26, 0.05);
    --ec-nav-width: 16rem;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--ec-surface);
    color: var(--ec-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Habillage Bootstrap ----------

   Bootstrap 5.1 code les couleurs de composant en dur, avant la refonte en variables CSS
   de la 5.3 : surcharger --bs-primary ne suffirait pas, il faut reprendre les classes une à une.
   Seules celles réellement employées dans les écrans sont traitées. */

a {
    color: var(--ec-primary-600);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--ec-primary-700);
}

.btn {
    border-radius: var(--ec-radius-sm);
    font-weight: 500;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ec-primary-400);
    box-shadow: 0 0 0 0.2rem rgba(0, 130, 176, 0.22);
    outline: none;
}

.btn-primary {
    background-color: var(--ec-primary-600);
    border-color: var(--ec-primary-600);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active {
    background-color: var(--ec-primary-700);
    border-color: var(--ec-primary-700);
}

.btn-outline-primary {
    color: var(--ec-primary-600);
    border-color: var(--ec-primary-400);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ec-primary-600);
    border-color: var(--ec-primary-600);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--ec-ink-2);
    border-color: var(--ec-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--ec-ink-2);
    border-color: var(--ec-ink-2);
    color: #fff;
}

.btn-link {
    color: var(--ec-primary-600);
}

.form-control,
.form-select {
    border-color: var(--ec-border);
    border-radius: var(--ec-radius-sm);
}

.form-label {
    font-weight: 500;
    color: var(--ec-ink-2);
    margin-bottom: 0.3rem;
}

.form-check-input:checked {
    background-color: var(--ec-primary-600);
    border-color: var(--ec-primary-600);
}

.text-muted {
    color: var(--ec-ink-muted) !important;
}

/* Les alertes Bootstrap 5.1 sont pastel et bordées ; ici un liseré latéral, plus discret
   et plus lisible sur un petit écran. */
.alert {
    border: 1px solid var(--ec-border);
    border-left-width: 4px;
    border-radius: var(--ec-radius-sm);
    background-color: var(--ec-card);
    color: var(--ec-ink);
}

.alert-info {
    border-left-color: var(--ec-primary-500);
}

.alert-warning {
    border-left-color: var(--ec-accent-500);
}

.alert-success {
    border-left-color: #0ca30c;
}

.alert-danger {
    border-left-color: #d03b3b;
}

.table {
    --bs-table-hover-bg: var(--ec-primary-50);
    color: var(--ec-ink);
}

.table > thead {
    color: var(--ec-ink-2);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(0, 130, 176, 0.035);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Pastille « Sensible » de l'écran des rôles : l'ambre de la marque, pas le jaune de Bootstrap. */
.bg-warning {
    background-color: var(--ec-accent-300) !important;
}

/* ---------- Écran des rôles ---------- */

/* Permissions groupées par module : une colonne sur téléphone, deux à partir de 768 px. */
.permission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .permission-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.permission-group {
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    padding: 0.75rem 1rem;
    margin: 0;
}

.permission-group legend {
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ec-ink-2);
    padding: 0 0.25rem;
    margin-bottom: 0.25rem;
}

.permission-group .form-check {
    margin-bottom: 0.35rem;
}

/* ---------- Structure ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    padding: 1rem;
    flex: 1 1 auto;
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}

.page-header h1 {
    margin-bottom: 0;
}

/* ---------- Barre supérieure ---------- */

.app-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--ec-card);
    border-bottom: 1px solid var(--ec-border);
    box-shadow: 0 1px 2px rgba(16, 22, 26, 0.04);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-school {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* Pastille aux initiales de l'école : repère visuel immédiat pour une secrétaire qui gère
   deux établissements, avant même d'avoir lu le nom. */
.school-badge {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--ec-radius-sm);
    background: linear-gradient(135deg, var(--ec-primary-600), var(--ec-primary-800));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topbar-school-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.school-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.school-year {
    font-size: 0.78rem;
    color: var(--ec-ink-muted);
}

.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-name {
    display: none;
    font-weight: 500;
    color: var(--ec-ink-2);
}

.user-role {
    background: var(--ec-primary-50);
    color: var(--ec-primary-700);
    border: 1px solid var(--ec-primary-200);
}

.logout-form {
    margin: 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Icônes ---------- */

/* Les propriétés de tracé sont ici et non en attributs sur chaque <svg> : elles sont héritées,
   donc posées une fois pour toutes et transmises aux formes. Voir Icon.razor. */
.ec-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.18em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Photo d'élève ----------

   Pas de bibliothèque d'avatars : un cercle de couleur avec l'initiale, en CSS pur, pour l'état
   sans photo — cohérent avec le reste du projet (aucune dépendance ajoutée à wwwroot). */

.ec-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ec-primary-100);
    color: var(--ec-primary-600);
    font-weight: 600;
    flex: 0 0 auto;
}

.ec-avatar-sm {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
}

.ec-avatar-lg {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
}

/* ---------- Menu latéral (repli CSS, sans JavaScript) ----------

   Le mécanisme est inchangé : une case à cocher masquée, un <label> pour la basculer,
   et des sélecteurs de frère pour afficher le menu. Aucun JavaScript n'intervient, le menu
   fonctionne donc avant même que le circuit Blazor soit établi. */

.nav-toggle-input {
    display: none;
}

.nav-toggle-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.55rem;
    cursor: pointer;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-sm);
    background: var(--ec-card);
    margin: 0;
}

.nav-toggle-button:hover {
    background: var(--ec-primary-50);
    border-color: var(--ec-primary-200);
}

.nav-toggle-button span {
    display: block;
    height: 2px;
    background: var(--ec-primary-700);
    border-radius: 1px;
}

/* Voile cliquable : refermer le menu en touchant à côté, toujours sans JavaScript. */
.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(0, 39, 57, 0.45);
    margin: 0;
}

.nav-toggle-input:checked ~ .nav-scrim {
    display: block;
}

.app-nav {
    background: linear-gradient(180deg, var(--ec-primary-900) 0%, var(--ec-primary-800) 100%);
    color: #fff;
    width: var(--ec-nav-width);
    flex: 0 0 var(--ec-nav-width);
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.nav-toggle-input:checked ~ .app-nav {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    box-shadow: var(--ec-shadow-lg);
}

.nav-brand a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1.1rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.nav-brand .ec-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ec-accent-300);
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0.6rem 1.5rem;
}

/* Intertitre de groupe : sépare le pédagogique du financier sans ajouter de trait. */
.nav-group {
    padding: 1rem 0.4rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.nav-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.94rem;
    border-radius: var(--ec-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-links a .ec-icon {
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.nav-links a:hover .ec-icon {
    color: rgba(255, 255, 255, 0.85);
}

/* État actif : pastille pleine plus le repère ambre à gauche. Deux signaux plutôt qu'un,
   la seule teinte ne suffit pas sur un écran de téléphone en plein soleil. */
.nav-links a.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
}

.nav-links a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ec-accent-400);
}

.nav-links a.active .ec-icon {
    color: var(--ec-accent-300);
}

/* Groupes repliables du menu du Directeur : <details>/<summary> natifs, aucun JavaScript.
   L'en-tête reprend l'intertitre .nav-group (inchangé, encore utilisé par les autres comptes),
   en plus lisible : blanc à 65 % = 6,15:1 sur --ec-primary-800, le bas du dégradé (7,25:1 en
   haut), 5,12:1 sous le fond de survol. L'intertitre à 45 % n'atteint que 3,77 à 4,2:1. */
.nav-section > details > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;            /* cible tactile de 44 px sur téléphone */
    margin-top: 0.35rem;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    border-radius: var(--ec-radius-sm);
    cursor: pointer;
    list-style: none;               /* masque le triangle natif (Firefox, Chrome) */
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-section > details > summary::-webkit-details-marker {
    display: none;                  /* masque le triangle natif (Safari) */
}

.nav-section > details > summary:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.nav-section > details > summary:focus-visible {
    outline: 2px solid var(--ec-accent-300);
    outline-offset: -2px;
}

/* Le chevron prend la teinte du libellé, poussé à droite, et tourne à l'ouverture. */
.nav-chevron {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.nav-section > details[open] > summary .nav-chevron,
.cycle-section > details[open] > summary .nav-chevron {
    transform: rotate(90deg);
}

/* Repère du groupe de la page courante, visible même si le Directeur l'a replié :
   une pastille ambre (--ec-accent-400 : 4,86:1 sur --ec-primary-800, 6,04:1 en haut). */
.nav-section-current > span::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.45rem;
    vertical-align: 0.1em;
    border-radius: 50%;
    background: var(--ec-accent-400);
}

.nav-sublinks {
    list-style: none;
    margin: 0;
    padding: 0.1rem 0 0.35rem 0.5rem;
}

/* ---------- Tableau de bord ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: var(--ec-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card:hover {
    box-shadow: var(--ec-shadow-lg);
    transform: translateY(-1px);
}

/* Pastille d'icône : c'est elle qui porte la couleur de marque, pas le chiffre. Un grand
   nombre coloré se lit moins bien qu'un grand nombre en encre pleine. */
.stat-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--ec-radius-sm);
    background: var(--ec-primary-50);
    color: var(--ec-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.15rem;
}

.stat-icon .ec-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 680;
    color: var(--ec-ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Le libellé de l'année scolaire est une chaîne, pas un nombre : il doit tenir sur la carte. */
.stat-value-text {
    font-size: 1.35rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--ec-ink-muted);
}

/* ---------- Visualisations du tableau de bord ----------

   Tout est calculé côté serveur et rendu en SVG inline : aucune requête réseau, aucun script.
   Les animations sont des keyframes CSS, et se taisent si l'utilisateur a demandé moins
   de mouvement. */

.viz-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.viz-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1.25rem;
    box-shadow: var(--ec-shadow);
    min-width: 0;
}

.viz-head {
    margin-bottom: 1rem;
}

.viz-title {
    font-size: 0.98rem;
    font-weight: 640;
    color: var(--ec-ink);
    margin: 0;
}

.viz-sub {
    font-size: 0.8rem;
    color: var(--ec-ink-muted);
    margin: 0.15rem 0 0;
}

/* Chiffre de tête : chiffres proportionnels, pas tabulaires — à cette taille les chasses
   égales font paraître le nombre déchiré. */
.viz-hero {
    font-size: 2.6rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ec-ink);
    margin: 0 0 0.75rem;
}

.viz-hero small {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ec-ink-muted);
    letter-spacing: 0;
}

/* Méteur : une part contre un total. La piste est un ton clair de la même rampe, jamais
   un gris — c'est ce qui fait lire l'état sur toute la longueur de la barre. */
.meter {
    height: 0.7rem;
    border-radius: 999px;
    background: var(--ec-viz-track);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ec-viz-series);
    width: var(--ec-meter-value, 0%);
    animation: ec-meter-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ec-meter-grow {
    from { width: 0; }
    to { width: var(--ec-meter-value, 0%); }
}

.viz-legend {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    margin: 1rem 0 0;
    font-size: 0.88rem;
}

.viz-legend dt {
    font-weight: 400;
    color: var(--ec-ink-muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.viz-legend dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Le repère de série est une pastille à côté du texte : jamais du texte teinté à la couleur
   de la donnée, illisible dès que la teinte s'éclaircit. */
.viz-key {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 3px;
    flex: 0 0 auto;
    background: var(--ec-viz-series);
}

.viz-key-track {
    background: var(--ec-viz-track);
}

.viz-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-chart text {
    font-family: inherit;
    font-size: 11px;
    fill: var(--ec-ink-muted);
}

.viz-chart .viz-value {
    fill: var(--ec-ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.viz-chart .viz-cat {
    fill: var(--ec-ink-2);
}

.viz-chart .viz-grid-line {
    stroke: var(--ec-viz-grid);
    stroke-width: 1;
}

.viz-chart .viz-axis-line {
    stroke: var(--ec-viz-axis);
    stroke-width: 1;
}

.viz-bar {
    fill: var(--ec-viz-series);
    transform-box: fill-box;
    transform-origin: left center;
    animation: ec-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ec-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.viz-line {
    fill: none;
    stroke: var(--ec-viz-series);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ec-line-draw 1.1s ease-out forwards;
}

/* pathLength="100" est posé sur le tracé : la longueur est donc normalisée et le dash
   fonctionne sans avoir à mesurer la courbe. */
@keyframes ec-line-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ec-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Anneau à la couleur de la surface : le point de fin reste lisible là où il croise la courbe. */
.viz-dot {
    fill: var(--ec-viz-series);
    stroke: var(--ec-card);
    stroke-width: 2;
    animation: ec-fade-in 0.4s ease-out 0.9s both;
}

.viz-empty {
    font-size: 0.88rem;
    color: var(--ec-ink-muted);
    margin: 0;
}

/* Vue tabulaire : chaque valeur reste atteignable sans survol, avec l'élément natif
   <details> — donc sans JavaScript. */
.viz-table-toggle {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--ec-ink-muted);
}

.viz-table-toggle > summary {
    cursor: pointer;
    color: var(--ec-primary-600);
}

.viz-table-toggle table {
    width: 100%;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.viz-table-toggle th,
.viz-table-toggle td {
    padding: 0.15rem 0.35rem;
    border-bottom: 1px solid var(--ec-viz-grid);
    text-align: left;
}

.viz-table-toggle td:last-child,
.viz-table-toggle th:last-child {
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .meter-fill,
    .viz-bar,
    .viz-line,
    .viz-dot,
    .stat-card,
    .nav-chevron,
    .nav-section > details > summary,
    .cycle-section > details > summary {
        animation: none;
        transition: none;
    }

    .viz-line {
        stroke-dashoffset: 0;
    }
}

/* ---------- Formulaires et fiches ---------- */

.form-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1.25rem;
    max-width: 45rem;
    box-shadow: var(--ec-shadow);
}

.form-section {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ec-primary-700);
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--ec-border);
}

.form-section:first-of-type {
    margin-top: 0;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    max-width: 40rem;
}

.search-bar .form-control,
.search-bar .form-select {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Les boutons d'action d'une ligne de tableau : chaque action est son propre formulaire POST,
   d'où le besoin de les réaligner horizontalement. */
.table-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.table-actions form {
    margin: 0;
}

/* Barre de filtres à six critères (/notifications) : plus large que la recherche simple, et
   chaque libellé reste attaché à son champ quand la barre passe à la ligne. */
.search-bar-wide {
    max-width: 60rem;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 15rem;
    min-width: 0;
}

.search-field .form-label {
    flex: 0 0 3.5rem;
}

/* Deux compteurs côte à côte, y compris sur un téléphone. */
.stat-grid-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Message d'erreur de l'API WhatsApp sur /notifications : texte technique sans espaces (URL,
   identifiants), qui sinon élargirait la colonne et déborderait du tableau sur un téléphone. */
.notification-error {
    max-width: 18rem;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    color: var(--ec-ink-2);
}

.reenroll-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.reenroll-row .form-select {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Saisie de paiement : formulaire à gauche, solde à droite sur grand écran, empilés sur mobile. */
.finance-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.balance-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1.25rem;
    box-shadow: var(--ec-shadow);
}

.balance-card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ec-primary-700);
    margin-bottom: 0.75rem;
}

.balance-card dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    margin: 0;
}

.balance-card dt {
    font-weight: 400;
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
}

.balance-card dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.balance-student {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Affectation des enseignants : une carte par classe, chaque formulaire sur sa propre ligne. */
.assignment-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--ec-shadow);
}

.assignment-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.assignment-card h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ec-primary-700);
    margin: 0;
}

.assignment-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.assignment-row .form-select {
    flex: 1 1 11rem;
    min-width: 0;
}

/* Pastilles d'état (complétude d'une classe, cycle d'un enseignant). Classes propres plutôt que
   les badges bg-success / bg-secondary de Bootstrap, qui garderaient leurs couleurs par défaut.
   Encre sur fond clair : 6,2:1 (vert), 5,6:1 (ambre), 6,5:1 (neutre). */
.ec-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--ec-border);
    border-radius: 999px;
    background: var(--ec-surface);
    color: var(--ec-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: 0.1em;
}

.ec-pill-ok {
    background: #e4f4e4;
    border-color: #bfe3bf;
    color: #106b10;
}

.ec-pill-todo {
    background: #fdeedd;
    border-color: #f6d3a8;
    color: var(--ec-accent-600);
}

/* /matieres : filtre par cycle (liens GET) et pastilles des cycles d'une matière. */
.cycle-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.cycle-filter .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.subject-cycles {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Cases « Cycles enseignés » (/utilisateurs) : une ligne de 44 px par case sur téléphone. */
.cycle-legend {
    float: none;
    font-size: inherit;
}

.cycle-checks {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
}

.cycle-checks .form-check {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 0;
}

.cycle-checks .form-check-input {
    margin-top: 0;
}

.cycle-checks .form-check-label {
    padding-left: 0.4rem;
}

/* Blocs par cycle (/classes, /affectations) : la mécanique des groupes repliables du menu
   (.nav-section) — <details>/<summary> natifs, triangle masqué, chevron .nav-chevron qui tourne à
   l'ouverture, aucun JavaScript — avec les teintes d'une surface claire. */
.cycle-section {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    box-shadow: var(--ec-shadow);
    margin-bottom: 0.75rem;
}

.cycle-section > details > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    min-height: 2.75rem;            /* cible tactile de 44 px */
    padding: 0.45rem 1rem;
    border-radius: var(--ec-radius);
    color: var(--ec-primary-700);
    cursor: pointer;
    list-style: none;               /* masque le triangle natif (Firefox, Chrome) */
    user-select: none;
    transition: background-color 0.15s ease;
}

.cycle-section > details > summary::-webkit-details-marker {
    display: none;                  /* masque le triangle natif (Safari) */
}

.cycle-section > details > summary:hover {
    background: var(--ec-primary-50);
}

.cycle-section > details > summary:focus-visible {
    outline: 2px solid var(--ec-primary-600);
    outline-offset: -2px;
}

.cycle-section > details[open] > summary {
    border-bottom: 1px solid var(--ec-border);
    border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

.cycle-title {
    font-weight: 600;
}

.cycle-meta {
    color: var(--ec-ink-muted);
    font-size: 0.85rem;
}

.cycle-section > details > .table-responsive {
    padding: 0 0.75rem 0.25rem;
}

.cycle-section .table {
    margin-bottom: 0;
}

/* /affectations : liste des classes à gauche, détail de la classe choisie à droite. Sous 992 px
   (téléphone, et tablette où le menu latéral prend déjà la place d'une colonne), un seul panneau :
   la liste sans classe choisie, le détail seul avec son lien « ← Classes » sinon. */
.md-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.md-search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.md-search .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.md-search .form-control,
.md-search .btn {
    min-height: 2.75rem;
}

.md-class-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.5rem 0.5rem;
}

.md-class-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--ec-radius-sm);
    color: var(--ec-ink);
    text-decoration: none;
}

.md-class-link:hover {
    background: var(--ec-primary-50);
    color: var(--ec-ink);
}

/* Classe choisie : fond bleu pâle et liseré ambre, le repère de l'entrée active du menu. */
.md-class-link.active {
    background: var(--ec-primary-100);
    box-shadow: inset 3px 0 0 var(--ec-accent-400);
    font-weight: 600;
}

.md-back {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.md-empty {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1rem 1.25rem;
}

.md-empty h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ec-primary-700);
}

.md-empty h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 1rem;
}

.md-empty .md-class-list {
    padding: 0;
}

.assignment-table td {
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .md-has-selection > .md-master,
    .md-layout:not(.md-has-selection) > .md-detail {
        display: none;
    }

    /* Au doigt : 44 px pour chaque sélecteur et chaque bouton du détail. */
    .md-detail .btn,
    .md-detail .form-select {
        min-height: 2.75rem;
    }
}

@media (min-width: 992px) {
    .md-layout {
        grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
        align-items: start;
    }

    .md-back {
        display: none;
    }
}

/* Saisie des notes : les trois sélecteurs de contexte au-dessus du tableau. */
.mark-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
    max-width: 45rem;
}

/* Appréciations : résultats du trimestre sous le nom de l'élève, dans la même colonne, pour
   que la zone de saisie garde toute sa largeur sur téléphone. Détail par matière replié avec
   <details>, sans JavaScript. */
.remark-class-average {
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.remark-results {
    font-size: 0.85rem;
    color: var(--ec-ink-muted);
    font-variant-numeric: tabular-nums;
}

.remark-results strong {
    color: var(--ec-ink);
}

.remark-marks {
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.remark-marks > summary {
    cursor: pointer;
    color: var(--ec-primary-600);
}

.remark-marks ul {
    list-style: none;
    padding-left: 0;
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Reçu groupé sur /paiements : « 3 échéances », détail replié en <details>, sans JavaScript. */
.receipt-lines {
    font-size: 0.85rem;
}

.receipt-lines > summary {
    cursor: pointer;
    color: var(--ec-primary-600);
}

.receipt-lines ul {
    list-style: none;
    padding-left: 0;
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* Une ligne du détail ne se coupe pas : sur téléphone le tableau défile déjà horizontalement,
   et « Tranche 1 / 3 — 30 000 Fdj » éclaté sur trois lignes ne se lit plus. */
.receipt-lines li {
    white-space: nowrap;
}

/* Saisie de plusieurs échéances (/paiements/nouveau) : une ligne par échéance non soldée. */
.multi-lines {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0.75rem;
}

.multi-lines > li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ec-border);
}

.multi-line-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.multi-line-head label {
    flex: 1 1 12rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
}

.multi-line-head .form-check-input {
    margin: 0;
    flex: none;
}

.multi-line-head .btn {
    min-height: 44px;
}

.multi-line-meta {
    font-size: 0.85rem;
    color: var(--ec-ink-muted);
    font-variant-numeric: tabular-nums;
}

.multi-line-amount {
    margin-top: 0.35rem;
    max-width: 14rem;
}

.multi-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Téléphone : une ligne par élève devient un bloc — nom et résultats au-dessus, zone de saisie
   sur toute la largeur en dessous. Les en-têtes restent lus par les lecteurs d'écran (chaque
   champ porte aussi son aria-label). Le tableau revient à partir de la tablette. */
.remark-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.remark-table tbody,
.remark-table tr,
.remark-table td {
    display: block;
    width: 100%;
}

.remark-table td {
    border-bottom-width: 0;
}

.remark-table td.remark-student {
    padding-bottom: 0.25rem;
}

.remark-table tr {
    border-bottom: 1px solid var(--ec-border);
}

/* Devoirs (/devoirs) : liste des devoirs du trimestre, une ligne cliquable de 44 px au moins
   par devoir. */
.assessment-items {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.assessment-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-card);
    color: inherit;
    text-align: left;
    box-shadow: var(--ec-shadow);
}

.assessment-item:hover {
    border-color: var(--ec-primary-350);
}

.assessment-item:focus-visible {
    outline: 2px solid var(--ec-primary-600);
    outline-offset: 2px;
}

.assessment-item-title {
    font-weight: 600;
    color: var(--ec-primary-700);
    flex: 1 1 10rem;
}

.assessment-item-meta {
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* En-tête du devoir : titre, date, barème. Empilés sur téléphone. */
.assessment-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
    max-width: 45rem;
}

/* Grille de saisie. Téléphone : une ligne par élève devient un bloc — nom au-dessus, note et
   « Absent » dessous, commentaire replié ; en-têtes gardés pour les lecteurs d'écran. Le
   tableau revient à partir de la tablette (même construction que .remark-table). */
.assessment-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.assessment-table tbody,
.assessment-table tr,
.assessment-table td {
    display: block;
    width: 100%;
}

.assessment-table td {
    border-bottom-width: 0;
    padding: 0.25rem 0.5rem;
}

.assessment-table td.assessment-student {
    font-weight: 600;
    padding-top: 0.6rem;
}

.assessment-table tr {
    border-bottom: 1px solid var(--ec-border);
    padding-bottom: 0.4rem;
}

.assessment-score {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assessment-score .form-control {
    width: 6.5rem;
    min-height: 2.75rem;
    font-variant-numeric: tabular-nums;
}

.assessment-absent {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    cursor: pointer;
}

.assessment-absent .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.assessment-comment > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ec-primary-600);
    cursor: pointer;
}

.assessment-comment .form-control {
    min-height: 2.75rem;
}

.assessment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.assessment-actions .btn,
.assessment-header .form-control {
    min-height: 2.75rem;
}

/* Comptes parents (/parents) : cases de rattachement d'un enfant, une ligne de 44 px. */
.parent-candidate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.parent-candidate .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

.parent-identity {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.parent-identity dt {
    font-weight: 400;
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
}

.parent-identity dd {
    margin: 0;
}

/* Portail parent : une colonne, lisible à 375 px. */
.parent-children {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.parent-child-card {
    display: grid;
    gap: 0.15rem;
    min-height: 2.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-card);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--ec-shadow);
}

a.parent-child-card:hover {
    border-color: var(--ec-primary-350);
}

a.parent-child-card:focus-visible {
    outline: 2px solid var(--ec-primary-600);
    outline-offset: 2px;
}

.parent-child-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ec-primary-700);
}

.parent-child-class,
.parent-assessment-date {
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
}

.parent-child-action {
    color: var(--ec-primary-600);
    font-size: 0.9rem;
}

.parent-child-card-muted .parent-child-name {
    color: var(--ec-ink-2);
}

.parent-term-form {
    max-width: 22rem;
    margin-bottom: 1rem;
}

.parent-term-form .form-select,
.parent-term-form .btn {
    min-height: 2.75rem;
}

.parent-subject {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--ec-shadow);
}

.parent-subject h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ec-primary-700);
    margin-bottom: 0.5rem;
}

.parent-subject ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.parent-subject li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--ec-border);
}

.parent-subject li:first-child {
    border-top: 0;
}

.parent-assessment-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.parent-assessment-title {
    font-weight: 600;
}

.parent-assessment-score {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.parent-assessment-comment {
    font-size: 0.9rem;
    font-style: italic;
}

.parent-subject-average {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ec-border);
    font-size: 0.95rem;
}

/* Appel : les trois statuts côte à côte, chacun avec une zone cliquable large — l'écran est
   utilisé au doigt sur téléphone, debout devant la classe. */
.attendance-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
}

.attendance-choice label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    cursor: pointer;
    white-space: nowrap;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.detail-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 1.25rem;
    box-shadow: var(--ec-shadow);
}

.detail-card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ec-primary-700);
    margin-bottom: 0.75rem;
}

.detail-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.detail-card dt {
    font-weight: 500;
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
}

.detail-card dd {
    margin: 0;
}

/* ---------- Gestion des comptes ----------

   Le panneau d'un mot de passe généré. Traité en accent ambre et non en vert de réussite : ce
   n'est pas une confirmation à survoler, c'est la seule et unique occasion de lire le mot de
   passe. Il doit arrêter l'œil. */
.credential-panel {
    background: var(--ec-card);
    border: 1px solid var(--ec-accent-300);
    border-left: 4px solid var(--ec-accent-500);
    border-radius: var(--ec-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    max-width: 45rem;
    box-shadow: var(--ec-shadow);
}

.credential-panel h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ec-accent-600);
    margin-bottom: 0.75rem;
}

.credential-panel dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 0.75rem;
}

.credential-panel dl > div {
    display: contents;
}

.credential-panel dt {
    font-weight: 500;
    color: var(--ec-ink-muted);
    font-size: 0.9rem;
}

.credential-panel dd {
    margin: 0;
}

/* Le mot de passe est recopié à la main, souvent sur un téléphone : chasse fixe, corps généreux,
   et sélectionnable d'un geste. */
.credential-panel code {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ec-ink);
    background: var(--ec-primary-50);
    border: 1px solid var(--ec-primary-200);
    border-radius: var(--ec-radius-sm);
    padding: 0.2rem 0.5rem;
    user-select: all;
}

.credential-panel p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ec-ink-2);
}

/* Comptes directeur d'une école, dans la liste plateforme : le nom, puis son bouton. */
.director-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.director-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.director-list .text-muted {
    display: block;
}

.director-list form {
    margin: 0;
}

/* ---------- Écrans hors session ---------- */

.blank-layout {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(160deg, var(--ec-primary-900) 0%, var(--ec-primary-700) 100%);
}

.auth-page {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius);
    padding: 2rem;
    width: 100%;
    max-width: 24rem;
    box-shadow: 0 10px 30px rgba(0, 39, 57, 0.25);
}

.auth-title {
    color: var(--ec-primary-700);
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    color: var(--ec-ink-muted);
    margin-bottom: 1.5rem;
}

.auth-help {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: var(--ec-ink-muted);
    text-align: center;
}

/* ---------- Bandeau d'erreur Blazor ---------- */

#blazor-error-ui {
    background: #ffeb8a;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------- Tablette et au-delà ---------- */

@media (min-width: 768px) {
    .finance-layout {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }

    .mark-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    .remark-table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: table-header-group;
    }

    .remark-table tbody {
        display: table-row-group;
    }

    .remark-table tr {
        display: table-row;
        border-bottom: 0;
    }

    .remark-table td {
        display: table-cell;
        width: auto;
        border-bottom-width: 1px;
    }

    .remark-table td.remark-student {
        width: 16rem;
        padding-bottom: 0.5rem;
    }

    .assessment-header {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .assessment-table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: table-header-group;
    }

    .assessment-table tbody {
        display: table-row-group;
    }

    .assessment-table tr {
        display: table-row;
        border-bottom: 0;
    }

    .assessment-table td {
        display: table-cell;
        width: auto;
        border-bottom-width: 1px;
        padding: 0.5rem;
    }

    .assessment-table td.assessment-student {
        width: 14rem;
        padding-top: 0.5rem;
    }

    .nav-toggle-button {
        display: none;
    }

    .nav-scrim {
        display: none !important;
    }

    .app-nav {
        display: flex;
    }

    /* Souris au bureau : la cible de 44 px n'est utile qu'au doigt. */
    .nav-section > details > summary {
        min-height: 2.25rem;
    }

    .app-content {
        padding: 1.5rem;
    }

    .user-name {
        display: inline;
    }

    .viz-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Le recouvrement tient sur une demi-largeur ; la répartition par classe et l'assiduité
       ont besoin de la largeur entière pour que les libellés ne se chevauchent pas. */
    .viz-card-wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .viz-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .viz-card-wide {
        grid-column: auto;
    }
}