/* =========================================================================
   WISY SAFETY — Page « Formation BEPS — Premiers Secours »
   -------------------------------------------------------------------------
   Styles propres à la page. Le socle (tokens du site, boutons, header, footer)
   est inline dans la page, identique aux autres pages du site. Composants
   propres à cette page préfixés `.beps-` (même logique que `.nac-` sur
   formation-nacelles-elevatrices.html — voir css/formation-nacelles.css).

   Upgrade visuel premium 2026 (v2) : palette étendue dérivée de la charte,
   ombres teintées en couches, hero multi-layers, chaîne des secours en
   scroll pinné (desktop uniquement, dégradée proprement ailleurs), système
   de motion cohérent (reveal texte par masque, tilt 3D léger, CTA
   magnétique, compteurs). Tout reste piloté par transform/opacity et
   respecte prefers-reduced-motion — voir section 12.

   Sommaire
     0. Tokens (palette étendue, ombres, profondeur, typographie)
     1. Utilitaires (icônes, labels, titres, accessibilité, motion)
     2. Hero (couches, chips flottantes, texte-reveal)
     3. Chaîne des secours (signature — scroll pinné desktop)
     4. Onglets « Face à une urgence »
     5. Accordéons (programme & FAQ) + rail de progression du programme
     6. Timeline méthode pédagogique
     7. Pourquoi Wisy Safety (badges ronds + métriques + tilt)
     8. Informations pratiques
     9. CTA final
    10. Micro-interactions (CTA magnétique, flèches, underline)
    11. Responsive
    12. Reduced motion / fallback sans JS
   ========================================================================= */

