/* ============================================================================
   app-theme.css — Thème principal de l'app — clair premium (réécriture propre).
   Chargé en dernier (après signature-premium.css). Palette claire, accent BLEU
   (AUCUN violet), sidebar gauche fonctionnelle (menus repliables). Pas d'empilement
   de !important : on ne force que pour neutraliser une règle source !important.
   ========================================================================== */

/* ════════════════════════════ 1. TOKENS ════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-primary:   #fafbfe;
  --bg-secondary: #ffffff;
  --bg-tertiary:  #eef1f8;
  --bg-elevated:  #ffffff;

  --label-primary:    #0b1220;
  --label-secondary:  #4b5563;
  --label-tertiary:   #6b7280;
  --label-quaternary: #aab2bf;

  --separator:        rgba(11,18,32,0.08);
  --separator-opaque: #e2e8f0;

  --tint:           #2563eb;
  --tint-secondary: #06b6d4;
  --brand-navy:     #30419a;
  --brand-navy2:    #2563eb;
  --accent:    #2563eb;
  --accent-2:  #06b6d4;
  --accent-3:  #2563eb;
  --blue:      #2563eb;

  --th-grad:    linear-gradient(120deg, #2563eb 0%, #1d9bf0 48%, #06b6d4 100%);
  --th-grad-h:  linear-gradient(120deg, #1d4ed8 0%, #0e8ac4 48%, #0891b2 100%);
  /* Variantes BOUCLEES pour l animation : la couleur de fin est identique a celle de
     depart, si bien qu un defilement continu ne laisse voir aucune jointure. */
  --th-grad-flow:   linear-gradient(120deg, #2563eb 0%, #1d9bf0 22%, #06b6d4 50%, #1d9bf0 78%, #2563eb 100%);
  --th-grad-flow-h: linear-gradient(120deg, #1d4ed8 0%, #0e8ac4 22%, #0891b2 50%, #0e8ac4 78%, #1d4ed8 100%);
  --th-blue:    #2563eb;  --th-blue-soft:  #dbeafe;
  --th-green:   #0d9373;  --th-green-soft: #dcfce7;
  --th-amber:   #d97706;  --th-amber-soft: #fef3c7;
  --th-red:     #dc2626;  --th-red-soft:   #fee2e2;

  --season-accent:   #2563eb;
  --season-accent-2: #06b6d4;

  --shadow-soft:   0 1px 2px rgba(11,18,32,0.04), 0 1px 3px rgba(11,18,32,0.06);
  --shadow-raised: 0 4px 12px rgba(11,18,32,0.06), 0 1px 3px rgba(11,18,32,0.05);
  --ring-focus:    0 0 0 3px rgba(37,99,235,0.20);
}
html, body, .app-body,
body.app-body.season-spring, body.app-body.season-summer,
body.app-body.season-autumn, body.app-body.season-winter {
  --season-accent: #2563eb; --season-accent-2: #06b6d4; --season-ink: #30419a;
}

/* ════════════════════════ 2. FOND STATIQUE BLANC ═══════════════════════ */
body, .app-body { background: #fafbfe; }
body.app-body::before, body.app-body::after,
.sr-aurora, .season-bg { animation: none !important; background: none !important; opacity: 0 !important; }
.compo-hero::before, .compo-hero::after { background: none !important; opacity: 0 !important; }
html:not([data-theme="dark"]) body.app-body {
  background-image: none !important; background-color: #fafbfe !important; background-attachment: initial !important;
}

/* ════════════════════════════ 3. BOUTONS / LIENS ═══════════════════════ */
.app-btn-primary,
.btn-pill:not(.btn-pill--ghost):not(.btn-pill--danger),
.btn-elev--primary {
  background: var(--th-grad); border: none; color: #fff;
  box-shadow: 0 1px 2px rgba(37,99,235,0.28), 0 6px 16px rgba(37,99,235,0.16);
}
.app-btn-primary:hover,
.btn-pill:not(.btn-pill--ghost):not(.btn-pill--danger):hover { background: var(--th-grad-h); filter: none; }
.app-btn-outline { border: 1px solid var(--separator-opaque); background: var(--bg-secondary); color: var(--label-primary); border-radius: 10px; }
.app-btn-outline:hover { background: var(--bg-tertiary); }
.app-btn-ghost { border-radius: 10px; }
a.app-link, .app-link { color: var(--th-blue); }
.app-form input:focus, .app-form select:focus, .app-form textarea:focus,
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--th-blue); box-shadow: var(--ring-focus); }

