/* =============================================================================
   SIGNATURE RODDIER PREMIUM — a unified layer for the app (public/) and the site (assets/)
   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: var(--releve-252525);
  --sr-navy-700: var(--releve-494949);
  --sr-navy-500: var(--releve-3f7cae);
  --sr-gradient: linear-gradient(135deg, var(--releve-252525) 0%, var(--releve-494949) 55%, var(--releve-3f7cae) 100%);

  /* --- Ink / text (falls back to the existing tokens of both repositories) --- */
  --sr-ink:        var(--label-primary, var(--releve-1b1b1b));
  --sr-ink-soft:   var(--label-secondary, var(--releve-6a6a6a));
  --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, var(--releve-ffffff)));
  --sr-off:   var(--bg-tertiary, var(--off, var(--releve-f8f8f8)));

  /* --- Accent chaud signal (CTA conversion uniquement) --- */
  --sr-accent: var(--releve-c2410c); /* audit contraste : blanc/c2410c = 5.2:1 (AA) ; ex-e85d20 = 3.49:1 */

  /* --- Season (already set by seasonal-bg.js on both sides) --- */
  --sr-season:      var(--accent, var(--releve-6b6b6b));
  --sr-season-2:    color-mix(in srgb, var(--accent, var(--releve-6b6b6b)) 78%, var(--releve-252525));
  --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);

  /* --- Two-layer navy elevation + specular rim --- */
  --sr-rim:        inset 0 1px 0 rgba(255,255,255,0.5);
  --sr-raised:     0 1px 2px rgba(37, 37, 37,0.06), 0 8px 24px rgba(37, 37, 37,0.10);
  --sr-overlay:    0 2px 6px rgba(37, 37, 37,0.10), 0 24px 60px rgba(37, 37, 37,0.18);

  /* --- Glass material (reuses the app's --lg-* tokens when present) --- */
  /* Tint WRITTEN IN HARD: measured under WebKit, 251,252,252 on an ordinary background and
     249,250,255 on the blue section. 250,251,253 falls between the two. */
  --sr-glass-surface:  var(--lg-surface, var(--releve-fafbfd));
  --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 restrained glass, no more harsh reflection (matches the app's dark --lg-*). */
:root[data-theme="dark"], html[data-theme="dark"] {
  /* Neutral gray, chosen by Julien: this is what WebKit renders for most
     cards. Those in the blue section lose their reflection, and that is intentional. */
  --sr-glass-surface: var(--lg-surface, var(--releve-1a1a1a));
  --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);
  /* Themed ink: otherwise ink text (navy) stays dark on the surfaces
     sombres (comparatif, tarifs) en mode sombre. */
  --sr-ink:      var(--label-primary, var(--releve-ededed));
  --sr-ink-soft: var(--label-secondary, var(--releve-a7a7a7));
}

/* ----------------------------------------------------------------------------
   GLASS MATERIAL — a single recipe
   ---------------------------------------------------------------------------- */
.sr-glass {
  position: relative;
  background: var(--sr-glass-surface);
  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(32, 32, 32,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);
}
/* Radial seasonal 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;
}
/* Light grain (premium texture, against 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: var(--releve-ffffff);
}
.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 — lifted at rest, hover lift + seasonal halo
   ---------------------------------------------------------------------------- */
.sr-card {
  position: relative;
  background: var(--sr-glass-surface);
  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 gently */
.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 icon tile tinted by season */
.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: var(--releve-ffffff);
  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: var(--releve-ffffff);
  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 rule */
.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: var(--releve-ffffff); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

/* ----------------------------------------------------------------------------
   SECTIONS — rhythm and editorial headings
   ---------------------------------------------------------------------------- */
.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;
}
/* 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); }

/* ----------------------------------------------------------------------------
   "ILLIMITÉ" SIGNATURE BANNER — it carries the promise of total freedom
   ---------------------------------------------------------------------------- */
.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); }

/* ----------------------------------------------------------------------------
   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: 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 — glass badge tinted by season (no more grey 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; }
}

/* =============================================================================
   === SITE BRIDGE === (vitrine-build) — written for this repository
   ADDITIVE override of the real classes to the premium signature.
   No original file is modified; this sheet loads LAST.
   Tokens site disponibles : --navy --navy2 --blue --slate --off --border
   --orange --accent --season-accent (set by seasonal-bg.js).
   ============================================================================= */

/* ----------------------------------------------------------------------------
   HERO — navy gradient background + seasonal halo, titles at display scale
   (.hero, .hero-inner, .hero-tag, .hero-sub, .hero-actions, .hero-card)
   ---------------------------------------------------------------------------- */
