/* ==========================================================================
   MASTER OF PUB — Feuille de style unique
   HTML5 + CSS3 uniquement · Scrollytelling 100 % CSS (scroll-driven animations)

   Sommaire
   01. Propriétés personnalisées (couleurs, typo, espacements)
   02. Reset & base
   03. Utilitaires (container, accessibilité, boutons, titres)
   04. Grain & barre de progression
   05. Header & navigation (checkbox hack)
   06. Hero
   07. Bandeau défilant
   08. Services — structure du scrollytelling
   09. Services — visuels des 7 chapitres
   10. Pourquoi nous
   11. Processus
   12. Bandeau CTA
   13. Contact & formulaire
   14. Footer
   15. Bouton d'appel flottant
   16. Responsive (mobile-first : 600 / 700 / 900 / 1000 / 1100 px)
   17. Animations temporelles (chargement, boucles)
   18. Animations pilotées par le défilement (@supports)
   19. Réduction des animations (prefers-reduced-motion)
   ========================================================================== */


/* ==========================================================================
   01. PROPRIÉTÉS PERSONNALISÉES
   ========================================================================== */
:root {
  /* Fonds & surfaces */
  --bg: #0E0E12;
  --bg-2: #131319;
  --surface: #17171F;
  --surface-2: #1E1E28;
  --line: rgba(255, 255, 255, 0.1);

  /* Texte */
  --fg: #FFFFFF;
  --fg-muted: #B9B9C8;
  --fg-dim: #8E8EA0;

  /* Accents principaux (CMJN, clin d'œil à l'imprimerie) */
  --magenta: #FF2E63;   /* principal */
  --yellow: #FFD400;    /* secondaire */
  --cyan: #00B8F0;
  --key: #0E0E12;       /* le « K » du CMJN */
  --orange: #FF7A1A;

  /* Accent par chapitre de service */
  --c-affichage: #FFD400;
  --c-event: #B44DFF;
  --c-print: #00B8F0;
  --c-book: #3FE08A;
  --c-slides: #FF7A1A;
  --c-words: #FF2E63;
  --c-light: #4D7CFF;

  /* Facebook (assombri pour un contraste AA avec du texte blanc) */
  --facebook: #1466D8;

  /* Typographie */
  --font-display: "Syne", "Arial Black", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Mise en page */
  --header-h: 68px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1240px;
  --radius: 14px;
  --radius-lg: 26px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Propriété typée pour animer les compteurs (section Pourquoi nous) */
@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* aucun défilement horizontal, sans casser position: sticky */
}

/* body propage son overflow au viewport : on coupe aussi au niveau de main */
main {
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
}

p {
  margin: 0 0 1rem;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Décalage des ancres sous le header sticky */
[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* États de focus visibles */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--magenta);
  color: var(--key);
}

/* Sprite SVG (masqué sans display:none pour garder les dégradés actifs) */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ==========================================================================
   03. UTILITAIRES
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1001;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--key);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

/* Icônes inline */
.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--sm {
  min-height: 42px;
  padding: 0.6em 1.1em;
  font-size: 0.92rem;
}

.btn--lg {
  padding: 1em 1.6em;
  font-size: 1.05rem;
}

.btn--primary {
  background: var(--magenta);
  color: var(--key);
  box-shadow: 0 10px 30px -12px rgba(255, 46, 99, 0.8);
}

.btn--primary:hover {
  background: var(--yellow);
  box-shadow: 0 14px 34px -12px rgba(255, 212, 0, 0.75);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.btn--dark {
  background: var(--key);
  color: var(--fg);
}

.btn--dark:hover {
  background: var(--fg);
  color: var(--key);
}

.btn--outline-dark {
  border-color: var(--key);
  color: var(--key);
}

.btn--outline-dark:hover {
  background: var(--key);
  color: var(--yellow);
}

.btn--facebook {
  width: 100%;
  background: var(--facebook);
  color: #fff;
}

.btn--facebook:hover {
  background: #0F55B8;
}

/* Sur-titre */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  color: var(--fg-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) 0 25%, var(--magenta) 0 50%, var(--yellow) 0 75%, #fff 0);
}

/* En-têtes de section */
.section-head {
  max-width: 52rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.section-title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.9rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section-title em {
  font-style: normal;
  color: var(--yellow);
}

.section-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}


/* ==========================================================================
   04. GRAIN & BARRE DE PROGRESSION
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Masquée par défaut : affichée uniquement si les scroll-driven animations sont supportées */
.progress {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta) 50%, var(--yellow));
  transform-origin: 0 50%;
}


/* ==========================================================================
   05. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background-color: rgba(14, 14, 18, 0.82);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

/* Logotype */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--fg);
  text-decoration: none;
}

.brand__mark {
  width: 44px;
  height: 33px;
  transition: transform 0.4s var(--ease);
}

.brand:hover .brand__mark {
  transform: rotate(-6deg) scale(1.08);
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand__of {
  color: var(--cyan);
}

/* Checkbox hack : la case reste focusable au clavier */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-burger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.3s var(--ease);
}

.nav-burger:hover {
  border-color: var(--yellow);
}

.nav-toggle:focus-visible + .nav-burger {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.nav-burger__bar,
.nav-burger__bar::before,
.nav-burger__bar::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav-burger__bar {
  position: relative;
}

.nav-burger__bar::before,
.nav-burger__bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-burger__bar::before { top: -6px; }
.nav-burger__bar::after  { top: 6px; }

.nav-toggle:checked + .nav-burger .nav-burger__bar {
  background-color: transparent;
}

.nav-toggle:checked + .nav-burger .nav-burger__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle:checked + .nav-burger .nav-burger__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Panneau de navigation (mobile) */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: 0.5rem var(--gutter) 1.75rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}

.nav-toggle:checked ~ .nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav__link:hover {
  color: var(--yellow);
}

.nav__cta {
  align-self: flex-start;
}


