/* ==========================================================================
   04-pages.css — compositions propres à chaque page (accueil, réservations).
   Les composants restent dans 03 ; ici, seulement la mise en page des sections.
   ========================================================================== */

/* ===================== ACCUEIL ===================== */

/* Hero : la tablée en fond (image inversée), texte à gauche, voile qui s'allège vers la droite,
   sapins collés au bas dans la couleur de la section suivante (--color-surface), 120 px au plus. */
.hero { container: hero / inline-size; position: relative; isolation: isolate; overflow: hidden; color: var(--color-white); background: var(--color-primary-deep); --forest-h: var(--forest-h-photo); }   /* 7,5 cqi : le dessin 1440 × 270 est répété 2,5 fois sur la largeur */
/* L'en-tête (transparent) passe PAR-DESSUS le hero : la photo commence tout en haut de la page.
   Logo clair, liens blancs, et un voile sombre en haut de la photo pour garder le menu lisible. */
.hero { --hdr: calc(var(--logo-h) + var(--space-sm) * 2); margin-block-start: calc(var(--hdr) * -1); }   /* = hauteur de l'en-tête (logo + marges) */
.hero::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 0; block-size: calc(var(--hdr) * 1.9); pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-deep) 78%, transparent), color-mix(in srgb, var(--color-primary-deep) 30%, transparent) 55%, transparent); }
.site-header--over { color: var(--color-white); }
.site-header--over .site-header__logo img:not(.site-header__logo-inverse) { display: none; }
.site-header--over .site-header__logo-inverse { display: block; }
.site-header--over .site-nav__link { color: var(--color-white); text-shadow: var(--shadow-text); }
.hero__bg { position: absolute; inset-inline: 0; inset-block: -12%; z-index: -2; margin: 0; transform: scaleX(-1); }   /* 12 % de marge en haut et en bas : la course du parallaxe */
.hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }   /* --py est posée par main.js au défilement */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to right, color-mix(in srgb, var(--color-primary-deep) 84%, transparent) 0%, color-mix(in srgb, var(--color-primary-deep) 66%, transparent) 40%, color-mix(in srgb, var(--color-primary-deep) 12%, transparent) 100%),
  linear-gradient(to top, color-mix(in srgb, var(--color-primary-deep) 45%, transparent), transparent 30%); }
.hero__forest { position: absolute; inset-inline: 0; inset-block-end: calc(var(--stroke) * -1); z-index: 0; inline-size: 100%; block-size: var(--forest-h); pointer-events: none; filter: url(#forest-cream); }   /* le filtre peint le dessin en --color-surface */
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-block-size: calc(var(--hero-min-h) + var(--hdr));   /* même hauteur minimale pour l'accueil et Réserver (assez haute pour contenir le texte de l'accueil, même sur mobile) */ padding-block: calc(var(--hdr) + var(--space-xl) * 2) calc(var(--forest-h) + var(--space-lg)); }   /* haut doublé (après la zone de l'en-tête), bas inchangé */
/* Surtitre et crest sur une même ligne, alignés verticalement. Le crest déborde de la ligne, centré sur le surtitre (ni hauteur ajoutée, ni décalage). */
.hero__bucket { position: absolute; z-index: 1; inset-inline-end: var(--gutter); inset-block-end: calc(var(--forest-h) * -0.45); inline-size: var(--size-seal); aspect-ratio: 260 / 600; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent, var(--color-black) 30%); mask: linear-gradient(to bottom, transparent, var(--color-black) 30%); }   /* l'arbre à chaudière, planté dans la neige : le bas est rogné par le hero */
.hero__top { --seal-d: calc(var(--size-seal) * 0.825); --eyebrow-h: calc(var(--text-xs) * var(--leading-ui)); inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-md); }
.hero__top .eyebrow { margin: 0; }
.hero .seal { flex: none; inline-size: var(--seal-d); margin-block: calc((var(--eyebrow-h) - var(--seal-d)) / 2); }   /* +10 % (0,75 → 0,825 de la taille de base) */
.hero__text { align-items: flex-start; max-inline-size: var(--measure-head); }
.hero__text h1 { color: var(--color-white); text-shadow: var(--shadow-text-lg); }
.hero__lead { max-inline-size: 27em; font-size: var(--text-lg); color: var(--color-white); text-shadow: var(--shadow-text); }
.hero .eyebrow { color: color-mix(in srgb, var(--color-highlight-light) 25%, var(--color-white)); text-shadow: var(--shadow-text); }   /* ambre très pâle : l'ambre clair seul tombait à 2,7:1 sur les assiettes blanches de la photo */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding-block-start: var(--space-2xs); }
.hero .button--secondary { --btn-bg: transparent; --btn-fg: var(--color-white); --btn-bd: var(--color-white); }
.hero .button--secondary:hover { --btn-bg: color-mix(in srgb, var(--color-white) 15%, transparent); }
.hero .note-small { color: var(--color-white); opacity: 0.85; }
/* Étroit : le texte occupe presque toute la largeur, donc voile plus uniforme */
@container hero (max-width: 40rem) {
  .hero__top { --seal-d: calc(var(--size-seal) * 0.605); }   /* étroit : 0,55 + 10 % */
  .hero::after { background:
    linear-gradient(color-mix(in srgb, var(--color-primary-deep) 66%, transparent), color-mix(in srgb, var(--color-primary-deep) 66%, transparent)); }
}