.hero {
  background: var(--sr-gradient) !important;
  color: var(--sr-on-navy);
  border-bottom: 0 !important;
  isolation: isolate;
}
/* We neutralize the old whitish glows, then add the premium seasonal glow */
.hero::before {
  inset: -20% !important;
  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%) !important;
  opacity: calc(0.6 * var(--season-intensity, 1)) !important;
}
.hero::after { opacity: .05 !important; }

.hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--releve-ffffff);
}
.hero h1 em { color: var(--releve-ffffff); font-style: normal; }
.hero h1 em::after { background: var(--sr-season) !important; }

.hero-tag {
  background: rgba(255,255,255,0.10) !important;
  color: var(--sr-on-navy) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  text-transform: none !important;       /* fin de l'UPPERCASE */
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

.hero-sub { color: var(--sr-on-navy-soft) !important; max-width: 42ch; }
.hero-sub strong { color: var(--releve-ffffff) !important; }     /* les renforts navy redeviennent lisibles sur fond navy */
.hero-sub a { color: var(--releve-ffffff) !important; }

/* Hero CTAs: primary solid navy pill, secondary glass */
.hero-actions .btn-primary {
  background: var(--sr-navy-900);
  border-radius: var(--sr-r-pill);
  box-shadow: var(--sr-raised);
}
.hero-actions .btn-outline {
  color: var(--releve-ffffff) !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--sr-r-pill);
}

/* Profile card → glass material on navy */
.hero-card {
  background: rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--sr-r-xl) !important;
  box-shadow: var(--sr-overlay) !important;
  color: var(--sr-on-navy);
}
.hcard-name { color: var(--releve-ffffff) !important; }
.hcard-role { color: var(--sr-on-navy-soft) !important; }
.hcard-avatar { font-weight: 600 !important; }
.hcard-divider { background: rgba(255,255,255,0.14) !important; }
.hcard-badge,
.hcard-stat {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--sr-r-md) !important;
}
.hcard-badge .badge-text { color: var(--releve-ffffff); }
.hcard-badge .badge-sub  { color: var(--sr-on-navy-soft); }

/* ----------------------------------------------------------------------------
   STATS — navy strip already in place: clean up the typography (no more 800)
   ---------------------------------------------------------------------------- */
.stat-val { font-weight: 600 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-val span { color: var(--sr-navy-500); }

/* ----------------------------------------------------------------------------
   SECTIONS — type scale + clean-up (no 800 weight, no uppercase)
   ---------------------------------------------------------------------------- */
.section-tag {
  font-size: 14px;
  font-weight: 600 !important;
  text-transform: none !important;       /* sentence-case */
  letter-spacing: .06em !important;
  color: var(--sr-season-ink);
}
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--sr-ink);
}
.section-sub { color: var(--sr-ink-soft); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; }

/* ----------------------------------------------------------------------------
   CARDS — glass material, radius 22-28, elevation at rest, hover lift + halo
   On supprime fonds blancs plats + bordures grises 1px.
   (.f-card, .zone-card, .offre-card, .step, .about-card, cartes audiences)
   ---------------------------------------------------------------------------- */
.f-card,
.offre-card,
.step {
  background: var(--sr-glass-surface) !important;
  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;
}
.f-card:hover,
.offre-card:hover,
.step:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: var(--sr-overlay), var(--sr-glass-highlight) !important;
  border-color: var(--sr-glass-border) !important;
}

/* Zone: off-white card → softly tinted glass */
.zone-card {
  background: var(--sr-glass-surface) !important;
  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;
}

.f-title  { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.f-desc   { font-size: 17px; line-height: 1.55; }

/* « À propos » card: stays navy but with a premium radius and elevation */
.about-card { border-radius: var(--sr-r-xl) !important; box-shadow: var(--sr-overlay) !important; background: var(--sr-gradient) !important; }
.step-num   { color: color-mix(in srgb, var(--sr-season, var(--releve-3f7cae)) 72%, var(--sr-ink, var(--releve-2b2b2b))); font-weight: 700; }

/* Audience cards on the home page (inline-styled anchors of .cibles-grid):
   force the resting glass material despite inline styles (hence !important).
   The JS micro-lift on hover (translateY) stays active on top. */
.cibles-grid > a {
  background: var(--sr-glass-surface) !important;
  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;
}

/* ----------------------------------------------------------------------------
   BOUTONS — primaire navy plein pill, secondaire verre, focus navy
   ---------------------------------------------------------------------------- */
.btn-primary,
.btn-submit {
  background: var(--sr-navy-900) !important;
  border-radius: var(--sr-r-pill) !important;
  font-weight: 600;
  box-shadow: var(--sr-raised);
  transition: transform var(--sr-dur-micro) var(--sr-ease-spring),
              box-shadow var(--sr-dur-micro) ease, background-color var(--sr-dur-micro) ease;
}
.btn-primary:hover,
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--sr-overlay);
  background: var(--sr-navy-700) !important;
}
.btn-outline {
  border-radius: var(--sr-r-pill) !important;
  background: var(--sr-glass-surface);
  border: 1px solid var(--sr-glass-border);
}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-submit:focus-visible { outline: none; box-shadow: var(--sr-focus) !important; }

