/**
 * ============================================================
 * ds-site.css — surcouche design system pour les pages publiques
 * ============================================================
 *
 * Philosophie (identique aux ds-*.css du portail) :
 *   – Additif : chargé APRÈS components.css / layout.css,
 *     jamais à leur place.
 *   – Pas de changements HTML : on cible les mêmes classes/IDs
 *     utilisés par les pages et les scripts.
 *   – Tokens nouveaux réutilisés depuis ds-tokens.css (si présent)
 *     + repli sur `variables.css` historique.
 *
 * Portée de ce fichier (Wave A — shared chrome) :
 *   1. Fond & halos de page publiques
 *   2. Header (site-header, nav, nav__link, nav__cta)
 *   3. Hero interne (.page-hero) : unifié comme panneau DS
 *   4. Section headers / eyebrow / gradient-text
 *   5. Boutons (.btn + variants)
 *   6. Cartes (.card) — glass halo
 *   7. CTA band (.cta-band)
 *   8. Footer (.site-footer)
 *   9. scroll-progress
 *  10. Garde `prefers-reduced-motion`
 *
 * Les pages FAQ / Aide / Nouvelles ont leurs propres îlots CSS
 * inline ; elles seront traitées en Wave C. Les pages légales en
 * Wave D.
 */

/* =============================================================
   0. Ambient — halos globaux sur pages publiques
   ============================================================= */

body:not(.ds-body):not(.admin-body) {
  background:
    radial-gradient(1200px 680px at 0% -10%, rgba(124, 255, 91, 0.06), transparent 62%),
    radial-gradient(1100px 620px at 100% 0%, rgba(91, 200, 255, 0.04), transparent 60%),
    radial-gradient(900px 480px at 50% 120%, rgba(124, 255, 91, 0.04), transparent 65%),
    var(--bg-0);
}

/* =============================================================
   1. Header — glass blur + accent neon
   ============================================================= */

.site-header {
  /* Toujours glass, même sans scroll : l’aspect « volet volant »
     au chargement est plus haut de gamme que le transparent flat. */
  background: rgba(7, 9, 12, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  transition:
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    backdrop-filter var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(7, 9, 12, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Barre accent 1px le long du bord bas — n’apparaît qu’au scroll. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 255, 91, 0.35) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled::after {
  opacity: 1;
}

/* Pill navigation — hairline plus net + ombre discrète. */
.nav__links {
  background: rgba(22, 29, 38, 0.55);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Lien hover : underline animé en accent vert (au lieu du simple
   fond gris). L’état actif garde sa pilule pleine. */
.nav__link {
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 86%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(124, 255, 91, 0.5);
  opacity: 0;
  transition:
    left var(--dur-med) var(--ease-out),
    right var(--dur-med) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.nav__link:hover:not(.is-active)::after {
  left: 18%;
  right: 18%;
  opacity: 1;
}
.nav__link:hover:not(.is-active) {
  background: transparent;
  color: var(--text-0);
}
.nav__link.is-active {
  /* On remplace la pilule pleine (trop criarde) par une pilule
     sombre + ombre néon + texte accent — plus cohérent dashboards. */
  background: rgba(124, 255, 91, 0.08);
  color: var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 91, 0.35),
    0 0 24px rgba(124, 255, 91, 0.15);
}

/* Bouton « Mon compte » dans le header : glass chip cohérent. */
.nav__account {
  background: rgba(22, 29, 38, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.nav__account:hover {
  border-color: rgba(124, 255, 91, 0.35);
  color: var(--accent);
  background: rgba(124, 255, 91, 0.04);
  transform: translateY(-1px);
}

/* Toggle mobile : plus contrasté. */
.nav__toggle {
  background: rgba(22, 29, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.nav__toggle:hover {
  border-color: rgba(124, 255, 91, 0.35);
  color: var(--accent);
  transform: translateY(-1px);
}

/* =============================================================
   2. Hero interne — `.page-hero` devient un panneau DS
   ============================================================= */

.page-hero {
  position: relative;
  isolation: isolate;
}
/* Halo double en arrière-plan : accent en haut-gauche, info en
   haut-droit. Ambiance, pas de « fond plein ». */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(650px 320px at 15% 0%, rgba(124, 255, 91, 0.12), transparent 60%),
    radial-gradient(600px 300px at 85% 0%, rgba(91, 200, 255, 0.08), transparent 60%);
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}

.page-hero .eyebrow,
.page-hero .page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.22);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.page-hero .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(124, 255, 91, 0.7);
}

.page-hero__title {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-0);
  font-weight: 700;
}

.page-hero__subtitle {
  color: var(--text-2);
  line-height: var(--lh-loose);
  max-width: 640px;
}

/* =============================================================
   3. Section header / eyebrow / gradient-text — unifier la typo
   ============================================================= */

.section-header h2,
.section-header .section-header__title {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--text-0);
}

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* `.gradient-text` / `.gradient-text.animated` — amélioration de
   la lisibilité sur fond sombre (petits points blancs fantômes en
   Chrome Canary). On impose `-webkit-text-fill-color: transparent`
   + gradient pleine opacité. */
.gradient-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =============================================================
   4. Boutons — gradients accentués + halo néon
   ============================================================= */

.btn {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--grad-accent);
  color: var(--bg-0);
  border: none;
  box-shadow:
    0 10px 28px rgba(124, 255, 91, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:hover {
  background: var(--grad-accent);
  color: var(--bg-0);
  filter: saturate(1.08) brightness(1.06);
  box-shadow:
    0 14px 40px rgba(124, 255, 91, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.btn--primary:active {
  transform: translateY(0);
}

.btn--ghost {
  background: rgba(22, 29, 38, 0.6);
  color: var(--text-0);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: rgba(22, 29, 38, 0.85);
  border-color: rgba(124, 255, 91, 0.45);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.btn--glass {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-0);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover {
  border-color: rgba(124, 255, 91, 0.4);
  color: var(--accent);
  background: rgba(124, 255, 91, 0.05);
}

/* =============================================================
   5. Cartes `.card` — surface tier, halo, hairline inset
   ============================================================= */

.card {
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.75) 0%, rgba(15, 20, 27, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background var(--dur-med) var(--ease-out);
}
.card::before {
  /* On conserve le `var(--grad-surface)` original mais on
     l’adoucit pour ne pas laver le fond. */
  opacity: 0.6;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 91, 0.35);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(124, 255, 91, 0.18),
    0 0 42px rgba(124, 255, 91, 0.1);
  background:
    linear-gradient(160deg, rgba(28, 36, 48, 0.82) 0%, rgba(18, 24, 33, 0.62) 100%);
}

/* Icône de carte : un peu plus contrastée + halo subtil. */
.card__icon {
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(124, 255, 91, 0.2), transparent 70%),
    rgba(124, 255, 91, 0.1);
  border: 1px solid rgba(124, 255, 91, 0.28);
  box-shadow: 0 0 24px rgba(124, 255, 91, 0.15);
  color: var(--accent);
}

/* =============================================================
   6. CTA band — panneau gradient + halo néon animé
   ============================================================= */

.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124, 255, 91, 0.18);
  background:
    radial-gradient(circle at 25% 20%, rgba(124, 255, 91, 0.22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(91, 200, 255, 0.14), transparent 55%),
    linear-gradient(160deg, #0d141d, #05080b);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Liseré gradient dansant sur le bord haut (pur CSS). */
.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 255, 91, 0.5),
    rgba(91, 200, 255, 0.35),
    transparent
  );
}
/* Halo diffus derrière le CTA — donne une impression de profondeur. */
.cta-band::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(124, 255, 91, 0.1),
    transparent 70%
  );
  pointer-events: none;
  filter: blur(40px);
  z-index: -1;
}
.cta-band h2 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-0);
}
.cta-band p {
  color: var(--text-1);
}

