/* =============================================================================
   SIGNATURE RODDIER PREMIUM — couche unifiée app (public/) + site (assets/)
   Additive et non destructive. Charger APRÈS app.css/liquid-glass.css (app)
   ou APRÈS style.css (site). Namespace --sr-* : ne redéfinit aucun token existant.
   ============================================================================= */

:root {
  /* --- Navy signature --- */
  --sr-navy-900: #0f2544;
  --sr-navy-700: #244a7a;
  --sr-navy-500: #3f7cae;
  --sr-gradient: linear-gradient(135deg, #0f2544 0%, #244a7a 55%, #3f7cae 100%);

  /* --- Encre / texte (fallback vers tokens existants des 2 dépôts) --- */
  --sr-ink:        var(--label-primary, #0b1b30);
  --sr-ink-soft:   var(--label-secondary, #5b6b82);
  --sr-on-navy:    rgba(255,255,255,0.92);
  --sr-on-navy-soft: rgba(255,255,255,0.66);

  /* --- Surfaces --- */
  --sr-paper: var(--bg-secondary, var(--white, #ffffff));
  --sr-off:   var(--bg-tertiary, var(--off, #f6f8fb));

  /* --- Accent chaud signal (CTA conversion uniquement) --- */
  --sr-accent: var(--orange, #e85d20);

  /* --- Saison (déjà posée par seasonal-bg.js des 2 côtés) --- */
  --sr-season:      var(--season-accent, #3f7cae);
  --sr-season-2:    var(--season-accent-2, #244a7a);
  --sr-season-ink:  var(--season-ink, var(--sr-navy-700));
  --sr-season-soft: color-mix(in srgb, var(--sr-season) 16%, transparent);
  --sr-season-halo: color-mix(in srgb, var(--sr-season) 60%, transparent);

  /* --- Rayons --- */
  --sr-r-sm: 10px; --sr-r-md: 16px; --sr-r-lg: 22px; --sr-r-xl: 28px; --sr-r-pill: 999px;

  /* --- Espacement --- */
  --sr-1:4px; --sr-2:8px; --sr-3:12px; --sr-4:16px; --sr-5:24px; --sr-6:32px; --sr-7:48px; --sr-8:64px;
  --sr-section: clamp(72px, 10vw, 128px);

  /* --- Élévation navy 2 couches + rim spéculaire --- */
  --sr-rim:        inset 0 1px 0 rgba(255,255,255,0.5);
  --sr-raised:     0 1px 2px rgba(15,37,68,0.06), 0 8px 24px rgba(15,37,68,0.10);
  --sr-overlay:    0 2px 6px rgba(15,37,68,0.10), 0 24px 60px rgba(15,37,68,0.18);

  /* --- Matière verre (réutilise les tokens --lg-* de l'app si présents) --- */
  --sr-glass-surface:  var(--lg-surface, rgba(255,255,255,0.62));
  --sr-glass-border:   var(--lg-border, rgba(255,255,255,0.5));
  --sr-glass-blur:     22px;
  --sr-glass-highlight: var(--lg-highlight, inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 0.5px rgba(255,255,255,0.16));

  /* --- Motion --- */
  --sr-ease-spring: cubic-bezier(.22,1,.36,1);
  --sr-dur-micro: 120ms; --sr-dur-card: 220ms; --sr-dur-enter: 360ms;

  /* --- Focus --- */
  --sr-focus: 0 0 0 4px color-mix(in srgb, var(--sr-navy-700) 28%, transparent);
}

/* Dark / Firefox : verre plus sobre, fini le reflet dur (s'aligne sur --lg-* dark de l'app). */
:root[data-theme="dark"], html[data-theme="dark"] {
  --sr-glass-surface: var(--lg-surface, rgba(28,28,36,0.55));
  --sr-glass-border:  var(--lg-border, rgba(255,255,255,0.10));
  --sr-glass-highlight: var(--lg-highlight, inset 0 1px 0 rgba(255,255,255,0.08));
  --sr-on-navy: rgba(255,255,255,0.90);
}

/* ----------------------------------------------------------------------------
   MATÉRIAU VERRE — recette unique
   ---------------------------------------------------------------------------- */
.sr-glass {
  position: relative;
  background: var(--sr-glass-surface);
  -webkit-backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.6);
  border: 1px solid var(--sr-glass-border);
  box-shadow: var(--sr-raised), var(--sr-glass-highlight);
  border-radius: var(--sr-r-lg);
}
.sr-glass--on-navy {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border-color: rgba(255,255,255,0.16);
  color: var(--sr-on-navy);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sr-glass { background: var(--sr-paper); }
  .sr-glass--on-navy { background: rgba(16,32,56,0.86); }
}

/* ----------------------------------------------------------------------------
   HÉROS PREMIUM — dégradé navy + grain + halo de saison
   ---------------------------------------------------------------------------- */
.sr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--sr-gradient);
  color: var(--sr-on-navy);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 4vw, 4rem);
  border-radius: var(--sr-r-xl);
}
/* Halo radial de saison (dérive lente) */
.sr-hero::before {
  content: "";
  position: absolute; inset: -20%;
  z-index: -2;
  background:
    radial-gradient(42% 55% at 88% 8%, var(--sr-season-halo) 0%, transparent 60%),
    radial-gradient(38% 48% at 6% 96%, color-mix(in srgb, var(--sr-season-2) 50%, transparent) 0%, transparent 62%);
  opacity: calc(0.55 * var(--season-intensity, 1));
  animation: srDrift 18s ease-in-out infinite alternate;
}
/* Grain léger (texture premium, anti-aplat) */
.sr-hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--sr-on-navy-soft);
  padding: .375rem .875rem; margin-bottom: 1.25rem;
  border-radius: var(--sr-r-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}
.sr-hero__title {
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.035em;
  margin: 0 0 1.25rem; color: #fff;
}
.sr-hero__sub {
  font-size: clamp(17px, 1.6vw, 22px); font-weight: 400; line-height: 1.5;
  color: var(--sr-on-navy-soft); max-width: 38ch; margin: 0 0 2rem;
}
@keyframes srDrift {
  from { transform: translate3d(-4%, -3%, 0) scale(1.05); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* ----------------------------------------------------------------------------
   CARTES VERRE — repos décollé, hover lift + halo de saison
   ---------------------------------------------------------------------------- */
.sr-card {
  position: relative;
  background: var(--sr-glass-surface);
  -webkit-backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  border: 1px solid var(--sr-glass-border);
  border-radius: var(--sr-r-lg);
  box-shadow: var(--sr-raised), var(--sr-glass-highlight);
  padding: var(--sr-6);
  transition: transform var(--sr-dur-card) var(--sr-ease-spring),
              box-shadow var(--sr-dur-card) var(--sr-ease-spring);
}
.sr-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--sr-overlay), var(--sr-glass-highlight);
}
/* Halo d'accent au survol, révélé en douceur */
.sr-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(60% 80% at 50% 0%, var(--sr-season-soft) 0%, transparent 70%);
  transition: opacity var(--sr-dur-card) ease;
}
.sr-card:hover::after { opacity: 1; }

/* Tuile d'icône 64px teintée saison */
.sr-card__icon {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--sr-r-md); margin-bottom: var(--sr-4);
  color: var(--sr-season-ink);
  background: color-mix(in srgb, var(--sr-season) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sr-season) 28%, transparent);
}
.sr-card__title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--sr-ink); margin: 0 0 .5rem; }
.sr-card__text  { font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--sr-ink-soft); margin: 0; }

