/* Calade CrossFit
   Neutres chauds (sol caoutchouc, magnésie) et orange du renard du logo.
   Espacements sur une grille de 4 px, une seule courbe d'animation. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Permanent Marker";
  src: url("../fonts/permanent-marker-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutres chauds */
  --ink-0: #12110f;
  --ink-1: #161513;
  --ink-2: #1c1a18;
  --ink-3: #262421;
  --chalk-0: #fdfbf7;
  --chalk-1: #f7f4ee;
  --chalk-2: #efe9df;
  --chalk-3: #e6dfd3;
  --field-border: #8f857a;

  /* Accent : orange du renard */
  --orange: #ec6510;
  --orange-hover: #f47b2e;
  --orange-ink: #b4440a; /* orange lisible sur fond clair */
  --on-orange: #161513;

  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 150ms;

  --container: 1200px;
  --gutter: 16px;
  --section-y: 64px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; --section-y: 96px; }
}

/* Surfaces : chaque section choisit la sienne, les composants suivent */
.surface-dark {
  --bg: var(--ink-1);
  --card: var(--ink-2);
  --raised: var(--ink-3);
  --text-1: #efe9de;
  --text-2: #aaa398;
  --text-3: #8a847a;
  --line: rgb(239 233 222 / 0.1);
  --line-strong: rgb(239 233 222 / 0.24);
  --accent-ink: var(--orange);
  --focus: var(--orange);
  background: var(--bg);
  color: var(--text-1);
}
.surface-light {
  --bg: var(--chalk-1);
  --card: var(--chalk-0);
  --raised: var(--chalk-2);
  --text-1: #1f1b16;
  --text-2: #5e554a;
  --text-3: #6e655a;
  --line: rgb(31 27 22 / 0.1);
  --line-strong: rgb(31 27 22 / 0.28);
  --accent-ink: var(--orange-ink);
  --focus: var(--orange-ink);
  background: var(--bg);
  color: var(--text-1);
}
.surface-light.is-raised { --bg: var(--chalk-2); --raised: var(--chalk-3); }
.surface-deep { --bg: var(--ink-0); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-1);
  color: #efe9de;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) {
  body { font-size: 17px; }
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus, var(--orange)); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
/* Les commandes natives du lecteur vidéo prennent le focus dans leur propre arbre */
video:focus-within { outline: 2px solid var(--focus, var(--orange)); outline-offset: 3px; }
button { font: inherit; }
[hidden] { display: none !important; }
.list-reset { margin: 0; padding: 0; list-style: none; }
.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;
}
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 50;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--chalk-0); color: var(--ink-1); font-weight: 500;
}
.skip-link:focus { top: var(--sp-4); }

.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Mise en page */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section.is-flush-top { padding-top: 0; }
.section-head { display: grid; gap: var(--sp-4); max-width: 44rem; margin-bottom: var(--sp-10); }
@media (min-width: 900px) {
  .section-head { margin-bottom: var(--sp-12); }
}
.stack { display: grid; gap: var(--sp-6); align-content: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }

/* Typographie */
.hero-title, .display-2, .display-3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
/* Deux tailles : le nom de la ville tient sur une ligne, sans coupure au trait d'union */
.hero-title { display: grid; gap: var(--sp-2); line-height: 1.02; }
.hero-title-main { font-size: clamp(3rem, 1.4rem + 5.2vw, 5.5rem); }
.hero-title-place { font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); color: var(--text-2); }
.display-2 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.05; }
.display-3 { font-size: 32px; line-height: 1.1; }
.lead { max-width: 36rem; font-size: 18px; line-height: 1.55; color: var(--text-2); }
@media (min-width: 900px) {
  .lead { font-size: 19px; }
}
.title-3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.meta { font-size: 15px; color: var(--text-2); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 16px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { cursor: progress; opacity: 0.7; }
.btn-sm { min-height: 44px; padding: 0 var(--sp-4); font-size: 15px; }
.btn-primary { background: var(--orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hover); color: var(--on-orange); }
.btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--text-1); }
.btn-secondary:hover { background: var(--raised); color: var(--text-1); }
.btn-solid { background: var(--text-1); color: var(--bg); }
.btn-solid:hover { background: var(--text-2); color: var(--bg); }