/* =============================================================
   7. Footer — accent rule + colonnes mieux rythmées
   ============================================================= */

.site-footer {
  position: relative;
  padding-block: 4rem 2.75rem;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(124, 255, 91, 0.028) 55%,
    rgba(124, 255, 91, 0.05) 100%
  );
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 255, 91, 0.45) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.footer-brand > p,
.footer-tagline {
  position: relative;
  z-index: 1;
  color: var(--text-2);
  line-height: 1.35;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 28ch;
  margin-top: 0.25rem;
}

.footer-brand__desc {
  position: relative;
  z-index: 1;
  margin: 0.4rem 0 0;
  max-width: 30ch;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(156, 163, 175, 0.9);
}

.footer-brand__cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 1rem;
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}

.footer-brand .footer-brand__cta:hover {
  transform: translateY(-2px);
}

.footer-brand--lead .brand-logo--footer {
  transition:
    transform 0.38s var(--ease-out),
    filter 0.38s var(--ease-out);
}

.footer-brand--lead .nav__brand--logo:hover .brand-logo--footer {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(124, 255, 91, 0.28));
}

.footer-support-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  max-width: min(100%, 26rem);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    border-color 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}

.footer-support-card:hover {
  border-color: rgba(124, 255, 91, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(124, 255, 91, 0.08);
  transform: translateY(-3px);
}

.footer-support-card__glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.22);
  color: var(--accent);
  transition:
    border-color 0.28s var(--ease-out),
    background-color 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}

.footer-support-card:hover .footer-support-card__glyph {
  background: rgba(124, 255, 91, 0.12);
  border-color: rgba(124, 255, 91, 0.35);
  transform: scale(1.05);
}

.footer-support-card__glyph svg {
  width: 1rem;
  height: 1rem;
}

.footer-support-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(209, 213, 219, 0.95);
}

