/* ==========================================================================
   La Zone: site styles
   Order: tokens, base, layout, components, home sections, inner pages, motion.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Tokens ------------------------------------------------------------------ */

:root {
  color-scheme: dark;
  interpolate-size: allow-keywords;

  /* Palette "Braise": black, with red glowing through it */
  --noir: #000000;
  --charbon: #0e0909;
  --braise: #1b0f10;
  --braise-2: #3a1a1e;
  --rouge: #d8102a;        /* buttons and fills: white text passes AA (5.2:1) */
  --rouge-vif: #e4172f;    /* hover */
  --rouge-clair: #ff4d5a;  /* small accents on black (6.3:1) */
  --glow: 255 30 52;       /* glow channels, full-strength red: rgb(var(--glow) / alpha); also colours the background beams */
  --beams-intensity: 0.45; /* background beams strength, 0 to 1: kept low so black dominates and the red accents stand out */
  --beams-calm: 0.3;       /* share of that strength left below the hero, where the reading starts */
  --ivoire: #f5efec;
  --cendre: #ae9f9f;
  --line: rgb(245 239 236 / 0.14);
  --line-strong: rgb(245 239 236 / 0.3);
  --blanc-80: rgb(255 255 255 / 0.84);

  /* Type */
  --font-display: "Anybody", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Playfair Display", Georgia, "Times New Roman", serif; /* italic only: the red key words */
  --display-wdth: 92;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --fs-h2: clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem);
  --fs-h1: clamp(2.625rem, 1.2rem + 5.6vw, 6rem);

  /* Space */
  --gutter: clamp(16px, 4.5vw, 64px);
  --section-y: clamp(96px, 13vw, 184px);
  --max: 1320px;
  --header-h: 68px;

  /* Shape: frames are the biggest radius, pills are for actions only */
  --r-frame: 28px;
  --r-card: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-flick: cubic-bezier(0.12, 0.8, 0.18, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 900px) {
  :root {
    --display-wdth: 118;
    --header-h: 80px;
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noir);
  color: var(--ivoire);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

a { color: inherit; }

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

h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

[hidden] { display: none !important; }

:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  padding: 0;
}

::selection {
  background: var(--rouge);
  color: #fff;
}

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

.on-glow :focus-visible { outline-color: #fff; }

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

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ivoire);
  color: var(--noir);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus { top: 12px; }

/* Type -------------------------------------------------------------------- */

h1,
h2,
.display {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 750;
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--cendre);
  max-width: 34em;
  text-wrap: pretty;
}

.on-glow .lead { color: var(--blanc-80); }

/* Key words: a word or two per headline, in a red semi-cursive italic. Wrap them in <em>. */
h1 em,
h2 em,
h3 em,
.footer__slogan em {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: normal;
  font-synthesis: none;
  font-variant-numeric: lining-nums; /* "100 000" in full-height figures */
  font-size: 1.04em;
  letter-spacing: 0;
  color: var(--rouge-clair);
  text-shadow: 0 0 0.6em rgb(var(--glow) / 0.35);
}

/* Hero intros sit on the full-strength beams: brighter text with a dark halo that
   only shows where light passes behind it */
.stage__copy .lead,
.page-hero .lead,
.simple .lead {
  color: var(--blanc-80);
  text-shadow: 0 0 2px rgb(0 0 0 / 0.9), 0 0 10px rgb(0 0 0 / 0.8), 0 0 22px rgb(0 0 0 / 0.5);
}

.prose {
  max-width: 36em;
  text-wrap: pretty;
}

.prose p + p { margin-top: 1em; }

.muted { color: var(--cendre); }

/* Layout ------------------------------------------------------------------ */

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* Translucent, so the background beams glow through, dimmer than elsewhere */
.section--charbon { background: rgb(14 9 9 / 0.72); }

/* Background beams: drawn by main.js on a low-resolution canvas; the upscale softens them */
.beams {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

.beams.is-on { opacity: 1; }

/* Cursor glow: a red light that trails the mouse (main.js). "screen" adds its light to
   whatever is under it: a red glow on black, a brighter red on the red buttons, while
   white text stays white. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle closest-side,
    rgb(255 92 104) 0%,
    rgb(var(--glow)) 14%,
    rgb(var(--glow) / 0.75) 22%,
    rgb(var(--glow) / 0.35) 36%,
    rgb(var(--glow) / 0.14) 60%,
    rgb(var(--glow) / 0.04) 82%,
    transparent
  );
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Black sections lit by a red glow (the offers, the final call to action).
   The glow is a soft shape that fades out before it reaches any edge. */
.section--glow {
  isolation: isolate;
  overflow: clip;
  color: var(--ivoire);
}

.section--glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: -22vmax;
  width: 64vmax;
  height: 64vmax;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.24), rgb(var(--glow) / 0.07) 60%, transparent);
}

/* The last call to action: light rising from the bottom edge, like a horizon */
.cta.section--glow::before {
  top: auto;
  bottom: -46vmax;
  left: 50%;
  width: 110vmax;
  height: 80vmax;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.5), rgb(var(--glow) / 0.14) 55%, transparent);
}

.section-head {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 54rem;
  margin-bottom: clamp(48px, 7vw, 96px);
}

@media (min-width: 900px) {
  .section-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(32px, 6vw, 96px);
  }

  /* Around 900 px these heading columns are narrow: scale the type with them, so long
     words like "personnalisé" still fit */
  .section-head--split > h2,
  .method__intro > h2,
  .service h2 { font-size: min(var(--fs-h2), 5.2vw); }

  /* The About title shares the hero with the photo */
  .page-hero .split h1 { font-size: min(var(--fs-h1), 6.2vw, 5.6rem); }
}