/* ==========================================================================
   06. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(4rem, 10vh, 8rem) clamp(5rem, 14vh, 9rem);
  overflow: hidden;
}

/* --- Formes d'arrière-plan --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
}

.hero__blob--c {
  top: -14vmax;
  left: -14vmax;
  width: 46vmax;
  background: var(--cyan);
  opacity: 0.32;
}

.hero__blob--m {
  top: 18%;
  right: -16vmax;
  width: 42vmax;
  background: var(--magenta);
  opacity: 0.45;
}

.hero__blob--y {
  bottom: -18vmax;
  left: 28%;
  width: 32vmax;
  background: var(--yellow);
  opacity: 0.22;
}

/* Trame d'impression (demi-teinte) */
.hero__halftone {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.2px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 65%);
  mask-image: radial-gradient(circle at 70% 40%, #000, transparent 65%);
}

/* Texte géant détouré */
.hero__outline {
  position: absolute;
  right: -3vw;
  bottom: -5vw;
  font-family: var(--font-display);
  font-size: clamp(10rem, 38vw, 34rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.1);
  user-select: none;
}

/* Repères de calage */
.hero__regmark {
  position: absolute;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}

.hero__regmark--1 { top: 12%; right: 8%; }
.hero__regmark--2 { bottom: 16%; left: 4%; }

.hero__shape {
  position: absolute;
}

.hero__shape--ring {
  top: 16%;
  right: 16%;
  width: clamp(70px, 10vw, 140px);
  aspect-ratio: 1;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  opacity: 0.7;
}

.hero__shape--square {
  right: 30%;
  bottom: 20%;
  width: clamp(28px, 4vw, 56px);
  aspect-ratio: 1;
  background: var(--magenta);
  rotate: 18deg;
}

.hero__shape--tri {
  top: 58%;
  left: 7%;
  width: clamp(36px, 5vw, 72px);
  aspect-ratio: 1;
  background: var(--cyan);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.85;
}

/* --- Contenu --- */
.hero__content {
  position: relative;
  min-width: 0; /* empêche l'élément flex de s'élargir au mot le plus long */
}

.hero__title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.1rem, 8.4vw, 7.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero__line > span {
  display: inline-block;
}

.hero__line--accent > span {
  background: linear-gradient(90deg, var(--magenta), var(--orange) 45%, var(--yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 38rem;
  margin: 0 0 2rem;
  color: var(--fg-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__actions .btn {
  flex: 1 1 auto;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__tags li {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Badge circulaire */
.hero__badge {
  display: none;
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  bottom: clamp(5rem, 14vh, 9rem);
  width: clamp(120px, 13vw, 170px);
  height: auto;
}

.hero__badge text {
  fill: var(--fg);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 3.4px;
}

.hero__badge-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Indicateur de défilement */
.scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  color: var(--fg-muted);
  text-decoration: none;
  translate: -50% 0;
}

.scroll-cue__mouse {
  position: relative;
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 12px;
}

.scroll-cue__mouse span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--yellow);
}

.scroll-cue__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* ==========================================================================
   07. BANDEAU DÉFILANT
   ========================================================================== */
.marquee {
  position: relative;
  z-index: 2;
  width: calc(100% + 4rem);
  margin: -1.25rem 0 0 -2rem;
  padding-block: 0.9rem;
  overflow: hidden;
  background: var(--yellow);
  color: var(--key);
  rotate: -1.5deg;
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.marquee span::after {
  content: "✦";
  margin-inline: 1.5rem;
  font-size: 0.7em;
}


/* ==========================================================================
   08. SERVICES — STRUCTURE DU SCROLLYTELLING
   ========================================================================== */
.story {
  position: relative;
  padding-block: clamp(6rem, 14vw, 10rem) clamp(4rem, 10vw, 8rem);
}

/* Couleur d'accent par chapitre */
.chapter               { --accent: var(--yellow); }
.chapter--affichage    { --accent: var(--c-affichage); }
.chapter--event        { --accent: var(--c-event); }
.chapter--print        { --accent: var(--c-print); }
.chapter--book         { --accent: var(--c-book); }
.chapter--slides       { --accent: var(--c-slides); }
.chapter--words        { --accent: var(--c-words); }
.chapter--light        { --accent: var(--c-light); }

/* Mobile : histoire verticale empilée (visuel puis texte) */
.chapter {
  display: grid;
  gap: 2rem;
  padding-block: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--line);
}

.story__head + .chapter {
  border-top: 0;
  padding-top: 0;
}

/* Scène : carte qui contient le numéro et le grand visuel */
.chapter__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 75% 15%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
}

/* Grille de mise en page */
.chapter__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Traits de coupe aux quatre coins */
.chapter__stage::after {
  --cm: rgba(255, 255, 255, 0.35);
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    linear-gradient(var(--cm), var(--cm)) top left / 16px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) top left / 1px 16px no-repeat,
    linear-gradient(var(--cm), var(--cm)) top right / 16px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) top right / 1px 16px no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom left / 16px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--cm), var(--cm)) bottom right / 1px 16px no-repeat;
}

.chapter__meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.chapter__num {
  display: inline-block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0.06em 0.06em 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

.chapter__num > span {
  display: inline-block;
}

.chapter__total {
  color: var(--fg-dim);
  font-size: 0.9rem;
  font-weight: 700;
}

.chapter__label {
  align-self: center;
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chapter__swatches {
  display: flex;
  gap: 6px;
}

.chapter__swatches i {
  width: 22px;
  height: 8px;
  border-radius: 2px;
}

.chapter__swatches i:nth-child(1) { background: var(--cyan); }
.chapter__swatches i:nth-child(2) { background: var(--magenta); }
.chapter__swatches i:nth-child(3) { background: var(--yellow); }
.chapter__swatches i:nth-child(4) { background: var(--accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Conteneur commun des visuels (unités cqi pour une typo proportionnelle) */
.visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  container-type: inline-size;
}

.visual__ground {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  z-index: -1;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65), transparent 70%);
}

/* Colonne de texte */
.chapter__content {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.chapter__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.chapter__service {
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.chapter__title {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.chapter__text {
  max-width: 34rem;
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.panel__title {
  margin: 0 0 0.75rem;
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deliverables {
  display: grid;
  max-width: 34rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.deliverables li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}

.deliverables li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  translate: 0 -50%;
}

.deliverables li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.42rem;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
  translate: 0 -75%;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid currentColor;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: gap 0.3s var(--ease);
}

.link-arrow::after {
  content: "→";
}

.link-arrow:hover {
  gap: 0.9rem;
}


/* ==========================================================================
   09. SERVICES — VISUELS DES 7 CHAPITRES
   (État par défaut = état final, lisible sans animation)
   ========================================================================== */

/* ---------- 01 · Affichage : panneau qui se déploie ---------- */
.bb {
  position: absolute;
  inset: 4% 8% 6%;
  transform-origin: 50% 100%;
}

.bb__board {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 66%;
  overflow: hidden;
  border-radius: 6px;
  background: #2A2A33;
  box-shadow: 0 0 0 3px #3A3A46, 0 30px 60px -20px rgba(0, 0, 0, 0.85);
}

.bb__poster {
  position: absolute;
  inset: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6%;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--magenta), var(--orange) 55%, var(--yellow));
  color: var(--key);
}

.bb__poster::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(14, 14, 18, 0.3) 1.4px, transparent 1.8px);
  background-size: 8px 8px;
}

