/* ============================================================
   main.css — le socle partagé par TOUTES les pages du site.
   Tokens, reset, rythme inter-sections, en-tête, pied de page,
   utilitaires d'animation (.reveal, .plx).

   Liée par <link rel="stylesheet" href="/a/main.css"> dans chaque
   page. C'est ICI que se corrige ce qui vaut partout : un changement
   profite aux trois pages sans les republier une par une.

   Issue du découpage des <style> autrefois inlinés dans la page d'accueil
   (26/08/2026). C'est désormais la SOURCE : elle s'édite à la main.
   ============================================================ */

/* ── tokens.css ── */
/* ============================================================
   TOKENS RUNTIME — dérivé de design-tokens.css (source de vérité)
   design-tokens.css est au format Tailwind v4 (@theme), ignoré par
   les navigateurs sans build. Ce fichier expose les MÊMES variables
   sur :root pour l'usage CSS pur. Ne pas éditer à la main :
   régénérer depuis design-tokens.css en cas de changement.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COULEURS
     Nommage repris des paint styles Figma quand ils existent.
     HSL en commentaire pour chaque valeur.
     ---------------------------------------------------------- */

  /* — Neutres / encre (texte, fonds sombres) — */
  --color-ink: #26292E;            /* "Charleston Green" · hsl(218, 10%, 16%) · texte principal, fonds sombres */
  --color-ink-strong: #17181B;     /* "Eerie Black" · hsl(225, 8%, 10%) */
  --color-ink-soft: #383C42;       /* "Onyx" · hsl(216, 8%, 24%) */
  --color-neutral-950: #111111;    /* hsl(0, 0%, 7%) · titres sur sections claires */
  --color-black: #000000;

  /* — Surfaces claires — */
  --color-white: #FFFFFF;
  --color-surface: #F4F6F7;        /* "Cultured" · hsl(200, 16%, 96%) · fond de section */
  --color-surface-2: #F1F1F1;      /* hsl(0, 0%, 95%) · aussi utilisé en overlay @22% et @13% */
  --color-surface-3: #F0F0F0;      /* hsl(0, 0%, 94%) */
  --color-media-bg: #E5E5E5;       /* hsl(0, 0%, 90%) · fond placeholder images/médias (occurrence dominante) */

  /* — Bordures — */
  --color-border: #E5E7E9;         /* "Platinum" · hsl(210, 8%, 91%) · bordure par défaut */
  --color-border-strong: #CBD1D5;  /* "American Silver" · hsl(204, 11%, 82%) */
  --color-border-dark: #27292E;    /* hsl(220, 8%, 17%) · bordures sur fonds sombres */

  /* — Accent principal (violet) — */
  --color-primary: #7160F3;        /* hsl(247, 86%, 66%) */
  --color-primary-vivid: #675EFF;  /* hsl(243, 100%, 68%) · variante stroke/hover */
  --color-primary-soft: #E9DDFE;   /* "Lavender (Web)" · hsl(262, 94%, 93%) · fond de tag/badge */

  /* — Accents secondaires (tags, illustrations, data-viz) — */
  --color-accent-orange: #FF8A00;  /* hsl(32, 100%, 50%) */
  --color-accent-coral: #FF774A;   /* hsl(15, 100%, 65%) */
  --color-accent-blue: #004CE5;    /* hsl(220, 100%, 45%) */
  --color-accent-cyan: #03AED2;    /* hsl(190, 97%, 42%) */
  --color-accent-sky: #D9F3FF;     /* "Water" · hsl(199, 100%, 93%) · fond de tag */
  --color-accent-green: #3CBA00;   /* hsl(101, 100%, 36%) · succès (fond @10%) */
  --color-accent-pink: #FB4E70;    /* hsl(348, 96%, 65%) */
  --color-danger: #FF0000;         /* hsl(0, 100%, 50%) · erreur (fond @10%) */

  /* ----------------------------------------------------------
     2. TYPOGRAPHIE
     Manrope = police effective de la LP (titres, labels, corps).
     Inter Display = text styles nommés du fichier ("Heading 01…06",
     "Body"), utilisés dans les sections héritées. Les deux sont requis.
     ---------------------------------------------------------- */

  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* — Échelle de tailles (valeurs mesurées, arrondies natives) — */
  --text-hero: 72px;               /* Manrope Bold · lh 72px (1) · ls -2% */
  --text-hero--line-height: 72px;
  --text-hero--letter-spacing: -0.02em;
  --text-hero--font-weight: 700;

  --text-h1: 64px;                 /* SemiBold · lh 72px (1.125) · ls -2% · = style Figma "Heading 01-64px" */
  --text-h1--line-height: 72px;
  --text-h1--letter-spacing: -0.02em;
  --text-h1--font-weight: 600;

  --text-h2: 54px;                 /* Manrope SemiBold · lh 56px (1.04) · ls -2% · titres de section */
  --text-h2--line-height: 56px;
  --text-h2--letter-spacing: -0.02em;
  --text-h2--font-weight: 600;

  --text-h2-alt: 50px;             /* Inter Display SemiBold · lh 62px · ls -2% · = "Heading 02-50px" */
  --text-h2-alt--line-height: 62px;
  --text-h2-alt--letter-spacing: -0.02em;
  --text-h2-alt--font-weight: 600;

  --text-h3: 32px;                 /* Inter Display Medium · lh 44px · ls -2% · = "Heading 03-32px" */
  --text-h3--line-height: 44px;
  --text-h3--letter-spacing: -0.02em;
  --text-h3--font-weight: 500;

  --text-h4: 24px;                 /* SemiBold/Medium · lh 32px · ls -1 à -2% · = "Heading 04-24px" */
  --text-h4--line-height: 32px;
  --text-h4--letter-spacing: -0.015em;
  --text-h4--font-weight: 600;

  --text-h5: 21px;                 /* Manrope SemiBold · lh 32px (aérée) ou 26px (dense) · ls -2% · titres de card */
  --text-h5--line-height: 32px;
  --text-h5--letter-spacing: -0.02em;
  --text-h5--font-weight: 600;

  --text-h6: 20px;                 /* Medium · lh 28–32px · ls -1% · = "Heading 05-20px" */
  --text-h6--line-height: 28px;
  --text-h6--letter-spacing: -0.01em;
  --text-h6--font-weight: 500;

  --text-body-lg: 18px;            /* Regular · lh 28px (1.56) · = "Body-18px" */
  --text-body-lg--line-height: 28px;
  --text-body-lg--font-weight: 400;

  --text-body: 16px;               /* Regular · lh 24px (1.5) · = "Body-16px" · corps par défaut */
  --text-body--line-height: 24px;
  --text-body--font-weight: 400;

  --text-body-sm: 15px;            /* Manrope Regular · lh 22px */
  --text-body-sm--line-height: 22px;
  --text-body-sm--font-weight: 400;

  --text-small: 14px;              /* Regular/Medium/SemiBold · lh 24px · UI, boutons, nav */
  --text-small--line-height: 24px;
  --text-small--font-weight: 500;

  --text-caption: 13px;            /* Medium · lh 20px */
  --text-caption--line-height: 20px;
  --text-caption--font-weight: 500;

  --text-tiny: 12px;               /* lh 16px */
  --text-tiny--line-height: 16px;
  --text-tiny--font-weight: 400;

  /* — Eyebrow / label de section (signature typographique de la LP) — */
  --text-eyebrow: 14px;            /* Manrope Medium · lh 24px · ls +4% · uppercase probable */
  --text-eyebrow--line-height: 24px;
  --text-eyebrow--letter-spacing: 0.04em;
  --text-eyebrow--font-weight: 500;

  /* ----------------------------------------------------------
     3. ESPACEMENTS
     Base 4px. Valeurs mesurées : gaps 2/4/6/8/10/16/18,
     paddings 8/12/14/16/20/24/28. Échelle étendue jusqu'aux
     gouttières (120px) mesurées sur le frame.
     ---------------------------------------------------------- */

  --spacing: 4px;                  /* unité de base : p-1 = 4px, p-6 = 24px, etc. */

  --spacing-gutter: 120px;         /* marge latérale du frame 1440 (mesurée : sections à x=120) */
  --spacing-section: 96px;         /* rythme vertical inter-sections (dérivé, à ajuster visuellement) */

  /* ----------------------------------------------------------
     4. BORDER-RADIUS
     Valeurs natives mesurées : 8, 10, 12, 14, 15, 16, 20,
     puis 70/80 (boutons pilule).
     ---------------------------------------------------------- */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;               /* radius de card dominant */
  --radius-xl: 20px;
  --radius-pill: 80px;             /* boutons/tags pilule (70–80px mesurés) */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     5. BREAKPOINTS & CONTAINER
     ⚠️ AUCUN breakpoint n'existe dans la maquette : une seule
     frame desktop 1440px, zéro déclinaison tablette/mobile.
     Valeurs ci-dessous : container MESURÉ (1200px de contenu,
     gouttières 120px) ; seuils tablette/mobile PROPOSÉS selon
     les standards — à valider avec le designer.
     ---------------------------------------------------------- */

  --breakpoint-sm: 640px;          /* proposé — mobile paysage */
  --breakpoint-md: 768px;          /* proposé — tablette */
  --breakpoint-lg: 1024px;         /* proposé — petit desktop */
  --breakpoint-xl: 1280px;         /* proposé — desktop, container 1200 + marges */
  --breakpoint-2xl: 1440px;        /* mesuré — largeur de conception de la maquette */

  --container-max: 1200px;         /* mesuré — largeur de contenu des sections */
  --container-content: 1168px;     /* mesuré — largeur interne récurrente (1200 - 2×16) */
}/* ── base.css ── */
/* ============================================================
   BASE — reset minimal, typo par défaut, rythme inter-sections
   DesignBrain LP · maquette Figma 5369:18860 (1440px desktop-only)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* clip au niveau viewport (et pas sur .page : un ancêtre en overflow
     clip neutralise le header sticky dans Chromium) */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Wrapper de page : contexte de positionnement du décor global
   (voir sections/00-decor.html) et garde-fou contre les bleeds. */
