/* =========================================================
   CopyCrunch — Lulani Favresse
   Direction artistique : bleu nuit drenché, halo turquoise
   vivant, dalles de verre noir (reprise des carrousels IG),
   boutons liquid glass.
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:target { scroll-margin-top: 6rem; }

/* ---------- Tokens ---------- */
:root {
  /* Palette de marque — issue du branding CopyCrunch */
  --navy-950: #05061a;
  --navy-900: #0a0a26;
  --navy-800: #0d0b2b;
  --navy-700: #141440;

  --teal-700: #0f6373;
  --teal-600: #12707e;
  --teal-500: #1a8f9e;
  --teal-400: #2eafbe;
  --teal-300: #5fd4e0;

  --amber:    #f2a03d;
  --amber-soft: #ffc274;

  --ink:      #f2f6f8;
  --ink-soft: rgba(242, 246, 248, 0.80);
  --ink-mute: rgba(242, 246, 248, 0.74);

  --glass-tint:   rgba(6, 7, 26, 0.52);
  --glass-edge:   rgba(255, 255, 255, 0.16);
  --glass-sheen:  rgba(255, 255, 255, 0.34);

  /* Rythme fluide */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 68ch;
  --shell: 76rem;

  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* Courbes — ease-out exponentielles, pas de rebond */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Échelle z sémantique */
  --z-field: 0;
  --z-halo: 1;
  --z-content: 2;
  --z-header: 30;
  --z-dialog: 60;
}

/* ---------- Fond ---------- */
html { background: var(--navy-950); }

body {
  min-height: 100dvh;
  font-family: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--navy-950);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Le champ : dégradé bleu nuit → turquoise, fixe, plein écran.
   C'est la toile de fond des carrousels, en grand. */
.field {
  position: fixed;
  inset: 0;
  z-index: var(--z-field);
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 8% -10%, #191a52 0%, rgba(25, 26, 82, 0) 55%),
    radial-gradient(95% 80% at 96% 108%, var(--teal-600) 0%, rgba(18, 112, 126, 0) 60%),
    radial-gradient(70% 60% at 78% 18%, rgba(26, 143, 158, 0.28) 0%, rgba(26, 143, 158, 0) 70%),
    linear-gradient(158deg, var(--navy-900) 0%, var(--navy-800) 42%, #0b2a3f 76%, #0d4553 100%);
}

/* Grain léger : casse le banding des dégradés larges. */
.field::after {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le halo turquoise qui suit la souris. */
.halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;
  z-index: var(--z-halo);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle at center,
    rgba(94, 224, 238, 0.30) 0%,
    rgba(46, 175, 190, 0.18) 26%,
    rgba(26, 143, 158, 0.09) 48%,
    rgba(26, 143, 158, 0) 72%
  );
  transition: opacity 600ms var(--ease-out-quart);
  will-change: transform;
}
.halo.is-live { opacity: 1; }

/* Pas de halo au doigt, ni en mouvement réduit. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .halo { display: none; }
}

/* ---------- Structure ---------- */
.shell {
  width: min(100% - var(--gutter) * 2, var(--shell));
  margin-inline: auto;
}
.shell--narrow { --shell: 56rem; }
/* Trois largeurs, pas plus. La colonne de lecture tient la ligne autour de
   65 caractères ; le rail large est réservé à la vidéo et aux témoignages. */
.shell--hero { --shell: 52rem; }
.shell--read { --shell: 44rem; }
.shell--wide { --shell: 66rem; }

main, header, footer { position: relative; z-index: var(--z-content); }

section { padding-block: clamp(3rem, 6vw, 5rem); }
/* La bande de preuve est un filet, pas une section : la suivante reprend
   sa respiration pleine au lieu de venir se coller dessous. */
.proofband + section { padding-top: clamp(4rem, 8vw, 6.5rem); }

/* ---------- Typographie ---------- */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.7rem + 2.9vw, 3.9rem); }
h2 { font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.2; }