/* Expérience */

.experience__grid { display: grid; gap: var(--space-xl); margin-block-start: var(--space-xl); }
.experience__text { padding-inline: var(--space-2xs); color: var(--ctx-fg-body); }
.experience__item .photo { --ratio: 4 / 3; }   /* mêmes proportions pour les trois : seul le décalage et l'inclinaison font le relief */
.experience__item:nth-child(1) .photo { --tilt: calc(var(--tilt-photo) * -1.4); }
.experience__item:nth-child(2) .photo { --tilt: calc(var(--tilt-photo) * 1); }
.experience__item:nth-child(3) .photo { --tilt: calc(var(--tilt-photo) * -0.7); }
/* Note collée sur le coin de la photo : un fait pratique, à la main, comme annoté dans un carnet (tampon-note, voir .stamp--note). */
.experience__note { position: absolute; z-index: 2; inset-block-start: calc(var(--space-sm) * -1); inset-inline-end: calc(var(--space-sm) * -0.5); font-size: var(--text-lg); line-height: var(--leading-ui); max-inline-size: 14em; white-space: normal; }
.experience__item:nth-child(2) .experience__note { inset-block-start: auto; inset-block-end: calc(var(--space-sm) * -1); inset-inline-end: auto; inset-inline-start: calc(var(--space-sm) * -0.5); }
.experience__item:nth-child(3) .experience__note { inset-inline-end: auto; inset-inline-start: calc(var(--space-sm) * -0.5); }
.experience__item:nth-child(2) .experience__text { padding-block-start: var(--space-sm); }
@container sec (min-width: 40rem) { .experience__grid { grid-template-columns: 1fr 1fr; } }
@container sec (min-width: 64rem) {
  .experience__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); align-items: start; margin-inline: calc(var(--gutter) * -0.5); }   /* photos plus grandes : la grille mord un peu sur les marges */
  .experience__item:nth-child(2) { margin-block-start: calc(var(--space-3xl) * 1.1); }
  .experience__item:nth-child(3) { margin-block-start: calc(var(--space-3xl) * 0.45); }
}