/* ==================== 0. TOKENS ==================== */
:root {
  /* --- Base (identiques aux autres pages dédiées) --- */
  --color-primary: #1F6F64;    /* épinette */
  --color-secondary: #2F7D8C;  /* sarcelle */
  --color-accent: #48D6C2;     /* turquoise — CTA / accents, ≤10% des surfaces */
  --color-hover: #3FA69B;      /* brume */
  --color-surface: #F4FAF9;    /* crème */
  --color-muted: #5E6D6A;      /* granit */
  --color-ink: #1B2D28;        /* noir-jais */

  --color-line: rgba(94, 109, 106, .24);
  --color-line-soft: rgba(94, 109, 106, .14);
  --color-tint: #EAF3F1;
  --color-paper: #FFFFFF;

  /* --- Palette étendue (dérivée des 7 couleurs officielles — jamais de teinte étrangère) --- */
  --epinette-900: #123B35;     /* épinette très sombre — fonds dégradés profonds */
  --epinette-700: #185A51;     /* épinette sombre — stops de dégradé */
  --epinette-100: #E3F1EE;     /* épinette très clair — surfaces alternatives au blanc pur */
  --sarcelle-700: #234F58;     /* sarcelle sombre */
  --turquoise-soft: rgba(72, 214, 194, .14);
  --turquoise-glow: rgba(72, 214, 194, .45);

  /* Dégradés de marque (fonds de section, cartes sombres) */
  --gradient-ink: linear-gradient(160deg, #1B2D28 0%, #123B35 48%, #185A51 100%);
  --gradient-mesh-light: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(31, 111, 100, .10), transparent 60%),
                          radial-gradient(ellipse 55% 45% at 100% 20%, rgba(47, 125, 140, .08), transparent 60%),
                          radial-gradient(ellipse 50% 40% at 30% 100%, rgba(72, 214, 194, .06), transparent 60%);
  --gradient-card: linear-gradient(160deg, #FFFFFF 0%, #F4FAF9 100%);

  /* Ombres teintées en couches (jais + épinette, jamais du gris neutre pur) : c'est ce qui donne
     la sensation de profondeur/« premium » plutôt qu'un simple box-shadow générique. */
  --shadow-xs: 0 1px 2px rgba(18, 30, 27, .06);
  --shadow-sm: 0 1px 2px rgba(18, 30, 27, .04), 0 8px 20px -10px rgba(18, 30, 27, .14);
  --shadow-md: 0 2px 6px rgba(18, 30, 27, .05), 0 16px 32px -12px rgba(18, 30, 27, .18);
  --shadow-lg: 0 4px 10px rgba(18, 30, 27, .05), 0 28px 56px -20px rgba(18, 30, 27, .22), 0 8px 24px -8px rgba(31, 111, 100, .12);
  --shadow-glow: 0 20px 60px -16px rgba(72, 214, 194, .35);
  --shadow-inset-line: inset 0 0 0 1px rgba(255, 255, 255, .06);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --container-width: 1560px;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-lg: clamp(3rem, 6vw, 5rem);
  --space-xl: clamp(4.5rem, 9vw, 8rem);
  --gap: clamp(1.25rem, 2.4vw, 2rem);

  /* Typographie éditoriale : titres plus grands, chiffres XXL dédiés */
  --fs-h1: clamp(2.6rem, 1.3rem + 5.6vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.35rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-xxl: clamp(3.5rem, 2rem + 6vw, 6.5rem);   /* chiffres-signature (15, 70 €, modules…) */

  --header-offset: 6.5rem;
  --chain-progress: 0;
}

html { scroll-padding-top: var(--header-offset); }
body { background: var(--color-surface); }
.beps-main { overflow-x: clip; position: relative; }
.beps-main ol, .beps-bc ol { margin: 0; padding: 0; list-style: none; }

/* ==================== 1. UTILITAIRES ==================== */
.beps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.beps-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.beps-skip { position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .75rem 1.1rem; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-surface); font-weight: 600; transition: top var(--motion-fast) var(--ease-premium); }
.beps-skip:focus { top: 1rem; }

.beps-section { padding-block: var(--space-xl); position: relative; }
.beps-section--tint { background: var(--color-tint); }
.beps-section--mesh { background: var(--color-surface); }
.beps-section--mesh::before { content: ""; position: absolute; inset: 0; background: var(--gradient-mesh-light); pointer-events: none; z-index: 0; }
.beps-section--mesh > .container, .beps-section--mesh > * { position: relative; z-index: 1; }
.beps-section__head { max-width: 62ch; margin-bottom: var(--space-lg); }

.beps-label { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font-family: var(--font-titre); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary); }
.beps-label::before { content: ""; order: 2; width: 2.25rem; height: 1px; background: currentColor; opacity: .5; }
.beps-label > span:not(.beps-label__no) { order: 1; }
.beps-label__no { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.beps-label__no::after { content: "—"; margin-left: .75rem; opacity: .5; }
.beps-label--on-dark { color: var(--color-accent); }

.beps-title { font-size: var(--fs-h2); max-width: 20ch; letter-spacing: -.015em; }
.beps-lead { font-size: var(--fs-lead); color: var(--color-muted); max-width: 62ch; }
.beps-body { font-size: var(--fs-body); color: var(--color-muted); max-width: 60ch; }

.beps-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.beps-split--sticky .beps-split__head { position: sticky; top: calc(var(--header-offset) + .5rem); }

.beps-inline-link { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; text-decoration: underline; text-decoration-color: var(--color-line); transition: color var(--motion-fast) var(--ease), text-decoration-color var(--motion-fast) var(--ease); }
.beps-inline-link:hover, .beps-inline-link:focus-visible { color: var(--color-hover); text-decoration-color: currentColor; }

.beps-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Reveal texte par masque : le titre est ENVELOPPÉ (overflow:hidden) et son contenu translate
   depuis le bas. Contrairement à .reveal (fade), c'est réservé aux quelques titres signature
   (hero, chaîne, CTA) — jamais généralisé à tout le texte (voir interdictions du brief). */
.beps-mask { overflow: hidden; display: inline-block; vertical-align: top; }
.beps-mask__inner { display: inline-block; transform: translateY(110%); transition: transform 720ms var(--ease-premium); transition-delay: var(--d, 0s); }
.beps-mask.in .beps-mask__inner { transform: translateY(0); }

/* Fil d'Ariane */
.beps-bc { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.beps-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--color-muted); }
.beps-bc li:not(:last-child)::after { content: "/"; margin-left: .45rem; opacity: .5; }
.beps-bc a { transition: color var(--motion-fast) var(--ease); }
.beps-bc a:hover, .beps-bc a:focus-visible { color: var(--color-primary); }
.beps-bc [aria-current] { color: var(--color-ink); font-weight: 600; }

/* Ligne « registre des formations » (plan technique Wisy) */
.beps-registry { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.5rem 0 2.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-line-soft); font-family: var(--font-titre); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.beps-registry__item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.beps-registry__item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.beps-registry__sep { flex: 1 0 24px; min-width: 24px; height: 1px; background: repeating-linear-gradient(to right, var(--color-line) 0 4px, transparent 4px 8px); }

