/* ==========================================================================
   Studio Hugo — feuille de style principale
   --------------------------------------------------------------------------
   Organisation :
     1. Fondations      variables, remise à zéro, typographie
     2. Mise en page    conteneurs, grille, rythme vertical
     3. Composants      en-tête, hero, galerie, formulaires, calendrier
     4. Utilitaires     classes ponctuelles, accessibilité, impression

   Parti pris : le site est un écrin, pas un décor. Aucune ombre portée, aucun
   coin arrondi et aucune bordure sur les photographies — une image n'a pas
   besoin de cadre. Le contraste vient de l'échelle typographique et du vide,
   pas de la couleur.
   ========================================================================== */

@import url('/fonts/fonts.css');

/* ==========================================================================
   1. Fondations
   ========================================================================== */

:root {
  /* --- Couleurs -----------------------------------------------------------
     Deux teintes et trois neutres, pas davantage : toute couleur absente des
     photographies entre en concurrence avec elles. Le fond est un blanc chaud
     plutôt qu'un blanc pur, qui durcit les images et fait « gabarit ». */
  --bg: #f7f4ef;
  --surface: #efeae2;
  --surface-deep: #1a1815;
  --ink: #1a1815;
  --ink-muted: #6b6459;
  --rule: #dcd5c9;
  --accent: #8a6a4b;
  --accent-dark: #6d5239;
  --error: #96331f;
  --success: #4a6b45;

  /* --- Typographie --------------------------------------------------------
     Échelle fluide : les tailles se calent sur la largeur du viewport entre
     deux bornes, sans point de rupture brutal. L'écart entre le label (12 px)
     et le titre display (jusqu'à 96 px) est volontairement violent — c'est ce
     rapport qui donne le rythme éditorial. */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(40px, 6.5vw, 96px);
  --fs-h1: clamp(34px, 5.5vw, 72px);
  --fs-h2: clamp(26px, 3.4vw, 46px);
  --fs-h3: clamp(20px, 2.4vw, 30px);
  --fs-lead: clamp(18px, 1.6vw, 21px);
  --fs-body: clamp(16px, 1.2vw, 17px);
  --fs-small: clamp(14px, 1vw, 15px);
  --fs-label: 12px;
  --fs-micro: 11px;

  /* --- Rythme vertical ---------------------------------------------------- */
  --sp-xs: clamp(0.3125rem, 0.2344rem + 0.3906vw, 0.625rem);
  --sp-s: clamp(0.625rem, 0.4688rem + 0.7813vw, 1.25rem);
  --sp-m: clamp(1.25rem, 0.9375rem + 1.5625vw, 2.5rem);
  --sp-l: clamp(1.875rem, 1.4063rem + 2.3438vw, 3.75rem);
  --sp-xl: clamp(2.5rem, 1.875rem + 3.125vw, 5rem);
  --sp-2xl: clamp(3.125rem, 2.3438rem + 3.9063vw, 6.25rem);
  --sp-3xl: clamp(3.75rem, 2.8125rem + 4.6875vw, 7.5rem);
  --sp-4xl: clamp(5rem, 3.75rem + 6.25vw, 10rem);

  /* --- Grille ------------------------------------------------------------- */
  --page-x: clamp(20px, 4vw, 64px);
  --measure: 62ch;
  --gutter: 8px;
  --max-width: 1680px;
  --max-text: 780px;

  --transition: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Compense la hauteur de l'en-tête fixe lors d'un saut vers une ancre. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* Les grands titres se serrent sous la hauteur de capitale : c'est la
     signature typographique de la mise en page éditoriale. */
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p, li {
  margin: 0 0 var(--sp-s);
  max-width: var(--measure);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--transition);
}

a:hover { color: var(--accent); }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  height: 0;
  margin: var(--sp-l) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

/* Un anneau de focus visible et homogène : le parcours au clavier doit rester
   lisible sur fond clair comme sur fond sombre. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- Éléments typographiques récurrents ---------------------------------- */

.label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-muted);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.025em;
}

.italic { font-style: italic; }

.text-center { text-align: center; }

/* ==========================================================================
   2. Mise en page
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.page__main { flex: 1; }

.shell {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.shell--narrow { max-width: var(--max-text); }
.shell--wide { max-width: none; padding-inline: var(--gutter); }

/* Le vide se met entre les sections, jamais à l'intérieur des galeries. */
.section { padding-block: var(--sp-4xl); }
.section--tight { padding-block: var(--sp-2xl); }
.section--surface { background: var(--surface); }
.section--dark {
  background: var(--surface-deep);
  color: var(--bg);
}

.section--dark .label,
.section--dark .lead { color: rgb(247 244 239 / 0.68); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-l);
}

.stack > * + * { margin-top: var(--sp-s); }
.stack-l > * + * { margin-top: var(--sp-l); }