p { max-width: var(--measure); text-wrap: pretty; }
.lede {
  font-size: clamp(1.1875rem, 1.05rem + 0.65vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.soft { color: var(--ink-soft); }
.mute { color: var(--ink-mute); }
.teal { color: var(--teal-300); }
.amber { color: var(--amber-soft); }

a { color: var(--ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

::selection { background: var(--teal-500); color: #04121a; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--teal-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  font-size: 1.3rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo b { font-weight: 700; color: var(--ink); }
.logo:hover { color: var(--ink); }
/* Le logo est une image (mot-symbole blanc sur fond transparent) : c'est sa
   hauteur qui est fixée, la largeur suit le ratio 768 × 236. */
.logo img {
  display: block;
  height: 1.9rem;
  width: auto;
  /* Deux écrasements à neutraliser : l'en-tête serré rétrécit l'image à 0 de
     large (elle est un élément flex), et le `max-width: 100%` global la
     comprime sans toucher à sa hauteur, donc la déforme. */
  flex: none;
  max-width: none;
}
.logo { flex: none; }
.footer .logo img { height: 2.1rem; }
@media (max-width: 26rem) {
  .logo img { height: 1.6rem; }
}

/* ---------- Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-block: 0.85rem;
  background: rgba(7, 8, 30, 0);
  border-bottom: 1px solid transparent;
  transition:
    background 400ms var(--ease-out-quart),
    border-color 400ms var(--ease-out-quart),
    backdrop-filter 400ms var(--ease-out-quart);
}
.masthead.is-stuck {
  background: rgba(7, 8, 30, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.masthead .shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.9rem);
}
.nav a:not(.btn) {
  font-size: 0.975rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.1rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  transition: right 380ms var(--ease-out-expo);
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { right: 0; }

/* Sous 48rem, la navigation passe derrière un bouton hamburger : voir le
   bloc « Navigation mobile » en fin de feuille. */

/* =========================================================
   LIQUID GLASS — le bouton
   Trois couches empilées :
   1. le corps       : verre teinté + backdrop-filter
   2. ::before       : réfraction spéculaire qui suit le curseur
   3. ::after        : l'arête lumineuse haute (le « bord poli »)
   ========================================================= */
.btn {
  --lg-x: 50%;
  --lg-y: 0%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95em 1.85em;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  line-height: 1.15;
  /* Un libellé qui passe sur deux lignes reste centré dans la pastille, et
     coupe au milieu plutôt que de laisser un mot seul en bas. */
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 46%, rgba(255,255,255,0.09) 100%),
    var(--glass-tint);
  box-shadow:
    inset 0 1px 0 0 var(--glass-sheen),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px var(--glass-edge),
    0 1px 2px rgba(2, 4, 16, 0.5),
    0 14px 34px -12px rgba(2, 4, 16, 0.75);
  transition:
    transform 420ms var(--ease-out-expo),
    box-shadow 420ms var(--ease-out-expo);
}

/* La lentille : un point chaud qui se déplace avec le curseur.
   C'est ce qui donne la sensation de matière, pas le flou seul. */
.btn::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    38% 60% at var(--lg-x) var(--lg-y),
    rgba(255, 255, 255, 0.42) 0%,
    rgba(120, 232, 245, 0.20) 35%,
    rgba(255, 255, 255, 0) 68%
  );
  transition: opacity 420ms var(--ease-out-quart);
}

/* L'arête polie : un liseré clair qui court sur le haut du bouton. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,0.22) 48%,
    rgba(255,255,255,0) 78%
  );
  transform: translateX(-120%);
  transition: transform 900ms var(--ease-out-expo);
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.48),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 1px 2px rgba(2, 4, 16, 0.5),
    0 22px 48px -14px rgba(11, 122, 138, 0.6);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.985); }

/* Variante principale : le verre prend la teinte turquoise. */
.btn--primary {
  color: #f4fdff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.10) 100%),
    linear-gradient(140deg, rgba(46, 175, 190, 0.62) 0%, rgba(15, 99, 115, 0.60) 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(160, 240, 250, 0.26),
    0 1px 2px rgba(2, 4, 16, 0.5),
    0 18px 40px -14px rgba(20, 150, 168, 0.62);
}
.btn--sm { padding: 0.6em 1.25em; font-size: 0.9375rem; }
.btn--wide { width: 100%; }

/* Repli quand backdrop-filter n'existe pas (vieux Firefox, etc.) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn { background: rgba(10, 16, 40, 0.88); }
  .btn--primary { background: linear-gradient(140deg, #1a8f9e, #0f6373); }
  .masthead.is-stuck { background: rgba(7, 8, 30, 0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn::after { transition-duration: 1ms; }
  .btn:hover { transform: none; }
  .btn::after { display: none; }
}

/* =========================================================
   LA DALLE — l'objet signature des carrousels :
   un pavé de verre sombre qui flotte au-dessus du champ,
   avec sa lueur derrière.
   ========================================================= */
.slab {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 100%),
    rgba(5, 6, 22, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 26px 64px -22px rgba(1, 3, 12, 0.9);
}

/* La lueur turquoise derrière la dalle. */
.slab--glow::before {
  content: "";
  position: absolute;
  inset: 8% -6% -14% -6%;
  z-index: -1;
  border-radius: inherit;
  filter: blur(38px);
  opacity: 0.5;
  background: linear-gradient(120deg, rgba(46,175,190,0.55), rgba(94,224,238,0.28) 60%, rgba(242,160,61,0.16));
}

/* La phrase-dalle est définie plus bas, dans le calque « landing page ». */

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 9vw, 7.5rem);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.hero h1 { margin-bottom: 1.5rem; }
.hero .lede { margin-bottom: 2.25rem; max-width: 46ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.1rem;
}

.signature {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 600;
  color: var(--teal-300);
}
.signature::before { content: "« "; }
.signature::after  { content: " »"; }

/* Le portrait — cadre de verre, même matière que les boutons. */
.portrait {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, rgba(46,175,190,0.30), rgba(13,11,43,0.72));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 30px 70px -24px rgba(1, 3, 12, 0.92);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
/* Motif de repli tant que la photo n'est pas déposée : le monogramme CC. */
.portrait__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 700;
  font-variant-caps: small-caps;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 18px 44px rgba(1, 3, 12, 0.6);
}

/* ---------- Preuves en ligne ---------- */
.proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.proofline span { display: inline-flex; align-items: center; gap: 0.5rem; }
.proofline span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  flex: none;
}