/* En-tête */
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); min-height: 64px; padding-block: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text-1); text-decoration: none; }
.brand:hover { color: var(--text-1); }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand-name { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.nav-links a { text-decoration: none; }
.push-right { margin-left: auto; }
.nav-quiet { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--text-1); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-quiet .icon { color: var(--text-2); }
.menu-toggle { display: none; }

@media (max-width: 1099px) {
  .js .menu-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto;
    min-height: 44px; padding: 0 var(--sp-3);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: transparent; color: var(--text-1); font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .js .menu-toggle .icon-close { display: none; }
  .js .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
  .js .menu-toggle[aria-expanded="true"] .icon-close { display: block; }
  .site-nav { width: 100%; }
  .js .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .js .site-nav.is-open { display: block; }
  .nav-links { display: grid; }
  .nav-links a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px; }
  .nav-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
}
@media (min-width: 1100px) {
  .site-nav { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; }
  .nav-links { display: flex; gap: var(--sp-6); }
  .nav-links a { color: var(--text-2); font-size: 15px; font-weight: 500; }
  .nav-links a:hover { color: var(--text-1); }
  .nav-actions { display: flex; align-items: center; gap: var(--sp-6); }
}

/* Hero */
.hero { padding-block: var(--sp-12) var(--sp-16); }
@media (min-width: 900px) {
  .hero { padding-block: var(--sp-20) var(--sp-16); }
}
.hero-grid { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
}
.hero-copy { display: grid; gap: var(--sp-6); }
.hero-copy .actions { margin-top: var(--sp-2); }
.hero-visual { position: relative; padding-bottom: var(--sp-10); }
.hero-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--raised); }
@media (min-width: 900px) {
  .hero-photo { aspect-ratio: 1 / 1; }
}

/* Le tableau blanc du WOD : le seul endroit où le feutre apparaît */
.wod-board {
  position: absolute; left: var(--sp-4); bottom: 0;
  width: min(280px, 80%);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-radius: var(--r-sm);
  background: #fbfaf6; color: #1f1b16;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
  transform: rotate(-2deg);
}
.wod-board::before {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 88px; height: 20px; margin-left: -44px;
  background: var(--orange); transform: rotate(3deg);
}
@media (min-width: 900px) {
  .wod-board { left: calc(-1 * var(--sp-8)); width: 300px; }
}
.wod-head { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 13px; color: #5e554a; }
.wod-title { margin-top: var(--sp-3); font-family: var(--font-marker); font-size: 34px; line-height: 1.1; }
.wod-list { margin-top: var(--sp-1); font-family: var(--font-marker); font-size: 20px; line-height: 1.5; color: #2b2622; }
.wod-note { margin-top: var(--sp-4); font-size: 13px; color: #5e554a; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-16); padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.fact-figure { display: block; font-family: var(--font-display); font-size: 40px; line-height: 1; }
.fact-label { display: block; margin-top: var(--sp-2); font-size: 15px; color: var(--text-2); }

/* Objectifs */
.goals { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) {
  .goals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); }
}
.goal-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.toggle {
  min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--card); color: var(--text-1);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.toggle:hover { border-color: var(--text-2); }
.toggle[aria-pressed="true"] { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }
.goal-panel { display: grid; gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-xl); }
@media (min-width: 640px) {
  .goal-panel { padding: var(--sp-8); }
}
.goal-panel-title { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.05; }
.goal-courses { display: grid; gap: var(--sp-2); }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); background: var(--raised); color: var(--text-1); font-size: 14px;
}