/* Menu (section sombre) */
.menu { padding-block: var(--space-xl) calc(var(--space-section) * 1.1); }
.menu__lead { max-inline-size: var(--measure-sm); color: var(--ctx-fg-body); }
.menu__photo { inline-size: 88%; --ratio: 4 / 3; --tilt: calc(var(--tilt-photo) * -1); --pos: 55% 50%; margin-block-start: var(--space-md); }
.menu__trio { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--space-2xs); padding-inline-end: var(--space-xl); color: var(--color-on-primary); font-size: var(--space-3xl); line-height: 1; margin-block-end: calc(var(--space-2xs) * -1); position: relative; z-index: 2; }
.menu__trio .glyph { color: inherit; }
.menu__trio .glyph:nth-child(2) { font-size: 1.2em; }
.menu-card { --card-bg: var(--color-surface); transform: rotate(calc(var(--tilt-photo) * -0.57)); padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
.menu-card__title { font-size: var(--text-h3); text-align: center; padding-block-end: var(--space-sm); }
.menu-card__stamp { display: flex; justify-content: flex-end; margin-block-start: var(--space-md); }
@container sec (min-width: 64rem) {
  .menu__grid { align-items: start; }
  .menu__intro { grid-column: 1 / span 5; padding-block-start: var(--space-xl); }
  .menu__side { grid-column: 7 / span 6; position: relative; }
  .menu-card { padding: var(--space-xl) var(--space-2xl) var(--space-3xl); }
  .menu-card__stamp { position: absolute; inset-inline-end: calc(var(--space-lg) * -1); inset-block-end: calc(var(--space-lg) * -1); margin: 0; z-index: 3; }
}

/* À propos */
.about__grid { align-items: center; }
.about__photo { --ratio: 4 / 3; --tilt: calc(var(--tilt-photo) * -0.85); --pos: 55% 60%; }
.about__press-link { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; text-decoration-thickness: var(--line-thin); }
@container sec (min-width: 64rem) {
  .about__media { grid-column: 1 / span 6; }
  .about__text { grid-column: 8 / span 5; }
  .about__photo { --ratio: 3 / 2; }
}

/* Témoignages : une carte à la fois, défilement vertical (scroll-snap), à droite du titre. Fond bleu pâle, courbes de neige haut et bas.
   Masquer = attribut hidden sur la section (les courbes sont dans la section). */
.testimonials { position: relative; z-index: 1; background: var(--color-sky); padding-block: var(--space-xl) var(--space-2xl); }   /* z-index : la section (et sa courbe du bas) passe au-dessus de « Réserver », dont le fond teinté la salissait */
.testimonials > .drift { position: absolute; inset-inline: 0; inset-block-start: 0; margin: 0; color: var(--color-sky); transform: translateY(calc(-100% + var(--stroke))); }
.testimonials > .drift--flip { inset-block-start: auto; inset-block-end: 0; transform: translateY(calc(100% - var(--stroke))) scaleY(-1); }
.testimonials__grid { align-items: center; }
@container sec (min-width: 64rem) {
  .testimonials__head { grid-column: 1 / span 5; }
  .slider { grid-column: 7 / span 6; }
}
.slider { --slide-h: 22rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
@container sec (max-width: 40rem) { .slider { --slide-h: 30rem; } }   /* étroit : la carte d'invitation (texte + bouton + mention) est plus haute */
.slider__track { position: relative; display: flex; flex-direction: column; block-size: var(--slide-h); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding-inline: var(--space-lg); margin-inline: calc(var(--space-lg) * -1); cursor: grab; touch-action: pan-y; }   /* marge négative + padding : l'ombre des cartes n'est plus rognée par le défilement */
.slider__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.slider__track::-webkit-scrollbar { display: none; }
.testimonial { flex: 0 0 calc(100% - var(--space-lg) * 2); scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); margin: var(--space-lg) 0; padding: var(--space-lg); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 var(--space-2xs) var(--space-sm) color-mix(in srgb, var(--color-shadow) 22%, transparent); }
.testimonial__text p { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-heading); color: var(--ctx-fg); text-wrap: pretty; }
.testimonial--invite { justify-content: center; gap: var(--space-sm); }
.testimonial--invite .testimonial__text { display: flex; flex-direction: column; gap: var(--space-2xs); }
.testimonial--invite .invite__title { font-size: var(--text-h3); line-height: var(--leading-heading); }
.testimonial--invite .invite__text { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-ui); color: var(--ctx-fg-body); }
.invite__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.invite__alt { font-size: var(--text-sm); color: var(--ctx-fg-body); }
.invite__consent { max-inline-size: 38em; }
.testimonial__by { font-family: var(--font-hand); font-size: var(--text-lg); line-height: var(--leading-display); color: var(--color-highlight-text); }
.testimonial__from { color: var(--ctx-fg-muted); }
/* Inclinaison propre à chaque carte (même logique que les photos). */
.testimonial:nth-child(5n+1) { --tilt: calc(var(--tilt-photo) * -0.9); }
.testimonial:nth-child(5n+2) { --tilt: calc(var(--tilt-photo) * 0.7); }
.testimonial:nth-child(5n+3) { --tilt: calc(var(--tilt-photo) * -0.4); }
.testimonial:nth-child(5n+4) { --tilt: calc(var(--tilt-photo) * 1.1); }
.testimonial:nth-child(5n) { --tilt: calc(var(--tilt-photo) * -0.65); }
.slider__controls { display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); }
.js .slider__controls { display: flex; }
.slider__btn--prev::after { transform: rotate(-90deg); }   /* flèches de témoignages : même tampon dessiné que le diaporama (voir .slides__btn), tournées vers le haut / le bas */
.slider__btn--next::after { transform: rotate(90deg); }
.slider__btn:disabled { opacity: .3; cursor: default; }
.slider__dots { display: flex; flex-direction: column; gap: var(--space-xs); }
.slider__dot { inline-size: 0.8rem; block-size: 0.8rem; padding: 0; border: var(--line-thin) solid var(--color-text); border-radius: 50%; background: transparent; cursor: pointer; }
.slider__dot[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.slider__dot { position: relative; }
.slider__dot::before { content: ""; position: absolute; inset: calc(var(--space-3xs) * -1.5) calc(var(--space-xs) * -1); }   /* zone de toucher élargie (24 px de haut) sans changer l'apparence */
@media (prefers-reduced-motion: no-preference) { .slider__track { scroll-behavior: smooth; } }

/* Réserver (carte publique + carte groupes) */
.reserve { background: color-mix(in srgb, var(--color-highlight) 5%, transparent); }  /* teinte ambre légère, la texture du fond reste visible */
.reserve__head { margin-block-end: var(--space-xl); max-inline-size: var(--measure); }
.reserve__grid { align-items: start; }
.reserve__card { container: card / inline-size; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
.reserve__card p { line-height: var(--leading-ui); }
@container sec (min-width: 64rem) {
  .reserve__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); align-items: stretch; }
  .reserve__card--public, .reserve__card--groups { padding: var(--space-2xl); }
}

