/* =========================================================================
   Système de design — Plateforme de gestion scolaire

   Plateforme de gestion scolaire générique : le nom, le logo et la devise
   affichés sont ceux de l'établissement qui la déploie (configurables
   depuis l'espace développeur), jamais codés en dur. La palette et la
   typographie ci-dessous forment l'identité visuelle propre au logiciel
   lui-même. Un seul accent (or) par écran ;
   les tableaux se lisent comme un registre ; les statuts sont des pastilles
   discrètes plutôt que des badges saturés.
   ========================================================================= */

/* Polices auto-hébergées (sous-ensemble latin, suffisant pour le français) :
   pas de dépendance à Google Fonts au chargement, essentiel sur les
   connexions faibles du contexte visé. Licence SIL Open Font License. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/fraunces-variable-latin.069cb90e11a3.woff2") format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/public-sans-variable-latin.e4c9b081863a.woff2") format('woff2');
}

:root {
  /* Couleurs */
  --ink-900: #12203D;
  --ink-800: #1B2C4D;
  --ink-700: #2C3E5C;
  --ink-500: #55607A;
  --ink-300: #606B85;
  /* Texte principal : alias distinct de --ink-900. --ink-900 sert AUSSI de
     fond pour les zones volontairement sombres (sidebar, hero, auth) qui ne
     doivent jamais s'éclaircir en mode sombre ; --texte-principal, lui, doit
     s'éclaircir. Les deux rôles partagent la même valeur en mode clair. */
  --texte-principal: var(--ink-900);

  --gold-600: #8A6620;
  --gold-500: #B98B2E;
  --gold-400: #D1A952;
  --gold-100: #F1E4C4;
  --gold-050: #F8F1DF;

  --paper-050: #F1F2F4;
  --paper-000: #FFFFFF;
  --line-200: #DEE1E6;
  --line-300: #C7CBD3;

  --success-700: #23543D;
  --success-600: #2F6B4F;
  --success-100: #E1EEE6;

  --danger-700: #7C2E23;
  --danger-600: #9C3B2E;
  --danger-100: #F3E1DE;

  --warning-700: #7A5F19;
  --warning-600: #9C7A24;
  --warning-100: #F3E9CB;

  --bleu-700: #1F4E79;
  --bleu-600: #2B6CA3;
  --bleu-100: #DCE8F3;

  /* Bootstrap colore la plupart de ses composants (.card, .text-muted,
     .h1-.h6 appliquée en classe utilitaire, etc.) via SES PROPRES variables
     --bs-*, indépendamment de nos jetons ink et paper. Sans cette
     redirection, tout texte qui n'a pas de règle toumai.css plus spécifique
     reste figé sur les couleurs par défaut de Bootstrap (pensées pour un
     fond clair) et devient illisible en mode sombre - texte quasi invisible
     sur fond de carte sombre. */
  --bs-body-color: var(--texte-principal);
  --bs-body-bg: var(--paper-050);
  --bs-heading-color: var(--texte-principal);
  --bs-secondary-color: var(--ink-500);
  --bs-border-color: var(--line-300);
  --bs-border-color-translucent: var(--line-200);

  /* Typographie */
  --police-affichage: 'Fraunces', Georgia, serif;
  --police-texte: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --rayon-panneau: 10px;
  --rayon-controle: 6px;
  --rayon-pastille: 100px;
  --ombre-panneau: 0 1px 2px rgba(18, 32, 61, 0.06), 0 8px 24px -12px rgba(18, 32, 61, 0.18);
  --ombre-flottante: 0 24px 60px -20px rgba(0, 0, 0, 0.45);

  /* Échelle d'espacement (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Échelle typographique */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
}

/* Mode sombre : suit la préférence système par défaut, ou le choix explicite
   mémorisé par le bouton de la barre supérieure (attribut data-theme sur
   <html>, voir static/js/app.js). Ne redéfinit QUE les rôles « texte » et
   « surface claire » (--texte-principal, --ink-700/500/300, --paper-*,
   --line-*) - jamais --ink-900/--ink-800 eux-mêmes, qui servent aussi de
   fond aux zones volontairement sombres (sidebar, hero, auth, pied de page
   vitrine) : celles-ci restent identiques dans tous les cas, par choix, pas
   par oubli. L'accent or (--gold-*) ne change pas non plus : il est déjà
   conçu pour fonctionner sur fond clair et sur fond sombre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --texte-principal: #F2F4F9;
    --ink-800: #D3D9E8;
    --ink-700: #B9C2DA;
    --ink-500: #93A0BF;
    --ink-300: #8794B3;

    --paper-050: #0C1524;
    --paper-000: #16233A;
    --line-200: #28334D;
    --line-300: #3A4666;

    --success-700: #8FE0B4;
    --success-600: #6FCB9B;
    --success-100: #16332A;

    --danger-700: #F0A99C;
    --danger-600: #E68B7A;
    --danger-100: #3A2019;

    --warning-700: #F0D48A;
    --warning-600: #DCB35A;
    --warning-100: #362B12;

    --bleu-700: #A8CBEA;
    --bleu-600: #7FB0DE;
    --bleu-100: #142A3D;

    --ombre-panneau: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --texte-principal: #F2F4F9;
  --ink-800: #D3D9E8;
  --ink-700: #B9C2DA;
  --ink-500: #93A0BF;
  --ink-300: #8794B3;

  --paper-050: #0C1524;
  --paper-000: #16233A;
  --line-200: #28334D;
  --line-300: #3A4666;

  --success-700: #8FE0B4;
  --success-600: #6FCB9B;
  --success-100: #16332A;

  --danger-700: #F0A99C;
  --danger-600: #E68B7A;
  --danger-100: #3A2019;

  --warning-700: #F0D48A;
  --warning-600: #DCB35A;
  --warning-100: #362B12;

  --bleu-700: #A8CBEA;
  --bleu-600: #7FB0DE;
  --bleu-100: #142A3D;

  --ombre-panneau: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper-050);
  color: var(--texte-principal);
  font-family: var(--police-texte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* « hidden » fait du <body> un conteneur de défilement et empêche la barre latérale (position: sticky) de rester en haut
   quand on défile une longue page ; « clip » coupe le débordement de la même façon sans cet effet. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

h1, h2, h3, h4 {
  font-family: var(--police-affichage);
  font-weight: 600;
  color: var(--texte-principal);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem 0;
}

a { color: var(--ink-800); text-decoration: none; }
a:hover { color: var(--gold-600); }

::selection { background: var(--gold-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Bascule clair/sombre en douceur plutôt qu'un changement instantané -
   .card, .btn et .form-control ont chacun leur propre transition étendue
   plus haut/bas dans ce fichier pour ne pas écraser leurs transitions
   existantes (transform, box-shadow...). */
body, .topbar, table, th, td {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* -------------------------------------------------------------------- */
/* Micro-animations - entrée douce du contenu, relief au survol. La règle
   prefers-reduced-motion ci-dessus les neutralise déjà automatiquement. */
/* -------------------------------------------------------------------- */

@keyframes entree-douce {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.app-content > * { animation: entree-douce 0.35s ease both; }
.app-content > *:nth-child(2) { animation-delay: 0.05s; }
.app-content > *:nth-child(3) { animation-delay: 0.1s; }
.app-content > *:nth-child(4) { animation-delay: 0.15s; }
.app-content > *:nth-child(n+5) { animation-delay: 0.2s; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Bouton d'envoi de formulaire pendant le traitement (app.js) - garde le
   texte du bouton lisible, ajoute juste un repère de chargement à gauche. */
@keyframes rotation-bouton {
  to { transform: rotate(360deg); }
}
.bouton-en-cours {
  position: relative;
  padding-left: 2.1rem !important;
  pointer-events: none;
}
.bouton-en-cours::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotation-bouton 0.6s linear infinite;
}

.lien-saut {
  position: absolute;
  top: -3rem;
  left: 0;
  background: var(--ink-900);
  color: var(--paper-000);
  padding: 0.6rem 1rem;
  z-index: 2000;
  border-radius: 0 0 var(--rayon-controle) 0;
  transition: top 0.15s ease;
}
.lien-saut:focus {
  top: 0;
}

/* -------------------------------------------------------------------- */
/* Coquille applicative                                                  */
/* -------------------------------------------------------------------- */

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

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--ink-900);
  color: #E7EAF2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.4rem 1.3rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.marque-emblème {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-400);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-affichage);
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
}

.marque-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  background: #fff;
}

.marque-texte { line-height: 1.2; }
.marque-nom { font-family: var(--police-affichage); font-weight: 600; font-size: 1rem; color: #fff; }
.marque-sous-titre { font-size: 0.8rem; color: var(--gold-400); }

.icone-svg { vertical-align: -3px; flex-shrink: 0; }

.nav-section { padding: 1.1rem 0.85rem 0.3rem; }
.nav-section-titre {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #8B96B5;
  font-weight: 600;
  padding: 0 0.55rem;
  margin-bottom: 0.35rem;
}
.nav-section-titre .icone-svg { width: 13px; height: 13px; vertical-align: 0; }

.nav-lien {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--rayon-controle);
  color: #C7CFE3;
  font-size: 0.89rem;
  font-weight: 500;
  margin-bottom: 1px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-lien:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-lien.actif {
  background: rgba(185, 139, 46, 0.16);
  color: #F3DFA9;
}

.sidebar-pied {
  margin-top: auto;
  padding: 1rem 1.3rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  color: #8B96B5;
}

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

.topbar {
  background: var(--paper-000);
  border-bottom: 1px solid var(--line-200);
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar-recherche {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--paper-050);
  border: 1px solid var(--line-200);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  flex: 1 1 160px;
  max-width: 220px;
  color: var(--ink-500);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.topbar-recherche:focus-within { border-color: var(--gold-500); background: var(--paper-000); }
.topbar-recherche .icone-svg { flex-shrink: 0; }
.topbar-recherche input {
  border: none; background: transparent; outline: none;
  font-size: 0.86rem; color: var(--texte-principal); width: 100%;
}
.topbar-recherche input::placeholder { color: var(--ink-300); }

.topbar-utilisateur {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.86rem;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-utilisateur .role { color: var(--ink-500); }
.avatar-initiales {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-900); color: var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; font-family: var(--police-affichage);
}

.app-content { padding: 1.75rem; max-width: 1180px; width: 100%; margin: 0 auto; }

/* -------------------------------------------------------------------- */
/* Notifications système (messages Django) en toasts flottants           */
/* -------------------------------------------------------------------- */

.toasts-conteneur {
  position: fixed;
  bottom: 1.4rem;
  right: 1.2rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 360px;
  width: calc(100% - 2.4rem);
}
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-sortie {
  to { opacity: 0; transform: translateY(16px); }
}
.toast-message {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: var(--ombre-flottante);
  animation: toast-entree 0.25s ease both;
}
.toast-message.masque { animation: toast-sortie 0.2s ease both; }
.toast-fermer {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.toast-fermer:hover { opacity: 1; }

@media (max-width: 520px) {
  .toasts-conteneur { left: 1rem; right: 1rem; top: auto; bottom: 1rem; max-width: none; width: auto; }
}

.bouton-menu-mobile { display: none; }
.sidebar-rideau { display: none; }

@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .sidebar.ouvert { transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,0.25); }
  .bouton-menu-mobile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--rayon-controle);
    border: 1px solid var(--line-300); background: var(--paper-000); cursor: pointer;
    position: relative; z-index: 41; /* au-dessus de la sidebar (40) : reste cliquable pour refermer */
  }
  .app-content { padding: 1.1rem; }

  /* Rideau semi-transparent derrière la sidebar ouverte : taper n'importe
     où en dehors la referme - seul moyen de la refermer, sans ça, vu que
     la sidebar recouvre entièrement le bouton qui l'a ouverte. */
  .sidebar-rideau {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .sidebar-rideau.ouvert { opacity: 1; pointer-events: auto; }
}