/* Orange accent: RESERVED for conversion CTAs (registration / platform trial) */
a[href*="/inscription"].btn-primary,
a[href*="app.roddier"].btn-primary {
  background: var(--sr-accent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--sr-accent) 35%, transparent) !important;
}
a[href*="/inscription"].btn-primary:hover,
a[href*="app.roddier"].btn-primary:hover { background: var(--sr-accent) !important; filter: brightness(1.04); }

/* ----------------------------------------------------------------------------
   CTA STRIP — navy gradient (no more flat pale blue)
   ---------------------------------------------------------------------------- */
.cta-band {
  background: var(--sr-gradient) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: var(--sr-r-xl);
}
.cta-band h2 { color: var(--releve-ffffff) !important; font-weight: 600 !important; }
.cta-band p  { color: var(--sr-on-navy-soft) !important; }

/* ----------------------------------------------------------------------------
   TYPOGRAPHY CLEAN-UP — labels: no more 800 weight and no more UPPERCASE → sentence case
   ---------------------------------------------------------------------------- */
.c-label,
.zone-group-t,
.zone-title { text-transform: none !important; font-weight: 600 !important; letter-spacing: .04em !important; }
.hcard-avatar { font-weight: 600 !important; }

/* ----------------------------------------------------------------------------
   PRODUCT PAGE (.rd-*) — the platform: same premium language
   ---------------------------------------------------------------------------- */
/* 12/08: the pleasant treatment on the reference page applied only to .rd-card.
   Measurement across the 50 pages: 179 blocks received it, while about a hundred blocks of the same
   kind did not — 29 c-item, 27 glossaire-item, 9 compo-card, 8
   cible-card, 8 faq-item, 8 finance-card. We name them here instead of touching
   the pages: the content and graphics do not move by a single pixel. */
.rd-card, .c-item, .glossaire-item, .cible-card, .faq-item, .q-item, .compo-card, .finance-card, .ri-card, .obligation-box, .ix-box, .hero-card {
  background: var(--sr-glass-surface) !important;
  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;
}
.rd-card:hover, .c-item:hover, .glossaire-item:hover, .cible-card:hover, .faq-item:hover, .q-item:hover, .compo-card:hover, .finance-card:hover, .ri-card:hover, .obligation-box:hover, .ix-box:hover, .hero-card:hover { transform: translateY(-3px) scale(1.005); box-shadow: var(--sr-overlay), var(--sr-glass-highlight) !important; }
.rd-ico { border-radius: var(--sr-r-md) !important; }
.rd-band-navy { background: var(--sr-gradient) !important; }
.rd-stat-v { font-weight: 600 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-tag-pill { text-transform: none !important; font-weight: 500 !important; letter-spacing: .01em !important; }
.rd-hero-em { font-style: normal; }
.rd-btn-outline { border-radius: var(--sr-r-pill) !important; }

/* ----------------------------------------------------------------------------
   DARK / FIREFOX — the glass stays restrained (the --sr-* layer already handles the soft reflection)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .f-card,
[data-theme="dark"] .offre-card,
[data-theme="dark"] .step,
[data-theme="dark"] .zone-card,
[data-theme="dark"] .rd-card,
[data-theme="dark"] .cibles-grid > a {
  background: var(--sr-glass-surface) !important;
  border-color: var(--sr-glass-border) !important;
}

/* ----------------------------------------------------------------------------
   MOUVEMENT — respecte prefers-reduced-motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .f-card, .offre-card, .step, .rd-card, .cibles-grid > a,
  .btn-primary, .btn-submit, .btn-outline { transition: none !important; }
  .f-card:hover, .offre-card:hover, .step:hover, .rd-card:hover { transform: none !important; }
}

/* === Fix hero button contrast (on navy gradient) === */
.hero .btn-primary, .hero a.btn-primary { background:var(--releve-ffffff) !important; color:var(--sr-navy-900) !important; border:none !important; box-shadow:0 8px 24px rgba(20, 20, 20,.35); }
.hero .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(20, 20, 20,.45); }
.hero .btn-outline, .hero a.btn-outline { background:rgba(255,255,255,.10) !important; color:var(--releve-ffffff) !important; border:1px solid rgba(255,255,255,.55) !important; }
.hero .btn-outline:hover { background:rgba(255,255,255,.18) !important; }

