/* ==========================================================================
   Tercet Studio : feuille de style, V3 « palette claire »
   Fond blanc dominant, encre #141418, hiérarchie par les gris, un seul accent indigo
   (#4F46E5, variante claire #A5B4FC sur fond sombre). Les offres se distinguent par des
   teintes douces (pêche, lilas, sauge) ; le Launch est la carte sombre mise en avant.
   Ombres douces en couches, rayons 16–22 px, boutons et badges en pilule.
   Titres : Fraunces (variable, axe opsz). Texte : Manrope (variable).
   Polices auto-hébergées dans vendor/fonts (npm @fontsource-variable, OFL).
   Contrastes mesurés : docs/CONTRASTE-PALETTE-V2.md.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("vendor/fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("vendor/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Neutres clairs */
  --white: #ffffff;
  --surface: #f7f7f8;
  --surface-2: #f6f6f8;
  --surface-grad: linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%);
  --line: rgba(20, 20, 30, 0.08);
  --line-strong: rgba(20, 20, 30, 0.14);

  /* Encre et gris (hiérarchie par le gris, jamais par la couleur) */
  --ink: #141418;
  --ink-2: #1d1d24;          /* élévation sur fond sombre */
  --gray: #55545c;           /* 7,48:1 sur blanc */
  --gray-2: #6e6d75;         /* 5,11:1 sur blanc, 4,74:1 sur #F6F6F8 */
  --gray-3: #8a8991;         /* filets de champs, grand texte en attente : 3,46:1 */
  --on-dark: #ffffff;
  --on-dark-soft: #b9b8c0;   /* 9,34:1 sur l'encre */
  --on-dark-muted: #9c9ba3;  /* 6,68:1 sur l'encre */
  --line-dark: rgba(255, 255, 255, 0.1);

  /* Accent unique */
  --indigo: #4f46e5;         /* 6,29:1 sur blanc, blanc sur indigo 6,29:1 */
  --indigo-hover: #4338ca;
  --indigo-light: #a5b4fc;   /* 9,22:1 sur l'encre */

  /* Teintes douces des offres (surface + détail décoratif) */
  --peche: #fff3ec;
  --peche-detail: #e8774a;   /* décoratif uniquement (2,7:1 sur pêche) */
  --lilas: #f3f1ff;
  --lilas-detail: #6d5ef5;   /* composants et décor (4,12:1 sur lilas) */
  --sauge: #eef6f1;
  --sauge-detail: #1f6b4f;   /* texte possible : 5,83:1 sur sauge */

  /* Thème courant (surchargé par .theme-*) */
  --bg: var(--white);
  --fg: var(--ink);
  --fg-soft: var(--gray);
  --fg-muted: var(--gray-2);
  --accent: var(--indigo);
  --focus: var(--indigo);
  --spot: rgba(79, 70, 229, 0.15);

  /* Ombres douces en couches (jamais d'ombre dure décalée) */
  --shadow-sm: 0 0 0 1px rgba(20, 20, 30, 0.06), 0 1px 1px rgba(20, 20, 30, 0.04), 0 2px 4px rgba(20, 20, 30, 0.04), 0 4px 8px rgba(20, 20, 30, 0.03);
  --shadow: 0 0 0 1px rgba(20, 20, 30, 0.06), 0 1px 2px rgba(20, 20, 30, 0.04), 0 3px 6px rgba(20, 20, 30, 0.04), 0 8px 16px rgba(20, 20, 30, 0.04), 0 16px 32px rgba(20, 20, 30, 0.05), 0 32px 64px rgba(20, 20, 30, 0.05);
  --shadow-lg: 0 0 0 1px rgba(20, 20, 30, 0.06), 0 2px 4px rgba(20, 20, 30, 0.05), 0 6px 12px rgba(20, 20, 30, 0.05), 0 12px 24px rgba(20, 20, 30, 0.06), 0 24px 48px rgba(20, 20, 30, 0.07), 0 40px 80px rgba(20, 20, 30, 0.08), 0 64px 120px rgba(20, 20, 30, 0.08);
  --shadow-dark: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.25), 0 24px 48px rgba(0, 0, 0, 0.3), 0 48px 96px rgba(0, 0, 0, 0.35);
  --shadow-btn: 0 1px 1px rgba(20, 20, 30, 0.2), 0 2px 4px rgba(20, 20, 30, 0.12), 0 6px 12px rgba(20, 20, 30, 0.1), 0 12px 24px -6px rgba(20, 20, 30, 0.22);

  /* Typographie */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.12rem, 1.06rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(2.2rem, 1.4rem + 3vw, 4.4rem);
  --step-hero: clamp(2.5rem, 1.1rem + 3.7vw, 5rem);
  --step-manifeste: clamp(1.9rem, 1.2rem + 2.8vw, 4rem);

  /* Espacements (base 4 px) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 9rem);
  --header-top: 0.75rem;
  --header-pill: 3.75rem;
  --header-h: calc(var(--header-top) + var(--header-pill));
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --pill: 999px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-ui: 160ms;
}

/* Thèmes de section : fond, texte et focus contrastés (AA mesuré) */
.theme-clair { --bg: var(--white); --fg: var(--ink); --fg-soft: var(--gray); --fg-muted: var(--gray-2); --accent: var(--indigo); --focus: var(--indigo); }
.theme-peche { --bg: var(--peche); --fg: var(--ink); --fg-soft: var(--gray); --fg-muted: var(--gray-2); --accent: var(--indigo); --focus: var(--indigo); --detail: var(--peche-detail); }
.theme-lilas { --bg: var(--lilas); --fg: var(--ink); --fg-soft: var(--gray); --fg-muted: var(--gray-2); --accent: var(--indigo); --focus: var(--indigo); --detail: var(--lilas-detail); }
.theme-sauge { --bg: var(--sauge); --fg: var(--ink); --fg-soft: var(--gray); --fg-muted: var(--gray-2); --accent: var(--sauge-detail); --focus: var(--sauge-detail); --detail: var(--sauge-detail); }
.theme-sombre { --bg: var(--ink); --fg: var(--on-dark); --fg-soft: var(--on-dark-soft); --fg-muted: var(--on-dark-muted); --accent: var(--indigo-light); --focus: var(--indigo-light); --detail: var(--indigo-light); --spot: rgba(165, 180, 252, 0.15); }
[class*="theme-"] { background-color: var(--bg); color: var(--fg); }