@media (max-width: 520px) {
  .topbar-utilisateur > span { display: none; }
  .topbar { padding: 0.7rem 1rem; }
  .topbar-recherche { display: none; }
}

/* -------------------------------------------------------------------- */
/* En-tête de page                                                       */
/* -------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.page-header h1 { font-size: 1.5rem; }
.page-header p { color: var(--ink-500); margin: 0.15rem 0 0; font-size: 0.92rem; }

.page-header-titre { display: flex; align-items: center; gap: 0.9rem; }
.page-header-icone {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.piege-robot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.photo-eleve { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }

/* -------------------------------------------------------------------- */
/* Emploi du temps - grille hebdomadaire (une colonne par jour)          */
/* -------------------------------------------------------------------- */

.emploi-grille {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.emploi-jour { flex: 1 0 150px; min-width: 150px; }
.emploi-jour-titre {
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-800);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold-500);
}
.emploi-creneau {
  background: var(--paper-050);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.6rem;
}
.emploi-creneau-heure { font-size: 0.8rem; color: var(--ink-500); font-weight: 600; }
.emploi-creneau-matiere { font-size: 0.9rem; font-weight: 600; color: var(--texte-principal); margin-top: 0.1rem; }
.emploi-creneau-detail { font-size: 0.8rem; color: var(--ink-500); margin-top: 0.15rem; }
.emploi-jour-vide { color: var(--ink-300); font-size: 0.82rem; text-align: center; padding: 1rem 0; }
.emploi-creneau-suppr {
  background: none; border: none; padding: 0; margin-top: 0.3rem;
  font-size: 0.8rem; color: var(--danger-600); cursor: pointer; text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/* Panneaux (remplace les cartes Bootstrap génériques)                   */
/* -------------------------------------------------------------------- */

.card, .panel {
  background: var(--paper-000);
  border: 1px solid var(--line-200);
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre-panneau) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.card:hover, .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(18, 32, 61, 0.08), 0 12px 28px -14px rgba(18, 32, 61, 0.24) !important;
}
.card-body { padding: 1.5rem !important; overflow-x: auto; }

/* -------------------------------------------------------------------- */
/* Cartes indicateurs (tableau de bord) - badge d'icône coloré par catégorie */
/* -------------------------------------------------------------------- */

.stat-carte { display: flex; align-items: center; gap: 1rem; }
.stat-carte-icone {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-carte-icone.bleu, .page-header-icone.bleu { background: var(--bleu-100); color: var(--bleu-700); }
.stat-carte-icone.or, .page-header-icone.or { background: var(--gold-050); color: var(--gold-600); }
.stat-carte-icone.vert, .page-header-icone.vert { background: var(--success-100); color: var(--success-700); }
.stat-carte-icone.rouge, .page-header-icone.rouge { background: var(--danger-100); color: var(--danger-700); }
.stat-carte-corps { min-width: 0; }
.stat-carte-valeur {
  font-family: var(--police-affichage); font-size: 1.6rem; font-weight: 600;
  color: var(--texte-principal); line-height: 1.15;
}
.stat-carte-label { font-size: 0.8rem; color: var(--ink-500); margin-top: 0.1rem; }

.alertes-tableau-bord { border-left: 3px solid var(--gold-400); }
.alertes-synthese { color: var(--ink-800); font-size: 0.92rem; margin-bottom: 1rem; }
.alerte-carte { padding: 0.8rem 0; border-top: 1px solid var(--line-200); }
.alerte-carte:first-of-type { border-top: none; padding-top: 0.3rem; }
.alerte-titre { font-weight: 600; color: var(--ink-800); margin-bottom: 0.15rem; }
.alerte-description { color: var(--ink-500); font-size: 0.85rem; margin-bottom: 0.6rem; }
.alerte-details { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.alerte-details a.badge { text-decoration: none; }
.alerte-details a.badge:hover { background: var(--gold-100) !important; color: var(--gold-600) !important; }

/* -------------------------------------------------------------------- */
/* Pagination                                                            */
/* -------------------------------------------------------------------- */

.pagination { gap: 0.25rem; }
.page-link {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-800);
  border: 1px solid var(--line-300);
  border-radius: var(--rayon-controle) !important;
  padding: 0.4rem 0.75rem;
}
.page-link:hover { background: var(--paper-050); color: var(--texte-principal); border-color: var(--line-300); }
.page-link:focus { box-shadow: 0 0 0 3px var(--gold-100); }
.page-item.active .page-link {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900);
}
.page-item.disabled .page-link { color: var(--ink-300); background: var(--paper-050); border-color: var(--line-200); }

/* -------------------------------------------------------------------- */
/* Tableaux — lecture en registre                                        */
/* -------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
.table thead th {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line-300) !important;
  border-top: none !important;
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}
.table tbody td {
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid var(--line-200) !important;
  border-top: none !important;
  vertical-align: middle;
  color: var(--ink-800);
}
.table tbody tr { animation: entree-douce 0.3s ease both; }
.table tbody tr:nth-child(2) { animation-delay: 0.03s; }
.table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.table tbody tr:nth-child(4) { animation-delay: 0.09s; }
.table tbody tr:nth-child(5) { animation-delay: 0.12s; }
.table tbody tr:nth-child(n+6) { animation-delay: 0.15s; }
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background: var(--paper-050); }

.montant, td.montant, .table td:has(> .montant-val) { font-variant-numeric: tabular-nums; }
.montant-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.montant-val.negatif { color: var(--danger-600); }

/* -------------------------------------------------------------------- */
/* Pastilles de statut                                                   */
/* -------------------------------------------------------------------- */

.badge {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.28em 0.65em;
  border-radius: var(--rayon-pastille);
}
.badge.bg-success { background: var(--success-100) !important; color: var(--success-700) !important; }
.badge.bg-warning { background: var(--warning-100) !important; color: var(--warning-700) !important; }
.badge.bg-danger  { background: var(--danger-100) !important;  color: var(--danger-700) !important; }
.badge.bg-secondary { background: var(--paper-050) !important; color: var(--ink-500) !important; border: 1px solid var(--line-300); }

/* -------------------------------------------------------------------- */
/* Boutons                                                                */
/* -------------------------------------------------------------------- */

.btn {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.87rem;
  border-radius: var(--rayon-controle);
  padding: 0.5rem 1rem;
  transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.1s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--gold-600); border-color: var(--gold-600); color: #fff;
}
.btn-secondary, .btn-outline-secondary {
  background: transparent; border: 1px solid var(--line-300); color: var(--ink-800);
}
.btn-outline-secondary:hover { background: var(--paper-050); color: var(--texte-principal); }
.btn-outline-primary { border-color: var(--ink-800); color: var(--ink-800); background: transparent; }
.btn-outline-primary:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn-outline-danger { border-color: var(--danger-600); color: var(--danger-600); background: transparent; }
.btn-outline-danger:hover { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn-success { background: var(--success-600); border-color: var(--success-600); }
.btn-success:hover { background: var(--success-700); border-color: var(--success-700); }
/* Bootstrap calcule son état :disabled à partir de ses propres variables de
   couleur (--bs-primary, etc.), pas des couleurs ci-dessus redéfinies en
   propriétés brutes - sans ces règles, un bouton désactivé (ex. pendant
   l'envoi d'un formulaire, voir app.js) retombe sur le bleu Bootstrap par
   défaut au lieu de la palette de la plateforme. */
.btn-primary:disabled, .btn-primary.disabled {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); opacity: 0.6;
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  border-color: var(--ink-800); color: var(--ink-800); background: transparent; opacity: 0.6;
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
  border-color: var(--line-300); color: var(--ink-800); background: transparent; opacity: 0.6;
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  border-color: var(--danger-600); color: var(--danger-600); background: transparent; opacity: 0.6;
}
.btn-success:disabled, .btn-success.disabled {
  background: var(--success-600); border-color: var(--success-600); opacity: 0.6;
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
  border-color: var(--success-600); color: var(--success-600); background: transparent; opacity: 0.6;
}
.btn-sm { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
.btn-link { color: var(--ink-700); font-weight: 600; }
.btn-link:hover { color: var(--gold-600); }

/* -------------------------------------------------------------------- */
/* Formulaires                                                           */
/* -------------------------------------------------------------------- */

label, .form-label { font-weight: 600; font-size: 0.85rem; color: var(--ink-800); margin-bottom: 0.3rem; }
.form-control, select.form-control, textarea.form-control {
  border: 1px solid var(--line-300);
  border-radius: var(--rayon-controle);
  padding: 0.5rem 0.7rem;
  font-family: var(--police-texte);
  font-size: 0.92rem;
  color: var(--texte-principal);
  background: var(--paper-000);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.15s ease;
}
.form-control:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-100);
  outline: none;
}
.form-text { color: var(--ink-500); font-size: 0.8rem; }