/* Visite virtuelle (sous-bloc de À propos, cadre au trait dessiné) */
.tour { display: flex; flex-direction: column; gap: var(--space-md); margin-block-start: var(--space-2xl); scroll-margin-block-start: var(--space-lg); }
.tour__head { display: flex; flex-direction: column; gap: var(--space-2xs); margin-block-end: var(--space-xs); }
.tour__title { font-size: var(--text-h3); }
.tour__box { position: relative; isolation: isolate; padding: var(--space-xs); }
.tour__box::before, .tour__box::after { content: ""; position: absolute; z-index: 2; pointer-events: none; filter: url(#rough); }
.tour__box::before { inset: 0; border: var(--line) solid var(--color-text); }
.tour__box::after { inset: var(--space-3xs); border: var(--line-thin) solid var(--color-text); opacity: .55; }
.tour__stage { position: relative; isolation: isolate; block-size: clamp(22rem, 75vh, 56.25rem); background: var(--color-primary); overflow: clip; display: grid; place-items: center; }
.tour__poster { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; filter: brightness(.6); }
.tour__frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.tour__note { color: var(--ctx-fg-muted); }
/* Bouton de lecture : tampon rond dessiné (contour « bords usés » rouge d'érable, le même tracé que le cercle extérieur du crest), « Visite virtuelle » dessous */
.tour__play { display: grid; justify-items: center; gap: var(--space-xs); padding: 0; border: 0; background: none; color: var(--color-white); cursor: pointer;
  font-family: var(--font-hand); font-size: var(--text-h3); line-height: 1; text-shadow: var(--shadow-text); }
.tour__play-icon { --r: calc(var(--tilt-btn) * -1); position: relative; isolation: isolate; border-radius: 50%; display: grid; place-items: center; inline-size: var(--size-play); block-size: var(--size-play);
  color: var(--color-accent); transform: rotate(var(--r)); box-shadow: var(--shadow-stamp); transition: transform var(--duration) var(--ease), color var(--duration) var(--ease); }
.tour__play-icon::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--color-paper); border: var(--line) solid var(--color-accent); filter: url(#rough); transition: background-color var(--duration) var(--ease); }
.tour__play-icon::after { content: ""; inline-size: 50%; block-size: 50%; margin-inline-start: 8%; background: currentColor; -webkit-mask: var(--mask-play) center / contain no-repeat; mask: var(--mask-play) center / contain no-repeat; }   /* décalé vers la droite : centre optique du triangle */
.tour__play:hover .tour__play-icon { --r: 0deg; color: var(--color-white); transform: rotate(0deg) translateY(calc(var(--space-3xs) * -0.5)); }
.tour__play:hover .tour__play-icon::before { background: var(--color-accent); }
.tour__play:focus-visible { outline: var(--focus-width) solid var(--color-white); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .tour__play-icon, .tour__play-icon::before { transition: none; } }

/* Préparer votre visite */
.visit { isolation: isolate; }
/* Arrière-plan très très pâle : la photo du tir de haches, à 7 % d'opacité, fondue en haut et en bas (le texte reste à plein contraste). */
.visit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/photos/cabane-10-720.webp") center 40% / cover no-repeat; opacity: var(--opacity-ghost);
  -webkit-mask: linear-gradient(to bottom, transparent, var(--color-black) 18%, var(--color-black) 82%, transparent); mask: linear-gradient(to bottom, transparent, var(--color-black) 18%, var(--color-black) 82%, transparent); }
.visit__grid { align-items: start; }
.visit .checklist__title::before { background: var(--color-highlight); }   /* flocons ambrés (décor : l'ambre ne porte jamais de texte sur fond clair) */
.visit__photo { inline-size: 92%; --ratio: 3 / 2; --tilt: calc(var(--tilt-photo) * 1.15); --pos: 50% 40%; margin-block-start: var(--space-md); }
@container sec (min-width: 64rem) {
  .visit__intro { grid-column: 1 / span 4; }
  .visit__list { grid-column: 6 / span 7; }
}

/* ===================== RÉSERVATIONS ===================== */

/* Au public : texte à gauche, carte rouge à droite, alignée sur le surtitre */
.public__grid { grid-template-areas: "head" "card" "body"; }
.public__head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-md); }
.public__body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-md); }
.public__card { grid-area: card; container: card / inline-size; align-self: start; justify-self: end; inline-size: 100%; display: flex; flex-direction: column; gap: var(--space-xl); }
.public__body p, .public__head p:not(.eyebrow) { color: var(--ctx-fg-body); }
.public__body strong { color: var(--ctx-fg); }
.public__photo { inline-size: 75%; --ratio: 3 / 2; --tilt: calc(var(--tilt-photo) * -1); --pos: 50% 50%; margin-block-start: var(--space-md); }
.public__cancel { display: flex; flex-direction: column; gap: var(--space-lg); padding-inline: var(--space-2xs); }
.public__cancel p { font-size: var(--text-base); line-height: var(--leading-ui); color: var(--ctx-fg-body); }
@container sec (min-width: 64rem) {
  .public__grid { grid-template-areas: "head head head head head head . card card card card card" "body body body body body body . card card card card card"; align-items: start; }
  .public__grid { row-gap: var(--space-md); grid-template-rows: auto 1fr; }   /* la carte (photo + tarifs + annulation) est plus haute que le texte : l'excédent va à la 2e rangée */
  .public__card .card { padding: var(--space-2xl); }
}