/* Règles de Lenis 1.3.27 (copie de vendor/lenis/lenis.css, intégrée pour éviter une requête bloquante) */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--white);
  color-scheme: light;
  scrollbar-color: #c9c8d0 var(--white);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* filet de sécurité : aucun décor ne crée de défilement horizontal */
}

::selection { background: var(--indigo); color: var(--white); }
input, textarea { caret-color: var(--indigo); }

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Grain très discret (visible surtout sur les sections sombres) */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container {
  width: 100%;
  max-width: 84rem;
  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;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--pill);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); --focus: var(--indigo); }

/* Données d'identité à compléter par Aviv : surlignées pour ne pas être oubliées */
mark.a-completer { padding: 0 0.3em; border-radius: 4px; background: #fff1b8; color: #4a3b00; font-weight: 700; }
.theme-sombre mark.a-completer, .site-footer mark.a-completer { background: #4a3b00; color: #ffe9a3; }

/* --------------------------------------------------------------------------
   Typographie commune : titres noirs et serrés, hiérarchie par les gris
   -------------------------------------------------------------------------- */

/* Sur-titre en pastille : point d'accent, texte gris */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--s-5);
  padding: 0.38rem 0.9rem 0.38rem 0.7rem;
  border-radius: var(--pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--fg-soft);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.theme-sombre .eyebrow { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-dark); }

.section-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 620;
  font-size: var(--step-3);
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.section-lead {
  margin-top: var(--s-5);
  max-width: 36rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}

.section { position: relative; padding-block: var(--section-space); }
.section-head { margin-bottom: var(--s-8); }

/* --------------------------------------------------------------------------
   Boutons : pilules. Principal = encre + rond d'accent, reflet balayé au survol.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: var(--pill);
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out),
    transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(0.99); }
/* Reflet balayé (sous le texte) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, var(--sweep, rgba(165, 180, 252, 0.38)) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}

.btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow-btn); --focus: var(--indigo); }
.theme-sombre .btn--primary { --focus: var(--indigo-light); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.35); }
.btn--ghost { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(20, 20, 30, 0.05), 0 4px 10px rgba(20, 20, 30, 0.04); --sweep: rgba(79, 70, 229, 0.1); }
.btn--accent { background: var(--indigo); color: var(--white); box-shadow: 0 1px 2px rgba(20, 20, 30, 0.3), 0 8px 24px -4px rgba(79, 70, 229, 0.55); --sweep: rgba(255, 255, 255, 0.22); }
.btn--small { min-height: 2.6rem; padding: 0.5rem 1.1rem; font-size: 0.92rem; }
.btn--large { min-height: 3.5rem; padding: 0.9rem 1.7rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

/* Rond d'accent avec la flèche */
.btn__arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-block: -0.4rem;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  transition: transform 260ms var(--ease-out);
}
.btn:has(.btn__arrow) { padding-right: 0.45rem; }
.btn--large .btn__arrow { width: 2.6rem; height: 2.6rem; }
.btn--accent .btn__arrow { background: var(--white); color: var(--indigo); }
/* Point d'accent du bouton d'en-tête */
.nav__cta::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--indigo-light);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateX(110%); transition: transform 750ms var(--ease-out); }
  .btn--primary:hover { box-shadow: 0 1px 1px rgba(20, 20, 30, 0.2), 0 4px 8px rgba(20, 20, 30, 0.14), 0 14px 28px -6px rgba(20, 20, 30, 0.3); transform: translateY(-1px); }
  .btn--ghost:hover { box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.22), 0 2px 4px rgba(20, 20, 30, 0.06), 0 8px 18px rgba(20, 20, 30, 0.06); transform: translateY(-1px); }
  .btn--accent:hover { background: var(--indigo-hover); transform: translateY(-1px); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}

.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  transition: color var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-quiet:hover { color: var(--accent); }
}

/* Projecteur au curseur (posé par script.js : pointeur fin, sans mouvement réduit) */
.spot { isolation: isolate; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(180px circle at var(--spx, 50%) var(--spy, 50%), var(--spot), transparent 70%);
  transition: opacity 300ms var(--ease-out);
}
.spot.is-spot::before { opacity: 1; }

/* --------------------------------------------------------------------------
   En-tête : pilule flottante en verre dépoli
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  z-index: 50;
  width: min(100% - 1.5rem, 76rem);
  height: var(--header-pill);
  margin-inline: auto;
  border-radius: var(--pill);
  color: var(--ink);
}
/* Le verre est porté par un pseudo-élément : un backdrop-filter sur l'en-tête lui-même
   ferait de lui le bloc conteneur du menu mobile (position: fixed). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.07), 0 1px 2px rgba(20, 20, 30, 0.04), 0 4px 12px rgba(20, 20, 30, 0.05), 0 12px 32px rgba(20, 20, 30, 0.06);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled::before {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.08), 0 2px 4px rgba(20, 20, 30, 0.05), 0 8px 20px rgba(20, 20, 30, 0.08), 0 20px 48px rgba(20, 20, 30, 0.08);
}
.site-header__inner {
  height: 100%;
  max-width: none;
  padding-inline: 1.4rem 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 750;
  font-size: 0.98rem;
  text-decoration: none;
}
/* Les trois formats : encre, indigo, indigo clair */
.brand__mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 1rem; }
.brand__mark i { display: block; height: 0.62rem; border-radius: 3px; }
.brand__mark i:nth-child(1) { width: 1.1rem; background: var(--ink); }
.brand__mark i:nth-child(2) { width: 0.62rem; background: var(--indigo); }
.brand__mark i:nth-child(3) { width: 0.36rem; height: 0.64rem; background: var(--indigo-light); }

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list { display: flex; gap: var(--s-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: 0.8rem;
  color: var(--gray);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--pill);
  transition: color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); background: rgba(20, 20, 30, 0.05); }
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 1px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { transform: translateY(-5px); }
.nav-toggle__bars::after { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); background: var(--white); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); background: var(--white); }

@media (max-width: 820px) {
  :root { --header-top: 0.6rem; --header-pill: 3.5rem; }
  .site-header__inner { padding-inline: 1.1rem 0.4rem; }
  .js .nav-toggle { display: block; }
  .js .nav {
    position: fixed;
    top: calc(var(--header-h) + 0.5rem);
    left: 0.75rem;
    right: 0.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5) var(--s-5);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .js .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .js .nav__list { flex-direction: column; }
  .js .nav__link { min-height: 3rem; font-size: 1.1rem; padding-inline: 0.5rem; }
  .no-js .nav__list { display: none; }
}