.page {
  position: relative;
  overflow-x: clip; /* contient les bleeds (wordmark footer 1730px, halos) */
}

.page > section,
.page > footer {
  position: relative;
  z-index: 1; /* contenu au-dessus du décor (z-index:0) */
} /* v2 : fin conviction (11464) → zone eyebrow+FAQ */
.site-footer     { margin-top: 110px; } /* v2 : fin FAQ (12154) → bloc sombre (12264) */

/* Séparateurs 1px EN FLUX (remplacent les .page-separator absolus,
   qui dérivaient dès que les hauteurs réelles s'écartaient de la
   maquette). Écarts mesurés maquette. */
.page-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.page-divider--content {
  max-width: var(--container-max);
  margin-inline: auto;
}

.page-divider--s1 { margin-top: 75px; } /* fin pourquoi (2037) → 2112 */
.page-divider--s3 { margin-top: 84px; }/* fin interieur (5583) → 5667 */

@media (max-width: 768px) {

  .site-footer    { margin-top: 64px; }
  .page-divider--s1, .page-divider--s3 { margin-top: 48px; }
}


/* Lien d'évitement (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}/* ── 01-hero.css ── */
/* ============================================================
   Section 01 — hero · Figma node 7206:8620 « HERO » (maquette v2, ex-5374:25276)
   header 80px (nav) + hero 1357px = ~1437px à 1440px de large.
   Le node fait 1593px de large (bleed ±77px) : reproduit via une
   rangée de logos non-wrappée + overflow hidden sur .hero.
   ============================================================ */

/* ---- Header / nav ------------------------------------------ */

.site-header {
  position: sticky; /* retour 13/08 : fixe au scroll */
  top: 0;
  z-index: 20; /* au-dessus de tout (sticky) */
  height: 80px; /* hors tokens: mesuré Figma */
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 40px 31px; /* hors tokens: mesuré Figma (logo x=40, CTA à 31px du bord droit) */
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* mesuré : picto 54px à x=40, texte à x=102 */
  text-decoration: none;
}

.site-header__picto {
  display: block;
  width: 54px;
  height: 54px;
}

.site-header__name {
  font-weight: 800;
  font-size: 28px; /* hors tokens: mesuré Figma (wordmark) */
  line-height: 26px;
  letter-spacing: -0.56px;
  color: var(--color-ink);
}

/* Nav centrée sur le viewport comme dans la maquette (x 588→852, centre 720).
   Position absolue assumée : barre de chrome à hauteur fixe, pas du contenu de flux. */
.site-header__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px; /* hors tokens: mesuré Figma v2 (4 liens, x 540→901, centre 720) */
}