/* ════════════════════════════ 4. CARTES / KPI / TABLES ═════════════════ */
.stat-card, .compo-metric, .compo-panel, .compo-card, .kpi-card {
  background: var(--bg-secondary); border: 1px solid var(--separator-opaque); border-radius: 16px; box-shadow: var(--shadow-soft);
}
.stat-card, .kpi-card, .compo-card { padding: clamp(1.1rem, 2vw, 1.4rem); }
.stat-card__label, .compo-metric__label, .kpi-card__label {
  text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; color: var(--label-tertiary);
}
.stat-card__value, .compo-metric__value, .kpi-card__value { font-size: 30px; font-weight: 800; color: var(--label-primary); letter-spacing: -0.01em; }
.stat-card__trend--up { color: var(--th-green); } .stat-card__trend--down { color: var(--th-red); }
.ui-badge { border-radius: 999px; font-weight: 600; border: none; }
.ui-badge--success { background: var(--th-green-soft); color: var(--th-green); }
.ui-badge--warn    { background: var(--th-amber-soft); color: var(--th-amber); }
.ui-badge--danger  { background: var(--th-red-soft);   color: var(--th-red); }
.ui-badge--info    { background: var(--th-blue-soft);  color: var(--th-blue); }
.ui-badge--neutral { background: var(--bg-tertiary);   color: var(--label-secondary); }
.table-pro, .app-table { border-radius: 14px; overflow: hidden; border: 1px solid var(--separator-opaque); background: var(--bg-secondary); }
.table-pro thead th, .app-table thead th {
  background: var(--bg-tertiary); color: var(--label-tertiary); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700;
}
.app-table th, .app-table td, .table-pro th, .table-pro td { padding: 12px 14px; }
.table-pro tbody tr:hover td, .app-table tbody tr:hover td { background: rgba(37,99,235,0.04); }

/* ════════════════════════ 5. EN-TÊTE / RYTHME / CONTENU ════════════════ */
.compo-hero { background: var(--bg-secondary) !important; border: 1px solid var(--separator-opaque); border-radius: 20px; padding: clamp(1.4rem, 2.5vw, 1.9rem) clamp(1.4rem, 2.5vw, 2rem); }
.app-page-header { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 1024px) {
  :root { --page-gutter: clamp(1.75rem, 2.5vw, 2.75rem); }
}

/* ════════════════════════ 6. COUCHE MODALE / POPOVERS ══════════════════ */
.app-modal-backdrop, dialog.app-modal::backdrop, .cmdk-backdrop { background: rgba(11,18,32,0.45) !important; backdrop-filter: blur(2px); }

