/* ==========================================================================
   03-components.css — composants (BEM). Tokens seulement, container queries.
   Contenants nommés : page (.site), sec (.section), header, foot, card, form.
   Seuils : 40rem (tablette), 64rem (bureau). Pas de media query, sauf préférences.
   ========================================================================== */

/* ---------- Mise en page ---------- */
.site { container: page / inline-size; overflow-x: clip; }
.container { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { container: sec / inline-size; position: relative; padding-block: var(--space-section); }

/* ---------- Sous-titre : seconde ligne d'un titre (h2), plus petite ---------- */
.subtitle { display: block; font-size: var(--text-h3); margin-block-start: var(--space-3xs); }

/* ---------- Bouton ---------- */
.button {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: var(--line-thin) solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-bold);
  line-height: var(--leading-ui); text-decoration: none; text-align: center;
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.button::after {
  content: ""; flex: none; inline-size: 1.1em; block-size: 1.1em; background: currentColor;
  -webkit-mask: var(--mask-arrow) center / contain no-repeat; mask: var(--mask-arrow) center / contain no-repeat;
}
.button:hover { --btn-bg: var(--color-accent-dark); transform: translateY(calc(var(--space-3xs) * -0.5)); }
.button:active { transform: translateY(calc(var(--space-3xs) * 0.5)); }
.button--plain::after { display: none; }
.button--secondary { --btn-bg: var(--color-surface); --btn-fg: var(--color-primary); --btn-bd: var(--color-primary); }
.button--secondary:hover { --btn-bg: var(--color-paper); }
.button--light { --btn-bg: var(--color-white); --btn-fg: var(--color-accent); }
.button--light:hover { --btn-bg: var(--color-paper); }
.button--light-primary { --btn-fg: var(--color-primary); }

.link { font-weight: var(--weight-bold); text-decoration-thickness: var(--line-thin); }
.link { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.link::after { content: ""; flex: none; inline-size: 1em; block-size: 1em; background: currentColor; -webkit-mask: var(--mask-arrow) center / contain no-repeat; mask: var(--mask-arrow) center / contain no-repeat; }
.link-plain { text-decoration-thickness: var(--line-thin); }

/* ---------- En-tête et navigation ---------- */
.site-header { container: header / inline-size; position: relative; z-index: 30; padding-block: var(--space-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.site-header__logo, .nav-toggle { position: relative; z-index: 2; }
.site-header__logo img { block-size: var(--logo-h); inline-size: auto; }
.site-header__logo-inverse { display: none; }

/* Bouton d'ouverture : un petit tampon-note, « Menu » / « Fermer » (voir .stamp--note plus bas) */
.nav-toggle { appearance: none; border: 0; background: none; cursor: pointer; }
.site-header .nav-toggle { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--text-lg); }
/* Zone tactile : au moins 44 × 44 px, sans changer l'apparence (le ::after du tampon-note, inutilisé, sert de surface invisible) */
.site-header .nav-toggle::after { display: block; filter: none; border: 0; pointer-events: auto; inset-block: min(0px, calc((100% - var(--tap)) / 2)); inset-inline: min(0px, calc((100% - var(--tap)) / 2)); }
.nav-toggle__icon { flex: none; inline-size: 1.05em; block-size: 1.05em; background: currentColor; -webkit-mask: var(--mask-burger-hand) center / contain no-repeat; mask: var(--mask-burger-hand) center / contain no-repeat; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { -webkit-mask-image: var(--mask-close-hand); mask-image: var(--mask-close-hand); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

/* Mobile : le menu ouvert prend tout l'écran (bleu nuit, grain clair, neige) */
html[data-nav-open] { overflow: hidden; }
html[data-nav-open] .cta-bar { display: none; }
html[data-nav-open] .site-header__logo img:not(.site-header__logo-inverse) { display: none; }
html[data-nav-open] .site-header__logo-inverse { display: block; }
.site-nav {
  display: none;
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 1;
  block-size: 100vh; block-size: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--space-3xl) + var(--space-lg)) var(--gutter) var(--space-xl);
  background-color: var(--color-primary); color: var(--color-on-primary);
}
.site-nav::before { content: ""; position: absolute; inset: 0; background: var(--texture-grain-light); opacity: .55; pointer-events: none; }
.site-nav > * { position: relative; z-index: 1; }
.site-nav > .snow { position: absolute; z-index: 0; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; color: var(--color-on-primary); }
.site-nav[data-open] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xl); }
.site-nav__list { display: flex; flex-direction: column; inline-size: 100%; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-h3); line-height: var(--leading-heading); }
.site-nav__list li { position: relative; }
.site-nav__list li::after { content: ""; display: block; block-size: var(--space-2xs); background: currentColor; opacity: .35; -webkit-mask: var(--mask-rule) repeat-x left center / auto 100%; mask: var(--mask-rule) repeat-x left center / auto 100%; }
.site-nav__link { display: block; padding-block: var(--space-xs); text-decoration: none; }
.site-nav__link:hover { text-decoration: underline; text-decoration-thickness: var(--line); }
@container header (max-width: 63.99rem) {   /* menu plein écran : survol / appui */
  .site-nav__link { transition: transform var(--duration) var(--ease), color var(--duration) var(--ease); }
  .site-nav__link:hover, .site-nav__link:active { text-decoration: none; color: var(--color-highlight-light); transform: translateX(var(--space-sm)); }
  .site-nav__list li:hover::after { opacity: .8; }
}
.site-nav .button { font-size: var(--text-xl); }
.site-nav__extra { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: auto; color: var(--color-on-primary-muted); font-size: var(--text-md); }
.site-nav__contact { display: flex; flex-direction: column; gap: 0; font-weight: var(--weight-bold); }
.site-nav__extra a { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes nav-in { from { opacity: 0; transform: translateY(-0.75rem); } }
  .site-nav[data-open] { animation: nav-in .3s var(--ease) both; }
  .site-nav[data-open] .site-nav__list li, .site-nav[data-open] > .button, .site-nav[data-open] .site-nav__extra { animation: nav-in .5s var(--ease) both; animation-delay: calc(var(--i, 6) * 60ms + 120ms); }
  .site-nav__list li:nth-child(1) { --i: 0; } .site-nav__list li:nth-child(2) { --i: 1; } .site-nav__list li:nth-child(3) { --i: 2; }
  .site-nav__list li:nth-child(4) { --i: 3; } .site-nav__list li:nth-child(5) { --i: 4; } .site-nav__list li:nth-child(6) { --i: 5; }
}
@container header (min-width: 64rem) {
  html[data-nav-open] { overflow: visible; }
  .site-header .nav-toggle { display: none; }
  .site-nav, .site-nav[data-open] {
    display: flex; position: static; z-index: auto; flex: 1; flex-direction: row; align-items: center; gap: var(--space-md);   /* = écart du header : le menu est centré entre logo et bouton */
    block-size: auto; overflow: visible; padding: 0; background: none; color: var(--color-text); animation: none;
  }
  .site-nav::before, .site-nav > .snow, .site-nav__extra { display: none; }
  .site-nav__list { flex-direction: row; inline-size: auto; margin-inline: auto; gap: var(--space-lg); font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: inherit; }
  .site-nav__list li::after { display: none; }
  .site-nav__link { padding-block: var(--space-2xs); }
  /* Réserver de l'en-tête : bouton contour rouge, plus discret que le plein */
  .site-nav .button { font-size: var(--text-md); padding: var(--space-2xs) var(--space-md); }
  .site-nav .button { --btn-bg: var(--color-surface); --btn-fg: var(--color-accent); --btn-bd: var(--color-accent); }   /* fond plein : lisible aussi quand la photo du hero remonte derrière */
  .site-nav .button:hover { --btn-bg: var(--color-paper); }
}