/* Débuter */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-4); }
.step-card, .card, .offer, .panel {
  display: grid; gap: var(--sp-3); align-content: start;
  padding: var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card);
}
.step-number { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text-3); }
.step-card p, .card p { color: var(--text-2); }
.debuter-actions { margin-top: var(--sp-10); }

/* Cours */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-4); }
.card-kicker { font-size: 14px; color: var(--text-2); }

/* La box */
.box-grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) {
  .box-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-12); }
}
.photo-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); background: var(--raised); }
.photo-mosaic .is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.photo-mosaic .is-small { aspect-ratio: 4 / 3; }
.spaces { border-top: 1px solid var(--line); }
.space { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.space dt { font-weight: 600; }
.space-size { font-variant-numeric: tabular-nums; color: var(--text-2); }
.space-desc { grid-column: 1 / -1; font-size: 15px; color: var(--text-2); }
.note-card { display: grid; gap: var(--sp-1); margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--raised); }
.note-card p { color: var(--text-2); }

/* Coachs */
.coaches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--sp-8) var(--sp-4); }
.coach img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--raised); }
.coach-name { margin-top: var(--sp-4); }
.coach-role { margin-top: var(--sp-1); font-size: 15px; color: var(--text-2); }
.coach .tags { margin-top: var(--sp-3); }

/* Planning et tarifs */
.planning-grid { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) {
  .planning-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.panel { gap: var(--sp-4); border-radius: var(--r-xl); }
.panel-title { display: flex; align-items: center; gap: var(--sp-2); font-size: 18px; font-weight: 600; }
.panel-title .icon { color: var(--text-2); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding-block: var(--sp-2); border-bottom: 1px solid var(--line); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours th { font-weight: 500; text-align: left; }
.hours td { color: var(--text-2); text-align: right; }
.day-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.day-picker .toggle { padding: 0; }
.class-list { border-top: 1px solid var(--line); }
.class-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.class-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.class-meta { display: block; font-size: 14px; color: var(--text-2); }
.planning-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.planning-foot .meta { flex: 1 1 260px; }
.offers-title { margin-top: var(--sp-16); }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.offer-kicker { font-size: 14px; color: var(--text-2); }
.offer-price { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-display); font-size: 44px; line-height: 1; }
.offer-unit { font-family: var(--font-ui); font-size: 15px; color: var(--text-2); }
.check-list { display: grid; gap: var(--sp-2); font-size: 15px; color: var(--text-2); }
.check-list li { display: flex; gap: var(--sp-2); }
.check-list .icon { margin-top: 3px; color: var(--text-1); }
.offers-note { margin-top: var(--sp-6); }

/* Calade Contest */
.contest-grid { display: grid; gap: var(--sp-10); align-items: center; }
@media (min-width: 900px) {
  .contest-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
}
.contest-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.contest-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); background: var(--raised); }
.contest-photos img:not(.is-tall) { aspect-ratio: 1 / 1; }
/* La photo verticale prend la hauteur des deux carrés, sans peser sur la taille des lignes */
.contest-photos .is-tall { grid-row: span 2; height: 0; min-height: 100%; }

/* Témoignages */
.videos {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 280px);
  gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2);
}
@media (min-width: 900px) {
  .videos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); overflow: visible; }
}
.video { scroll-snap-align: start; }
.video video { width: 100%; aspect-ratio: 480 / 608; object-fit: cover; border-radius: var(--r-lg); background: var(--ink-3); }
.video figcaption { margin-top: var(--sp-3); font-size: 15px; color: var(--text-2); }

/* Questions */
.faq-grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-16); }
}
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  min-height: 56px; padding-block: var(--sp-4);
  font-size: 18px; font-weight: 500; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--text-2); }
.faq .icon-minus, .faq details[open] .icon-plus { display: none; }
.faq details[open] .icon-minus { display: block; }
.faq details p { max-width: 40rem; padding-bottom: var(--sp-5); color: var(--text-2); }