/* Groupes privés */
.groups { padding-block: var(--space-xl) calc(var(--space-section) * 1.1); }
/* Espacement de Groupes privés : md entre les blocs de texte (comme avant), 3xl entre les deux colonnes */
.groups { --groups-gap: var(--space-md); --groups-col-gap: var(--space-3xl); }
.groups__text, .groups__aside { gap: var(--groups-gap); }
.groups__text p:not(.eyebrow) { color: var(--ctx-fg-body); }
.groups__text strong { color: var(--ctx-fg); }
.groups__sub { font-size: var(--text-h3); color: var(--ctx-fg); }
.groups__facts { display: grid; gap: var(--space-2xl); padding-block-start: var(--space-xs); }
.groups__aside { display: flex; flex-direction: column; max-inline-size: var(--measure-head); }
.groups__aside p { color: var(--ctx-fg-body); }
.groups__aside strong { color: var(--ctx-fg); }
.groups__cta { align-self: flex-start; margin-block-start: var(--space-xs); }
.groups__form { margin-block-start: var(--space-xl); }
.form-panel { max-inline-size: var(--form-max); margin-inline: auto; padding: var(--space-xl) var(--space-lg); }
@container sec (min-width: 40rem) { .groups__facts { grid-template-columns: 1fr 1fr; } }
@container sec (min-width: 64rem) {
  .groups__grid { align-items: start; column-gap: var(--groups-col-gap); position: relative; }
  /* Séparateur vertical au centre de l'espace entre les deux colonnes : le même trait ondulé que .rule, tourné à la verticale, en blanc.
     Le centre du vide entre les colonnes 7 et 8 d'une grille de 12 est à 7/12 de la largeur + 1/12 de l'écart. */
  .groups__grid::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(100% * 7 / 12 + var(--groups-col-gap) / 12 - var(--space-2xs) / 2);
    inline-size: var(--space-2xs); background: var(--color-white); pointer-events: none;
    -webkit-mask: var(--mask-rule-vertical) repeat-y center top / 100% auto; mask: var(--mask-rule-vertical) repeat-y center top / 100% auto; }
  .groups__text { grid-column: 1 / span 7; }
  .groups__aside { grid-column: 8 / span 5; padding-block-start: var(--space-2xl); }
  .form-panel { padding: var(--space-xl) var(--space-2xl) var(--space-2xl); }
}