/* ---------- Sélecteur de langue : une seule entrée, la langue opposée (EN sur le français, FR sur l'anglais), juste après le bouton Réserver ---------- */
.lang-switch { display: inline-flex; align-items: center; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--tap); min-block-size: var(--tap); padding-inline: var(--space-xs); color: inherit; text-decoration: none; letter-spacing: var(--tracking-label); }
.lang-switch a:hover { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 0.35em; }
.site-header--over .lang-switch { color: var(--color-white); text-shadow: var(--shadow-text); }
@container header (min-width: 64rem) { .site-nav .lang-switch { color: var(--color-text); } .site-header--over .site-nav .lang-switch { color: var(--color-white); } }
.site-nav .lang-switch { align-self: flex-start; margin-inline-start: calc(var(--space-xs) * -1); }   /* panneau mobile : sous le bouton, aligné sur le texte */

/* ---------- Photo encadrée ---------- */
.photo { position: relative; isolation: isolate; padding: var(--space-xs); transform: rotate(var(--tilt, 0deg)); box-shadow: var(--shadow-paper); }
.photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-paper); border: var(--line) solid var(--color-text);
  filter: url(#rough);
}
.photo__img { inline-size: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- Carte ---------- */
/* L'ombre est sur .card (lisse) et non sur ::before : le filtre « rough » la rendait granuleuse. */
.card { position: relative; isolation: isolate; padding: var(--space-xl); color: var(--ctx-fg); box-shadow: var(--shadow-card); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--card-bg, var(--color-surface)); border: var(--line) solid var(--color-text);
  filter: url(#rough);
}
.card[class*="ctx-"] { background: none; }
.card--accent { --card-bg: var(--color-accent); }
.card--primary { --card-bg: var(--color-primary); }
.card--paper { --card-bg: var(--color-paper); }
@container page (max-width: 40rem) { .card::before { filter: none; } }
.card__eyebrow { margin-block-end: var(--space-sm); }
.card__title, .form__confirm-title { font-size: var(--text-h3); line-height: var(--leading-heading); }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-md); }