/* --------------------------------------------------------------------------
   Hero : la salle de projection en 3D, sur fond clair, texte dans un voile clair
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-8);
  overflow: clip;
  background: var(--surface);
  color: var(--ink);
}

.hero__visual { position: absolute; inset: 0; pointer-events: none; }
.hero__still { position: absolute; inset: 0; }
/* Image fixe : chargée seulement quand la 3D n'est pas jouée */
.hero-static .hero__still,
.hero.is-fallback .hero__still {
  background: url("assets/hero-still-v4.webp") 100% 55% / auto 80% no-repeat;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.hero-static .hero__canvas { display: none; }
.hero.is-3d-ready .hero__canvas { opacity: 1; }
.hero.is-fallback .hero__canvas { display: none; }

/* Voile clair : zone calme derrière le texte (contraste mesuré par tools/contraste-hero.mjs) */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(79, 70, 229, 0.06), transparent 70%),
    linear-gradient(0deg, var(--white) 0, rgba(255, 255, 255, 0) 14%),
    linear-gradient(90deg, rgba(247, 247, 248, 0.95) 0%, rgba(247, 247, 248, 0.9) 46%, rgba(247, 247, 248, 0.55) 57%, rgba(247, 247, 248, 0) 70%);
}

.hero__grid { position: relative; z-index: 2; }
.hero__copy { max-width: min(46rem, 54vw); }

.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 640;
  font-size: var(--step-hero);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.hero__line {
  display: block;
  padding-bottom: 0.1em;
  margin-bottom: -0.08em;
  text-wrap: balance;
}
.hero__line-in { display: block; }
.hero__line--b { color: var(--gray); }
.hero__line--accent { color: var(--indigo); }
.hero__mot { display: inline-block; }

.hero__lead {
  margin-top: var(--s-6);
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--gray);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

/* Bouton pause de l'animation (WCAG 2.2.2) */
.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px var(--line-strong), 0 4px 12px rgba(20, 20, 30, 0.06);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.hero__pause[hidden] { display: none; }
.hero__pause-icon {
  width: 0.7rem;
  height: 0.8rem;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.hero__pause[aria-pressed="true"] .hero__pause-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.42rem 0 0.42rem 0.7rem;
  border-color: transparent transparent transparent currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .hero__pause:hover { box-shadow: 0 0 0 1.5px var(--indigo), 0 4px 12px rgba(20, 20, 30, 0.08); }
}

/* Entrée de page : apparition avec flou, mot par mot pour le titre (mots posés par script.js).
   Départ à opacity .001 (et non 0) : le titre reste compté comme LCP par le navigateur. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title:not(.is-split) { opacity: 0.001; animation: secours 1ms 1.4s forwards; }
  .js .hero__title .hero__mot { animation: flou 760ms var(--ease-out) both; animation-delay: calc(140ms + var(--w) * 40ms); will-change: transform, filter, opacity; }
  .js .hero__in { animation: flou 800ms var(--ease-out) both; animation-delay: calc(380ms + var(--i) * 90ms); }
}
@keyframes flou { from { opacity: 0.001; filter: blur(5px); transform: translateY(5px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes secours { to { opacity: 1; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .hero {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: 34svh; /* place libre pour la grappe 3D sous le texte */
  }
  .hero__copy { max-width: none; }
  .hero .btn--large { padding-inline: 1.2rem; }
  .hero .btn--large:has(.btn__arrow) { padding-right: 0.45rem; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(247, 247, 248, 0.96) 0%, rgba(247, 247, 248, 0.93) 60%, rgba(247, 247, 248, 0.5) 70%, rgba(247, 247, 248, 0) 78%, rgba(255, 255, 255, 0) 94%, var(--white) 100%);
  }
  .hero-static .hero__still,
  .hero.is-fallback .hero__still {
    background-image: url("assets/hero-still-mobile-v4.webp");
    background-position: 70% 100%;
    background-size: auto 40%;
  }
  .hero__pause { bottom: auto; top: calc(100% - 34svh + 0.5rem); }
}

/* --------------------------------------------------------------------------
   Variante comparative (désactivée par défaut)
   -------------------------------------------------------------------------- */

.comparaison {
  margin-top: var(--s-5);
  max-width: 36rem;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid currentColor;
  font-size: var(--step--1);
}
.comparaison--card { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Showreel : grand cadre arrondi sur fond d'encre, la vignette grandit au défilement
   -------------------------------------------------------------------------- */

.reel { position: relative; overflow: clip; background: var(--ink); color: var(--on-dark); --focus: var(--indigo-light); }
/* Halos indigo flous (décor) */
.reel__stage::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% 30%;
  height: 70%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(79, 70, 229, 0.28), transparent);
  pointer-events: none;
}

/* Médias communs : poster en image, vidéo par-dessus quand elle joue */
.media { position: relative; }
.media__poster,
.media__video,
.media__mirror {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.media__video, .media__mirror { opacity: 0; transition: opacity 380ms var(--ease-out); }
.media.is-playing .media__video,
.media.is-playing .media__mirror { opacity: 1; }

.media__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.45rem 1.05rem 0.45rem 0.9rem;
  border: 0;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(20, 20, 30, 0.08), 0 4px 14px rgba(20, 20, 30, 0.18);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
  --focus: var(--indigo-light);
}
.media__btn-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0 0.4rem 0.66rem;
  border-color: transparent transparent transparent currentColor;
}
.media__btn[aria-pressed="true"] .media__btn-icon {
  width: 0.66rem;
  height: 0.78rem;
  border-width: 0 3px;
  border-color: currentColor;
}

/* Mise en page statique (mouvement réduit, sans JS) */
.reel__stage { position: relative; padding-block: var(--section-space) calc(var(--section-space) * 0.6); }
.reel__stage > * { position: relative; z-index: 1; }
.reel__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  width: min(100% - 2 * var(--gutter), 84rem - 2 * var(--gutter));
  margin: 0 auto var(--s-6);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 620;
  font-size: var(--step-3);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.reel__word--l { color: var(--on-dark); }
