/* Mas des Galets, « la galerie ». Un domaine du Sud en plein jour : du blanc, la pierre, le vert
   de la vigne, une touche de bordeaux. Des photos claires posées comme dans une galerie, jamais
   assombries. Une seule famille, EB Garamond (auto-hébergée, réduite aux caractères du site),
   en capitales espacées pour les titres et en romain généreux pour le texte : on lit sans
   effort, sur téléphone comme sur grand écran.

   Le moment du site : la réservation remplit un carton d'invitation, que le domaine scelle d'un
   cachet de cire.

   Contrastes (WCAG) : encre/craie 14,2 · gris/craie 6,2 · vigne/craie 6,9 · blanc/vin 11,9 ·
   encre/pierre 12,6 · or-texte/craie 4,6 (l'or pur, 3,1, ne sert qu'aux filets et ornements). */

@font-face {
  font-family: 'Garamond Galets';
  src: url(/police/garamond-galets.woff2) format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garamond Galets';
  src: url(/police/garamond-galets-italique.woff2) format('woff2');
  font-weight: 400; /* italique figée en 400 par outils/construire.js */
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --blanc: #FFFFFF;
  --craie: #FAF8F4;
  --pierre: #EFEAE2;
  --encre: #2B2723;
  --gris: #645D54;
  --vigne: #4C5A36;
  --vin: #6E1C25;
  --vin-fonce: #521219;
  --or: #A48B5C;
  --or-texte: #836F4A;
  --filet: rgb(43 39 35 / .14);
  --serif: 'Garamond Galets', 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
  --large: 1280px;
  --marge: clamp(20px, 5vw, 64px);
  --douce: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* En bas, 48 px : Safari amène un champ focalisé au ras du bord, et la case de majorité (une
   entrée d'un pixel en haut de son libellé) restait sous l'écran. Sous 1 040 px, le talon prend le relais. */
html { background: var(--craie); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding: 80px 0 48px; }
/* Une section visée par un lien arrive pile sous la barre compacte (63 px ; 53 sur téléphone) :
   sans cela, une bande de la section précédente restait visible entre les deux. */
main > section[id] { scroll-margin-top: -17px; }
/* Chiffres proportionnels : les chiffres par défaut d'EB Garamond sont tabulaires (« 1 » troué). */
body { color: var(--encre); font: 400 19px/1.65 var(--serif); font-variant-numeric: proportional-nums; overflow-x: clip; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
p, dd, figcaption, li { text-wrap: pretty; }
/* WebKit coupe à chaque mot un bloc ajusté à son contenu qui contient un <br> quand pretty est actif. */
.contact-lieu, .carton-total span { text-wrap: wrap; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
em { font-style: italic; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--vin); outline-offset: 4px; }
::selection { background: var(--vin); color: var(--blanc); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: -9999px; top: .5rem; z-index: 200; padding: .7rem 1rem; background: var(--encre); color: var(--blanc); }
.saut:focus { left: .5rem; }
.note { font-size: 17px; line-height: 1.55; color: var(--gris); }

/* Les capitales espacées du domaine (le sous-ensemble de police ne garde pas les petites
   capitales OpenType : Safari les afficherait vides). Jamais sous 13 px. */
.etiquette, .surtitre, .barre-nav a, .langues, .onglet, .bouton, .lien, .visite-court,
.visite-details dt, .chiffres dt, .champ span, .langue-visite p, .calendrier .entete, .carton-maison, .carton-ref,
.infos-liste dt, .faits, .pied-marque {
  text-transform: uppercase; letter-spacing: .16em; font-weight: 500;
}
.etiquette { font-size: 14px; color: var(--vigne); }

/* ---------- Boutons et liens ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px;
  border: 1px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer; text-decoration: none;
  font-family: var(--serif); font-size: 14.5px; transition: background-color .35s var(--douce), color .35s var(--douce), border-color .35s;
}
.bouton:hover { background: var(--encre); color: var(--blanc); }
/* Le blanc sur bordeaux reste fin avec le lissage en niveaux de gris. */
.bouton-plein { background: var(--vin); border-color: var(--vin); color: var(--blanc); -webkit-font-smoothing: antialiased; }
.bouton-plein:hover { background: var(--vin-fonce); border-color: var(--vin-fonce); }
.bouton-plein:disabled { cursor: progress; }
.bouton-large { width: 100%; min-height: 60px; font-size: 15px; }
/* Avant .lien : un bouton habillé en lien garde le réglage du lien. */
.bouton-texte { border: 0; background: none; cursor: pointer; padding: 0; font-family: var(--serif); }
/* La flèche suit le texte, jusque sur sa dernière ligne quand le lien passe sur deux. En bloc en
   ligne, elle n'est pas soulignée : le soulignement ne descend pas dans un bloc en ligne. */
.lien {
  display: inline-block; min-height: 44px; padding: 10px 0;
  font-size: 14.5px; line-height: 24px; color: var(--vin);
  text-decoration: underline; text-decoration-color: rgb(110 28 37 / .35); text-underline-offset: .35em;
  transition: text-decoration-color .3s;
  /* Équilibré : sur deux lignes, la flèche ne part jamais seule sur la seconde. */
  text-wrap: balance;
}
.lien::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: .7em; transition: transform .3s var(--douce); }
.lien:hover { text-decoration-color: currentColor; }
.lien:hover::after { transform: translateX(4px); }

/* ---------- Barre ----------
   Collée avec un haut négatif : le blason part avec la page, le nom reste. Rien ne change de
   hauteur dans le flux, donc rien ne saute pendant le défilement. */

.barre {
  position: sticky; top: -54px; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  padding: 14px var(--marge); padding-top: max(14px, env(safe-area-inset-top));
  background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--filet);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.barre-nav { display: flex; gap: 30px; }
.barre-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; text-decoration: none; }
.barre-nav a:hover { color: var(--vin); }
.marque { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--encre); }
.blason { width: 40px; height: 40px; margin-bottom: 4px; color: var(--vin); letter-spacing: 0; }
.blason text { letter-spacing: 0; font-weight: 400; }
/* La marge négative rend l'approche de la dernière lettre : le nom tombe pile sous le blason. */
.marque-nom { margin-right: -.2em; font-size: 22px; line-height: 1.1; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.marque-lieu { font-size: 16px; line-height: 1; font-style: italic; color: var(--gris); }
.langues { justify-self: end; display: flex; align-items: center; gap: 4px; font-size: 14px; }
.langues > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.langues [aria-current] { color: var(--vin); text-decoration: underline; text-underline-offset: .3em; }
.langues a { text-decoration: none; color: var(--gris); }
.langues a:hover { color: var(--encre); }
/* La navigation ne tient sur une ligne qu'à partir de 1 280 px (419 px de liens en anglais) ;
   en dessous, elle passait sur deux ou trois lignes que la barre collée coupait. Le nom reste au
   centre, et l'onglet de réservation sur le bord de l'écran. */
@media (max-width: 1279px) {
  .barre-nav { display: none; }
  .marque { grid-column: 2; }
  .langues { grid-column: 3; }
}
@media (max-width: 900px) {
  .barre { top: -48px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; }
  main > section[id] { scroll-margin-top: -27px; }
  .langues { gap: 0; }
  .langues > * { min-width: 38px; }
  .blason { width: 34px; height: 34px; }
  .marque-nom { margin-right: -.16em; font-size: 15px; letter-spacing: .16em; white-space: nowrap; }
  .marque-lieu { font-size: 14px; }
}
@media (max-width: 349px) { .langues [aria-current] { display: none; } }

/* L'onglet de réservation : sur le bord droit de l'écran ; en bas sur téléphone, où il glisse
   hors de l'écran tant que le texte de l'accueil est visible. */
.onglet {
  position: fixed; z-index: 45; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; padding: 24px 13px; background: var(--blanc); color: var(--vin);
  border: 1px solid var(--filet); border-right: 0; font-size: 13.5px; text-decoration: none;
  box-shadow: 0 6px 24px -10px rgb(43 39 35 / .25); transition: opacity .4s, visibility 0s, background-color .3s, color .3s;
}
.onglet:hover { background: var(--vin); color: var(--blanc); }
.onglet.cache { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility 0s .4s; }
@media (max-width: 900px) {
  .onglet {
    top: auto; bottom: 0; left: 0; transform: none; writing-mode: horizontal-tb; text-align: center;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom)); background: var(--vin); color: var(--blanc); border: 0; font-size: 14.5px;
    -webkit-font-smoothing: antialiased; transition: transform .5s var(--douce), visibility 0s, background-color .3s;
  }
  .onglet.cache { opacity: 1; transform: translateY(105%); transition: transform .5s var(--douce), visibility 0s .5s; }
}