.split {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .split--wide-text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.split__text {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  justify-items: start;
}

/* Components: buttons and links -------------------------------------------- */

.btn {
  --btn-bg: var(--rouge);
  --btn-fg: #fff;
  --btn-bd: transparent;
  --btn-glow: 0 0 0 1px rgb(var(--glow) / 0.3), 0 8px 30px -10px rgb(var(--glow) / 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--btn-glow);
  transition:
    background-color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.25s var(--ease-out);
}

/* The primary button glows red, and burns brighter on hover */
.btn:hover {
  --btn-bg: var(--rouge-vif);
  --btn-glow: 0 0 0 1px rgb(var(--glow) / 0.5), 0 0 28px rgb(var(--glow) / 0.6), 0 14px 48px -10px rgb(var(--glow) / 1);
}

.btn:active { transform: scale(0.97); }

.btn--ghost,
.btn--light,
.btn--ghost-light { --btn-glow: 0 0 0 0 transparent; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ivoire);
  --btn-bd: var(--line-strong);
}

.btn--ghost:hover {
  --btn-bg: rgb(245 239 236 / 0.06);
  --btn-bd: var(--ivoire);
  --btn-glow: 0 0 0 0 transparent;
}

.btn--light {
  --btn-bg: var(--ivoire);
  --btn-fg: var(--noir);
}

.btn--light:hover {
  --btn-bg: #fff;
  --btn-glow: 0 14px 44px -12px rgb(255 255 255 / 0.35);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.55);
}

.btn--ghost-light:hover {
  --btn-bg: rgb(255 255 255 / 0.1);
  --btn-bd: #fff;
  --btn-glow: 0 0 0 0 transparent;
}

.btn--sm {
  min-height: 44px;
  padding: 0 20px;
}

.btn--lg {
  min-height: 60px;
  padding: 0 32px;
  font-size: 1.0625rem;
}

/* "→" after a label slides forward on hover */
.btn__arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.link {
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.2s;
}

.link:hover { text-decoration-color: currentColor; }
.on-glow .link { text-decoration-color: rgb(255 255 255 / 0.5); }
.on-glow .link:hover { text-decoration-color: #fff; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.6);
  color: var(--ivoire);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.icon-btn:hover {
  background: rgb(0 0 0 / 0.85);
  border-color: var(--ivoire);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

/* Components: header and menu ---------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  view-transition-name: site-header;
  transition:
    transform 0.45s var(--ease-out),
    background-color 0.3s,
    border-color 0.3s;
}

.site-header.is-scrolled {
  background: rgb(0 0 0 / 0.82);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.site-header.is-hidden { transform: translateY(-100%); }

.menu-open .site-header {
  transform: none;
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}

/* The logo: the light bulb in a speech bubble, then "LA / ZONE", all in red. One SVG, so it
   scales as a block; the wordmark is set in Barlow Condensed, held to the logo's widths. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: rgb(var(--glow));
  text-decoration: none;
}

.brand__logo {
  display: block;
  width: auto;
  height: 46px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgb(var(--glow) / 0.35));
}

.brand__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand__logo text {
  fill: currentColor;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
}

.brand__la { font-size: 146px; }
.brand__zone { font-size: 233px; }

.nav {
  display: none;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
  margin-left: auto;
}

.nav a {
  position: relative;
  padding-block: 8px;
  color: var(--cendre);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  transition: color 0.2s;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--ivoire); }

.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.lang {
  display: none;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.lang:hover {
  color: var(--ivoire);
  border-color: var(--line-strong);
}

.header-cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 4px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.menu-toggle__icon {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rouge);
  box-shadow: 0 0 18px rgb(var(--glow) / 0.6);
}

.menu-toggle__icon i {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out);
}

.menu-toggle__icon i:first-child { top: 14px; }
.menu-toggle__icon i:last-child { top: 20px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child {
  top: 17px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child {
  top: 17px;
  transform: rotate(-45deg);
}

@media (min-width: 900px) {
  .nav,
  .lang { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* Small phones: a slightly smaller logo keeps it and the menu button on one line */
@media (max-width: 599px) {
  .site-header__inner { gap: 12px; }

  .brand__logo { height: 40px; }
}

@media (max-width: 359px) {
  .menu-toggle { padding: 0 3px; }

  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 32px) var(--gutter) max(32px, env(safe-area-inset-bottom));
  background:
    radial-gradient(90vmax 70vmax at 100% 0%, rgb(var(--glow) / 0.26), transparent 60%),
    var(--noir);
  clip-path: circle(0 at var(--mx, calc(100% - 40px)) var(--my, 34px));
  visibility: hidden;
  transition:
    clip-path 0.7s var(--ease-in-out),
    visibility 0s 0.7s;
}

.menu.is-open {
  clip-path: circle(150vmax at var(--mx, calc(100% - 40px)) var(--my, 34px));
  visibility: visible;
  transition:
    clip-path 0.7s var(--ease-in-out),
    visibility 0s;
}

.menu__links {
  display: grid;
  gap: 4px;
}

.menu__links a {
  display: block;
  padding: 4px 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110;
  font-size: clamp(2.5rem, 12vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.3s, transform 0.3s;
}

.menu__links a[aria-current="page"] { color: var(--rouge-clair); }

.menu.is-open .menu__links a {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.18s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.24s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.3s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.36s; }

.menu__foot {
  display: grid;
  gap: 20px;
  margin-top: auto;
  padding-top: 32px;
}

.menu__foot .btn { width: 100%; }

.menu__lang {
  justify-self: start;
  color: var(--cendre);
  font-weight: 600;
}

html.menu-open { overflow: hidden; }

/* Components: frames for photos and videos --------------------------------- */

.slot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-frame);
  background:
    radial-gradient(80% 60% at 50% 40%, var(--braise), transparent 75%),
    var(--charbon);
  color: var(--cendre);
  isolation: isolate;
}

/* Viewfinder corners: a camera cue that disappears once real media is in */
.slot::before,
.viewfinder {
  content: "";
  position: absolute;
  inset: clamp(14px, 2vw, 22px);
  pointer-events: none;
  color: rgb(245 239 236 / 0.38);
  background:
    linear-gradient(currentColor 0 0) top left / 26px 2px,
    linear-gradient(currentColor 0 0) top left / 2px 26px,
    linear-gradient(currentColor 0 0) top right / 26px 2px,
    linear-gradient(currentColor 0 0) top right / 2px 26px,
    linear-gradient(currentColor 0 0) bottom left / 26px 2px,
    linear-gradient(currentColor 0 0) bottom left / 2px 26px,
    linear-gradient(currentColor 0 0) bottom right / 26px 2px,
    linear-gradient(currentColor 0 0) bottom right / 2px 26px;
  background-repeat: no-repeat;
}