.reel__word--r { color: var(--indigo-light); }
.reel__frame {
  position: relative;
  width: min(100% - 2 * var(--gutter), 84rem - 2 * var(--gutter));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: var(--shadow-dark);
}
.reel__shade {
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(0deg, rgba(10, 10, 14, 0.86) 0%, rgba(10, 10, 14, 0.55) 30%, rgba(10, 10, 14, 0) 58%);
}
.reel__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(1.4rem, 0.6rem + 3.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.reel__line { display: inline-block; }
/* Hors mode animé, le cadre garde son 16:9 pour l'image et les livrables passent dessous */
html:not(.sc-anim) .reel__frame { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; box-shadow: none; }
html:not(.sc-anim) .reel__frame::before { content: ""; display: block; aspect-ratio: 16 / 9; }
html:not(.sc-anim) .reel__frame > .media__poster,
html:not(.sc-anim) .reel__frame > .media__video { bottom: auto; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); box-shadow: var(--shadow-dark); }
html:not(.sc-anim) .reel__lines { margin-top: var(--s-5); }
.reel__line:nth-child(odd) { color: var(--on-dark); }
.reel__line:nth-child(even) { color: var(--indigo-light); }
.reel__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  width: min(100% - 2 * var(--gutter), 84rem - 2 * var(--gutter));
  margin: var(--s-4) auto 0;
}
.reel__caption { max-width: 44rem; font-size: 0.86rem; line-height: 1.5; color: var(--on-dark-soft); }
.reel__bar .media__btn { flex: none; background: var(--white); }
.reel__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); flex: none; }
/* Bouton « plein écran » (showreel) : indigo, icône cadre */
.reel__bar .media__btn--full, .media__btn--full { background: var(--indigo); color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.3); }
.media__btn-icon--full { width: 0.85rem; height: 0.7rem; border: 2px solid currentColor; border-radius: 2px; }

@media (max-width: 640px) {
  .reel__lines { font-size: clamp(1.2rem, 0.6rem + 3.6vw, 2rem); }
  .reel__bar { flex-direction: column; }
}

/* Mode animé : course épinglée (sticky) ; le grand cadre arrondi est mis à l'échelle par script.js */
.sc-anim .reel__track { height: 280svh; }
.sc-anim .reel__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}
.sc-anim .reel__frame {
  position: absolute;
  top: calc(var(--header-h) + 1rem);
  bottom: 5.25rem;
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  border-radius: var(--radius-lg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.sc-anim .reel__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: auto;
  margin: 0;
  display: block;
  font-size: clamp(3.4rem, 0.5rem + 7.6vw, 10.5rem);
  pointer-events: none;
}
.sc-anim .reel__word {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  will-change: transform, opacity;
}
.sc-anim .reel__word--l { right: calc(50% + 16vw + 0.12em); }
.sc-anim .reel__word--r { left: calc(50% + 16vw + 0.12em); }
.sc-anim .reel__shade { display: block; }
.sc-anim .reel__lines {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(1.25rem, 3vw, 2.75rem);
}
.sc-anim .reel__lines .reel__line { opacity: 0; }
.sc-anim .reel__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: auto;
  height: 5.25rem;
  margin: 0;
  padding: 0 var(--gutter);
  align-items: center;
}
@media (max-width: 820px) {
  .sc-anim .reel__track { height: 220svh; }
  .sc-anim .reel__title { font-size: clamp(3rem, 1rem + 12vw, 6rem); }
  .sc-anim .reel__frame { left: 0.75rem; right: 0.75rem; top: calc(50% - min(50svh - 6rem, 62.5vw)); bottom: auto; height: min(100svh - 12rem, 125vw); }
  .sc-anim .reel__word { top: auto; transform: none; }
  .sc-anim .reel__word--l { right: auto; left: var(--gutter); bottom: calc(50% + 19vh); }
  .sc-anim .reel__word--r { left: auto; right: var(--gutter); top: calc(50% + 19vh); }
  .sc-anim .reel__bar { height: auto; padding-block: var(--s-4); }
}

/* --------------------------------------------------------------------------
   Le problème, puis la promesse (blanc ; les mots passent du gris à l'encre)
   -------------------------------------------------------------------------- */

.manifeste { padding-block: var(--section-space); }
.manifeste__texte {
  max-width: 19em;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--step-manifeste);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

/* Trois faits, en cartes */
.facts {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.facts__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  background: var(--surface-grad);
  box-shadow: var(--shadow);
}
.facts__value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.facts__label { color: var(--gray); font-size: 0.98rem; font-weight: 600; }