.bb__tag {
  align-self: flex-start;
  margin-bottom: 4%;
  padding: 0.3em 0.65em;
  border-radius: 3px;
  background: var(--key);
  color: var(--yellow);
  font-size: 0.7rem;
  font-size: 3.2cqi;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bb__headline {
  position: relative;
  max-width: 70%;
  font-family: var(--font-display);
  font-size: 2rem;
  font-size: 9cqi;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.bb__headline em {
  font-style: normal;
  color: #fff;
}

.bb__cmyk {
  position: absolute;
  right: 5%;
  bottom: 8%;
  display: flex;
  gap: 3px;
}

.bb__cmyk i {
  width: 2.6cqi;
  height: 2.6cqi;
  border-radius: 50%;
}

.bb__cmyk i:nth-child(1) { background: var(--cyan); }
.bb__cmyk i:nth-child(2) { background: #fff; }
.bb__cmyk i:nth-child(3) { background: var(--yellow); }
.bb__cmyk i:nth-child(4) { background: var(--key); }

/* Lés de papier qui se retirent pour révéler l'affiche */
.bb__strip {
  position: absolute;
  top: 4%;
  bottom: 4%;
  width: 23%;
  background: repeating-linear-gradient(90deg, #EDE8DC 0 2px, #E1DBCC 2px 4px);
  box-shadow: inset -8px 0 12px -8px rgba(0, 0, 0, 0.4);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.bb__strip:nth-of-type(1) { left: 4%; }
.bb__strip:nth-of-type(2) { left: 27%; }
.bb__strip:nth-of-type(3) { left: 50%; }
.bb__strip:nth-of-type(4) { left: 73%; }

.bb__post {
  position: absolute;
  bottom: 0;
  width: 3.5%;
  height: 36%;
  background: linear-gradient(90deg, #3A3A46, #5A5A6E, #3A3A46);
}

.bb__post--l { left: 24%; }
.bb__post--r { right: 24%; }

.bb__lamp {
  position: absolute;
  top: 65%;
  width: 10%;
  height: 3%;
  border-radius: 2px;
  background: #5A5A6E;
}

.bb__lamp--l { left: 16%; }
.bb__lamp--r { right: 16%; }

.bb__lamp::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -70%;
  width: 240%;
  height: 1100%;
  background: linear-gradient(to top, rgba(255, 212, 0, 0.4), transparent);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0);
  mix-blend-mode: screen;
}

/* ---------- 02 · Événementiel : faisceaux de projecteurs ---------- */
.ev {
  position: absolute;
  inset: 3% 3% 0;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, #2A1840, #0B0B10 70%);
}

.ev__screen {
  position: absolute;
  top: 14%;
  left: 22%;
  right: 22%;
  height: 34%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 6px;
  background: linear-gradient(135deg, #2B1452, #120A24);
  box-shadow: 0 0 40px -6px var(--accent);
}

.ev__screen-small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.65rem;
  font-size: 3cqi;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ev__screen-big {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-size: 5.6cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ev__beam {
  --beam: var(--accent);
  position: absolute;
  top: -6%;
  width: 46%;
  height: 112%;
  transform-origin: 50% 0;
}

.ev__beam--1 { left: -2%; rotate: -16deg; }
.ev__beam--2 { left: 27%; --beam: #FFFFFF; }
.ev__beam--3 { right: -2%; rotate: 16deg; --beam: var(--magenta); }

.ev__beam > span {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), color-mix(in srgb, var(--beam) 45%, transparent) 50%, transparent 92%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
  transform-origin: 50% 0;
}

.ev__stage {
  position: absolute;
  top: 54%;
  left: 8%;
  right: 8%;
  height: 12%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(#2E2E3A, #15151C);
  box-shadow: 0 -2px 0 color-mix(in srgb, var(--accent) 70%, transparent);
}

.ev__crowd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 36%;
}

.ev__people {
  fill: #050507;
}

.ev__arm {
  fill: none;
  stroke: #050507;
  stroke-width: 9;
  stroke-linecap: round;
}

/* ---------- 03 · Impression : feuilles qui s'empilent ---------- */
.pr {
  position: absolute;
  inset: 4% 6% 8%;
}

.sheet {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  background: #F6F3EC;
  color: var(--key);
  box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.1);
}

.sheet__lines {
  position: absolute;
  background: repeating-linear-gradient(to bottom, rgba(14, 14, 18, 0.25) 0 2px, transparent 2px 9px);
}

.sheet--poster {
  top: 0;
  left: 4%;
  width: 42%;
  height: 100%;
  rotate: -6deg;
}

.sheet__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  background: var(--accent);
}

.sheet__circle {
  position: absolute;
  top: 14%;
  right: -16%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--magenta);
  mix-blend-mode: multiply;
}

.sheet--poster .sheet__title {
  position: absolute;
  top: 46%;
  left: 10%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-size: 6cqi;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.sheet--poster .sheet__lines {
  left: 10%;
  right: 30%;
  bottom: 15%;
  height: 10%;
}

.sheet__cmyk {
  position: absolute;
  left: 10%;
  bottom: 5%;
  display: flex;
  gap: 2px;
}

.sheet__cmyk i {
  width: 2.4cqi;
  height: 2.4cqi;
}

.sheet__cmyk i:nth-child(1) { background: var(--cyan); }
.sheet__cmyk i:nth-child(2) { background: var(--magenta); }
.sheet__cmyk i:nth-child(3) { background: var(--yellow); }
.sheet__cmyk i:nth-child(4) { background: var(--key); }

.sheet--flyer {
  top: 12%;
  left: 40%;
  width: 34%;
  height: 72%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #101018;
  color: #fff;
  rotate: 7deg;
}

.sheet--flyer .sheet__title {
  position: absolute;
  top: 8%;
  left: 10%;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-size: 9cqi;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sheet--flyer .sheet__lines {
  top: 36%;
  left: 10%;
  right: 18%;
  height: 14%;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 9px);
}

.sheet__img {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 9%;
  height: 34%;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent), var(--magenta));
}

.sheet--card {
  right: 0;
  bottom: 2%;
  width: 38%;
  aspect-ratio: 85 / 55;
  background: #FFFFFF;
  rotate: -10deg;
}

.sheet__logo {
  position: absolute;
  top: 14%;
  left: 8%;
  width: 26%;
  height: 34%;
}

.sheet__name {
  position: absolute;
  left: 8%;
  bottom: 34%;
  font-size: 0.6rem;
  font-size: 3cqi;
  font-weight: 800;
}

.sheet--card .sheet__lines {
  left: 8%;
  right: 40%;
  bottom: 12%;
  height: 16%;
  background: repeating-linear-gradient(to bottom, rgba(14, 14, 18, 0.3) 0 1.5px, transparent 1.5px 6px);
}

/* ---------- 04 · Catalogues : pages qui tournent en 3D ---------- */
.visual--book {
  perspective: 1400px;
}

.bk {
  position: absolute;
  inset: 16% 6% 18%;
  transform-style: preserve-3d;
  transform: rotateX(22deg);
}

.bk::after {
  /* ombre de reliure */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6%;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent);
  transform: translateZ(4px);
  pointer-events: none;
}

.bk__base,
.bk__page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.bk__base {
  overflow: hidden;
  background: #F6F3EC;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.9);
}

.bk__base--left {
  left: 0;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #F6F3EC 85%, #DCD6C8);
  transform: translateZ(-4px);
}

.bk__base--right {
  right: 0;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #DCD6C8, #F6F3EC 15%);
}

.bk__page {
  --z: 1px;
  left: 50%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transform: rotateY(-180deg) translateZ(var(--z));
}

.bk__page--1 { --z: 3px; }
.bk__page--2 { --z: 2px; }
.bk__page--3 { --z: 1px; }

.bk__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bk__face--front {
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #DCD6C8, #F6F3EC 15%);
}

.bk__face--back {
  border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, #F6F3EC 85%, #DCD6C8);
  transform: rotateY(180deg);
}

.bk__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12%;
  background: linear-gradient(150deg, var(--accent), #0A8F5A);
  color: var(--key);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-size: 5.5cqi;
  font-weight: 800;
  line-height: 0.95;
}

.bk__cover em {
  font-style: normal;
  color: #fff;
}

.bk__head {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 60%;
  height: 8%;
  border-radius: 2px;
  background: var(--key);
}

.bk__img {
  position: absolute;
  top: 12%;
  left: 12%;
  right: 12%;
  height: 42%;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
}

.bk__img--alt {
  background: linear-gradient(135deg, var(--magenta), var(--yellow));
}

.bk__lines {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12%;
  height: 28%;
  background: repeating-linear-gradient(to bottom, rgba(14, 14, 18, 0.22) 0 2px, transparent 2px 8px);
}

.bk__head ~ .bk__lines {
  height: 54%;
}

.bk__grid {
  position: absolute;
  inset: 12%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
}

.bk__grid i {
  border-radius: 3px;
}

.bk__grid i:nth-child(1) { background: var(--accent); }
.bk__grid i:nth-child(2) { background: var(--cyan); }
.bk__grid i:nth-child(3) { background: var(--yellow); }
.bk__grid i:nth-child(4) { background: var(--magenta); }

/* ---------- 05 · Présentations : diapositives qui entrent ---------- */
.sl {
  position: absolute;
  inset: 10% 6% 12%;
}

.slide {
  position: absolute;
  width: 72%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #F6F3EC;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
}

.slide--3 {
  top: 0;
  left: 0;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #2A2A36, #1C1C26);
}

.slide--2 {
  top: 14%;
  left: 12%;
  border: 1px solid var(--line);
  background: #23232F;
}

.slide--1 {
  top: 28%;
  left: 26%;
}

.slide__bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6%;
  background: var(--accent);
}