/* ==================== 2. HERO — multi-layers ==================== */
.beps-hero { padding-bottom: calc(var(--space-xl) + 3rem); position: relative; isolation: isolate; }

/* Layer 1 — fond dégradé mesh (radial, très bas en opacité, dérivé de la charte) */
.beps-hero__bg { position: absolute; inset: 0; z-index: -3; background: var(--gradient-mesh-light); }
/* Layer 2 — grille technique très discrète (clin d'œil au « plan technique Wisy » du parcours d'inscription) */
.beps-hero__grid-bg { position: absolute; inset: 0; z-index: -2; opacity: .5;
  background-image: radial-gradient(circle, rgba(94, 109, 106, .16) 1px, transparent 1px);
  background-size: 26px 26px; mask-image: linear-gradient(180deg, black, transparent 85%); }
/* Layer 3 — forme organique de la charte (épinette/sarcelle), en amont du contenu */
.beps-hero__blob { position: absolute; top: -12%; right: -8%; width: min(52vw, 760px); aspect-ratio: 1; z-index: -1; opacity: .5; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(47, 125, 140, .16), transparent 62%),
              radial-gradient(circle at 65% 70%, rgba(31, 111, 100, .14), transparent 60%); filter: blur(4px); }

.beps-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; border-radius: 999px; background: var(--color-paper); border: 1px solid var(--color-line-soft); box-shadow: var(--shadow-xs); font-family: var(--font-titre); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--color-primary); margin-bottom: 1.5rem; }
.beps-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px var(--turquoise-soft); }

.beps-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.beps-hero__title { font-size: var(--fs-h1); max-width: 15ch; letter-spacing: -.02em; }
.beps-hero__sep { color: var(--color-muted); font-weight: 500; }
.beps-hero__accroche { font-family: var(--font-titre); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.6rem); color: var(--color-primary); margin: .6rem 0 1.1rem; }

/* Chiffres du hero : XXL, typographie comme élément graphique (brief §8) */
.beps-stats { display: flex; gap: clamp(1.25rem, 2.6vw, 2rem); margin: 2rem 0; }
.beps-stats__item { position: relative; padding-left: 1.1rem; }
.beps-stats__item::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--color-accent), transparent); }
.beps-stats__item dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .2rem; }
.beps-stats__item dd { margin: 0; font-family: var(--font-titre); font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1; color: var(--color-ink); letter-spacing: -.02em; }
.beps-stats__item dd .unit { font-size: .42em; font-weight: 700; color: var(--color-muted); margin-left: .15em; }

.beps-hero__media { position: relative; }
/* Layer 4 — contour décalé, sort du cadre pour créer un écart de profondeur derrière la photo */
.beps-hero__outline { position: absolute; inset: -7% -10% auto auto; width: 82%; aspect-ratio: 1; border: 1.5px solid var(--color-line); border-radius: var(--radius-xl); z-index: -1; }
.beps-hero__ring { position: absolute; left: -8%; bottom: -10%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(72, 214, 194, .22), transparent 68%); filter: blur(2px); }
/* Layer 5 — la photo elle-même : cadre qui déborde légèrement de la colonne (brief §11 : les
   images peuvent dépasser d'un container) + reveal par clip-path au scroll-in */
.beps-hero__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); margin-right: clamp(-1.5rem, -4vw, -2.5rem);
  clip-path: inset(0 0 0 0 round var(--radius-xl)); }
.beps-hero__img { width: 100%; height: auto; aspect-ratio: 1024 / 684; object-fit: cover; transform: scale(1.08); transition: transform 1.1s var(--ease-premium); }
.beps-hero__media.in .beps-hero__img { transform: scale(1); }
.beps-hero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(27, 45, 40, .18), transparent 45%); pointer-events: none; }

/* Layer 6 — la fiche « chaîne des secours » devient une carte FLOTTANTE qui chevauche la photo
   (profondeur par superposition, pas simplement empilée en dessous) */