/* ════════════════════════════════════════════════════════════════════════
   7. SIDEBAR GAUCHE (gestion / enseignant / élève) — nav-layout-side, non-admin
   ════════════════════════════════════════════════════════════════════════ */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) {
  position: fixed; top: var(--sb-top, 0px); left: 0; width: 252px; height: calc(100vh - var(--sb-top, 0px));
  background: var(--bg-tertiary); border: none; border-right: 1px solid var(--separator-opaque);
  border-radius: 0; z-index: 1000; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav)::before,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav)::after { display: none !important; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-inner {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  box-sizing: border-box; height: 100%; width: 100%; max-width: 100%; padding: 18px 10px 12px; gap: 2px; overflow: hidden;
}
/* Bureau uniquement : la barre laterale est toujours visible, donc pas de hamburger.
   Sur mobile (<=768px) cette regle NE DOIT PAS s appliquer, sinon son !important cachait
   le hamburger meme barre repliee -> plus aucun moyen d ouvrir le menu (menu casse). */
@media (min-width: 769px) {
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .nav-hamburger,
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-hamburger { display: none !important; }
}

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links {
  flex-direction: column; align-items: stretch; gap: 1px; flex: 1 1 auto; width: 100%; margin: 4px 0 0; overflow-y: auto; overflow-x: hidden;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links > a {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; position: relative;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--label-primary); background: transparent; border: none; text-align: left;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links > a .nav-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 10px; border-radius: 10px; background: transparent; border: none; text-align: left;
  font-size: 14px; font-weight: 600; color: var(--label-primary); cursor: pointer;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger:hover { background: rgba(37,99,235,0.08); }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger .nav-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger .app-nav-chev { margin-left: auto; width: 12px; height: 12px; opacity: .55; transition: transform .2s var(--ease, ease); }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group { display: block; width: 100%; margin: 1px 0; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropdown {
  position: static; display: none; box-shadow: none; background: transparent; border: none;
  padding: 1px 0 4px; margin: 0; min-width: 0; width: 100%; inset: auto; opacity: 1; visibility: visible; transform: none;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group.is-open > .app-nav-dropdown,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group:has(.app-nav-dropitem.active) > .app-nav-dropdown { display: block; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group.is-open .app-nav-chev,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group:has(.app-nav-dropitem.active) .app-nav-chev { transform: rotate(180deg); }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; position: relative;
  padding: 8px 10px 8px 28px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--label-primary);
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem .nav-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links > a:hover,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem:hover { background: rgba(37,99,235,0.08); color: var(--label-primary); }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links > a.active,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem.active { background: var(--th-blue-soft); color: var(--th-blue); font-weight: 600; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links > a.active .nav-icon,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem.active .nav-icon { color: var(--th-blue); }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links a .nav-icon { position: static; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links a .nav-icon,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger .nav-icon { position: relative; overflow: visible; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links a .nav-badge,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem .nav-badge,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger .nav-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: 9px; border: 2px solid var(--bg-tertiary); box-sizing: border-box; pointer-events: none;
}

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; box-sizing: border-box;
  order: -1; margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--separator); flex: 0 0 auto;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user > * { box-sizing: border-box; max-width: 100%; min-width: 0; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .ecole-switcher { flex: 1 1 100%; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user-info {
  order: -2; flex: 1 1 100%; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center;
  padding: 7px 9px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--separator-opaque);
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user-info::before { content: attr(data-initials); grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--th-grad); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user-name { grid-column: 2; font-weight: 700; color: var(--label-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user-sub { grid-column: 2; font-size: 12px; color: var(--label-tertiary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-switcher { order: -1; flex: 1 1 100%; justify-content: flex-start; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-presence { font-size: 12px; color: var(--label-tertiary); white-space: nowrap; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-notif, .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user > .app-btn-ghost { flex: 0 0 auto; }

/* Lecteur radio : le bloc compact prend toute la largeur, juste sous la rangée
   d'outils (recherche / déconnexion), sans déséquilibrer la colonne. */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .rmb-side { order: 1; flex: 1 1 100%; max-width: 100%; }
/* Colonne étroite (252 px) : station sur la 1re ligne, volume sur la 2e — rien
   n'est rogné, le bloc reste bas et discret. */
@media (min-width: 901px) {
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .rmb-side { flex-wrap: wrap; row-gap: 4px; border-radius: 14px; padding: 5px 7px; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .rmb-side-name { flex: 1 1 0; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .rmb-side-vol { flex: 1 1 100%; min-width: 0; }
}

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) ~ .app-main,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) ~ .app-footer { margin-left: 252px; }

.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-notif-panel {
  position: fixed; top: calc(var(--sb-top, 0px) + 88px); left: 264px; right: auto; bottom: auto;
  width: min(360px, calc(100vw - 288px)); max-height: 72vh; overflow-y: auto; transform-origin: top left;
}

@media (max-width: 900px) {
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) {
    position: static; width: auto; height: auto; border-radius: 0; border-right: none; border-bottom: 1px solid var(--separator-opaque);
  }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-inner { flex-direction: row; align-items: center; height: auto; padding: 0.5rem 0.8rem; overflow: visible; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links { flex-direction: row; overflow: visible; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropdown { position: absolute; width: auto; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-group:has(.app-nav-dropitem.active) > .app-nav-dropdown { display: none; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) ~ .app-main,
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) ~ .app-footer { margin-left: 0; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user { flex-direction: row; margin-top: 0; border-top: none; padding-top: 0; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user-info::before { display: none; }
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-notif-panel { position: absolute; top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: 340px; transform-origin: top right; }
}

/* ════════════════════════════ 8. ASSISTANT JULIA ══════════════════════ */
.ai-launcher { left: auto !important; right: max(20px, env(safe-area-inset-right)) !important; background: var(--th-grad) !important; }
.ai-assistant { left: auto !important; right: max(20px, env(safe-area-inset-right)) !important; }

/* ════════════════════════════ 9. PLANNING ═════════════════════════════ */
.planning-gestion-screen .pg-col-head { padding: 0.4rem 0.75rem; }
.event-row { padding: 0.85rem 1.15rem; }

/* Bandeaux (dev/impersonation) : la sidebar fixe démarre sous la barre, jamais dessous-recouverte */

/* Pied : compacter pour garantir la deconnexion visible */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links { min-height: 0; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-presence-label { display: none; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user .app-notif > button, .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-user > .app-btn-ghost { padding: 6px; }

/* Hauteur des bandeaux (dev/impersonation) : décale la sidebar fixe */
body { --sb-top: 0px; }
body.has-dev-banner, body.has-imp-banner { --sb-top: 1.85rem; }
body.has-dev-banner.has-imp-banner { --sb-top: 3.7rem; }

/* taille des glyphes dans les pastilles */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .nav-icon svg { width: 16px; height: 16px; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-dropitem .nav-icon svg { width: 14px; height: 14px; }

/* Pastilles colorées pleines (uniformes) */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger.active .nav-icon { width: 28px; height: 28px; }

/* annule marge icone section heritee */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-grouptrigger .nav-icon { margin-right: 0; }


/* ════════════════ ACCENT AZUR ANIMÉ + LOGO SIDEBAR (premium) ═══════════ */
/* Le defilement parcourt exactement une largeur de motif : comme le degrade est boucle,
   le retour au point de depart est invisible. Vitesse constante (linear) plutot que
   ease-in-out alternate, qui marquait un temps d arret a chaque extremite. */
@keyframes th-flow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.app-btn-primary,
.btn-pill:not(.btn-pill--ghost):not(.btn-pill--danger),
.btn-elev--primary,
.ai-launcher {
  background-image: var(--th-grad-flow);
  background-size: 200% 100%;
  animation: th-flow 14s linear infinite;
}
/* Le survol reposait un degrade non boucle : la couture reapparaissait au passage. */
.app-btn-primary:hover,
.btn-pill:not(.btn-pill--ghost):not(.btn-pill--danger):hover,
.btn-elev--primary:hover,
.ai-launcher:hover {
  background-image: var(--th-grad-flow-h);
}
@media (prefers-reduced-motion: reduce) {
  .app-btn-primary, .btn-pill, .btn-elev--primary, .ai-launcher { animation: none; }
}

/* Logo de l'app en haut de la sidebar (au-dessus de la carte profil) */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-brand {
  order: -3; flex: 1 1 100%; padding: 2px 4px 10px; margin-bottom: 2px;
}
/* Marque EN TETE (espace client) = enfant direct de .app-nav-inner : hauteur
   naturelle. Sinon flex:1 1 100% l etirait sur toute la colonne (gros vide en
   haut, liens repousses en bas). La marque au pied (gestion, dans .app-nav-user)
   garde son comportement d origine. */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-inner > .app-nav-brand { flex: 0 0 auto; }
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-brand .brand-mark {
  display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px;
  color: var(--label-primary); text-decoration: none;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-brand .brand-mark-logo,
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-brand .brand-mark-img {
  width: 26px; height: 26px; flex: 0 0 26px;
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-brand .brand-mark-name small {
  color: var(--label-tertiary); font-weight: 600;
}


/* ════════ PASTILLES MENU : dégradé premium par teinte (--ic-h) + reflet ════════
   Arc-en-ciel : chaque entrée porte sa teinte via style="--ic-h:<deg>". Le dégradé
   (clair→foncé de la MÊME teinte) donne la profondeur, sans mouvement : un menu est
   regardé cent fois par jour et n'annonce rien, une animation permanente y est du bruit. */
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links .nav-icon {
  background: linear-gradient(135deg, hsl(var(--ic-h, 212) 85% 60%) 0%, hsl(var(--ic-h, 212) 72% 42%) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11,18,32,0.16);
}
.nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-nav-links .nav-icon svg { stroke: #fff; }


/* Popover « Affichage » de la sidebar : sort du flux (sidebar = overflow caché) et
   s'ancre à droite du bouton via JS (left/top). Desktop only — sur mobile la feuille
   d'action ancrée en bas (cf app.css @max-768) reste prioritaire. */
@media (min-width: 769px) {
  .nav-layout-side .app-nav:not(.app-nav-admin):not(.super-nav) .app-appearance-pop {
    position: fixed; right: auto; bottom: auto; width: 236px; z-index: 2000;
  }
}

/* Carte « Aujourd'hui » (horloge, date, meteo) du tableau de bord.
   Empilee sur telephone, elle doit faire la MEME largeur que les cartes voisines :
   une carte plus etroite au milieu d'une pile se lit comme un defaut de centrage.
   La limite de largeur n'a de sens que lorsque la mise en page passe reellement en
   deux colonnes, la carte se tenant alors a cote de l'agenda du jour. */
/* Aucune largeur declaree : dans une grille, la carte s'etire d'elle-meme pour
   remplir sa case, exactement comme sa voisine. Poser `width:100%` serait faux ici,
   la feuille etant en `content-box` : le remplissage interieur s'ajouterait. */
@media (min-width: 900px) {
  /* Pas de largeur MAXIMALE : c'est la grille qui fixe la largeur de la colonne, et la
     carte n'a qu'a la remplir — comme l'agenda a cote d'elle. Un maximum la collerait a
     gauche de sa colonne des que l'ecran s'elargit (mesure : 343 px de vide a 2560 px). */
  .carte-du-jour { min-width: 188px; }
}


/* Masque a l'oeil, LU par les lecteurs d'ecran.
   Ni `display:none` ni `visibility:hidden` : ceux-la retirent l'element pour tout le
   monde, y compris pour les personnes qui ecoutent la page. On le reduit donc a un point
   invisible en le laissant dans le document. */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* Sur telephone, un champ dont le texte fait moins de 16 px declenche un ZOOM automatique
   des qu'on le touche : c'est un garde-fou de lisibilite du navigateur, et il ne se
   desactive pas (le `user-scalable=no` est ignore deliberement). La seule facon de ne pas
   subir ce zoom est donc de ne jamais descendre sous 16 px sur ces ecrans.

   La regle ne vise QUE les ecrans etroits : sur ordinateur, 14 px reste le bon rythme
   typographique de l'application. */
@media (max-width: 820px) {
  /* La valeur est forcee : les feuilles de style des pages fixent leurs propres tailles
     (13,6 px au planning, 14,7 px chez les eleves, 15,2 px en comptabilite) et
     reprenaient la main. Ce n'est pas une preference qu'on ecrase ici, c'est une
     contrainte du navigateur : sous 16 px il zoome, et ca ne se desactive pas. */
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="password"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], input:not([type]),
  textarea, select {
    font-size: 16px !important;
  }
}

/* Lecteur radio : logo de la station, pose par-dessus son initiale.
   L'initiale reste dessous et se voit tant que l'image n'est pas arrivee — ou pour
   toujours si la station n'expose pas de logo. Rien ne saute au chargement. */
.rmb-rowph { position: relative; overflow: hidden; }
.rmb-rowlogo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #fff;
}

/* Separation des antennes et de leurs declinaisons thematiques. */
.rmb-section {
  padding: .55rem .7rem .25rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--label-tertiary, #8a8a8e);
  position: sticky; top: 0;
  background: var(--carte, var(--background-primary, #fff));
  z-index: 1;
}