@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Bandeau défilant (piloté par le défilement), bords estompés, couleurs neutres
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding-block: clamp(1.8rem, 3vw, 3rem);
  background: var(--white);
  color: var(--ink);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12.5%, #000 87.5%, transparent 100%);
}
.marquee__row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 620;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  will-change: transform;
}
.marquee__row--alt {
  margin-top: var(--s-3);
  font-family: var(--font-body);
  font-weight: 750;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-2);
}
.sc-anim .marquee__row--alt { transform: translateX(-30%); }
.marquee__set { display: inline-flex; align-items: center; }
.marquee__set > span { padding-inline: 0.45em; }
/* Séparateurs : les trois formats, en filets neutres */
.m { display: inline-block; height: 0.5em; margin-inline: 0.2em; border-radius: 0.1em; box-shadow: inset 0 0 0 0.06em #c9c8d0; background: var(--surface); }
.m--169 { width: 0.89em; }
.m--11 { width: 0.5em; }
.m--916 { width: 0.28em; }
.marquee__row--alt .m { height: 0.8em; box-shadow: inset 0 0 0 1.5px #c9c8d0; }

/* --------------------------------------------------------------------------
   Offres : un panneau par offre, une carte par offre
   -------------------------------------------------------------------------- */

.offres { position: relative; background: var(--white); color: var(--ink); overflow-x: clip; }
.offres__head { padding-top: var(--section-space); padding-bottom: var(--s-8); }
.offres__title { max-width: 13em; }

/* Accès direct : trois cartes aux teintes des offres */
.offres__index {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: 48rem;
}
.offres__jump {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 4.5rem;
  padding: 0.8rem 1.1rem 0.8rem 2.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.offres__jump::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--dot);
}
.offres__jump span:last-child { font-family: var(--font-display); font-size: 1.35rem; font-weight: 620; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offres__jump--teaser { background: var(--peche); color: var(--ink); --dot: var(--peche-detail); }
.offres__jump--launch { background: var(--ink); color: var(--white); --dot: var(--indigo-light); --focus: var(--indigo); }
.offres__jump--kit { background: var(--lilas); color: var(--ink); --dot: var(--lilas-detail); }
@media (hover: hover) and (pointer: fine) {
  .offres__jump:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* Panneaux d'offre : une teinte douce par offre (le Launch en sombre) */
.offer {
  position: relative;
  --fh: min(31svh, calc((min(100vw, 84rem) - 2 * var(--gutter)) / 3.7));
}
.offer--teaser { background: linear-gradient(180deg, var(--peche) 0%, #fff8f3 100%); }
.offer--kit { background: linear-gradient(180deg, var(--lilas) 0%, #f8f7ff 100%); }
/* Halos indigo flous derrière la carte phare */
/* Le Launch a la carte la plus haute (prix très grand, CTA pleine largeur) : cadre un peu plus bas */
.offer--launch { overflow: clip; --fh: min(27svh, calc((min(100vw, 84rem) - 2 * var(--gutter)) / 3.7)); }
.offer--launch::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 62%;
  height: 58%;
  background: radial-gradient(closest-side, rgba(79, 70, 229, 0.62), rgba(79, 70, 229, 0.16) 60%, transparent);
  filter: blur(30px);
  pointer-events: none;
}
.offer--launch::after {
  content: "";
  position: absolute;
  left: -8%;
  top: 6%;
  width: 40%;
  height: 40%;
  background: radial-gradient(closest-side, rgba(165, 180, 252, 0.16), transparent);
  pointer-events: none;
}
.offer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(1.25rem, 3svh, 2.25rem);
  padding-top: calc(var(--header-h) + clamp(1rem, 3.5svh, 2.25rem));
  padding-bottom: clamp(1.5rem, 4.5svh, 3rem);
}

/* Cadres vidéo : arrondis, liseré blanc, ombre douce en couches */
.offer__visual { position: relative; }
.frames { display: flex; align-items: flex-end; gap: clamp(0.8rem, 2vw, 1.6rem); }
.frame {
  position: relative;
  flex: none;
  height: var(--fh);
  overflow: hidden;
  border: 5px solid var(--white);
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.offer--launch .frame { border-color: rgba(255, 255, 255, 0.1); background: #000; box-shadow: var(--shadow-dark); }
.frame--169 { aspect-ratio: 16 / 9; }
.frame--329 { aspect-ratio: 32 / 9; }
.frame--329 .media__poster, .frame--329 .media__video { object-position: 50% 42%; }
.frame--11 { aspect-ratio: 1; }
.frame--916 { aspect-ratio: 9 / 16; }
.frames--kit .frame { overflow: visible; }
.frames--kit .frame > .media__poster,
.frames--kit .frame > .media__video,
.frames--kit .frame > .media__mirror { border-radius: 15px; }
.frame__tag {
  position: absolute;
  left: -5px;
  top: calc(100% + 14px);
  padding: 0.1rem 0.6rem;
  border-radius: var(--pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--gray);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.frames--kit { padding-bottom: 2.8rem; }

/* Durée en très grand, à droite du cadre du Teaser (décor aria-hidden : l'information est dans la liste) */
.offer__duree {
  position: absolute;
  right: 0;
  bottom: 0.4rem;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 660;
  font-size: calc(var(--fh) * 0.82);
  line-height: 0.8;
  letter-spacing: -0.07em;
  white-space: nowrap;
  color: var(--peche-detail);
}
.offer__duree small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 0.04em; color: var(--ink); }
@media (max-width: 1099px) { .offer__duree { display: none; } }

/* Règle du temps : une graduation toutes les 5 s (trait au détail de l'offre, repères en gris) */
.ruler {
  position: relative;
  height: 2.6rem;
  margin-top: 1.1rem;
  color: var(--detail, var(--fg));
}
.ruler--30 { width: calc(var(--fh) * 16 / 9); }
.ruler--60 { width: calc(var(--fh) * 32 / 9); max-width: 100%; }
.ruler__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.75rem;
  border-top: 2px solid currentColor;
  transform-origin: left center;
  background:
    linear-gradient(currentColor, currentColor) right top / 2px 100% no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px calc(100% / 6));
}
.ruler--60 .ruler__line { background: linear-gradient(currentColor, currentColor) right top / 2px 100% no-repeat, repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px calc(100% / 12)); }
.ruler__mark {
  position: absolute;
  top: 1rem;
  color: var(--fg-soft);
  font-weight: 800;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ruler__mark--0 { left: 0; }
.ruler--30 .ruler__mark--30, .ruler__mark--60 { right: 0; }
.ruler--60 .ruler__mark--30 { left: 50%; transform: translateX(-50%); }

/* Carte de l'offre : une vraie carte, sous les cadres */
.offer__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.5fr) auto;
  grid-template-areas:
    "badge badge badge"
    "head list cta"
    "rights list cta";
  gap: var(--s-2) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.85rem) clamp(1.25rem, 2.4vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--surface-grad);
  box-shadow: var(--shadow);
}
.offer__badge {
  grid-area: badge;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--s-2);
  padding: 0.28rem 0.8rem 0.28rem 0.65rem;
  border-radius: var(--pill);
  background: var(--indigo);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.45);
}
.offer__badge::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--white); }
.offer__head { grid-area: head; }
.offer__name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem);
  font-weight: 640;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.offer__price {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.offer__delay { margin-top: var(--s-2); color: var(--fg-soft); font-weight: 700; font-size: 0.98rem; }
.offer__includes { grid-area: list; font-weight: 800; }
.offer__list {
  grid-area: list;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem var(--s-5);
  font-weight: 600;
}
.offer__includes + .offer__list { margin-top: 2rem; }
.offer__list li { position: relative; padding-left: 1.7rem; }
/* Pastille d'accent cochée */
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.offer__rights { grid-area: rights; align-self: end; color: var(--fg-muted); font-size: 0.92rem; font-weight: 600; }
.offer__ht { font-family: var(--font-body); font-size: 0.42em; font-weight: 800; letter-spacing: 0.04em; color: var(--fg-soft); vertical-align: 0.2em; }
.offer .comparaison { grid-column: 1 / -1; }
.offer__cta { grid-area: cta; align-self: center; }

/* Launch : carte sombre phare, prix très grand, CTA d'accent pleine largeur */
.offer--launch .offer__card {
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.6fr);
  grid-template-areas:
    "badge badge"
    "head list"
    "rights list"
    "cta cta";
  background: linear-gradient(180deg, #1f1f27 0%, #17171c 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px -12px rgba(79, 70, 229, 0.45), 0 48px 96px rgba(0, 0, 0, 0.4);
}
.offer--launch .offer__price { font-size: clamp(2.4rem, 1.4rem + 2.8vw, 4.4rem); letter-spacing: -0.045em; }
.offer--launch .offer__cta { align-self: stretch; justify-self: stretch; margin-top: var(--s-3); }
/* Écrans peu hauts (portables 768 et 720 px) : le panneau empilé doit tenir dans la hauteur */
@media (min-width: 900px) and (max-height: 860px) {
  .offer--launch { --fh: min(21svh, calc((min(100vw, 84rem) - 2 * var(--gutter)) / 3.7)); }
  .offer--launch .offer__card { padding-block: 1.1rem; }
  .offer--launch .offer__badge { margin-bottom: 0; }
  .offer--launch .offer__price { font-size: clamp(2.2rem, 1.2rem + 2.2vw, 3.4rem); }
  .offer--launch .offer__cta { margin-top: var(--s-2); min-height: 3.1rem; padding-block: 0.6rem; }
  .offer--launch .ruler { margin-top: 0.8rem; }
}

.offres__foot { padding-block: var(--s-7); }
/* Conditions communes, options, offres à part : trois blocs sous les panneaux */
.offres__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.offres__bloc { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface-grad); box-shadow: var(--shadow-sm); }
.offres__bloc--amorce { background: linear-gradient(180deg, var(--lilas) 0%, #fbfaff 100%); }
.offres__bloc-titre { font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-1); font-weight: 640; letter-spacing: -0.02em; }
.offres__liste { display: grid; gap: 0.55rem; margin-top: var(--s-4); color: var(--gray); font-size: 0.95rem; font-weight: 550; line-height: 1.5; }
.offres__liste li { position: relative; padding-left: 1.1rem; }
.offres__liste li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--indigo); }
.offres__liste strong { color: var(--ink); font-weight: 750; }
.offers__credit, .offers__hint { margin-top: var(--s-2); color: var(--gray-2); font-size: 0.88rem; }
@media (max-width: 899px) { .offres__details { grid-template-columns: 1fr; } }