/* ---------- La une : une mosaïque de photos claires, le titre sur le blanc ---------- */

.une { padding: clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px) 0; }
.mosaique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(8px, 1vw, 12px); height: min(52vh, 600px); min-height: 300px; }
.une > .mosaique { max-width: none; }
.tuile { margin: 0; overflow: hidden; background: var(--pierre); }
/* Le <picture> sert aux téléphones un recadrage au format de la tuile, net en haute densité. */
.tuile picture { display: block; height: 100%; }
.tuile img { width: 100%; height: 100%; object-fit: cover; }
.tuile-etroite img { object-position: 50% 60%; }
.une-texte { max-width: 900px; margin: 0 auto; padding: clamp(36px, 4.5vw, 64px) var(--marge) clamp(64px, 9vw, 120px); text-align: center; }
.surtitre { font-size: 14.5px; color: var(--vigne); }
.surtitre span { display: inline-block; }
/* Le point médian d'EB Garamond est dessiné pour les bas-de-casse : on le remonte entre capitales. */
.surtitre span + span::before { content: "·"; content: "·" / ""; display: inline-block; margin: 0 .55em; position: relative; top: -.12em; }
.une h1 {
  margin: 14px 0 22px; font-size: clamp(42px, 6.4vw, 88px); line-height: 1.02; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 400;
}
.une h1 em { display: block; text-transform: none; letter-spacing: 0; font-size: .82em; color: var(--vin); }
.chapo { max-width: 26em; margin: 0 auto; font-size: clamp(20px, 1.9vw, 23px); line-height: 1.55; color: var(--gris); text-wrap: balance; }
.une-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: 34px; }
.faits { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-top: 40px; list-style: none; font-size: 13px; color: var(--gris); }
.faits li + li::before { content: "·"; content: "·" / ""; position: relative; top: -.12em; margin: 0 16px; color: var(--or); }
@media (max-width: 819px) {
  .faits { flex-direction: column; }
  .faits li + li::before { display: none; }
}
@media (max-width: 699px) {
  .mosaique { height: 44vh; min-height: 260px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .une-texte { padding-top: 28px; }
}
@media (max-width: 520px) {
  .surtitre span { display: block; }
  .surtitre span + span::before { content: none; }
}

/* ---------- Sections ---------- */

main > section:not(.une):not(.galerie) { padding: clamp(80px, 10vw, 150px) var(--marge); }
main > section > * { max-width: var(--large); margin-left: auto; margin-right: auto; }
.tete { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(48px, 6vw, 80px); text-align: center; }
/* L'ornement du carton court aussi sous les têtes de section : la page et l'invitation parlent la même langue. */
.tete .etiquette::after {
  content: ""; display: block; width: 76px; height: 8px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='8'%3E%3Cpath d='M0 4h30M46 4h30' stroke='%23A48B5C'/%3E%3Cpath d='M38 1l3 3-3 3-3-3z' fill='none' stroke='%23A48B5C'/%3E%3C/svg%3E") center / 76px 8px no-repeat;
}
.tete h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.1; max-width: 18em; }
.tete-intro { max-width: 34em; font-size: 20px; color: var(--gris); }