input[type="checkbox"] { accent-color: var(--gold-500); width: 16px; height: 16px; }

/* -------------------------------------------------------------------- */
/* Alertes / messages flash                                              */
/* -------------------------------------------------------------------- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--rayon-controle);
  padding: 0.75rem 1rem;
  font-size: 0.89rem;
}
.alert-success { background: var(--success-100); color: var(--success-700); border-color: #cfe4d7; }
.alert-error, .alert-danger { background: var(--danger-100); color: var(--danger-700); border-color: #e8cdc8; }
.alert-warning { background: var(--warning-100); color: var(--warning-700); border-color: #ecdfae; }
.alert-info { background: var(--gold-050); color: var(--ink-900); border-color: var(--gold-100); }

/* -------------------------------------------------------------------- */
/* Liste de navigation générique (comptes en attente, etc.)              */
/* -------------------------------------------------------------------- */

.list-group-item {
  border-color: var(--line-200) !important;
}

/* -------------------------------------------------------------------- */
/* Recherche avec suggestions (sélection d'un élève/employé par nom)     */
/* -------------------------------------------------------------------- */

.recherche-conteneur { position: relative; }
.recherche-resultats {
  display: none;
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--paper-000); border: 1px solid var(--line-300); border-radius: var(--rayon-controle);
  box-shadow: 0 8px 24px rgba(18, 32, 61, 0.12);
  max-height: 260px; overflow-y: auto;
}
.recherche-resultat-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 0.55rem 0.8rem; font-size: 0.92rem; color: var(--texte-principal); cursor: pointer;
}
.recherche-resultat-item:hover, .recherche-resultat-item:focus { background: var(--paper-050); }
.recherche-resultat-vide { padding: 0.55rem 0.8rem; font-size: 0.88rem; color: var(--ink-500); }

/* -------------------------------------------------------------------- */
/* États vides                                                           */
/* -------------------------------------------------------------------- */