/* === Hero aurore : plus rapide + plus ample (demande Julien) === */
@keyframes srHeroA { 0%{transform:translate3d(-40%,-30%,0) scale(1.2)} 50%{transform:translate3d(35%,-18%,0) scale(1.45)} 100%{transform:translate3d(38%,32%,0) scale(1.25)} }
@keyframes srHeroB { 0%{transform:translate3d(38%,30%,0) scale(1.3) rotate(12deg)} 50%{transform:translate3d(-34%,18%,0) scale(1.15) rotate(-10deg)} 100%{transform:translate3d(-36%,-30%,0) scale(1.4) rotate(-16deg)} }
.hero::before { animation: srHeroA 8s ease-in-out infinite alternate !important; opacity:.42 !important; }
.hero::after  { animation: srHeroB 11s ease-in-out infinite alternate !important; opacity:.40 !important; }
@media (prefers-reduced-motion: reduce){ .hero::before, .hero::after { animation:none !important; } }

/* === Calm the audience-tinted section backgrounds -> a premium neutral base ===
   The audience color stays as the ACCENT (icons .rd-ico, buttons, .section-tag),
   but the large pale fills become a soft surface (no more wash). */
section[style*="#fdf2f8"], section[style*="#faf5ff"], section[style*="#fff7ed"],
section[style*="#f5f5f5"], section[style*="#f0fdf4"], section[style*="#e8f5e9"],
section[style*="#fef2f2"], section[style*="#fdf4ff"] {
  background: color-mix(in srgb, var(--accent) 7%, var(--releve-fcfcfc)) !important;
}

/* === Premium neutral section base: the per-audience --off tint is cancelled ===
   The audience color stays as the ACCENT (icons, buttons, tags, hero), but the
   large section fills return to a soft neutral surface (no more wash). */
html:not([data-theme="dark"]) body.page-entreprises,
html:not([data-theme="dark"]) body.page-associations,
html:not([data-theme="dark"]) body.page-collectivites,
html:not([data-theme="dark"]) body.page-particuliers,
html:not([data-theme="dark"]) body.page-ecoles,
html:not([data-theme="dark"]) body.page-formation,
html:not([data-theme="dark"]) body.page-accueil,
html:not([data-theme="dark"]) body.page-produit { --off: color-mix(in srgb, var(--accent) 6%, var(--releve-fbfbfb)) !important; }

/* === Comparator: us, and the rest of the market ==============================
   BEFORE, three backgrounds fought on the same surface: the page field, a
   translucent white + blur PER ROW, and a tint PER CELL. The middle
   column looked like a stack of pills detached from one another, and
   not as a column. ONE opaque surface is laid down, and a single continuous tint
   on the column that matters.
   The solid green pills were the strongest element on the page, repeated
   twelve times. A tick stroke is enough to say << yes >>. */
.sr-compare{
  max-width:880px; margin:0 auto;
  border-radius:var(--sr-r-xl); overflow:hidden;
  border:1px solid var(--sr-glass-border);
  box-shadow:var(--sr-raised);
  background:var(--releve-ffffff);                 /* une seule surface, opaque : la nappe ne traverse plus */
}
.sr-compare__row,.sr-compare__head{
  display:grid; grid-template-columns:minmax(9rem,1fr) 1.35fr 1.15fr;
  align-items:stretch;             /* le fond doit remplir la LIGNE, sinon la colonne se
                                      coupe entre deux textes de longueurs differentes */
}
.sr-compare__head{ background:var(--navy,var(--releve-252525)); color:var(--releve-ffffff) }
.sr-compare__head>div{ padding:.9rem 1.15rem; font-size:.78rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase }
.sr-compare__head .sr-compare__them{ font-weight:500 }
.sr-compare__head .sr-compare__us{ background:rgba(255,255,255,.10) }
.sr-compare__head .sr-compare__them{ color:rgba(255,255,255,.62); font-weight:500 }

.sr-compare__row+.sr-compare__row>div,
.sr-compare__row:first-of-type>div{ border-top:1px solid rgba(37, 37, 37,.09) }
.sr-compare__row>div{ padding:.95rem 1.15rem; font-size:.94rem; line-height:1.5;
  text-wrap:pretty }

/* The heading is a LABEL, not content: it reads at a glance and
   fades behind what it introduces. */
.sr-compare__crit{ font-weight:600; color:var(--sr-ink-soft); font-size:.85rem;
  padding-top:1.05rem !important }

/* The column that matters: a CONTINUOUS tint, the same on every row, bordered on
   both sides. Without the borders, the tint dissolves; with them, it reads as a
   highlighted column. */