.slot:has(img, video)::before,
.slot:has(img, video) .slot__label { display: none; }

.slot img,
.slot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot--portrait { aspect-ratio: 4 / 5; }
.slot--reel { aspect-ratio: 9 / 16; }
.slot--wide { aspect-ratio: 16 / 10; }
.slot--square { aspect-ratio: 1; }

.slot__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: var(--fs-xs);
  font-weight: 550;
  text-align: center;
}

.slot__label svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Home: the stage (hero + scroll-driven video) ------------------------------ */

.stage {
  --e: 0;
  --t: 0px;
  --r: 0px;
  --b: 0px;
  --l: 0px;
  --wx: 0px;
  --wy: 0px;
  --rad: var(--r-frame);
  position: relative;
  height: 250vh;
}

.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.stage__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34vmax 34vmax at calc(50% + var(--wx)) calc(50% + var(--wy)), rgb(var(--glow) / 0.3), transparent 70%),
    radial-gradient(16vmax 16vmax at calc(50% + var(--wx) + 9vmax) calc(50% + var(--wy) + 16vmax), rgb(255 90 40 / 0.14), transparent 70%);
  opacity: calc(1 - var(--e) * 1.6);
  will-change: opacity;
}

.stage__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  clip-path: inset(
    calc(var(--t) * (1 - var(--e)))
    calc(var(--r) * (1 - var(--e)))
    calc(var(--b) * (1 - var(--e)))
    calc(var(--l) * (1 - var(--e)))
    round calc(var(--rad) * (1 - var(--e)))
  );
  transition: opacity 0.7s var(--ease-out);
}

.stage.is-measured .stage__media { opacity: 1; }

/* The screen is shifted so its centre sits on the small frame, then glides back */
.stage__screen {
  position: absolute;
  inset: 0;
  background: var(--noir);
  transform: translate3d(calc(var(--wx) * (1 - var(--e))), calc(var(--wy) * (1 - var(--e))), 0);
  will-change: transform;
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The film is horizontal: on a tall phone screen, show all of it instead of cropping */
@media (orientation: portrait) {
  .stage__video { object-fit: contain; }
}

.stage__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(55% 55% at 50% 48%, #22070b 0%, var(--noir) 72%);
}

.stage.has-video .stage__placeholder { display: none; }

.stage__hint {
  display: grid;
  justify-items: center;
  gap: 14px;
  color: var(--cendre);
  font-size: var(--fs-sm);
  font-weight: 550;
}

.play-ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1.5px solid rgb(245 239 236 / 0.55);
  border-radius: 50%;
  color: var(--ivoire);
}

.play-ring svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.stage__rec {
  position: absolute;
  top: calc(clamp(14px, 2vw, 22px) + 20px);
  left: calc(clamp(14px, 2vw, 22px) + 22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ivoire);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
}

.stage__rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rouge-clair);
  box-shadow: 0 0 10px 1px rgb(var(--glow) / 0.9);
}

/* The feed of hooks that flicks past on load and stops on the video */
.stage__reel {
  position: absolute;
  top: var(--t);
  right: var(--r);
  bottom: var(--b);
  left: var(--l);
  overflow: hidden;
  border-radius: var(--rad);
  opacity: calc(1 - var(--e) * 6);
}

.stage__track {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 500%;
  transform: translateY(-80%);
}

.hook {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18% 22% 30% 11%;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 96;
  font-size: clamp(1.25rem, 1.9vw, 1.875rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hook--braise { background: var(--braise); }

.hook--rouge {
  background: var(--rouge);
  color: #fff;
}

.hook--ivoire {
  background: var(--ivoire);
  color: var(--noir);
}

.hook--window { background: transparent; }

.stage__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__side {
  position: absolute;
  right: 12px;
  bottom: 70px;
  display: grid;
  gap: 18px;
  color: #fff;
}

.stage__side svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.45));
}

.stage__who {
  position: absolute;
  left: 14px;
  right: 56px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}

/* The account picture of the reel: the logo's light bulb on black */
.stage__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #000;
  color: rgb(var(--glow));
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.85);
}

.stage__avatar svg {
  width: auto;
  height: 19px;
}

.stage__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgb(255 255 255 / 0.22);
}

.stage__progress i {
  position: absolute;
  inset: 0;
  background: var(--ivoire);
  transform: scaleX(0);
  transform-origin: left;
}

/* Copy and the invisible frame the video grows from */
.stage__layout {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 32px;
  height: 100%;
  padding-top: calc(var(--header-h) + 5vh);
  pointer-events: none;
}

.stage__copy {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  justify-items: start;
  max-width: 56rem;
  opacity: calc(1 - var(--e) * 2.2);
  transform: translate3d(0, calc(var(--e) * -7vh), 0);
  will-change: opacity, transform;
  pointer-events: auto;
}

.stage.is-past-copy .stage__copy { visibility: hidden; }

/* The slogan: three short verbs, so the type can go big */
.stage__title {
  font-size: clamp(3rem, min(1rem + 6.4vw, 12vh), 6.75rem);
  line-height: 0.95;
}

.stage__title .line:nth-child(2) > span { --i: 1; }
.stage__title .line:nth-child(3) > span { --i: 2; }

.lead__hook {
  color: var(--ivoire);
  font-weight: 600;
}

.stage__frame {
  justify-self: center;
  width: min(60vw, 250px);
  aspect-ratio: 9 / 16;
  visibility: hidden;
}

@media (min-width: 900px) {
  .stage { height: 280vh; }

  .stage__layout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    column-gap: clamp(40px, 6vw, 112px);
    padding-top: var(--header-h);
  }

  .stage__frame { width: min(22vw, 330px, 38vh); }
}

.stage__controls {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 4vw, 40px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}

.stage.is-open.has-video .stage__controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

:is(.icon-btn, .voice__play) .when-on,
:is(.icon-btn, .voice__play)[aria-pressed="true"] .when-off { display: none; }