/* ----------------------------------------------------------------------------
   BOUTONS
   ---------------------------------------------------------------------------- */
.sr-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: 17px; font-weight: 600;
  padding: .85rem 1.6rem; border-radius: var(--sr-r-pill);
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: transform var(--sr-dur-micro) var(--sr-ease-spring),
              box-shadow var(--sr-dur-micro) ease, background-color var(--sr-dur-micro) ease;
}
.sr-btn:focus-visible { outline: none; box-shadow: var(--sr-focus); }

.sr-btn--primary {
  background: var(--sr-navy-900); color: #fff;
  box-shadow: var(--sr-raised);
}
.sr-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sr-overlay), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
/* Accent orange : RÉSERVÉ au CTA d'abonnement / conversion */
.sr-btn--accent {
  background: var(--sr-accent); color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sr-accent) 35%, transparent);
}
.sr-btn--accent:hover { transform: translateY(-2px); filter: brightness(1.04); }
/* Secondaire : verre + liseré spéculaire */
.sr-btn--ghost {
  background: var(--sr-glass-surface); color: var(--sr-navy-900);
  -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  border-color: var(--sr-glass-border); box-shadow: var(--sr-glass-highlight);
}
.sr-btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sr-raised), var(--sr-glass-highlight); }
/* Sur fond navy (héros) */
.sr-hero .sr-btn--ghost { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

/* ----------------------------------------------------------------------------
   SECTIONS — rythme & en-têtes éditoriaux
   ---------------------------------------------------------------------------- */
.sr-section { padding-block: var(--sr-section); }
.sr-section__eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: .01em; /* sentence-case, fin de l'UPPERCASE */
  color: var(--sr-season-ink); margin-bottom: .75rem;
}
.sr-section__title {
  font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.08; color: var(--sr-ink); margin: 0 0 1rem;
}
.sr-section__sub {
  font-size: clamp(17px, 1.4vw, 22px); font-weight: 400; line-height: 1.55;
  color: var(--sr-ink-soft); max-width: 60ch; margin: 0;
}
/* Bande de transition navy entre sections claires (navy-as-light) */
.sr-band { background: var(--sr-gradient); color: var(--sr-on-navy); border-radius: var(--sr-r-xl); }