/* ---------- Le domaine ---------- */

.domaine { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; background: var(--blanc); border-top: 1px solid var(--filet); }
.domaine > * { margin: 0; }
.domaine-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; }
.domaine-photo figcaption { margin-top: 12px; font-size: 17px; font-style: italic; color: var(--gris); }
.domaine-texte { display: grid; gap: 18px; max-width: 34em; color: var(--gris); }
.domaine-texte > p:not(.citation) { max-width: 27em; }
.citation { margin: 4px 0 10px; font-size: clamp(27px, 2.7vw, 36px); line-height: 1.3; font-style: italic; color: var(--encre); text-wrap: balance; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--filet); }
/* En colonne inversée, flex-end range en haut : les nombres s'alignent, les légendes pendent dessous. */
.chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.chiffres dd { font-size: clamp(40px, 4vw, 54px); line-height: 1; color: var(--vin); }
.chiffres dt { font-size: 13px; color: var(--gris); }
/* Tablette : la photo (900 px de large) ne s'étire plus sur tout l'écran, et le texte prend sa
   largeur : légende, étiquette, citation et chiffres alignés sur elle. */
@media (min-width: 640px) and (max-width: 959px) {
  .domaine { justify-items: center; }
  .domaine-photo, .domaine-texte { width: min(100%, 520px); }
}
@media (min-width: 960px) {
  .domaine { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .domaine-photo { justify-self: end; width: min(100%, 560px); }
}

/* ---------- Les visites ---------- */

.grille-visites { display: grid; gap: clamp(56px, 6vw, 72px) clamp(28px, 3vw, 44px); }
.visite { display: flex; flex-direction: column; text-align: center; }
.visite-photo { margin: 0 0 26px; overflow: hidden; background: var(--pierre); cursor: pointer; }
.visite-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s var(--douce); }
.visite:hover .visite-photo img { transform: scale(1.04); }
.visite-numero { font-size: 20px; font-style: italic; color: var(--or-texte); }
.visite h3 { margin: 2px 0 6px; font-size: clamp(25px, 2.1vw, 29px); line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; }
.visite-court { font-size: 13px; color: var(--vigne); }
.visite-description { margin: 14px 0 18px; color: var(--gris); }
.visite-details { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid var(--filet); text-align: left; }
.visite-details div { padding: 10px 0; border-bottom: 1px solid var(--filet); }
.visite-details div:nth-child(odd) { padding-right: 14px; }
.visite-details dt { font-size: 13px; color: var(--vigne); }
.visite-details dd { font-size: 18px; }
.visite-prix { margin: 20px 0 6px; color: var(--gris); font-size: 17px; }
.visite-prix .prix { display: block; font-size: 40px; line-height: 1.1; color: var(--encre); }
.visite .lien { align-self: center; }
/* Tablette : la photo à gauche, le texte à droite, comme une fiche de catalogue. */
@media (min-width: 640px) and (max-width: 959px) {
  .visite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 40px); align-items: start; text-align: left; }
  .visite-photo { grid-row: 1 / span 7; margin: 0; }
  .visite > :not(.visite-photo) { grid-column: 2; }
  .visite .lien { justify-self: start; }
}
/* Trois colonnes dont les rangées se répondent : photo, numéro, titre, accroche, texte,
   détails (deux rangées, pour que leurs filets s'alignent aussi), prix, lien. Neuf rangées : à
   recompter si l'on ajoute un enfant à la carte. */
@media (min-width: 960px) {
  .grille-visites { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(9, auto); row-gap: 0; }
  .visite { display: grid; grid-row: span 9; grid-template-rows: subgrid; }
  .visite h3 { align-self: end; }
  .visite-details { margin-top: 0; grid-row: span 2; grid-template-rows: subgrid; }
  .visite .lien { justify-self: center; }
}
.groupes { max-width: 26em !important; margin-top: clamp(56px, 6vw, 80px) !important; text-align: center; font-style: italic; color: var(--gris); font-size: 20px; text-wrap: balance; }
.groupes a { color: var(--vin); white-space: nowrap; font-style: normal; }

/* ---------- La galerie qui défile, avec ses cartels ---------- */

.galerie { overflow: hidden; padding: 0 0 clamp(80px, 10vw, 140px); background: var(--craie); }
/* Pleine largeur : sinon la boucle recule d'une boîte de 1 280 px au lieu d'une série entière. */
.galerie > .defile { max-width: none; margin: 0; }
.defile { display: flex; gap: 12px; width: max-content; list-style: none; }
.defile li { flex: none; display: grid; gap: 12px; }
/* Au-delà de 3 034 px (14,5vw) : une série de six photos reste plus large que l'écran, sinon la
   fin de chaque boucle laisse un vide à droite. */