.etat-vide {
  text-align: center;
  padding: 2.75rem 1rem;
  color: var(--ink-500);
}
.etat-vide::before {
  content: "";
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  background-color: var(--ink-300);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.etat-vide p { margin: 0 0 0.9rem; text-align: center; }
.etat-vide .btn { margin: 0 auto; }

/* -------------------------------------------------------------------- */
/* Page d'accueil publique (vitrine)                                     */
/* -------------------------------------------------------------------- */

.vitrine-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 4vw; position: relative; z-index: 5;
}
.vitrine-nav .marque { border: none; padding: 0; }
.vitrine-nav .marque-nom, .vitrine-nav .marque-sous-titre { color: #fff; }
.vitrine-nav .marque-sous-titre { color: var(--gold-400); }
.vitrine-nav-liens { display: flex; align-items: center; gap: 1.8rem; }
.vitrine-nav-liens a { color: #C7CFE3; font-size: 0.89rem; font-weight: 500; margin-right: 1.8rem; }
.vitrine-nav-liens a:last-child { margin-right: 0; }
.vitrine-nav-liens a:hover { color: #fff; }

.vitrine-hero {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  padding-bottom: 3rem;
}
.vitrine-hero-fond {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 32%, rgba(185,139,46,0.16), transparent 42%),
    radial-gradient(circle at 30% 85%, rgba(185,139,46,0.08), transparent 40%);
  pointer-events: none;
}
.vitrine-hero-corps {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 3.5rem 4vw 2rem;
}
.vitrine-hero-corps > div:first-child { flex: 1 1 460px; }
.vitrine-hero-corps > .vitrine-decor { flex: 1 1 340px; }
.vitrine-hero h1 {
  color: #fff; font-size: 2.6rem; line-height: 1.12; margin-bottom: 1.1rem;
}
.vitrine-hero p.lead {
  color: #B7C0D6; font-size: 1.02rem; max-width: 46ch; margin-bottom: 1.8rem;
}
.vitrine-hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.vitrine-hero-ctas.vitrine-etablissements { flex-direction: column; align-items: stretch; gap: 0.6rem; max-width: 340px; }
.vitrine-etablissements-intro { color: #B7C0D6; font-size: 0.85rem; margin-bottom: 0.2rem; }
.vitrine-etablissement-lien { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-start; }
.vitrine-etablissement-lieu { display: block; font-size: 0.8rem; opacity: 0.7; }
.vitrine-recherche { display: flex; gap: 0.5rem; }
.vitrine-recherche-champ {
  flex: 1; min-width: 0; padding: 0.6rem 0.9rem; border-radius: 0.5rem; font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff;
}
.vitrine-recherche-champ::placeholder { color: #B7C0D6; }
.vitrine-recherche-resultats { display: flex; flex-direction: column; gap: 0.6rem; }
.vitrine-ecole-autre { color: #B7C0D6; font-size: 0.85rem; text-align: center; text-decoration: underline; }
.vitrine-etablissement-logo { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; background: #fff; }
.vitrine-etablissement-initiale {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0;
}
.btn-hero-primaire {
  background: var(--gold-500); color: var(--ink-900); font-weight: 700;
  padding: 0.75rem 1.5rem; border-radius: var(--rayon-controle); font-size: 0.93rem;
}
.btn-hero-primaire:hover { background: var(--gold-400); color: var(--ink-900); }
.btn-hero-secondaire {
  border: 1px solid rgba(255,255,255,0.28); color: #fff;
  padding: 0.75rem 1.5rem; border-radius: var(--rayon-controle); font-size: 0.93rem; font-weight: 600;
}
.btn-hero-secondaire:hover { background: rgba(255,255,255,0.08); color: #fff; }

.vitrine-decor {
  position: relative; height: 340px; display: flex; align-items: center; justify-content: center;
}
.vitrine-decor-centre {
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, rgba(185,139,46,0.22), rgba(185,139,46,0.02) 70%);
  border: 1.5px solid var(--gold-400);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-400);
  animation: vitrine-respire 4.5s ease-in-out infinite;
}
@keyframes vitrine-respire {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185,139,46,0.18); }
  50% { box-shadow: 0 0 0 18px rgba(185,139,46,0); }
}
.vitrine-icone-satellite {
  position: absolute;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; color: #DDE3F0;
  backdrop-filter: blur(2px);
}
.vitrine-orbite {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: vitrine-orbite-tour 28s linear infinite;
}
.vitrine-icone-satellite.p1 { transform: rotate(15deg) translate(150px) rotate(-15deg); }
.vitrine-icone-satellite.p2 { transform: rotate(75deg) translate(150px) rotate(-75deg); }
.vitrine-icone-satellite.p3 { transform: rotate(140deg) translate(150px) rotate(-140deg); }
.vitrine-icone-satellite.p4 { transform: rotate(200deg) translate(150px) rotate(-200deg); }
.vitrine-icone-satellite.p5 { transform: rotate(260deg) translate(150px) rotate(-260deg); }
.vitrine-icone-satellite.p6 { transform: rotate(320deg) translate(150px) rotate(-320deg); }
.vitrine-icone-satellite svg { animation: vitrine-orbite-contre-tour 28s linear infinite; }

@keyframes vitrine-orbite-tour {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes vitrine-orbite-contre-tour {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.vitrine-ticker {
  /* Fixe (#1B2C4D = --ink-800 en mode clair), volontairement pas le jeton :
     cette bande fait partie du hero, toujours sombre, quel que soit le thème. */
  background: #1B2C4D; border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden; white-space: nowrap; padding: 0.7rem 0; position: relative; z-index: 2;
}
.vitrine-ticker-piste { display: inline-block; animation: vitrine-defile 32s linear infinite; }
.vitrine-ticker-piste span { color: #C7CFE3; font-size: 0.85rem; margin: 0 1.6rem; }
.vitrine-ticker-piste span strong { color: var(--gold-400); }
@keyframes vitrine-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vitrine-section { max-width: 1180px; margin: 0 auto; padding: 3.5rem 4vw; }
.vitrine-section.sans-haut { padding-top: 0; }
.vitrine-securite-corps { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.vitrine-securite-titre { margin-bottom: 0.3rem; }
.vitrine-securite-texte { color: var(--ink-500); margin: 0; max-width: 60ch; }
.vitrine-section h2 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.vitrine-section p.intro { color: var(--ink-500); max-width: 60ch; margin-bottom: 2.2rem; }
.vitrine-grille { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.vitrine-carte {
  background: var(--paper-000); border: 1px solid var(--line-200); border-radius: var(--rayon-panneau);
  padding: 1.4rem; flex: 1 1 300px;
}
.vitrine-carte-icone {
  width: 40px; height: 40px; border-radius: 10px; background: var(--gold-050); color: var(--gold-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem;
}
.vitrine-carte h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.vitrine-carte p { color: var(--ink-500); font-size: 0.88rem; margin: 0; }

.guide-roles { display: flex; flex-direction: column; gap: 0.8rem; }
.guide-role {
  background: var(--paper-000); border: 1px solid var(--line-200);
  border-radius: var(--rayon-panneau); padding: 0 1.4rem;
}
.guide-role summary {
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.guide-role summary::-webkit-details-marker { display: none; }
.guide-role summary::after { content: "+"; color: var(--gold-500); font-size: 1.4rem; flex-shrink: 0; }
.guide-role[open] summary::after { content: "\2212"; }
.guide-role-nom { font-weight: 600; color: var(--ink-800); display: block; }
.guide-role-tagline { font-weight: 400; color: var(--ink-500); font-size: 0.85rem; display: block; margin-top: 0.15rem; }
.guide-role-corps { padding: 0 0 1.3rem; color: var(--ink-500); }
.guide-role-modules { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.guide-role-comment-titre { font-weight: 600; color: var(--ink-800); font-size: 0.85rem; margin: 1.1rem 0 0.4rem; }
.guide-role-etapes { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.guide-role-etapes li { margin-bottom: 0.35rem; }
.guide-role-etapes li:last-child { margin-bottom: 0; }
.guide-role-etapes em { color: var(--ink-800); font-style: normal; font-weight: 600; }

.vitrine-pied {
  background: var(--ink-900); color: #8B96B5; padding: 2rem 4vw; text-align: center; font-size: 0.85rem;
}
.vitrine-pied strong { color: #fff; }

/* -------------------------------------------------------------------- */
/* Annuaire des établissements — barre latérale + panneau principal      */
/* -------------------------------------------------------------------- */

.annuaire-layout { display: flex; min-height: 100vh; }
.annuaire-sidebar {
  width: 280px; flex-shrink: 0; background: var(--ink-900);
  padding: 1.4rem 1rem; display: flex; flex-direction: column; gap: 0.3rem;
  overflow-y: auto;
}
.annuaire-marque {
  display: flex; align-items: center; gap: 0.6rem; color: #fff;
  font-family: var(--police-affichage); font-weight: 600; font-size: 0.98rem;
  padding: 0.3rem 0.6rem 1.1rem;
}
.annuaire-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  background: transparent; border: none; text-align: left; cursor: pointer;
  padding: 0.6rem 0.6rem; border-radius: var(--rayon-controle);
  color: #C7CFE3; font-family: var(--police-texte); font-size: 0.88rem; font-weight: 500;
}
.annuaire-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.annuaire-item.actif { background: rgba(185,139,46,0.16); color: #F3DFA9; }
.annuaire-item-emblème {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center;
  font-family: var(--police-affichage); font-size: 0.8rem; font-weight: 600;
}
.annuaire-item-logo { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; flex-shrink: 0; background: #fff; }

.annuaire-contenu {
  flex: 1; position: relative;
  background: var(--ink-900);
  background-image: radial-gradient(circle at 82% 30%, rgba(185,139,46,0.14), transparent 45%);
  display: flex; align-items: center;
}
.annuaire-panneau {
  display: flex; align-items: center; justify-content: space-between; gap: 2.5rem;
  width: 100%; max-width: 980px; margin: 0 auto; padding: 3rem 4vw;
  flex-wrap: wrap;
}
.annuaire-panneau-texte { flex: 1 1 380px; }
.annuaire-panneau-texte h1 { color: #fff; font-size: 2.1rem; margin-bottom: 0.7rem; }
.annuaire-panneau-texte p { color: #B7C0D6; margin-bottom: 1.5rem; max-width: 46ch; }
.annuaire-panneau-decor {
  flex: 0 0 auto; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(185,139,46,0.18), rgba(185,139,46,0.02) 70%);
  border: 1.5px solid var(--gold-400);
  display: flex; align-items: center; justify-content: center;
}
.annuaire-panneau-decor img { width: 92px; height: 92px; object-fit: contain; border-radius: 12px; }
.annuaire-panneau-decor span {
  font-family: var(--police-affichage); font-size: 3rem; font-weight: 600; color: var(--gold-400);
}

@media (max-width: 760px) {
  .annuaire-layout { flex-direction: column; }
  .annuaire-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 1rem; }
  .annuaire-marque { display: none; }
  .annuaire-item { flex-shrink: 0; width: auto; white-space: nowrap; }
  .annuaire-panneau { flex-direction: column-reverse; text-align: center; padding: 2.5rem 1.2rem; }
  .annuaire-panneau-texte p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 900px) {
  .vitrine-hero-corps { grid-template-columns: 1fr; }
  .vitrine-decor { height: 220px; }
  .vitrine-hero h1 { font-size: 2rem; }
  .vitrine-grille { grid-template-columns: 1fr; }
  .vitrine-nav-liens { display: none; }
  .vitrine-icone-satellite.p1 { transform: rotate(15deg) translate(95px) rotate(-15deg); }
  .vitrine-icone-satellite.p2 { transform: rotate(75deg) translate(95px) rotate(-75deg); }
  .vitrine-icone-satellite.p3 { transform: rotate(140deg) translate(95px) rotate(-140deg); }
  .vitrine-icone-satellite.p4 { transform: rotate(200deg) translate(95px) rotate(-200deg); }
  .vitrine-icone-satellite.p5 { transform: rotate(260deg) translate(95px) rotate(-260deg); }
  .vitrine-icone-satellite.p6 { transform: rotate(320deg) translate(95px) rotate(-320deg); }
}

/* -------------------------------------------------------------------- */
/* Pages d'authentification (pas de sidebar)                             */
/* -------------------------------------------------------------------- */

.auth-scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(185,139,46,0.10), transparent 45%),
    var(--ink-900);
  padding: 2rem 1rem;
}
.auth-carte {
  width: 100%;
  max-width: 420px;
  background: var(--paper-000);
  border-radius: 14px;
  box-shadow: var(--ombre-flottante);
  padding: 2.1rem 2rem;
}
.auth-conteneur { width: 100%; max-width: 420px; }
.auth-conteneur.centre { text-align: center; }
.auth-lien-logo { text-decoration: none; display: block; }
.auth-lien-retour { text-align: center; margin-top: 1.2rem; }
.auth-lien-retour a { color: rgba(255,255,255,0.65); font-size: 0.85rem; }
.auth-emblème {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--gold-500); color: var(--gold-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-affichage); font-size: 1.6rem; font-weight: 600;
  margin: 0 auto 1rem;
}
.auth-logo {
  width: 52px; height: 52px; object-fit: contain; border-radius: 10px;
  display: block; margin: 0 auto 1rem;
}
.auth-titre { text-align: center; margin-bottom: 0.15rem; font-size: 1.5rem; }
.auth-sous-titre { text-align: center; color: var(--ink-500); font-size: 0.86rem; margin-bottom: 1.6rem; min-height: 1px; }
.auth-pied { text-align: center; margin-top: 3rem; color: rgba(255,255,255,0.55); font-size: 0.8rem; }

/* -------------------------------------------------------------------- */
/* Utilitaires - remplacent les styles en ligne dans les gabarits, pour  */
/* pouvoir un jour retirer 'unsafe-inline' de style-src dans la CSP      */
/* (comptes/middleware.py::ContentSecurityPolicyMiddleware).             */
/* -------------------------------------------------------------------- */

.mw-200 { max-width: 200px; }
.mw-320 { max-width: 320px; }
.mw-360 { max-width: 360px; }
.mw-400 { max-width: 400px; }
.mw-420 { max-width: 420px; }
.mw-440 { max-width: 440px; }
.mw-460 { max-width: 460px; }
.mw-480 { max-width: 480px; }
.largeur-5 { width: 5rem; }
.largeur-7 { width: 7rem; }
.largeur-8 { width: 8rem; }
.table-large { min-width: 680px; }
.table-grille { min-width: 1100px; }
.table-grille th:first-child, .table-grille td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--paper-000); min-width: 11rem; }
.table-grille input.note-saisie { width: 4.2rem; text-align: center; }
.table-grille input.observation-saisie { min-width: 12rem; }
.mw-520 { max-width: 520px; }
.mw-560 { max-width: 560px; }

.mini-stat { padding: 1.1rem 1.2rem !important; }
.mini-stat-label { font-size: 0.8rem; color: var(--ink-500); }
.mini-stat-valeur {
  font-family: var(--police-affichage); font-size: 1.4rem; font-weight: 600; color: var(--texte-principal);
}
.mini-stat-valeur.danger { color: var(--danger-600); }
.mini-stat-valeur.succes { color: var(--success-600); }
.mini-stat-valeur.petit { font-size: 1.15rem; }
.mini-stat-valeur.grand { font-size: 1.7rem; }

.titre-section { font-weight: 600; margin-bottom: 0.8rem; font-size: 1rem; }
.titre-section-large { font-weight: 600; margin-bottom: 1rem; }
.titre-section-espace { font-weight: 600; margin-top: 1.3rem; margin-bottom: 0.5rem; }
.titre-resultat { font-size: 1.2rem; margin-bottom: 0.1rem; }

.badge-mini { font-size: 0.8rem; }
.card-accent-or { border-color: var(--gold-400) !important; }
.texte-discret { color: var(--ink-500); }
.texte-secondaire { color: var(--ink-500); font-size: 0.85rem; }
.titre-sous-section { font-size: 1.1rem; }
.texte-secondaire-espace { color: var(--ink-500); font-size: 0.85rem; margin-bottom: 0.8rem; }
.texte-auth-note { color: var(--ink-500); font-size: 0.86rem; }
.liste-instructions { padding-left: 1.1rem; color: var(--ink-800); font-size: 0.92rem; }
.qr-code-image { width: 180px; height: 180px; }
.cle-secrete-affichage {
  font-family: monospace; font-size: 0.85rem; background: var(--paper-050);
  padding: 0.5rem; border-radius: var(--rayon-controle); margin-top: 0.6rem; word-break: break-all;
}
.liste-codes-secours {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
  list-style: none; padding: 0; margin: 0 0 1.2rem;
}
.liste-codes-secours li {
  font-family: monospace; font-size: 0.95rem; text-align: center;
  background: var(--paper-050); border: 1px solid var(--line-300);
  border-radius: var(--rayon-controle); padding: 0.5rem;
}
.pagination-info { color: var(--ink-500); font-size: 0.82rem; }
.texte-matricule { color: var(--ink-300); }
.ligne-annulee { color: var(--ink-300); text-decoration: line-through; }
.ligne-totale { font-weight: 700; }
.solde-affichage { text-align: right; }
.solde-affichage .mini-stat-valeur.positif { color: var(--success-600); }
.solde-affichage .mini-stat-valeur.negatif { color: var(--danger-600); }
.tableau-large { overflow-x: auto; }
.tableau-centre { text-align: center; }
.tableau-entete-etroite { white-space: nowrap; font-size: 0.8rem; }
.tableau-ligne-titre { font-weight: 600; }
.logo-apercu-cadre { border: none; padding: 0; }
.logo-apercu-image { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; }
.logo-apercu-cadre .marque-nom { color: var(--ink-900); }
.logo-apercu-cadre .marque-sous-titre { color: var(--gold-600); }
.filtre-annee-label { font-size: 0.8rem; }
.filtre-annee-select { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.nav-lien-stats { color: var(--ink-800); display: block; }
.nav-lien-stats.actif { background: var(--gold-050); color: var(--gold-600); }
.icone-accent-or { color: var(--gold-400); }
/* Sans !important (contrairement à d-none de Bootstrap) : ces éléments sont
   ensuite révélés par une simple affectation JS (element.style.display =
   "..."), voir static/js/app.js - un display:none !important au chargement
   empêcherait cette affectation, non prioritaire, de jamais reprendre la main. */
.masque-initial { display: none; }

.aucun-etablissement-cadre { max-width: 480px; text-align: center; padding: 2rem; }
.aucun-etablissement-titre { color: #fff; font-size: 1.6rem; }
.aucun-etablissement-texte { color: #B7C0D6; margin-bottom: 1.5rem; }
.conversation-lien { border: none; border-bottom: 1px solid var(--line-200); padding: 0.85rem 0.3rem; color: inherit; }
.texte-note { color: var(--ink-500); font-size: 0.84rem; }
.entete-actions { display: flex; align-items: center; gap: 1.2rem; }

.message-ligne { margin-bottom: 1rem; }
.message-ligne.propre { text-align: right; }
.message-bulle {
  display: inline-block; max-width: 70%; padding: 0.6rem 0.9rem;
  border-radius: var(--rayon-panneau); text-align: left; background: var(--paper-050);
}
.message-bulle.propre { background: var(--gold-050); }
.message-heure { font-size: 0.8rem; color: var(--ink-500); }
.corps-vitrine { background: var(--paper-050); }
.corps-page-centree { background: var(--ink-900); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.texte-encart { font-size: 0.8rem; color: var(--gold-600); font-weight: 600; margin-bottom: 0.4rem; }

/* Bandeau affiché quand le propriétaire de la plateforme est connecté au compte d'une école */
.bandeau-acces-delegue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--bleu-100);
  color: var(--bleu-700);
  border-bottom: 1px solid var(--bleu-600);
  font-size: 0.9rem;
}

/* Identité Yelenova : l'emblème (soleil et livre, vert et or) se pose sur une pastille blanche, pour rester lisible
   sur les fonds sombres (barre latérale, accueil, annuaire) comme dans le thème sombre. Il est plus large que haut
   (environ 1,45 pour 1) : les cadres sont élargis en conséquence. */
.marque-logo-plateforme { width: 52px; height: 36px; padding: 3px; border-radius: 8px; }
.auth-logo-plateforme { width: 124px; height: 86px; background: #fff; padding: 6px; border-radius: 12px; border: 1px solid var(--ink-100, #E3E6EC); }
.annuaire-marque-logo { width: 46px; height: 32px; object-fit: contain; background: #fff; border-radius: 7px; padding: 3px; flex-shrink: 0; }
.aucun-etablissement-logo { display: block; width: 132px; height: 92px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px; margin: 0 auto 1rem; }
.vitrine-slogan { font-weight: 600; color: var(--gold-400); margin-bottom: 0.6rem; }


/* Pages légales (mentions légales, conditions d'utilisation, confidentialité) */
.legal-entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.5rem; background: var(--ink-900); color: #fff;
}
.legal-marque { display: flex; align-items: center; gap: 0.6rem; color: #fff; font-weight: 700; text-decoration: none; }
.legal-logo { width: 50px; height: 34px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; }
.legal-nav a, .legal-pied-liens a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-page { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 3rem; line-height: 1.65; }
.legal-page h1 { font-size: 1.8rem; margin-bottom: 0.25rem; }
.legal-page h2 { font-size: 1.15rem; margin-top: 2rem; }
.legal-page ul { padding-left: 1.25rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-maj { color: var(--ink-500); font-size: 0.85rem; margin-bottom: 1.5rem; }
.pied-legal { margin-top: 2rem; padding: 0.75rem 0; text-align: center; font-size: 0.8rem; color: var(--ink-500); }
.pied-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }


/* Comptabilité : onglets, numéros de compte, lignes de détail des états */
.compta-onglets {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--ink-100, #E3E6EC);
}
.compta-onglets a {
  padding: 0.5rem 0.85rem; color: var(--ink-500); text-decoration: none; border-bottom: 2px solid transparent; font-size: 0.9rem;
}
.compta-onglets a:hover { color: var(--ink-900); }
.compta-onglets a.actif { color: var(--ink-900); border-bottom-color: var(--gold-600); font-weight: 600; }
.plan-numero { width: 7rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.plan-detail { padding-left: 1.25rem !important; color: var(--ink-500); }


/* Boutons radio et cases d'un champ à choix (Django les rend « <label><input> texte</label> ») : un peu d'air avant le texte. */
label > .form-check-input { margin-right: 0.5rem; margin-top: 0.2em; cursor: pointer; }


/* ========================================================================
   Finition premium (phase 55) : mouvement, relief et détails de matière.

   Principes :
   - tout passe par transform et opacity (fluide sur un téléphone d'entrée de gamme, rien ne force la mise en page) ;
   - rien ne cache de contenu sans JavaScript : les éléments « à révéler » ne sont masqués que par app.js ;
   - un seul accent (l'or) par écran, comme dans le reste du système ;
   - prefers-reduced-motion coupe l'ensemble (règle globale plus haut dans ce fichier).
   ======================================================================== */

:root {
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Navigation entre pages : fondu continu, barres latérale et haute immobiles ------------------ */
/* Navigateurs récents (Chrome, Edge, Safari 18+) ; ailleurs, la page se charge comme avant. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sidebar { view-transition-name: barre-laterale; }
  .topbar { view-transition-name: barre-haute; }
  ::view-transition-old(root) { animation: 0.14s var(--ease-sortie) both vt-sortie; }
  ::view-transition-new(root) { animation: 0.22s var(--ease-sortie) both vt-entree; }
}
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; } }

/* --- Trait de chargement doré (app.js) : retour immédiat à chaque clic, utile sur réseau lent ------- */
.barre-chargement {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-500));
  box-shadow: 0 0 12px rgba(209, 169, 82, 0.7);
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.barre-chargement.actif {
  opacity: 1; transform: scaleX(0.82);
  transition: transform 9s cubic-bezier(0.08, 0.6, 0.25, 1), opacity 0.12s linear;
}

/* --- Barre latérale : indicateur doré qui glisse, entrée en cascade ------------------------------------ */
.sidebar {
  background-image:
    radial-gradient(120% 45% at 0% 0%, rgba(185, 139, 46, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.nav-lien { position: relative; }
.nav-lien::before {
  content: ""; position: absolute; left: -0.85rem; top: 20%; bottom: 20%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--gold-400);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.32s var(--ease-sortie);
}
.nav-lien.actif::before { transform: scaleY(1); }
.nav-lien.actif { font-weight: 600; box-shadow: inset 0 0 0 1px rgba(185, 139, 46, 0.22); }
@media (hover: hover) {
  .nav-lien { transition: background 0.15s ease, color 0.15s ease, padding-left 0.25s var(--ease-sortie); }
  .nav-lien:hover { padding-left: 0.85rem; }
  .nav-lien:hover::before { transform: scaleY(0.55); }
  .nav-lien.actif:hover::before { transform: scaleY(1); }
}
@keyframes nav-entree { from { opacity: 0; transform: translateX(-10px); } }
/* « backwards » : l'état de départ ne vaut que pendant le délai ; une fois l'animation finie la section n'a plus aucun effet
   d'animation (avec « both », les outils d'audit de contraste ne reconnaissaient plus le fond marine du menu). */
.nav-section { animation: nav-entree 0.5s var(--ease-sortie) backwards; }
.nav-section:nth-child(2) { animation-delay: 0.04s; }
.nav-section:nth-child(3) { animation-delay: 0.08s; }
.nav-section:nth-child(4) { animation-delay: 0.12s; }
.nav-section:nth-child(5) { animation-delay: 0.16s; }
.nav-section:nth-child(n+6) { animation-delay: 0.2s; }

/* Emblème de l'établissement : un halo discret qui respire */
@keyframes halo-emblème {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209, 169, 82, 0.34); }
  55% { box-shadow: 0 0 0 9px rgba(209, 169, 82, 0); }
}
.marque-emblème { animation: halo-emblème 5s ease-in-out infinite; }

/* --- Titres de page : un trait doré qui se dessine ------------------------------------------------------ */
@keyframes trait-or { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.page-header h1::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: 0.5rem; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  transform-origin: left; animation: trait-or 0.7s 0.25s var(--ease-sortie) both;
}

/* --- Boutons : relief, reflet au survol, appui sensible, ondulation ------------------------------------ */
.btn { position: relative; overflow: hidden; transition: filter 0.12s ease, background 0.15s ease, color 0.15s ease, transform 0.18s var(--ease-sortie), border-color 0.2s ease, box-shadow 0.25s var(--ease-sortie); }
.btn:active { transform: translateY(0) scale(0.975); }
.btn-primary {
  background-image: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(18, 32, 61, 0.22);
}
.btn-primary:hover, .btn-primary:focus {
  background-image: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px -6px rgba(154, 116, 35, 0.55);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after { opacity: 1; transform: skewX(-18deg) translateX(420%); transition: transform 0.75s var(--ease-sortie), opacity 0.2s ease; }
}
.btn-outline-secondary:hover, .btn-outline-primary:hover { box-shadow: 0 6px 14px -8px rgba(18, 32, 61, 0.35); }
.btn-ondulation {
  position: absolute; border-radius: 50%; background: currentColor; opacity: 0.22; pointer-events: none;
  transform: scale(0); animation: ondulation 0.55s var(--ease-sortie) forwards;
}
@keyframes ondulation { to { transform: scale(1); opacity: 0; } }

/* --- Panneaux : plus de bond sur les grands blocs, relief seulement ; les tuiles du tableau de bord réagissent ---- */
.card:hover, .panel:hover { transform: none; }
@media (hover: hover) {
  .card:has(> .card-body > .stat-carte):hover { transform: translateY(-3px); }
}
.stat-carte-icone { transition: transform 0.35s var(--ease-ressort); }
@media (hover: hover) {
  .card:hover .stat-carte-icone { transform: scale(1.1) rotate(-5deg); }
}
.stat-carte-valeur { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-unite { font-family: var(--police-texte); font-size: 0.5em; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-500); margin-left: 0.15em; }
.alertes-tableau-bord { position: relative; }
@keyframes alerte-pouls { 0%, 100% { box-shadow: var(--ombre-panneau); } 50% { box-shadow: var(--ombre-panneau), -4px 0 14px -6px rgba(209, 169, 82, 0.7); } }
.alertes-tableau-bord { animation: entree-douce 0.35s ease both, alerte-pouls 3.4s 1s ease-in-out 3; }

/* --- Tableaux : filet doré au survol d'une ligne, pastilles de statut ----------------------------------- */
.table tbody tr td:first-child { transition: box-shadow 0.2s var(--ease-sortie), background-color 0.2s ease; }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold-400); }
.badge.bg-success::before, .badge.bg-warning::before, .badge.bg-danger::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.4em; border-radius: 50%;
  background: currentColor; vertical-align: 0.08em;
}

/* --- Formulaires : halo de focus qui se déploie, erreurs qui apparaissent en douceur -------------------- */
.form-control { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.15s ease, box-shadow 0.28s var(--ease-sortie); }
.form-control:focus { box-shadow: 0 0 0 4px rgba(185, 139, 46, 0.2); }
@keyframes erreur-entree { from { opacity: 0; transform: translateY(-5px); } }
.text-danger.small, .alert-danger, .alert-warning, .alert-success { animation: erreur-entree 0.32s var(--ease-sortie) both; }

/* --- Notifications : un liseré qui se vide pendant les 6 secondes d'affichage ----------------------------- */
.toast-message { position: relative; overflow: hidden; }
.toast-message::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: 0.28;
  transform-origin: left; animation: toast-liseré 6s linear forwards;
}
@keyframes toast-liseré { to { transform: scaleX(0); } }

/* --- Détails de matière --------------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-300) transparent; }
.etat-vide::before { animation: flottement 4.5s ease-in-out infinite; }
@keyframes flottement { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.vitrine-carte, .guide-role { transition: transform 0.3s var(--ease-sortie), box-shadow 0.3s var(--ease-sortie), border-color 0.2s ease; }
@media (hover: hover) {
  .vitrine-carte:hover { transform: translateY(-4px); border-color: var(--gold-400); box-shadow: 0 18px 36px -20px rgba(18, 32, 61, 0.35); }
  .guide-role:hover { border-color: var(--gold-400); }
}
.vitrine-carte-icone { transition: transform 0.4s var(--ease-ressort); }
@media (hover: hover) { .vitrine-carte:hover .vitrine-carte-icone { transform: scale(1.12) rotate(-6deg); } }
.btn-hero-primaire { transition: transform 0.2s var(--ease-sortie), box-shadow 0.3s var(--ease-sortie), background 0.15s ease; box-shadow: 0 10px 28px -12px rgba(209, 169, 82, 0.65); }
@media (hover: hover) { .btn-hero-primaire:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(209, 169, 82, 0.8); } }

/* --- Halo doré qui suit le curseur (app.js) sur les zones sombres : accueil, connexion, annuaire ---------- */
.vitrine-hero-fond::after, .auth-scene::before, .annuaire-contenu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--halo-opacite, 0);
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(209, 169, 82, 0.16), transparent 62%);
  transition: opacity 0.6s ease;
}
.auth-scene { position: relative; overflow: hidden; }
.auth-conteneur { position: relative; z-index: 1; }
@keyframes carte-auth-entree { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
.auth-carte { animation: carte-auth-entree 0.6s var(--ease-sortie) both; }
.auth-emblème, .auth-logo { animation: carte-auth-entree 0.6s 0.1s var(--ease-sortie) both; }

/* --- Apparition au défilement (app.js) : seulement ce qui est sous la ligne de flottaison -------------------- */
.reveal { opacity: 0; transform: translateY(20px); animation: none !important; transition: opacity 0.6s var(--ease-sortie), transform 0.6s var(--ease-sortie); }
.reveal.visible { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } .barre-chargement { display: none; } }

/* --- Bascule clair / sombre : toutes les surfaces changent en douceur ------------------------------------- */
html.bascule-theme *, html.bascule-theme *::before, html.bascule-theme *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease !important;
}


/* ========================================================================
   Menu du compte (phase 55) : un seul avatar à la place de six boutons.
   ======================================================================== */
.topbar-utilisateur { flex-wrap: nowrap; gap: 0.75rem; }
.menu-compte { position: relative; }
.menu-compte-declencheur {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 3px 9px 3px 3px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-compte-declencheur::-webkit-details-marker { display: none; }
.menu-compte-declencheur:hover, .menu-compte[open] > .menu-compte-declencheur {
  background: var(--paper-050); border-color: var(--line-200);
}
.menu-compte-declencheur:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.menu-compte-declencheur .avatar-initiales { transition: box-shadow 0.2s ease; }
.menu-compte[open] .avatar-initiales { box-shadow: 0 0 0 2px var(--paper-000), 0 0 0 4px var(--gold-500); }
.menu-compte-chevron { color: var(--ink-500); transition: transform 0.22s ease; }
.menu-compte[open] .menu-compte-chevron { transform: rotate(180deg); }

.menu-compte-panneau {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 240px; max-width: calc(100vw - 2rem);
  background: var(--paper-000); border: 1px solid var(--line-200);
  border-radius: var(--rayon-panneau); box-shadow: var(--ombre-flottante);
  padding: 0.4rem;
  transform-origin: top right;
  animation: menu-compte-apparition 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-compte-panneau::before {
  content: ""; position: absolute; top: -6px; right: 18px; width: 10px; height: 10px;
  background: var(--paper-000); border-left: 1px solid var(--line-200); border-top: 1px solid var(--line-200);
  transform: rotate(45deg);
}
@keyframes menu-compte-apparition {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.menu-compte-entete {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.55rem 0.7rem 0.7rem; margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-200);
}
.menu-compte-entete strong { font-family: var(--police-affichage); font-size: 0.95rem; font-weight: 600; }
.menu-compte-entete span { color: var(--ink-500); font-size: 0.8rem; }

.menu-compte-entree {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--rayon-controle);
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.86rem;
  color: var(--texte-principal); text-decoration: none; cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, padding-left 0.15s ease;
}
.menu-compte-entree:hover, .menu-compte-entree:focus-visible {
  background: var(--paper-050); box-shadow: inset 2px 0 0 var(--gold-500); padding-left: 0.9rem; outline: none;
  color: var(--texte-principal); text-decoration: none;
}
.menu-compte-formulaire { margin: 0.3rem 0 0; padding-top: 0.3rem; border-top: 1px solid var(--line-200); }
.menu-compte-sortie { color: var(--danger-600); }
.menu-compte-sortie:hover, .menu-compte-sortie:focus-visible { color: var(--danger-600); }

@media (max-width: 520px) {
  .topbar-identite { display: none; }
}
@media print {
  .menu-compte { display: none; }
}


/* --- Connexion : anneau doré en pointillés qui tourne lentement derrière la carte, filet doré sur la carte -------- */
.auth-scene::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(130vmin, 1000px); aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(209, 169, 82, 0.5) 0 0.45deg, transparent 0.45deg 3deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.4%, #000 67.2%, transparent 67.6%);
  mask: radial-gradient(circle, transparent 66%, #000 66.4%, #000 67.2%, transparent 67.6%);
  opacity: 0.55;
  animation: anneau-tourne 140s linear infinite;
}
@keyframes anneau-tourne { to { rotate: 360deg; } }
.auth-carte { position: relative; }
.auth-carte::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-400), var(--gold-500), transparent);
  background-size: 200% 100%;
  animation: filet-or 6s ease-in-out infinite alternate;
}
@keyframes filet-or { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* La barre du haut passe au-dessus du contenu (le menu du compte déborde sur la page) ; sous la sidebar mobile (z-index 40). */
.topbar { position: relative; z-index: 30; }

/* Anneau doré fin : l'avatar reste visible en mode sombre (son fond est alors celui de la barre). */
.menu-compte-declencheur .avatar-initiales { box-shadow: inset 0 0 0 1px rgba(209, 169, 82, 0.6); }

/* Téléphone : l'en-tête d'une page (titre + actions, ex. le bulletin) passe à la ligne au lieu de déborder à droite. */
@media (max-width: 640px) {
  .page-header { flex-wrap: wrap; }
  .entete-actions { flex-wrap: wrap; gap: 0.8rem; }
}


/* Messages aux familles : boutons qui ajoutent « le nom de l'élève », « la classe »... dans le message. */
.mots-a-inserer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.55rem; }
.mots-a-inserer[hidden] { display: none; }
.mots-a-inserer-titre { color: var(--ink-500); font-size: 0.8rem; margin-right: 0.15rem; }


/* Conduite : la case de note d'un élève. */
.champ-note-conduite { max-width: 7rem; margin-left: auto; text-align: right; }


/* ========================================================================
   Finition de l'interface (phase 64) : menu latéral, cloche de notifications, tableaux et zones tactiles sur
   téléphone, bouton « œil » des mots de passe.
   ======================================================================== */

/* --- Barre latérale : la marque et le pied restent fixes, seul le menu défile, avec un indice en haut et en bas ---- */
.sidebar { overflow: hidden; height: 100vh; height: 100dvh; scrollbar-width: none; }
.sidebar .marque, .sidebar .sidebar-pied { flex-shrink: 0; }
.sidebar nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  background:
    linear-gradient(#12203D 30%, rgba(18, 32, 61, 0)) 0 0 / 100% 34px no-repeat local,
    linear-gradient(rgba(18, 32, 61, 0), #12203D 70%) 0 100% / 100% 34px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)) 0 0 / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)) 0 100% / 100% 12px no-repeat scroll;
}
/* En mode sombre la barre a la même couleur que le fond de page : un filet fin les sépare. */
.sidebar { border-right: 1px solid var(--bord-sidebar, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bord-sidebar: rgba(255, 255, 255, 0.09); } }
:root[data-theme="dark"] { --bord-sidebar: rgba(255, 255, 255, 0.09); }

/* Sections repliables (<details>) : ouvertes par défaut, le choix est mémorisé par app.js */
details.nav-section { padding: 0.8rem 0.85rem 0.2rem; }
.nav-lien { padding-top: 0.42rem; padding-bottom: 0.42rem; }
details.nav-section > summary { list-style: none; }
details.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section-titre {
  cursor: pointer; user-select: none; min-height: 28px; border-radius: var(--rayon-controle);
  letter-spacing: 0.02em; transition: color 0.12s ease;
}
.nav-section-titre:hover { color: #fff; }
.nav-section-titre:focus-visible, .nav-lien:focus-visible, .topbar-cloche:focus-visible, .bouton-menu-mobile:focus-visible {
  outline: 2px solid var(--gold-400); outline-offset: 2px;
}
.nav-section-titre .nav-chevron { margin-left: auto; display: inline-flex; opacity: 0.75; transform: rotate(-90deg); transition: transform 0.2s ease; }
details[open] > .nav-section-titre .nav-chevron { transform: rotate(0deg); }
.nav-section-titre .nav-chevron .icone-svg { width: 14px; height: 14px; }

/* Une icône devant chaque lien ; la pastille dorée compte les notifications non lues */
.nav-lien { gap: 0.65rem; }
.nav-lien .icone-svg { width: 17px; height: 17px; opacity: 0.8; transition: opacity 0.12s ease, color 0.12s ease; }
.nav-lien:hover .icone-svg, .nav-lien.actif .icone-svg { opacity: 1; }
.nav-lien.actif .icone-svg { color: var(--gold-400); }
.nav-lien-texte { flex: 1 1 auto; min-width: 0; }
.nav-pastille {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--gold-400); color: var(--ink-900); font-size: 0.8rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Cloche de notifications dans la barre du haut */
.topbar-cloche {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: var(--ink-500);
  transition: background 0.12s ease, color 0.12s ease;
}
.topbar-cloche:hover { background: var(--paper-050); color: var(--texte-principal); }
.topbar-cloche:focus-visible { outline-color: var(--gold-500); }
.topbar-pastille { position: absolute; top: 1px; right: -2px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; }

/* Bouton « œil » : afficher ou masquer un mot de passe (ajouté par app.js) */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe input { padding-right: 2.9rem; }
.bouton-oeil {
  position: absolute; top: 50%; right: 0.3rem; transform: translateY(-50%); width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent;
  color: var(--ink-500); border-radius: var(--rayon-controle); cursor: pointer;
}
.bouton-oeil:hover { color: var(--texte-principal); background: var(--paper-050); }
.bouton-oeil:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 1px; }

/* --- Téléphone et écrans tactiles : zones à toucher plus grandes, menu plus aéré ---------------------------------- */
@media (max-width: 900px), (pointer: coarse) {
  .nav-lien { min-height: 44px; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .nav-section-titre { min-height: 40px; }
  .bouton-menu-mobile, .topbar-cloche { width: 44px; height: 44px; }
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 40px; }
  .form-control, .form-select { min-height: 44px; }
  .form-select-sm, .form-control-sm { min-height: 40px; }
  .menu-compte-entree { min-height: 44px; }
}

/* Un tableau trop large peut défiler sur le côté au lieu d'être coupé (les ombres signalent qu'il y a une suite) */
@media (max-width: 900px) {
  .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Le conteneur ajouté par app.js ne change rien à l'affichage d'un tableau sur ordinateur */
.table-cartes .cellule-valeur { display: contents; }

/* --- Tableaux de liste en cartes sur téléphone : chaque ligne devient une carte « libellé : valeur » ---------------- */
@media (max-width: 720px) {
  .card:has(.table-cartes) { background: transparent !important; border: none !important; box-shadow: none !important; }
  .card:has(.table-cartes) > .card-body { padding: 0 !important; overflow: visible; }
  .table-cartes thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .table-cartes, .table-cartes tbody, .table-cartes tr, .table-cartes td { display: block; width: 100%; }
  .table-cartes tbody tr {
    background: var(--paper-000); border: 1px solid var(--line-200); border-radius: var(--rayon-panneau);
    padding: 0.3rem 0.95rem; margin-bottom: 0.8rem; box-shadow: var(--ombre-panneau);
  }
  .table-cartes tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right;
    padding: 0.55rem 0 !important; border-bottom: 1px solid var(--line-200) !important; word-break: break-word;
  }
  .table-cartes tbody td:last-child { border-bottom: none !important; }
  .table-cartes tbody td::before {
    content: attr(data-label); flex: 0 0 36%; text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--ink-500);
  }
  .table-cartes tbody td[data-label=""]::before, .table-cartes tbody td[colspan]::before { display: none; }
  .table-cartes tbody td.cellule-actions { justify-content: flex-end; }
  .table-cartes .cellule-valeur { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.4rem 0.5rem; min-width: 0; }
  .table-cartes tbody td[colspan] .cellule-valeur { display: block; }
  .table-cartes tbody td.cellule-vide { display: none; }
  .table-cartes tbody td[colspan] { display: block; text-align: center; }
}

/* Texte secondaire (.small de Bootstrap = 0,875 em du texte parent, parfois moins de 12 px) : jamais sous 12 px */
.small, small { font-size: max(0.875em, 0.8rem); }

/* Liens de texte isolés (pied de page légal, liens des cartes) : zone à toucher confortable sur écran tactile */
@media (max-width: 900px), (pointer: coarse) {
  .pied-legal a, .table-cartes td a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.35rem; }
}


/* ========================================================================
   Graphiques (anneau, barres, colonnes) : figures SVG dessinées côté serveur, couleurs par classe (thème clair et sombre)
   ======================================================================== */
.g-bleu { --teinte: var(--bleu-600); }
.g-or { --teinte: var(--gold-500); }
.g-vert { --teinte: var(--success-600); }
.g-rouge { --teinte: var(--danger-600); }
.g-gris { --teinte: var(--ink-300); }
.graphique { margin: 0; }
.graphique-vide { color: var(--ink-500); font-size: 0.9rem; margin: 0.5rem 0 0; }

.graphique-anneau { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.anneau { width: 150px; height: 150px; flex-shrink: 0; transform: none; }
.anneau-fond { stroke: var(--line-200); }
.anneau-arc { stroke: var(--teinte); stroke-linecap: butt; }
.anneau-total { font-family: var(--police-affichage); fill: var(--texte-principal); }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; min-width: 190px; }
.legende li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
.legende-pastille { width: 12px; height: 12px; border-radius: 3px; background: var(--teinte); }
.legende-valeur { font-weight: 600; font-variant-numeric: tabular-nums; }
.legende-pourcentage { color: var(--ink-500); font-size: 0.85rem; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

.graphique-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(70px, 28%) 1fr auto; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.barre-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-svg { width: 100%; height: 12px; border-radius: 999px; overflow: hidden; display: block; }
.barre-fond { fill: var(--line-200); }
.barre-valeur-rect { fill: var(--teinte); }
.barre-valeur { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; }

.graphique-colonnes { display: flex; gap: 0.6rem; align-items: stretch; }
.colonne { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; }
.colonne-valeur { order: 1; text-align: center; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texte-principal); }
.colonne-svg { order: 2; width: 100%; height: 150px; display: block; border-radius: 6px 6px 0 0; overflow: hidden; }
.colonne-libelle { order: 3; text-align: center; font-size: 0.8rem; color: var(--ink-500); }
.colonne-fond { fill: var(--paper-050); }
.colonne-rect { fill: var(--bleu-600); }
.colonne-courante .colonne-rect { fill: var(--gold-500); }
.colonne-courante .colonne-libelle { color: var(--texte-principal); font-weight: 600; }

/* Sous-menu des statistiques */
.sous-menu { display: grid; gap: 2px; }
.sous-menu-titre { font-size: 0.8rem; font-weight: 600; color: var(--ink-500); margin: 0.9rem 0 0.3rem; padding: 0 0.6rem; letter-spacing: 0.02em; }
.sous-menu .nav-lien-stats {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: var(--rayon-controle);
  color: var(--ink-800); font-size: 0.9rem; transition: background 0.12s ease, color 0.12s ease;
}
.sous-menu .nav-lien-stats:hover { background: var(--paper-050); color: var(--texte-principal); }
.sous-menu .nav-lien-stats.actif { background: var(--gold-050); color: var(--gold-600); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold-500); }

/* Tableau de bord : cartes de graphiques et raccourcis */
.carte-graphique-titre { font-size: 1rem; margin: 0 0 0.15rem; }
.carte-graphique-sous-titre { color: var(--ink-500); font-size: 0.85rem; margin: 0 0 1rem; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Écrans tactiles : liens du sous-menu des statistiques et pastilles-liens des alertes à une taille confortable */
@media (max-width: 900px), (pointer: coarse) {
  .sous-menu .nav-lien-stats { min-height: 44px; }
  .alerte-details a.badge { padding: 0.65em 0.9em; }
}


/* Bouton de langue : « العربية » depuis le français, « Français » depuis l'arabe */
.bouton-langue-formulaire { display: inline-flex; margin: 0; }
.bouton-langue {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.3rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line-300); background: transparent; color: var(--ink-700); font: inherit; font-size: 0.86rem;
  font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.bouton-langue .icone-svg { width: 16px; height: 16px; }
.bouton-langue:hover { background: var(--paper-050); color: var(--texte-principal); border-color: var(--gold-500); }
.bouton-langue:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.auth-langue, .page-langue { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
.page-langue { position: fixed; }
.vitrine-nav-actions { display: flex; align-items: center; gap: 0.9rem; }
.annuaire-langue { margin-top: auto; padding-top: 1rem; }
.auth-langue .bouton-langue, .page-langue .bouton-langue, .vitrine-nav .bouton-langue, .annuaire-langue .bouton-langue,
.legal-entete .bouton-langue { color: #E7EAF2; border-color: rgba(255, 255, 255, 0.3); }
.auth-langue .bouton-langue:hover, .page-langue .bouton-langue:hover, .vitrine-nav .bouton-langue:hover,
.annuaire-langue .bouton-langue:hover, .legal-entete .bouton-langue:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: var(--gold-400); }
@media (max-width: 900px), (pointer: coarse) { .bouton-langue { min-height: 40px; } }


/* Bouton « Installer l'application » : visible seulement quand le navigateur permet l'installation (voir app.js) */
.bouton-installer {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.3rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--gold-500); background: transparent; color: var(--ink-700); font: inherit; font-size: 0.86rem;
  font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.bouton-installer[hidden] { display: none; }
.bouton-installer .icone-svg { width: 16px; height: 16px; }
.bouton-installer:hover { background: var(--paper-050); color: var(--texte-principal); }
.bouton-installer:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.auth-langue { display: flex; align-items: center; gap: 0.5rem; }
.auth-langue .bouton-installer, .vitrine-nav .bouton-installer { color: #E7EAF2; border-color: var(--gold-400); }
.auth-langue .bouton-installer:hover, .vitrine-nav .bouton-installer:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
@media (max-width: 900px), (pointer: coarse) { .bouton-installer { min-height: 40px; } }
@media (max-width: 720px) {
  .topbar .bouton-installer { padding: 0.3rem; min-width: 40px; justify-content: center; }
  .topbar .bouton-installer-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.installer-aide {
  max-width: min(26rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem; border: 1px solid var(--line-200); border-radius: var(--rayon-panneau);
  background: var(--paper-000); color: var(--texte-principal); box-shadow: var(--ombre-flottante);
}
.installer-aide::backdrop { background: rgba(8, 14, 28, 0.55); }
.installer-aide h2 { font-size: 1.15rem; margin: 0 0 0.8rem; }
.installer-aide ol { margin: 0 0 1.2rem; padding-inline-start: 1.25rem; line-height: 1.55; }
.installer-aide li + li { margin-top: 0.45rem; }
.installer-aide form { margin: 0; text-align: end; }


/* ========================================================================
   Menu d'actions d'une ligne (<details class="menu-actions">) : une ou deux actions principales restent visibles, le reste
   est rangé dans ce menu (au lieu de huit boutons alignés). Le panneau est posé à l'écran par app.js (position fixe) pour que
   la carte qui contient le tableau ne le coupe jamais ; sans JavaScript il s'ouvre quand même, à sa place naturelle.
   ======================================================================== */
.actions-ligne { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.actions-ligne form { margin: 0; display: inline-flex; }
td.cellule-actions-fixe, td.text-end:has(> .actions-ligne) { white-space: nowrap; }
.menu-actions { position: relative; display: inline-block; }
.menu-actions > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; user-select: none; }
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions > summary::after {
  content: ""; width: 0.38rem; height: 0.38rem; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg); transition: transform 0.2s ease;
}
.menu-actions[open] > summary::after { transform: translateY(0.06rem) rotate(225deg); }
.menu-actions[open] > summary { background: var(--paper-050); }
.menu-actions > summary:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.menu-actions-panneau {
  position: fixed; z-index: 80;
  min-width: 230px; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); overflow-y: auto;
  background: var(--paper-000); border: 1px solid var(--line-200); border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre-flottante); padding: 0.4rem; text-align: start; white-space: normal;
}
/* app.js pose le panneau puis lui donne la classe « pose » ; jusque-là il reste invisible (sans JavaScript, il s'affiche tel quel) */
.menus-actions-js .menu-actions-panneau:not(.pose) { visibility: hidden; }
.menu-actions-panneau.pose { animation: menu-compte-apparition 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.menu-actions-panneau form { margin: 0; display: block; }
.menu-actions-titre { margin: 0.55rem 0.7rem 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-500); }
.menu-actions-titre:first-child { margin-top: 0.3rem; }
.menu-actions-separateur { margin: 0.35rem 0; border: 0; border-top: 1px solid var(--line-200); }
.menu-actions-entree {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 36px; text-align: start;
  background: none; border: 0; border-radius: var(--rayon-controle); padding: 0.45rem 0.7rem;
  font: inherit; font-size: 0.88rem; color: var(--texte-principal); text-decoration: none; cursor: pointer;
}
.menu-actions-entree:hover, .menu-actions-entree:focus-visible {
  background: var(--paper-050); box-shadow: inset 2px 0 0 var(--gold-500); outline: none; color: var(--texte-principal); text-decoration: none;
}
.menu-actions-danger, .menu-actions-danger:hover, .menu-actions-danger:focus-visible { color: var(--danger-600); }
@media print { .menu-actions { display: none; } }

/* Les montants et les références ne se coupent jamais en deux lignes (« 25 000 / FCFA », « REC-2026- / 000044 ») */
.montant-val, .texte-matricule, .table td.reference-val { white-space: nowrap; }

/* Colonnes du graphique des encaissements : un mois à zéro montre une simple ligne, pas un grand bloc vide */
.colonne-fond { opacity: 0.6; }
.colonne-vide .colonne-fond { fill: transparent; }
.colonne-vide .colonne-svg { border-bottom: 2px solid var(--line-300); border-radius: 0; }
.colonne-vide .colonne-valeur { color: var(--ink-300); font-weight: 500; }

/* Chiffres clés du tableau de bord : répartis sans carte orpheline, quel que soit leur nombre (1 à 8) */
.grille-indicateurs { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.grille-indicateurs > * { min-width: 0; }
@media (min-width: 576px) and (max-width: 1199.98px) {
  .grille-indicateurs { grid-template-columns: repeat(2, 1fr); }
  .grille-indicateurs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .grille-indicateurs { grid-template-columns: repeat(12, 1fr); }
  .grille-indicateurs > * { grid-column: span 3; }
  .grille-indicateurs[data-nombre="1"] > *, .grille-indicateurs[data-nombre="3"] > *, .grille-indicateurs[data-nombre="6"] > * { grid-column: span 4; }
  .grille-indicateurs[data-nombre="2"] > * { grid-column: span 6; }
  .grille-indicateurs[data-nombre="5"] > :nth-child(-n+3) { grid-column: span 4; }
  .grille-indicateurs[data-nombre="5"] > :nth-child(n+4) { grid-column: span 6; }
  .grille-indicateurs[data-nombre="7"] > :nth-child(n+5) { grid-column: span 4; }
}

/* Liens isolés en bas d'une carte ou dans une liste de notifications : même confort tactile que les boutons */
.lien-pied-carte, .lien-ligne { display: inline-block; }
@media (max-width: 900px), (pointer: coarse) {
  .lien-pied-carte, .lien-ligne { display: inline-flex; align-items: center; min-height: 44px; }
  .alerte-details a.badge { padding: 0.65rem 0.8rem !important; }
  .menu-actions-entree { min-height: 44px; }
  /* Cases à cocher et interrupteurs assez grands pour un doigt (appel de la cantine, des absences, réglages) */
  input[type="checkbox"], input[type="radio"] { width: 1.65rem; height: 1.65rem; }
  .form-check-input { margin-top: 0.1rem; }
  .form-switch input[type="checkbox"].form-check-input { width: 3rem; }
  .form-check { min-height: 1.65rem; padding-inline-start: 2.3rem; }
  .form-check .form-check-input { margin-inline-start: -2.3rem; }
  .table td > .form-check-input:only-child { margin: 0.35rem; }
  .table td label[for] { display: inline-flex; align-items: center; min-height: 44px; }
}
.actions-ligne-debut { justify-content: flex-start; }
.menu-actions-formulaire { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0.5rem 0.4rem; }
.menu-actions-formulaire .form-control { min-width: 9rem; }
.select-formule { min-width: 16.5rem; font-size: 0.8rem; }
/* Conseil de classe : listes assez larges pour lire « Tableau d'honneur », observation à l'aise ; sur téléphone, le tableau devient des cartes qui tiennent dans l'écran */
.select-conseil { min-width: 11rem; }
.champ-observation { min-width: 9rem; }
@media (max-width: 720px) { .table-cartes.table-large { min-width: 0; } .select-conseil, .champ-observation { min-width: 0; width: 100%; max-width: 15rem; } }
/* Liens de texte (noms dans les tableaux, liens de la page de connexion, pieds de page) : zone à toucher confortable sur écran tactile */
@media (max-width: 900px), (pointer: coarse) {
  .table td a:not(.btn):not(.badge), .auth-carte a:not(.btn):not(.auth-lien-logo), .auth-lien-retour a, .legal-pied-liens a, .vitrine-ecole-autre {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.3rem;
  }
  .alerte-details a.badge { display: inline-flex; align-items: center; min-height: 40px; }
}
/* Les actions d'une ligne de tableau restent sur une seule ligne sur ordinateur ; elles passent à la ligne sur téléphone (cartes) */
@media (min-width: 721px) { .table td .actions-ligne { flex-wrap: nowrap; } }
@media (max-width: 720px) {
  .table-large.table-appel { min-width: 0; }
  .table-appel th, .table-appel td { padding: 0.45rem 0.35rem; }
  .table-appel td:first-child { width: 2.8rem; }
}
.grille-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.5rem; }
.grille-boutons .btn { width: 100%; }

/* Chercher une page du menu (menu long) : champ collé en haut de la barre latérale, résultats à la place des rubriques */
.nav-filtre { position: sticky; top: 0; z-index: 3; padding: 0.8rem 0.85rem 0.35rem; background: #12203D; }
.nav-filtre[hidden], .nav-resultats[hidden] { display: none; }
.nav-filtre-champ {
  width: 100%; min-height: 36px; padding: 0.45rem 0.7rem; font-size: 0.86rem; color: #fff;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--rayon-controle);
}
.nav-filtre-champ::placeholder { color: #9AA5C2; }
.nav-filtre-champ:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; background: rgba(255, 255, 255, 0.1); }
.nav-resultats { padding: 0.4rem 0.85rem 1rem; }
.nav-aucun { margin: 0; padding: 0.5rem 0.6rem; font-size: 0.86rem; color: #9AA5C2; }
.filtre-actif > .nav-section { display: none; }

/* ========================================================================
   Accueil public : le vrai logo au centre, ligne d'atouts, captures de l'application
   ======================================================================== */
.vitrine-decor-centre-logo { width: 156px; height: 108px; padding: 10px; border-radius: 22px; background: #fff; border: 2px solid var(--gold-400); }
.vitrine-decor-centre-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .vitrine-decor-centre-logo { width: 118px; height: 82px; padding: 7px; border-radius: 18px; } }

.vitrine-atouts {
  list-style: none; margin: 0; padding: 0.9rem 4vw; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.9rem;
  background: #1B2C4D; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vitrine-atouts li { display: flex; align-items: center; gap: 0.5rem; color: #DDE3F0; font-size: 0.88rem; }
.vitrine-atouts li::before {
  content: ""; flex-shrink: 0; width: 0.36rem; height: 0.66rem; margin-top: -0.15rem;
  border-right: 2px solid var(--gold-400); border-bottom: 2px solid var(--gold-400); transform: rotate(40deg);
}

.vitrine-vues { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.vitrine-vue { margin: 0; }
.vitrine-vue img { display: block; width: 100%; height: auto; }
.vitrine-vue-ecran {
  grid-column: 1 / -1; overflow: hidden; border-radius: 12px; border: 1px solid var(--line-300); background: var(--paper-000);
  box-shadow: 0 24px 60px -28px rgba(18, 32, 61, 0.45);
}
.vitrine-vue-barre { display: flex; gap: 6px; padding: 9px 12px; background: var(--paper-050); border-bottom: 1px solid var(--line-200); }
.vitrine-vue-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-300); }
.vitrine-vue-telephone {
  max-width: 250px; width: 100%; justify-self: center; overflow: hidden; border: 6px solid #12203D; border-radius: 28px; background: #12203D;
  box-shadow: 0 24px 50px -26px rgba(18, 32, 61, 0.55);
}
.vitrine-vue-telephone img { border-radius: 20px; }
@media (min-width: 900px) {
  .vitrine-vues { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .vitrine-vue-ecran { grid-column: auto; }
}