.sr-compare__us{ color:var(--sr-ink); font-weight:500;
  background:color-mix(in srgb, var(--accent,var(--releve-1f6fe0)) 6%, var(--releve-ffffff));
  box-shadow:inset 1px 0 0 rgba(37, 37, 37,.10), inset -1px 0 0 rgba(37, 37, 37,.10) }
.sr-compare__them{ color:color-mix(in srgb, var(--sr-ink) 66%, transparent) }

/* << Oui >> uses a stroke, not a solid pill. */
.sr-yes{ display:inline-block; width:1em; margin-right:.45rem;
  color:var(--releve-0e9f6e); font-weight:700 }

[data-theme="dark"] .sr-compare{ background:var(--releve-212121); border-color:var(--releve-333333) }
[data-theme="dark"] .sr-compare__us{ background:rgba(99,164,255,.09);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08) }
[data-theme="dark"] .sr-compare__row+.sr-compare__row>div,
[data-theme="dark"] .sr-compare__row:first-of-type>div{ border-top-color:rgba(255,255,255,.09) }
[data-theme="dark"] .sr-yes{ color:var(--releve-2fd393) }

/* On phones, three columns do not fit: the heading becomes a banner and the
   two answers stay side by side, which is the whole point of a comparison. */
@media(max-width:680px){
  .sr-compare__row,.sr-compare__head{ grid-template-columns:1fr 1fr }
  .sr-compare__head .sr-compare__crit{ display:none }
  .sr-compare__crit{ grid-column:1/-1; background:var(--sr-off);
    font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    padding:.7rem 1.15rem .55rem !important }
  .sr-compare__row>div{ font-size:.88rem }
}

/* === QA1: remove the "ligne droite" from the hero + soft full-screen field (site) === */
/* Soft aurora sheet, fixed, full viewport, behind everything — transparent field (no hard edge) */
/* INTERMEDIATE STOPS, OTHERWISE YOU SEE A CIRCLE. A two-stop gradient
   falls off linearly, then stops abruptly: the eye reads the end of that ramp as an
   edge (Mach band). The stops below follow a curve and reach
   transparency at 100 %, so the field never ends inside its box. */
/* THE SEASON IS FELT, NOT SEEN.
   Before, the month's color tinted EVERYTHING — glows, veils, labels, columns — and in
   August the amber (f59e0b) turned the page salmon. An ambience that changes the
   tint of every surface changes the brand identity four times a year.
   It now lives only in the background field, diluted: one third seasonal color to two
   thirds brand blue. The month is recognizable without the page ceasing to be its own. */
body.comp{
  --saison-melee: color-mix(in srgb, var(--season-accent, var(--releve-3f7cae)) 32%, var(--accent, var(--releve-6b6b6b)));
  --nappe-teinte: var(--saison-melee);
  --nappe-teinte-douce: color-mix(in srgb, var(--saison-melee) 13%, transparent);
}
/* Summer is the warmest and most visible season, so we hold it back more. */
body.comp.season-summer{
  --saison-melee: color-mix(in srgb, var(--season-accent, var(--releve-f59e0b)) 22%, var(--accent, var(--releve-6b6b6b)));
  --nappe-teinte-douce: color-mix(in srgb, var(--saison-melee) 11%, transparent);
}
body.comp.season-winter{ --nappe-teinte-douce: color-mix(in srgb, var(--saison-melee) 16%, transparent) }
body.comp::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.42;
  /* WE CANCEL THE INHERITED SIZE AND CLIPPING FROM THE SEASONAL AMBIENCE. This
     rule sets 680x680 and `border-radius:50%` on the SAME pseudo-element: without
     these three lines, the full-screen field is trapped inside a disc stuck
     at the top left, and a circle is visible no matter how soft the gradient is. */
  width:auto; height:auto; border-radius:0;
  background:
    radial-gradient(52% 60% at 18% 12%,
      color-mix(in srgb, var(--nappe-teinte-douce) 100%, transparent) 0%,
      color-mix(in srgb, var(--nappe-teinte-douce) 72%, transparent) 26%,
      color-mix(in srgb, var(--nappe-teinte-douce) 40%, transparent) 48%,
      color-mix(in srgb, var(--nappe-teinte-douce) 16%, transparent) 70%,
      transparent 100%),
    radial-gradient(56% 64% at 84% 78%,
      color-mix(in srgb, var(--nappe-teinte) 14%, transparent) 0%,
      color-mix(in srgb, var(--nappe-teinte) 10%, transparent) 28%,
      color-mix(in srgb, var(--nappe-teinte) 5%, transparent) 52%,
      color-mix(in srgb, var(--nappe-teinte) 2%, transparent) 74%,
      transparent 100%);
  animation: srPageA 22s ease-in-out infinite alternate; }