.beps-fiche { position: relative; margin-top: -3.25rem; margin-left: clamp(1rem, 4vw, 2.25rem); margin-right: clamp(1rem, 3vw, 1.5rem); padding: 1.25rem 1.4rem 1.4rem; border-radius: var(--radius-md); background: var(--gradient-ink); color: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-lg), var(--shadow-inset-line); z-index: 1; }
.beps-fiche__head { font-family: var(--font-titre); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 250, 249, .6); margin: 0 0 1.1rem; }
.beps-fiche__pulse { position: absolute; left: 0; right: 0; top: 2.1rem; height: 40px; color: var(--color-accent); opacity: .38; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-dasharray: 260; stroke-dashoffset: 260; }
.beps-fiche.in .beps-fiche__pulse { animation: beps-draw 1.6s var(--ease-premium) .3s forwards; }
@keyframes beps-draw { to { stroke-dashoffset: 0; } }
.beps-fiche__steps { position: relative; display: flex; justify-content: space-between; gap: .5rem; }
.beps-fiche__steps li { display: flex; flex-direction: column; gap: .35rem; font-family: var(--font-titre); font-weight: 600; font-size: .86rem; }
.beps-fiche__no { font-size: .68rem; color: rgba(244, 250, 249, .5); font-weight: 600; }

/* Micro-élément flottant additionnel (« couche 6 » du brief) : pastille certificat, en profondeur
   au-dessus du coin de la photo. */
.beps-hero__float { position: absolute; top: 6%; left: -6%; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem .7rem .7rem; border-radius: 999px; background: var(--color-paper); box-shadow: var(--shadow-md); }
.beps-hero__float-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--turquoise-soft); color: var(--color-primary); display: grid; place-items: center; }
.beps-hero__float-ic .ic { width: 18px; height: 18px; }
.beps-hero__float dl { margin: 0; line-height: 1.15; }
.beps-hero__float dt { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.beps-hero__float dd { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: .86rem; color: var(--color-ink); }

/* Indicateur de scroll (brief §4 : « indicateur de scroll ») */
.beps-scrollcue { display: none; }
@media (min-width: 900px) {
  .beps-scrollcue { display: flex; flex-direction: column; align-items: center; gap: .5rem; position: absolute; left: 50%; bottom: -1.5rem; transform: translateX(-50%); color: var(--color-muted); }
  .beps-scrollcue__line { width: 1px; height: 34px; background: linear-gradient(180deg, var(--color-line), transparent); position: relative; overflow: hidden; }
  .beps-scrollcue__line::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--color-accent); animation: beps-scrollcue 2.2s var(--ease) infinite; }
  @keyframes beps-scrollcue { 0% { top: -100%; } 60%, 100% { top: 100%; } }
  .beps-scrollcue__t { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
}

/* ==================== 3. CHAÎNE DES SECOURS (signature) ==================== */
.beps-chain { position: relative; }
.beps-chain::before { content: ""; position: absolute; inset: 0; background: var(--gradient-mesh-light); z-index: -1; }

.beps-chain__rail { position: relative; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Le rail latéral numéroté n'existe que pour le mode pinné (desktop) : caché par défaut. */
.beps-chain__rail-nav { display: none; }
.beps-chain__track { position: absolute; left: 0; right: 0; top: calc(clamp(1.5rem, 3vw, 2.5rem) + 17px); height: 3px; border-radius: 3px; background: var(--color-line); overflow: hidden; }
.beps-chain__fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transform: scaleX(var(--chain-progress, 0)); transform-origin: left center; transition: transform 120ms linear; box-shadow: 0 0 12px 1px var(--turquoise-glow); }
.beps-chain__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); }
.beps-chain__step { position: relative; padding: 1.75rem 1.5rem 2rem; border-radius: var(--radius-lg); transition: transform 520ms var(--ease-premium), box-shadow 520ms var(--ease-premium), background-color 520ms var(--ease); }
.beps-chain__dot { position: absolute; top: -1.75rem; left: 1.5rem; width: 34px; height: 34px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-line); display: grid; place-items: center; transition: border-color var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.beps-chain__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-line); transition: background-color var(--motion-base) var(--ease); }
.beps-chain__step.in .beps-chain__dot { border-color: var(--color-accent); box-shadow: 0 0 0 6px var(--turquoise-soft); }
.beps-chain__step.in .beps-chain__dot::after { background: var(--color-accent); }
.beps-chain__step.in { background: var(--color-paper); box-shadow: var(--shadow-md); }
.beps-chain__no { display: block; font-family: var(--font-titre); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem); line-height: 1; letter-spacing: -.02em; color: var(--color-line); margin: 0 0 .85rem; transition: color 520ms var(--ease-premium), -webkit-text-stroke-color 520ms var(--ease-premium); -webkit-text-stroke: 1.5px transparent; }
.beps-chain__step.in .beps-chain__no { color: transparent; -webkit-text-stroke: 1.5px var(--color-primary); }
.beps-chain__ic { color: var(--color-primary); margin-bottom: .6rem; width: 1.9rem; height: 1.9rem; }
.beps-chain__step h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.beps-chain__step p { color: var(--color-muted); margin-bottom: 1rem; }
.beps-chain__list li { position: relative; padding-left: 1.3rem; font-size: .92rem; color: var(--color-ink); margin-bottom: .5rem; }
.beps-chain__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* --- Mode « scroll pinné » : activé par JS uniquement sur desktop + pointeur fin + sans
   prefers-reduced-motion (voir initChain). Sans JS ou hors de ces conditions, la mise en page
   ci-dessus (grille statique 3 colonnes) reste pleinement fonctionnelle et accessible. --- */