/* ---------- Diaporama plein format (entre « À table » et « Groupes privés ») ---------- */
.slides { position: relative; background: var(--color-primary-deep); }
/* La congère (bleu nuit, comme la section Groupes privés) borde le BAS de l'image et la relie à la section suivante. */
.slides > .drift { position: absolute; inset-inline: 0; z-index: 2; margin: 0; block-size: var(--drift-h); pointer-events: none; }
.slides__drift--top { inset-block-start: calc(var(--stroke) * -1); color: var(--color-primary); }      /* congère bleu nuit qui pend de Groupes privés dans la photo */
.slides__drift--bottom { inset-block-end: calc(var(--stroke) * -1); color: var(--color-surface); }    /* congère crème : le bas de la photo rejoint le pied de page */
.slides__viewport { position: relative; aspect-ratio: 4 / 3; max-block-size: 80svh; overflow: hidden; }
@media (min-width: 48rem) { .slides__viewport { aspect-ratio: 16 / 7; } }
.slides__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity var(--duration-fade) var(--ease), visibility 0s linear var(--duration-fade); }
.slides__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--duration-fade) var(--ease), visibility 0s; }
.slides__img { position: absolute; inset-inline: 0; inset-block: -10%; display: block; inline-size: 100%; block-size: 120%; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }   /* couleurs pleines : aucun voile ; 10 % de marge en haut et en bas pour le parallaxe (--py posée par main.js) */
/* Étiquette verte, posée de travers comme un tampon */
.slides__label { position: absolute; inset-block-end: calc(var(--drift-h) + var(--space-sm)); inset-inline-start: var(--gutter); isolation: isolate;
  padding: 0.35em 0.9em 0.4em; color: var(--color-white); font-family: var(--font-hand); font-size: calc(var(--text-h3) * var(--stamp-scale)); line-height: 1; transform: rotate(var(--tilt-label)); box-shadow: var(--shadow-stamp); }
