/* ============================================================================
 * liquid-glass.css — Habillage "Liquid Glass" (matériau translucide façon Apple)
 *
 * AJOUT ISOLÉ ET RÉVERSIBLE : ce fichier ne fait que surcharger l'apparence des
 * composants existants (.app-card, .app-nav, .app-modal-card, etc.) via des
 * surfaces translucides + flou d'arrière-plan. Aucune structure HTML/JS touchée.
 *
 * POUR REVENIR À LA VERSION ACTUELLE : retirer la ligne <link liquid-glass.css>
 * dans views/partials/head.ejs (ou git revert du commit). Rien d'autre.
 *
 * Conserve la charte (navy/bleus désaturés, police système) — on ne change que
 * le MATÉRIAU (translucidité, profondeur), pas les couleurs de marque.
 * ========================================================================== */

:root {
  --lg-blur: 22px;
  --lg-saturate: 180%;
  --lg-surface:        rgba(255, 255, 255, 0.62);
  --lg-surface-strong: rgba(255, 255, 255, 0.74);
  --lg-surface-soft:   rgba(255, 255, 255, 0.50);
  /* Barre de nav : fond plus translucide que les cartes pour laisser le fond
     (qui défile dessous) transparaître, tout en gardant les icônes lisibles. */
  --lg-nav-surface:    rgba(255, 255, 255, 0.66);
  /* Flou des grandes surfaces (cartes/modales) — abaissé sur tablette (GPU). */
  --lg-blur-card:      30px;
  --lg-border:         rgba(255, 255, 255, 0.50);
  /* RIM (liseré spéculaire) — REFONTE 2026-06-24 : Apple « Liquid Glass ».
     AVANT : 4 ombres internes dont une bande blanche à 0.85 d'alpha → arête dure,
     aspect PLASTIQUE. MAINTENANT : un seul filet doux en haut (capte la lumière
     ambiante) + un trait de contour très léger. Subtil, jamais de blanc qui claque. */
  --lg-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  /* SHEEN (anciennement « specular ») — REFONTE 2026-06-24.
     AVANT : balayage DIAGONAL brillant (linear-gradient 125deg à 0.42 d'alpha) qui
     posait une bande de gloss sur chaque surface → aspect plastique, et bande DURE
     en sombre/Firefox (le ::after peignait ce dégradé brut, le filtre SVG de lentille
     n'étant pas appliqué hors Chromium). MAINTENANT : un voile vertical TRÈS doux,
     concentré sur le tout-haut de la surface (lumière ambiante diffuse), qui s'éteint
     vite — pas de bande, pas de diagonale. Nom de token conservé (consommé partout). */
  --lg-specular:       linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 14%, rgba(255, 255, 255, 0) 34%);
  --lg-shadow:         0 8px 30px rgba(15, 37, 68, 0.10);
  --lg-shadow-lg:      0 24px 60px rgba(15, 37, 68, 0.16);
}
:root[data-theme="dark"] {
  --lg-surface:        rgba(28, 28, 36, 0.55);
  --lg-surface-strong: rgba(34, 34, 44, 0.70);
  --lg-surface-soft:   rgba(28, 28, 36, 0.42);
  --lg-nav-surface:    rgba(24, 24, 32, 0.62);
  --lg-border:         rgba(255, 255, 255, 0.10);
  /* Sombre : rim quasi invisible (0.08), jamais de blanc franc. C'EST LE CORRECTIF
     du « reflet dur en dark / Firefox » signalé : plus aucune arête lumineuse. */
  --lg-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 0.5px rgba(255, 255, 255, 0.05);
  /* Sombre : voile haut quasi nul (0.05). Sur Firefox (pas de lentille SVG) le ::after
     ne peint plus qu'un soupçon de lumière en haut → fini la bande diagonale dure. */
  --lg-specular:       linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 16%, rgba(255, 255, 255, 0) 36%);
  --lg-shadow:         0 8px 30px rgba(0, 0, 0, 0.40);
  --lg-shadow-lg:      0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Fond saisonnier ANIMÉ : une nappe de couleurs (teinte de la saison) qui se
   mélange sur TOUT le fond et dérive lentement façon « aurore ». Couche ::before
   plein écran, fixe, derrière le contenu ; les cartes en verre la frostent.
   Classe body.season-X posée par seasonal-bg.js. */
body.app-body { background: var(--bg-primary); }
body.app-body::before,
body.app-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: background 0.8s ease;
  will-change: transform;
}
/* L'intensité est un réglage personnel par appareil (seasonal-bg.js + curseur
   Apparence) : --season-intensity (défaut 1) MULTIPLIE l'opacité. L'animation
   « aurore » ci-dessous n'est PAS touchée — seul le niveau de couleur varie. */
body.app-body::before { opacity: calc(0.88 * var(--season-intensity, 1)); filter: saturate(1.45); animation: appDriftA 16s ease-in-out infinite alternate; }
body.app-body::after  { opacity: calc(0.80 * var(--season-intensity, 1)); filter: saturate(1.45); animation: appDriftB 21s ease-in-out infinite alternate; }
@keyframes appDriftA {
  from { transform: translate3d(-24%, -17%, 0) scale(1.45); }
  to   { transform: translate3d(24%, 17%, 0) scale(1.72); }
}
@keyframes appDriftB {
  from { transform: translate3d(22%, 19%, 0) scale(1.6) rotate(15deg); }
  to   { transform: translate3d(-22%, -17%, 0) scale(1.38) rotate(-17deg); }
}
/* Accessibilité : si l'utilisateur demande moins d'animations, la dérive s'arrête.
   Le fond reste coloré (les nappes sont peintes), seul le mouvement est coupé —
   c'est le comportement Apple (le réglage système prime sur l'identité visuelle). */