.beps-chain--pinned .beps-chain__rail { height: 320vh; }
.beps-chain--pinned .beps-chain__stage { position: sticky; top: var(--header-offset); height: calc(100vh - var(--header-offset)); min-height: 480px; display: flex; align-items: center; overflow: hidden; }
.beps-chain--pinned .beps-chain__track { position: absolute; left: 8.5rem; right: 2rem; top: 50%; margin-top: -60px; }
.beps-chain--pinned .beps-chain__rail-nav { display: flex; flex-direction: column; gap: 1.75rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; }
.beps-chain--pinned .beps-chain__rail-nav li { display: flex; align-items: center; gap: .75rem; font-family: var(--font-titre); font-weight: 700; font-size: .82rem; color: var(--color-line); transition: color 420ms var(--ease); }
.beps-chain--pinned .beps-chain__rail-nav .no { font-size: 1.05rem; }
.beps-chain--pinned .beps-chain__rail-nav li.is-active { color: var(--color-primary); }
.beps-chain--pinned .beps-chain__rail-nav li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease); }
.beps-chain--pinned .beps-chain__rail-nav li.is-active::before { background: var(--color-accent); box-shadow: 0 0 0 5px var(--turquoise-soft); }
.beps-chain--pinned .beps-chain__steps { position: relative; display: block; padding-left: 8.5rem; width: 100%; min-height: 320px; }
.beps-chain--pinned .beps-chain__step { position: absolute; inset: 0; left: 8.5rem; padding: 0 3rem 0 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateX(28px); pointer-events: none; transition: opacity 620ms var(--ease-premium), transform 620ms var(--ease-premium); background: none; box-shadow: none; }
.beps-chain--pinned .beps-chain__step.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.beps-chain--pinned .beps-chain__dot { display: none; }
.beps-chain--pinned .beps-chain__no { font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); margin-bottom: 1rem; }
.beps-chain--pinned .beps-chain__step.is-active .beps-chain__no { color: transparent; -webkit-text-stroke: 1.5px var(--color-primary); }

/* ==================== 4. ONGLETS « FACE À UNE URGENCE » ==================== */
.beps-tabs__list { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.beps-tabs__tab { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--color-line); background: var(--color-paper); font-family: var(--font-titre); font-size: .88rem; font-weight: 600; color: var(--color-muted); transition: border-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease), background-color var(--motion-base) var(--ease), transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-premium); }
.beps-tabs__tab .ic { width: 1.15rem; height: 1.15rem; }
.beps-tabs__tab:hover { color: var(--color-primary); border-color: var(--color-hover); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.beps-tabs__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); box-shadow: var(--shadow-sm); }
.beps-tabs__panels { position: relative; background: var(--gradient-card); border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3.5vw, 3rem); box-shadow: var(--shadow-md); overflow: hidden; }
.beps-tabs__panels::before { content: ""; position: absolute; top: -40%; right: -10%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--turquoise-soft), transparent 68%); pointer-events: none; }
.beps-tabs__panel[hidden] { display: none; }
.beps-tabs__panel { position: relative; animation: beps-panel-in 420ms var(--ease-premium); }
@keyframes beps-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.beps-tabs__kicker { font-family: var(--font-titre); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); background: var(--color-ink); display: inline-block; padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1rem; }
.beps-tabs__panel > .beps-tabs__kicker { color: var(--brume); }   /* sinon « .beps-tabs__panel > p » (gris) l'emporte : 2,67:1 sur fond sombre */
.beps-tabs__panel h3 { font-size: var(--fs-h3); margin-bottom: .75rem; }
.beps-tabs__panel > p { color: var(--color-muted); max-width: 62ch; position: relative; }
.beps-tabs__list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; position: relative; }
.beps-tabs__list li { padding: .5rem .95rem; border-radius: var(--radius-sm); background: var(--color-tint); font-size: .86rem; font-weight: 600; color: var(--color-primary); }