/* Deux colonnes asymétriques : le décalage vertical d'une colonne sur l'autre
   fait l'essentiel de l'effet éditorial. */
.split {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; align-items: center; }
  .split--reverse { grid-template-columns: 7fr 5fr; }
  .split--offset > :last-child { margin-top: var(--sp-2xl); }
}

/* ==========================================================================
   3. Composants
   ========================================================================== */

/* --- Lien d'évitement ----------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--sp-s) var(--sp-m);
  background: var(--ink);
  color: var(--bg);
}

.skip-link:focus {
  left: var(--page-x);
  top: var(--sp-s);
}

/* --- En-tête -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}

.site-header[data-scrolled='true'] { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  min-height: 76px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.brand__tagline {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-muted);
}

.nav { display: flex; align-items: center; gap: var(--sp-m); }

.nav__list {
  display: flex;
  gap: var(--sp-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list li { margin: 0; max-width: none; }

.nav__link {
  position: relative;
  font-size: var(--fs-small);
  text-decoration: none;
  padding-block: 4px;
}

/* Soulignement qui se déploie depuis la gauche, plutôt qu'un changement de
   couleur : plus discret, et il indique la page courante sans ajouter de teinte. */
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

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

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav__toggle span { margin-inline: auto; }
.nav__toggle span::before { transform: translateY(-7px); }
.nav__toggle span::after { transform: translateY(6px); }

.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: block; }

  .nav__list {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    gap: var(--sp-m);
    padding: var(--sp-xl) var(--page-x) var(--sp-2xl);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .nav__list[data-open='true'] {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__link { font-size: var(--fs-h3); font-family: var(--font-display); }
}

/* --- Boutons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 2em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.button--ghost {
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.button--light {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.button--light:hover {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}

/* Lien fléché : la flèche avance au survol, seule animation du site. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
}

.arrow-link::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width var(--transition);
}

.arrow-link:hover::after { width: 44px; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* `svh` plutôt que `vh` : évite le saut de mise en page provoqué par la
     barre d'adresse mobile qui se rétracte au défilement. */
  min-height: calc(100svh - 76px);
  padding-block: var(--sp-2xl);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile dégradé : il assure la lisibilité du texte sans assombrir l'image
   entière, contrairement à un aplat uniforme. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(26 24 21 / 0.72) 0%,
    rgb(26 24 21 / 0.44) 42%,
    rgb(26 24 21 / 0.10) 75%
  );
}

.hero__content {
  position: relative;
  color: #fff;
  max-width: 900px;
}

.hero__content .label { color: rgb(255 255 255 / 0.78); }

.hero__title {
  font-size: var(--fs-display);
  line-height: 0.94;
  margin-block: var(--sp-s) var(--sp-m);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-m);
}

.hero__scroll {
  position: absolute;
  bottom: var(--sp-m);
  right: var(--page-x);
  display: flex;
  align-items: center;
  gap: 0.8em;
  color: rgb(255 255 255 / 0.8);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: scroll-hint 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* --- Déclaration ---------------------------------------------------------- */

.statement {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.statement--wide { max-width: 30ch; }

/* --- Cartes d'univers ----------------------------------------------------- */

.universes {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.universe-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 3 / 4;
}

.universe-card__media {
  position: absolute;
  inset: 0;
}

.universe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.universe-card:hover .universe-card__media img { transform: scale(1.04); }

.universe-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(26 24 21 / 0.68) 0%, rgb(26 24 21 / 0.05) 60%);
}

.universe-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-m);
}

.universe-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  margin-top: var(--sp-xs);
}

.universe-card .label {
  display: block;
  color: rgb(255 255 255 / 0.75);
}

/* --- Galeries ------------------------------------------------------------- */

/* Gouttière minuscule : les images se touchent presque et forment un bloc,
   le blanc étant réservé au pourtour de la galerie. */
.gallery {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(12, 1fr);
}

.gallery__item {
  position: relative;
  grid-column: span 4;
  margin: 0;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le fond neutre occupe la place de l'image avant son chargement, ce qui
     supprime tout décalage de mise en page. */
  background: var(--surface);
}

.gallery__item--wide { grid-column: span 8; }
.gallery__item--full { grid-column: span 12; }
.gallery__item--half { grid-column: span 6; }

/* Décalage vertical d'une image sur deux dans les aperçus asymétriques. */
.gallery__item--drop { margin-top: var(--sp-2xl); }

@media (max-width: 900px) {
  .gallery__item,
  .gallery__item--wide,
  .gallery__item--half { grid-column: span 6; }
  .gallery__item--drop { margin-top: 0; }
}

@media (max-width: 640px) {
  .gallery { gap: 4px; }
  .gallery__item,
  .gallery__item--wide,
  .gallery__item--half,
  .gallery__item--full { grid-column: span 12; }
}