:is(.icon-btn, .voice__play)[aria-pressed="true"] .when-on { display: block; }

.stage__cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 550;
  transform: translateX(-50%);
  opacity: calc(1 - var(--e) * 8);
}

.stage__cue i {
  position: relative;
  width: 1.5px;
  height: 32px;
  overflow: hidden;
  background: var(--line);
}

.stage__cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivoire);
  transform: translateY(-100%);
}

@media (min-width: 900px) {
  .stage__cue { display: flex; }
}

/* Static stage: no JavaScript, reduced motion, or a short landscape screen
   (html.rm is set in the head). The video simply sits below the copy, with the
   call to action right under it. */
html:not(.js) .stage,
html.rm .stage { height: auto; }

html:not(.js) .stage__sticky,
html.rm .stage__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: visible;
}

html:not(.js) .stage__layout,
html.rm .stage__layout {
  order: 1;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding-block: calc(var(--header-h) + clamp(48px, 10vw, 120px)) clamp(48px, 7vw, 80px);
}

html:not(.js) .stage__frame,
html:not(.js) .stage__reel,
html:not(.js) .stage__cue,
html:not(.js) .stage__controls,
html.rm .stage__frame,
html.rm .stage__reel,
html.rm .stage__cue,
html.rm .stage__controls { display: none; }

html:not(.js) .stage__media,
html.rm .stage__media {
  position: relative;
  inset: auto;
  order: 2;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--max);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-frame);
  clip-path: none;
  opacity: 1;
}

html:not(.js) .stage__screen,
html.rm .stage__screen { transform: none; }

/* Home: the call to action right under the video, which ends on "réserve ton appel juste en dessous" */
.next {
  position: relative;
  padding-top: clamp(56px, 8vw, 112px);
}

.next__inner {
  display: grid;
  gap: clamp(28px, 3.4vw, 40px);
  justify-items: start;
}

.next__title {
  max-width: 15ch;
  font-size: clamp(2.125rem, 1.3rem + 2.4vw, 3.75rem);
}

.next__cta {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.next__note {
  color: var(--cendre);
  font-size: var(--fs-sm);
}

/* Wide screens: the question on the left, the buttons on the right */
@media (min-width: 1100px) {
  .next__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(40px, 6vw, 96px);
  }
}

/* Phones: two full-width buttons, the call first */
@media (max-width: 599px) {
  .next__cta,
  .next__cta .actions { width: 100%; }

  .next__cta .btn { flex: 1 1 100%; }
}

/* Home: audiences ------------------------------------------------------------ */

.audiences__list {
  display: grid;
  gap: 48px;
}

@media (min-width: 900px) {
  .audiences__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 64px);
  }
}

.audience {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.audience p {
  color: var(--cendre);
  max-width: 30em;
}

.glyph {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--ivoire);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph .accent-rouge { stroke: var(--rouge); }
.glyph .accent-clair { stroke: var(--rouge-clair); }
.glyph .fill-rouge { fill: var(--rouge-clair); stroke: none; }

/* Home: notifications (before / after) ----------------------------------- */

.notify__grid {
  display: grid;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

@media (min-width: 900px) {
  .notify__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
}

.notify__copy {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  justify-items: start;
}

.switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  isolation: isolate;
}

.switch__btn {
  position: relative;
  z-index: 1;
  min-width: 120px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cendre);
  font-weight: 650;
  cursor: pointer;
  transition: color 0.35s var(--ease-out);
}

.switch__btn[aria-pressed="true"] { color: #fff; }

.switch__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  z-index: 0;
  width: calc(50% - 5px);
  border-radius: var(--r-pill);
  background: var(--braise-2);
  transition:
    transform 0.5s var(--ease-out),
    background-color 0.5s,
    box-shadow 0.5s;
}

/* "After" lights up */
.switch[data-active="apres"] .switch__thumb,
.switch[data-active="after"] .switch__thumb {
  transform: translateX(100%);
  background: var(--rouge);
  box-shadow: 0 0 24px rgb(var(--glow) / 0.55), 0 8px 30px -8px rgb(var(--glow) / 1);
}

/* The ratio is a minimum: on a small screen the phone grows taller instead of cutting off a notification */
.phone {
  position: relative;
  width: min(100%, 400px);
  margin-inline: auto;
  padding: 26px 14px 30px;
  aspect-ratio: 9 / 16.5;
  border: 1px solid var(--line-strong);
  border-radius: 46px;
  background:
    radial-gradient(130% 60% at 50% 0%, #a8142b 0%, #3d0710 42%, var(--noir) 78%);
  box-shadow: 0 0 70px -20px rgb(var(--glow) / 0.24), 0 40px 130px -36px rgb(var(--glow) / 0.4);
}

.phone::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 92px;
  height: 26px;
  border-radius: var(--r-pill);
  background: #000;
  transform: translateX(-50%);
}

.phone__time {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 34px 0 26px;
  color: #fff;
}

.phone__date {
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0.85;
}

.phone__clock {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 88;
  font-size: clamp(3.5rem, 12vw, 4.75rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
}

.notifs {
  display: grid;
  gap: 8px;
}

.notif {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgb(245 239 236 / 0.13);
  color: #fff;
}

.notif__app {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--braise);
}

.notif__app svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif__app--rouge {
  background: var(--rouge);
  box-shadow: 0 0 18px -2px rgb(var(--glow) / 0.75);
}
.notif__app--clair { background: var(--rouge-clair); color: var(--noir); }
.notif__app--ivoire { background: var(--ivoire); color: var(--rouge); }

.notif__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.3;
}

.notif__meta time {
  flex: none;
  font-weight: 450;
  opacity: 0.72;
}