.slides__label::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-green); border: var(--line-thin) solid color-mix(in srgb, var(--color-green) 60%, var(--color-white)); filter: url(#rough); }
.slides__controls { position: absolute; z-index: 3; inset-block-end: calc(var(--drift-h) + var(--space-sm)); inset-inline-end: var(--gutter); display: flex; gap: var(--space-2xs); }
.slides__controls { gap: var(--space-sm); }
/* Boutons précédent / suivant : tampons dessinés (papier, contour vert « bords usés », flèche tracée à la main), un peu de travers */
:root { --stamp-scale: 1; }                                   /* tampons-flèches et étiquettes : taille pleine sur mobile… */
@media (min-width: 48rem) { :root { --stamp-scale: 0.75; } }    /* …et 75 % sur ordinateur */
.slides__btn, .slider__btn { --r: calc(var(--tilt-btn) * -1); position: relative; isolation: isolate; display: grid; place-items: center; inline-size: calc(var(--tap) * 1.15 * var(--stamp-scale)); block-size: calc(var(--tap) * 1.15 * var(--stamp-scale));
  padding: 0; border: 0; background: none; color: var(--color-green); cursor: pointer; transform: rotate(var(--r)); box-shadow: var(--shadow-stamp);
  transition: transform var(--duration) var(--ease), color var(--duration) var(--ease); }
.slides__btn::before, .slider__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-paper); border: var(--line) solid var(--color-green); filter: url(#rough); transition: background-color var(--duration) var(--ease); }
.slides__btn::after, .slider__btn::after { content: ""; inline-size: 1.7em; block-size: 1.7em; background: currentColor; -webkit-mask: var(--mask-arrow) center / contain no-repeat; mask: var(--mask-arrow) center / contain no-repeat; font-size: calc(var(--text-lg) * var(--stamp-scale)); }
.slides__btn[data-slides-prev]::after { transform: scaleX(-1); }
.slides__btn--toggle { --r: 0deg; }
.slides__btn--toggle::after { -webkit-mask-image: var(--mask-pause); mask-image: var(--mask-pause); inline-size: 1.3em; block-size: 1.3em; }
.slides__btn--toggle[data-paused]::after { -webkit-mask-image: var(--mask-play); mask-image: var(--mask-play); }   /* en pause : le bouton propose de reprendre */
.slides__btn[data-slides-next], .slider__btn--next { --r: var(--tilt-btn); }
.slides__btn:hover, .slider__btn:hover:not(:disabled) { --r: 0deg; color: var(--color-white); transform: rotate(0deg) translateY(calc(var(--space-3xs) * -0.5)); }
.slides__btn:hover::before, .slider__btn:hover:not(:disabled)::before { background: var(--color-green); }
.slides__btn:focus-visible { outline: var(--focus-width) solid var(--color-white); outline-offset: var(--focus-offset); }
.slider__btn:focus-visible { outline: var(--focus-width) solid var(--color-green); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { .slides__slide, .slides__slide.is-active, .slides__btn, .slides__btn::before, .slider__btn, .slider__btn::before { transition: none; } }
/* Étroit : l'étiquette garde le bas à gauche, les flèches montent en haut à droite (sous la congère) pour ne jamais se chevaucher */
@media (max-width: 47.99rem) {
  .slides__label { font-size: var(--text-xl); max-inline-size: calc(100% - var(--gutter) * 2); }
  .slides__controls { inset-block-end: auto; inset-block-start: calc(var(--drift-h) + var(--space-xs)); }
}
.slides + .groups > .drift { display: none; }
.public .drift--flip { display: none; }   /* idem pour la congère de fin de « À table » : le diaporama commence franc */   /* la congère de Groupes privés mordrait sur la photo : bord droit entre les deux */

/* ---------- Demande de groupe : un panneau qui se superpose et glisse du bas vers le haut (avec JS seulement) ---------- */
.js .groups__form[hidden] { display: none; }
.js .groups__form { position: fixed; inset: 0; z-index: 120; margin: 0; display: flex; align-items: flex-end; justify-content: center;
  background: transparent; transition: background-color calc(var(--duration) * 2) var(--ease); }
.js .groups__form.is-open { background: color-mix(in srgb, var(--color-primary-deep) 62%, transparent); }
.js .groups__form .form-panel { margin: 0; padding: 0; inline-size: min(100%, var(--form-max)); max-block-size: 92dvh; display: flex; flex-direction: column;
  border-end-start-radius: 0; border-end-end-radius: 0; transform: translateY(105%); transition: transform var(--duration-slide) var(--ease-out-soft); }
/* Le défilement est dans un bloc intérieur : le fond de la carte (::before) couvre toute la hauteur du panneau, et plus seulement le haut. */
.js .groups__form .form-panel__scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--tap) + var(--space-md)) var(--space-lg) var(--space-xl); }   /* haut : place pour le bouton Fermer */
@media (min-width: 64rem) { .js .groups__form .form-panel__scroll { padding: calc(var(--tap) + var(--space-md)) var(--space-2xl) var(--space-2xl); } }   /* le panneau est hors des sections : media query plutôt que conteneur */
.js .groups__form.is-open .form-panel { transform: none; }
.sheet__close { position: absolute; inset-block-start: var(--space-sm); inset-inline-end: var(--space-sm); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2xs); min-block-size: var(--tap); padding: 0 var(--space-sm);
  border: var(--line-thin) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; }