/* ----------------------------------------------------------------------------
   BANDEAU SIGNATURE "ILLIMITÉ" — porte la promesse liberté totale
   ---------------------------------------------------------------------------- */
.sr-unlimited {
  display: flex; align-items: center; gap: var(--sr-4);
  padding: var(--sr-5) var(--sr-6); border-radius: var(--sr-r-lg);
  background: color-mix(in srgb, var(--sr-season) 10%, var(--sr-paper));
  border: 1px solid color-mix(in srgb, var(--sr-season) 26%, transparent);
  box-shadow: var(--sr-glass-highlight);
}
.sr-unlimited__mark {
  font-size: 34px; font-weight: 600; line-height: 1; color: var(--sr-season-ink);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   DONNÉES / KPI / TABLES
   ---------------------------------------------------------------------------- */
.sr-kpi__label { font-size: 14px; font-weight: 450; color: var(--sr-ink-soft); }
.sr-kpi__value { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--sr-ink); font-variant-numeric: tabular-nums; }
.sr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sr-table th { font-size: 14px; font-weight: 500; text-align: left; color: var(--sr-ink-soft); padding: .75rem 1rem; } /* sentence-case */
.sr-table td { padding: .85rem 1rem; border-top: 1px solid var(--sr-glass-border); }
.sr-table td.sr-num, .sr-table th.sr-num { text-align: right; }
.sr-table tbody tr:nth-child(even) { background: var(--sr-off); }
.sr-table tbody tr:hover { background: color-mix(in srgb, var(--sr-season) 6%, transparent); }

/* ----------------------------------------------------------------------------
   FORMULAIRES
   ---------------------------------------------------------------------------- */
.sr-field { display: flex; flex-direction: column; gap: .4rem; }
.sr-field > label { font-size: 14px; font-weight: 500; color: var(--sr-ink-soft); } /* sentence-case */
.sr-field input, .sr-field select, .sr-field textarea {
  font: inherit; font-size: 17px; width: 100%;
  padding: .7rem 1rem; border-radius: var(--sr-r-md);
  border: 1.5px solid var(--sr-glass-border); background-color: var(--sr-paper); color: var(--sr-ink);
  transition: border-color var(--sr-dur-micro) ease, box-shadow var(--sr-dur-micro) ease;
}
.sr-field input:focus, .sr-field select:focus, .sr-field textarea:focus {
  outline: none;
  border-color: var(--sr-season);
  box-shadow: 0 0 0 4px var(--sr-season-soft);
}