.notif__text {
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* Small phones: a tighter lock screen, so five notifications still fit comfortably */
@media (max-width: 419px) {
  .phone {
    padding: 22px 10px 24px;
    border-radius: 40px;
  }

  .phone__time { margin: 30px 0 18px; }

  .notif {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .notif__app {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .notif__app svg {
    width: 18px;
    height: 18px;
  }

  .notif__text { font-size: 0.875rem; }
}

/* .has-reveal is set by main.js, so notifications never stay hidden without it */
.has-reveal [data-reveal] .notif {
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
}

.has-reveal [data-reveal].is-in .notif {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.has-reveal [data-reveal].is-in .notif:nth-child(2) { transition-delay: 0.12s; }
.has-reveal [data-reveal].is-in .notif:nth-child(3) { transition-delay: 0.24s; }
.has-reveal [data-reveal].is-in .notif:nth-child(4) { transition-delay: 0.36s; }

/* Home: method -------------------------------------------------------------- */

.method__grid {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}

@media (min-width: 900px) {
  .method__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(40px, 7vw, 120px);
  }

  .method__intro {
    position: sticky;
    top: calc(var(--header-h) + 48px);
  }
}

.method__intro {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  justify-items: start;
}

.steps {
  --progress: 0;
  position: relative;
  display: grid;
  padding-left: clamp(24px, 3vw, 40px);
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--line);
}

.steps::after {
  background: var(--rouge-clair);
  box-shadow: 0 0 14px rgb(var(--glow) / 0.9);
  transform: scaleY(var(--progress));
  transform-origin: top;
}

.step {
  display: grid;
  grid-template-columns: minmax(3.4rem, auto) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 36px);
  padding-block: clamp(28px, 4vw, 48px);
}

.step + .step { border-top: 1px solid var(--line); }

.step__num {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 62;
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 0.85;
  color: var(--braise-2);
  transition: color 0.5s var(--ease-out), text-shadow 0.5s var(--ease-out);
}

.step.is-active .step__num {
  color: var(--rouge-clair);
  text-shadow: 0 0 18px rgb(var(--glow) / 0.8), 0 0 52px rgb(var(--glow) / 0.55);
}

.step h3 { margin-bottom: 12px; }

.step p {
  color: var(--cendre);
  max-width: 34em;
}

html:not(.js) .step__num { color: var(--rouge-clair); }

/* Offers as packages (home and offers page): three cards side by side, no price,
   each one ending on the call ------------------------------------------------------ */

.packages {
  display: grid;
  gap: 16px;
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgb(27 15 16 / 0.94), rgb(8 5 5 / 0.94));
  transition:
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    transform 0.4s var(--ease-out);
}

.package:hover {
  border-color: rgb(var(--glow) / 0.6);
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.18), 0 34px 90px -46px rgb(var(--glow) / 0.75);
  transform: translateY(-4px);
}

.package__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A small red light before the tag */
.package__tag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rouge-clair);
  box-shadow: 0 0 10px rgb(var(--glow) / 0.8);
}

.package__name {
  margin-top: -6px;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.02;
}

.package__for { color: var(--blanc-80); }

.package .ticks {
  align-content: start;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.package__actions {
  display: grid;
  gap: 16px;
  justify-items: center;
  margin-top: auto;
  padding-top: 12px;
}

.package__actions .btn { width: 100%; }

.package__actions .link { font-size: var(--fs-sm); }

/* The most chosen offer: a red edge, and a sticker slapped on its top-right corner */
.package--featured {
  --sticker: clamp(84px, 7vw, 100px);
  border-color: rgb(var(--glow) / 0.55);
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.12), 0 34px 90px -50px rgb(var(--glow) / 0.75);
}

.package--featured .package__tag { padding-right: calc(var(--sticker) * 0.7); }

.package__sticker {
  position: absolute;
  top: calc(var(--sticker) * -0.32);
  right: max(-14px, calc(6px - var(--gutter)));
  z-index: 1;
  width: var(--sticker);
  height: var(--sticker);
  border: 3px solid var(--ivoire); /* the white edge of a die-cut sticker */
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ff5a68, var(--rouge) 55%, #9e0a1d);
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.85), 0 0 30px -6px rgb(var(--glow) / 0.65);
  transform: rotate(-12deg);
  transition: transform 0.6s var(--ease-flick);
}

.package--featured:hover .package__sticker { transform: rotate(-3deg) scale(1.07); }

.package__sticker svg {
  width: 100%;
  height: 100%;
}

.package__sticker-ring {
  fill: #fff;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
}

.package__sticker-num {
  fill: #fff;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: 31px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}

@media (min-width: 900px) {
  .packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(16px, 1.8vw, 28px);
  }

  .package__name { font-size: clamp(1.5rem, 0.95rem + 1.25vw, 2.25rem); }
}

/* Side by side, the cards share their rows: names, descriptions, lists and buttons line up */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .package {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 20px;
    }
  }
}

.ticks {
  display: grid;
  gap: 10px;
}

.ticks li {
  position: relative;
  padding-left: 26px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.on-glow .ticks li::before { color: var(--rouge-clair); }
.ticks--rouge li::before { color: var(--rouge-clair); }

/* Home: proof ---------------------------------------------------------------- */

.reels {
  display: grid;
  gap: 28px;
  max-width: 34rem; /* one column on phones and tablets, never a long thin strip */
}

@media (min-width: 900px) {
  .reels {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 36px);
  }
}

.reel-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

/* Under each voice message: what they built */
.reel-card__proof {
  color: var(--cendre);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Client voice messages (main.js, initVoice): a compact card with a red play button, the
   name, and a waveform to click or drag through. Without JavaScript, the browser's own
   audio player shows under the name instead. Sizes follow the card's width (cqi). */
.voice {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  overflow: hidden;
  border-radius: var(--r-card);
  background:
    radial-gradient(90% 130% at 0% 50%, rgb(var(--glow) / 0.1), transparent 62%),
    var(--charbon);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.5s;
}

.voice.is-playing {
  box-shadow:
    inset 0 0 0 1px rgb(var(--glow) / 0.55),
    0 0 40px -14px rgb(var(--glow) / 0.6);
}

.voice[data-voice]:not(.is-ready) { grid-template-columns: minmax(0, 1fr); }
.voice[data-voice]:not(.is-ready) :is(.voice__stage, .voice__wave) { display: none; }
.voice.is-ready .voice__audio { display: none; }

.voice__audio {
  width: 100%;
  height: 40px;
}

.voice__stage {
  position: relative;
  display: grid;
  place-items: center;
}

/* The client's profile photo is the play button: a red ring around it (like a story ring)
   that ripples out while the message plays, and a red play / pause badge on its corner */
.voice__stage::before,
.voice__stage::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
}