@media (prefers-reduced-motion: reduce) {
  body.app-body::before,
  body.app-body::after { animation: none; }
}
/* Tablette/mobile (pointer:coarse) : un fond qui dérive sous des surfaces en verre
   force le GPU à re-filtrer chaque frame. On fige la dérive (les nappes restent
   peintes, le fond reste coloré) et on allège le flou des grandes surfaces. */
@media (pointer: coarse) {
  body.app-body::before,
  body.app-body::after { animation: none; }
  :root { --lg-blur-card: 14px; }
}

/* ── PRINTEMPS — vert tendre, soleil, rose & lavande (vibrant, premium) ── */
body.app-body.season-spring::before {
  background:
    radial-gradient(48% 52% at 22% 26%, rgba(74,222,128,0.66), transparent 76%),
    radial-gradient(46% 50% at 76% 72%, rgba(253,224,120,0.58), transparent 76%),
    radial-gradient(40% 44% at 52% 50%, rgba(110,231,183,0.34), transparent 80%);
}
body.app-body.season-spring::after {
  background:
    radial-gradient(44% 48% at 82% 20%, rgba(244,114,182,0.62), transparent 76%),
    radial-gradient(44% 48% at 18% 84%, rgba(167,139,250,0.60), transparent 76%);
}
/* ── ÉTÉ — soleil, ciel & mer (or, orange, azur, turquoise) ── */
body.app-body.season-summer::before {
  background:
    radial-gradient(48% 52% at 22% 26%, rgba(251,191,36,0.64), transparent 76%),
    radial-gradient(46% 50% at 76% 72%, rgba(251,146,60,0.60), transparent 76%),
    radial-gradient(40% 44% at 52% 50%, rgba(253,224,71,0.32), transparent 80%);
}
body.app-body.season-summer::after {
  background:
    radial-gradient(44% 48% at 82% 20%, rgba(56,189,248,0.60), transparent 76%),
    radial-gradient(44% 48% at 18% 84%, rgba(45,212,191,0.58), transparent 76%);
}
/* ── AUTOMNE — feuillage : orange, or, rouge & brun ── */
body.app-body.season-autumn::before {
  background:
    radial-gradient(48% 52% at 22% 26%, rgba(249,115,22,0.64), transparent 76%),
    radial-gradient(46% 50% at 76% 72%, rgba(245,158,11,0.62), transparent 76%),
    radial-gradient(40% 44% at 52% 50%, rgba(217,119,6,0.30), transparent 80%);
}
body.app-body.season-autumn::after {
  background:
    radial-gradient(44% 48% at 82% 20%, rgba(239,68,68,0.56), transparent 76%),
    radial-gradient(44% 48% at 18% 84%, rgba(180,83,9,0.56), transparent 76%);
}
/* ── HIVER — givre : bleu glacé, menthe, violet & ardoise ── */
body.app-body.season-winter::before {
  background:
    radial-gradient(48% 52% at 22% 26%, rgba(125,211,252,0.66), transparent 76%),
    radial-gradient(46% 50% at 76% 72%, rgba(94,234,212,0.56), transparent 76%),
    radial-gradient(40% 44% at 52% 50%, rgba(186,230,253,0.34), transparent 80%);
}
body.app-body.season-winter::after {
  background:
    radial-gradient(44% 48% at 82% 20%, rgba(129,140,248,0.60), transparent 76%),
    radial-gradient(44% 48% at 18% 84%, rgba(148,163,184,0.52), transparent 76%);
}

/* ── ACCENTS DE SAISON : la saison courante devient une SOURCE DE COULEUR pour
   toute l'interface (vitrine ET app). --season-accent = teinte vibrante (icônes,
   bordures, halos) ; --season-accent-2 = teinte complémentaire (dégradés) ;
   --season-ink = variante CONTRASTÉE AA pour le TEXTE sur fond clair. Les classes
   body.season-* sont posées par seasonal-bg.js. Repli (avant JS) = accent navy. ── */
