/* =============================================================================
   RODDIER PREMIUM SIGNATURE — unified app (public/) + site (assets/) layer
   Additive and non-destructive. Load AFTER app.css/liquid-glass.css (app)
   or AFTER style.css (site). --sr-* namespace: does not redefine any existing token.
   ============================================================================= */

: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%);

  /* Ink / text (fallback to existing tokens from the 2 repositories) --- */
  --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));

  /* --- Warm signal accent (conversion CTA only) ---------- */
  --sr-accent: var(--orange, #e85d20);

  /* Season (already set by seasonal-bg.js on both sides) --- */
  --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;

  /* Spacing --- */
  --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);

  /* 2-layer navy elevation + specular rim --- */
  --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);

  /* --- Glass material (reuses the app's --lg-* tokens when present) --- */
  --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: more understated glass, no more harsh reflection (matches the app's dark --lg-*). */
: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);
}

/* 
   GLASS MATERIAL — single recipe
   ---------------------------------------------------------------------------- */
.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); }
}

/* 
   PREMIUM HERO — navy gradient + grain + seasonal halo
   ---------------------------------------------------------------------------- */
.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);
}
/* Seasonal radial halo (slow drift) */
.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;
}
/* Subtle grain (premium texture, prevents flatness) */
.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); }
}

/* 
   GLASS CARDS — raised at rest, hover lift + seasonal halo
   ---------------------------------------------------------------------------- */
.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);
}
/* Accent halo on hover, revealed smoothly */
.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; }

/* 64px season-tinted icon tile */
.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;
}
/* Orange accent: RESERVED for the subscription / conversion CTA */
.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); }
/* Secondary: glass + specular border */
.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); }
/* On a navy background (hero) */
.sr-hero .sr-btn--ghost { color: #fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

/* 
   SECTIONS — rhythm & editorial headings
   ---------------------------------------------------------------------------- */
.sr-section { padding-block: var(--sr-section); }
.sr-section__eyebrow {
  font-size: 14px; font-weight: 500; letter-spacing: .01em; /* sentence-case, end of 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;
}
/* Navy transition band between light sections (navy-as-light) */
.sr-band { background: var(--sr-gradient); color: var(--sr-on-navy); border-radius: var(--sr-r-xl); }

/* 
   "UNLIMITED" SIGNATURE BANNER — carries the total freedom promise
   ---------------------------------------------------------------------------- */
.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;
}

/* 
   DATA / 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); }

/* ----------------------------------------------------------------------------
   FORMS
   ---------------------------------------------------------------------------- */
.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);
}

/* 
   EMPTY STATE — season-tinted glass badge (no more gray square)
   ---------------------------------------------------------------------------- */
.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; }

/* ----------------------------------------------------------------------------
   ACCESSIBILITY — motion whispers, and stops on request
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sr-card, .sr-btn, .sr-card::after { transition: none; }
  .sr-hero::before { animation: none; }
  .sr-card:hover { transform: none; }
}

/* =============================================================================
   === APP BRIDGE ===
   Additive bridge: applies the Premium Signature to the repository's REAL classes
   (compo-*, stat-card, vt-*). No editing the original CSS, no
   changes to the HTML structure. This stylesheet loads LAST: it
   overrides app.css / liquid-glass.css / *-compo.css through cascade order.
   Do NOT touch the navigation (.app-nav) OR the super-admin dock.
   ============================================================================= */

/* 
   1. CARDS / METRICS / PANELS / TILES — raised glass material
   No more flat white background + 1px gray border: glass surface, radius 22-28,
   resting elevation, hover lift + seasonal glow.
   ---------------------------------------------------------------------------- */
.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;
}
/* Panels/tables: a more generous radius for large surfaces */
.compo-panel,
.compo-metric {
  border-radius: var(--sr-r-xl) !important;
}

/* Seasonal glow revealed on hover (under the card, does not alter the content) */
.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 + stronger shadow + glow (also applies to clickable cards) */
.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; }

/* Season-tinted icon tile (no more gray --fill-primary square) */
.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. HEROES / PAGE HEADERS — hierarchy through size, no longer through bold
   ---------------------------------------------------------------------------- */
.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 of UPPERCASE labels + 800 bold → calm sentence case
   Targets ALL known eyebrows / labels / headers in the repository.
   ---------------------------------------------------------------------------- */
.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;
}

/* Large figures: remove the ubiquitous 800 (weight 600, tight tracking) */
.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 / TABLES — right-aligned numbers, calm sentence-case header
   ---------------------------------------------------------------------------- */
.compo-table {
  font-variant-numeric: tabular-nums;
}
.compo-table thead th { color: var(--sr-ink-soft) !important; }
/* Amounts / quantities aligned right (dedicated deposit columns) */
.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; }
/* Season-tinted row hover (instead of gray) */
.compo-table tbody tr:hover {
  background: color-mix(in srgb, var(--sr-season) 7%, transparent) !important;
}

/* 
   5. FORMS — seasonal focus glow (management/instructor/student/parent areas)
   Scoped under .compo / .compo-form to never affect the 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. EMPTY STATE — season-tinted glass badge (no more gray square)
   ---------------------------------------------------------------------------- */
.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. PRODUCT LANDING (showcase, vt-* classes) — glass + type cleanup
   ---------------------------------------------------------------------------- */
.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;
}
/* Marketing section headings: calm sentence case */
.vt-sec-tag,
.vt-tag {
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
/* Showcase headings: hierarchy through size */
.vt-h1, .vt-sec-title { font-weight: 600 !important; letter-spacing: -0.03em !important; }

/* Signature “illimité” banner placed in the showcase (see 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. ACCESSIBILITY — motion stops, the seasonal color remains painted
   ---------------------------------------------------------------------------- */
@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; }
}

/* === Aurora background: faster + sweeps across the full screen (requested by 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: subtler dawn in light mode (premium, not loud). Dark unchanged. === */
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: tinted full-screen base (motion no longer reveals white) === */
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;
}
/* Animation continuity across pages (negative delay driven by head.ejs) */
body.app-body::before, body.app-body::after { animation-delay: var(--sr-anim-delay, 0s) !important; }

/* === Welcome logo animation (road tracing + appearance) === */
.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 === */
/* Guidance banner close icon: ensure the click works (Firefox/macOS stacking) */
.tip-of-day{ position:relative; z-index:3; }
#tip-of-day-close{ position:relative; z-index:4; pointer-events:auto !important; }
/* Premium form controls (file + checkbox) in the 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; }
/* Super-admin dock: no longer covers the content (safe bottom margin) */
body.has-super-dock .app-main, body.has-super-dock .app-footer{ padding-bottom: 104px; }

/* === Transparent footer: the dawn continues behind it (no more opaque line) === */
.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; }
/* finally a soft centered border instead of a full-width line */
.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); }

/* === Child card (parent): color->navy gradient header instead of a solid fill === */
.parent-child-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;
}