/* ----------------------------------------------------------------------------
   ÉTAT VIDE — pastille verre teintée saison (fin du carré gris)
   ---------------------------------------------------------------------------- */
.sr-empty { text-align: center; padding: var(--sr-8) var(--sr-5); }
.sr-empty__badge {
  width: 72px; height: 72px; margin: 0 auto var(--sr-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sr-r-lg); color: var(--sr-season-ink);
  background: color-mix(in srgb, var(--sr-season) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sr-season) 26%, transparent);
  box-shadow: var(--sr-glass-highlight);
}
.sr-empty__title { font-size: 22px; font-weight: 600; color: var(--sr-ink); margin: 0 0 .5rem; }
.sr-empty__text  { font-size: 17px; color: var(--sr-ink-soft); margin: 0 auto; max-width: 42ch; }

/* ----------------------------------------------------------------------------
   ACCESSIBILITÉ — le mouvement chuchote, et se tait sur demande
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sr-card, .sr-btn, .sr-card::after { transition: none; }
  .sr-hero::before { animation: none; }
  .sr-card:hover { transform: none; }
}

/* =============================================================================
   === BRIDGE APP ===
   Pont additif : applique la Signature Premium aux classes RÉELLES du dépôt
   (compo-*, stat-card, vt-*). Aucune édition des CSS d'origine, aucune
   modification de structure HTML. Cette feuille se charge EN DERNIER : elle
   prime sur app.css / liquid-glass.css / *-compo.css par ordre de cascade.
   On ne touche NI la navigation (.app-nav) NI le dock super-admin.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   1. CARTES / MÉTRIQUES / PANNEAUX / TUILES — matière verre décollée
   Fini le fond blanc plat + le filet gris 1px : surface verre, radius 22-28,
   élévation au repos, hover lift + halo de saison.
   ---------------------------------------------------------------------------- */
.compo-card,
.compo-metric,
.compo-panel,
.compo-tile,
.compo-board__col,
.compo .compo-stat,
.stat-card,
.cible-card {
  background: var(--sr-glass-surface) !important;
  -webkit-backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  border: 1px solid var(--sr-glass-border) !important;
  border-radius: var(--sr-r-lg) !important;
  box-shadow: var(--sr-raised), var(--sr-glass-highlight) !important;
  transition: transform var(--sr-dur-card) var(--sr-ease-spring),
              box-shadow var(--sr-dur-card) var(--sr-ease-spring) !important;
}
/* Panneaux/tables : un rayon plus généreux pour les grandes surfaces */
.compo-panel,
.compo-metric {
  border-radius: var(--sr-r-xl) !important;
}

/* Halo de saison révélé au survol (sous la carte, n'altère pas le contenu) */
.compo-card,
.compo-metric,
.compo-tile,
.compo .compo-stat,
.stat-card,
.cible-card { position: relative; isolation: isolate; }

.compo-card::after,
.compo-metric::after,
.compo-tile::after,
.compo .compo-stat::after,
.stat-card::after,
.cible-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; opacity: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, var(--sr-season-soft) 0%, transparent 70%);
  transition: opacity var(--sr-dur-card) ease;
}