.defile .cadre { display: block; overflow: hidden; height: clamp(240px, 34vw, max(440px, 14.5vw)); background: var(--pierre); }
.defile img { width: auto; height: 100%; max-width: none; }
/* Le cartel ne donne pas sa largeur à la photo : il prend la sienne (width 0, min-width 100 %). */
.cartel { width: 0; min-width: 100%; font-size: 15px; font-style: italic; line-height: 1.3; color: var(--gris); }
.cartel::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: .32em; background: var(--or); }
/* Les photos des cartes reviennent en détails : fonds de barriques, fromages et verres, buvant d'un verre. */
.defile li:nth-child(6n+2) img { transform: scale(1.55); transform-origin: 12% 72%; }
.defile li:nth-child(6n+4) img { transform: scale(1.5); transform-origin: 40% 82%; }
.defile li:nth-child(6n+6) img { transform: scale(1.45); transform-origin: 30% 60%; }
.galerie-pause {
  display: block; margin: 20px auto 0; min-height: 44px; padding: 0 16px; font-size: 14px; color: var(--vin);
  text-transform: uppercase; letter-spacing: .16em; font-weight: 500;
  text-decoration: underline; text-underline-offset: .35em; text-decoration-color: rgb(110 28 37 / .35);
}
.galerie-pause:hover { text-decoration-color: currentColor; }
.galerie:focus-visible { outline: 2px solid var(--vin); outline-offset: -2px; }
/* La bande ne défile que pilotée par app.js, qui fait marcher le bouton d'arrêt (WCAG 2.2.2). */
@media (prefers-reduced-motion: no-preference) {
  html:not(.calme) .galerie.pilotee .defile { animation: defiler 120s linear infinite; }
  /* Plus spécifique que la règle d'animation, dont le raccourci remet la lecture en marche. */
  html:not(.calme) .galerie.pilotee:is(:hover, :focus, .arretee, .hors-champ) .defile { animation-play-state: paused; }
}
@keyframes defiler { to { transform: translateX(calc(-50% - 6px)); } }
/* Version calme, ou sans app.js : on fait défiler soi-même (au clavier aussi : la section prend
   le focus), et le bouton disparaît. */
html.calme .galerie, .galerie:not(.pilotee) { overflow-x: auto; }
html.calme .defile li[aria-hidden], .galerie:not(.pilotee) .defile li[aria-hidden] { display: none; }
html.calme .galerie-pause, .galerie:not(.pilotee) .galerie-pause { display: none; }

/* ---------- Réserver ---------- */

/* clip et non hidden : le cachet qui tombe n'élargit plus la page (Chrome sur Android
   agrandissait la vue), et les éléments collés de la section tiennent. */
.reserver { background: var(--pierre); overflow-x: clip; }
/* Le parcours n'apparaît qu'une fois app.js prêt ; sinon, une phrase donne le numéro. */
html:not(.parcours-pret) [data-parcours] { display: none; }
html:not(.js) [data-secours], html.parcours-pret [data-secours] { display: none; }
/* Sans parcours, pas d'intro sur le carton qui se remplit ; le message de secours est centré comme
   la tête (le <p> du <noscript> n'hérite pas des marges automatiques de la section). */