.footer-support-card__text strong {
  font-weight: 600;
  color: var(--text-0);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-support-card__text a {
  color: rgba(156, 163, 175, 0.98);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-support-card__text a:hover {
  color: #fff;
}

.footer-contact-list span {
  color: rgba(156, 163, 175, 0.95);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.footer-grid--expanded .footer-brand {
  align-items: flex-start;
  text-align: left;
}
.footer-grid--expanded .footer-brand .nav__brand--logo {
  justify-content: flex-start;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-lang {
  position: relative;
  z-index: 1;
  margin-top: 1.15rem;
}

.footer-bottom__cookies {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.footer-bottom__cookies:hover {
  color: var(--accent);
}

.footer-col h5 {
  position: relative;
  z-index: 1;
  padding-bottom: 0.55rem;
  margin-bottom: 0.85rem;
}
.footer-col h5::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(124, 255, 91, 0.5);
  margin-top: 0.55rem;
}

.footer-grid--expanded .footer-col > h5 {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: rgba(156, 163, 175, 0.88);
}

.footer-grid--expanded .footer-col h5::after {
  transition:
    width 0.38s var(--ease-out),
    box-shadow 0.38s var(--ease-out);
}

.footer-grid--expanded .footer-col:hover h5::after {
  width: 44px;
  box-shadow: 0 0 14px rgba(124, 255, 91, 0.58);
}

.footer-grid--expanded .footer-col a {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: rgba(156, 163, 175, 0.95);
  transition:
    color 0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-grid--expanded .footer-col a::before {
  display: none;
}

.footer-grid--expanded .footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(124, 255, 91, 0.9), transparent);
  transition: width 0.32s var(--ease-out);
  pointer-events: none;
}

.footer-grid--expanded .footer-col a:hover {
  color: #fff;
  transform: translateX(5px);
}

.footer-grid--expanded .footer-col a:hover::after {
  width: 100%;
}

.footer-grid--expanded .footer-col .footer-link-list__btn {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: rgba(156, 163, 175, 0.95);
  transition:
    color 0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.footer-grid--expanded .footer-col .footer-link-list__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(124, 255, 91, 0.9), transparent);
  transition: width 0.32s var(--ease-out);
  pointer-events: none;
}

.footer-grid--expanded .footer-col .footer-link-list__btn:hover {
  color: #fff;
  transform: translateX(5px);
}

.footer-grid--expanded .footer-col .footer-link-list__btn:hover::after {
  width: 100%;
}

.footer-col a {
  position: relative;
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.footer-col a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  box-shadow: 0 0 6px rgba(124, 255, 91, 0.6);
}
.footer-col a:hover {
  color: var(--accent);
  transform: translateX(2px);
}
.footer-col a:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Icônes sociales : cercle glass plus tactile. */
.footer-socials a {
  background: rgba(22, 29, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.footer-socials a:hover {
  border-color: rgba(124, 255, 91, 0.5);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(124, 255, 91, 0.18);
}

@keyframes cmtb-footer-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-footer .footer-grid--expanded > * {
    opacity: 0;
    animation: cmtb-footer-fade-up 0.58s var(--ease-out) forwards;
  }

  .site-footer .footer-grid--expanded > *:nth-child(1) {
    animation-delay: 0.04s;
  }
  .site-footer .footer-grid--expanded > *:nth-child(2) {
    animation-delay: 0.1s;
  }
  .site-footer .footer-grid--expanded > *:nth-child(3) {
    animation-delay: 0.16s;
  }
  .site-footer .footer-grid--expanded > *:nth-child(4) {
    animation-delay: 0.22s;
  }
  .site-footer .footer-grid--expanded > *:nth-child(5) {
    animation-delay: 0.28s;
  }

  .site-footer .footer-bottom {
    opacity: 0;
    animation: cmtb-footer-fade-up 0.52s var(--ease-out) 0.38s forwards;
  }
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: block;
  padding-top: 1.5rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-3);
}

.footer-bottom--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.footer-bottom--split .footer-bottom__copyright,
.footer-bottom--split .footer-bottom__muted {
  margin: 0;
}

.footer-bottom__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.footer-socials {
  position: relative;
  z-index: 1;
  margin-top: 0.65rem;
}

/* Cookie link dans le footer : chip glass discret. */
.cm-cookie-link {
  font: inherit;
  color: var(--text-2);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.cm-cookie-link:hover {
  color: var(--accent);
}

/* =============================================================
   8. scroll-progress — plus visible, gradient accent
   ============================================================= */

.scroll-progress {
  height: 3px;
  background: transparent;
  box-shadow: none;
}
.scroll-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--sp, 0%);
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(124, 255, 91, 0.6);
  transition: width 80ms linear;
}
/* Certaines pages déclarent déjà `.scroll-progress` comme indicateur
   plein (sans pseudo). Compat : si pas de pseudo supporté, on colore
   quand même le fond au proportionnel via l’animation JS existante. */

/* =============================================================
   9. Utilities qui interviennent aussi sur pages publiques
   ============================================================= */

/* Les badges flottants inline (ex. marquee, reviews) héritent du
   look Dashboard via ds-components.css déjà chargé sur certaines
   pages. Pour celles qui ne le chargent pas (FAQ, Aide, etc.) on
   offre un repli minimal pour rester cohérent. */
.badge {
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.25);
  color: var(--accent);
}

/* Cartes « stat » qu’on retrouve sur /coachs + home. */
.stat-box {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.7) 0%, rgba(15, 20, 27, 0.5) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.stat-box:hover {
  border-color: rgba(124, 255, 91, 0.35) !important;
  transform: translateY(-2px);
}