/* Hover : lift + ombre élevée + halo (s'applique aussi aux cartes cliquables) */
.compo-card:hover,
a.compo-card:hover,
.compo-card[href]:hover,
.compo-metric:hover,
.compo-tile:hover,
a.compo-tile:hover,
.compo .compo-stat:hover,
.stat-card:hover,
.cible-card:hover,
a.cible-card:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: var(--sr-overlay), var(--sr-glass-highlight) !important;
  border-color: color-mix(in srgb, var(--sr-season) 28%, var(--sr-glass-border)) !important;
}
.compo-card:hover::after,
a.compo-card:hover::after,
.compo-card[href]:hover::after,
.compo-metric:hover::after,
.compo-tile:hover::after,
a.compo-tile:hover::after,
.compo .compo-stat:hover::after,
.stat-card:hover::after,
.cible-card:hover::after { opacity: 1; }

/* Tuile d'icône teintée saison (fin du carré gris --fill-primary) */
.compo-tile__icon,
.compo-card__icon {
  background: color-mix(in srgb, var(--sr-season) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sr-season) 28%, transparent);
  color: var(--sr-season-ink) !important;
  border-radius: var(--sr-r-md) !important;
}

/* ----------------------------------------------------------------------------
   2. HÉROS / EN-TÊTES DE PAGE — hiérarchie par la taille, plus par le gras
   ---------------------------------------------------------------------------- */