body.app-body {
  --season-accent: var(--accent);
  --season-accent-2: var(--accent-2);
  --season-ink: var(--accent);
}
body.app-body.season-spring { --season-accent:#22c55e; --season-accent-2:#ec4899; --season-ink:#0f7a3d; }
body.app-body.season-summer { --season-accent:#f59e0b; --season-accent-2:#06b6d4; --season-ink:#b45309; }
body.app-body.season-autumn { --season-accent:#ea580c; --season-accent-2:#b45309; --season-ink:#c2410c; }
body.app-body.season-winter { --season-accent:#0ea5e9; --season-accent-2:#6366f1; --season-ink:#0369a1; }
/* En thème sombre, l'encre de saison doit s'éclaircir pour rester lisible. */
:root[data-theme="dark"] body.app-body.season-spring { --season-ink:#4ade80; }
:root[data-theme="dark"] body.app-body.season-summer { --season-ink:#fbbf24; }
:root[data-theme="dark"] body.app-body.season-autumn { --season-ink:#fb923c; }
:root[data-theme="dark"] body.app-body.season-winter { --season-ink:#38bdf8; }

/* Variantes sombre : on garde les mêmes teintes mais nappes plus discrètes. */
:root[data-theme="dark"] body.app-body::before { opacity: 0.26; }
:root[data-theme="dark"] body.app-body::after  { opacity: 0.22; }

/* --- Surfaces en verre ----------------------------------------------------- */
.app-card,
.app-stat-card,
.app-kpi-card,
.app-stat-grid > div,
.codengo-panel {
  background: var(--lg-surface-soft);
  background-image: var(--lg-specular);
  -webkit-backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(190%);
  backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(190%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
  border-radius: var(--radius-xl, 18px);
}
/* Survol : background-COLOR (pas le shorthand) pour ne pas perdre le specular. */
.app-card-clickable:hover {
  background-color: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}

/* Barre de navigation (sticky) — verre flottant. L'espace admin (navy) garde son
   fond opaque pour rester lisible.

   ARCHITECTURE EN DEUX COUCHES (compat. tous navigateurs) :
   1) la nav porte un VERRE DÉPOLI simple (blur, SANS url) → rendu par Chromium,
      Firefox ET Safari. C'est le socle garanti partout.
   2) la RÉFRACTION de lentille (filtre SVG) est posée sur ::after — rendue par
      Chromium uniquement. Firefox/Safari ne savent pas appliquer un filtre SVG en
      backdrop-filter : la couche est alors sans effet, et le verre dépoli (1) reste.
   Indispensable car mettre l'url() directement sur la nav cassait Firefox/Safari
   (ils lisent la déclaration, n'en font rien → AUCUN flou, contenu net derrière). */
.app-nav:not(.app-nav-admin) {
  background: var(--lg-nav-surface);
  /* Flou FROSTED réel (18px) — porté par TOUS les navigateurs. AVANT : 3px seulement
     (on comptait sur la lentille SVG du ::after pour le gros du flou) → sur Firefox/Safari,
     qui ignorent la lentille, la barre paraissait à peine dépolie. Le ::after ajoute la
     réfraction SUR Chromium ; partout ailleurs ce flou-ci EST le verre. */
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
}
/* Lisibilité AA : sur verre, les liens de nav passent en couleur pleine (le
   rgba 60 % d'app.css composé sur le verre tombe sous 4,5:1, même sur fond clair).
   Les états hover/active utilisent déjà label-primary. */
.app-nav:not(.app-nav-admin) .app-nav-links a {
  color: var(--label-primary);
}

/* --- Couche de réfraction (lentille) — toutes les surfaces flottantes uniques ---
   Même architecture deux couches que la nav : l'élément garde son verre dépoli
   (rendu par tous les navigateurs), le ::after porte le filtre SVG (rendu Chromium ;
   sans effet ailleurs). Réservée aux surfaces SEULES à l'écran (nav, modale ouverte,
   palette, menus déroulés, carte de connexion) — jamais aux éléments en série
   (cartes, lignes de table) : coût GPU.
   Les menus (quick-add, notif, contextuel) sont déjà positionnés absolute/fixed avec
   z-index : ils créent leur contexte d'empilement, on n'y touche pas. Seules les
   cartes statiques en ont besoin. */
.app-modal-card,
.app-auth-card {
  position: relative;
  isolation: isolate;
}
.app-nav:not(.app-nav-admin)::after,
.app-modal-card::after,
.app-auth-card::after,
dialog.app-modal::after,
.quick-add-menu::after,
.app-notif-panel::after,
.ev-context-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  -webkit-backdrop-filter: url(#lg-refract);
  backdrop-filter: url(#lg-refract);
  /* Le gradient spéculaire est peint par TOUS les navigateurs (seule la réfraction
     est Chromium) : le reflet du verre est donc universel. */
  background: var(--lg-specular);
}
/* Nav repliée (hamburger mobile) : opaque par choix — la couche aussi s'éteint. */
.app-nav.is-collapsed::after { display: none; }
/* Thème sombre : on REPREND la main sur la règle opaque d'app.css
   (`:root[data-theme="dark"] .app-nav:not(.app-nav-admin) { background: var(--white) }`,
   plein en sombre) pour conserver le verre réfractant translucide. Même spécificité,
   mais liquid-glass.css charge APRÈS app.css → l'emporte. Le mode replié (hamburger
   mobile, .is-collapsed) reste volontairement opaque (lisibilité petit écran). */
:root[data-theme="dark"] .app-nav:not(.app-nav-admin) {
  background: var(--lg-nav-surface);
  border-bottom: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
}
/* Même reprise de main en sombre pour les autres surfaces : le bloc dark d'app.css
   re-opacifie cartes, KPI, carte de connexion et boutons (fonds pleins), ce qui
   éteindrait verre, rim et reflet. Tokens déjà déclinés en sombre plus haut. */
:root[data-theme="dark"] .app-card,
:root[data-theme="dark"] .app-stat-card,
:root[data-theme="dark"] .app-kpi-card,
:root[data-theme="dark"] .app-kpi,
:root[data-theme="dark"] .app-stat-grid > div,
:root[data-theme="dark"] .codengo-panel,
:root[data-theme="dark"] .app-auth-card {
  background: var(--lg-surface-soft);
  background-image: var(--lg-specular);
  border-color: var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
}
:root[data-theme="dark"] .app-auth-card,
:root[data-theme="dark"] .app-modal-card {
  background-color: var(--lg-surface-strong);
}
/* (Boutons outline/ghost en thème sombre : on garde le style de base app.css —
   verre retiré le 2026-06-13, comme en thème clair. Voir la note « Boutons » plus bas.) */

/* Onglets (paramètres / RH) — pilule de verre. */
.parametres-tabs {
  background: var(--lg-surface-soft);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  box-shadow: var(--lg-highlight);
  padding: 4px;
}
.param-tab.is-active {
  background: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight), 0 2px 8px rgba(15, 37, 68, 0.12);
  border-radius: 999px;
}

/* Modales — verre dépoli épais sur la carte ; le voile ne floute pas (sinon il
   crée un backdrop root qui empêche la carte de flouter la page → rendu différent
   du <dialog>). C'est .app-modal-card qui porte le flou (comme la boîte du dialog). */
.app-modal {
  background: rgba(10, 18, 32, 0.28);
}
.app-modal-card {
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}

/* Boutons — REFONTE 2026-06-24 (mandat « refonte globale », à confirmer par Julien) :
   le bouton PRIMAIRE reste plein/tinté (comportement Apple correct : l'action
   principale est solide, pas en verre). Les boutons SECONDAIRES (outline/ghost)
   reçoivent une matière verre DISCRÈTE : surface translucide + flou léger + filet
   doux. PAS de pilule, PAS de gloss brillant — coins nets conservés. Réversible.
   NB : revient sur la note du 2026-06-13 (« boutons classiques ») à la demande du
   nouveau mandat ; valeurs choisies sobres pour ne pas refaire « plastique ». */
.app-btn-outline,
.app-btn-ghost {
  background-color: var(--lg-surface-soft);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow: var(--lg-highlight);
}
.app-btn-outline:hover,
.app-btn-ghost:hover {
  background-color: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
}
/* Le primaire gagne juste un filet de lumière en haut (premium, non plastique). */
.app-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--lg-shadow); }

/* Menus déroulants de rubriques (nav groupée) — verre flottant, cohérent avec la
   nav et les modales. AVANT : panneau opaque (--bg-elevated). Maintenant : même
   matière que les autres surfaces flottantes, light + dark (cf. bloc sombre plus bas). */
.app-nav-dropdown {
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}
:root[data-theme="dark"] .app-nav-dropdown {
  background: var(--lg-surface-strong);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}

/* Champs de formulaire — BASE COMMUNE à TOUS les champs de l'app (pas seulement ceux
   en .app-form/.form-fancy). But : (1) qu'aucun formulaire ne paraisse « sans CSS »
   (bordure + coins arrondis partout) ; (2) que `box-sizing:border-box` empêche un champ
   en width:100% + padding de DÉBORDER sur son voisin (les « cellules qui se superposent »).
   Valeurs alignées sur .app-form/.form-fancy (1.5px var(--separator), 10px) → ZÉRO
   changement visuel pour les formulaires déjà stylés. Légère translucidité conservée
   (vibrancy, sans backdrop-filter : verre-sur-verre = anti-pattern Apple). Le `range`
   et `color` sont exclus (sinon on encadrerait le curseur d'intensité / le sélecteur). */
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.app-main select,
.app-main textarea,
.app-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.app-modal-card select,
.app-modal-card textarea {
  background-color: var(--lg-surface-soft);
  border: 1.5px solid var(--separator);
  border-radius: 10px;
  box-sizing: border-box;
}
/* Padding standard sur input + textarea uniquement — PAS les select (sinon on écrase
   le padding-right qui laisse la place à la flèche custom). 0.75rem 0.9rem = .app-form. */
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.app-main textarea,
.app-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.app-modal-card textarea {
  padding: 0.75rem 0.9rem;
}
/* Focus cohérent sur TOUS les champs (même sans classe de formulaire) : anneau de marque. */
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
.app-main select:focus,
.app-main textarea:focus,
.app-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
.app-modal-card select:focus,
.app-modal-card textarea:focus {
  outline: none;
  border-color: var(--tint);
  box-shadow: 0 0 0 4px var(--fill-primary);
}
/* Flèche de menu déroulant sur TOUS les select (sinon un select sans flèche
   ressemble à un champ texte — c'était le cas des formulaires .form-fancy). Même
   chevron + même padding-right que .app-form. Le fond (vibrancy) reste sous l'image. */
.app-main select,
.app-modal-card select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding: 0.75rem 2.5rem 0.75rem 0.9rem;
}

/* Badges & pastilles — verre léger. */
.app-badge {
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
}

/* En-tête de page : laisse passer le fond (pas de fond plein). */
.app-page-header { background: transparent; }

/* === PROPAGATION — reste de l'app ========================================= */

/* Navigation de l'espace admin (back-office) : verre sombre (navy translucide)
   pour rester lisible tout en restant cohérent avec le reste. */
.app-nav-admin {
  background: rgba(15, 37, 68, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Pages de connexion / inscription. */
.app-auth {
  background:
    radial-gradient(1000px 680px at 10% -8%, rgba(94, 127, 168, 0.22), transparent 60%),
    radial-gradient(900px 640px at 112% 6%, rgba(15, 37, 68, 0.14), transparent 55%),
    var(--bg-primary);
  background-attachment: fixed;
}

/* Page de connexion : on RÉVÈLE le fond animé saisonnier (sinon masqué par le
   fond opaque ci-dessus) et on le rend nettement plus vif que dans l'app — la
   page d'accueil de l'espace doit être colorée. La carte reste en verre, donc
   parfaitement lisible. Les teintes + l'animation viennent de body.app-body
   (cf seasonal-bg.js + .season-* plus haut), donc c'est automatiquement
   saisonnier et déjà animé. Ciblé via .app-auth-seasonal → n'affecte que login. */
.app-auth.app-auth-seasonal { background: transparent; background-attachment: initial; }
body.app-body:has(.app-auth-seasonal)::before { opacity: 0.88; filter: saturate(1.35); }
body.app-body:has(.app-auth-seasonal)::after  { opacity: 0.80; filter: saturate(1.35); }
/* En thème sombre, les pastels sur fond quasi-noir ressortent peu : on les fait
   « luire » (mode screen) pour un fond franchement coloré, sans toucher au clair. */
:root[data-theme="dark"] body.app-body:has(.app-auth-seasonal)::before,
:root[data-theme="dark"] body.app-body:has(.app-auth-seasonal)::after { mix-blend-mode: screen; filter: saturate(1.25); }
:root[data-theme="dark"] body.app-body:has(.app-auth-seasonal)::before { opacity: 0.82; }
:root[data-theme="dark"] body.app-body:has(.app-auth-seasonal)::after  { opacity: 0.74; }
.app-auth-card {
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}

/* Alertes / encarts. */
.app-alert {
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

/* Modales natives <dialog> (palette de commandes ⌘K, autres dialogues).
   Spécificité dialog.x pour passer devant les styles inline du composant. */
dialog.cmdk-modal,
dialog.app-modal {
  background: var(--lg-surface-strong) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  border: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg) !important;
}
dialog::backdrop {
  background: rgba(10, 18, 32, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Toasts flottants (window.appToast) : îlots de verre teintés qui flottent
   au-dessus du contenu. Les bannières .app-flash posées DANS la page restent
   opaques (elles vivent souvent sur une carte déjà en verre + lisibilité). */
#app-toast-stack .app-flash {
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}
#app-toast-stack .app-flash-success { background: color-mix(in srgb, var(--system-green) 14%, var(--lg-surface-strong)); }
#app-toast-stack .app-flash-error   { background: color-mix(in srgb, var(--system-red) 14%, var(--lg-surface-strong)); }
#app-toast-stack .app-flash-warning { background: color-mix(in srgb, var(--system-orange) 16%, var(--lg-surface-strong)); }
#app-toast-stack .app-flash-info    { background: color-mix(in srgb, var(--system-blue) 14%, var(--lg-surface-strong)); }

/* Toast SSE admin (partage d'écran) — sort des styles inline d'admin-notif.js :
   îlot navy en verre, lisible, même matériau que le reste. */
.admin-share-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  background: rgba(15, 37, 68, 0.80);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  font: 600 14px 'Roboto', -apple-system, system-ui, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 320px;
  display: none;
  line-height: 1.4;
}

/* Planning : barre d'outils, filtres, onglets, jours (semaine) et cases (mois).
   Les états .is-today / .is-weekend gardent leurs teintes propres. */
.app-planning-tabs,
.app-planning-filter,
.app-planning-week-day,
.app-planning-month-cell {
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lg-border);
}

/* KPI (anciennes tuiles). */
.app-kpi {
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow);
}

/* Liste en « liquid glass » (opt-in .app-table-glass, ex. liste élèves) : lignes
   translucides arrondies en « pastilles flottantes » (border-spacing), survol en
   verre, ligne entière cliquable. Le flou/voile vient déjà de la carte .app-card
   autour ; on ne met donc qu'un fond translucide sur les cellules. */
.app-table.app-table-glass { border-collapse: separate; border-spacing: 0 6px; }
.app-table-glass thead th { border-bottom: none; padding-bottom: 0.35rem; }
/* Rim SIMPLE sur les cellules (un seul inset) : le rim complet --lg-highlight
   (3 ombres) multiplié par des centaines de cellules coûte cher pour un détail
   invisible à cette échelle. */
.app-table-glass tbody td { border-bottom: none; background: var(--lg-surface-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: background 0.16s ease; }
.app-table-glass tbody td:first-child { border-radius: 13px 0 0 13px; }
.app-table-glass tbody td:last-child  { border-radius: 0 13px 13px 0; }
/* La rayure (zebra) poserait un fond opaque qui casserait le verre → on l'aligne. */
.app-table-glass.app-table-zebra tbody tr:nth-child(even) td { background: var(--lg-surface-soft); }
.app-table-glass tbody tr.app-row-link { cursor: pointer; }
/* Survol : teinte de marque translucide (bleu désaturé) — nettement visible en clair
   ET en sombre, tout en restant « verre ». */
.app-table-glass tbody tr:hover td,
.app-table-glass.app-table-zebra tbody tr:nth-child(even):hover td { background: rgba(94, 127, 168, 0.20); }
@media (prefers-reduced-transparency: reduce) {
  .app-table-glass tbody td { background: var(--bg-secondary); box-shadow: none; }
  .app-table-glass tbody tr:hover td { background: var(--blue-ll); }
}

/* === MOTION LIQUIDE ========================================================
   Le matériau se comporte comme un liquide (principe Apple) :
   1. GEL : les contrôles se compriment au press et reviennent avec un ressort.
   2. JAILLISSEMENT : les surfaces flottantes émergent de leur source avec un
      léger dépassement (spring), jamais en fondu plat.
   3. LUMIÈRE EN MOUVEMENT : un reflet balaye le verre quand l'interface bouge
      (scroll, survol) — pas d'animation gratuite en continu.
   Tout est coupé sous prefers-reduced-motion (bloc en fin de section). */

:root { --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* 1 ── Press gel : compression rapide, retour ressort. */
.app-btn,
.app-nav-links a,
.app-nav-icon-btn,
.param-tab,
.quick-add-item {
  transition: transform 0.28s var(--lg-spring), background-color 0.15s ease,
              box-shadow 0.2s ease, color 0.15s ease, border-color 0.15s ease;
}
.app-btn:active { transform: scale(0.965); transition-duration: 0.08s; }
.app-nav-links a:active,
.app-nav-icon-btn:active,
.param-tab:active { transform: scale(0.94); transition-duration: 0.08s; }
.quick-add-item:active { transform: scale(0.985); transition-duration: 0.08s; }

/* 2 ── REFONTE 2026-06-24 : les BALAYAGES LUMINEUX (glint) ont été RETIRÉS.
   AVANT : une bande blanche (rgba .36 / .32) balayait la nav au scroll et les cartes
   au survol → c'était le principal « tell » plastique (gloss de vitrine animé), et la
   bande non déclinée en sombre claquait fort sur Firefox dark. Le verre Apple ne se
   trahit pas par une bande qui défile ; sa lumière est diffuse et fixe (rim + sheen
   doux des tokens). On garde donc UNIQUEMENT une réponse d'élévation au survol. */

/* 3 ── Survol des cartes cliquables : élévation douce (lift + ombre + surface plus
   dense), sans aucun reflet animé. Sensation « le verre s'approche de la lumière ». */
.app-card-clickable {
  background-image: var(--lg-specular);
  transition: transform 0.28s var(--lg-spring), background-color 0.2s ease, box-shadow 0.2s ease;
}
.app-card-clickable:hover {
  transform: translateY(-2px);
  background-color: var(--lg-surface-strong);
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}

/* 4 ── Fluidité de navigation : cross-fade entre les pages (View Transitions
   multi-pages, Chromium/Safari récents ; les autres naviguent normalement).
   La nav a son propre nom de transition : elle paraît PERSISTANTE pendant que
   le contenu se fond — sensation d'app, plus de flash blanc. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.26s; }
.app-nav:not(.app-nav-admin) { view-transition-name: app-nav; }
.app-nav-admin { view-transition-name: app-nav-admin; }

/* 5 ── Cascades d'entrée : les cartes arrivent en léger décalé (complète le
   stagger des KPI d'app.css ; backwards évite tout flash). */
.app-card:nth-child(1) { animation-delay: 0.03s; }
.app-card:nth-child(2) { animation-delay: 0.07s; }
.app-card:nth-child(3) { animation-delay: 0.11s; }
.app-card:nth-child(4) { animation-delay: 0.15s; }
.app-card:nth-child(5) { animation-delay: 0.19s; }
.app-card:nth-child(6) { animation-delay: 0.23s; }

/* Items du menu « + Ajouter » : cascade courte au déploiement. */
.quick-add-menu.show .quick-add-item { animation: lgItemIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.quick-add-menu.show .quick-add-item:nth-child(1) { animation-delay: 0.02s; }
.quick-add-menu.show .quick-add-item:nth-child(2) { animation-delay: 0.05s; }
.quick-add-menu.show .quick-add-item:nth-child(3) { animation-delay: 0.08s; }
.quick-add-menu.show .quick-add-item:nth-child(4) { animation-delay: 0.11s; }
.quick-add-menu.show .quick-add-item:nth-child(5) { animation-delay: 0.14s; }
.quick-add-menu.show .quick-add-item:nth-child(6) { animation-delay: 0.17s; }
.quick-add-menu.show .quick-add-item:nth-child(7) { animation-delay: 0.20s; }
.quick-add-menu.show .quick-add-item:nth-child(8) { animation-delay: 0.23s; }
@keyframes lgItemIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Accessibilité : tout le motion liquide s'éteint si le système le demande
   (les entrées restent en fondu simple, cohérent avec la philosophie d'app.css :
   une interface vivante mais sans translation). */
@media (prefers-reduced-motion: reduce) {
  .app-btn, .app-nav-links a, .app-nav-icon-btn, .param-tab, .quick-add-item { transition: none; }
  .app-btn:active, .app-nav-links a:active, .app-nav-icon-btn:active,
  .param-tab:active, .quick-add-item:active { transform: none; }
  .app-nav:not(.app-nav-admin)::before { animation: none; }
  .app-card-clickable:hover { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .app-card { animation-delay: 0s; }
  .quick-add-menu.show .quick-add-item { animation: appFadeOnly 0.25s ease backwards; animation-delay: 0s; }
}

/* --- Repli si le navigateur ne gère pas backdrop-filter -------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --lg-surface: rgba(255, 255, 255, 0.96);
    --lg-surface-strong: rgba(255, 255, 255, 0.98);
    --lg-surface-soft: rgba(255, 255, 255, 0.92);
    --lg-nav-surface: rgba(255, 255, 255, 0.96);
  }
  :root[data-theme="dark"] {
    --lg-surface: rgba(32, 32, 42, 0.96);
    --lg-surface-strong: rgba(38, 38, 50, 0.98);
    --lg-surface-soft: rgba(32, 32, 42, 0.92);
    --lg-nav-surface: rgba(32, 32, 42, 0.96);
  }
}

/* --- Accessibilité : si l'utilisateur réduit la transparence --------------- */
@media (prefers-reduced-transparency: reduce) {
  /* Les tokens deviennent opaques : tous leurs consommateurs (y compris les
     <style> des partials — panneau notif, menus, aide) suivent automatiquement. */
  :root {
    --lg-surface: rgba(255, 255, 255, 0.96);
    --lg-surface-strong: rgba(255, 255, 255, 0.98);
    --lg-surface-soft: rgba(255, 255, 255, 0.92);
    --lg-nav-surface: rgba(255, 255, 255, 0.96);
    --lg-specular: none;
  }
  :root[data-theme="dark"] {
    --lg-surface: rgba(32, 32, 42, 0.96);
    --lg-surface-strong: rgba(38, 38, 50, 0.98);
    --lg-surface-soft: rgba(32, 32, 42, 0.92);
    --lg-nav-surface: rgba(32, 32, 42, 0.96);
    --lg-specular: none;
  }
  .app-card, .app-stat-card, .app-kpi-card, .app-kpi, .app-stat-grid > div, .codengo-panel,
  .app-nav:not(.app-nav-admin), .app-modal-card, .parametres-tabs,
  .app-auth-card, .app-alert,
  dialog.cmdk-modal, dialog.app-modal,
  .quick-add-menu, .app-notif-panel, .ev-context-menu,
  .app-planning-tabs, .app-planning-filter,
  .app-planning-week-day, .app-planning-month-cell,
  .app-btn-outline, .app-btn-ghost {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg-secondary);
  }
  /* Champs : longhand pour préserver le chevron maison des selects. */
  .app-main input, .app-main select, .app-main textarea {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: var(--bg-secondary);
  }

  .app-nav-admin { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--navy, #0f2544); }
  /* Couches de réfraction et de glint : toutes retirées. */
  .app-nav:not(.app-nav-admin)::before,
  .app-nav:not(.app-nav-admin)::after,
  .app-modal-card::after, .app-auth-card::after,
  dialog.app-modal::after, dialog.cmdk-modal::after,
  .quick-add-menu::after, .app-notif-panel::after, .ev-context-menu::after { display: none !important; }
  /* Overlays/toasts hors du bloc principal : opacifiés aussi. */
  .app-welcome, .help-card, #app-toast-stack .app-flash {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg-secondary);
  }
  /* Voiles : l'assombrissement reste, le flou part. */
  .help-overlay, .app-modal, dialog::backdrop {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .admin-share-toast { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--navy, #0f2544); }
  body.app-body, .app-auth { background: var(--bg-primary); }
}

/* --- Accessibilité : contraste renforcé ------------------------------------ */
@media (prefers-contrast: more) {
  :root { --lg-border: rgba(10, 26, 50, 0.55); }
  :root[data-theme="dark"] { --lg-border: rgba(255, 255, 255, 0.60); }
}

/* Select À L'INTÉRIEUR d'une pilule de filtre (planning) : pas de fond propre.
   La pilule fournit déjà le verre ; sans ça, liquid-glass donne au select son
   propre fond clair → un « carré blanc » derrière la valeur (ex. « Tous »).
   On garde transparent + la flèche du menu déroulant. */
.app-planning-filter select {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c6373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Filtres épurés (.app-filters) : champs sans fond blanc — la valeur (ex. « Tous »)
   ne repose plus sur un carré blanc. Contour léger gardé, flèche du menu conservée. */
.app-filters select,
.app-filters input,
.app-filters textarea {
  background-color: transparent;
  border: 1px solid var(--separator);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.app-filters select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c6373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}
.app-filters select:focus,
.app-filters input:focus,
.app-filters textarea:focus {
  border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
 * SIGNATURE RODDIER — coquille admin (Phase 1)
 * ----------------------------------------------------------------------------
 * Concept unique convergé : matière verre (ci-dessus, A) + structure barre
 * latérale (B) + dégradé de marque (C), sur charte navy. Tokens depuis app.css.
 * DISPOSITION DU MENU = préférence UTILISATEUR : classe sur <html>
 *   .nav-layout-side (défaut)  → barre latérale
 *   .nav-layout-top            → barre supérieure
 * posée AVANT le 1er paint par le script de head.ejs (lecture localStorage
 * 'app-nav-layout', comme le thème → aucun flash, aucun aller-retour serveur).
 * PORTÉE : back-office standard uniquement → .app-nav-admin:not(.super-nav).
 * Le compte éditeur (super-nav + dock macOS) conserve sa structure propre.
 * ========================================================================== */
:root {
  --brand-grad: linear-gradient(120deg, #0f2544 0%, #1f4a86 34%, #2f6fb0 64%, #3f93c8 100%);
  --admin-side: rgba(15, 37, 68, 0.55);
  --admin-side-line: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] {
  --brand-grad: linear-gradient(120deg, #0f2544 0%, #1c3f72 34%, #285a96 64%, #3478b4 100%);
  --admin-side: rgba(13, 24, 44, 0.62);
  --admin-side-line: rgba(255, 255, 255, 0.09);
}

/* ── Hero dégradé de marque (opt-in via .app-hero sur l'en-tête de page) ───── */
.app-page-header.app-hero {
  background: var(--brand-grad); color: #fff;
  border-radius: var(--radius-xl, 18px); padding: 1.5rem 1.8rem; margin-bottom: 1.6rem;
  box-shadow: 0 16px 44px rgba(15, 37, 68, 0.28);
  position: relative; overflow: hidden; isolation: isolate;
}
.app-page-header.app-hero::before { content: none !important; }   /* neutralise le halo cockpit */
.app-page-header.app-hero::after {
  content: ""; position: absolute; right: -40px; top: -70px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none; z-index: -1;
}
.app-page-header.app-hero h1 { color: #fff; }
.app-page-header.app-hero p,
.app-page-header.app-hero .app-muted { color: rgba(255,255,255,0.86) !important; }
.app-page-header.app-hero .app-breadcrumb,
.app-page-header.app-hero .app-breadcrumb a { color: rgba(255,255,255,0.82); }
.app-page-header.app-hero .app-section-tag { background: rgba(255,255,255,0.18); color: #fff; }
.app-page-header.app-hero .app-btn-primary { background: #fff !important; color: #0f2544 !important; border-color: #fff !important; }
.app-page-header.app-hero .app-btn-outline { background: rgba(255,255,255,0.12) !important; color: #fff !important; border-color: rgba(255,255,255,0.55) !important; }

/* ── Apparence COMMUNE de la barre back-office (verre navy) ───────────────── */
.app-nav-admin:not(.super-nav) {
  background: var(--admin-side) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--admin-side-line) !important;
  box-shadow: var(--lg-highlight), var(--lg-shadow-lg);
}
.app-nav-admin:not(.super-nav)::after,
.app-nav-admin:not(.super-nav)::before { display: none !important; }
.app-nav-admin:not(.super-nav) .app-nav-links a.active {
  position: relative; background: rgba(255,255,255,0.14) !important; color: #fff !important;
}
.app-nav-admin:not(.super-nav) .app-nav-links a.active::before {
  content: ""; position: absolute; background: #7aa2d6; border-radius: 3px; box-shadow: 0 0 8px rgba(122,162,214,0.55);
}

/* ── DISPOSITION « GAUCHE » (barre latérale) — défaut ─────────────────────── */
.nav-layout-side .app-nav-admin:not(.super-nav) {
  position: fixed; top: 12px; left: 12px; width: 244px; height: calc(100vh - 24px);
  border-radius: var(--radius-xl, 18px); z-index: 1000;
}
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-inner {
  flex-direction: column; align-items: stretch; height: 100%; padding: 1rem 0.75rem; gap: 0.15rem; overflow: visible;
}
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-brand { padding: 0.3rem 0.45rem 0.9rem; }
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-links {
  flex-direction: column; align-items: stretch; gap: 3px; width: 100%; margin: 0.1rem 0 0; overflow-y: auto;
}
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-links a {
  width: 100%; box-sizing: border-box; border-radius: 11px; padding: 0.55rem 0.65rem;
}
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-links a.active::before { left: -1px; top: 7px; bottom: 7px; width: 3px; }
.nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-user {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem;
  padding-top: 0.7rem; border-top: 1px solid var(--admin-side-line);
}
.nav-layout-side .app-nav-admin:not(.super-nav) .admin-tools-panel { bottom: 100%; top: auto; left: 0; margin-bottom: 6px; max-height: 70vh; overflow-y: auto; }
.nav-layout-side .app-nav-admin:not(.super-nav) ~ .app-main,
.nav-layout-side .app-nav-admin:not(.super-nav) ~ .app-footer { margin-left: 268px; }

/* ── DISPOSITION « HAUT » (barre supérieure flottante) ────────────────────── */
.nav-layout-top .app-nav-admin:not(.super-nav) {
  position: sticky; top: 12px; margin: 12px 16px 0; border-radius: var(--radius-xl, 18px); z-index: 1000;
}
.nav-layout-top .app-nav-admin:not(.super-nav) .app-nav-links a.active::before { left: 9px; right: 9px; bottom: 1px; height: 3px; }

/* ── Repli mobile : les deux dispositions → barre supérieure simple ───────── */
@media (max-width: 900px) {
  .nav-layout-side .app-nav-admin:not(.super-nav) {
    position: static; width: auto; height: auto; margin: 0; border-radius: 0;
    border: none !important; border-bottom: 1px solid var(--admin-side-line) !important;
  }
  .nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-inner { flex-direction: row; align-items: center; height: auto; padding: 0.5rem 0.8rem; }
  .nav-layout-side .app-nav-admin:not(.super-nav) ~ .app-main,
  .nav-layout-side .app-nav-admin:not(.super-nav) ~ .app-footer { margin-left: 0; }
  .nav-layout-side .app-nav-admin:not(.super-nav) .app-nav-user { margin-top: 0; border-top: none; padding-top: 0; }
}