.slide__lines {
  position: absolute;
  left: 6%;
  bottom: 12%;
  width: 36%;
  height: 30%;
  background: repeating-linear-gradient(to bottom, rgba(14, 14, 18, 0.25) 0 2px, transparent 2px 8px);
}

.slide--2 .slide__lines {
  left: 14%;
  top: 20%;
  width: 50%;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0 2px, transparent 2px 8px);
}

.slide__top {
  position: absolute;
  top: 8%;
  left: 6%;
  display: flex;
  gap: 4px;
}

.slide__top i {
  width: 1.8cqi;
  height: 1.8cqi;
  border-radius: 50%;
  background: rgba(14, 14, 18, 0.25);
}

.slide__title {
  position: absolute;
  top: 18%;
  left: 6%;
  color: var(--key);
  font-family: var(--font-display);
  font-size: 1rem;
  font-size: 4.6cqi;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.slide__chart {
  position: absolute;
  right: 6%;
  bottom: 12%;
  display: flex;
  align-items: flex-end;
  gap: 6%;
  width: 46%;
  height: 58%;
  border-bottom: 2px solid rgba(14, 14, 18, 0.3);
}

.slide__chart i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  transform-origin: 50% 100%;
}

.slide__chart i:nth-child(1) { height: 30%; }
.slide__chart i:nth-child(2) { height: 45%; }
.slide__chart i:nth-child(3) { height: 56%; }
.slide__chart i:nth-child(4) { height: 74%; }
.slide__chart i:nth-child(5) { height: 96%; background: var(--magenta); }

/* ---------- 06 · Slogans & naming : typographie géante ---------- */
.visual--words {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4% 6%;
}

.wd__quote {
  position: absolute;
  top: -8%;
  left: 0;
  z-index: -1;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 40cqi;
  font-weight: 800;
  line-height: 1;
  opacity: 0.2;
}