.gallery__button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery__button img { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.gallery__button:hover img { transform: scale(1.03); }

.gallery__caption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* --- Visionneuse ---------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Fond assorti au site plutôt qu'un noir pur : un noir absolu écrase les
     ombres des photographies au lieu de les mettre en valeur. */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  padding: var(--sp-s) var(--page-x) var(--sp-m);
}

.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding-block: var(--sp-s);
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-m);
}

.lightbox__nav {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.lightbox__nav:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lightbox__nav:disabled { opacity: 0.3; cursor: default; }
.lightbox__nav:disabled:hover { background: none; color: var(--ink); border-color: var(--rule); }

.lightbox__close {
  background: none;
  border: 0;
  padding: var(--sp-xs);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  cursor: pointer;
}

.lightbox__counter {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}

/* --- Prestations et tarifs ------------------------------------------------ */

.offers {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.offer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
  height: 100%;
  padding: var(--sp-l) var(--sp-m);
  background: var(--bg);
  border: 1px solid var(--rule);
}

.section--surface .offer { background: var(--bg); }

/* La formule intermédiaire est celle que choisit la majorité des clients :
   elle est mise en avant plutôt que noyée entre les deux autres. */
.offer--featured {
  border-color: var(--ink);
  position: relative;
}

.offer--featured::before {
  content: attr(data-badge);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.4em 1.2em;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.offer__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.05;
}

.offer__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.offer__price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 0.4em;
}

.offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.offer__list li {
  position: relative;
  max-width: none;
  margin: 0 0 0.5em;
  padding-left: 1.2em;
}

.offer__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.offer__footer { margin-top: auto; padding-top: var(--sp-s); }

/* --- Démarche en étapes --------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: '0' counter(step);
  display: block;
  margin-bottom: var(--sp-s);
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
  color: var(--accent);
}

.step h3 { margin-bottom: var(--sp-xs); }
.step p { font-size: var(--fs-small); color: var(--ink-muted); }

/* --- Témoignage ----------------------------------------------------------- */

.quote {
  max-width: 30ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.35;
}

.quote__author {
  display: block;
  margin-top: var(--sp-m);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}

/* --- Formulaires ---------------------------------------------------------- */

.form { max-width: 640px; }

.field { margin-bottom: var(--sp-m); }

/* Les libellés de champ sont en petites capitales ; la case à cocher, elle,
   porte une phrase entière qui doit se lire normalement. */
.field > label:not(.checkbox),
.fieldset__legend {
  display: block;
  margin-bottom: 0.6em;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.field__hint {
  display: block;
  margin-top: 0.4em;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
input[type='password'],
select,
textarea {
  width: 100%;
  padding: 0.85em 1em;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  transition: border-color var(--transition);
}

.section--surface input,
.section--surface select,
.section--surface textarea { background: var(--bg); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
  outline: none;
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] { border-color: var(--error); }

textarea { min-height: 140px; resize: vertical; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3em;
}

.fieldset {
  margin: 0 0 var(--sp-m);
  padding: 0;
  border: 0;
}

/* Choix présentés en pastilles cliquables : plus rapide au pouce qu'un menu
   déroulant, et l'ensemble des options reste visible d'un coup d'œil. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.choice { position: relative; }

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: block;
  padding: 0.7em 1.2em;
  border: 1px solid var(--rule);
  font-size: var(--fs-small);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.choice input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.checkbox {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  cursor: pointer;
}

.checkbox input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  accent-color: var(--ink);
}

.checkbox span { max-width: 56ch; }

.field__error {
  display: block;
  margin-top: 0.4em;
  font-size: var(--fs-small);
  color: var(--error);
}

.form__notice {
  margin: var(--sp-m) 0;
  padding: var(--sp-s) var(--sp-m);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  background: var(--surface);
}

.form__feedback {
  margin-bottom: var(--sp-m);
  padding: var(--sp-s) var(--sp-m);
  font-size: var(--fs-small);
  border-left: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 8%, transparent);
}

.form__feedback[data-tone='success'] {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.grid-2 {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* --- Formulaire par étapes ------------------------------------------------ */

.wizard__progress {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-l);
  list-style: none;
  padding: 0;
}

.wizard__progress li {
  flex: 1;
  margin: 0;
  max-width: none;
  padding-top: var(--sp-xs);
  border-top: 2px solid var(--rule);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  transition: border-color var(--transition), color var(--transition);
}

.wizard__progress li[data-state='current'],
.wizard__progress li[data-state='done'] {
  border-top-color: var(--ink);
  color: var(--ink);
}

.wizard__step[hidden] { display: none; }

.wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  align-items: center;
  margin-top: var(--sp-l);
}

/* --- Calendrier de réservation -------------------------------------------- */