.voice__stage::before {
  border: 2px solid rgb(var(--glow) / 0.8);
  box-shadow: 0 0 18px -4px rgb(var(--glow) / 0.7);
}

.voice__stage::after {
  border: 1px solid rgb(var(--glow) / 0.6);
  opacity: 0;
}

.voice.is-playing .voice__stage::after { animation: voice-ring 1.8s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }

.voice__play {
  --btn: clamp(48px, 16cqi, 58px);
  position: relative;
  z-index: 1;
  display: block;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--braise);
  color: #fff;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out);
}

.voice__play:hover { transform: scale(1.05); }
.voice__play:active { transform: scale(0.97); }

.voice__play:focus-visible {
  border-radius: 50%;
  outline-color: #fff;
  outline-offset: 8px;
}

.voice__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.voice__badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border: 2px solid var(--charbon);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff6170, var(--rouge) 58%, #9c0b1e);
  box-shadow: 0 4px 14px -4px rgb(var(--glow) / 0.9);
  transition: box-shadow 0.3s;
}

.voice__play:hover .voice__badge { box-shadow: 0 4px 18px -2px rgb(var(--glow)); }

.voice__badge svg {
  width: 50%;
  height: 50%;
}

.voice__badge .when-off { translate: 8% 0; } /* the triangle looks centred a little right of centre */

/* Loading: a thin arc turns around the photo until the sound starts */
.voice__play::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  border-top-color: var(--ivoire);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}

.voice.is-loading .voice__play::after {
  opacity: 1;
  animation: voice-spin 0.8s linear infinite;
}
.voice__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.voice__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.voice__name {
  flex: none;
  color: var(--ivoire);
  font-size: 1.125rem;
  line-height: 1.2;
}

.voice__handle {
  min-width: 0;
  overflow: hidden;
  color: var(--cendre);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@container (max-width: 290px) {
  .voice__handle { display: none; }
}

.voice__time {
  flex: none;
  margin-left: auto;
  color: var(--cendre);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}

/* At rest the time shows the length; once started, how far in it is */
.voice__now { color: var(--ivoire); }

.voice:not(.is-started) .voice__now,
.voice.is-started .voice__len { display: none; }

.voice__wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5px, 0.8cqi, 3px);
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: pan-y; /* a sideways drag moves through the message, the page still scrolls */
}

.voice__wave span {
  flex: 1 1 0;
  min-width: 0;
  max-width: 3px;
  height: max(3px, calc(var(--h, 10) * 1%));
  border-radius: 99px;
  background: rgb(245 239 236 / 0.26);
  transition: background-color 0.3s, box-shadow 0.3s, scale 0.3s var(--ease-out);
}

.voice__wave:hover span { background: rgb(245 239 236 / 0.38); }

.voice__wave span.is-on {
  background: var(--rouge-clair);
  box-shadow: 0 0 6px rgb(var(--glow) / 0.6);
}

.voice__wave span.is-now {
  background: #fff;
  scale: 1 1.15;
}

.voice__wave:focus-visible { outline-offset: 4px; }

/* What clients write: screenshots in red frames that drift left (main.js, initMarquee).
   Without JavaScript, or for visitors who prefer reduced motion, it's a still row that
   scrolls sideways. */
.marquee {
  --shot-h: clamp(360px, 26vw + 180px, 480px);
  --shot-gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(56px, 8vw, 104px);
}

.marquee__viewport {
  overflow-x: auto;
  padding-block: 22px 8px; /* room for the lift and red glow on hover */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.marquee__viewport::-webkit-scrollbar { display: none; }

.marquee__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding-inline-start: var(--gutter);
}

/* Moving: the track slides under a window that fades out at both edges */
.marquee.is-moving .marquee__viewport {
  overflow-x: clip;
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee.is-moving .marquee__track {
  padding-inline-start: 0;
  will-change: transform;
}

/* As wide as its screenshot: the caption wraps under it */
.shot {
  flex: none;
  width: min-content;
  margin-inline-end: var(--shot-gap);
  scroll-snap-align: start;
}

.shot__open {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid rgb(var(--glow) / 0.75);
  border-radius: 18px;
  background: #fff;
  cursor: zoom-in;
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.12), 0 24px 60px -36px rgb(var(--glow) / 0.9);
  transition:
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

.shot__open:hover {
  border-color: var(--rouge-clair);
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.35), 0 0 26px rgb(var(--glow) / 0.35), 0 28px 70px -30px rgb(var(--glow) / 1);
  transform: translateY(-4px);
}

/* Same height for every screenshot; a wide one is fitted to small screens instead of cropped */
.shot img {
  height: var(--shot-h);
  width: auto;
  max-width: calc(100vw - 2 * var(--gutter));
  object-fit: contain;
  background: #fff;
}

.shot__caption {
  margin-top: 14px;
  color: var(--cendre);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.shot__caption strong {
  display: block;
  color: var(--ivoire);
  font-weight: 650;
}

.marquee__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.marquee__hint {
  color: var(--cendre);
  font-size: var(--fs-xs);
}

.marquee:not(.is-moving) .marquee__toggle { display: none; }

/* A screenshot opened full size, with the close button just above its corner */
.lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox[open] { animation: lightbox-in 0.45s var(--ease-out); }
.lightbox[open]::backdrop { animation: backdrop-in 0.45s ease-out; }

.lightbox__img {
  height: min(80vh, calc(92vw / var(--aspect, 0.7)));
  width: auto;
  aspect-ratio: var(--aspect, 0.7);
  border: 1.5px solid rgb(var(--glow) / 0.75);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.15), 0 40px 120px -40px rgb(var(--glow) / 0.8);
  cursor: zoom-out;
}

.lightbox__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
}

html:has(.lightbox[open]) { overflow: hidden; }

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}

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

/* Home: about teaser, FAQ, final call to action -------------------------------- */

.faq__grid,
.duo {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}

@media (min-width: 900px) {
  .faq__grid,
  .duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 7vw, 120px);
  }

  /* A narrower column: long words like "fréquentes" must still fit on one line */
  .faq__grid > h2,
  .duo > h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); }
}