/* ---------- Tarifs et listes de prix ---------- */
.rates { display: flex; flex-direction: column; border-block-start: var(--stroke) solid var(--ctx-line); }
.rates__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding-block: var(--space-xs); border-block-end: var(--stroke) solid var(--ctx-line);
  font-size: var(--text-md); line-height: var(--leading-ui);
}
.rates__row strong, .rates__row b { font-weight: var(--weight-bold); text-align: end; }
.rates__row--head { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ctx-fg-muted); }
.rates__row--head b { font-weight: var(--weight-regular); }
.note-small, .form__legend { font-size: var(--text-sm); color: var(--ctx-fg-muted); }

/* ---------- Tampons ---------- */
.stamp {
  --stamp-color: var(--color-accent);
  --stamp-rotate: var(--tilt-stamp);
  position: relative; isolation: isolate; display: inline-block;
  padding: 0.75em 1.1em; color: var(--stamp-color); text-align: center;
  transform: rotate(var(--stamp-rotate)); transition: transform var(--duration) var(--ease);
  box-shadow: var(--shadow-stamp);
}
.stamp--tilt-left { --stamp-rotate: calc(var(--tilt-stamp) * -1); }
.stamp::before, .stamp::after { content: ""; position: absolute; z-index: -1; filter: url(#rough); pointer-events: none; }
.stamp::before { inset: 0; background: var(--color-paper); border: var(--line) solid var(--stamp-color); }
.stamp::after { inset: var(--space-3xs); border: var(--line-thin) solid var(--stamp-color); }
.stamp--note { --stamp-color: var(--color-highlight); color: var(--color-highlight-text); padding: 0.3em 0.6em 0.3em; font-family: var(--font-hand); font-size: var(--text-h3); line-height: 0.95; }
.stamp--note::after { display: none; }

/* ---------- Sceau rond ---------- */
.seal { inline-size: var(--size-seal); aspect-ratio: 1; border-radius: 50%; background: var(--color-surface); transform: rotate(-12deg); }
.seal__ring { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.seal__ring--inner { stroke-width: 1; }
.seal__ring { filter: url(#rough); }   /* cercles du crest : même tracé dessiné que le bouton de lecture de la visite virtuelle */
.seal__ring:not(.seal__ring--inner) { stroke-width: 3.5; }
.seal__ring--inner { stroke-width: 1.8; }
.seal__text { fill: var(--color-accent); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 3px; }
.seal__tree { fill: var(--color-highlight); }

/* ---------- Décor : forêt, congères ---------- */
.drift { display: block; inline-size: 100%; block-size: var(--drift-h); margin-block-end: calc(var(--stroke) * -1); color: var(--color-primary); }
.drift--flip { transform: scaleY(-1); margin-block: calc(var(--stroke) * -1) 0; }

/* ---------- Bande d'infos ---------- */
.fact-line { container: sec / inline-size; padding-block: var(--space-xl) var(--space-lg); }
.fact-line__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.fact-line .rule { max-inline-size: var(--measure-wide); }
/* Éléments en inline-block dans un flux centré : text-wrap: balance répartit les éléments également sur les lignes.
   Le séparateur est en fin d'élément ; le JS (main.js) masque et « rembourse » celui qui tombe en bout de ligne. */
.fact-line__items { display: block; max-inline-size: var(--measure-wide); font-family: var(--font-display); font-size: var(--text-md); line-height: 1.75; text-align: center; text-wrap: balance; }
.fact-line__items li { display: inline-block; white-space: nowrap; }
.fact-line__items li:not(:last-child)::after { content: ""; display: inline-block; inline-size: 0.7em; block-size: 1em; margin-inline: var(--space-md); vertical-align: -0.12em; background: var(--color-highlight); -webkit-mask: var(--mask-glyph) no-repeat center / contain; mask: var(--mask-glyph) no-repeat center / contain; }
.fact-line__items li[data-eol]::after { visibility: hidden; }
.fact-line__items li[data-eol]:not(:last-child) { margin-inline-end: calc(-1 * (0.7em + 2 * var(--space-md))); }

/* ---------- Liste à flocons : puces dessinées à la main, titre en gras puis texte ---------- */

.flake-list li { display: grid; grid-template-columns: 1.05em 1fr; column-gap: var(--space-xs); align-items: start; }
/* Flocons (liste et « Avant de partir ») : masque et 3 variantes partagés ; seule la taille diffère. */
.flake-list li::before, .checklist__title::before { content: ""; background: var(--ctx-fg-muted); -webkit-mask: var(--mask-flake-a) center / contain no-repeat; mask: var(--mask-flake-a) center / contain no-repeat; }
.flake-list li:nth-child(3n+2)::before, .checklist__item:nth-child(3n+2) .checklist__title::before { -webkit-mask-image: var(--mask-flake-b); mask-image: var(--mask-flake-b); }
.flake-list li:nth-child(3n)::before, .checklist__item:nth-child(3n) .checklist__title::before { -webkit-mask-image: var(--mask-flake-c); mask-image: var(--mask-flake-c); }
.flake-list li::before { grid-row: 1 / span 2; inline-size: 1.05em; block-size: 1.05em; margin-block-start: 0.2em; }
.flake-list--tight { gap: 0; }
.flake-list strong { grid-column: 2; color: var(--ctx-fg); font-weight: var(--weight-bold); }
.flake-list span { grid-column: 2; color: var(--ctx-fg-body); }

/* ---------- Liste de menu ---------- */
.menu-group__title { padding-block: var(--space-sm) var(--space-3xs); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ctx-fg-muted); }
.menu-group__item { padding-block: var(--space-2xs); border-block-end: var(--stroke) dotted var(--color-border-dotted); font-size: var(--text-md); line-height: var(--leading-ui); }

/* ---------- Citation ---------- */
.quote__text { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.3; text-wrap: balance; }
.quote__body { margin-block-start: var(--space-md); max-inline-size: var(--measure); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--ctx-fg-body); }
.quote__by { margin-block-start: var(--space-sm); font-family: var(--font-hand); font-size: var(--text-h3); line-height: var(--leading-display); color: var(--color-highlight); }

/* ---------- Liste pratique ---------- */
.checklist { display: grid; gap: var(--space-md) var(--space-xl); }
.checklist__item, .about__press { display: flex; flex-direction: column; gap: var(--space-2xs); }
.checklist__title { font-weight: var(--weight-bold); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2xs); }
.checklist__title::before { flex: none; inline-size: 1.5em; block-size: 1.5em; margin-inline-start: -0.2em; }
.checklist__text { font-size: var(--text-md); line-height: var(--leading-ui); color: var(--ctx-fg-body); }
@container sec (min-width: 40rem) { .checklist { grid-template-columns: 1fr 1fr; } }

/* ---------- Pied de page ---------- */
.site-footer { container: foot / inline-size; margin-block-start: var(--space-xl); }
.site-footer__forest { display: block; inline-size: 100%; block-size: max(3rem, 9.583cqi); /* 9,583cqi = ratio du dessin (2400 × 230) : le dessin 1440 × 230 est répété 1,67 fois, 40 % plus bas */ margin-block-end: calc(var(--stroke) * -1); }
.site-footer__body { background: var(--color-primary-deep); color: var(--color-on-primary); padding-block: var(--space-lg) var(--space-lg); }
.site-footer__logo { block-size: clamp(5rem, 10cqi, 9rem); inline-size: auto; }
.site-footer__tag { margin-block-start: var(--space-xs); color: var(--color-on-primary-muted); font-size: var(--text-md); }
.site-footer__title { margin-block-end: var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-on-primary-muted); }
.site-footer__list { display: flex; flex-direction: column; gap: 0; font-size: var(--text-md); line-height: var(--leading-ui); }
.site-footer a { text-decoration: none; }
.site-footer__list a { display: inline-flex; align-items: center; min-block-size: var(--tap); }   /* zone de toucher de 44 px, sans changer l'apparence */
.site-footer a:hover { text-decoration: underline; }
.site-footer__legal { margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-block-start: var(--stroke) solid var(--color-border-inverse); font-size: var(--text-sm); color: var(--color-on-primary-muted); }
@container foot (min-width: 40rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@container foot (min-width: 64rem) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Barre d'action mobile ---------- */
.cta-bar {
  display: none; position: sticky; inset-block-end: 0; z-index: 20;
  gap: var(--space-xs); padding: var(--space-xs) var(--gutter) var(--space-sm);
  background: var(--color-surface); border-block-start: var(--stroke) solid var(--color-border);
  box-shadow: 0 calc(var(--space-2xs) * -1) var(--space-md) color-mix(in srgb, var(--color-shadow) 12%, transparent);
}
.cta-bar .button { flex: 1; }
.cta-bar__groups { flex: none; }   /* la largeur suit le libellé « Groupes privés » ; « Réserver » prend le reste */
@container page (max-width: 47.99rem) { .cta-bar { display: flex; } }

/* ---------- Formulaire ---------- */
.form { container: form / inline-size; display: flex; flex-direction: column; gap: var(--space-lg); }
.form__head { display: flex; flex-direction: column; gap: var(--space-xs); }
.form__title { font-size: var(--text-h3); }
.form__intro { max-inline-size: 46em; font-size: var(--text-base); color: var(--ctx-fg-body); line-height: var(--leading-ui); }
.form__grid { display: grid; gap: var(--space-md) var(--space-lg); }
@container form (min-width: 34rem) { .form__grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-inline-size: 0; }
.field__label, .fieldset__legend { font-size: var(--text-base); font-weight: var(--weight-bold); }
.field__req { color: var(--color-accent); }
.field__hint, .choice-card__text { font-size: var(--text-sm); color: var(--ctx-fg-muted); line-height: var(--leading-ui); }
.input {
  inline-size: 100%; min-block-size: var(--control); padding: var(--space-xs) var(--space-sm);
  background: var(--color-white); border: var(--line-thin) solid var(--color-text); border-radius: var(--radius);
  font-size: var(--text-md); line-height: var(--leading-ui);
}
.input--area { min-block-size: calc(var(--space-3xl) * 1.4); resize: vertical; }
.field[data-invalid] .input { border: var(--line) solid var(--color-accent); }
.field__error { display: none; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-accent); }
.field__error::before {
  content: ""; flex: none; inline-size: 1.1em; block-size: 1.1em; background: currentColor;
  -webkit-mask: var(--mask-alert) center / contain no-repeat; mask: var(--mask-alert) center / contain no-repeat;
}
[data-invalid] > .field__error, [data-invalid] .field__error { display: flex; }
.fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.fieldset__legend { padding: 0 0 var(--space-3xs); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block-start: var(--space-3xs); }
.choice-pill {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md);
  background: var(--color-white); border: var(--line-thin) solid var(--color-text); border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer;
}
.choice-pill:has(:checked) { background: var(--color-primary); color: var(--color-on-primary); }
.choice-pill:has(:focus-visible), .choice-card:has(:focus-visible) { outline: var(--focus-width) solid var(--ctx-focus); outline-offset: var(--focus-offset); }
.choice-pill input, .choice-card input { accent-color: var(--color-primary); inline-size: 1.1em; block-size: 1.1em; margin: 0; flex: none; }
.choice-pill:has(:checked) input { accent-color: var(--color-highlight-light); }
.choice-cards { display: grid; gap: var(--space-xs); }
@container form (min-width: 34rem) { .choice-cards { grid-template-columns: 1fr 1fr; } }
.choice-card {
  display: flex; align-items: flex-start; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm);
  background: var(--color-white); border: var(--line-thin) solid var(--color-text); border-radius: var(--radius); cursor: pointer;
}
.choice-card:has(:checked) { background: var(--color-paper); border-width: var(--line); }
.choice-card input { margin-block-start: var(--space-3xs); }
.choice-card__body { display: flex; flex-direction: column; gap: var(--space-3xs); }
.choice-card__title { font-weight: var(--weight-bold); font-size: var(--text-md); line-height: var(--leading-ui); }
.consent { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-base); line-height: var(--leading-ui); color: var(--ctx-fg-body); }
.consent input { accent-color: var(--color-primary); inline-size: 1.25rem; block-size: 1.25rem; margin: var(--space-3xs) 0 0; flex: none; }
.form__summary { padding: var(--space-xs) var(--space-sm); border: var(--line) solid var(--color-accent); border-radius: var(--radius); background: var(--color-white); color: var(--color-accent); font-weight: var(--weight-bold); font-size: var(--text-base); }
.form__actions { display: flex; justify-content: flex-end; }
.form__captcha { min-block-size: 4.0625rem; }  /* hauteur du widget : évite le saut de mise en page au chargement */
.form__trap { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }  /* piège à robots (Formspree : _gotcha) */
.form__confirm { display: flex; gap: var(--space-md); align-items: flex-start; }
.form__confirm .glyph { margin-block-start: var(--space-xs); }