.sheet__close:hover { background: var(--color-paper); }
html[data-sheet-open] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .js .groups__form, .js .groups__form .form-panel { transition: none; } }

/* Page légale (politique de confidentialité) */
.legal__inner { display: flex; flex-direction: column; gap: var(--space-xl); }
.legal__head, .prose { display: flex; flex-direction: column; gap: var(--space-md); max-inline-size: var(--measure); }
.prose { max-inline-size: var(--measure-prose); margin-inline: auto; }   /* ~70 caractères par ligne ; centré dans la page, l'en-tête (.legal__head) reste à gauche */
.legal__head { gap: var(--space-sm); }
.legal__title { font-size: var(--text-h2); }
.legal__lead { font-size: var(--text-xl); line-height: var(--leading-ui); color: var(--ctx-fg-body); }
.legal__date { margin-block-start: var(--space-3xs); }
/* Rythme : une section = un titre + ses paragraphes, serrés ; un filet dessiné et un grand vide séparent les sections. */
.prose h2 { font-size: var(--text-h3); margin-block-start: var(--space-xl); }
.prose h2::before { content: ""; display: block; block-size: var(--space-2xs); margin-block-end: var(--space-md); background: var(--color-border-dotted); -webkit-mask: var(--mask-rule) repeat-x left center / auto 100%; mask: var(--mask-rule) repeat-x left center / auto 100%; }
.prose > h2:first-child::before { display: none; }
.prose h2 + h3 { margin-block-start: 0; }
.prose h3 { font-size: var(--text-xl); margin-block-start: var(--space-sm); }
/* Texte long : interlignage de lecture (1,6), pas celui de l'interface (1,45). */
.prose p, .prose li { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--ctx-fg-body); }
.prose strong { color: var(--ctx-fg); font-weight: var(--weight-bold); }
.prose a { overflow-wrap: anywhere; }
/* Listes : puces-flocons dessinées, comme .flake-list / .checklist ; role="list" dans le HTML garde la sémantique sous Safari. */
.prose ul { display: flex; flex-direction: column; gap: var(--space-sm); padding: 0; list-style: none; }
.prose li { position: relative; padding-inline-start: calc(1.05em + var(--space-xs)); }
.prose li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.35em; inline-size: 1.05em; block-size: 1.05em; background: var(--ctx-fg-muted); -webkit-mask: var(--mask-flake-a) center / contain no-repeat; mask: var(--mask-flake-a) center / contain no-repeat; }
.prose li:nth-child(3n+2)::before { -webkit-mask-image: var(--mask-flake-b); mask-image: var(--mask-flake-b); }
.prose li:nth-child(3n)::before { -webkit-mask-image: var(--mask-flake-c); mask-image: var(--mask-flake-c); }