/* Séance d'essai */
.essai-grid { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 900px) {
  .essai-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
}
.contact-list { display: grid; gap: var(--sp-3); }
.contact-list li { display: flex; align-items: center; gap: var(--sp-3); }
.contact-list .icon { color: var(--text-2); }
.form-card { padding: var(--sp-6); border-radius: var(--r-xl); }
@media (min-width: 640px) {
  .form-card { padding: var(--sp-8); }
}
/* Le découpage en étapes n'existe que si le script du formulaire a démarré (.is-ready) :
   sans lui, toutes les étapes s'affichent et le formulaire reste utilisable. */
.form-progress { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.trial-form:not(.is-ready) .form-progress { display: none; }
.progress-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.progress-bars span { height: 4px; border-radius: 2px; background: var(--chalk-3); }
.progress-bars .is-done { background: var(--text-1); }
.progress-bars .is-current { background: var(--orange); }
.form-step { display: grid; gap: var(--sp-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-step:focus { outline: none; }
.trial-form.is-ready .form-step:not(.is-active) { display: none; }
.trial-form:not(.is-ready) .form-step + .form-step { margin-top: var(--sp-10); }
.form-step legend { margin-bottom: var(--sp-4); padding: 0; font-family: var(--font-display); font-size: 32px; line-height: 1.1; }
.choice-list { display: grid; gap: var(--sp-2); }
.choice {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--field-border); border-radius: var(--r-md);
  background: #fff; cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink-1); }
.choice-sub { display: block; font-size: 14px; color: var(--text-2); }
.slot-picker { display: grid; gap: var(--sp-3); }
.slot-picker:empty { display: none; }
.slot-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); }
.slot-days .toggle { display: grid; place-items: center; min-height: 56px; padding: var(--sp-1) 0; line-height: 1.2; }
.slot-date { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.field { display: grid; gap: var(--sp-2); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--sp-4); }
.field label { font-size: 15px; font-weight: 500; }
.field input {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  border: 1px solid var(--field-border); border-radius: var(--r-md);
  background: #fff; color: var(--text-1); font: inherit; font-size: 16px;
}
.optional { font-weight: 400; color: var(--text-2); }
.consent { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 14px; color: var(--text-2); }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink-1); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.form-nav .btn { flex: 1 1 0; }
.trial-form:not(.is-ready) [data-step-next] { display: none; }
.form-error { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: #fbe9e1; color: #7a2a05; font-size: 15px; }
.form-success { display: grid; gap: var(--sp-4); }
.form-success:focus { outline: none; }
.success-title { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.05; }

/* Pied de page */
.site-footer { padding-block: var(--sp-16) var(--sp-8); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-8); }
.footer-col { display: grid; gap: var(--sp-2); align-content: start; font-size: 15px; color: var(--text-2); }
.footer-title { margin-bottom: var(--sp-1); font-size: 15px; font-weight: 600; color: var(--text-1); }
.footer-col a { color: var(--text-1); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-12); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text-2);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer-links a { color: var(--text-2); }

/* Barre d'action mobile */
.mobile-cta { display: none; }
@media (max-width: 767px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; gap: var(--sp-2);
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    transition: transform 200ms var(--ease);
  }
  .mobile-cta.is-hidden { transform: translateY(110%); }
  .mobile-cta .btn-primary { flex: 1 1 auto; }
  .has-mobile-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Un élément qui reçoit le focus ne doit pas finir caché sous la barre */
  html { scroll-padding-bottom: 88px; }
}

/* Pages de texte (mentions légales, CGV, merci) */
.page-head { padding-block: var(--sp-16) var(--sp-10); }
.prose { max-width: 44rem; padding-bottom: var(--section-y); }
.prose h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-3); font-size: 22px; font-weight: 600; line-height: 1.3; }
.prose p, .prose ul { margin-bottom: var(--sp-4); color: var(--text-2); }
.prose ul { padding-left: var(--sp-5); }
.todo { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: #fbe9e1; color: #7a2a05; }