/* Empilement : chaque offre glisse par-dessus la précédente (grands écrans seulement,
   quand tout le panneau tient dans la hauteur ; jamais en mouvement réduit) */
@media (min-width: 900px) and (min-height: 700px) {
  .motion-ok .offer { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
  .motion-ok .offer__inner { width: 100%; }
  .motion-ok .offer + .offer { box-shadow: 0 -1px 0 rgba(20, 20, 30, 0.06), 0 -24px 48px -24px rgba(20, 20, 30, 0.22); }
}

@media (max-width: 899px) {
  .offer { --fh: calc((100vw - 2 * var(--gutter)) / 1.9); }
  /* Téléphone : le cadre long passe en 2:1 pour garder une hauteur lisible ; la règle dit 60 s */
  .offer--launch { --fh: calc((100vw - 2 * var(--gutter) - 10px) / 2); }
  .frame--329 { aspect-ratio: 2 / 1; }
  .ruler--60 { width: calc(var(--fh) * 2); }
  .offer--kit { --fh: calc((100vw - 2 * var(--gutter) - 2.2rem) / 3.45); }
  .offer__inner { padding-top: var(--s-8); gap: var(--s-6); }
  .frame { border-width: 4px; border-radius: 14px; }
  .frames--kit { gap: 0.9rem; }
  .frames--kit .frame > .media__poster,
  .frames--kit .frame > .media__video,
  .frames--kit .frame > .media__mirror { border-radius: 10px; }
  .frame__tag { left: -4px; font-size: 0.875rem; }
  .ruler--30 { width: calc(var(--fh) * 16 / 9); max-width: 100%; }
  .offer__card,
  .offer--launch .offer__card {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "head" "list" "rights" "cta";
    gap: var(--s-4);
  }
  .offer__includes + .offer__list { margin-top: 2rem; }
  .offer__cta { justify-self: start; }
  .offres__index { grid-template-columns: 1fr; max-width: 22rem; }
  .offres__jump { flex-direction: row; justify-content: space-between; align-items: baseline; min-height: 3.25rem; }
  .offres__jump::before { top: 50%; margin-top: -0.275rem; }
}
@media (max-width: 419px) {
  .offer__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Portfolio : nos films, cartes vidéo arrondies
   -------------------------------------------------------------------------- */

.portfolio { background: var(--surface-grad); color: var(--ink); }
.portfolio__head { margin-bottom: var(--s-8); }
.films {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.film {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .film:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
}
.film__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink);
}
.film__media .media__poster,
.film__media .media__video { transition: transform 900ms var(--ease-out), opacity 380ms var(--ease-out); }
.film__media .media__btn { position: absolute; right: var(--s-4); bottom: var(--s-4); }
@media (hover: hover) and (pointer: fine) {
  .film:hover .film__media .media__poster,
  .film:hover .film__media .media__video { transform: scale(1.035); }
}
.film__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5); flex: 1; }
.film__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.24rem 0.75rem 0.24rem 0.6rem;
  border-radius: var(--pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--gray);
  font-size: 0.875rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.film__status::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--indigo); }
.film__title {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  font-weight: 640;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.film__legal { text-wrap: pretty; margin-top: auto; padding-top: var(--s-4); color: var(--gray-2); font-size: 0.88rem; font-weight: 600; line-height: 1.45; }
.film__product { color: var(--gray-2); font-size: 0.92rem; font-weight: 700; }
.film__concept { margin-top: var(--s-2); max-width: 34rem; color: var(--gray); font-size: 0.98rem; line-height: 1.55; text-wrap: pretty; }
.film__open { align-self: flex-start; margin-top: var(--s-4); }

.film--next {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--surface-grad);
  box-shadow: 0 0 0 1px var(--line);
}
.film--next .film__body { padding: 0; }
.film--next .film__status::before { background: var(--gray-3); }
.film--next .film__title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem); }
.film--next .link-quiet { margin-top: var(--s-2); }
.film__empty { display: flex; align-items: flex-end; gap: 0.7rem; flex: none; height: 5.5rem; }
.film__empty-frame { display: block; height: 100%; border-radius: 10px; border: 2px dashed; background: var(--white); }
.film__empty-frame--169 { aspect-ratio: 16 / 9; border-color: var(--indigo); }
.film__empty-frame--11 { aspect-ratio: 1; border-color: var(--peche-detail); }
.film__empty-frame--916 { aspect-ratio: 9 / 16; border-color: var(--lilas-detail); }

/* Film mis en avant (02/11/2026) : grand cadre sur toute la largeur, texte à droite. */
.film--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; }
/* Le cadre remplit sa colonne et la hauteur de la ligne (texte à droite), au lieu d'imposer un 16:9 qui déborderait sur le texte */
.film--feature .film__media { aspect-ratio: auto; height: 100%; min-height: 24rem; }
.film--feature .film__body { padding: var(--s-6) var(--s-6) var(--s-5); justify-content: center; }
.film--feature .film__title { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); }