html:not(.parcours-pret) .reserver .tete .tete-intro { display: none; }
[data-secours], .reserver noscript p { text-align: center; margin-inline: auto; }
.formulaire { display: grid; gap: 48px; }
@media (min-width: 1040px) {
  .formulaire { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .colonne-carton { position: sticky; top: 84px; }
}
.etapes { display: grid; gap: 18px; }
.etape { min-width: 0; border: 0; padding: 28px clamp(20px, 3vw, 36px) 32px; background: var(--blanc); }
.etape legend { float: left; width: 100%; display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; font-size: clamp(26px, 2.4vw, 30px); line-height: 1.2; }
.etape legend + * { clear: both; }
.etape-numero { min-width: 1.6em; font-style: italic; color: var(--or-texte); font-size: .8em; }

/* Les entrées des choix restent dans la page (clavier, lecteurs d'écran) sans se voir. */
.choix-visite input, .jour input, .heure input, .langue-visite input, .case input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.rond { flex: none; display: inline-block; width: 18px; height: 18px; border: 1px solid var(--encre); border-radius: 50%; transition: box-shadow .25s, background-color .25s, border-color .25s; }
:checked ~ .rond { background: var(--vin); border-color: var(--vin); box-shadow: inset 0 0 0 3.5px var(--blanc); }

.choix-visites { display: grid; border-top: 1px solid var(--filet); }
.choix-visite { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 62px; padding: 10px 2px; border-bottom: 1px solid var(--filet); cursor: pointer; }
.choix-nom { font-size: 22px; line-height: 1.25; transition: color .25s; }
.choix-detail { font-size: 17px; color: var(--gris); white-space: nowrap; }
.choix-visite:has(:checked) .choix-nom { color: var(--vin); }
.choix-visite:has(:focus-visible), .jour:has(:focus-visible), .heure:has(:focus-visible), .langue-visite label:has(:focus-visible), .case:has(:focus-visible) { outline: 2px solid var(--vin); outline-offset: 3px; }
/* Safari ne marque pas :focus-visible quand les flèches passent d'un bouton radio à l'autre :
   au clavier (classe posée par app.js), l'anneau suit le focus. */
.au-clavier :is(.choix-visite, .jour, .heure, .langue-visite label):has(input:focus) { outline: 2px solid var(--vin); outline-offset: 3px; }
/* Téléphone : le nom sur une ligne, la durée et le prix dessous. */
@media (max-width: 520px) {
  .choix-visite { grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 0; }
  .choix-detail { grid-column: 2; }
}

/* Le calendrier : quatre semaines, du lundi au dimanche. */
.mois { margin-bottom: 12px; font-size: 22px; font-style: italic; }
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.calendrier .entete { padding-bottom: 8px; text-align: center; font-size: 13px; color: var(--vigne); }
.jour { position: relative; display: grid; place-items: center; height: 54px; cursor: pointer; }
.jour::before { content: ""; position: absolute; width: min(48px, calc(100% - 2px)); aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; transition: border-color .25s, background-color .25s; }
.jour-num { position: relative; font-size: 22px; line-height: 1; }
.jour-mois { position: absolute; bottom: 8px; font-size: 12px; line-height: 1; font-style: italic; color: var(--vigne); }
.jour:has(.jour-mois) .jour-num { transform: translateY(-5px); }
.jour:hover:not(.ferme)::before { border-color: var(--encre); }
.jour.ferme { cursor: default; color: rgb(43 39 35 / .3); }
.jour.complet .jour-num { text-decoration: line-through; text-decoration-thickness: 1px; }
.jour.passe { visibility: hidden; }
/* Aujourd'hui : un anneau or, qui ne se pose sur aucune lettre. Quand la case porte aussi le
   mois, l'anneau s'ouvre en bas et le mois se loge dans l'ouverture. */
.jour.aujourdhui::before { border-color: var(--or); }
.jour.aujourdhui:has(.jour-mois)::before { border-bottom-color: transparent; }
.jour:has(:checked)::before { background: var(--vin); border-color: var(--vin); }
.jour:has(:checked) { color: var(--blanc); }
.jour:has(:checked) .jour-mois { color: rgb(255 255 255 / .8); }
.jours .note-vide { margin-top: 14px; color: var(--vin); }
.jours .note-delai { margin-top: 14px; }
.mois-nav { display: flex; gap: 16px; margin-top: 8px; }
.mois-apres { margin-left: auto; }
.mois-avant::after { content: none; }
.mois-avant::before { content: "←"; content: "←" / ""; display: inline-block; margin-right: .7em; transition: transform .3s var(--douce); }
.mois-avant:hover::before { transform: translateX(-4px); }
.note-jours { margin-top: 10px; }

/* Les départs, comme une carte : l'heure, des points de conduite, les places. */
.heures { display: grid; border-top: 1px solid var(--filet); }
.heures > .note { padding-top: 12px; }
.heure { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 2px; border-bottom: 1px solid var(--filet); cursor: pointer; }
.heure-h { font-size: 24px; line-height: 1; transition: color .25s; }
.heure-points { flex: 1; height: 2px; margin-top: 8px; background: radial-gradient(circle, rgb(43 39 35 / .35) .8px, transparent 1.2px) 0 0 / 7px 2px repeat-x; }
.heure-places { font-size: 17px; color: var(--gris); }
.heure.peu .heure-places { color: var(--vin); }
.heure.complet { cursor: default; color: rgb(43 39 35 / .35); }
.heure.complet .heure-h { text-decoration: line-through; text-decoration-thickness: 1px; }
.heure.complet .rond { border-color: currentColor; }
.heure:has(:checked) .heure-h, .heure:has(:checked) .heure-places { color: var(--vin); }
.note-delai a { color: var(--vin); white-space: nowrap; }

.compteurs { display: grid; border-top: 1px solid var(--filet); }
.compteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.compteur p { display: grid; }
.compteur-nom { font-size: 22px; line-height: 1.25; }
.compteur-aide { font-size: 17px; color: var(--gris); }
.pas { display: flex; align-items: center; gap: 10px; flex: none; }
.pas button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--encre); background: transparent; color: var(--encre); font: 400 22px/1 var(--serif); cursor: pointer; transition: background-color .25s, color .25s; }
.pas button:hover:not([aria-disabled="true"]) { background: var(--encre); color: var(--blanc); }
.pas button[aria-disabled="true"] { border-color: var(--filet); color: rgb(43 39 35 / .25); cursor: default; }
.pas output { min-width: 1.6em; text-align: center; font-size: 28px; font-variant-numeric: lining-nums tabular-nums; }
/* Vide, la note reste dans la page (sans hauteur) : une région live qui naît avec son texte
   n'est pas toujours annoncée. */
.note-groupe:empty { margin-top: 0; }
.note-groupe { margin-top: 12px; color: var(--vin); }
/* 320 px (zoom à 400 %) : les compteurs tiennent dans l'étape, les boutons sur une ligne. */
@media (max-width: 359px) { .pas { gap: 4px; } .pas output { min-width: 1.2em; } .bouton { padding-inline: 14px; } }

.case { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 4px; cursor: pointer; font-size: 18px; }
.case-carre { flex: none; position: relative; width: 20px; height: 20px; margin-top: 4px; border: 1px solid var(--encre); transition: background-color .25s; }
.case input:checked + .case-carre { background: var(--vin); border-color: var(--vin); }
.case input:checked + .case-carre::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--blanc); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.case input[aria-invalid="true"] + .case-carre { border-color: var(--vin); box-shadow: 0 0 0 3px rgb(110 28 37 / .18); }

.langue-visite { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; margin-top: 22px; }
.langue-visite p { width: 100%; font-size: 13px; color: var(--vigne); }
.langue-visite label { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 20px; }

.champs { display: grid; gap: 24px 30px; }
@media (min-width: 640px) { .champs { grid-template-columns: 1fr 1fr; } .champ-large { grid-column: 1 / -1; } }
.champ { display: grid; gap: 2px; }
.champ span { font-size: 13px; color: var(--vigne); }
.champ em { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; font-style: italic; color: var(--gris); }
.champ input {
  width: 100%; min-height: 48px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--encre); border-radius: 0;
  background: transparent; color: var(--encre); font: 400 21px/1.3 var(--serif);
}
/* Le focus prend l'anneau du site ; le trait bordeaux est réservé au champ à corriger. */
.champ input:focus { outline: 2px solid var(--vin); outline-offset: 4px; }
.champ input[aria-invalid="true"] { border-bottom-color: var(--vin); box-shadow: 0 1px 0 var(--vin); }

.erreur:empty { display: none; }
/* « Choisissez un jour » se pose au-dessus du calendrier, près du jour qui reçoit le focus. Le
   calendrier garde son dégagement sous la légende flottante, message vidé ou non. */