/* A breath, not a zoom: the larger the scale factor, the more the gradient
   the gradient moves and the more its edge is noticed. */
@keyframes srPageA{ 0%{transform:translate3d(-5%,-4%,0) scale(1.04)} 100%{transform:translate3d(5%,4%,0) scale(1.10)} }
@media (prefers-reduced-motion: reduce){ body.comp::before{ animation:none } }
/* Hero: no more hard edge; the navy background BLENDS downward into the page */
.hero{ border-bottom:none !important; background:linear-gradient(158deg,rgba(23, 23, 23,0.30) 0%,rgba(23, 23, 23,0.62) 100%), var(--hero-accent,var(--accent)) !important; }

/* === Fondu navy -> contenu : supprime le "trait droit" sous le bloc navy (hero+stats) === */
.stats-band{ background:linear-gradient(180deg, var(--navy) 0%, var(--navy) 78%, rgba(37, 37, 37,0) 100%) !important; }
.stats-band + section{ position:relative; }
.stats-band + section::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:160px; background:linear-gradient(180deg, var(--releve-2a2a2a) 0%, rgba(42, 42, 42,0) 100%); pointer-events:none; z-index:0; }
.stats-band + section > *{ position:relative; z-index:1; }

/* === Navy bands as floating rounded cards (no more full-width rule) === */
body.comp section[style*="background:var(--navy)"],
body.comp .cta-band{
  margin: clamp(1.5rem,4vw,3.5rem) clamp(1rem,4vw,3rem) !important;
  border-radius: var(--sr-r-xl, 28px) !important;
  overflow: hidden !important;
  border: none !important;
}



/* ── Audit contraste 2026-07 ────────────────────────────────────────────── */
/* CTA conversion (fond orange --sr-accent) : en sombre --orange devient pastel
   -> texte navy, sinon blanc illisible. */
[data-theme="dark"] a[href*="/inscription"].btn-primary,
[data-theme="dark"] a[href*="app.roddier"].btn-primary { color: var(--releve-252525) !important; }

/* Primary NON-conversion button in the navy CTA strip: a solid navy background
   (!important above) was overwriting the white background style.css intends -> a button
   with dark text (invisible). We restore the white button. */
.cta-band .btn-primary:not([href*="/inscription"]):not([href*="app.roddier"]) {
  background: var(--releve-ffffff) !important;
  color: var(--releve-161616) !important;
}
.cta-band .btn-primary:not([href*="/inscription"]):not([href*="app.roddier"]):hover {
  background: rgba(255,255,255,0.9) !important;
}

/* Contrast audit 2026-07: in dark mode --orange goes back to pastel (fbb074) with
   navy text (rule above) -> we keep this pair; only the light shade gets darker. */
[data-theme="dark"] { --sr-accent: var(--orange, var(--releve-fbb074)); }

/* Contrast audit 2026-07: the comparator tick badge sits too close to the background
   of the rows in dark mode (3.2:1) -> a brighter green + a deep green glyph. */