/* =============================================================
   10. Reduce motion
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--primary,
  .btn--ghost,
  .btn--glass,
  .nav__link,
  .nav__link::after,
  .nav__account,
  .nav__toggle,
  .card,
  .stat-box,
  .footer-col a,
  .footer-grid--expanded .footer-col a,
  .footer-grid--expanded .footer-col .footer-link-list__btn,
  .footer-support-card,
  .footer-brand .footer-brand__cta,
  .footer-brand--lead .brand-logo--footer,
  .footer-socials a {
    transition: none !important;
  }
  .btn:hover,
  .card:hover,
  .footer-socials a:hover,
  .footer-support-card:hover,
  .footer-brand .footer-brand__cta:hover,
  .footer-grid--expanded .footer-col a:hover,
  .footer-grid--expanded .footer-col .footer-link-list__btn:hover {
    transform: none !important;
  }
  .footer-brand--lead .nav__brand--logo:hover .brand-logo--footer {
    transform: none !important;
    filter: none !important;
  }
  .site-footer .footer-grid--expanded > *,
  .site-footer .footer-bottom {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =============================================================
   Wave B — Home (.hero) tailored
   ============================================================= */

/* Halo ambiant derrière la section hero (sans toucher au .hero__visual
   existant). On ajoute une paire d’orbes gauches/droits. */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 380px at 8% 18%, rgba(124, 255, 91, 0.14), transparent 62%),
    radial-gradient(680px 360px at 92% 10%, rgba(91, 200, 255, 0.1), transparent 62%);
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}

.hero__eyebrow,
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.22);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero__eyebrow::before,
.hero .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(124, 255, 91, 0.7);
}

.hero__title {
  font-family: var(--font-display);
  letter-spacing: -0.028em;
  line-height: 1.05;
}

.hero__subtitle {
  line-height: var(--lh-loose);
  color: var(--text-1);
}

/* La bande `.hero__meta` (stats : « 100+ séances », etc.) devient une
   rangée de tuiles glass compactes au lieu d’un simple row séparé par
   un hairline. */