.booking {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .booking { grid-template-columns: 1fr 1fr; align-items: start; }
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-bottom: var(--sp-m);
}

.calendar__month {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: capitalize;
}

.calendar__nav {
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.calendar__nav:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.calendar__nav:disabled { opacity: 0.3; cursor: default; }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar__weekday {
  padding-bottom: var(--sp-xs);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-align: center;
}

.calendar__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  cursor: default;
}

.calendar__day--available {
  border-color: var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.calendar__day--available:hover { border-color: var(--ink); }

.calendar__day--selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.calendar__day--unavailable { opacity: 0.35; }

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  margin-top: var(--sp-m);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

.calendar__legend span { display: flex; align-items: center; gap: 0.5em; }

.calendar__legend i {
  width: 12px;
  height: 12px;
  border: 1px solid var(--rule);
}

.calendar__legend i[data-state='selected'] { background: var(--ink); border-color: var(--ink); }
.calendar__legend i[data-state='none'] { opacity: 0.35; }

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-s);
}

.slot {
  padding: 0.7em 1.1em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.slot:hover { border-color: var(--ink); }

.slot[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.booking__summary {
  padding: var(--sp-m);
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: var(--fs-small);
}

.booking__summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4em var(--sp-s); }
.booking__summary dt { color: var(--ink-muted); }
.booking__summary dd { margin: 0; }

.booking__empty {
  padding: var(--sp-m) 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
}

/* --- Pied de page --------------------------------------------------------- */

.site-footer {
  padding-block: var(--sp-2xl) var(--sp-l);
  background: var(--surface-deep);
  color: rgb(247 244 239 / 0.72);
  font-size: var(--fs-small);
}

.site-footer a { color: var(--bg); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: var(--sp-l);
  border-bottom: 1px solid rgb(247 244 239 / 0.14);
}

.site-footer__title {
  margin-bottom: var(--sp-s);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(247 244 239 / 0.5);
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 0.5em; max-width: none; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-m);
  justify-content: space-between;
  padding-top: var(--sp-m);
  font-size: var(--fs-micro);
  color: rgb(247 244 239 / 0.5);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--bg);
  line-height: 1;
}

/* --- Bandeau de rappel ---------------------------------------------------- */

.cta-band {
  display: grid;
  gap: var(--sp-m);
  align-items: center;
  justify-items: start;
}

/* ==========================================================================
   4. Utilitaires
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Ajustements ponctuels ------------------------------------------------
   Ces classes remplacent les attributs `style` en ligne, que la politique de
   sécurité de contenu interdit. Elles restent volontairement peu nombreuses :
   tout ce qui se répète a vocation à devenir un vrai composant. */

.u-m-0 { margin: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-xs { margin-top: var(--sp-xs); }
.u-mt-s { margin-top: var(--sp-s); }
.u-mt-m { margin-top: var(--sp-m); }
.u-mt-l { margin-top: var(--sp-l); }
.u-mb-s { margin-bottom: var(--sp-s); }
.u-mb-m { margin-bottom: var(--sp-m); }
.u-mb-l { margin-bottom: var(--sp-l); }

/* Largeurs de bloc de texte, exprimées en caractères : c'est la mesure qui
   gouverne réellement le confort de lecture. */
.u-w-16 { max-width: 16ch; }
.u-w-18 { max-width: 18ch; }
.u-w-46 { max-width: 46ch; }
.u-w-48 { max-width: 48ch; }
.u-w-60 { max-width: 60ch; }
.u-w-62 { max-width: 62ch; }
.u-w-70 { max-width: 70ch; }

.u-plain { text-decoration: none; }
.u-normal-case { text-transform: none; }
.u-no-top { padding-top: 0; }
.u-size-lead { font-size: var(--fs-lead); }
.u-reverse { flex-direction: row-reverse; }
.u-block { display: block; }
.u-pointer { cursor: pointer; }

.hero__lead {
  color: rgb(255 255 255 / 0.86);
  max-width: 46ch;
}

.booking__aside-note {
  margin-top: var(--sp-m);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

/* Trace d'erreur affichée hors production, pour le développement. */
.error-detail {
  margin-top: var(--sp-l);
  padding: var(--sp-m);
  background: var(--surface);
  overflow-x: auto;
  font-size: 12px;
}

.no-scroll { overflow: hidden; }

/* Apparition au défilement. L'état de départ n'est appliqué que si le script
   a démarré : sans JavaScript, le contenu reste visible. */
[data-reveal] {
  opacity: 1;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-reveal][data-revealed='true'] {
  opacity: 1;
  transform: none;
}

/* Respect du réglage système : aucune animation pour qui en fait la demande. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header,
  .site-footer,
  .hero__scroll,
  .lightbox { display: none !important; }

  body { background: #fff; color: #000; }
}