[data-theme="dark"] .sr-yes { background: var(--releve-22c55e); color: var(--releve-0b3d1f) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   LIVING PALETTE 2026-07-12 — colour enrichment across the whole site
   (mobile + desktop, light + dark). Brand: navy / azure / orange / green,
   sector accent per page. AA contrasts verified.
   ═══════════════════════════════════════════════════════════════════════════ */

/* VIVID hero accent, unchanged by the theme (in dark mode --blue turns pastel). */
body.comp{ --hero-accent:var(--pub-neutre); }
/* Warm neutral: the homepage does not take on any sector's color. */
body.page-accueil{ --hero-accent:var(--sable-700); }
body.page-produit{ --hero-accent:var(--corail-500); }
body.page-sentinelle{ --hero-accent:var(--turquoise-500); }
body.page-entreprises{ --hero-accent:var(--pub-entreprises); }
body.page-associations{ --hero-accent:var(--releve-16b364); }
body.page-collectivites{ --hero-accent:var(--releve-f4730f); }
body.page-particuliers{ --hero-accent:var(--releve-ec4480); }
body.page-ecoles{ --hero-accent:var(--releve-06aacb); }
body.page-formation{ --hero-accent:var(--releve-0f766e); }
/* Funding leaves lemon behind: the previous line put lemon-600 across the entire
   hero strip — measured at 858 px high out of 1440, almost a quarter of the page in
   a single green fill. It takes the page's orchid, but at -800 instead of -500
   from the body.comp neutral: under the hero's navy veil, -500 produces a full-screen
   magenta measured at 36,26 % dark-colored pixels, while the site's reference
   page is at 17,83 %. At -800, the strip still carries the tint without shouting it. */
body.page-financement{ --hero-accent:var(--orchidee-800); }

/* Hero: chip and ghost button on a navy veil -> AA with every accent. */
.hero-immersive .hero-tag{ background:rgba(23, 23, 23,0.38) !important; border:1px solid rgba(255,255,255,0.30) !important; color:var(--releve-ffffff) !important; }
.hero-immersive .hero-sub{ color:rgba(255,255,255,0.94) !important; }
.hero.hero-immersive a.btn-outline, .hero-immersive .btn-outline{ background:rgba(23, 23, 23,0.36) !important; border-color:rgba(255,255,255,0.55) !important; }
.hero.hero-immersive a.btn-outline:hover, .hero-immersive .btn-outline:hover{ background:rgba(23, 23, 23,0.5) !important; }
.hero-immersive .breadcrumb{ background:rgba(23, 23, 23,0.38) !important; border-color:rgba(255,255,255,0.28) !important; }

/* Sections on a white background: a very light accent gradient (no more all-white). */
html:not([data-theme="dark"]) body.comp .qualif,
html:not([data-theme="dark"]) body.comp .contact{
  background:linear-gradient(180deg, var(--releve-ffffff) 0%, color-mix(in srgb, var(--accent) 5%, var(--releve-ffffff)) 100%);
}
/* Pages without a page-* class (errors, status, plan): the same soft azure tint. */
html:not([data-theme="dark"]) body.comp{ --off: color-mix(in srgb, var(--accent) 6%, var(--releve-fbfbfb)); }

/* Standfirst badge: accent ink (AA) + a rule. */
.section-tag{ color:var(--accent-ink,var(--accent)); border:1px solid color-mix(in srgb, currentColor 26%, transparent); }
[data-theme="dark"] .section-tag{ background:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 15%, transparent); color:var(--accent-ink,var(--releve-7eb1f5)); }
body:not([class*="page-"]) .section-tag{ color:var(--releve-35618e); }
[data-theme="dark"] body:not([class*="page-"]) .section-tag{ color:var(--releve-c1c1c1); }

/* Cards: an accent rule at the head of the steps, FAQ underlined in the accent. */
.step{ border-top:3px solid color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.step:hover{ border-top-color:color-mix(in srgb, var(--accent) 70%, transparent) !important; }
[data-theme="dark"] .step{ border-top-color:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 50%, transparent) !important; }
.faq-item{ border-left:3px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.faq-item[open]{ border-left-color:var(--accent); }
[data-theme="dark"] .faq-item{ border-left-color:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 45%, var(--releve-404040)) !important; }

/* Bullets and chips: border and background lightly tinted with the accent (instead of grey). */
.zone-chip,.f-tag,.z-tag{ border-color:color-mix(in srgb, var(--accent) 24%, var(--border)); background:color-mix(in srgb, var(--accent) 4%, var(--white)); }
[data-theme="dark"] .zone-chip,[data-theme="dark"] .f-tag,[data-theme="dark"] .z-tag{ background:var(--releve-171717); border-color:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 22%, var(--releve-404040)); }

/* Dark: borders of accent-tinted cards (lifts the slate monochrome). */
[data-theme="dark"] .f-card,[data-theme="dark"] .q-item,[data-theme="dark"] .zone-card,[data-theme="dark"] .step{ border-color:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 16%, var(--releve-404040)); }
[data-theme="dark"] .step{ border-top-color:color-mix(in srgb, var(--accent-ink,var(--releve-7eb1f5)) 50%, transparent) !important; }

/* ============================================================================
   TOP-OF-PAGE STRIP — one rule for the whole site.
   Measurement from 12/08: 10 pages out of 50 open with a colored strip, 40 with a
   white block. The reference page gets its appeal from this strip.
   WARNING: The selector names the INTENT, not the structure. A first attempt targeted
   « la premiere section »: in the glossary, it takes up half the page and
   contains 12 cards, which ended up painted. .compo-intro is the
   intro block itself — measured between 5 and 14 % of the page height, with no cards
   inside, versus 13,7 % for the reference strip.
   The text color is set here: a dark veil under dark text is
   unreadable, and leaving it to each page means shipping a contrast defect.
   ========================================================================= */