.hero__meta {
  margin-top: 2.75rem;
  padding-top: 0;
  border-top: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
}
.hero__meta > div {
  padding: 0.9rem 1.1rem;
  background: rgba(22, 29, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hero__meta > div:hover {
  border-color: rgba(124, 255, 91, 0.3);
  transform: translateY(-2px);
}
.hero__meta strong {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hero__meta span {
  color: var(--text-2);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

@media (max-width: 480px) {
  .hero__meta {
    margin-top: 2rem;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* Visual block (droite) : conserve son look grille + MTB glyph mais
   ajoute un halo néon flottant + tags retravaillés. */
.hero__visual {
  border-color: rgba(124, 255, 91, 0.18);
  box-shadow:
    var(--shadow-lg),
    0 0 60px rgba(124, 255, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero__visual-tag {
  background: rgba(22, 29, 38, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-0);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
.hero__visual-tag .dot {
  box-shadow: 0 0 12px rgba(124, 255, 91, 0.75);
  animation: dsDotPulse 2.8s ease-in-out infinite;
}
@keyframes dsDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}

/* ---------- Section « Approche » (.approche-section) ---------- */

/* Tuiles .stat-box déjà traitées en Wave A. On ajoute ici les détails
   d’alignement quand elles sont dans l’aside de l’approche. */
.approche-section__aside .stat-box {
  padding: 1.35rem 1.5rem;
  border-radius: 18px;
}

/* Liste de features à gauche : check-icons gradient + hairline. */
.feature-list li {
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  background: rgba(22, 29, 38, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.feature-list li:hover {
  border-color: rgba(124, 255, 91, 0.3);
  background: rgba(22, 29, 38, 0.65);
  transform: translateX(2px);
}
.feature-list li svg {
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(124, 255, 91, 0.5));
}

/* Testimonial sous l’approche : glass card + gradient author avatar. */
.testimonial {
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.78) 0%, rgba(15, 20, 27, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  border-radius: 20px;
}
.testimonial blockquote::before {
  color: var(--accent);
  opacity: 0.28;
  font-size: 4.5rem;
  line-height: 1;
}
.testimonial__avatar {
  background: var(--grad-accent);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 0 24px rgba(124, 255, 91, 0.3);
  border: none;
}

/* Reviews band — header + dots accent polish. */
.reviews-carousel__dots button.is-active {
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(124, 255, 91, 0.6);
}

/* =============================================================
   Wave B — Services (.service-card) tailored
   ============================================================= */

/* ==========================================================================
   Phase 4 §4 — Service cards : hauteurs uniformes + CTA au bas
   ==========================================================================
   Les cartes `.service-card` vivent dans une grille `.grid.grid-3` ou
   `.grid.grid-auto`. On force :
     1. Le conteneur grid à étirer les items (align-items: stretch) — par
        défaut en CSS Grid mais belt-and-suspenders face aux overrides.
     2. Chaque carte en flex-column plein-hauteur.
     3. `.card__desc` à occuper l'espace restant (`flex: 1`) → pousse
        le bloc prix + bouton au bas, alignés entre toutes les cartes.
*/
.grid.grid-3,
.grid.grid-auto,
#services-grid,
#services-preview-grid {
  align-items: stretch;
}
#services-grid > .service-card,
#services-preview-grid > .service-card,
.grid > .service-card {
  height: 100%;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Même famille de dégradés que les cartes « Populaire », mais beaucoup plus discrets. */
.card.service-card:not(.service-card--popular):not(.is-featured) {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(ellipse 115% 78% at 98% -8%, rgb(124 255 91 / 0.055), transparent 58%),
    linear-gradient(
      162deg,
      rgb(24 32 42 / 0.36),
      rgb(14 18 24 / 0.74) 100%
    ),
    var(--glass-bg);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgb(124 255 91 / 0.07),
    inset 0 1px 0 rgb(124 255 91 / 0.035);
}

/* Description : occupe tout l'espace vertical disponible — garantit
   que .service-card__price (margin-top: auto déjà présent) + CTA
   viennent se coller au bas de chaque carte, alignés au pixel près. */
.service-card > .card__desc {
  flex: 1 1 auto;
  margin-bottom: 0.5rem;
}

/* Le CTA est toujours le dernier enfant, collé au pied de carte. */
.service-card > .service-card__cta {
  margin-top: 1rem;
}

/* ==========================================================================
   §4.2 — Ruban « Populaire » sur sa propre ligne (au-dessus des pastilles) pour
   éviter tout chevauchement / pastilles rognées par un positionnement absolu.
   ========================================================================== */
.service-card__ribbon-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0 0 0.65rem;
  flex-shrink: 0;
}

.service-card__tags-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin-bottom: 1rem;
}

.service-card__tags-row .service-card__tags {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.service-card__tags {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  /* Fade seulement quand trop de pastilles ; masque retiré sur cartes Populaire (pastilles plus lisibles). */
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.service-card.service-card--popular .service-card__tags {
  mask-image: none;
  -webkit-mask-image: none;
}
.service-card__tags .badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-1);
  padding: 0.5rem 0.92rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.045em;
  /* Pastille insécable + pas de wrap interne. */
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mise en évidence dans la même rangée (Populaire en pastille / Solde) */
.service-card__tags .badge--warn,
.service-card__tags .badge--accent {
  padding: 0.5rem 0.92rem;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Mobile : wrap contrôlé pour les pastilles. */
@media (max-width: 720px) {
  .service-card__ribbon-row {
    margin-bottom: 0.58rem;
  }

  .service-card__tags-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .service-card__tags {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    mask-image: none;
    -webkit-mask-image: none;
    max-height: calc(2 * (2.05rem + 0.55rem));
    overflow: hidden;
  }
}

.service-card__price {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-top-style: solid;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  position: relative;
}
/* Petite barre accent à gauche du prix (détail « subtile élégance »). */
.service-card__price::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--grad-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(124, 255, 91, 0.5);
}
.service-card__price strong {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.service-card__price-strike {
  opacity: 0.7;
}
.service-card__price span {
  font-size: 0.68rem;
  color: var(--text-2);
  letter-spacing: 0.14em;
}

.service-card__cta {
  margin-top: 1.5rem;
}

/* Carte featured (« Populaire ») : halo plus riche + badge gradient. */
.service-card.is-featured {
  border-color: rgba(124, 255, 91, 0.45);
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(124, 255, 91, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(22, 29, 38, 0.8) 0%, rgba(15, 20, 27, 0.6) 100%);
  box-shadow:
    0 14px 40px rgba(124, 255, 91, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.service-card.is-featured::after {
  background: var(--grad-accent);
  color: var(--bg-0);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.38rem 0.8rem;
  box-shadow:
    0 8px 20px rgba(124, 255, 91, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Page /services — barre filtres + catalogue populaire */
.services-catalog-section {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  padding-inline: 0;
}
.services-catalog__toolbar {
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
.services-catalog__heading {
  margin: 0.4rem auto 0.25rem;
  max-width: 36rem;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-0);
}
.services-catalog__hint {
  margin: 0.35rem auto 0;
  max-width: 44rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.services-catalog__pills-mount {
  margin-top: 1.15rem;
  display: flex;
  justify-content: center;
}
.services-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  justify-content: center;
  align-items: center;
}
.services-catalog__pill {
  appearance: none;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.12);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(12 17 23 / 0.35)),
    rgb(255 255 255 / 0.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-1);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition:
    transform var(--dur-med, 0.2s) var(--ease-out, ease),
    border-color var(--dur-med, 0.2s),
    box-shadow var(--dur-med, 0.2s),
    background 0.22s ease;
}
.services-catalog__pill:hover {
  transform: translateY(-2px);
  border-color: rgb(124 255 91 / 0.28);
}
.services-catalog__pill.is-active {
  border-color: rgb(124 255 91 / 0.5);
  color: rgb(232 253 226);
  background:
    linear-gradient(
      155deg,
      rgb(124 255 91 / 0.18),
      rgb(91 214 154 / 0.06) 55%,
      rgb(255 255 255 / 0.02)
    ),
    rgb(124 255 91 / 0.05);
  box-shadow:
    0 0 0 1px rgb(124 255 91 / 0.35),
    0 14px 32px rgb(124 255 91 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.services-catalog__pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgb(124 255 91 / 0.55),
    0 0 0 4px rgb(7 9 14 / 0.9),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
}

/* Grille : message vide ou erreur — même axe que titre & pastilles */
#services-grid.grid:has(.services-catalog__empty) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  justify-content: center;
  align-content: start;
  gap: 0;
  min-height: 0;
}
.services-catalog__empty {
  grid-column: 1 / -1;
  width: min(100%, 40rem);
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--text-1);
  font-size: clamp(0.95rem, 2.1vw, 1.05rem);
  line-height: 1.6;
  padding-block: clamp(1.5rem, 4.5vw, 2.75rem);
  padding-inline: clamp(0.75rem, 3vw, 1.25rem);
}
.services-catalog__empty--error {
  color: rgb(255 154 174);
}

.service-card.service-card--popular {
  border-color: rgb(124 255 91 / 0.48);
  background:
    radial-gradient(ellipse 120% 80% at 100% -10%, rgb(124 255 91 / 0.16), transparent 58%),
    linear-gradient(
      160deg,
      rgb(22 30 41 / 0.88),
      rgb(14 18 26 / 0.68) 100%
    );
  box-shadow:
    0 0 0 1px rgb(124 255 91 / 0.25),
    0 26px 64px rgb(124 255 91 / 0.12),
    0 20px 50px rgb(0 0 0 / 0.5),
    inset 0 1px 0 rgb(124 255 91 / 0.06);
}

.service-card__ribbon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.38rem;
  padding: 0.38rem 0.92rem;
  border-radius: 999px;
  font-size: clamp(0.64rem, 0.45vw + 0.52rem, 0.74rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(237 246 238);
  /* Verre + léger gradient accent — aligné sur les pastilles / pills du catalogue. */
  background:
    radial-gradient(120% 160% at 18% -20%, rgba(124, 255, 91, 0.28), transparent 55%),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(12 17 23 / 0.22) 55%,
      rgba(124, 255, 91, 0.06) 100%
    ),
    var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(124, 255, 91, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 0 16px rgba(124, 255, 91, 0.1);
}

.service-card__ribbon__star {
  font-size: 1.12em;
  line-height: 1;
  font-weight: 700;
  color: rgb(220 253 206);
  transform: translateY(-0.03em);
  filter: drop-shadow(0 0 4px rgba(124, 255, 91, 0.35));
}

.coach-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 91, 0.4);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(124, 255, 91, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.55);
}

.coach-card__portrait {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Liseré accent fin sous le portrait — fait « cadre premium ». */
.coach-card__portrait::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 255, 91, 0.55) 50%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.coach-card:hover .coach-card__portrait::before {
  opacity: 1;
}

.coach-card__body {
  position: relative;
  padding: 1.75rem 1.75rem 1.85rem;
}

.coach-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.coach-card__role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(124, 255, 91, 0.08);
  border: 1px solid rgba(124, 255, 91, 0.22);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.coach-card__role::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 6px rgba(124, 255, 91, 0.7);
}

.coach-card__bio {
  color: var(--text-2);
  line-height: var(--lh-loose);
}

.coach-card__tags {
  gap: 0.4rem;
}
.coach-card__tags .badge,
.coach-card__tags .chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-1);
}

.coach-card__certifs {
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 0.78rem;
  margin: 0 0 1.1rem;
}

/* Hairline gradient en haut du body pour continuer l’effet. */
.coach-card__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 255, 91, 0.16),
    transparent
  );
  pointer-events: none;
}

/* Fondateur (page /coachs) : conserve max-width mais ajoute une
   respiration verticale pour la fiche unique. */
.coachs-founder .coach-card {
  box-shadow:
    var(--shadow-md),
    0 0 60px rgba(124, 255, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Warnings / encarts sous le coach (avis réserve) */
.coachs-founder__warn {
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  background: rgba(255, 179, 71, 0.06);
  border: 1px solid rgba(255, 179, 71, 0.22);
  color: var(--text-1);
}

/* Bloc « valeurs » bas de page — rendre chaque valeur (liste) comme
   une tuile glass compacte, si elles utilisent la même `.feature-list`. */
.coachs-values .feature-list li {
  padding: 1rem 1.2rem;
}

/* =============================================================
   Wave B — Services page : mentions « tarifs CAD » et hero padding
   ============================================================= */

/* La sous-titre du hero services est long ; on agrandit max-width. */
body[data-page="services"] .page-hero__subtitle,
.page-hero__subtitle {
  max-width: 720px;
}

/* Placeholder shimmer : on enlève le padding imposé par le style
   inline en rendant le shimmer plus léger (glass doux). */
.card.service-card.shimmer {
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.55), rgba(15, 20, 27, 0.4));
}

/* =============================================================
   Reduce motion — Wave B
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__visual-tag .dot {
    animation: none !important;
  }
  .feature-list li,
  .coach-card,
  .hero__meta > div {
    transition: none !important;
  }
  .coach-card:hover,
  .hero__meta > div:hover,
  .feature-list li:hover {
    transform: none !important;
  }
}

/* =============================================================
   Wave C — FAQ (.faq-item, .faq-note)
   =============================================================
   Les pages FAQ / Aide / Nouvelles embarquent un <style> inline
   qui définit déjà la structure et le comportement (view
   transitions, accordéons, recherche). On conserve ce JS/layout
   et on ne fait qu’harmoniser la palette + les surfaces.
*/

/* FAQ — carte accordéon plus proche des cards DS. */
.faq-item {
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.78) 0%, rgba(15, 20, 27, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.faq-item:hover {
  border-color: rgba(124, 255, 91, 0.22) !important;
  transform: translateY(-1px);
}
.faq-item.is-open {
  border-color: rgba(124, 255, 91, 0.4) !important;
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(124, 255, 91, 0.12), transparent 55%),
    linear-gradient(160deg, rgba(24, 32, 42, 0.85) 0%, rgba(16, 22, 30, 0.65) 100%) !important;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(124, 255, 91, 0.18),
    0 0 32px rgba(124, 255, 91, 0.08) !important;
}
.faq-item__q::before {
  /* Le badge « Q » gauche : on l’aligne sur la gradient DS. */
  background: var(--grad-accent) !important;
  color: var(--bg-0) !important;
  box-shadow: 0 0 14px rgba(124, 255, 91, 0.35);
}
.faq-item__icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-1);
  transition: transform var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.faq-item.is-open .faq-item__icon {
  background: rgba(124, 255, 91, 0.12) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(124, 255, 91, 0.3);
}

.faq-note {
  background:
    linear-gradient(135deg, rgba(124, 255, 91, 0.05) 0%, rgba(22, 29, 38, 0.55) 100%) !important;
  border: 1px solid rgba(124, 255, 91, 0.18) !important;
  border-radius: 14px !important;
  color: var(--text-1) !important;
}

/* =============================================================
   Wave C — Aide (.help-*)
   ============================================================= */

/* Barre de recherche : look input DS. */
.help-search input {
  background: rgba(22, 29, 38, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: var(--text-0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.help-search input:focus {
  border-color: rgba(124, 255, 91, 0.45) !important;
  box-shadow:
    0 0 0 3px rgba(124, 255, 91, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  background: rgba(22, 29, 38, 0.85) !important;
}
.help-hint {
  color: var(--text-2);
}
.help-empty {
  background: rgba(22, 29, 38, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: var(--text-2);
}

/* Sidebar navigation — chips glass. */
.help-topic-btn {
  background: rgba(22, 29, 38, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--text-1) !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.help-topic-btn:hover {
  transform: translateY(-1px);
  background: rgba(22, 29, 38, 0.78) !important;
  border-color: rgba(124, 255, 91, 0.3) !important;
  color: var(--text-0) !important;
}
.help-topic-btn.is-active {
  background: rgba(124, 255, 91, 0.08) !important;
  border-color: rgba(124, 255, 91, 0.4) !important;
  color: var(--text-0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(124, 255, 91, 0.2),
    0 0 24px rgba(124, 255, 91, 0.12) !important;
}
.help-topic-btn small {
  color: var(--accent);
}

/* Article lu — vraie carte glass. */
.help-article {
  background:
    radial-gradient(circle at 85% -10%, rgba(124, 255, 91, 0.12), transparent 55%),
    linear-gradient(160deg, rgba(22, 29, 38, 0.82) 0%, rgba(15, 20, 27, 0.58) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  box-shadow:
    var(--shadow-md),
    0 28px 80px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.help-article h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text-0);
}
.help-article__meta {
  background: rgba(124, 255, 91, 0.08) !important;
  border: 1px solid rgba(124, 255, 91, 0.25) !important;
  color: var(--accent);
  font-weight: 700;
}
.help-article__callout {
  background: rgba(124, 255, 91, 0.06) !important;
  border: 1px solid rgba(124, 255, 91, 0.22) !important;
  border-radius: 14px !important;
  color: var(--text-1);
  position: relative;
  padding-left: 2.4rem !important;
}
.help-article__callout::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0.95rem;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(124, 255, 91, 0.5);
  opacity: 0.9;
}
.help-related {
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.help-related__links button {
  background: rgba(22, 29, 38, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-1) !important;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.help-related__links button:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 255, 91, 0.4) !important;
  color: var(--accent) !important;
  background: rgba(124, 255, 91, 0.05) !important;
}

/* Help items (grille condensée) — même langage glass. */
.help-item {
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.7) 0%, rgba(15, 20, 27, 0.5) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 16px !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.help-item:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 91, 0.3) !important;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.3), 0 0 32px rgba(124, 255, 91, 0.08) !important;
}
.help-kicker {
  color: var(--accent);
}

/* =============================================================
   Wave C — Nouvelles (.news-*)
   ============================================================= */

.news-card {
  background:
    linear-gradient(160deg, rgba(22, 29, 38, 0.75) 0%, rgba(15, 20, 27, 0.55) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.5rem !important;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
/* Liseré accent gauche animé — détail presse. */
.news-card::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: 1.35rem;
  left: 0;
  width: 2px;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(124, 255, 91, 0.5);
  opacity: 0;
  transform: scaleY(0.5);
  transform-origin: center;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.news-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 255, 91, 0.35) !important;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(124, 255, 91, 0.12),
    0 0 42px rgba(124, 255, 91, 0.08) !important;
}
.news-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
.news-card time {
  color: var(--text-2);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
}
.news-card h2 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-0);
}
.news-card p {
  color: var(--text-1);
  line-height: var(--lh-loose);
}

.news-article .prose {
  color: var(--text-1);
}
.news-article .prose a {
  color: var(--accent);
}
.news-article .prose a:hover {
  color: var(--accent-strong);
}

.news-empty {
  background: rgba(22, 29, 38, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: var(--text-2);
}

/* =============================================================
   Reduce motion — Wave C
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .help-topic-btn,
  .help-item,
  .help-related__links button,
  .news-card,
  .news-card::before {
    transition: none !important;
  }
  .faq-item:hover,
  .help-topic-btn:hover,
  .help-item:hover,
  .news-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   Wave D — Pages légales (.legal-*)
   =============================================================
   Concerne /modalites, /confidentialite, /charte, /paiements.
   La structure grid TOC + prose est excellente ; on raffine le
   glass, la typographie et les callouts pour matcher le DS.
*/

/* Table des matières — glass + hairline accent + chiffres mono stylés. */
.legal-toc {
  background:
    linear-gradient(180deg, rgba(22, 29, 38, 0.82) 0%, rgba(15, 20, 27, 0.68) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 1.35rem 0.85rem 1.35rem 1.35rem !important;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}
.legal-toc h5 {
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.9rem !important;
  position: relative;
}
.legal-toc h5::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--grad-accent);
  box-shadow: 0 0 8px rgba(124, 255, 91, 0.4);
}
.legal-toc ol a {
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.legal-toc ol a:hover {
  background: rgba(124, 255, 91, 0.06) !important;
  color: var(--text-0) !important;
  transform: translateX(2px);
}
.legal-toc ol a.is-active {
  background: rgba(124, 255, 91, 0.1) !important;
  color: var(--text-0) !important;
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 0 14px rgba(124, 255, 91, 0.1) !important;
  font-weight: 600;
}
.legal-toc ol a.is-active::before {
  color: var(--accent);
  font-weight: 700;
}

/* Meta info ligne (header de prose) — chip mono. */
.legal-meta {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  background: rgba(22, 29, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 2rem !important;
}
.legal-meta code {
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Prose — titres plus nets, hairline au-dessus des H2. */
.legal-prose h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-0);
  position: relative;
  padding-top: 1.1rem;
}
.legal-prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(124, 255, 91, 0.45);
}
.legal-prose h3 {
  font-family: var(--font-display);
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.legal-prose h4 {
  color: var(--accent);
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.legal-prose a {
  color: var(--accent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.legal-prose a:hover {
  color: var(--accent-strong);
}

.legal-prose code {
  background: rgba(124, 255, 91, 0.08);
  color: var(--accent);
  border: 1px solid rgba(124, 255, 91, 0.22);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
  font-family: var(--font-mono);
}

/* Callouts — fond gradient tinté + icône à gauche. */
.legal-prose .callout {
  position: relative;
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem 1.1rem 3.1rem !important;
  border: 1px solid rgba(124, 255, 91, 0.2) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(124, 255, 91, 0.08), rgba(22, 29, 38, 0.55)) !important;
  color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.legal-prose .callout::before {
  content: "i";
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--grad-accent);
  color: var(--bg-0);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  font-style: normal;
  box-shadow: 0 0 10px rgba(124, 255, 91, 0.4);
}
.legal-prose .callout.warn {
  border-color: rgba(245, 166, 35, 0.28) !important;
  border-left-color: var(--warn) !important;
  background:
    linear-gradient(135deg, rgba(245, 166, 35, 0.08), rgba(22, 29, 38, 0.55)) !important;
}
.legal-prose .callout.warn::before {
  content: "!";
  background: linear-gradient(135deg, #ffcc7a, var(--warn));
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.4);
}
.legal-prose .callout.danger {
  border-color: rgba(255, 91, 91, 0.28) !important;
  border-left-color: var(--danger) !important;
  background:
    linear-gradient(135deg, rgba(255, 91, 91, 0.08), rgba(22, 29, 38, 0.55)) !important;
}
.legal-prose .callout.danger::before {
  content: "!";
  background: linear-gradient(135deg, #ff9b9b, var(--danger));
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 91, 91, 0.4);
}

/* Tables — en-tête gradient, hover row glass. */
.legal-prose .legal-table-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(22, 29, 38, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.legal-prose table thead th {
  background:
    linear-gradient(135deg, rgba(124, 255, 91, 0.08), rgba(22, 29, 38, 0.55)) !important;
  color: var(--accent) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(124, 255, 91, 0.18) !important;
}
.legal-prose table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.legal-prose table tbody tr:hover {
  background: rgba(124, 255, 91, 0.04) !important;
}
.legal-prose table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.legal-prose table code {
  background: rgba(124, 255, 91, 0.08) !important;
  border: 1px solid rgba(124, 255, 91, 0.22) !important;
  color: var(--accent) !important;
}

/* dl (definition lists) — compactes et lisibles. */
.legal-prose dl dt {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Liste puces/numéros accent. */
.legal-prose ul > li,
.legal-prose ol > li {
  padding-left: 0.15rem;
}

/* =============================================================
   Wave D — Reduce motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .legal-toc ol a,
  .legal-prose table tbody tr {
    transition: none !important;
  }
  .legal-toc ol a:hover {
    transform: none !important;
  }
}