/* Entrée des cartes de films (une fois, mouvement autorisé) : le cadre s'ouvre, l'image se pose. */
.motion-ok.sc-anim .film[data-reveal] .film__media { clip-path: inset(0 0 0 0 round 16px); transition: clip-path 1100ms var(--ease-out); }
.motion-ok.sc-anim .film[data-reveal]:not(.is-in) .film__media { clip-path: inset(9% 7% 9% 7% round 16px); }
.motion-ok.sc-anim .film[data-reveal]:not(.is-in) .film__media .media__poster { transform: scale(1.12); }
.motion-ok.sc-anim .film[data-reveal] .film__body { transition: opacity 700ms 180ms var(--ease-out), transform 700ms 180ms var(--ease-out); }
.motion-ok.sc-anim .film[data-reveal]:not(.is-in) .film__body { opacity: 0.001; transform: translateY(14px); }
.motion-ok.sc-anim .film--next[data-reveal]:not(.is-in) { opacity: 0.001; }
.motion-ok.sc-anim .film--next[data-reveal] { transition: opacity 700ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out); }

@media (max-width: 820px) {
  .films { grid-template-columns: 1fr; }
  .film--feature { display: flex; }
  .film--feature .film__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .film--feature .film__body { padding: var(--s-4); }
  .film--next { flex-direction: column; align-items: flex-start; }
  .film__empty { height: 4rem; }
  .film__body { padding: var(--s-4); }
}

/* --------------------------------------------------------------------------
   Processus (sauge) : cinq cartes sur un rail, étiquettes flottantes inclinées
   -------------------------------------------------------------------------- */

.processus { background: linear-gradient(180deg, var(--sauge) 0%, #f5faf7 100%); }
.steps-wrap { position: relative; }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
}
.steps__rail {
  position: absolute;
  left: 0.55rem;
  right: 0;
  top: 0.55rem;
  height: 3px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgba(31, 107, 79, 0.18);
}
.steps__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sauge-detail);
  transform-origin: left center;
  transform: scaleX(1);
}
.step {
  position: relative;
  isolation: isolate;
  padding: calc(2.25rem + var(--s-5)) var(--s-5) var(--s-5);
}
/* La carte (sous le point du rail) */
.step::before {
  content: "";
  position: absolute;
  inset: 2.25rem 0 0;
  z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--surface-grad);
  box-shadow: var(--shadow);
}
.step__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--sauge);
  border: 3px solid var(--sauge-detail);
  transition: background-color 300ms var(--ease-out);
}
.step.is-lit .step__dot, .motion-reduce .step__dot, .no-js .step__dot { background: var(--sauge-detail); }
.step__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-2);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.step__text { margin-top: var(--s-3); color: var(--gray); font-size: 0.98rem; }
.step__day { margin-bottom: var(--s-2); color: var(--sauge-detail); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
/* Étiquette flottante (décor aria-hidden : texte déjà présent sur la page) */
.step__tag {
  position: absolute;
  right: -0.4rem;
  top: 1.35rem;
  z-index: 1;
  padding: 0.3rem 0.75rem;
  border-radius: var(--pill);
  background: var(--indigo);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25), 0 8px 20px rgba(79, 70, 229, 0.35);
  transform: rotate(-8deg);
  pointer-events: none;
}
.motion-ok.sc-anim .step__tag { opacity: 0; transform: rotate(-18deg) scale(0.7); transition: opacity 400ms var(--ease-out), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.motion-ok.sc-anim .step.is-lit .step__tag { opacity: 1; transform: rotate(-8deg); }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: var(--s-5); padding-left: var(--s-6); }
  .steps__rail { left: 0.55rem; right: auto; top: 0.55rem; bottom: 0.55rem; width: 3px; height: auto; margin: 0 0 0 -1px; }
  .steps__fill { transform-origin: center top; transform: scaleY(1); }
  .step { padding: var(--s-5); }
  .step::before { inset: 0; }
  .step__dot { left: calc(-1 * var(--s-6)); top: 1.6rem; }
  .step__tag { top: -0.7rem; right: 0.8rem; }
}

/* --------------------------------------------------------------------------
   Nos engagements : quatre cartes (à la place de l'ancien tableau comparatif)
   -------------------------------------------------------------------------- */

.engagements { background: var(--white); color: var(--ink); }
.engagements__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: start;
}
.engagements__head { margin-bottom: 0; }
.engagements__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.engagement { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--surface-grad); box-shadow: var(--shadow); }
.engagement__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-2);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.engagement__title::before { content: ""; display: block; width: 2rem; height: 3px; margin-bottom: var(--s-3); border-radius: 2px; background: var(--indigo); }
.engagement__text { margin-top: var(--s-3); color: var(--gray); font-size: 0.98rem; }

@media (max-width: 900px) {
  .engagements__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 560px) {
  .engagements__list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ (surface claire)
   -------------------------------------------------------------------------- */

.faq-section { background: var(--surface); color: var(--ink); }
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-8);
  align-items: start;
}
.faq__head { margin-bottom: 0; }
.faq__list { display: grid; gap: var(--s-3); }
.faq__item { border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow 240ms var(--ease-out); }
.faq__item[open] { box-shadow: var(--shadow); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: var(--s-4) 3.5rem var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-ui) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.45rem;
  border-right: 2.5px solid var(--indigo);
  border-bottom: 2.5px solid var(--indigo);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.faq__item[open] summary::after { transform: translateY(0.3rem) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { color: var(--indigo); }
}
.faq__item p { padding: 0 3.5rem var(--s-5) var(--s-5); color: var(--gray); max-width: 42rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] p { animation: flou 420ms var(--ease-out) both; }
}

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   Contact : carton de fin sombre, halos indigo, formulaire en carte claire
   -------------------------------------------------------------------------- */