.site-header__link {
  font-family: var(--font-display);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 400;
  color: var(--color-border-dark); /* #27292E — seul token exact (texte nav) */
  text-decoration: none;
}

.site-header__link:hover {
  color: var(--color-black);
}

/* ---- Boutons pilule (partagés header + hero) ---------------- */

.site-header__cta,
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  height: 48px;
  padding: 0 12px 0 22px; /* mesuré : texte à 22px du bord, flèche à 12px */
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap; /* le libellé tient sur une ligne dans la maquette */
  box-shadow:
    0px 8px 4px -8px rgba(88, 88, 88, 0.24),
    0px 8px 16px -16px rgba(51, 51, 51, 0.28),
    0px 4px 12px 0px rgba(126, 126, 126, 0.16),
    0px 8px 16px 0px rgba(134, 134, 134, 0.16),
    inset 0px 2px 0px 0px rgba(255, 255, 255, 0.16);
}

.site-header__cta {
  background: #2b2b2b; /* hors tokens: mesuré Figma */
  color: var(--color-white);
}@media (max-width: 768px) {

  /* Nav condensée : logo + CTA uniquement (maquette desktop-only,
     comportement proposé — pas de burger, pas de JS). */
  .site-header__nav { display: none; }
  .site-header__inner { padding-inline: 20px; }
  .site-header__cta { width: auto; gap: 10px; padding: 0 16px; }
  .site-header__name { font-size: 22px; }
  .site-header__picto { width: 40px; height: 40px; }
}
/* Très petits écrans : la barre de chrome reste sur une ligne */
@media (max-width: 480px) {

  .site-header__name { font-size: 18px; letter-spacing: -0.3px; }
  .site-header__picto { width: 32px; height: 32px; }
  .site-header__cta { height: 40px; padding: 0 14px; gap: 8px; font-size: 13px; }
  .site-header__cta img { display: none; } /* flèche masquée : place pour le wordmark */
  .site-header__inner { padding-inline: 16px; }
}
/* ── 04-difference.css ── */


@keyframes difference-dot-in {
  from { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}/* ── 13-footer.css ── */
/* ============================================================
   13-footer — « Footer » · Figma node 7206:7459 (v2)
   Le frame v2 (1440×2368 @y=11227) englobe une zone blanche
   (eyebrow + FAQ) ; seule la zone sombre 1440×1331 @y=12264 est
   stylée ici : bloc CTA (pattern de tuiles + calendrier) puis
   bas de page (LinkedIn, liens légaux, wordmark géant).
   ============================================================ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-neutral-950);
  font-family: var(--font-sans);
  color: var(--color-white);
}

/* --- Bloc CTA ----------------------------------------------------- */

.site-footer__cta {
  position: relative;
  /* v2 : 147px = position du titre depuis le haut du bloc sombre
     (l'eyebrow qui occupait cet espace est sorti du bloc — voir 12-faq) */
  padding: 147px clamp(20px, 8.33vw, 120px) 0;
  text-align: center;
}

/* Pattern de tuiles arrondies (≈180 rects Figma 55×55 r9, #F1F1F1
   @13–22% × opacité 13%) recréé en pattern SVG inline — pas un asset */
.site-footer__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 496px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect x='4.5' y='4.5' width='55' height='55' rx='9' fill='%23F1F1F1' fill-opacity='0.028'/%3E%3C/svg%3E");
  background-size: 64px 64px;
  background-position: 24px 2px; /* calé sur la grille mesurée Figma */
  pointer-events: none;
}

/* Fondu bas du bloc CTA (Figma : linear-gradient vers #17181B,
   h 236px à partir de y=259) recréé en CSS */
.site-footer__cta::after {
  content: "";
  position: absolute;
  top: 259px;
  left: 0;
  right: 0;
  height: 237px;
  background: linear-gradient(to bottom, rgba(23, 24, 27, 0), var(--color-ink-strong));
  pointer-events: none;
}

.site-footer__cta > * {
  position: relative;
  z-index: 1;
}

/* v2 : le badge « LE FUTUR COMMENCE MAINTENANT » (Figma 7206:7688) est sorti
   du bloc sombre — il vit désormais en haut de la zone blanche, au-dessus de
   la FAQ. Styles déplacés dans css/12-faq.css (.faq__zone-eyebrow). */

.site-footer__title {
  margin: 0;
  font-size: clamp(40px, 4.45vw, var(--text-h1)); /* 64px @1440 */
  line-height: 1.125; /* 72/64 */
  font-weight: 600; /* Manrope SemiBold (≠ --text-h1--font-weight Inter) */
  letter-spacing: var(--text-h1--letter-spacing);
  color: var(--color-white);
}

.site-footer__subtitle {
  margin: 24px auto 0;
  max-width: 508px;
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  font-weight: var(--text-body-lg--font-weight);
  color: rgba(255, 255, 255, 0.8);
}

.site-footer__media {
  margin: 59px auto 0;
  max-width: 1043px;
}

.site-footer__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Widget Calendly embarqué (monté par js/main.js quand data-calendly-url
   est renseignée).

   OBJECTIF : coller à la maquette, qui montre un widget SOMBRE fondu dans le
   pied de page noir.

   CE QUI A CHANGÉ LE 27/08. L'intégration précédente ROGNAIT : une iframe de
   1080px de large, recentrée par marge négative dans un cadre de 798px, et
   remontée de 67px, pour ne laisser voir que la carte et masquer le fond de
   page #222222 que Calendly pose autour d'elle. Deux défauts, tous deux
   constatés :

   · la carte s'élargit dès le choix de la DATE (800 → 939px, mesuré), pas au
     choix de l'heure. Le cadre restait à 798 : le panneau de gauche perdait le
     nom et le titre, la colonne des horaires était coupée à droite, et le
     sélecteur de fuseau disparaissait sous le bord. Le mécanisme censé élargir
     le cadre ne se déclenchait jamais — voir le pourquoi dans js/main.js ;
   · le cadre était plus haut que la carte, et le #222222 réapparaissait en
     bande grise sous elle.

   ON NE ROGNE PLUS RIEN. Le fond de page de Calendly est DÉRIVÉ de la couleur
   de carte : en la posant à #030303, ce fond tombe à #101010, à un point du
   #111111 du pied de page. Il devient invisible, donc il n'y a plus rien à
   masquer : l'iframe occupe tout le cadre, Calendly centre sa carte dedans, et
   aucun état ne peut plus être coupé — y compris ceux qu'il ajouterait demain.

   Géométrie mesurée (carte × hauteur totale nécessaire, pads de 66px inclus) :
     · cadre ≥ 1000px  → 2 colonnes, carte 700 de haut  → 832px
     · cadre 700→999   → 1 colonne centrée, carte 820   → 952px
     · cadre < 700px   → carte pleine largeur, 830      → 830px
   La hauteur de la carte ne dépend PAS de l'état affiché, seulement de la
   largeur : une hauteur fixe par palier suffit, et elle tient sans JS. */