.qa { border-top: 1px solid var(--line-strong); }
.qa:last-child { border-bottom: 1px solid var(--line-strong); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker { display: none; }

.qa__icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s;
}

.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out);
}

.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.qa[open] .qa__icon {
  background: var(--rouge);
  border-color: var(--rouge);
}

.qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.qa summary:hover .qa__icon { border-color: var(--ivoire); }

.qa::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.45s var(--ease-out),
    content-visibility 0.45s allow-discrete;
}

.qa[open]::details-content { block-size: auto; }

.qa__a {
  padding-bottom: 28px;
  color: var(--cendre);
  max-width: 38em;
}

.cta {
  overflow: hidden;
  text-align: left;
}

.cta__inner {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  justify-items: start;
}

.cta__title {
  font-size: clamp(2.5rem, 1.2rem + 8vw, 8.5rem);
  font-variation-settings: "wdth" 125;
  line-height: 0.92;
}

@media (max-width: 899px) {
  .cta__title { font-variation-settings: "wdth" 100; }
}

/* Footer --------------------------------------------------------------------- */

.site-footer {
  padding-top: clamp(64px, 9vw, 120px);
  border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 0.72);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  gap: 40px;
  padding-bottom: clamp(48px, 7vw, 88px);
}

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

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}

.footer__brand {
  display: grid;
  gap: 18px;
  align-content: start;
  justify-items: start;
}

.footer__brand p {
  color: var(--cendre);
  max-width: 24em;
}

.footer__brand .brand__logo { height: 64px; }

/* The Discord community, at the bottom of every page */
.discord {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 10px 20px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgb(14 9 9 / 0.85);
  text-decoration: none;
  transition:
    border-color 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

.discord:hover {
  border-color: rgb(var(--glow) / 0.6);
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.15), 0 22px 50px -28px rgb(var(--glow) / 0.9);
  transform: translateY(-2px);
}

.discord__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--rouge);
  color: #fff;
  box-shadow: 0 0 20px -4px rgb(var(--glow) / 0.7);
}

.discord__icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.discord__text {
  display: grid;
  gap: 2px;
  line-height: 1.25;
}

.discord__text strong {
  color: var(--ivoire);
  font-size: 1rem;
  font-weight: 650;
}

.discord__text span {
  color: var(--cendre);
  font-size: var(--fs-xs);
}

.discord__arrow {
  margin-left: 4px;
  color: var(--ivoire);
  transition: transform 0.35s var(--ease-out);
}

.discord:hover .discord__arrow { transform: translateX(4px); }

.footer__brand .footer__slogan {
  color: var(--ivoire);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.footer__title {
  margin-bottom: 14px;
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.footer__list {
  display: grid;
  gap: 10px;
}

.footer__list a {
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.footer__list a:hover { color: var(--rouge-clair); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-block: 24px max(24px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--cendre);
  font-size: var(--fs-xs);
}

.footer__bottom a {
  text-decoration: none;
  transition: color 0.2s;
}

.footer__bottom a:hover { color: var(--ivoire); }
.footer__bottom p { margin-right: auto; }

/* Inner pages ------------------------------------------------------------------ */

.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(56px, 10vw, 140px)) clamp(64px, 9vw, 120px);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -20vmax;
  right: -14vmax;
  width: 60vmax;
  height: 60vmax;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.26), rgb(var(--glow) / 0.08) 60%, transparent);
}

.page-hero .container {
  position: relative;
}

.page-hero .container:not(.split) {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  justify-items: start;
}

.page-hero h1 { max-width: 14ch; }

.section--tight { padding-top: 0; }

.h3 {
  font-size: var(--fs-h3);
  font-variation-settings: "wdth" 100;
  line-height: 1.12;
  letter-spacing: -0.005em;
}