/* ==================== 5. ACCORDÉONS (programme & FAQ) ==================== */
.beps-acc__item { border-bottom: 1px solid var(--color-line-soft); transition: background-color 420ms var(--ease); }
.beps-acc__item:first-child { border-top: 1px solid var(--color-line-soft); }
.beps-acc__h { margin: 0; }
.beps-acc__btn { display: flex; align-items: center; width: 100%; gap: 1.25rem; padding: 1.5rem .5rem; text-align: left; font-family: var(--font-titre); }
.beps-acc__no { display: flex; align-items: baseline; gap: .35rem; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); color: var(--color-line); min-width: 4.25rem; letter-spacing: -.02em; transition: color 420ms var(--ease); }
.beps-acc__no small { font-size: .34em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; display: block; color: var(--color-muted); }
.beps-acc__ic-wrap { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--color-tint); color: var(--color-primary); transition: background-color 420ms var(--ease), color 420ms var(--ease), transform 420ms var(--ease-premium); }
.beps-acc__ic-wrap .ic { width: 21px; height: 21px; }
.beps-acc__t { flex: 1; font-weight: 600; font-size: 1.05rem; color: var(--color-ink); }
.beps-acc--faq .beps-acc__t { font-size: 1rem; }
.beps-acc__ic { position: relative; flex-shrink: 0; width: 22px; height: 22px; }
.beps-acc__ic::before, .beps-acc__ic::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-primary); transition: transform var(--motion-base) var(--ease-premium); }
.beps-acc__ic::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.beps-acc__ic::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.beps-acc__item.is-open .beps-acc__ic::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.beps-acc__item.is-open { background: var(--color-tint); }
.beps-acc--faq .beps-acc__item.is-open { background: var(--color-paper); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); border-bottom-color: transparent; }
.beps-acc__item.is-open .beps-acc__btn .beps-acc__t { color: var(--color-primary); }
.beps-acc__item.is-open .beps-acc__no { color: transparent; -webkit-text-stroke: 1.5px var(--color-primary); }
.beps-acc__item.is-open .beps-acc__ic-wrap { background: var(--color-primary); color: var(--color-surface); transform: scale(1.05); }
.beps-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.beps-acc__panel > div { overflow: hidden; }
.beps-acc__item.is-open .beps-acc__panel { grid-template-rows: 1fr; }
/* L'espace bas est une MARGE sur le <p>, jamais un padding sur .beps-acc__inner : posé sur le
   conteneur `overflow:hidden` lui-même, un padding s'ajouterait à la hauteur « 0 » imposée par la
   grille et laisserait un résidu visible panneau fermé (overflow:hidden ne clippe pas sa propre
   boîte). overflow:hidden bloque aussi le collapse de cette marge vers l'extérieur du panneau. */
.beps-acc__inner { padding-left: 4.25rem; }
.beps-acc--faq .beps-acc__inner { padding-left: 0; }
.beps-acc__inner p { color: var(--color-muted); max-width: 62ch; margin: 0 0 1.5rem; }
.beps-acc__inner p:last-child { margin-bottom: 1.5rem; }

/* Rail de progression du programme : trait vertical + segment actif (IntersectionObserver) */
.beps-acc--programme { position: relative; }
.beps-acc--programme::before { content: ""; position: absolute; left: 2.05rem; top: 0; bottom: 0; width: 2px; background: var(--color-line-soft); }
.beps-acc--programme .beps-acc__btn { position: relative; }

/* ==================== 6. TIMELINE MÉTHODE ==================== */
.beps-method__head { max-width: 62ch; margin-bottom: var(--space-lg); }
.beps-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); position: relative; }
.beps-tl::before { content: ""; position: absolute; top: 13px; left: 6%; right: 6%; height: 1px; background: var(--color-line); }
.beps-tl__step { position: relative; padding-top: 2.25rem; }
.beps-tl__node { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); border: 4px solid var(--color-tint); box-shadow: var(--shadow-xs); }
.beps-tl__no { font-family: var(--font-titre); font-size: .72rem; font-weight: 600; color: var(--color-muted); margin: .75rem 0 .5rem; }
.beps-tl__t { font-size: 1.05rem; margin-bottom: .5rem; }
.beps-tl__d { color: var(--color-muted); font-size: .94rem; }