/* ---------- Panneau déroulant (formulaire de groupe) ---------- */
.disclosure__panel { margin-block-start: var(--space-xl); }

/* ==========================================================================
   Animations subtiles (arrivée douce des photos, vapeur, crest). Aucune à l'arrivée sur la page :
   tout se déclenche au défilement. main.js pose data-reveal (puis .is-in) seulement si l'animation est permise.
   ========================================================================== */
/* Se poser : photos, tampons et cartes arrivent d'un rien plus bas, en fondu, sans rebond */
.js [data-reveal] { transition: opacity var(--duration-reveal) var(--ease-out-soft), translate var(--duration-reveal) var(--ease-out-soft), transform var(--duration) var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 var(--reveal-shift); }
/* Vapeur : trois volutes très pâles qui montent au-dessus de la soupe */
.steam { position: absolute; inset-inline-start: var(--x, 50%); inset-block-start: var(--y, 50%); z-index: 1; inline-size: var(--space-3xl); block-size: calc(var(--space-3xl) * 1.4);
  translate: -50% calc(-100% + var(--py, 0px)); pointer-events: none; }
.steam i { position: absolute; inset-block-end: 0; inline-size: var(--space-sm); block-size: 70%; border-radius: 50%; background: var(--color-white);
  filter: blur(var(--space-2xs)); opacity: 0; animation: steam var(--duration-steam) ease-in-out infinite; }