/* Services detail */
.service {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

@media (min-width: 900px) {
  .service { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .service--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .service--flip .service__visual { order: -1; }
  .service__visual {
    position: sticky;
    top: calc(var(--header-h) + 48px);
  }
}

.service__text {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  justify-items: start;
}

.facts {
  display: grid;
  gap: 28px;
  width: 100%;
}

.facts > div {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.facts dt {
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.facts dd { max-width: 36em; }

/* Small interface mock-ups used as visuals on the services page */
.mock {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--braise);
}

.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mock__tag {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--rouge);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 650;
  box-shadow: 0 0 18px -2px rgb(var(--glow) / 0.65);
}

.mock__tag--clair {
  background: var(--rouge-clair);
  color: var(--noir);
}

.mock__title {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-size: 1.375rem;
  font-weight: 750;
  line-height: 1.15;
}

.mock__caption {
  color: var(--cendre);
  font-size: var(--fs-xs);
}

.checklist {
  display: grid;
  gap: 10px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgb(245 239 236 / 0.05);
  font-size: var(--fs-sm);
}

.checklist .box {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
}

.checklist .is-done .box {
  border-color: var(--rouge-clair);
  background: var(--rouge-clair);
  color: var(--noir);
  box-shadow: 0 0 12px rgb(var(--glow) / 0.65);
}

.checklist .box svg {
  width: 14px;
  height: 14px;
}

.checklist .is-done span:last-child {
  color: var(--cendre);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.chart {
  width: 100%;
  height: auto;
}

.chart .grid-line { stroke: var(--line); }
.chart .area { fill: url(#chart-fill); }

.chart .curve {
  fill: none;
  stroke: var(--rouge-clair);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart .dot { fill: var(--rouge-clair); }

.chart .axis {
  fill: var(--cendre);
  font-family: var(--font-body);
  font-size: 12px;
}

.agenda {
  display: grid;
  gap: 8px;
}

.agenda li {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px;
  border-radius: 12px;
  background: rgb(245 239 236 / 0.05);
  font-size: var(--fs-sm);
}

.agenda time {
  color: var(--cendre);
  font-variant-numeric: tabular-nums;
}

.agenda li:first-child {
  background: var(--rouge);
  color: #fff;
  box-shadow: 0 10px 32px -12px rgb(var(--glow) / 0.95);
}

.agenda li:first-child time { color: var(--blanc-80); }

/* About */
.beliefs {
  display: grid;
  gap: 0 clamp(40px, 6vw, 96px);
}

@media (min-width: 900px) {
  .beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.belief {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line-strong);
}

.belief p {
  color: var(--cendre);
  max-width: 32em;
}

.draft {
  display: grid;
  gap: 12px;
  max-width: 40em;
  padding: clamp(20px, 3vw, 32px);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-card);
  color: var(--cendre);
}

.draft strong {
  color: var(--ivoire);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.gallery {
  display: grid;
  gap: clamp(12px, 2vw, 24px);
}

@media (min-width: 700px) {
  .gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .gallery > :nth-child(1) { grid-column: 1 / 8; }
  .gallery > :nth-child(2) { grid-column: 8 / 13; margin-top: clamp(40px, 8vw, 120px); }
  .gallery > :nth-child(3) { grid-column: 3 / 9; }
}

/* Contact */
.contact__grid {
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .contact__aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

.form-title { margin-bottom: 32px; }

.form {
  display: grid;
  gap: 28px;
}

.form__row {
  display: grid;
  gap: 28px;
}

@media (min-width: 700px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label,
.field legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
}

.field__hint {
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 450;
}

.input {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgb(245 239 236 / 0.04);
  font-size: 1rem;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

textarea.input {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

.input::placeholder { color: rgb(174 159 159 / 0.7); }
.input:hover { border-color: var(--cendre); }

.input:focus {
  outline: none;
  border-color: var(--rouge-vif);
  background: rgb(var(--glow) / 0.08);
  box-shadow: 0 0 0 3px rgb(var(--glow) / 0.35);
}

.field[data-invalid] .input { border-color: var(--rouge-clair); }

.field__error {
  color: var(--rouge-clair);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.field__error:empty { display: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.chip:hover span { border-color: var(--ivoire); }

.chip input:checked + span {
  border-color: var(--rouge);
  background: var(--rouge);
  color: #fff;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--rouge-clair);
  outline-offset: 3px;
}

.consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--cendre);
  font-size: var(--fs-sm);
}

.consent input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--rouge);
}

.consent a { color: var(--ivoire); }

.honeypot {
  position: absolute;
  left: -9999px;
}

/* The booking card: dark like the offer packages, with a red edge */
.aside-card {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid rgb(var(--glow) / 0.55);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgb(27 15 16 / 0.94), rgb(8 5 5 / 0.94));
  box-shadow: 0 0 0 1px rgb(var(--glow) / 0.12), 0 34px 90px -46px rgb(var(--glow) / 0.75);
}

.aside-card > p { color: var(--blanc-80); }

.aside-card .btn { width: 100%; }

/* "Leave your number and I'll call you": the quickest way in, since every client starts with a call */
.callback {
  display: grid;
  gap: 18px;
  width: 100%;
}

.callback .field { gap: 8px; }

.aside-card .consent { color: var(--cendre); }

/* "ou": the booking calendar as the second choice */
.aside-card .callback__or {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  color: var(--cendre);
  font-size: var(--fs-xs);
}

.callback__or::before,
.callback__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.contact-list {
  display: grid;
  gap: 0;
  margin-top: 32px;
}

.contact-list > div {
  display: grid;
  gap: 4px;
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.contact-list dt {
  color: var(--cendre);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--rouge-clair); }

/* Legal and simple pages */
.legal {
  display: grid;
  gap: 40px;
  max-width: 46rem;
}

.legal section {
  display: grid;
  gap: 14px;
}

.legal h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }

.legal ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2em;
}

.legal p,
.legal li { color: var(--cendre); }

.legal strong { color: var(--ivoire); }

.notice {
  padding: 18px 22px;
  border-radius: 14px;
  background: rgb(var(--glow) / 0.12);
  border: 1px solid rgb(var(--glow) / 0.45);
  color: var(--ivoire);
  font-size: var(--fs-sm);
}

.simple {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: calc(var(--header-h) + 40px) var(--gutter) 64px;
  text-align: center;
}

.simple__inner {
  display: grid;
  gap: 24px;
  justify-items: center;
  max-width: 40rem;
}

.simple .actions { justify-content: center; }

/* Motion ------------------------------------------------------------------------ */

/* Each line is its own mask; the padding keeps accents and descenders clear of it */
.reveal-lines .line {
  display: block;
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.reveal-lines .line > span { display: block; }

.js .reveal-lines .line > span { transform: translateY(110%); }

.js .stage__copy .lead,
.js .stage__copy .actions { opacity: 0; }

.is-ready .reveal-lines .line > span {
  animation: line-up 1.05s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}

.is-ready .stage__copy .lead { animation: fade-up 0.9s var(--ease-out) 0.5s both; }
.is-ready .stage__copy .actions { animation: fade-up 0.9s var(--ease-out) 0.62s both; }
.is-ready .stage__track { animation: flick 1.9s var(--ease-flick) 0.2s both; }
.is-ready .stage__progress i { animation: progress 9s linear 2.1s both; }
.is-ready .stage__cue i::after { animation: cue 2.2s var(--ease-in-out) 2.4s 3 both; }
.stage.is-open .stage__rec i { animation: blink 1.4s steps(1, end) infinite; }

@keyframes line-up {
  from { transform: translateY(110%); }
  to { transform: none; }
}

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

@keyframes flick {
  from { transform: translateY(0); }
  to { transform: translateY(-80%); }
}

@keyframes progress {
  to { transform: scaleX(1); }
}

@keyframes cue {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes blink {
  50% { opacity: 0.2; }
}

@keyframes voice-ring {
  from {
    scale: 1;
    opacity: 0.9;
  }
  to {
    scale: 1.45;
    opacity: 0;
  }
}

@keyframes voice-spin {
  to { rotate: 1turn; }
}

::view-transition-old(root) { animation: vt-out 0.22s ease-in both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--ease-out) both; }

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal-lines .line > span { transform: none; }
  .js .stage__copy .lead,
  .js .stage__copy .actions { opacity: 1; }
  .stage__track { transform: translateY(-80%); }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}