/* ==================== 7. POURQUOI WISY SAFETY ==================== */
.beps-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: var(--space-lg); perspective: 1200px; }
.beps-why__card { position: relative; background: var(--gradient-card); border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: var(--shadow-sm); transition: transform 380ms var(--ease-premium), box-shadow 380ms var(--ease-premium); transform-style: preserve-3d; will-change: transform; }
.beps-why__card:hover { box-shadow: var(--shadow-lg); }
/* Tilt 3D léger : appliqué par JS via des custom properties --tiltx/--tilty (souris fine + hover
   uniquement — voir initTilt). Sans JS ou au clavier/tactile, la carte garde le hover simple ci-dessus. */
.beps-why__card[style*="--tiltx"] { transform: perspective(900px) rotateX(var(--tilty, 0deg)) rotateY(var(--tiltx, 0deg)) translateY(-4px); }
.beps-why__badge { display: block; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--color-primary); margin-bottom: 1.1rem; box-shadow: var(--shadow-sm); transform: translateZ(24px); }
.beps-why__badge img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: .85; filter: contrast(1.08) saturate(0); }
.beps-why__card h3 { font-size: 1.1rem; margin-bottom: .5rem; transform: translateZ(14px); }
.beps-why__card p { color: var(--color-muted); font-size: .94rem; margin: 0; }

.beps-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-top: var(--space-lg); border-top: 1px solid var(--color-line-soft); text-align: center; }
.beps-metrics__item dd { margin: 0; font-family: var(--font-titre); font-weight: 800; font-size: var(--fs-xxl); line-height: 1; letter-spacing: -.02em; background: linear-gradient(160deg, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beps-metrics__item dt { font-size: .78rem; color: var(--color-muted); margin-top: .5rem; }

/* ==================== 8. INFORMATIONS PRATIQUES ==================== */
.beps-info { padding-block: var(--space-lg); }
.beps-info__bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--gradient-card); border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
.beps-info__cell dt { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .5rem; }
.beps-info__cell dt .ic { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }
.beps-info__cell dd { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: .98rem; color: var(--color-ink); line-height: 1.35; }
.beps-info__lieu { color: var(--color-muted); margin-bottom: 1.5rem; }

/* ==================== 9. CTA FINAL ==================== */
.beps-cta-wrap { padding-block: var(--space-xl); }
.beps-cta { position: relative; overflow: hidden; background: var(--gradient-ink); color: var(--color-surface); border-radius: var(--radius-xl); padding: clamp(3rem, 7vw, 6rem); isolation: isolate; box-shadow: var(--shadow-lg); }
.beps-cta__art { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(244, 250, 249, .12); z-index: -1; }
.beps-cta__glow { position: absolute; top: -30%; right: -10%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--turquoise-soft), transparent 65%); z-index: -1; pointer-events: none; }
.beps-cta__inner { max-width: 48rem; }
.beps-cta__title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.75rem); color: var(--color-surface); max-width: 17ch; letter-spacing: -.02em; }
.beps-cta__stats { display: flex; flex-wrap: wrap; gap: clamp(2rem, 4vw, 3.5rem); margin: 2rem 0 2.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(244, 250, 249, .16); border-bottom: 1px solid rgba(244, 250, 249, .16); }
.beps-cta__stats dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 250, 249, .55); margin-bottom: .35rem; }
.beps-cta__stats dd { margin: 0; font-family: var(--font-titre); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); color: var(--color-accent); letter-spacing: -.01em; }
.beps-cta__stats dd .unit { font-size: .55em; font-weight: 700; margin-left: .2em; color: rgba(244, 250, 249, .7); }

/* ==================== 10. MICRO-INTERACTIONS ==================== */
/* CTA « magnétique » très léger : translate limité par JS (voir initMagnetic), désactivé au
   toucher/reduced-motion. La transition ci-dessous rend le retour au repos fluide. */
.beps-magnetic { transition: transform 260ms var(--ease-premium), background-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }

/* Underline animée pour les liens de section (utilisée en plus de .beps-inline-link ponctuellement) */
.beps-uline { position: relative; }
.beps-uline::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: currentColor; transition: right 320ms var(--ease-premium); }
.beps-uline:hover::after, .beps-uline:focus-visible::after { right: 0; }

/* Compteurs (15, 3, 6, 112…) : la valeur finale est déjà dans le HTML (accessible sans JS) ;
   [data-count] permet au script de l'animer de 0 → valeur au scroll-in uniquement si le mouvement
   n'est pas réduit. */
[data-count] { font-variant-numeric: tabular-nums; }