.wd__word {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-size: 13cqi;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.wd__word > span {
  display: inline-block;
}

.wd__word--2 {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

.wd__word--3 em {
  font-style: normal;
  color: var(--accent);
}

.wd__underline {
  display: block;
  width: 60%;
  height: 1.4cqi;
  min-height: 4px;
  margin-top: 4%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--yellow));
  transform-origin: 0 50%;
}

/* ---------- 07 · Bâches & back light : caisson qui s'allume ---------- */
.visual--light {
  overflow: hidden;
  border-radius: 14px;
}

.lb__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 10%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 34%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 8%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 6% 44%, rgba(255, 255, 255, 0.4) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 30%, #101A3D, #07080F 70%);
}

.lb {
  position: absolute;
  top: 9%;
  left: 14%;
  right: 14%;
  height: 54%;
}

.lb__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6% 8%;
  overflow: hidden;
  border: 1.6cqi solid #22232C;
  border-radius: 6px;
  background: linear-gradient(135deg, #FFFFFF, #DFE8FF 40%, #B9CCFF);
  color: var(--key);
  box-shadow:
    0 0 0 2px #33343F,
    0 0 50px 6px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 140px 30px color-mix(in srgb, var(--accent) 35%, transparent);
}

.lb__panel::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 45%;
  height: 180%;
  background: linear-gradient(var(--accent), var(--magenta));
  opacity: 0.85;
  rotate: 18deg;
}

.lb__small,
.lb__big {
  position: relative;
}

