/* CAAST : variables de marque des pages vidéo, chargées après page.css.
   Valeurs relevées sur caast.tv le 26/10/2026 (styles calculés + static/css/variables.css,
   components.css, pages/index.css, pages/success-stories.css de origin/master, identiques à la prod). */
:root {
  --cv-ink: #12001f;          /* --color-primary : texte, boutons primaires, blocs sombres */
  --cv-quiet: #737373;        /* --color-gray-500 : sous-titres, méta (.hero__subtitle) */
  --cv-brand: #12001f;        /* .btn--primary : fond des boutons, bloc héros (.cta-card) */
  --cv-brand-hover: #2a1040;  /* .btn--primary:hover */
  --cv-brand-soft: #f3edfc;   /* .suite : haut du dégradé violet clair */
  --cv-discount: #ff005c;     /* --color-live : pastille LIVE (aucun prix sur le site) */
  --cv-line: #e5e5e5;         /* --color-gray-200 : .divider, bordure .nav__lang */
  --cv-line-strong: #d4d4d4;  /* --color-gray-300 : .testimonials-arrow:hover */
  --cv-bg: #fff;              /* --color-white */
  --cv-bg-alt: #fafafa;       /* --color-gray-50 : .section--gray, témoignages, CTA */
  --cv-r-s: 20px;             /* .hero-stack__card (vidéo 9:16), .story-card */
  --cv-r-m: 24px;             /* --radius-2xl : .testimonial-card, .cta-card, .paths__card */
  --cv-r-full: 9999px;        /* --radius-full : boutons, badges, filtres */
  --cv-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --font-primary */
  /* Gouttière = .container du site : max-width 1280px, padding clamp(1rem, 3vw, 3rem).
     16 px à 390, 23,04 à 768, 30,72 à 1024, 123,2 à 1440, 368 à 1920 (bord du contenu). */
  --cv-gutter: calc(max(0px, (100vw - 1280px) / 2) + clamp(16px, 3vw, 48px));
  --cv-header-h: 72px;        /* .nav__inner : 72 px à toutes les largeurs (+ filet 1 px) */
}

/* Corps : Plus Jakarta Sans 400 (le moteur part de 500). */
.cv-body { font-weight: 400; }

/* Header = .nav du site : blanc à 95 %, flou 12 px, filet gray-100, logo à gauche (jamais centré sur caast.tv),
   « Retour sur le site » à droite dans le style .nav__link. Ordre fixé pour chaque enfant. */
.cv-header { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid #f5f5f5; }
.cv-header__in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); justify-content: space-between; } /* --container-wide */
.cv-logo { position: static; transform: none; order: 1; }
.cv-logo img { height: 28px; }   /* .nav__logo img : 183 × 28 px à toutes les largeurs */
.cv-back { order: 2; gap: 6px; color: #525252; font: 500 14px/21px var(--cv-font); transition: color .15s cubic-bezier(.4, 0, .2, 1); } /* .nav__link */
.cv-back svg { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-back:hover { color: var(--cv-ink); }
.cv-back:hover span { text-decoration: none; }
@media (min-width: 768px) {
  .cv-back span { position: relative; }
  .cv-back span::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: #8900ff; transition: width .25s cubic-bezier(.4, 0, .2, 1); } /* .nav__link::after */
  .cv-back:hover span::after { width: 100%; }
}
@media (max-width: 767px) { .cv-back { margin-left: 0; margin-right: -12px; } } /* icône seule à droite, cible 44 px */

/* Focus clavier : violet du site (.suite__tab:focus-visible), jamais au clic. */
.cv-body :focus-visible { outline: 2px solid #8900ff; outline-offset: 3px; }

/* Titres : 700, échelle fluide du site. */
.cv-h1, .cv-hero h1 { font-weight: 700; font-size: clamp(1.875rem, 1.4rem + 2.375vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; } /* --fs-3xl, .stories-header__title */
.cv-h2 { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; } /* .paths__title */
.cv-answer__title, .cv .cv-all, .cv-meta a { color: #8900ff; }  /* accents et liens : --color-secondary (.story-card__link) */
.cv-answer__text { font-weight: 400; line-height: 1.625; }  /* --lh-relaxed */

/* Boutons = .btn du site : 44 px, 600, survol qui monte de 1 px. */
.cv-btn { min-height: 44px; padding: 12px 28px; transition: all .25s cubic-bezier(.4, 0, .2, 1); }
.cv-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(18, 0, 31, .08), 0 4px 6px -4px rgba(18, 0, 31, .05); }
.cv .cv-btn--ghost { color: var(--cv-ink); border: 1.5px solid var(--cv-ink); }         /* .btn--secondary */
.cv .cv-btn--ghost:hover { background: var(--cv-ink); color: #fff; }

/* Vignettes produit : 12 px (--radius-lg), 20 px serait trop rond sur 72 px. */
.cv-pcard__img { border-radius: 12px; }

/* Pastilles = .filters__tab de /success-stories : sans bordure, active en dégradé. */
.cv-chips a { border-color: transparent; background: #fafafa; color: #737373; }
.cv-chips a:hover { border-color: transparent; color: var(--cv-ink); }
.cv-chips a[aria-current] { background: linear-gradient(135deg, #8b4dff, #f000b9); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 2px 12px rgba(137, 0, 255, .3), 0 1px 3px rgba(0, 0, 0, .08); }
.cv-chips a[aria-current] b { color: rgba(255, 255, 255, .8); }