.section--contact { overflow: clip; }
.section--contact::before,
.section--contact::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.section--contact::before { left: -10%; top: -20%; width: 55%; height: 80%; background: radial-gradient(closest-side, rgba(79, 70, 229, 0.32), transparent); filter: blur(20px); }
.section--contact::after { right: -5%; bottom: -30%; width: 50%; height: 70%; background: radial-gradient(closest-side, rgba(165, 180, 252, 0.14), transparent); }
.contact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.contact__title { font-size: clamp(3rem, 1.6rem + 5vw, 7rem); line-height: 0.95; letter-spacing: -0.045em; }
.contact__booking { margin-top: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.contact__alt { max-width: 30rem; color: var(--fg-soft); font-size: 0.95rem; }
.contact__email { margin-top: var(--s-5); color: var(--fg-soft); }
.contact__email a { color: var(--on-dark); font-weight: 700; }

.form {
  position: relative;
  padding: var(--s-6);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 64px -12px rgba(79, 70, 229, 0.4), 0 48px 96px rgba(0, 0, 0, 0.35);
  --focus: var(--indigo);
}
.form__note {
  margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1.5px dashed var(--indigo);
  border-radius: var(--radius);
  background: #f5f5ff;
  font-size: 0.92rem;
  color: var(--gray);
}
.form__note strong { color: var(--ink); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s-4); }
.field__label { font-size: 0.9rem; font-weight: 700; color: var(--gray); }
.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--gray-3);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.field__input:focus-visible { outline-offset: 1px; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12); }
.field__textarea { min-height: 8rem; resize: vertical; }
.field__select { position: relative; }
.field__select select { appearance: none; padding-right: 2.4rem; }
.field__select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.4rem;
  border-right: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg);
  pointer-events: none;
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
/* Le formulaire est une carte claire dans la section sombre : contour de focus indigo foncé */
.theme-sombre .form .btn--primary { --focus: var(--indigo); box-shadow: var(--shadow-btn); }
.form__status { color: var(--indigo); font-size: 0.92rem; font-weight: 650; }
.form__rgpd { margin-top: var(--s-4); color: var(--gray-2); font-size: 0.85rem; line-height: 1.5; }
.form__rgpd a, .form__note a { color: var(--ink); font-weight: 700; }
.form__note[hidden] { display: none; }
/* Piège à robots : hors écran, jamais visible ni focalisable */
.field--piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 560px) {
  .form { padding: var(--s-5); }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   Pied de page (encre)
   -------------------------------------------------------------------------- */

.site-footer { padding-block: var(--s-7) var(--s-6); background: var(--ink); color: var(--on-dark); border-top: 1px solid var(--line-dark); font-size: 0.92rem; --focus: var(--indigo-light); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--s-6) var(--s-7); align-items: start; }
.site-footer__brand { font-weight: 750; font-size: 1.05rem; }
.site-footer__desc { margin-top: var(--s-2); max-width: 24rem; color: var(--on-dark-soft); }
.site-footer__id { display: grid; gap: 0.2rem; color: var(--on-dark-soft); }
.site-footer__id a { color: var(--on-dark); font-weight: 700; }
.site-footer__links { display: grid; gap: 0.1rem; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--on-dark-soft); }
.site-footer__copy { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); font-size: 0.85rem; }
@media (max-width: 820px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* --------------------------------------------------------------------------
   Lecteur plein écran (<dialog> modal) : vidéo avec le son, fond d'encre
   -------------------------------------------------------------------------- */

.lecteur {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  --focus: var(--indigo-light);
}
.lecteur:not([open]) { display: none; }
.lecteur::backdrop { background: rgba(10, 10, 14, 0.98); }
.lecteur.is-manuel { background: rgba(10, 10, 14, 0.98); } /* repli sans showModal */
.lecteur__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: min(100%, 100rem);
  height: 100%;
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.5rem) var(--gutter);
  overflow: auto;
}
.lecteur__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.lecteur__kicker { color: var(--on-dark-muted); font-size: 0.82rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.lecteur__title {
  margin-top: 0.15rem;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1;
}
.lecteur__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  color: var(--on-dark);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.lecteur__stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* La vidéo garde son 16:9 et tient dans la place restante, en largeur comme en hauteur */
.lecteur__video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius);
}
.lecteur__concept { max-width: 60rem; font-size: var(--step-0); }
.lecteur__note { color: var(--indigo-light); font-size: 0.9rem; font-weight: 700; }
.lecteur__legal, .lecteur__hint { color: var(--on-dark-muted); font-size: 0.85rem; }
.lecteur-ouvert, .lecteur-ouvert body { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .lecteur__close:hover { background: rgba(255, 255, 255, 0.18); }
}

/* --------------------------------------------------------------------------
   Pages légales (mentions légales, CGV, confidentialité)
   -------------------------------------------------------------------------- */

.legal { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--section-space); background: var(--white); color: var(--ink); }
.legal__inner { max-width: 48rem; }
.legal h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-3);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.legal__meta { margin-top: var(--s-4); color: var(--gray-2); font-size: 0.95rem; }
.legal__sommaire { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); background: var(--surface-grad); box-shadow: var(--shadow-sm); }
.legal__sommaire p { margin: 0; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.legal__sommaire ol { display: grid; gap: 0.25rem; margin-top: var(--s-2); padding-left: 1.3rem; list-style: decimal; font-weight: 600; }
.legal__sommaire li { margin: 0; color: var(--ink); }
.legal h2 {
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--step-2);
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.1;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal h3 { margin-top: var(--s-5); font-size: var(--step-1); font-weight: 750; }
.legal p, .legal li { margin-top: var(--s-3); color: var(--gray); line-height: 1.65; }
.legal li { margin-top: var(--s-2); }
.legal ul { padding-left: 1.3rem; list-style: disc; }
.legal ol { padding-left: 1.4rem; list-style: decimal; }
.legal strong { color: var(--ink); }
.legal a { color: var(--ink); text-decoration-color: var(--indigo); }
.legal table { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-size: 0.95rem; }
.legal th, .legal td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; color: var(--gray); }
.legal th { color: var(--ink); font-weight: 750; }
.legal__retour { margin-top: var(--s-8); }
@media (max-width: 640px) {
  .legal table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Apparitions (posées par script.js, uniquement sans préférence de mouvement réduit)
   -------------------------------------------------------------------------- */

.motion-ok.sc-anim [data-fade]:not(.is-in) { opacity: 0.001; filter: blur(5px); transform: translateY(12px); }
.motion-ok.sc-anim [data-fade] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }

/* --------------------------------------------------------------------------
   Mouvement réduit : tout est présent et net, rien ne bouge
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero__title, .hero__mot, .hero__in, [data-fade] { opacity: 1 !important; filter: none !important; transform: none !important; }
  .film[data-reveal], .film[data-reveal] .film__body, .film[data-reveal] .media__poster { opacity: 1 !important; transform: none !important; }
  .film[data-reveal] .film__media { clip-path: none !important; }
  .btn::before { display: none; }
}