.compo-hero h1 {
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  font-size: clamp(2rem, 4.6vw, 2.85rem) !important;
  line-height: 1.05 !important;
}
.compo-section__title {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
.compo-panel__title,
.compo-board__title,
.compo-card__title,
.compo-tile__title,
.compo-chart__title {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ----------------------------------------------------------------------------
   3. TYPO — purge des labels MAJUSCULES + gras 800 → sentence-case calme
   Cible TOUS les eyebrows / labels / en-têtes connus du dépôt.
   ---------------------------------------------------------------------------- */
.compo-eyebrow,
.compo-section__eyebrow,
.section-tag,
.compo-metric__label,
.compo-bigfig__label,
.compo .compo-stat__label,
.compo .compo-slot-day__title,
.compo-table thead th,
.compo-kv dt, .compo-kv .k,
.compo-factgrid dt, .compo-factgrid .k {
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  font-size: 0.78rem !important;
}

/* Grands chiffres : on retire le 800 omniprésent (poids 600, tracking serré) */
.compo-hero h1,
.compo-metric__value,
.compo-bigfig__value,
.compo .compo-stat__value,
.compo .compo-gauge__pct,
.compo-totals__row--grand {
  font-weight: 600 !important;
}

/* ----------------------------------------------------------------------------
   4. KPI / TABLEAUX — nombres alignés à droite, en-tête sentence-case calme
   ---------------------------------------------------------------------------- */
.compo-table {
  font-variant-numeric: tabular-nums;
}
.compo-table thead th { color: var(--sr-ink-soft) !important; }
/* Montants / quantités à droite (colonnes dédiées du dépôt) */
.compo-table .compo-col-num,
.compo-table td.compo-col-num,
.compo-table th.compo-col-num,
.compo-col-num { text-align: right !important; font-variant-numeric: tabular-nums; }
/* Survol de ligne teinté saison (au lieu du gris) */
.compo-table tbody tr:hover {
  background: color-mix(in srgb, var(--sr-season) 7%, transparent) !important;
}

/* ----------------------------------------------------------------------------
   5. FORMULAIRES — focus halo de saison (espaces gestion/enseignant/élève/parent)
   Scopé sous .compo / .compo-form pour ne jamais toucher la navigation.
   ---------------------------------------------------------------------------- */
.compo input:focus,
.compo select:focus,
.compo textarea:focus,
.compo-form input:focus,
.compo-form select:focus,
.compo-form textarea:focus {
  outline: none !important;
  border-color: var(--sr-season) !important;
  box-shadow: 0 0 0 4px var(--sr-season-soft) !important;
}

/* ----------------------------------------------------------------------------
   6. ÉTAT VIDE — pastille verre teintée saison (fin du carré gris)
   ---------------------------------------------------------------------------- */
.compo-empty__icon,
.compo-empty .icon {
  background: color-mix(in srgb, var(--sr-season) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sr-season) 26%, transparent);
  color: var(--sr-season-ink) !important;
}

/* ----------------------------------------------------------------------------
   7. LANDING PRODUIT (vitrine, classes vt-*) — verre + nettoyage typo
   ---------------------------------------------------------------------------- */
.vt-feat.app-card,
.app-card.vt-feat {
  background: var(--sr-glass-surface) !important;
  -webkit-backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sr-glass-blur)) saturate(1.5);
  border: 1px solid var(--sr-glass-border) !important;
  border-radius: var(--sr-r-lg) !important;
  box-shadow: var(--sr-raised), var(--sr-glass-highlight) !important;
  transition: transform var(--sr-dur-card) var(--sr-ease-spring),
              box-shadow var(--sr-dur-card) var(--sr-ease-spring) !important;
}
.vt-feat.app-card:hover,
.app-card.vt-feat:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: var(--sr-overlay), var(--sr-glass-highlight) !important;
}
.vt-feat-ico {
  background: color-mix(in srgb, var(--sr-season) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sr-season) 28%, transparent);
  color: var(--sr-season-ink) !important;
  border-radius: var(--sr-r-md) !important;
}
/* Eyebrows de section vitrine : sentence-case calme */
.vt-sec-tag,
.vt-tag {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
/* Titres vitrine : hiérarchie par la taille */
.vt-h1, .vt-sec-title { font-weight: 600 !important; letter-spacing: -0.03em !important; }

/* Bandeau signature « illimité » posé dans la vitrine (voir vitrine.ejs) */
.sr-unlimited { margin-inline: auto; max-width: 760px; }
.sr-unlimited__copy { display: flex; flex-direction: column; gap: .15rem; }
.sr-unlimited__title { font-size: 1.05rem; font-weight: 600; color: var(--sr-ink); }
.sr-unlimited__text  { font-size: 0.95rem; color: var(--sr-ink-soft); }

/* ----------------------------------------------------------------------------
   8. ACCESSIBILITÉ — le mouvement se tait, la couleur de saison reste peinte
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .compo-card, .compo-metric, .compo-tile, .compo .compo-stat,
  .stat-card, .cible-card, .vt-feat.app-card,
  .compo-card::after, .compo-metric::after, .compo-tile::after,
  .compo .compo-stat::after, .stat-card::after, .cible-card::after {
    transition: none !important;
  }
  .compo-card:hover, .compo-metric:hover, .compo-tile:hover,
  .compo .compo-stat:hover, .stat-card:hover, .cible-card:hover,
  .vt-feat.app-card:hover { transform: none !important; }
}

/* === Fond aurore : plus rapide + balaye tout l'ecran (demande Julien) === */
@keyframes srAuroraA { 0%{transform:translate3d(-48%,-42%,0) scale(1.55)} 50%{transform:translate3d(40%,-30%,0) scale(1.9)} 100%{transform:translate3d(46%,44%,0) scale(1.6)} }
@keyframes srAuroraB { 0%{transform:translate3d(46%,40%,0) scale(1.7) rotate(18deg)} 50%{transform:translate3d(-44%,28%,0) scale(1.5) rotate(-12deg)} 100%{transform:translate3d(-40%,-44%,0) scale(1.85) rotate(-24deg)} }
body.app-body::before { animation: srAuroraA 9s ease-in-out infinite alternate !important; }
body.app-body::after  { animation: srAuroraB 12s ease-in-out infinite alternate !important; }
@media (prefers-reduced-motion: reduce){ body.app-body::before, body.app-body::after { animation: none !important; } }

/* === QA1 : aurore plus SUBTILE en mode clair (premium, pas criard). Sombre inchange. === */
html:not([data-theme="dark"]) body.app-body::before { opacity: calc(0.40 * var(--season-intensity,1)) !important; filter: saturate(1.08) !important; }
html:not([data-theme="dark"]) body.app-body::after  { opacity: calc(0.32 * var(--season-intensity,1)) !important; filter: saturate(1.08) !important; }

/* === QA2 : base teintee plein ecran (le mouvement ne revele plus de blanc) === */
html:not([data-theme="dark"]) body.app-body{
  background-image: linear-gradient(155deg, color-mix(in srgb, var(--season-accent,#3f7cae) 9%, #ffffff) 0%, color-mix(in srgb, var(--season-accent-2,#244a7a) 6%, #ffffff) 100%) !important;
  background-attachment: fixed !important;
}
/* Continuite de l'animation entre les pages (delai negatif pilote par head.ejs) */
body.app-body::before, body.app-body::after { animation-delay: var(--sr-anim-delay, 0s) !important; }

/* === Animation du logo de bienvenue (trace de la route + apparition) === */
.app-welcome-logo .app-logo-svg{ animation: wsLogoPop .7s cubic-bezier(.22,1,.36,1) both; }
.app-welcome-logo .logo-road{ stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: wsRoadDraw 1.15s ease .18s forwards; }
.app-welcome-logo .logo-circle{ transform-origin:center; animation: wsCircleIn .65s ease both; }
@keyframes wsLogoPop{ from{opacity:0; transform:scale(.8) translateY(6px)} to{opacity:1; transform:scale(1) translateY(0)} }
@keyframes wsRoadDraw{ to{ stroke-dashoffset:0 } }
@keyframes wsCircleIn{ from{opacity:0} to{opacity:1} }
.app-welcome-greet{ animation: wsGreet .6s ease .5s both; }
@keyframes wsGreet{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion: reduce){
  .app-welcome-logo .logo-road{ animation:none; stroke-dashoffset:0 }
  .app-welcome-logo .app-logo-svg, .app-welcome-greet{ animation:none; opacity:1; transform:none }
}

/* === QA3 === */
/* Croix bandeau conseil : garantir le clic (empilement Firefox/macOS) */
.tip-of-day{ position:relative; z-index:3; }
#tip-of-day-close{ position:relative; z-index:4; pointer-events:auto !important; }
/* Controles de formulaire premium (file + checkbox) dans l'app */
.compo input[type="file"]{ font:inherit; font-size:0.85rem; color:var(--label-secondary,#5b6b82); max-width:100%; }
.compo input[type="file"]::-webkit-file-upload-button,
.compo input[type="file"]::file-selector-button{ font:inherit; font-weight:600; padding:0.45rem 0.85rem; margin-right:0.6rem; border:1px solid var(--separator,#e5e7eb); border-radius:10px; background:var(--fill-tertiary,rgba(0,0,0,0.04)); color:var(--label-primary,#0b1b30); cursor:pointer; transition:background .15s; }
.compo input[type="file"]:hover::file-selector-button{ background:var(--season-soft, rgba(63,124,174,.12)); }
.compo input[type="checkbox"], .compo input[type="radio"]{ accent-color: var(--season-accent, #3f7cae); width:17px; height:17px; }
/* Dock super-admin : ne recouvre plus le contenu (marge basse de securite) */
body.has-super-dock .app-main, body.has-super-dock .app-footer{ padding-bottom: 104px; }

/* === Footer transparent : l'aurore continue derriere (plus de trait opaque) === */
.app-footer{ background: transparent !important; border-top: none !important; box-shadow: none !important; }
:root[data-theme="dark"] .app-footer{ background: transparent !important; box-shadow: none !important; }
/* fin liseré doux et centré au lieu d'un trait pleine largeur */
.app-footer{ position: relative; }
.app-footer::before{ content:""; position:absolute; top:0; left:var(--page-gutter, 10%); right:var(--page-gutter, 10%); height:1px; background:linear-gradient(90deg, transparent, var(--separator, rgba(0,0,0,0.08)), transparent); }

/* === Carte enfant (parent) : en-tete degrade couleur->navy au lieu d'un aplat plein === */
.parent-enfant-card .pe-header{
  background: linear-gradient(135deg, var(--pe-color,#5e7fa8) 0%, color-mix(in srgb, var(--pe-color,#5e7fa8) 52%, #0f2544) 100%) !important;
  color:#fff !important;
}