/* ==================== 11. RESPONSIVE ==================== */
@media (max-width: 1180px) {
  .beps-hero__grid { grid-template-columns: 1fr; }
  .beps-hero__media { max-width: 560px; }
  .beps-hero__frame { margin-right: 0; }
  .beps-split { grid-template-columns: 1fr; }
  .beps-split--sticky .beps-split__head { position: static; }
  .beps-why__grid { grid-template-columns: repeat(2, 1fr); }
  .beps-metrics { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .beps-info__bar { grid-template-columns: repeat(3, 1fr); }
  .beps-tl { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .beps-tl::before { display: none; }
  .beps-acc__inner { padding-left: 0; }
  .beps-acc--programme::before { left: 1.1rem; }
}

@media (max-width: 900px) {
  /* Le mode pinné est réservé au desktop : voir feature-detection dans initChain(). Ce garde-fou
     CSS neutralise aussi tout résidu si la classe restait posée pendant un redimensionnement. */
  .beps-chain--pinned .beps-chain__rail { height: auto; }
  .beps-chain--pinned .beps-chain__stage { position: static; height: auto; display: block; overflow: visible; }
  .beps-chain--pinned .beps-chain__rail-nav { display: none; }
  .beps-chain--pinned .beps-chain__steps { padding-left: 0; }
  .beps-chain--pinned .beps-chain__step { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 1.75rem 1.5rem 2rem; }
}

@media (max-width: 860px) {
  .beps-chain__steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .beps-chain__step { padding: 1.5rem 1.25rem 1.75rem 2.75rem; }
  .beps-chain__track { top: 0; left: 13px; right: auto; bottom: 0; width: 3px; height: auto; }
  .beps-chain__fill { width: 100%; height: 100%; background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); transform: scaleY(var(--chain-progress, 0)); transform-origin: top center; }
  .beps-chain__rail { padding-top: 0; padding-left: 2.75rem; position: relative; }
  .beps-chain__dot { left: -1.25rem; top: 1.6rem; }
  .beps-chain__no { margin-top: 0; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem); }
}

@media (max-width: 720px) {
  .beps-stats { flex-wrap: wrap; gap: 1.5rem 1.75rem; }
  .beps-why__grid { grid-template-columns: 1fr; }
  .beps-info__bar { grid-template-columns: repeat(2, 1fr); }
  .beps-registry { font-size: .66rem; }
  .beps-registry__sep { display: none; }
  .beps-tabs__list { gap: .5rem; }
  /* Onglets inactifs : icône seule visuellement, mais le libellé reste lu par les lecteurs
     d'écran (clip, jamais display:none — sinon le bouton perd son nom accessible). */
  .beps-tabs__tab:not(.is-active) span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .beps-tabs__tab { padding: .75rem; }
  .beps-hero__float { display: none; }
  .beps-acc__no { min-width: 3.25rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
  .beps-acc__btn { gap: .85rem; padding: 1.25rem .25rem; }
  .beps-acc__ic-wrap { width: 38px; height: 38px; }
}

@media (max-width: 520px) {
  .beps-info__bar { grid-template-columns: 1fr; }
  .beps-metrics { grid-template-columns: 1fr 1fr; }
  .beps-fiche__steps { flex-wrap: wrap; }
  .beps-fiche { margin-left: .5rem; margin-right: .5rem; margin-top: -2rem; }
  .beps-cta { padding: 2.25rem 1.5rem; border-radius: var(--radius-lg); }
  .beps-hero__blob { width: 80vw; top: -6%; }
}

/* ==================== 12. REDUCED MOTION / FALLBACK SANS JS ==================== */
@media (prefers-reduced-motion: reduce) {
  .beps-chain__fill { transform: scaleX(1) !important; transition: none !important; box-shadow: none; }
  .beps-fiche__pulse { display: none; }
  .beps-hero__img { transform: none !important; transition: none !important; }
  .beps-mask__inner { transform: none !important; transition: none !important; }
  .beps-why__card, .beps-why__card[style*="--tiltx"] { transform: none !important; }
  .beps-magnetic { transform: none !important; }
  .beps-tabs__panel { animation: none !important; }
}
/* Sans JavaScript : aucune classe .in/.is-open n'est jamais ajoutée -> on révèle tout par défaut
   (voir aussi le <noscript> dans le <head> qui neutralise .reveal). */
.no-js .beps-mask__inner { transform: none; }
.no-js .beps-hero__img { transform: none; }