.lb__small {
  margin-bottom: 3%;
  color: #2343C4;
  font-size: 0.6rem;
  font-size: 2.8cqi;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lb__big {
  max-width: 75%;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-size: 8cqi;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.lb__glow {
  position: absolute;
  inset: -25%;
  z-index: -1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%);
}

.lb__leg {
  position: absolute;
  top: 100%;
  z-index: -1;
  width: 4%;
  height: 60%;
  background: linear-gradient(90deg, #1A1B22, #2C2D38, #1A1B22);
}

.lb__leg--l { left: 22%; }
.lb__leg--r { right: 22%; }

.lb__city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    radial-gradient(circle, rgba(255, 212, 0, 0.55) 0.9px, transparent 1.3px) 0 0 / 10px 12px,
    #05060B;
  clip-path: polygon(0 100%, 0 60%, 6% 60%, 6% 40%, 12% 40%, 12% 55%, 18% 55%, 18% 30%, 22% 30%, 22% 50%, 30% 50%, 30% 22%, 36% 22%, 36% 45%, 44% 45%, 44% 62%, 52% 62%, 52% 35%, 58% 35%, 58% 15%, 62% 15%, 62% 48%, 70% 48%, 70% 28%, 76% 28%, 76% 58%, 84% 58%, 84% 38%, 90% 38%, 90% 52%, 100% 52%, 100% 100%);
}


/* ==========================================================================
   10. POURQUOI NOUS
   ========================================================================== */
.why {
  padding-block: clamp(5rem, 12vw, 9rem);
  background: linear-gradient(180deg, transparent, var(--bg-2) 15%, var(--bg-2) 85%, transparent);
}

.why__stats {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.stat__num {
  --n: var(--to);
  flex: none;
  min-width: 2ch;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  counter-reset: n var(--n);
}

.stat__num::before {
  content: counter(n);
}

.stat__num--pct::after {
  content: "%";
  margin-left: 0.08em;
  font-size: 0.5em;
}

.stat:nth-child(1) .stat__num { color: var(--cyan); }
.stat:nth-child(2) .stat__num { color: var(--magenta); }

.stat__label {
  color: var(--fg-muted);
  font-weight: 600;
  line-height: 1.4;
}

.why__grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface-2);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__icon {
  --ic: var(--fg);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  color: var(--ic);
  transition: transform 0.4s var(--ease);
}

.card:hover .card__icon {
  transform: rotate(-8deg) scale(1.08);
}

.card__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__icon--m { --ic: var(--magenta); }
.card__icon--c { --ic: var(--cyan); }
.card__icon--y { --ic: var(--yellow); }
.card__icon--k { --ic: #FFFFFF; }

.card__title {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.card__text {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.98rem;
}


/* ==========================================================================
   11. PROCESSUS
   ========================================================================== */
.process {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.steps {
  position: relative;
  display: grid;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rail + trait de progression (vertical sur mobile) */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: calc(1.625rem - 1px);
  width: 2px;
}

.steps::before {
  background: var(--line);
}

.steps::after {
  background: linear-gradient(180deg, var(--cyan), var(--magenta), var(--yellow), #fff);
  transform-origin: 50% 0;
}

.step {
  position: relative;
  padding-left: 5rem;
}

.step__num {
  --sc: var(--magenta);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid var(--sc);
  border-radius: 50%;
  background: var(--bg);
  color: var(--sc);
  font-family: var(--font-display);
  font-weight: 800;
}

.step:nth-child(1) .step__num { --sc: var(--cyan); }
.step:nth-child(2) .step__num { --sc: var(--magenta); }
.step:nth-child(3) .step__num { --sc: var(--yellow); }
.step:nth-child(4) .step__num { --sc: #FFFFFF; }

.step__title {
  margin: 0.4rem 0 0.6rem;
  font-size: 1.5rem;
}

.step__text {
  margin: 0;
  color: var(--fg-muted);
}


/* ==========================================================================
   12. BANDEAU CTA
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 8rem);
  background: linear-gradient(120deg, var(--magenta), var(--orange) 50%, var(--yellow));
  color: var(--key);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(14, 14, 18, 0.2) 1.3px, transparent 1.7px);
  background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000);
  mask-image: linear-gradient(90deg, transparent 20%, #000);
}

.cta__outline {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  translate: 0 -50%;
  white-space: nowrap;
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(6rem, 22vw, 20rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 2px rgba(14, 14, 18, 0.2);
  user-select: none;
}

.cta__title {
  max-width: 14ch;
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 6.4vw, 5.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.cta__title span {
  display: block;
}

.cta__text {
  max-width: 34rem;
  margin: 0 0 2rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cta :focus-visible {
  outline-color: var(--key);
}


/* ==========================================================================
   13. CONTACT & FORMULAIRE
   ========================================================================== */
.contact {
  padding-block: clamp(5rem, 12vw, 9rem);
}

.contact__grid {
  display: grid;
  gap: 2rem;
}

.contact__list {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.contact__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 46, 99, 0.12);
  color: var(--magenta);
}

.contact__item:nth-child(2) .contact__icon { background: rgba(0, 184, 240, 0.12); color: var(--cyan); }
.contact__item:nth-child(3) .contact__icon { background: rgba(255, 212, 0, 0.12); color: var(--yellow); }

.contact__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__label {
  margin: 0 0 0.25rem;
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact__value {
  color: var(--fg);
  font-size: clamp(0.95rem, 4vw, 1.08rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.contact__link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.3s var(--ease), color 0.3s var(--ease);
}

.contact__link:hover {
  color: var(--yellow);
  background-size: 100% 2px;
}

.contact__info > .btn--facebook {
  margin-bottom: 1.25rem;
}

.contact__map {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Formulaire */
.form {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
}

.form__title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
}

.form__hint {
  margin: 0 0 1.75rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.form__row {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.form__label {
  font-size: 0.92rem;
  font-weight: 700;
}

.form__label span {
  color: var(--magenta);
}

.form__input {
  width: 100%;
  min-height: 50px;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.form__input::placeholder {
  color: var(--fg-dim);
}

.form__input:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.form__input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.2);
}

.form__input:user-invalid {
  border-color: var(--magenta);
}

.form__select {
  position: relative;
}

.form__select select {
  padding-right: 2.75rem;
  cursor: pointer;
}

.form__select option {
  background: var(--bg);
  color: var(--fg);
}

.form__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--fg-muted);
  border-bottom: 2px solid var(--fg-muted);
  rotate: 45deg;
  translate: 0 -70%;
  pointer-events: none;
}

.form__textarea {
  min-height: 140px;
  resize: vertical;
}

.form__submit {
  width: 100%;
  margin-top: 0.5rem;
}


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: 4rem 7rem;
  border-top: 1px solid var(--line);
  background: #0A0A0D;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
}

.footer__desc {
  max-width: 26rem;
  margin: 1.25rem 0;
  color: var(--fg-muted);
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.footer__social:hover {
  border-color: var(--facebook);
  background: var(--facebook);
}

.footer__title {
  margin: 0 0 1rem;
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer__links {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-muted);
}

.footer__links a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.footer__links a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 0.9rem;
}

.footer__bottom p {
  margin: 0;
}

.footer__credit a {
  color: var(--fg-muted);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

.footer__credit a:hover {
  color: var(--yellow);
  text-decoration-color: currentColor;
}

.footer__top {
  color: var(--fg-muted);
  text-decoration: none;
}

.footer__top:hover {
  color: var(--yellow);
}


/* ==========================================================================
   15. BOUTON D'APPEL FLOTTANT (mobile)
   ========================================================================== */
.call-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--key);
  box-shadow: 0 12px 30px -8px rgba(255, 46, 99, 0.75);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.call-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--magenta);
  opacity: 0;
}

.call-fab:hover {
  background: var(--yellow);
  transform: scale(1.06);
}

.call-fab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   16. RESPONSIVE (mobile-first)
   ========================================================================== */

/* ---- ≥ 600px : tablettes portrait ---- */
@media (min-width: 600px) {
  .hero__actions .btn {
    flex: 0 0 auto;
  }

  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter__stage {
    padding: 1.75rem;
  }
}

/* ---- ≥ 700px ---- */
@media (min-width: 700px) {
  .why__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat {
    flex-direction: column;
    align-items: flex-start;
  }

  .scroll-cue {
    display: flex;
  }
}

/* ---- ≥ 800px ---- */
@media (min-width: 800px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* ---- ≥ 900px : navigation complète, processus horizontal ---- */
@media (min-width: 900px) {
  :root {
    --header-h: 80px;
  }

  .nav-toggle,
  .nav-burger {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    gap: 0.25rem;
  }

  .nav__link {
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    color: var(--fg-muted);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .nav__link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--fg);
  }

  .nav__cta {
    align-self: auto;
  }

  .hero__badge {
    display: block;
  }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }

  .steps::before,
  .steps::after {
    top: calc(1.625rem - 1px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
  }

  .steps::after {
    background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), #fff);
    transform-origin: 0 50%;
  }

  .step {
    padding: 5rem 0 0;
  }

  .call-fab {
    display: none;
  }

  .site-footer {
    padding-bottom: 3rem;
  }
}

/* ---- ≥ 1000px : scène sticky + panneaux de texte qui défilent ---- */
@media (min-width: 1000px) {
  .chapter {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
    padding-block: 0;
    border-top: 0;
  }

  .chapter + .chapter {
    margin-top: 12vh;
  }

  .chapter__stage {
    position: sticky;
    top: calc(var(--header-h) + 3vh);
    justify-content: space-between;
    height: calc(100vh - var(--header-h) - 6vh);
    height: calc(100svh - var(--header-h) - 6vh);
    min-height: 440px;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  .chapter__stage .visual {
    width: min(100%, calc((94svh - var(--header-h) - 13rem) * 4 / 3));
    min-width: 280px;
  }

  .chapter__content {
    gap: 40vh;
    padding-block: 24vh 30vh;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
  }
}

/* ---- ≥ 1100px ---- */
@media (min-width: 1100px) {
  .why__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================================================
   17. ANIMATIONS TEMPORELLES (chargement & boucles)
   Uniquement si l'utilisateur n'a pas demandé à réduire les animations.
   ========================================================================== */
@keyframes line-up {
  from { transform: translateY(105%); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vw, 3vh) scale(1.08); }
  100% { transform: translate(-3vw, 5vh) scale(0.95); }
}

@keyframes shape-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(12deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes wheel {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

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

@keyframes sway {
  from { transform: rotate(-9deg); }
  to   { transform: rotate(9deg); }
}

@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__line > span {
    animation: line-up 1.1s var(--ease) both;
  }

  .hero__line--accent > span {
    animation-delay: 0.15s;
  }

  .hero__eyebrow,
  .hero__lead,
  .hero__actions,
  .hero__tags {
    animation: fade-in-up 0.9s var(--ease) both;
  }

  .hero__lead    { animation-delay: 0.35s; }
  .hero__actions { animation-delay: 0.5s; }
  .hero__tags    { animation-delay: 0.65s; }

  .hero__blob {
    animation: blob-float 18s ease-in-out infinite alternate;
  }

  .hero__blob--m { animation-duration: 22s; animation-direction: alternate-reverse; }
  .hero__blob--y { animation-duration: 26s; }

  .hero__shape {
    animation: shape-float 9s ease-in-out infinite;
  }

  .hero__shape--square { animation-duration: 11s; animation-delay: -3s; }
  .hero__shape--tri    { animation-duration: 13s; animation-delay: -6s; }

  .hero__badge-ring {
    animation: spin 22s linear infinite;
  }

  .scroll-cue__mouse span {
    animation: wheel 1.6s ease-in-out infinite;
  }

  .marquee__track {
    animation: marquee 38s linear infinite;
  }

  .ev__beam > span {
    animation: sway 5s ease-in-out infinite alternate;
  }

  .ev__beam--2 > span { animation-duration: 6.5s; animation-delay: -2s; }
  .ev__beam--3 > span { animation-duration: 4.5s; animation-delay: -1s; }

  .call-fab::before {
    animation: pulse 2.4s ease-out infinite;
  }
}


/* ==========================================================================
   18. ANIMATIONS PILOTÉES PAR LE DÉFILEMENT (scroll-driven)
   - Activées seulement si le navigateur supporte animation-timeline: view()
   - Les keyframes ne définissent que l'état de départ : l'état final est
     l'état par défaut, donc le contenu reste lisible sans support.
   ========================================================================== */

/* ---- Keyframes génériques ---- */
@keyframes progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes header-solid {
  from {
    background-color: rgba(14, 14, 18, 0);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
  }
}

@keyframes hero-out {
  to { opacity: 0.1; translate: 0 -12vh; }
}

@keyframes parallax-down {
  to { translate: 0 22vh; }
}

@keyframes parallax-up {
  to { translate: 0 -30vh; }
}

@keyframes parallax-side {
  to { translate: -18vw 8vh; }
}

@keyframes reveal-up {
  from { opacity: 0; translate: 0 3rem; scale: 0.97; }
}

@keyframes reveal-left {
  from { opacity: 0; translate: 2rem 0; }
}

@keyframes unmask-up {
  from { clip-path: inset(0 -0.3em 100% -0.3em); translate: 0 0.4em; }
  to   { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
}

@keyframes type-reveal {
  from { clip-path: inset(-0.2em 100% -0.2em -0.2em); }
  to   { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); }
}

@keyframes count {
  from { --n: 0; }
}

@keyframes draw-y {
  from { transform: scaleY(0); }
}

@keyframes draw-x {
  from { transform: scaleX(0); }
}

/* ---- Keyframes des chapitres ---- */
@keyframes stage-in {
  from { opacity: 0.25; scale: 0.92; }
}

@keyframes num-in {
  from { translate: 0 105%; }
}

/* 01 · Affichage */
@keyframes bb-unfold {
  from { opacity: 0; transform: perspective(900px) rotateX(-85deg); }
}

@keyframes bb-strip {
  from { transform: scaleY(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* 02 · Événementiel */
@keyframes ev-screen {
  from { opacity: 0.2; filter: brightness(0.3) saturate(0); }
}

@keyframes ev-beam {
  from { opacity: 0; scale: 1 0.05; }
}

@keyframes ev-crowd {
  from { translate: 0 45%; }
}

@keyframes ev-text {
  from { opacity: 0; letter-spacing: 0.3em; }
}

/* 03 · Impression */
@keyframes sheet-drop {
  from { opacity: 0; translate: 0 -70%; rotate: 28deg; }
}

@keyframes pop {
  from { scale: 0; }
}

/* 04 · Catalogues */
@keyframes bk-tilt {
  from { opacity: 0; transform: rotateX(65deg) rotateZ(-10deg) scale(0.8); }
}

@keyframes page-flip {
  from { transform: rotateY(0deg) translateZ(var(--z)); }
}

/* 05 · Présentations */
@keyframes slide-in {
  from { opacity: 0; translate: 70% 12%; rotate: 8deg; }
}

@keyframes bar-grow {
  from { scale: 1 0; }
}

@keyframes title-in {
  from { opacity: 0; translate: -25% 0; }
}

/* 06 · Slogans */
@keyframes word-rise {
  from { translate: 0 110%; rotate: 4deg; }
}

@keyframes quote-in {
  from { opacity: 0; scale: 0.4; rotate: -20deg; }
}

@keyframes underline {
  from { scale: 0 1; }
}

/* 07 · Back light */
@keyframes light-on {
  0%, 35% {
    filter: brightness(0.16) saturate(0);
    box-shadow: 0 0 0 2px #33343F, 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
  42%      { filter: brightness(1.15) saturate(1); }
  48%      { filter: brightness(0.3) saturate(0.2); }
  57%      { filter: brightness(1) saturate(1); }
  63%      { filter: brightness(0.5) saturate(0.6); }
  72%, 100% { filter: brightness(1) saturate(1); }
}

@keyframes city-rise {
  from { translate: 0 35%; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- Barre de progression liée au défilement de la page ---------- */
    .progress {
      display: block;
      animation: progress-grow 1ms linear both;
      animation-timeline: scroll(root block);
    }

    /* ---------- Header : devient opaque après quelques pixels ---------- */
    .site-header {
      animation: header-solid 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }

    /* ---------- Hero : parallaxe des calques ---------- */
    .hero__content {
      animation: hero-out 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }

    .hero__blob {
      animation:
        blob-float 18s ease-in-out infinite alternate,
        parallax-down 1ms linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }

    .hero__blob--m {
      animation:
        blob-float 22s ease-in-out infinite alternate-reverse,
        parallax-up 1ms linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }

    .hero__shape {
      animation:
        shape-float 9s ease-in-out infinite,
        parallax-up 1ms linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }

    .hero__shape--square { animation-duration: 11s, 1ms; animation-delay: -3s, 0s; }
    .hero__shape--tri    { animation-duration: 13s, 1ms; animation-delay: -6s, 0s; }

    .hero__halftone {
      animation: parallax-down 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .hero__outline {
      animation: parallax-side 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .hero__regmark {
      animation: parallax-up 1ms linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    /* ---------- Titres de section : démasquage ---------- */
    .reveal-mask {
      animation: unmask-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }

    .section-lead {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* ==========================================================
       SCROLLYTELLING DES SERVICES
       Chaque chapitre expose une timeline nommée « --chap ».
       5 phases (--p0 à --p4) orchestrent les animations :
       - mobile : pendant l'entrée du chapitre à l'écran
       - desktop : pendant que la scène est épinglée (sticky)
       ========================================================== */
    .chapter {
      view-timeline: --chap block;
      --p0: entry 0% entry 45%;
      --p1: entry 25% entry 55%;
      --p2: entry 40% entry 70%;
      --p3: entry 55% entry 85%;
      --p4: entry 70% entry 100%;
    }

    .chapter__stage {
      animation: stage-in 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .chapter__num > span {
      animation: num-in 1ms var(--ease) both;
      animation-timeline: --chap;
      animation-range: var(--p1);
    }

    /* Panneaux de texte qui défilent */
    .panel {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }

    /* Nom du service : démasquage « lettre à lettre » (paliers) */
    .chapter__service {
      animation: type-reveal 1ms steps(24, end) both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }

    .deliverables li {
      animation: reveal-left 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* --- 01 · Affichage : le panneau se déplie puis l'affiche est révélée lé par lé --- */
    .bb {
      animation: bb-unfold 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .bb__strip {
      animation: bb-strip 1ms linear both;
      animation-timeline: --chap;
    }

    .bb__strip:nth-of-type(1) { animation-range: var(--p1); }
    .bb__strip:nth-of-type(2) { animation-range: var(--p2); }
    .bb__strip:nth-of-type(3) { animation-range: var(--p3); }
    .bb__strip:nth-of-type(4) { animation-range: var(--p4); }

    .bb__lamp::after {
      animation: fade-in 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p4);
    }

    /* --- 02 · Événementiel : les projecteurs s'allument un par un --- */
    .ev__screen {
      animation: ev-screen 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .ev__crowd {
      animation: ev-crowd 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .ev__beam {
      animation: ev-beam 1ms linear both;
      animation-timeline: --chap;
    }

    .ev__beam--1 { animation-range: var(--p1); }
    .ev__beam--2 { animation-range: var(--p2); }
    .ev__beam--3 { animation-range: var(--p3); }

    .ev__screen-big {
      animation: ev-text 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p4);
    }

    /* --- 03 · Impression : les feuilles tombent et s'empilent --- */
    .sheet {
      animation: sheet-drop 1ms linear both;
      animation-timeline: --chap;
    }

    .sheet--poster { animation-range: var(--p1); }
    .sheet--flyer  { animation-range: var(--p2); }
    .sheet--card   { animation-range: var(--p3); }

    .sheet__cmyk i {
      animation: pop 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p4);
    }

    /* --- 04 · Catalogues : le livre s'ouvre, les pages tournent en 3D --- */
    .bk {
      animation: bk-tilt 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .bk__page {
      animation: page-flip 1ms ease-in-out both;
      animation-timeline: --chap;
    }

    .bk__page--1 { animation-range: var(--p1); }
    .bk__page--2 { animation-range: var(--p2); }
    .bk__page--3 { animation-range: var(--p3); }

    /* --- 05 · Présentations : les slides entrent, le graphique monte --- */
    .slide {
      animation: slide-in 1ms linear both;
      animation-timeline: --chap;
    }

    .slide--3 { animation-range: var(--p0); }
    .slide--2 { animation-range: var(--p1); }
    .slide--1 { animation-range: var(--p2); }

    .slide__chart i {
      animation: bar-grow 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p3);
    }

    .slide__title {
      animation: title-in 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p4);
    }

    /* --- 06 · Slogans & naming : les mots apparaissent un à un --- */
    .wd__quote {
      animation: quote-in 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .wd__word > span {
      animation: word-rise 1ms var(--ease) both;
      animation-timeline: --chap;
    }

    .wd__word--1 > span { animation-range: var(--p1); }
    .wd__word--2 > span { animation-range: var(--p2); }
    .wd__word--3 > span { animation-range: var(--p3); }

    .wd__underline {
      animation: underline 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p4);
    }

    /* --- 07 · Back light : la ville apparaît, le caisson s'allume en grésillant --- */
    .lb__city {
      animation: city-rise 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p0);
    }

    .lb__panel {
      animation: light-on 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p2);
    }

    .lb__glow {
      animation: fade-in 1ms linear both;
      animation-timeline: --chap;
      animation-range: var(--p3);
    }

    /* ---------- Pourquoi nous : compteurs + cartes ---------- */
    .stat__num {
      animation: count 1ms ease-out both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }

    .stat {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .reveal-up {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    /* ---------- Processus : le trait se dessine, les étapes apparaissent ---------- */
    .steps {
      view-timeline: --steps block;
    }

    .steps::after {
      animation: draw-y 1ms linear both;
      animation-timeline: --steps;
      animation-range: cover 15% cover 65%;
    }

    .step {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }

    /* ---------- CTA : texte géant dévoilé lettre par lettre ---------- */
    .cta__outline {
      animation: type-reveal 1ms steps(10, end) both;
      animation-timeline: view();
      animation-range: entry 25% cover 60%;
    }

    .cta__title,
    .cta__text,
    .cta__actions {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }

    /* ---------- Contact ---------- */
    .contact__item,
    .contact__map,
    .form {
      animation: reveal-up 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }

    /* ---------- Desktop : phases pendant l'épinglage de la scène ---------- */
    @media (min-width: 900px) {
      .steps::after {
        animation-name: draw-x;
        animation-range: entry 40% cover 60%;
      }

      .step {
        animation-timeline: --steps;
      }

      .step:nth-child(1) { animation-range: entry 40% cover 40%; }
      .step:nth-child(2) { animation-range: entry 55% cover 47%; }
      .step:nth-child(3) { animation-range: entry 70% cover 54%; }
      .step:nth-child(4) { animation-range: entry 85% cover 61%; }
    }

    @media (min-width: 1000px) {
      .chapter {
        --p0: entry 0% entry 85%;
        --p1: entry 80% contain 20%;
        --p2: contain 10% contain 35%;
        --p3: contain 25% contain 50%;
        --p4: contain 40% contain 65%;
      }
    }
  }
}


/* ==========================================================================
   19. RÉDUCTION DES ANIMATIONS
   Tout mouvement est désactivé, le contenu reste entièrement visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee__track {
    transform: none;
  }
}