.steam i:nth-child(1) { inset-inline-start: 15%; }
.steam i:nth-child(2) { inset-inline-start: 45%; animation-delay: calc(var(--duration-steam) / -3); }
.steam i:nth-child(3) { inset-inline-start: 72%; animation-delay: calc(var(--duration-steam) / -1.5); }
@keyframes steam {
  0% { opacity: 0; transform: translate(0, 10%) scale(0.6, 0.7); }
  35% { opacity: 0.3; }
  70% { opacity: 0.15; transform: translate(20%, -25%) scale(1, 1); }
  100% { opacity: 0; transform: translate(-10%, -45%) scale(1.3, 1.1); }
}
/* Vent dans les sapins du pied de page : chaque arbre penche à son tour (main.js découpe la forêt en arbres et décale la phase
   de gauche à droite : une rafale qui traverse). Le pied de chaque arbre reste planté. */
.tree { --k: 1; --s: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: tree-sway calc(var(--duration-sway) * var(--t, 1) * var(--s)) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
/* Trois couches de profondeur : le fond penche peu et lentement, le milieu normalement, le devant plus et plus vite */
.tree[data-layer="1"] { --k: var(--layer-back-k); --s: var(--layer-back-s); }
.tree[data-layer="2"] { --k: var(--layer-mid-k); --s: var(--layer-mid-s); }
.tree[data-layer="3"] { --k: var(--layer-front-k); --s: var(--layer-front-s); }
[data-offscreen] .tree { animation-play-state: paused; }   /* le vent s'arrête hors écran (posé par main.js) */
@keyframes tree-sway {
  from { transform: skewX(calc(var(--sway) * var(--a, 1) * var(--k) * -0.7)); }
  to { transform: skewX(calc(var(--sway) * var(--a, 1) * var(--k))); }
}
/* Sapins du hero : pas de vent continu. --lean (-1 à 1) est posée par main.js selon le défilement ; chaque arbre suit avec un retard selon sa place (--p). */
.tree--scroll { animation: none; transform: skewX(calc(var(--lean, 0) * var(--sway) * var(--a, 1) * var(--k))); transition: transform calc(1.2s * var(--s)) var(--ease-out-soft); transition-delay: calc(var(--p, 0) * 0.45s); }
/* Crest : tourne doucement au défilement (--seal-spin posé par main.js) */
.hero .seal { rotate: calc(var(--seal-spin, 0) * 1deg); }
@media (prefers-reduced-motion: reduce) {
  .steam { display: none; }
  .tree { animation: none; }
  .tree--scroll { transition: none; }
}