.erreur + .jours { clear: both; }
.erreur:not(:empty) + .jours { margin-top: 16px; }
.erreur { padding: 12px 16px; border-left: 2px solid var(--vin); background: var(--blanc); color: var(--vin); font-size: 18px; scroll-margin-bottom: 24px; }
.etape > .erreur { margin-top: 16px; background: rgb(110 28 37 / .05); }
.note-centre { text-align: center; }
.reserver.scellee .tete-intro { display: none; }

/* Le talon : le carton résumé, collé en bas de l'écran pendant les étapes (téléphone et tablette),
   puis posé juste au-dessus du carton. */
.talon { display: none; }
@media (max-width: 1039px) {
  /* Un champ focalisé près du bas ne finit pas sous le talon (ni sous le bandeau, sous 900 px). */
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* Le carton garde des proportions de carton au lieu de s'étirer sur toute la largeur. */
  .colonne-carton { justify-self: center; width: min(100%, 480px); }
  .talon {
    position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 calc(-1 * var(--marge)); padding: 10px var(--marge) max(10px, env(safe-area-inset-bottom));
    background: var(--blanc); border-top: 1px solid var(--or); box-shadow: 0 -10px 24px -18px rgb(60 40 20 / .45);
    font-size: 16px; line-height: 1.35; color: var(--gris); text-wrap: wrap;
  }
  .talon > span:first-child { min-width: 0; }
  .talon strong { font-weight: 400; font-style: italic; color: var(--vin); font-size: 18px; white-space: nowrap; }
  .talon .a-remplir { border-bottom: 0; }
  .talon-total { flex: none; font-size: 26px; color: var(--encre); }
}

/* ---------- Le carton d'invitation ---------- */

.colonne-carton { display: grid; gap: 14px; }
.carton {
  position: relative; padding: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 38px) clamp(28px, 3vw, 36px); text-align: center;
  /* Un papier à peine grainé (SVG en ligne, 0,4 Ko). */
  background: #FFFDF9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .27 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: 0 1px 2px rgb(60 40 20 / .06), 0 18px 40px -20px rgb(60 40 20 / .3);
}
.carton::before, .carton::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--or); }
.carton::before { inset: 10px; }
.carton::after { inset: 14px; opacity: .45; }
.carton-maison { font-size: 13px; color: var(--vigne); }
.carton-appellation { display: block; margin-top: 2px; font-size: 16px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gris); }
.carton-orne { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 12px; color: var(--or); }
.carton-orne::before, .carton-orne::after { content: ""; width: 56px; height: 1px; background: currentColor; }
.carton-orne span { width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.carton-accueil { font-size: 19px; font-style: italic; color: var(--gris); }
.carton-nom { margin: 4px 0 2px; font-size: clamp(28px, 2.8vw, 34px); line-height: 1.2; overflow-wrap: anywhere; }
.carton-formule { margin-top: 14px; font-size: clamp(25px, 2.4vw, 29px); font-style: italic; color: var(--vin); }
.carton-quand { margin-top: 6px; font-size: 20px; }
.carton-qui { margin-top: 2px; font-size: 17px; color: var(--gris); }
/* .68 : 5:1 sur le papier grainé, là où il est le plus sombre (4,5:1 exigés à 20 px). */
.a-remplir { color: rgb(43 39 35 / .68); font-style: italic; border-bottom: 1px dotted rgb(43 39 35 / .35); }
.carton .vient { width: fit-content; margin-inline: auto; }
.carton-total { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
.carton-total strong { font-size: 42px; line-height: 1; font-weight: 400; }
.carton-total span { font-size: 17px; color: var(--gris); text-align: left; line-height: 1.3; }
.carton-sceau { display: grid; place-items: center; margin: 18px auto 0; width: 110px; height: 110px; }
.sceau-vide { display: grid; place-items: center; width: 102px; height: 102px; padding: 14px; border-radius: 50%; border: 1px dashed var(--or); font-size: 15px; font-style: italic; line-height: 1.2; color: var(--gris); transition: border-color .4s, color .4s; }
.sceau-pret { display: none; }
/* Tout est rempli : le cachet attend, prêt à être posé. */
.carton.pret .sceau-vide { border-style: solid; border-color: var(--vin); color: var(--vin); }
.carton.pret .sceau-attente { display: none; }
.carton.pret .sceau-pret { display: block; }

/* ---------- La confirmation : le carton scellé ---------- */

.confirmation { max-width: 720px !important; --sceau: 190px; }
.confirmation-titre { margin: 0 0 26px; text-align: center; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; font-style: italic; color: var(--vin); }
.carton-final { padding-bottom: clamp(36px, 5vw, 52px); }
.carton-final:focus { outline: none; }
.carton-final .carton-sceau { width: var(--sceau); height: var(--sceau); margin-top: 22px; }
.carton-ref { margin-top: 8px; font-size: 13px; color: var(--vigne); }
.carton-ref strong { display: block; margin-top: 2px; font-size: 28px; font-weight: 400; letter-spacing: .1em; color: var(--encre); }
.carton-arriver { max-width: 30em; margin: 12px auto 0; font-size: 18px; font-style: italic; color: var(--gris); }
.carton-adieu { margin-top: 14px; font-size: 22px; font-style: italic; color: var(--vin); }
.cachet { width: 100%; height: 100%; overflow: visible; transform: rotate(-6deg); filter: drop-shadow(0 3px 2px rgb(50 8 12 / .35)) drop-shadow(0 12px 14px rgb(50 8 12 / .22)); }
.confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; margin-top: 30px; }
.confirmation .note { margin-top: 20px; text-align: center; }
.confirmation .note strong { color: var(--encre); font-weight: 500; overflow-wrap: anywhere; }
/* Écrans bas (portable 1280 × 720, iPhone barres déployées) : le titre et le cachet tiennent
   ensemble à l'écran ; plus bas encore, app.js préfère le cachet et range le titre sous la barre. */
@media (max-height: 820px) { .confirmation { --sceau: 160px; } }
@media (max-height: 760px) {
  .confirmation { --sceau: 130px; }
  .confirmation-titre { margin-bottom: 16px; font-size: 34px; }
  .carton-final { padding-top: 30px; }
  .carton-final .carton-orne { margin: 6px 0 8px; }
  .carton-final .carton-total { margin-top: 12px; padding-top: 12px; }
  .carton-final .carton-sceau { margin-top: 16px; }
}
/* Portable 1366 × 768 (650 px de vue), iPhone en anglais : on resserre encore le carton. */
@media (max-height: 700px) {
  .confirmation { --sceau: 112px; }
  .confirmation-titre { margin-bottom: 10px; font-size: 30px; }
  .carton-final { padding-top: 24px; }
  .carton-final .carton-orne { margin: 4px 0 6px; }
  .carton-final .carton-formule { margin-top: 8px; }
  .carton-final .carton-total { margin-top: 8px; padding-top: 10px; }
  .carton-final .carton-sceau { margin-top: 10px; }
}

/* ---------- Infos ---------- */

.infos { background: var(--blanc); }
.infos-grille { display: grid; gap: 56px; }
@media (min-width: 960px) { .infos-grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(56px, 8vw, 120px); } }
.infos-liste { border-top: 1px solid var(--filet); }
.infos-liste div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 640px) { .infos-liste div { grid-template-columns: 10em 1fr; gap: 24px; } }
.infos-liste dt { font-size: 14px; color: var(--vigne); padding-top: .3em; }
.infos-liste dd { color: var(--gris); }
.contact { display: grid; gap: 10px; align-content: start; justify-items: start; }
.telephone { font-size: clamp(38px, 4vw, 52px); line-height: 1.1; text-decoration: none; white-space: nowrap; color: var(--vin); }
.telephone:hover { text-decoration: underline; }
.contact-lieu { font-style: italic; color: var(--gris); }