/* ---------- Bloc texte de section ---------- */
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: 1rem; }

/* ---------- Deux colonnes : la frontière de décision ---------- */
.split {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.split h3 { margin-bottom: 1.1rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.split ul { list-style: none; padding: 0; display: grid; gap: 0.85rem; }
.split li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.split li::before {
  content: "";
  margin-top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: currentColor;
  opacity: 0.5;
}
.split li b { color: var(--ink); font-weight: 600; }
.split--hers h3 { color: var(--ink); }
.split--mine h3 { color: var(--ink); }

/* ---------- Le process : une vraie séquence, donc numérotée ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2.5vw, 1.4rem); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-md);
  background: rgba(5, 6, 22, 0.40);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.step__n {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: 0.45rem; }
.step h3 small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin-bottom: 0.3rem;
}
.step p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Témoignages ---------- */
.quotes { display: grid; gap: clamp(1.1rem, 2.5vw, 1.6rem); }
@media (min-width: 56rem) {
  .quotes--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
blockquote.quote { margin: 0; }
/* Colonne des témoignages : bord gauche du site, bord droit commun. */
.quotes-col > * { max-width: 62rem; }
.quote p {
  max-width: 58ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
}
.quote p + p { margin-top: 0.9rem; }
.quote__lead {
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em;
}
.quote cite {
  display: block;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.quote cite b { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; }

/* Emplacement d'un témoignage pas encore enregistré. */
.quote--todo {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(5, 6, 22, 0.25);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ink-mute);
}

/* L'appel à l'action est défini dans le calque « landing page ». */

/* ---------- Page de remerciement / rendez-vous ---------- */
.centered {
  min-height: 72dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 1.5rem;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.centered p { margin-inline: auto; text-align: center; }

.check {
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: rgba(46, 175, 190, 0.16);
  box-shadow: inset 0 0 0 1px rgba(94, 224, 238, 0.36), 0 0 48px -6px rgba(46, 175, 190, 0.5);
}
.check svg { width: 2rem; height: 2rem; stroke: var(--teal-300); }
.check svg path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: draw 700ms var(--ease-out-expo) 250ms forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .check svg path { animation: none; stroke-dashoffset: 0; }
}

.nextsteps {
  display: grid;
  gap: 0.9rem;
  text-align: left;
  counter-reset: ns;
  list-style: none;
  padding: 0;
  max-width: 34rem;
}
.nextsteps li {
  counter-increment: ns;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: baseline;
  color: var(--ink-soft);
  font-size: 1rem;
}
.nextsteps li::before {
  content: counter(ns);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--ink);
  min-width: 1.4rem;
}

/* Cadre du calendrier */
/* Le widget TidyCal a sa propre interface claire : on lui donne une surface
   opaque plutôt que du verre sombre, sinon son texte gris passe sous le seuil
   de contraste. Le cadre et la lueur restent ceux du site. */
.calendar {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(0.4rem, 1.2vw, 0.9rem);
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 70px -24px rgba(1, 3, 12, 0.92);
}
.calendar iframe { width: 100%; min-height: 42rem; border: 0; display: block; }
.calendar__todo {
  display: grid;
  place-items: center;
  gap: 1rem;
  min-height: 26rem;
  padding: 2rem;
  text-align: center;
  color: var(--ink-mute);
}

/* ---------- Pied de page ---------- */
.footer {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer a { color: var(--ink-mute); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ---------- Révélation à l'entrée ----------
   Le contenu est visible par défaut ; la classe .reveal n'est
   posée que si JS tourne. Sans JS, ou en mouvement réduit,
   la page s'affiche telle quelle. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 750ms var(--ease-out-quart),
    transform 750ms var(--ease-out-expo);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilitaires ---------- */
.stack-sm > * + * { margin-top: 0.9rem; }
.stack   > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================
   VIDÉO — embeds Tella, ratio 16/9 verrouillé
   ========================================================= */
.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(3, 4, 16, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 30px 70px -26px rgba(1, 3, 12, 0.92);
}
.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* La vidéo maîtresse d'une page : sa lueur turquoise derrière. */
.video--hero { isolation: isolate; }
.video--hero::before {
  content: "";
  position: absolute;
  inset: 6% -4% -10% -4%;
  z-index: -1;
  border-radius: inherit;
  filter: blur(44px);
  opacity: 0.45;
  background: linear-gradient(120deg, rgba(46,175,190,0.6), rgba(94,224,238,0.3) 60%, rgba(242,160,61,0.18));
}

/* =========================================================
   TÉMOIGNAGES VIDÉO — vignette, nom, rôle, verbatim
   ========================================================= */
.tcards {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
}
.tcard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.tcard .video { margin-bottom: 0.5rem; }
.tcard h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.tcard .role {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: none;
}
.tcard blockquote {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.tcard blockquote p { max-width: none; }

/* La carte large : la compilation, qui ouvre la série. */
.tcard--lead { grid-column: 1 / -1; }
@media (min-width: 62rem) {
  /* Deux colonnes : quatre témoignages font un carré, pas une rangée orpheline. */
  .tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcard--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
  }
  .tcard--lead .video { margin-bottom: 0; }
  .tcard--lead > div { display: grid; gap: 0.6rem; }
  .tcard--lead h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }
}

/* =========================================================
   LES CLIENTES — une liste, pas un mur de logos
   ========================================================= */
.roster {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.roster li {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding-block: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.roster li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.roster b { font-weight: 600; font-size: 1.0625rem; }
.roster span { color: var(--ink-mute); font-size: 0.9375rem; }
@media (max-width: 34rem) {
  .roster li { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   LES PRINCIPES — quatre affirmations, pas des cartes
   ========================================================= */
.tenets { list-style: none; padding: 0; display: grid; gap: 0; }
.tenets li {
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.tenets li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.tenets b {
  display: block;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.tenets p { color: var(--ink-soft); font-size: 1rem; }

/* Le calendrier TidyCal s'injecte en fond clair : on lui laisse sa place. */
.tidycal-embed { min-height: 30rem; }

/* =========================================================
   LANDING PAGE
   Un seul matériau de panneau, une seule respiration.
   Le turquoise ne sert qu'au chiffre et aux appels à l'action.
   ========================================================= */

/* Permet d'animer height: auto sur la FAQ (Chrome 129+, Safari 26+). */
:root {
  interpolate-size: allow-keywords;
  --panel-pad: clamp(1.5rem, 3.5vw, 2.4rem);
}

/* ---------------------------------------------------------
   LE PANNEAU — un seul objet de verre pour toute la page.
   Phrases-dalles, étapes, phases, Toi/Moi, témoignages,
   appels à l'action : même matière, même arête, même ombre.
   --------------------------------------------------------- */
.panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  padding: var(--panel-pad);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.02) 100%),
    rgba(6, 8, 26, 0.52);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 24px 58px -26px rgba(1, 3, 12, 0.9);
}
/* L'arête polie qui court sur le panneau, comme sur les boutons. */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0) 76%);
}
.panel--roomy { --panel-pad: clamp(2rem, 5vw, 3.5rem); }
/* La lueur turquoise derrière : réservée aux appels à l'action. */
.panel--glow::before {
  content: "";
  position: absolute;
  inset: 10% -5% -16% -5%;
  z-index: -2;
  border-radius: inherit;
  filter: blur(40px);
  opacity: 0.5;
  background: linear-gradient(120deg, rgba(46,175,190,0.55), rgba(94,224,238,0.28) 60%, rgba(242,160,61,0.16));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: rgba(9, 12, 34, 0.92); }
}

/* ---------- Respiration ---------- */
.stack-xl > * + * { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.stack-lg > * + * { margin-top: clamp(2rem, 4vw, 3rem); }
.section-head { max-width: 100%; margin-bottom: clamp(0.9rem, 2.5vw, 2rem); }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head .lede { max-width: 52ch; }

/* ---------- L'accroche ---------- */
.hero__cta { width: fit-content; }
.hero__actions { margin-bottom: 1rem; }
.cta-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 46ch;
}
.cta-note b { color: var(--ink-soft); font-weight: 600; }
.cta-note--center { text-align: center; margin-inline: auto; }

/* Le même bouton, au même endroit, à la fin de chaque section. */
.sectioncta { max-width: none; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* ---------- La bande de preuve : un ruban qui défile ---------- */
.proofband {
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  border-block: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
}
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.marquee__row li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 1.6rem;
  white-space: nowrap;
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
/* La puce est le seul enfant flex à côté du texte : le libellé entier vit dans
   un span, sinon le gras et le reste se retrouvent séparés par le gap. */
.marquee__row li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  flex: none;
}
.marquee__row b { color: var(--ink); font-weight: 600; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: 100%; }
  .marquee__row:nth-child(2) { display: none; }
  .marquee__row { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- La phrase-dalle ----------
   Le panneau déborde la colonne de lecture pour peser plus lourd, mais son
   padding vaut exactement le débord : le texte retombe donc pile sur la même
   colonne que tout le reste de la page. */
.statement {
  --bleed: 0rem;
  margin-inline: calc(-1 * var(--bleed));
  padding-block: clamp(1.9rem, 4vw, 2.9rem);
  padding-inline: max(var(--panel-pad), var(--bleed));
}
.statement p {
  max-width: none;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
@media (min-width: 64rem) { .statement { --bleed: 4rem; } }
@media (min-width: 78rem) { .statement { --bleed: 6rem; } }

/* La conclusion des phases : pas de panneau, juste du texte qui pèse. */
.pullquote { display: grid; gap: 0.7rem; }
.pullquote p {
  /* Même largeur que le texte courant : la colonne de lecture, pas une mesure
     propre. Un ch vaut plus large ici à cause du corps, d'où le plafond retiré. */
  max-width: none;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.65rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pullquote__sub {
  margin-top: 0.6rem;
  max-width: none !important;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  color: var(--ink-soft);
}

/* ---------- Paires « ce que tu te dis / ce que ça produit » ----------
   Une seule grille pour toute la liste : les colonnes s'alignent d'une
   ligne à l'autre, et le libellé ne prend que la place qu'il lui faut. */
.pairs-title { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.9rem; }
.pairs { display: grid; margin: 0; }
.pairs dt {
  padding-top: clamp(0.9rem, 2vw, 1.15rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pairs dd {
  margin: 0;
  padding-bottom: clamp(0.9rem, 2vw, 1.15rem);
  color: var(--ink-soft);
  font-size: 1rem;
}
.pairs dd:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
@media (min-width: 42rem) {
  .pairs {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2rem);
  }
  /* Quand les libellés sont courts, la colonne ne doit pas rester béante. */
  .pairs--tight { grid-template-columns: fit-content(11rem) minmax(0, 1fr); }
  .pairs dt { grid-column: 1; padding-bottom: clamp(0.9rem, 2vw, 1.15rem); }
  .pairs dd {
    grid-column: 2;
    padding-top: clamp(0.9rem, 2vw, 1.15rem);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
  .pairs dt:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
}

/* ---------- Les trois choses : pastille et titre sur la même ligne ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); counter-reset: step; }
.step { display: block; }
.step__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.step__n {
  counter-increment: step;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.step__n::before { content: counter(step); }
.step h3 { margin: 0; }
.step > p { color: var(--ink-soft); font-size: 1rem; max-width: none; }

/* ---------- L'acronyme DUR ---------- */
.dur { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.dur li { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.dur b { color: var(--ink); font-weight: 700; font-size: 1.25em; letter-spacing: -0.03em; }

/* ---------- Les trois phases ---------- */
.phases { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2.2vw, 1.4rem); }
.phase__tag {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.6rem;
}
.phase h3 { font-size: clamp(1.45rem, 1.25rem + 0.85vw, 1.9rem); }
.phase__sub {
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.phase > p:last-child { color: var(--ink-soft); font-size: 1rem; max-width: none; }

/* ---------- Toi / Moi ---------- */
.duo {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}
.duo__card h3 {
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.duo__card ul { list-style: none; padding: 0; display: grid; gap: 0.85rem; }
.duo__card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.duo__card li::before {
  content: "";
  margin-top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: currentColor;
  opacity: 0.45;
}
.duo__card li b { color: var(--ink); font-weight: 600; }

/* ---------- La vidéo maîtresse : cadrée, pas pleine largeur ---------- */
.video--feature {
  width: min(100%, 38rem);
  margin-inline: auto;
  isolation: isolate;
}
.video--feature::before {
  content: "";
  position: absolute;
  inset: 8% -5% -12% -5%;
  z-index: -1;
  border-radius: inherit;
  filter: blur(40px);
  opacity: 0.42;
  background: linear-gradient(120deg, rgba(46,175,190,0.55), rgba(94,224,238,0.26) 60%, rgba(242,160,61,0.14));
}

/* ---------- Témoignages : toutes les cartes à la même hauteur ---------- */
.tcard { height: 100%; }
.tcard blockquote { padding-top: 0.25rem; }

/* ---------- Le portrait à côté du parcours ---------- */
.bio { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; }
/* Le portrait est collant sur toute la hauteur de l'écran : pendant que le
   texte défile, la photo reste au milieu du regard. */
.bio__portrait { position: relative; margin: 0; }
.bio__portrait img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 30px 70px -26px rgba(1, 3, 12, 0.92);
}
@media (min-width: 56rem) {
  .bio { grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr); align-items: stretch; }
  .bio__portrait {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.bio__text h2 { margin-bottom: 0.35rem; }
.bio__text p { max-width: 62ch; }

/* ---------- L'appel à l'action ----------
   Titre, bouton et rappel au centre ; le corps du texte reste à gauche,
   parce qu'il se lit et ne s'annonce pas. */
.cta { display: grid; justify-items: center; gap: clamp(1.35rem, 3vw, 1.85rem); }
.cta__head { text-align: center; }
.cta__head h2 { max-width: 20ch; margin-inline: auto; }
.cta__head .lede { max-width: 40ch; margin: 0.9rem auto 0; }
.cta__body { justify-self: stretch; text-align: left; }
.cta__body p { max-width: 56ch; text-align: left; margin-inline: 0; }
.cta .cta-note { text-align: center; margin-inline: auto; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid rgba(255, 255, 255, 0.09); }
.faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.faq summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(1rem, 2.2vw, 1.4rem);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  letter-spacing: -0.01em;
  transition: color 240ms var(--ease-out-quart);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 0.66rem; height: 0.66rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  transition: transform 420ms var(--ease-out-expo), opacity 240ms linear;
}
/* Le turquoise ne sert qu'au survol : ailleurs, l'encre suffit. */
.faq summary:hover { color: var(--teal-300); }
.faq summary:hover::after { opacity: 1; }
.faq details[open] > summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 420ms var(--ease-out-expo),
    opacity 260ms var(--ease-out-quart),
    content-visibility 420ms allow-discrete;
  transition-behavior: allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq__body {
  padding-bottom: clamp(1rem, 2.2vw, 1.4rem);
  display: grid;
  gap: 0.8rem;
  transform: translateY(-6px);
  transition: transform 420ms var(--ease-out-expo);
}
.faq details[open] .faq__body { transform: none; }
.faq__body p { color: var(--ink-soft); font-size: 1rem; margin: 0; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .faq summary,
  .faq summary::after,
  .faq details::details-content,
  .faq__body { transition: none; }
  .faq__body { transform: none; }
}

/* Le bouton de l'en-tête porte le même libellé que les autres : il doit
   donc rétrécir avant de déborder. */
@media (min-width: 48.0625rem) and (max-width: 62rem) {
  .masthead .btn--sm { font-size: 0.875rem; padding: 0.55em 1.1em; }
}

/* Le calendrier TidyCal s'injecte en fond clair : on lui laisse sa place. */
.tidycal-embed { min-height: 30rem; }

/* Le sous-titre qui ouvre un second temps à l'intérieur d'une section. */
.subhead {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  letter-spacing: -0.028em;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* ---------- Page de réservation ---------- */
/* Le calendrier doit être visible sans scroller : l'en-tête de page est
   réduit au strict nécessaire (titre + une phrase), et le cadre prend la
   hauteur qui reste dans la fenêtre. Le widget TidyCal défile dans son
   propre iframe si son contenu dépasse. */
.page-rdv .hero {
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(0.9rem, 1.6vw, 1.25rem);
  text-align: center;
}
.page-rdv .hero h1 {
  font-size: clamp(2rem, 1.6rem + 1.7vw, 3rem);
  margin-bottom: 0.85rem;
}
.page-rdv .hero .lede {
  max-width: 58ch;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
}
.page-rdv .calendar-section { padding-block: 0 clamp(2rem, 5vw, 4rem); }

@media (min-width: 48rem) and (min-height: 38rem) {
  /* 100dvh moins l'en-tête, le titre, la phrase, le cadre et une marge basse. */
  .page-rdv .calendar { --cal-h: calc(100dvh - 18rem); }
  .page-rdv .calendar .tidycal-embed,
  .page-rdv .calendar iframe {
    height: clamp(28rem, var(--cal-h), 46rem) !important;
    min-height: 0 !important;
  }
}

/* ---------- Page 404 ---------- */
.errcode {
  font-weight: 700;
  font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0;
  background: linear-gradient(120deg, #8ce7f1, var(--teal-300) 45%, rgba(46, 175, 190, 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-404 .centered { gap: 1.25rem; }
.page-404 .lede { max-width: 46ch; }
.errlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-mute);
}

/* Écran d'ordinateur portable peu haut : on rend au calendrier la place que
   prend l'en-tête de page, sans jamais supprimer le titre ni la phrase. */
@media (min-width: 48rem) and (max-height: 50rem) {
  .page-rdv .hero { padding-block: 0.75rem 0.6rem; }
  .page-rdv .hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 0.5rem; }
  .page-rdv .hero .lede { font-size: 1rem; line-height: 1.55; }
  .page-rdv .calendar { --cal-h: calc(100dvh - 15.5rem); }
}

/* ---------- Page de remerciement ---------- */
/* La vidéo doit tenir dans le premier écran : le bloc de confirmation reste
   court et la vidéo se dimensionne sur la hauteur libre, pas sur la largeur. */
.page-merci .hero { padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-merci .hero .centered {
  min-height: auto;
  padding-block: 0;
  gap: clamp(0.75rem, 2vw, 1.15rem);
}
/* Les rappels pratiques appartiennent à la vidéo : ils la suivent de près,
   au lieu de reprendre la respiration pleine d'une nouvelle section. */
.page-merci .hero { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.page-merci .hero + section { padding-top: clamp(0.5rem, 1.5vw, 1.25rem); }
.page-merci .check { width: 3rem; height: 3rem; }
.page-merci .check svg { width: 1.5rem; height: 1.5rem; }
.page-merci h1 { font-size: clamp(2rem, 1.6rem + 1.7vw, 3rem); }
/* Dans ce bloc, l'espacement vient de la grille : les marges de section du
   hero feraient double emploi et repousseraient la vidéo hors de l'écran. */
.page-merci .hero h1,
.page-merci .hero .lede { margin-bottom: 0; }
/* La phrase de confirmation est une indication, pas un argument : elle passe
   sous la taille du corps de texte pour laisser la vidéo dominer. */
.page-merci .lede {
  max-width: 62ch;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.55;
}

@media (min-width: 48rem) and (min-height: 38rem) {
  .page-merci .video--hero {
    --video-h: calc(100dvh - 17.5rem);
    padding-bottom: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: var(--video-h);
    width: min(100%, calc(var(--video-h) * 16 / 9));
    margin-inline: auto;
  }
}

/* =========================================================
   Navigation mobile — hamburger
   Sous 48rem, la barre ne garde que le logo et le bouton ; les liens et
   l'appel à l'action vivent dans un panneau de verre qui se déplie sous
   l'en-tête. Au-dessus, le panneau redevient une simple rangée de liens.
   ========================================================= */
.navtoggle { display: none; }

@media (max-width: 48rem) {
  .masthead .shell { position: relative; }

  .navtoggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.4rem;
    padding: 0;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 220ms var(--ease-out-quart);
  }
  .navtoggle:hover { background: rgba(255, 255, 255, 0.11); }
  .navtoggle:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; }

  .navtoggle__bars {
    display: grid;
    gap: 0.3rem;
    width: 1.15rem;
  }
  .navtoggle__bars i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform 320ms var(--ease-out-expo),
      opacity 180ms linear;
  }
  .navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }

  .nav {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border-radius: var(--r-md);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 100%),
      rgba(6, 8, 26, 0.92);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.26),
      inset 0 0 0 1px rgba(255, 255, 255, 0.09),
      0 24px 58px -26px rgba(1, 3, 12, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    pointer-events: none;
    transition:
      opacity 260ms var(--ease-out-quart),
      transform 320ms var(--ease-out-expo),
      visibility 0s linear 320ms;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .nav a:not(.btn) {
    font-size: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    color: var(--ink);
  }
  .nav a:not(.btn)::after { content: none; }
  .nav a:not(.btn):hover,
  .nav a:not(.btn)[aria-current="page"] { background: rgba(255, 255, 255, 0.07); }

  .nav .btn { justify-content: center; width: 100%; margin-top: 0.35rem; }
  .nav .btn--sm { font-size: 0.9375rem; padding: 0.8em 1.2em; }

  /* Sans JavaScript, le panneau reste ouvert : la navigation ne dépend pas
     d'un script pour exister. */
  html:not(.js) .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  html:not(.js) .navtoggle { display: none; }
}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  .nav, .navtoggle__bars i { transition: none; }
}

/* Écran peu haut : le bloc de confirmation se resserre encore pour que la
   vidéo reste entière dans le premier écran. */
@media (min-width: 48rem) and (max-height: 50rem) {
  .page-merci .hero { padding-block: 0.75rem 1rem; }
  .page-merci .check { width: 2.5rem; height: 2.5rem; }
  .page-merci .check svg { width: 1.25rem; height: 1.25rem; }
  .page-merci h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
  .page-merci .hero .centered { gap: 0.6rem; }
  .page-merci .video--hero { --video-h: calc(100dvh - 17rem); }
}

/* Un titre de section qui n'a pas de chapô sous lui se centre sur la grille
   plutôt que de rester calé à gauche d'une colonne de lecture absente. */
.section-head--center {
  max-width: 100%;
  text-align: center;
}