.compo-intro {
  position: relative;
  /* Full width through a LAYER behind it, centered on the viewport. Two attempts
     failed before: a gutter offset left a floating rectangle, and
     a padding calculation resolves against the CONTAINER, not the element —
     the strip covered the left half and the text was squeezed into a column. */
  padding-block: clamp(3rem, 6vh, 4.5rem) clamp(2.5rem, 5vh, 3.5rem) !important;
  z-index: 0;
}
.compo-intro::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: linear-gradient(158deg, rgba(23,23,23,0.30) 0%, rgba(23,23,23,0.62) 100%),
              var(--hero-accent, var(--accent));
}
.compo-intro,
.compo-intro h1, .compo-intro h2, .compo-intro p, .compo-intro li,
.compo-intro .section-title, .compo-intro .section-sub { color: var(--releve-ffffff) !important; }
.compo-intro a { color: var(--releve-ffffff) !important; text-decoration-color: rgba(255,255,255,0.55) !important; }
.compo-intro .section-tag {
  background: rgba(23,23,23,0.38) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: var(--releve-ffffff) !important;
}
/* The reference strip stays its own: do not double it. */
/* The reference keeps ITS strip: the exclusion must target the layer, not the
   block background — otherwise it gets a second one on top. Measurement: 14,0 % colored
   area before, 32,3 % after, on the very page used as the benchmark. */
body.page-sentinelle .compo-intro::before { display: none !important; }
body.page-sentinelle .compo-intro { padding-block: 0 !important; }
body.page-sentinelle .compo-intro, body.page-sentinelle .compo-intro * { color: inherit !important; }

/* ============================================================================
   ONE COLOUR PER PAGE — asked for on 12/08.
   Measurement: 10 pages out of 50 had a declared accent; the other 40 all fell
   back to the same default, hence the FAQ and glossary in identical magenta.
   The palette has 13 families of 9 steps, or 117 shades: there are plenty.
   WARNING: page-faq is set on 35 pages IN ADDITION to their own class. It must therefore be declared
   FIRST: with equal specificity, the last rule wins, and
   the page's own class must win.
   Neighboring pages stay in neighboring families: one family per
   subject, not 40 colours drawn at random.
   ========================================================================= */
body.page-faq                { --hero-accent: var(--myrtille-600); }

body.page-a-propos           { --hero-accent: var(--lagon-600); }
body.page-assistance         { --hero-accent: var(--menthe-700); }
body.page-blog               { --hero-accent: var(--violet-600); }
body.page-eco-conception     { --hero-accent: var(--prairie-700); }
body.page-glossaire          { --hero-accent: var(--soleil-700); }
body.page-glossaire-gestion  { --hero-accent: var(--mangue-700); }
body.page-marche-public      { --hero-accent: var(--myrtille-800); }
body.page-metiers            { --hero-accent: var(--framboise-600); }
body.page-sitemap-page       { --hero-accent: var(--sable-600); }
body.page-poids-des-pages    { --hero-accent: var(--citron-800); }
body.page-quelle-formation   { --hero-accent: var(--turquoise-700); }
body.page-questions          { --hero-accent: var(--violet-800); }
body.page-recherche          { --hero-accent: var(--lagon-800); }
body.page-si-ca-s-arrete     { --hero-accent: var(--corail-700); }

/* The ten pages that had only the shared class received their own,
   one more marker on the body and nothing else. The FAQ keeps blueberry: it is
   its page, not a defect. */
body.page-combien-ca-coute   { --hero-accent: var(--citron-700); }
body.page-comparaison        { --hero-accent: var(--menthe-800); }
body.page-contact            { --hero-accent: var(--turquoise-800); }
body.page-demonstration      { --hero-accent: var(--corail-600); }
body.page-donnees-en-france  { --hero-accent: var(--lagon-700); }
body.page-migration          { --hero-accent: var(--mangue-800); }
body.page-pas-pour-vous      { --hero-accent: var(--sable-800); }
body.page-pour-les-eleves    { --hero-accent: var(--prairie-600); }
body.page-visite             { --hero-accent: var(--framboise-800); }
body.page-your-data        { --hero-accent: var(--violet-700); }

/* Error pages: nine more, one color each. They use the same
   structure as the others, so the strip appears by itself. Red is reserved
   for what is truly broken; what is intentional or temporary gets a
   calm tint, because scheduled maintenance is not an outage. */
body.page-erreur-400 { --hero-accent: var(--sable-700); }
body.page-erreur-405 { --hero-accent: var(--sable-800); }
body.page-erreur-408 { --hero-accent: var(--mangue-700); }
body.page-erreur-410 { --hero-accent: var(--myrtille-700); }
body.page-erreur-413 { --hero-accent: var(--mangue-800); }
body.page-erreur-429 { --hero-accent: var(--soleil-800); }
body.page-erreur-500 { --hero-accent: var(--framboise-800); }
body.page-erreur-502 { --hero-accent: var(--corail-800); }
body.page-erreur-503 { --hero-accent: var(--turquoise-700); }
body.page-erreur-504 { --hero-accent: var(--corail-700); }
body.page-erreur-401 { --hero-accent: var(--violet-800); }
body.page-erreur-403 { --hero-accent: var(--violet-700); }
body.page-erreur-404 { --hero-accent: var(--lagon-800); }