/* ---------- Pied ---------- */

.pied { padding: clamp(56px, 8vw, 96px) var(--marge) max(40px, env(safe-area-inset-bottom)); background: var(--pierre); color: var(--gris); font-size: 17px; text-align: center; }
.pied > * { max-width: 760px; margin: 0 auto 12px; }
.pied > p:not(.pied-marque):not(.evin) { max-width: 28em; text-wrap: balance; }
.pied a { color: var(--encre); }
.pied-marque { display: grid; justify-items: center; gap: 8px; margin-bottom: 28px; color: var(--encre); font-size: 15px; }
.pied .evin { padding: 18px 0; margin-bottom: 22px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); color: var(--encre); font-size: 20px; font-style: italic; }
/* Téléphone : la pierre du pied descend sous le bandeau de réservation. */
@media (max-width: 900px) { .pied { padding-bottom: calc(52px + max(40px, env(safe-area-inset-bottom))); } }

/* ---------- Page introuvable ---------- */

.perdu { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 48px var(--marge); text-align: center; }
.perdu .blason { width: 56px; height: 56px; margin: 0; }
.perdu .tuile { width: min(220px, 52vw); aspect-ratio: 4 / 5; margin: 6px 0 10px; }
.perdu h1 { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.02; letter-spacing: .04em; text-transform: uppercase; }
.perdu h1 em { display: block; font-size: .82em; letter-spacing: 0; text-transform: none; color: var(--vin); }
.perdu p { color: var(--gris); }
.perdu .etiquette { color: var(--vigne); }
.perdu .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; margin-top: 12px; }
/* La phrase anglaise sur sa propre ligne : les deux langues ne se mêlent pas. */
.perdu p > span[lang="en"] { display: block; }

/* ---------- Survols : seulement pour les pointeurs qui survolent vraiment ---------- */

@media (hover: hover) {
  .choix-visite:hover input:not(:checked) ~ .rond, .heure:not(.complet):hover input:not(:checked) ~ .rond,
  .langue-visite label:hover input:not(:checked) ~ .rond { border-color: var(--vin); box-shadow: 0 0 0 4px rgb(110 28 37 / .08); }
  .choix-visite:hover .choix-nom, .heure:not(.complet):hover .heure-h { color: var(--vin); }
  .barre-nav a { background: linear-gradient(currentColor, currentColor) 50% calc(50% + .9em) / 0 1px no-repeat; transition: background-size .45s var(--douce), color .3s; }
  .barre-nav a:hover, .barre-nav a:focus-visible { background-size: 100% 1px; }
}

/* ---------- Mouvement ---------- */