.site-footer__media--calendly {
  background: #101010; /* = fond de page dérivé par Calendly, cf. js/main.js */
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* pas d'ombre portée : le widget se fond dans le footer, il ne flotte plus dessus */
}

.site-footer__calendly {
  display: block;
  width: 100%;
  max-width: none;
  height: 832px;
  border: 0;
  background: #101010;
}

/* Sous 1200px de viewport le cadre passe sous 1000px de large : Calendly
   empile ses deux colonnes et la carte gagne 120px de haut. */
@media (max-width: 1199px) {

  .site-footer__calendly { height: 952px; }
}

/* Cadre étroit : la carte passe pleine largeur et se resserre. */
@media (max-width: 839px) {

  .site-footer__calendly { height: 830px; }
}

/* --- Séparateur + bas de page ------------------------------------- */

.site-footer__divider {
  display: block;
  width: 100%;
  height: 2px;
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 61px clamp(20px, 8.33vw, 120px) 0;
}

.site-footer__social {
  display: inline-flex;
}

.site-footer__social img {
  display: block;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.site-footer__nav-link {
  /* hors tokens: rgba(255,255,255,.7) × opacité 70% mesurées Figma */
  color: rgba(255, 255, 255, 0.49);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__nav-link--strong {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__nav-link:hover {
  color: var(--color-white);
}

/* --- Wordmark géant ------------------------------------------------ */

.site-footer__wordmark {
  margin: 4px 0 0;
  padding-bottom: 48px;
  text-align: center;
  font-size: clamp(64px, 18.75vw, 270px); /* 270px @1440 */
  line-height: 1.2; /* 323/270 */
  font-weight: 700;
  letter-spacing: -0.05em; /* -13.5px @270px */
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(255, 119, 74, 0.5), rgba(103, 94, 255, 0.5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Étoiles décoratives ------------------------------------------- */

.site-footer__star {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  /* positions ancrées en bas (footer 1331px de haut dans Figma) */
}

.site-footer__star--blur-sm {
  left: 207px;
  bottom: 375px;
  width: 114px;
  height: 112px;
  filter: blur(2.5px);
}

.site-footer__star--lg {
  left: 268px;
  bottom: 206px;
  width: 183px;
  height: 180px;
}

.site-footer__star--blur-lg {
  left: 320px;
  bottom: 440px;
  width: 130px;
  height: 174px;
  object-fit: cover;
  object-position: bottom;
  filter: blur(5px);
}/* --- Responsive (adaptation proposée, maquette desktop-only) ------- */

@media (max-width: 1024px) {

  .site-footer__cta {
    padding-top: 104px;
  }

  .site-footer__media {
    margin-top: 48px;
  }

  .site-footer__star {
    transform: scale(0.7);
    transform-origin: bottom left;
  }
}
@media (max-width: 768px) {

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 40px;
  }

  .site-footer__nav {
    gap: 16px 24px;
  }

  .site-footer__wordmark {
    padding-bottom: 24px;
  }

  .site-footer__star {
    display: none;
  }
}
/* ── 90-interactions.css ── */
/* ============================================================
   90 — INTERACTIONS & ANIMATIONS (repasse design, hors maquette)
   États hover/focus/active, reveal au scroll, parallaxe (via
   js/interactions.js), accordéon FAQ. Tout est désactivable via
   prefers-reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   1. Boutons pilule (header, hero, offre, conviction, footer)
   Recette commune : micro-lift + ombre creusée + flèche qui glisse.
   ------------------------------------------------------------ */

.site-header__cta,
.hero__cta,
.offre__cta,
.conviction__cta,
.faq__whatsapp,
.faq__contact {
  transition:
    transform 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
  will-change: transform;
}

.site-header__cta:hover,
.hero__cta:hover,
.offre__cta:hover,
.conviction__cta:hover,
.faq__whatsapp:hover {
  transform: translateY(-2px);
}

.site-header__cta:active,
.hero__cta:active,
.offre__cta:active,
.conviction__cta:active,
.faq__whatsapp:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* Variante sombre : ombre plus profonde au survol */
.site-header__cta:hover,
.hero__cta--primary:hover,
.offre__cta--primary:hover,
.conviction__cta:hover {
  box-shadow:
    0px 12px 6px -8px rgba(88, 88, 88, 0.28),
    0px 12px 24px -16px rgba(51, 51, 51, 0.34),
    0px 6px 16px 0px rgba(126, 126, 126, 0.2),
    0px 12px 24px 0px rgba(134, 134, 134, 0.2),
    inset 0px 2px 0px 0px rgba(255, 255, 255, 0.16);
}

/* Flèche des CTA : glisse vers la droite au survol du bouton */
.site-header__cta img,
.hero__cta img,
.offre__cta img,
.conviction__cta-icon,
.faq__whatsapp-arrow {
  transition: transform 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* (fallback sans JS uniquement — quand le swap .has-arrow-swap est posé,
   c'est la section 10 v2 qui pilote la flèche) */
.site-header__cta:not(.has-arrow-swap):hover img,
.hero__cta:not(.has-arrow-swap):hover img,
.offre__cta:not(.has-arrow-swap):hover img,
.conviction__cta:not(.has-arrow-swap):hover .conviction__cta-icon,
.faq__whatsapp:not(.has-arrow-swap):hover .faq__whatsapp-arrow {
  transform: translateX(3px);
}

/* Focus clavier : anneau visible, cohérent partout */
.site-header__cta:focus-visible,
.hero__cta:focus-visible,
.offre__cta:focus-visible,
.conviction__cta:focus-visible,
.faq__whatsapp:focus-visible,
.site-header__link:focus-visible,
.site-footer__nav-link:focus-visible,
.site-footer__social:focus-visible,
.faq__question:focus-visible {
  outline: 2px solid var(--color-primary-vivid);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------
   2. Liens de navigation (header + footer)
   Soulignement animé de gauche à droite.
   ------------------------------------------------------------ */

.site-header__link,
.site-footer__nav-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 220ms cubic-bezier(0.2, 0.6, 0.3, 1), color 180ms ease;
  padding-bottom: 2px;
}

.site-header__link:hover,
.site-footer__nav-link:hover {
  background-size: 100% 1px;
}

.site-footer__social {
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-footer__social:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

@keyframes faq-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   5. Reveal au scroll (classes posées par js/interactions.js)
   .reveal = état initial masqué ; .reveal.is-in = visible.
   --reveal-delay permet le stagger des grilles de cards.
   ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.2, 0.6, 0.3, 1),
    transform 600ms cubic-bezier(0.2, 0.6, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  /* retours 13/08 : `will-change` maintient un contexte d'empilement même
     une fois l'animation finie — les badges des timelines (z-index 2) se
     retrouvaient piégés SOUS le filet continu de la grille. On le relâche
     à l'arrivée, ce qui est aussi la bonne pratique perf. */
  will-change: auto;
}

/* ------------------------------------------------------------
   6. Parallaxe & flottement des étoiles (hero + décor global)
   Le JS pilote --plx (scroll) ; le flottement idle est en CSS.
   L'élément garde son positionnement d'origine : translate only.
   ------------------------------------------------------------ */

.plx {
  transform: translateY(var(--plx, 0px));
  will-change: transform;
}

/* Flottement idle très lent, amplitudes désynchronisées */
@keyframes float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

/* Header : ombre légère une fois la page scrollée (classe posée en JS) */
.site-header {
  transition: box-shadow 220ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px -16px rgba(38, 41, 46, 0.18);
}/* ------------------------------------------------------------
   7. Motion réduite : tout est neutralisé
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .reveal { opacity: 1; transform: none; transition: none; }
  .plx { transform: none; }
  .site-header__cta, .hero__cta, .offre__cta, .conviction__cta,
  .faq__whatsapp, .pourquoi__card, .interieur__card, .offre__panel,
  .site-header__link, .site-footer__nav-link {
    transition: none;
  }
}


/* ============================================================
   V2 — grammaire d'animation type Volio SaaS kit
   ============================================================ */

/* ------------------------------------------------------------
   8. Entrée séquencée du hero au chargement (fade-up en cascade
   badge → titre → sous-titre → CTA → notes → dashboard)
   ------------------------------------------------------------ */

@keyframes intro-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* La pill du dashboard est centrée par translateX(-50%) : le keyframe
   générique (transform: none) écrasait ce centrage et la faisait déborder
   à droite. Elle a donc son propre keyframe, qui conserve la translation. */
@keyframes intro-up-centered {
  from { opacity: 0; transform: translate(-50%, 28px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   10. Swap de flèche des CTA (la flèche sort à droite, sa
   jumelle entre par la gauche) — wrap .cta-arrow posé par JS.
   ------------------------------------------------------------ */

.cta-arrow {
  display: inline-grid;
  overflow: hidden;
}

.cta-arrow img {
  grid-area: 1 / 1;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.cta-arrow img + img {
  transform: translateX(-18px);
  opacity: 0;
}

.has-arrow-swap:hover .cta-arrow img:first-child {
  transform: translateX(18px);
  opacity: 0;
}

.has-arrow-swap:hover .cta-arrow img + img {
  transform: translateX(0);
  opacity: 1;
}

/* La règle générique v1 « flèche qui glisse » ne doit plus bouger
   le wrap swappé (elle ciblerait les deux img) */
.has-arrow-swap:hover .cta-arrow img:first-child { /* garde la sortie */ }/* ------------------------------------------------------------
   13. Motion réduite (compléments v2)
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .cta-arrow img { transition: none; }
}

/* ── Bouton de prise de rendez-vous du pied de page ──────────
   Sert deux cas : les pages sans JS (légales), où il remplace
   l'aperçu du calendrier ; et la landing, où il est le repli
   visible si l'iframe Calendly est refusée par la CSP.
   Le pied est sombre : la marque n'a pas de variante sombre,
   elle pose un élément CLAIR dessus. */
.site-footer__media:has(> .site-footer__book){text-align:center}
.site-footer__book{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-pill, 80px);
  background:var(--color-white);
  color:var(--color-neutral-950);
  font-family:var(--font-sans);
  font-size:var(--text-small, 14px);line-height:24px;font-weight:600;
  text-decoration:none;
  transition:transform var(--motion-slow, 220ms) var(--ease-signature, cubic-bezier(.2,.6,.3,1));
}
/* `.site-footer__media img` impose width:100% à toute image du bloc — pensé
   pour l'aperçu pleine largeur. La flèche du bouton doit y échapper, sinon
   elle occupe toute la largeur du cadre et écrase le libellé. */
.site-footer__book img{display:block;flex:none;width:auto;height:auto}
.site-footer__book:hover{transform:translateY(-1px)}
/* Seule la flèche avance au survol — anatomie du bouton de marque. */
.site-footer__book img{
  transition:transform var(--motion-quick, 180ms) var(--ease-signature, cubic-bezier(.2,.6,.3,1));
}
.site-footer__book:hover img{transform:translateX(3px)}
.site-footer__book:focus-visible{outline:2px solid var(--color-white);outline-offset:3px}

/* La note qui accompagne le bouton sur les pages légales. */
.site-footer__book-note{
  margin:16px 0 40px;
  font-size:var(--text-caption, 13px);line-height:20px;
  color:rgba(255,255,255,.6)
}

/* ── Eyebrow / badge de section ──────────────────────────────
   Le composant SIGNATURE de la marque : « un seul modèle, partout,
   sur tous les supports ». Il vivait dans legal.css, donc absent de
   toute page qui ne charge pas cette feuille — le manifeste l'a
   révélé en affichant son label sans sa pilule. Sa place est ici. */


/* Badge de section — coque blanche + pilule dégradée interne + texte dégradé.
   Repris à l'identique de /accueil (.pourquoi__eyebrow). */
.eyebrow{
  margin:0;
  display:inline-flex;
  padding:3px;
  background:var(--color-white);
  border:1px solid var(--color-border-soft);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-pill);
}

.eyebrow__pill{
  display:inline-flex;
  align-items:center;
  padding:2px 24px;
  border-radius:var(--radius-pill);
  background:var(--gradient-badge);
}

.eyebrow__text{
  font-size:var(--text-eyebrow);
  line-height:var(--text-eyebrow-lh);
  letter-spacing:var(--text-eyebrow-ls);
  font-weight:var(--text-eyebrow-w);
  text-transform:uppercase;
  background:var(--gradient-signature);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* ── Tokens du bouton primaire ───────────────────────────────
   `--gradient-cta` et `--shadow-cta` sont gravés dans la mémoire de
   marque mais n'étaient déclarés nulle part : la landing peignait son
   bouton avec la valeur en dur (« hors tokens : mesuré Figma »), et
   toute page qui s'appuyait sur le token obtenait un fond transparent —
   bouton blanc sur blanc. Valeurs reprises telles quelles de la mémoire. */
:root{
  --gradient-cta: linear-gradient(90deg, #2D2D2D 0%, #000000 52.4%, #2D2D2D 100%);
  --shadow-cta:
    0 8px 4px -8px rgba(88, 88, 88, 0.24),
    0 8px 16px -16px rgba(51, 51, 51, 0.28),
    0 4px 12px 0 rgba(126, 126, 126, 0.16),
    0 8px 16px 0 rgba(134, 134, 134, 0.16),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.16);
}

/* ── Décor de page : les deux verticales et le rail hachuré ──
   « Toute page porte deux verticales continues » — mémoire de marque,
   couche composition. La règle valait déjà, mais son CSS ne vivait que
   dans la feuille de la landing : aucune autre page ne pouvait la tenir.
   Les instances (`top`) restent propres à chaque page. */

/* ── 00-decor.css ── */
/* ============================================================
   00 — Décor global de page · Figma nodes :
   5369:22818 « lignes » (1440×11171 @ y=81) : 2 lignes de grille
     verticales x=120 / x=1320 + 3 séparateurs horizontaux
     + sparkle + étoiles basses de page.
   5369:18891 / 5369:19217 / 5369:19380 « Mask group » : rails
     latéraux hachurés 120×791.
   5369:19215 « Line 350 » : séparateur y=2112.
   5369:24819 « Ellipse 1 » : halo gradient flou (~y=7259).

   Tous ces éléments sont décoratifs : aria-hidden="true" et
   pointer-events:none. Les offsets `top` en px sont valables dans
   la page assemblée (wrapper position:relative de 12552px) — voir
   sections/00-decor.html pour les points d'insertion.
   Décor masqué sous 768px (maquette desktop-only).
   ============================================================ */

/* ---- Lignes de grille verticales (5369:22819 / 5369:22820) ----
   2 traits de 1px, x=120 et x=1320, à partir de y=81 (sous le header).
   Pur CSS, aucun asset.

   LE BAS S'ANCRE, IL NE SE MESURE PAS. La hauteur était écrite en dur
   (11171px, « mesuré sur la landing, à ajuster à l'assemblage »). Ce
   décor est hors flux mais il compte dans la hauteur défilable de
   `.page` : sur toute page plus courte que 11 252px, il poussait le
   document jusque-là et ouvrait un vide blanc SOUS le pied de page —
   6 127px sur le manifeste, ~3 000 à 3 500 sur les trois articles.
   Seule la page d'accueil y échappait, parce qu'elle est plus longue.

   `bottom: 0` lie la boîte au bas de son conteneur : elle ne peut plus
   l'agrandir, et les traits courent jusqu'au pied de page — qui les
   couvre (fond opaque, z-index 1 contre 0), ce que dit déjà la
   maquette : « traverse TOUTE la page sauf le footer ».

   Le `max-height` conserve la mesure d'origine pour la seule page
   qu'elle concernait — l'accueil, où les traits s'arrêtent avant la
   FAQ. Boîte sur-contrainte (top + bottom + max-height) : c'est
   `bottom` qui cède, donc le plafond gagne là où il mord, et l'ancrage
   ailleurs. C'est le motif déjà retenu dans dossier-audit.html. */
.page-lines {
  position: absolute;
  top: 81px;            /* mesuré : départ sous la barre de nav */
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 11171px;  /* cadrage de l'accueil (mesuré Figma) */
  pointer-events: none;
  z-index: 0;
}

.page-lines::before,
.page-lines::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.page-lines::before { left: clamp(20px, 8.33vw, 120px); }
.page-lines::after  { right: clamp(20px, 8.33vw, 120px); }

/* ---- Rails latéraux hachurés (Mask groups 120×791) ------------
   Lignes horizontales ~1px (1.3px Figma) au pas de 6.5px, couleur
   #E5E5E5 (--color-media-bg), avec fondu vertical d'apparition/
   disparition (mask). Pur CSS, aucun asset. */
.side-decor {
  position: absolute;
  width: 120px;
  height: 791px;        /* hauteur par défaut, surcharger par instance si besoin */
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-media-bg) 0 1px,
    transparent 1px 6.5px
  );
  /* fondu mesuré Figma : 0 → 50% @33.5% → 100% @48% → 50% @68.8% → 0 */
  -webkit-mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 8.85%, rgba(0, 0, 0, 0.5) 33.47%, #000 48%, rgba(0, 0, 0, 0.5) 68.8%, transparent 100%);
}

.side-decor--left  { left: 0; }
.side-decor--right { right: 0; }

/* Instances de la maquette */
.side-decor--hero  { top: 64px; }    /* 5369:18891 — zone hero, côté gauche */
.side-decor--zone2 { top: 1870px; }

/* ---- Repli mobile des deux décors ------------------------------
   Ces décors sont posés en absolu sur les coordonnées de la maquette
   1440 : `.page-lines` tient ses verticales sur la gouttière et court
   sur une hauteur écrite en dur (11171px), `.side-decor` démarre à un
   `top` mesuré au pixel. Une fois la page repliée, plus rien ne
   correspond : le rail hachuré tombe en plein paragraphe, et les deux
   verticales passent DANS le texte — la gouttière mobile (32px) est
   plus étroite que la marge du corps de page.

   La règle vivait dans css/accueil.css, elle ne protégeait donc que la
   landing. Or les deux décors sont servis par main.css et repris par
   le manifeste et les trois articles : eux les recevaient en pleine
   colonne de lecture. Elle est remontée ici, avec les composants
   qu'elle corrige — c'est la leçon de l'eyebrow resté dans legal.css. */

@media (max-width: 1024px) {

  .side-decor { display: none; } /* rails 120px trop larges pour tablette */
}

@media (max-width: 768px) {

  .page-lines { display: none; } /* maquette desktop-only : décor retiré sur mobile */
}
/* ── FAQ ────────────────────────────────────────────────────
   Bloc partagé depuis que le manifeste le reprend. Les accordéons
   sont animés par /a/js/main.js, que les deux pages chargent. */
 /* bande accolée au bas de Case Studies */
.faq             { margin-top: 100px; }
/* ── 12-faq.css ── */
/* ============================================================
   12-faq — « FAQ » · Figma node 7206:7692 (v2, 1122×590 @1440)
   Accordéon <details>/<summary> natif, sans JS.
   Héberge aussi l'eyebrow de zone « LE FUTUR COMMENCE MAINTENANT »
   (Figma 7206:7688, parenté au frame Footer v2 mais placé au-dessus
   de la FAQ dans la maquette).
   ============================================================ */

.faq {
  font-family: var(--font-sans);
  background: var(--color-white);
  padding-inline: clamp(20px, 8.33vw, 120px);
}

.faq__container {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  /* retours 13/08 : les questions collaient au bloc de gauche (16px de
     gouttière résiduelle) — la colonne de droite est rendue élastique et
     une vraie gouttière de 88px est posée. */
  grid-template-columns: minmax(280px, 415px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: start;
  /* hors tokens: mesuré Figma — le nœud FAQ démarre à x=151 (120 + 31)
     et finit à x=1273 (1320 − 47) */
  padding: 0 64px; /* retour 13/08 : padding latéral augmenté */
}

/* --- Colonne gauche : titre + pills + carte photo --------------- */

/* Badge « QUESTIONS FRÉQUENTES » : pill blanche 218×34 + pill
   dégradée 210×28 + texte en dégradé coral→violet */
.faq__eyebrow {
  display: inline-flex;
  margin: 0;
  padding: 3px 4px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.faq__eyebrow-inner {
  display: inline-flex;
  align-items: center;
  padding: 2px 24px; /* retour 13/08 : + de padding latéral (7px avant) */
  border-radius: inherit;
  background: linear-gradient(90deg, #fff1ed, #f0efff); /* hors tokens: mesuré Figma */
}

.faq__eyebrow-text {
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow--line-height);
  font-weight: var(--text-eyebrow--font-weight);
  letter-spacing: var(--text-eyebrow--letter-spacing);
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(90deg, var(--color-accent-coral), var(--color-primary-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq__title {
  margin: 19px 0 0;
  font-size: clamp(32px, 4.5vw, var(--text-h2));
  line-height: 1.04; /* 56/54 */
  font-weight: var(--text-h2--font-weight);
  letter-spacing: var(--text-h2--letter-spacing);
  color: #2d2d2d; /* hors tokens: mesuré Figma */
}

/* Pill « → D’autres questions? Contactez-nous. » */
.faq__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 21px 0 0;
  min-height: 34px;
  padding: 6px 16px 6px 10px;
  background: var(--color-white);
  border: 1px solid rgba(229, 231, 233, 0.5); /* --color-border @50% */
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  font-weight: var(--text-body-sm--font-weight);
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
}

.faq__more-link {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.faq__more-link:hover {
  text-decoration: underline;
}

/* Carte photo + bouton WhatsApp en overlay */
.faq__media {
  position: relative;
  margin: 68px 0 0;
  width: min(415px, 100%);
  aspect-ratio: 415 / 291;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.faq__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* miroir horizontal appliqué dans Figma */
}

/* v2 : overlay dégradé coral→violet @20% ajouté sur la photo dans la
   maquette (Figma 7206:7707) — recréé en CSS, sous le bouton WhatsApp */
.faq__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255, 119, 74, 0.2), rgba(103, 94, 255, 0.2)); /* --color-accent-coral / --color-primary-vivid @20% */
  pointer-events: none;
}

.faq__whatsapp {
  position: absolute;
  z-index: 2; /* au-dessus de l'overlay dégradé v2 */
  left: 20.5%;  /* 85/415 mesuré Figma */
  top: 43.3%;   /* 126/291 mesuré Figma */
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content; /* retour 13/08 : le libellé tient sur une ligne */
  max-width: calc(100% - 40px);
  height: 48px;
  padding: 5px 14px 5px 5px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16);
  text-decoration: none;
}

.faq__whatsapp-badge {
  flex: none;
}

.faq__whatsapp-label {
  white-space: nowrap; /* retour 13/08 : pas de retour à la ligne */
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  font-weight: var(--text-small--font-weight);
  color: var(--color-ink);
}

.faq__whatsapp-arrow {
  flex: none;
  margin-left: auto;
}

/* --- Colonne droite : accordéon ---------------------------------- */

.faq__list {
  margin-top: 24px; /* hors tokens: 1re question à y+66 du haut de section (Figma) */
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 41px 0 20px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question-text {
  font-size: var(--text-h6);
  line-height: var(--text-h6--line-height);
  font-weight: var(--text-h6--font-weight);
  letter-spacing: var(--text-h6--letter-spacing);
  color: var(--color-ink);
}

.faq__toggle {
  flex: none;
  transition: transform 0.25s ease;
}

.faq__item[open] .faq__toggle {
  transform: rotate(45deg);
}

/* Réponse dépliée par le <details> natif — retours 13/08 : elle existait
   mais était vide, le « + » semblait donc ne rien faire. */
.faq__answer {
  padding: 0 56px 28px 0;
  font-size: var(--text-body);
  line-height: 26px; /* confort de lecture sur 3-4 lignes */
  color: rgba(38, 41, 46, 0.7); /* --color-ink @70% */
}

.faq__answer p {
  margin: 0;
}

.faq__answer strong { font-weight: 600; color: var(--color-ink); }
.faq__answer em     { font-style: italic; }

/* la question ouverte se distingue du reste de la liste */
.faq__item[open] .faq__question-text { color: var(--color-ink-strong, var(--color-ink)); }

/* ------------------------------------------------------------
   4. Accordéon FAQ : rotation du picto + apparition de la réponse
   ------------------------------------------------------------ */

.faq__question {
  cursor: pointer;
}

.faq__question img,
.faq__question .faq__question-icon {
  transition: transform 240ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.faq__item[open] .faq__question img,
.faq__item[open] .faq__question .faq__question-icon {
  transform: rotate(45deg);
}

.faq__item[open] .faq__answer {
  animation: faq-slide 240ms cubic-bezier(0.2, 0.6, 0.3, 1) both;
}
/* Renvoi de fin de réponse : le lien vers l'article qui développe le sujet.
   `.faq__answer p` a une marge nulle — ce renvoi pose donc la sienne, et
   c'est le SEUL endroit de la réponse où un lien est attendu. */
.faq__answer .faq__read-more {
  margin-top: 12px;
}

.faq__answer a {
  color: var(--color-primary-vivid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(103, 94, 255, 0.35);
  transition: text-decoration-color var(--motion-quick) var(--ease-signature);
}

.faq__answer a:hover { text-decoration-color: currentColor; }

/* ---- Repli mobile ----------------------------------------------
   `.faq__container` est une grille de deux colonnes dont la première
   a un plancher de 280px, plus 88px de gouttière et 64px de padding.
   Sous ~700px de large, la colonne de gauche prend tout ce qui reste
   et celle des questions tombe à ZÉRO de large. Les <details> restent
   dans le flux, ils gardent leur hauteur : la FAQ ne disparaissait
   donc pas, elle laissait un trou blanc de 2 660px — et le bloc de
   gauche débordait par la droite.

   Ces paliers vivaient dans css/accueil.css : la landing était
   couverte, le manifeste — qui reprend le même bloc depuis main.css —
   servait le trou. Ils sont remontés ici, où vit le composant. */

@media (max-width: 1024px) {

  .faq__container {
    padding: 0;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
    column-gap: 48px;
  }
}

@media (max-width: 768px) {

  .faq__container {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .faq__media { margin-top: 40px; }

  .faq__list { margin-top: 0; }

  .faq__item:first-child .faq__question { padding-top: 0; }

  .faq__question { padding-top: 24px; }
}

/* Sous 420px, le libellé du bouton WhatsApp est insécable et la carte
   photo n'est plus assez large pour le porter à 20,5% du bord : il
   sortait du cadre. On le recentre et on lui rend la largeur. */
@media (max-width: 420px) {

  .faq__whatsapp {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 20px);
    padding-right: 12px;
  }

  .faq__whatsapp-label { font-size: var(--text-caption); }
}

/* Modificateur de la page d'accueil : y détacher la bande de la section qui
   la précède.

   Retour d'intégration du 26/08 : « ajouter une marge entre les deux
   sections ». Elles se touchaient à 0px — et surtout, le séparateur de
   CLÔTURE de la section « conviction » déborde de 24px sous sa propre
   section : sans marge, ce filet venait barrer la bande grise à 24px de son
   bord. C'est ce débordement qui rendait la collision visible.

   120px = ces 24px à laisser passer, plus les 96px de respiration de la
   grille (--space-section). La bande retrouve ainsi 96px de blanc au-dessus,
   pour 100px en dessous jusqu'à la FAQ.

   Le débordement du séparateur reste, lui, à corriger dans .conviction : ceci
   le contourne, ne le répare pas. */
.reads--detachee { margin-block-start: 120px; }

/* ------------------------------------------------------------
   « Pour aller plus loin » — la bande de renvoi vers les articles.

   PARTAGÉE, et c'est tout l'intérêt : la page d'accueil la pose
   avant la FAQ, chaque article la pose en pied de page. Un seul
   composant, donc un seul endroit à corriger — un nouvel article
   n'a rien à redessiner. C'est la leçon de l'eyebrow resté coincé
   dans legal.css jusqu'à manquer au manifeste.

   Fond `surface` entre deux sections blanches : la rupture est
   volontaire, elle signale un contenu d'une autre nature.
   ------------------------------------------------------------ */

.reads {
  font-family: var(--font-sans);
  background: var(--color-surface);
  padding: var(--space-section) clamp(20px, 8.33vw, 120px);
}

.reads__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.reads__title {
  margin: 0 0 var(--space-8);
  font-size: var(--text-eyebrow);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-ls);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.reads__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reads__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    border-color var(--motion-slow) var(--ease-signature),
    transform var(--motion-slow) var(--ease-signature),
    box-shadow var(--motion-slow) var(--ease-signature);
}

.reads__card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-pill);
}

.reads__kicker {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  font-weight: var(--text-caption-w);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.reads__label {
  margin: 0;
  font-size: var(--text-h5);
  line-height: 30px;
  letter-spacing: var(--text-h5-ls);
  font-weight: 600;
  color: var(--color-title);
  text-wrap: balance;
}

.reads__desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 24px;
  color: var(--color-ink-soft);
}

/* Date de parution. `margin-top: auto` la colle au bas de la carte : les
   trois chapôs n'ont pas la même longueur, les trois dates s'alignent
   quand même. */
.reads__meta {
  margin: auto 0 0;
  padding-top: 16px;
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh, 20px);
  color: var(--color-ink-soft);
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .reads__card { transition: none; }
  .reads__card:hover { transform: none; }
}


/* ── Bouton WhatsApp flottant ─────────────────────────────────
   Présent sur toutes les pages publiques, posé en fixe au coin bas
   droit. C'est le seul élément du site qui suit le défilement : il
   reste donc discret (un disque, pas de libellé, pas d'animation
   d'appel) et il s'efface derrière l'en-tête collant s'ils devaient
   se croiser.

   Le vert est celui de WhatsApp, pas celui de la marque : sur ce
   geste, la reconnaissance immédiate prime sur la palette — c'est
   la couleur qui dit où mène le clic.

   Le libellé n'est pas affiché mais il est porté par `aria-label` :
   un lecteur d'écran annonce la destination, et le `title` la donne
   au survol. La cible fait 56px, au-dessus des 44px recommandés au
   tactile, et le retrait bas suit `safe-area-inset` pour ne pas
   passer sous la barre d'accueil des iPhone. */

.wa-flottant {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: calc(clamp(16px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: #25d366; /* hors tokens : vert de marque WhatsApp */
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition:
    transform var(--motion-base, 200ms) var(--ease-signature, cubic-bezier(.2, .6, .3, 1)),
    box-shadow var(--motion-base, 200ms) var(--ease-signature, cubic-bezier(.2, .6, .3, 1));
}

.wa-flottant img {
  display: block;
  width: 30px;
  height: 30px;
}

.wa-flottant:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    0 3px 8px rgba(0, 0, 0, 0.14);
}

.wa-flottant:active { transform: translateY(0); }

.wa-flottant:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

@media (max-width: 768px) {

  .wa-flottant { width: 52px; height: 52px; }
  .wa-flottant img { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {

  .wa-flottant { transition: none; }
  .wa-flottant:hover { transform: none; }
}