@media (prefers-reduced-motion: no-preference) {
  html:not(.calme) { scroll-behavior: smooth; }
  /* La mosaïque se découvre, puis les photos achèvent une seule respiration et s'arrêtent. */
  html:not(.calme) .tuile img { animation: decouvrir 1.6s var(--douce) both, respirer 3.4s 1.6s var(--douce) forwards; }
  html:not(.calme) .tuile-large img { animation-delay: .18s, 1.8s; }
  html:not(.calme) .une-texte > * { animation: apparaitre 1s var(--douce) both; }
  html:not(.calme) .une-texte > :nth-child(2) { animation-delay: .1s; }
  html:not(.calme) .une-texte > :nth-child(3) { animation-delay: .2s; }
  html:not(.calme) .une-texte > :nth-child(n+4) { animation-delay: .3s; }
  html.reveler:not(.calme) .monte { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--douce), transform 1s var(--douce); }
  html.reveler:not(.calme) .monte.visible { opacity: 1; transform: none; }
  html:not(.calme) .carton .vient { animation: encrer .7s var(--douce); }
  html:not(.calme) .carton.devient-pret .sceau-vide { animation: respirer-sceau 2.4s ease-in-out 2; }
  /* Le cachet : la cire tombe, s'écrase, se pose. */
  html:not(.calme) .confirmation-titre { animation: apparaitre .8s var(--douce) both; }
  html:not(.calme) .carton-final.pose { animation: poser-carton .8s var(--douce) both; }
  html:not(.calme) .carton-final.pose .cachet { animation: sceller .7s .5s cubic-bezier(.5, 0, .75, .3) both, ecraser .5s 1.2s var(--douce); }
  html:not(.calme) .carton-final.pose .carton-ref, html:not(.calme) .carton-final.pose .carton-arriver { animation: apparaitre .8s 1.3s var(--douce) both; }
  html:not(.calme) .carton-final.pose .carton-adieu { animation: apparaitre .8s 1.6s var(--douce) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  html.reveler:not(.calme) .visite.monte:nth-child(2) { transition-delay: .12s; }
  html.reveler:not(.calme) .visite.monte:nth-child(3) { transition-delay: .24s; }
}
@keyframes decouvrir { from { clip-path: inset(100% 0 0 0); transform: scale(1.1); } to { clip-path: inset(0); transform: scale(1.04); } }
@keyframes respirer { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* La ligne s'écrit de gauche à droite, comme à la plume. */
@keyframes encrer { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes respirer-sceau { 50% { box-shadow: 0 0 0 7px rgb(110 28 37 / .09); } }
@keyframes poser-carton { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes sceller {
  0% { opacity: 0; transform: translateY(-60px) scale(1.7) rotate(-18deg); }
  70% { opacity: 1; transform: scale(.94) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes ecraser { 0% { transform: scale(1) rotate(-6deg); } 35% { transform: scale(1.035, .97) rotate(-6deg); } 100% { transform: scale(1) rotate(-6deg); } }
/* Version calme : plus rien ne bouge, ni transition ni animation. */
html.calme *, html.calme *::before, html.calme *::after { transition: none !important; animation: none !important; }

/* ---------- Écrans très bas (téléphone à l'horizontale, zoom à 400 %) ---------- */

@media (max-height: 500px) {
  .barre { position: relative; top: 0; }
  /* Ni bandeau ni talon : ils prendraient jusqu'au quart de l'écran. */
  .onglet, .talon { display: none; }
  html { scroll-padding-top: 16px; scroll-padding-bottom: 16px; }
  main > section[id] { scroll-margin-top: 0; }
  .colonne-carton { position: static; }
  .pied { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

/* Colonne du carton sur un ordinateur peu haut : le bouton reste à l'écran. */
@media (min-width: 1040px) and (max-height: 860px) {
  .colonne-carton .carton { padding-top: 28px; padding-bottom: 24px; }
  .colonne-carton .carton-total { margin-top: 12px; padding-top: 12px; }
  .colonne-carton .carton-sceau { width: 84px; height: 84px; margin-top: 12px; }
  .colonne-carton .sceau-vide { width: 80px; height: 80px; padding: 10px; font-size: 13px; }
  .colonne-carton .note-centre { display: none; }
}
/* Portable 1366 × 768 (650 px de vue) : la colonne collée garde encore son bouton entier. */
@media (min-width: 1040px) and (max-height: 700px) {
  .colonne-carton { top: 72px; gap: 10px; }
  .colonne-carton .carton { line-height: 1.45; }
  .colonne-carton .carton-orne { margin: 6px 0 8px; }
  .colonne-carton .carton-formule { margin-top: 8px; }
}

/* ---------- Couleurs forcées (contraste élevé de Windows) : les choix restent visibles ---------- */

@media (forced-colors: active) {
  :checked ~ .rond { forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: inset 0 0 0 3.5px Canvas; }
  .jour::before { forced-color-adjust: none; border-color: transparent; }
  .jour:has(:checked)::before { background: Highlight; border-color: Highlight; }
  .jour:has(:checked) :is(.jour-num, .jour-mois) { forced-color-adjust: none; color: HighlightText; }
  /* Jours sans départ, départs complets, boutons inactifs : grisés, pas en couleur de texte. */
  .jour.ferme, .jour.ferme .jour-mois, .heure.complet, .heure.complet .heure-places, .pas button[aria-disabled="true"] { color: GrayText; }
  .heure.complet .rond, .pas button[aria-disabled="true"] { border-color: GrayText; }
}

/* ---------- Impression : une brochure avant la réservation, le carton et l'accès après ---------- */

@media print {
  .barre, .onglet, .galerie, .mosaique, .une-actions, .domaine-photo, .visite-photo, .visite .lien, .formulaire,
  .confirmation-actions, .contact .lien, .talon { display: none !important; }
  body:not(:has(.confirmation:not([hidden]))) .reserver { display: none !important; }
  body:has(.confirmation:not([hidden])) :is(.une, .domaine, .visites, .reserver .tete) { display: none !important; }
  html .monte { opacity: 1 !important; transform: none !important; }
  main > section:not(.une):not(.galerie) { padding: 16pt 0; }
  .pied { padding-bottom: 16pt; }
  .carton { box-shadow: none; }
  /* La feuille A4 tombe dans la mise en fiche (photo masquée) : le texte reprend toute la largeur,
     et aucun bloc ne se coupe entre deux pages. */
  .visite { grid-template-columns: minmax(0, 1fr); }
  .visite > :not(.visite-photo) { grid-column: 1; }
  .tete, .visite, .infos-liste div, .contact, .carton { break-inside: avoid; }
}