/* polices:debut (générées par polices.mjs : Instrument Serif, Plus Jakarta Sans ; licences libres, catalogue Google Fonts) */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italique-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* polices:fin */

/* =====================================================================
   Ambiance « Bastide, Table d'hôtes & Domaine vivant » (bastide-hotes) :
   « Pierre blonde, chêne et olivier » (Référence : Les Tables d'Hôtes)
   Skill agencement-design-site. Couleurs et couple de polices PROPOSÉS PAR
   LA BRIG'ADS : aucune reprise d'un des sites étudiés.

   Idéale pour une maison réunissant : Devanture de caractère, Table du chef,
   Potager maison, Cave à vin voûtée, Bar intérieur, Bar extérieur ouvert
   uniquement le soir dans une cour d'oliviers, et Chambres d'hôtes (ex. 7 chambres).

   Contrastes vérifiés (WCAG) :
   texte/surface 15,8:1 ; texte-doux/surface 6,8:1 et /surface-2 6,0:1 ;
   sur-accent/accent 8,4:1 ; bord-champ/surface 3,5:1 ; accent-sur-encre/encre 8,9:1
   Polices (libres, OFL, à auto-héberger avec scripts/polices.mjs) :
   Instrument Serif:400,400i ; Plus Jakarta Sans:400,500,600
   ===================================================================== */
:root {
  /* --- Couleurs de jour (Pierre blonde provençale, chaux, chêne, olivier) --- */
  --surface: #F7F4EC;            /* pierre blonde claire / chaux douce */
  --surface-2: #EBE5D6;          /* calcaire patiné, bandes alternées (potager, chambres) */
  --texte: #1D1B18;              /* encre chêne brûlé (15,8:1) */
  --texte-doux: #544E45;         /* terre d'ombre douce (6,8:1 sur surface, 6,0:1 sur surface-2) */
  --accent: #2D4A3A;             /* vert porte & olivier profond (fidèle à la Bible TH) */
  --accent-texte: #2D4A3A;       /* accent lisible en texte sur --surface (8,4:1) */
  --accent-fond: #2D4A3A;        /* fond du bouton plein (Réserver) */
  --sur-accent: #F7F4EC;         /* texte posé sur --accent-fond */
  --accent-fond-survol: #20362A; /* survol du bouton plein */
  --accent-fonce: #20362A;       /* nom du socle resto-site */
  --accent-sur-encre: #B5CEBE;   /* sauge lumineuse sur les bandes sombres (8,9:1) */
  --bord: #D6CEBC;               /* filets pierre sèche */
  --bord-champ: #80786B;         /* contour des champs de formulaire (3,5:1) */
  --encre: #181613;              /* fond des bandes sombres (Cave & Cour du Soir) */
  --sur-encre: #F7F4EC;          /* texte sur --encre */
  --erreur: #A3261B;             /* messages d'erreur */
  --voile: rgb(18 16 13 / .52);  /* voile chaud sous un texte posé sur photo */

  /* --- Jetons dédiés aux sous-univers (Cave, Potager, Bar Extérieur du Soir, Chambres) --- */
  --cave-fond: #1C1716;          /* pierre voûtée ombrée pour la section Cave à vin */
  --cave-accent: #C89B6E;        /* cuivre et laiton de sommelier sur fond sombre (7,2:1) */
  --nuit-fond: #141714;          /* nuit sous les oliviers pour le Bar Extérieur du Soir */
  --nuit-surface: #1F241F;       /* carte/encart dans la section nocturne */
  --nuit-ambre: #E0A958;         /* lueur des lanternes et guirlandes (8,1:1 sur --nuit-fond) */
  --terre-cuite: #8C442B;        /* touche secondaire terre cuite ancienne (6,3:1 sur --surface) */

  /* Ombres en couches, teintées pierre et chêne */
  --ombre: 0 1px 2px rgb(29 27 24 / .05), 0 6px 16px rgb(29 27 24 / .06), 0 16px 40px rgb(29 27 24 / .05);
  --ombre-haute: 0 2px 4px rgb(29 27 24 / .08), 0 10px 24px rgb(29 27 24 / .10), 0 24px 56px rgb(29 27 24 / .10);
  --degrade-fonce: linear-gradient(165deg, #181613, color-mix(in srgb, #181613 84%, #2D4A3A));

  /* --- Typographie --- */
  --police-titres: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --police-texte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --graisse-titres: 400;
  --fs-texte: 1.0625rem;
  --interligne: 1.68;
  --fs-h1: clamp(2.45rem, 5.6vw, 4.35rem);
  --fs-h2: clamp(1.85rem, 3.6vw, 2.75rem);
  --suivi-capitales: .14em;

  /* --- Formes, espaces, mouvement --- */
  --rayon: 8px;
  --rayon-petit: 5px;
  --esp-1: .5rem;
  --esp-2: 1rem;
  --esp-3: 1.75rem;
  --esp-4: 2.75rem;
  --esp-5: 4.5rem;
  --esp-6: 7rem;
  --largeur: 1160px;
  --hauteur-barre: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-masse: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-tap: 150ms;
  --dur-ui: 200ms;
  --dur-reveal: 600ms;

  /* --- Pont vers les anciens noms du gabarit resto-site --- */
  --terracotta: var(--accent-texte);
  --terracotta-fonce: var(--accent-fond-survol);
  --olivier: var(--texte-doux);
  --olivier-clair: var(--bord-champ);
  --creme: var(--surface);
  --creme-fonce: var(--surface-2);
  --lavande: var(--texte-doux);
  --anthracite: var(--texte);
  --dore: var(--surface-2);
  --gris: var(--texte-doux);
}


/* =====================================================================
   Les Tables d'Hôtes : base propre au site (assembler-css.mjs --base base-propre.css --sans-pont)
   Elle remplace le CSS du gabarit resto-site : éléments, boutons, en-tête, pied, et l'habillage des
   BLOCS GÉNÉRÉS (vocabulaire imposé : plat, menu-categorie, carte-info, horaires, service-tag,
   creneaux, confirmation…). L'agencement du site est dans styles-propres.css. Jetons seulement.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--police-texte); font-size: var(--fs-texte); line-height: var(--interligne);
  color: var(--texte); background: var(--surface); -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--police-titres); font-weight: var(--graisse-titres); line-height: 1.15; overflow-wrap: normal; hyphens: manual; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: 1.5rem; }
p, li, dd, td { overflow-wrap: break-word; hyphens: manual; }
time, .plat .prix, .prix-lisible strong { white-space: nowrap; }
::selection { background: var(--accent-fond); color: var(--sur-accent); }
:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; box-shadow: 0 0 0 5px var(--surface); }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* Boutons */
.btn {
  display: inline-block; cursor: pointer; border: 0; padding: 14px 28px;
  font-size: 1rem; font-weight: 600; letter-spacing: .02em; border-radius: var(--rayon-petit);
  transition: transform var(--dur-tap) var(--ease-out), background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-primaire { background: var(--accent-fond); color: var(--sur-accent); box-shadow: var(--ombre); }
.btn-primaire:hover { background: var(--accent-fond-survol); box-shadow: var(--ombre-haute); }

/* En-tête (bloc logo généré) et pied (bloc pied généré) */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.logo { display: block; color: var(--texte); line-height: 1.1; }
.logo small {
  display: block; font-family: var(--police-texte); font-size: .6rem; font-weight: 600; margin-top: 2px;
  letter-spacing: var(--suivi-capitales); text-transform: uppercase; color: var(--texte-doux);
}
footer.site { background: var(--encre); color: var(--sur-encre); padding: 56px 0 26px; }
footer.site h4 { color: var(--sur-encre); margin-bottom: 16px; font-size: 1.1rem; }
footer.site p, footer.site a { color: color-mix(in srgb, var(--sur-encre) 80%, var(--encre)); font-size: .93rem; line-height: 2; }
footer.site a:hover { color: var(--sur-encre); text-decoration: underline; text-underline-offset: 4px; }
footer.site .bas { border-top: 1px solid color-mix(in srgb, var(--sur-encre) 18%, var(--encre)); color: color-mix(in srgb, var(--sur-encre) 65%, var(--encre)); text-align: center; font-size: .82rem; }
footer.site :focus-visible { outline-color: var(--accent-sur-encre); box-shadow: none; }
.bandeau-demo { background: var(--encre); color: var(--sur-encre); text-align: center; padding: 8px 16px; font-size: .9rem; font-weight: 600; }
.a-confirmer { color: var(--accent-texte); font-style: italic; font-size: .85rem; }

/* Blocs carte et aperçu : rubriques et plats */
.menu-categorie h3 { font-size: 1.5rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--bord); }
.plat { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 11px 0; }
.plat .info { flex: 1; }
.plat .nom { font-weight: 600; }
.plat .desc { display: block; font-size: .88rem; color: var(--texte-doux); font-weight: 400; margin-top: 4px; max-width: 92%; line-height: 1.55; }
.plat .points { flex: 1; border-bottom: 1px dotted var(--bord-champ); transform: translateY(-4px); min-width: 24px; }
.plat .prix { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.plat .regime {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  border: 1px solid var(--texte-doux); color: var(--texte-doux); font-size: .72rem; font-weight: 600;
}
.note-section { color: var(--texte-doux); font-style: italic; font-size: .9rem; margin: -4px 0 8px; }
.mention-prix { text-align: center; font-size: .9rem; color: var(--texte-doux); margin-top: 18px; }

/* Blocs coordonnées, plan, services */
.carte-info { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 32px; }
.carte-info h3 { color: var(--texte); margin-bottom: 12px; font-size: 1.25rem; }
.carte-info p { color: var(--texte); }
.carte-info .btn { margin-top: var(--esp-2); }
table.horaires { width: 100%; border-collapse: collapse; color: var(--texte); font-variant-numeric: tabular-nums; }
table.horaires th { text-align: left; font-weight: 600; color: var(--texte); padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; }
table.horaires td { padding: 3px 0; }
.note-horaires { font-size: .88rem; font-style: italic; margin-top: 8px; }
.service-tag { display: inline-block; background: var(--surface); color: var(--texte); padding: 9px 18px; border-radius: 999px; font-size: .9rem; font-weight: 500; border: 1px solid var(--bord); }
.plan-encart { margin-top: 24px; padding: 22px 24px; background: var(--surface-2); border-radius: var(--rayon); }
.plan-encart .plan-adresse { font-weight: 500; color: var(--texte); margin-bottom: 12px; }
.plan-encart .plan-note { font-size: .85rem; color: var(--texte-doux); margin-top: 10px; }

/* Blocs de la réservation : intro, téléphone, aides, créneaux, confirmation, notice (aucun champ n'est touché) */
.intro-resa { color: var(--texte-doux); margin-top: 10px; }
.tel-resa { color: var(--texte-doux); margin-top: 30px; font-size: .95rem; }
.tel-resa a { text-decoration: underline; text-underline-offset: 3px; }
.pleine { grid-column: 1 / -1; }
.aide { color: var(--texte-doux); font-size: .85rem; margin: 6px 0 4px; line-height: 1.5; }
.groupe-creneaux { border: 0; padding: 0; margin: 0; min-width: 0; }
.groupe-creneaux legend { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; padding: 0; color: var(--texte); }
.service-titre { font-weight: 600; color: var(--texte); margin: 6px 0; font-size: .9rem; }
.creneaux { display: flex; flex-wrap: wrap; gap: 10px; }
.creneaux input { position: absolute; opacity: 0; width: 0; height: 0; }
.creneaux label {
  margin: 0; cursor: pointer; padding: 11px 17px; border-radius: var(--rayon-petit);
  border: 1.5px solid var(--bord-champ); background: var(--surface);
  font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-tap), border-color var(--dur-tap), color var(--dur-tap);
}
.creneaux label:hover { border-color: var(--accent-texte); }
.creneaux input:checked + label { background: var(--accent-fond); color: var(--sur-accent); border-color: var(--accent-fond); }
.creneaux input:focus-visible + label { outline: 2px solid var(--accent-texte); outline-offset: 2px; }
.creneaux input:disabled + label { opacity: .35; cursor: not-allowed; }
.confirmation {
  display: none; grid-column: 1 / -1; padding: 20px; color: var(--texte);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1.5px solid var(--accent-texte); border-radius: var(--rayon-petit);
}
.confirmation.visible { display: block; }
.confirmation span { display: block; margin-top: 6px; }
.confirmation:focus { outline: 2px solid var(--accent-texte); outline-offset: 3px; }
.mention-rgpd { font-size: .82rem; line-height: 1.55; color: var(--texte-doux); margin-top: 6px; }
.mention-rgpd a { color: var(--accent-texte); text-decoration: underline; }

/* Blocs univers : le reste de leur habillage est dans styles-propres.css */
.prix-lisible strong { font-weight: 600; }


/* Socle (sections 2 et 4 seulement : --sans-pont) */
/* ---------- 2. Socle ---------- */

/* NV6 Lien d'évitement : invisible jusqu'au premier Tab */
.evitement {
  position: absolute; left: 1rem; top: -100px; z-index: 300;
  padding: .75rem 1rem; background: var(--texte); color: var(--surface);
  border-radius: var(--rayon-petit);
}
.evitement:focus { top: 1rem; }

/* EC7 En-tête qui se pose : ombre et logo un peu plus petit dès qu'on a quitté le haut.
   La classe .pose est posée par js/agencement.js (sentinelle IntersectionObserver).
   Aucun changement de hauteur : rien ne saute sous le doigt. */
header.site { transition: box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
header.site.pose { box-shadow: var(--ombre); background: var(--surface); }
header.site .logo { transform-origin: left center; transition: transform var(--dur-ui) var(--ease-out); }
header.site.pose .logo { transform: scale(.9); }

/* NV1 Barre d'actions téléphone : Réserver toujours sous le pouce.
   HTML (hors bloc généré, juste avant </body>) :
   <nav class="barre-actions" aria-label="Actions rapides">
     <a href="reserver.html" class="barre-actions__principale">Réserver</a>
     <a href="tel:+33XXXXXXXXX">Appeler</a>          (seulement si le téléphone est confirmé)
     <a href="contact.html#acces">Itinéraire</a>
   </nav> */
.barre-actions {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: var(--hauteur-barre);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--bord);
  box-shadow: 0 -6px 18px rgb(0 0 0 / .06);
}
.barre-actions a {
  display: grid; place-items: center; gap: 2px;
  padding: .5rem .25rem; min-height: 48px;
  font-size: .8125rem; font-weight: 600; color: var(--texte);
  text-align: center;
}
.barre-actions a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.barre-actions .barre-actions__principale { background: var(--accent-fond); color: var(--sur-accent); }
.barre-actions a:active { transform: scale(.98); }
body:has(.barre-actions) { padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .barre-actions { display: none; }
  body:has(.barre-actions) { padding-bottom: 0; }
}

/* IP1 Horaires sous le nom : la question n°1, réglée sans un clic.
   Le contenu est le bloc généré horaires-court, posé dans un <p class="horaires-courtes"> :
   jamais d'horaires recopiés à la main. Une plage par ligne. */
.horaires-courtes {
  margin-top: var(--esp-1);
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.horaires-courtes strong { color: var(--texte); font-weight: 600; }
.horaires-courtes .sep { display: block; height: 0; overflow: hidden; }
.horaires-courtes .dim { display: block; }

/* Le nom en grand une seule fois au premier écran : si le héros porte le nom (grand café,
   bistrot typographique, mas), poser <body class="nom-en-heros"> sur l'accueil. L'en-tête
   masque alors son nom tant qu'il n'est pas posé (EC7) ; il revient dès qu'on descend.
   Sans script, le nom reste dans l'en-tête (rien ne disparaît). */
html.agencement body.nom-en-heros header.site:not(.pose) .logo { visibility: hidden; }

/* IP2 Infos pratiques en liste (une ligne par souci : accès, animaux, paiement…) */
.infos-pratiques { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.5rem; margin: 0; }
.infos-pratiques dt { font-weight: 600; color: var(--texte); }
.infos-pratiques dd { margin: 0; color: var(--texte-doux); }
@media (max-width: 560px) {
  .infos-pratiques { grid-template-columns: 1fr; gap: .15rem; }
  .infos-pratiques dd { margin-bottom: .75rem; }
}

/* CT1 Carte imprimable : la feuille d'impression remplace le PDF */
@media print {
  header.site, .barre-actions, footer.site, .evitement,
  .btn, nav, .bandeau-demo, iframe { display: none !important; }
  body { background: #fff; color: #111; font-size: 11pt; padding: 0 !important; }
  section { padding: 0 0 12pt; }
  .menu-categorie, .plat { break-inside: avoid; }
  .plat .prix { color: #111; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
  .rubrique-bouton::after { content: none !important; }   /* CT2 : pas de « + » sur papier */
}

/* ---------- 4. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  header.site.pose .logo { transform: none; }
  .btn:hover { transform: none; }
}


/* =====================================================================
   Les Tables d'Hôtes (Saint-Rémy-de-Provence, démonstration) : CSS propre au site
   Ambiance : bastide-hotes (skill agencement-design-site). Assemblé par assembler-css.mjs
   après les polices, les jetons de l'ambiance, le CSS du gabarit et le socle.
   Détails retenus (hors socle NV1, EC7, IP1, IP2, CT1, NV6) :
     DV1 seuil de la maison (photo attendue), DV2 sommaire des lieux, DV3 cartouche matière,
     PT1 triptyque en lames, CV1 respiration minérale, CV3 parole du sommelier,
     BN1 bascule « nuit sous les oliviers » (bloc généré bar-soir), CH3 collection numérotée (bloc généré chambres).
   Pièce de mouvement : aucune (seuls l'en-tête qui se pose et le bouton « remonter » du socle bougent).
   Aucune couleur écrite en dur hors de ce :root : tout passe par les jetons de l'ambiance.
   ===================================================================== */
:root {
  /* Accent propre au site : vert olive patiné de la porte (5,8:1 sur --surface, 5,8:1 sous --sur-accent), à 17 d'écart CIEDE2000
     du vert du Bistrot des Lucioles (#234B3B) que l'ambiance partageait ; lanternes en ambre clair (10,5:1 sur --nuit-fond). */
  --accent: #5C6333;
  --accent-texte: #5C6333;
  --accent-fond: #5C6333;
  --accent-fond-survol: #474D27;
  --accent-fonce: #474D27;
  --nuit-ambre: #EFC07A;
  --th-sur-sombre-doux: #CFC9BD;   /* texte secondaire sur --cave-fond et --nuit-fond (11:1 et 12:1) */
  --th-trame: #E3DCCB;             /* trame fine des emplacements de photo (démonstration) */
}

/* ---------- Cadre, rythme, utilitaires ---------- */
.th-cadre { width: min(100% - 2 * clamp(1.25rem, 4vw, 2.5rem), var(--largeur)); margin-inline: auto; }
.th-bande { background: var(--surface-2); }
.th-sur {
  font: 500 .78rem/1.4 var(--police-texte); letter-spacing: var(--suivi-capitales); text-transform: uppercase;
  color: var(--accent-texte); margin: 0 0 var(--esp-2);
}
.th-chapo { font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--texte-doux); max-width: 60ch; margin-top: var(--esp-2); }
.th-actions { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); align-items: center; margin-top: var(--esp-3); }
.th-lien { color: var(--accent-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.th-lien:hover { color: var(--texte); }
.th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main h2 { margin: 0 0 var(--esp-2); line-height: 1.12; text-wrap: balance; }
main h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0 0 var(--esp-1); }
main h4 { font-weight: 400; }
main > section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ---------- En-tête et menu (EC7 du socle : l'en-tête se pose) ---------- */
.th-entete {
  max-width: var(--largeur); margin-inline: auto; padding: 12px clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
}
.th-nav { display: contents; }
.th-entete .logo { font-family: var(--police-titres); font-size: 1.55rem; font-weight: 400; line-height: 1; }
.th-entete .logo small { font-size: .6rem; margin-top: 5px; font-weight: 500; letter-spacing: .18em; }
.th-menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); list-style: none; margin: 0; padding: 0; }
.th-menu a:not(.btn) {
  font-size: .95rem; font-weight: 500; color: var(--texte); padding: .35rem 0;
  border-bottom: 1px solid transparent; transition: color var(--dur-ui), border-color var(--dur-ui);
}
.th-menu a:not(.btn):hover, .th-menu a.th-menu__actif { color: var(--accent-texte); border-bottom-color: currentColor; }
.th-menu .btn { padding: 10px 20px; font-size: .9rem; }
.th-nav__bouton {
  display: none; width: 44px; height: 44px; place-items: center; cursor: pointer;
  border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte);
}
.th-nav__bouton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 480px) { .th-entete .logo small { font-size: .55rem; letter-spacing: .12em; } }
@media (max-width: 860px) {
  .th-nav__bouton { display: grid; }
  .th-menu {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--bord); box-shadow: var(--ombre);
  }
  .th-menu--ouvert { display: flex; }
  .th-menu li { border-top: 1px solid var(--bord); }
  .th-menu a:not(.btn) { display: block; padding: 14px clamp(1.25rem, 4vw, 2.5rem); border-bottom: 0; }
  .th-menu .btn { display: block; margin: 12px clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
}

/* ---------- Emplacements de photo (démonstration : la case dit quoi fournir) ---------- */
.th-photo {
  position: relative; margin: 0; display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); border: 1px dashed var(--bord-champ); border-radius: var(--rayon);
}
.th-photo::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--th-trame) 14px 15px);
}
.th-photo figcaption {
  position: relative; max-width: 28ch; padding: var(--esp-2); text-align: center;
  font: 500 .8rem/1.5 var(--police-texte); color: var(--texte-doux);
  background: var(--surface); border-radius: var(--rayon-petit);
}
.th-photo--devanture { aspect-ratio: 16 / 10; }
.th-photo--lame { aspect-ratio: 2 / 5; max-height: clamp(420px, 70svh, 640px); }
.th-photo--large { aspect-ratio: 16 / 9; margin-block: var(--esp-4); }
.th-photo--portrait { aspect-ratio: 4 / 5; }
.th-photo--nuit { aspect-ratio: 16 / 9; background: var(--nuit-surface); border-color: var(--nuit-ambre); }
.th-photo--nuit::before { background: repeating-linear-gradient(135deg, transparent 0 14px, var(--nuit-fond) 14px 15px); }
.th-photo--nuit figcaption { color: var(--th-sur-sombre-doux); background: var(--nuit-fond); }

/* ---------- 1. Le seuil (DV1) et le sommaire des lieux (DV2) ---------- */
.th-seuil { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.th-seuil__grille {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; min-height: clamp(420px, 76svh, 720px);
}
.th-seuil h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; margin: 0 0 var(--esp-2); max-width: 20ch; text-wrap: balance; }
.th-seuil .horaires-courtes { font-size: 1rem; }
.th-sommaire { display: grid; gap: .6rem; margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--bord); }
.th-sommaire a {
  display: inline-flex; align-items: baseline; gap: .7rem; width: fit-content;
  font: 400 clamp(1.1rem, 1.8vw, 1.35rem)/1.3 var(--police-titres); color: var(--texte);
  transition: transform var(--dur-tap) var(--ease-out), color var(--dur-tap);
}
.th-sommaire a span { color: var(--accent-texte); }
.th-sommaire a:hover { transform: translateX(4px); color: var(--accent-texte); }
.th-sommaire em {
  font: 500 .72rem/1 var(--police-texte); letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); font-style: normal; margin-left: .25rem;
}
@media (max-width: 900px) {
  .th-seuil__grille { grid-template-columns: 1fr; min-height: 0; }
  .th-seuil__texte { order: 1; }
  .th-photo--devanture { order: 0; }
}

/* ---------- 2. Les hôtes (RC1) et le cartouche matière (DV3) ---------- */
.th-hotes__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.th-manifeste { font: 400 clamp(1.3rem, 2.1vw, 1.7rem)/1.45 var(--police-titres); color: var(--texte); margin: 0 0 var(--esp-2); }
.th-matieres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--esp-3); }
.th-matieres li {
  padding: var(--esp-2) 0; border-top: 1px solid var(--bord);
  font: 500 .8rem/1.4 var(--police-texte); letter-spacing: var(--suivi-capitales); text-transform: uppercase; color: var(--texte-doux);
}
@media (max-width: 760px) { .th-hotes__grille { grid-template-columns: 1fr; } }

/* ---------- 3. Le potager : triptyque (PT1) et bloc généré potager ---------- */
.th-lames { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-4); }
@media (max-width: 640px) {
  .th-lames { grid-template-columns: 1fr; }
  .th-lames .th-photo--lame { aspect-ratio: 16 / 10; }
}
.potager-bloc h3 { max-width: 34ch; margin-bottom: var(--esp-2); }
.potager-desc { max-width: 64ch; color: var(--texte-doux); }
.potager-recoltes { list-style: none; margin: var(--esp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-3); }
.potager-recoltes li { padding-left: 1rem; border-left: 2px solid var(--accent); color: var(--texte); }
@media (max-width: 700px) { .potager-recoltes { grid-template-columns: 1fr; } }

/* ---------- 4. La table : aperçu de la carte (bloc généré) ---------- */
.th-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.th-table__intro { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .th-table { grid-template-columns: 1fr; }
  .th-table__intro { position: static; }
}
.th-apercu .menu-categorie { margin-bottom: var(--esp-3); }
.th-apercu .menu-categorie h3, .th-carte .menu-categorie h3 { font-size: 1.35rem; margin-bottom: var(--esp-2); padding-bottom: .5rem; border-bottom: 1px solid var(--bord); }
.th-apercu .plat, .th-carte .plat { padding: .75rem 0; border-bottom: 1px solid var(--bord); }
.th-apercu .plat .nom, .th-carte .plat .nom { font-weight: 500; }
.th-apercu .plat .points, .th-carte .plat .points { display: none; }
.th-apercu .plat .prix, .th-carte .plat .prix { font-family: var(--police-titres); font-size: 1.15rem; font-weight: 400; }
.th-apercu .mention-prix, .th-carte .mention-prix { text-align: left; color: var(--texte-doux); }

/* ---------- Page La Table : la carte entière (bloc généré) et ses outils (CT1) ---------- */
.th-carte { display: grid; gap: var(--esp-4); }
.th-carte .menu-categorie { margin: 0; }
.th-carte .menu-categorie h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.th-carte .note-section { color: var(--texte-doux); font-style: italic; }
.th-outils { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-4); align-items: center; }
html:not(.agencement) [data-imprimer] { display: none; }
.th-imprimer { background: none; border: 1px solid var(--texte); color: var(--texte); padding: 13px 24px; }
.th-imprimer:hover { background: var(--surface-2); }

/* ---------- 5. La cave : respiration (CV1), bloc généré cave, parole du sommelier (CV3) ---------- */
.th-cave { padding-top: 0; }
.th-cave__respiration { background: var(--surface-2); padding: var(--esp-5) clamp(1.25rem, 6vw, 5rem); text-align: center; }
.th-cave__respiration h2 { max-width: 24ch; margin-inline: auto; }
.th-cave__respiration p { max-width: 58ch; margin-inline: auto; color: var(--texte-doux); }
.cave-bloc h3 { max-width: 30ch; }
.cave-sommelier { color: var(--texte-doux); }
.cave-references { font-family: var(--police-titres); font-size: 1.35rem; margin-top: var(--esp-2); }
.cave-references strong { font-size: 2.6rem; font-weight: 400; color: var(--accent-texte); line-height: 1; margin-right: .2rem; }
.cave-desc { max-width: 68ch; color: var(--texte-doux); margin-top: var(--esp-2); }
.cave-quatuor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); margin-top: var(--esp-4); }
.cave-famille {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px;
  padding: var(--esp-3) var(--esp-2); border-radius: var(--rayon); border-top: 2px solid var(--cave-accent);
  background: var(--cave-fond); color: var(--sur-encre);
}
.cave-famille h4 { font-family: var(--police-titres); font-size: 1.25rem; line-height: 1.2; color: var(--cave-accent); margin: 0 0 .6rem; }
.cave-famille p { font-size: .9rem; color: var(--th-sur-sombre-doux); }
@media (max-width: 960px) { .cave-quatuor { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cave-quatuor { grid-template-columns: 1fr; } }
.cave-degustation {
  max-width: 70ch; margin-top: var(--esp-4); padding: var(--esp-3);
  border: 1px solid var(--bord); border-left: 3px solid var(--cave-accent); border-radius: var(--rayon-petit); background: var(--surface);
}
.th-citation { text-align: center; max-width: 48ch; margin: var(--esp-5) auto 0; padding-inline: var(--esp-2); }
.th-citation::before, .th-citation::after { content: ""; display: block; width: 1px; height: 42px; margin: var(--esp-2) auto; background: var(--bord-champ); }
.th-citation blockquote { font: italic 400 clamp(1.3rem, 2.3vw, 1.8rem)/1.45 var(--police-titres); color: var(--texte); margin: 0; }
.th-citation figcaption { margin-top: var(--esp-1); font: 500 .85rem/1.4 var(--police-texte); color: var(--texte-doux); }

/* ---------- 6. La cour des oliviers : bascule du soir (BN1) et matières (BN3) ---------- */
.th-nuit { background: var(--nuit-fond); color: var(--sur-encre); }
.th-nuit__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .th-nuit__grille { grid-template-columns: 1fr; } }
.badge-soir {
  display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; margin: 0 0 var(--esp-3);
  border: 1px solid var(--nuit-ambre); border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nuit-ambre);
}
.point-ambre { width: 8px; height: 8px; border-radius: 50%; background: var(--nuit-ambre); box-shadow: 0 0 10px var(--nuit-ambre); }
.bar-soir-bloc h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--sur-encre); max-width: 22ch; }
.chapo-nuit { max-width: 60ch; color: var(--th-sur-sombre-doux); margin-top: var(--esp-2); }
.bar-soir-carte { margin-top: var(--esp-4); border-top: 1px solid var(--nuit-surface); }
.bar-soir-carte .plat { padding: .9rem 0; border-bottom: 1px solid var(--nuit-surface); }
.bar-soir-carte .plat .nom { color: var(--sur-encre); font-weight: 500; }
.bar-soir-carte .plat .desc { color: var(--th-sur-sombre-doux); }
.bar-soir-carte .plat .points { display: none; }
.bar-soir-carte .plat .prix { color: var(--nuit-ambre); font-family: var(--police-titres); font-size: 1.15rem; font-weight: 400; }
.th-nuit__matieres p { margin-top: var(--esp-3); color: var(--th-sur-sombre-doux); }
.th-nuit .a-confirmer { color: var(--nuit-ambre); }

/* ---------- 7. Les chambres : l'appel (CH4) ---------- */
.th-chambres-appel__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .th-chambres-appel__grille { grid-template-columns: 1fr; } }

/* ---------- 8. Venir : fermetures (bloc aide-date), « Ouvert ce jour-là ? » (IP7), infos pratiques (IP2 du socle) ---------- */
.th-venir__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .th-venir__grille { grid-template-columns: 1fr; } }
.th-fermeture .aide { color: var(--texte-doux); margin: 0 0 var(--esp-3); }
html:not(.agencement) .ouvert-ce-jour { display: none; }
.ouvert-ce-jour { display: grid; gap: .4rem; max-width: 22rem; }
.ouvert-ce-jour label { font-weight: 600; }
.ouvert-ce-jour input { padding: .7rem .9rem; border: 1.5px solid var(--bord-champ); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font: inherit; }
.ouvert-ce-jour output { font-weight: 600; min-height: 1.5em; color: var(--accent-texte); }

/* ---------- Têtes des pages intérieures ---------- */
.th-page { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.th-page + section { padding-top: 0; }
.th-page h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0; max-width: 20ch; text-wrap: balance; }

/* ---------- Page Les Chambres : la collection numérotée (CH3, bloc généré chambres) ---------- */
.regles-sejour {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 var(--esp-4);
  padding: var(--esp-2) var(--esp-3); background: var(--surface-2); border-radius: var(--rayon-petit); font-size: .95rem;
}
.regles-sejour .sep { color: var(--texte-doux); }
.collection-7-chambres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.chambre { display: flex; flex-direction: column; padding: var(--esp-3); border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.chambre__corps { display: flex; flex-direction: column; gap: .6rem; height: 100%; }
.chambre-num { font: 500 .78rem/1.4 var(--police-texte); letter-spacing: var(--suivi-capitales); text-transform: uppercase; color: var(--texte-doux); }
.chambre h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0; }
.chambre__meta { color: var(--texte-doux); font-size: .92rem; }
.chambre-le-plus { padding-left: .85rem; border-left: 2px solid var(--accent); color: var(--texte); font-size: .95rem; }
.services-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: .85rem; color: var(--texte-doux); }
.services-mini li { padding: .2rem .6rem; border: 1px solid var(--bord); border-radius: 999px; }
.chambre .prix-lisible { margin-top: auto; padding-top: var(--esp-2); color: var(--texte-doux); }
.chambre .prix-lisible strong { font-family: var(--police-titres); font-size: 1.6rem; font-weight: 400; color: var(--texte); }
.collection-7-chambres > .chambre-signature { grid-column: 1 / -1; background: var(--surface-2); border-color: var(--surface-2); }
.collection-7-chambres > .chambre-signature .chambre__corps { max-width: 72ch; }
@media (max-width: 820px) { .collection-7-chambres { grid-template-columns: 1fr; } }
.th-sejour p { max-width: 64ch; }

/* ---------- Page Venir : coordonnées (bloc généré), plan, services ---------- */
.th-coordonnees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
@media (max-width: 860px) { .th-coordonnees { grid-template-columns: 1fr; } }
.th-coordonnees .carte-info { background: var(--surface); border: 1px solid var(--bord); box-shadow: none; padding: var(--esp-3); }
.th-coordonnees .carte-info h3 { font-size: 1.35rem; margin-bottom: var(--esp-2); }
.th-coordonnees .carte-info p { color: var(--texte); }
.th-coordonnees table.horaires { color: var(--texte); }
.th-coordonnees a:not(.btn) { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.plan-encart { background: var(--surface-2); box-shadow: none; }
.th-services { display: flex; flex-wrap: wrap; gap: .6rem; }
.th-services .service-tag { background: var(--surface); border: 1px solid var(--bord); box-shadow: none; font-weight: 500; }

/* ---------- Page Réserver : le formulaire (aucun champ renommé, habillage seulement) ---------- */
.th-resa__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .th-resa__grille { grid-template-columns: 1fr; } }
.th-resa__intro { position: sticky; top: 96px; }
@media (max-width: 900px) { .th-resa__intro { position: static; } }
.intro-resa { color: var(--texte-doux); margin-top: var(--esp-2); }
.th-resa__note { margin-top: var(--esp-2); }
.tel-resa { text-align: left; margin-top: var(--esp-3); color: var(--texte); }
.th-formulaire {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2) var(--esp-3);
  padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
}
@media (max-width: 600px) { .th-formulaire { grid-template-columns: 1fr; } }
.th-formulaire .th-champ--large, .th-formulaire .pleine, .th-etape, .th-talon, .th-alerte, .th-formulaire .confirmation { grid-column: 1 / -1; }
.th-etape { display: flex; align-items: center; gap: .75rem; margin: var(--esp-2) 0 0; font: 400 1.3rem/1.2 var(--police-titres); }
.th-etape__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--texte); color: var(--surface); font: 600 .85rem/1 var(--police-texte); }
.th-etape::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.th-formulaire label, .th-formulaire legend { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.th-formulaire input, .th-formulaire select, .th-formulaire textarea {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--texte);
  background: var(--surface); border: 1.5px solid var(--bord-champ); border-radius: var(--rayon-petit);
}
.th-formulaire input:focus, .th-formulaire select:focus, .th-formulaire textarea:focus { outline: none; border-color: var(--accent-texte); box-shadow: 0 0 0 3px var(--surface-2); }
.th-formulaire textarea { min-height: 110px; resize: vertical; }
.th-formulaire fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.th-formulaire .aide { font-size: .85rem; color: var(--texte-doux); margin: .5rem 0 0; }
.th-formulaire .creneaux { display: flex; flex-wrap: wrap; gap: .5rem; }
.th-formulaire .creneaux input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-formulaire .creneaux label { margin: 0; cursor: pointer; padding: .65rem 1rem; border-radius: var(--rayon-petit); border: 1.5px solid var(--bord-champ); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
.th-formulaire .creneaux label.th-complet { opacity: .35; cursor: not-allowed; }
.th-formulaire .service-titre { margin: .9rem 0 .4rem; font-weight: 600; font-size: .9rem; }
.th-talon { display: none; padding: var(--esp-2) var(--esp-3); background: var(--surface-2); border-radius: var(--rayon-petit); color: var(--texte-doux); }
.th-talon.visible { display: block; }
.th-talon__titre { display: block; font: 500 .75rem/1.4 var(--police-texte); letter-spacing: var(--suivi-capitales); text-transform: uppercase; color: var(--texte); margin-bottom: .35rem; }
.th-alerte { display: none; padding: var(--esp-2) var(--esp-3); border: 1.5px solid var(--erreur); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font-weight: 600; }
.th-alerte.visible { display: block; }
.th-envoi { width: 100%; }
.th-formulaire .mention-rgpd { font-size: .82rem; color: var(--texte-doux); }
.th-formulaire .confirmation { text-align: left; }

/* ---------- Pages de texte (merci, mentions, confidentialité) ---------- */
.th-texte { max-width: 72ch; }
.th-texte h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--esp-3); }
.th-texte h2 { font-size: 1.5rem; margin: var(--esp-4) 0 var(--esp-2); }
.th-texte a:not(.btn) { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.th-texte .btn { margin-top: var(--esp-3); }

/* ---------- Pied de page ---------- */
footer.site { padding: var(--esp-5) 0 var(--esp-3); }
.th-pied { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--esp-4); }
@media (max-width: 760px) { .th-pied { grid-template-columns: 1fr; gap: var(--esp-3); } }
footer.site h4 { font-size: 1.15rem; margin: 0 0 var(--esp-2); }
footer.site .bas { grid-column: 1 / -1; margin-top: var(--esp-3); padding: var(--esp-3) 3.5rem 0; text-align: center; font-size: .82rem; }

/* ---------- NV5 Revenir en haut (sans script, il n'existe pas) ---------- */
.remonter { display: none; }
html.agencement .remonter {
  position: fixed; right: 1rem; bottom: calc(var(--hauteur-barre) + 1rem + env(safe-area-inset-bottom)); z-index: 80;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord-champ); box-shadow: var(--ombre);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
html.agencement .remonter.visible { opacity: 1; visibility: visible; transform: none; }
.remonter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 900px) { html.agencement .remonter { right: 2rem; bottom: 2rem; } }

/* ---------- Impression (CT1 du socle : la carte entière) ---------- */
@media print {
  .th-nav, .th-photo, .remonter, .th-outils, .th-sommaire { display: none !important; }
  .th-carte { display: block; }
  .th-carte .menu-categorie { break-inside: avoid; margin-bottom: 12pt; }
}

/* ---------- Page Venir : coordonnées à gauche, aparté à droite (« Ouvert ce jour-là ? », services) ---------- */
.th-venir-page { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.th-venir-page .th-coordonnees { grid-template-columns: 1fr; }
.th-aparte { position: sticky; top: 96px; padding: var(--esp-3); background: var(--surface-2); border-radius: var(--rayon); }
.th-aparte__titre { font-size: 1.35rem; margin: 0 0 var(--esp-2); }
.th-aparte .ouvert-ce-jour { margin-bottom: var(--esp-4); }
.th-aparte .th-services .service-tag { background: var(--surface); }
@media (max-width: 900px) {
  .th-venir-page { grid-template-columns: 1fr; }
  .th-aparte { position: static; }
}

/* ---------- Page Les Chambres : sommaire numéroté (CH3) ---------- */
.th-numeros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--esp-4); }
.th-numeros a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bord); border-radius: 50%;
  font: 400 1.05rem/1 var(--police-titres); color: var(--texte); transition: background-color var(--dur-tap), border-color var(--dur-tap);
}
.th-numeros a:hover { background: var(--surface-2); border-color: var(--texte); }

/* ---------- Pages courtes : le retour vers la maison aligné sur la colonne de texte ---------- */
.th-retour { max-width: 72ch; }

/* ---------- Page Réserver : les trois volets du formulaire (fieldset transparents dans la grille) ---------- */
.th-formulaire .th-volet { display: contents; }
.th-formulaire legend.th-etape { float: left; width: 100%; padding: 0; margin: var(--esp-2) 0 0; font: 400 1.3rem/1.2 var(--police-titres); }

/* ---------- Page La Table : aparté à gauche (récolte, cuisson, dressage), la carte à droite ---------- */
.th-carte-page { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.th-carte-aparte { position: sticky; top: 96px; }
.th-carte-aparte .th-chapo { margin-top: 0; }
.th-carte-aparte .th-outils { margin-top: var(--esp-3); }
@media (max-width: 900px) {
  .th-carte-page { grid-template-columns: 1fr; }
  .th-carte-aparte { position: static; }
}
.th-gestes { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.25rem; margin: var(--esp-3) 0 0; }
.th-gestes dt { font-weight: 600; }
.th-gestes dd { margin: 0; color: var(--texte-doux); }
@media (max-width: 560px) {
  .th-gestes { grid-template-columns: 1fr; gap: .15rem; }
  .th-gestes dd { margin-bottom: .75rem; }
}
.th-resa__intro .th-gestes { margin-top: var(--esp-3); }

/* Les légendes des volets : un numéro, le titre, un filet dessous (un <legend> ne se met pas en flex) */
.th-formulaire legend.th-etape { display: block; border-bottom: 1px solid var(--bord); padding-bottom: .5rem; }
.th-formulaire legend.th-etape::after { content: none; }
.th-formulaire legend.th-etape .th-etape__num { margin-right: .65rem; vertical-align: 4px; }

/* ---------- En-tête : le menu au centre, Réserver et le bouton du menu à droite ---------- */
.th-entete__actions { display: flex; align-items: center; gap: .75rem; }
.th-entete__reserver { padding: 10px 20px; font-size: .9rem; }
@media (max-width: 600px) { .th-entete__reserver { display: none; } }   /* la barre d'actions porte Réserver sous le pouce */

/* ---------- Pied : les lieux de la maison sur une ligne, au-dessus des colonnes ---------- */
.th-pied__lieux {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  margin-bottom: var(--esp-2); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--nuit-surface);
}
.th-pied__lieux a { font: 400 1.1rem/1.4 var(--police-titres); color: var(--sur-encre); }
.th-pied__lieux a:hover { color: var(--accent-sur-encre); text-decoration: none; }

/* ---------- Page Venir : le chemin d'arrivée ; page Chambres : la bastide en tête ---------- */
.th-photo--acces { aspect-ratio: 16 / 9; }
.th-coordonnees .th-photo--acces { margin-top: var(--esp-2); }
.th-acces-note { color: var(--texte-doux); }
.th-photo--bastide { aspect-ratio: 21 / 9; margin-top: var(--esp-4); }

/* ---------- Vraies images (préparées par le script de recadrage) : la case hachurée disparaît ---------- */
.th-photo--pleine { display: block; border: 0; background: var(--surface-2); }
.th-photo--pleine::before { content: none; }
.th-photo--pleine img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-hotes .th-lames { margin-top: var(--esp-4); margin-bottom: 0; }
.th-photo--lame { max-height: none; }
.th-chambres-appel__texte { max-width: 62ch; }

/* ---------- Héros vidéo (quand site/videos/accueil.mp4 existe) : la vidéo en fond, le texte posé dessus,
   l'en-tête transparent tant qu'il n'est pas posé (variante du socle EC7). Une seule pièce de mouvement. ---------- */
.th-seuil--video { position: relative; padding: 0; min-height: clamp(420px, 76svh, 720px); display: grid; align-items: end; color: var(--sur-encre); isolation: isolate; }
.th-seuil__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--encre); }
.th-seuil__fond img, .th-seuil__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-seuil__fond video { animation: th-apparait 1.4s ease-out both; }   /* la vidéo apparaît en fondu sur son affiche : aucun flash au démarrage */
@keyframes th-apparait { from { opacity: 0; } to { opacity: 1; } }
.th-seuil__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--voile) 0%, color-mix(in srgb, var(--voile) 45%, transparent) 30%, color-mix(in srgb, var(--voile) 70%, transparent) 62%, var(--voile) 100%); }
.th-seuil__contenu { position: relative; padding-top: clamp(6rem, 18vh, 10rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 60ch; margin-inline: auto; text-align: center; }
.th-seuil--video .th-sur { color: var(--sur-encre); }
.th-seuil--video h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.06; margin: 0 0 var(--esp-2); text-wrap: balance; color: var(--sur-encre); }
.th-seuil--video .horaires-courtes, .th-seuil--video .horaires-courtes strong { color: var(--sur-encre); }
.th-seuil--video .th-actions { justify-content: center; }
.th-seuil--video .th-lien { color: var(--sur-encre); }
.th-seuil--video .th-lien:hover { color: var(--nuit-ambre); }
@media (prefers-reduced-motion: reduce) { .th-seuil__fond video { display: none; } }   /* l'affiche fixe suffit */
.th-sommaire-bande { padding: var(--esp-3) 0; border-bottom: 1px solid var(--bord); }
.th-sommaire--ligne { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: center; }
.th-sommaire--ligne a { font-size: clamp(1rem, 1.4vw, 1.15rem); }
/* En-tête posé sur la vidéo : transparent et clair en haut de page, normal dès qu'on descend (classe .pose du socle) */
/* l'en-tête reste dans le flux (sous le bandeau de démonstration) et le héros remonte dessous : la vidéo passe sous l'en-tête transparent */
:root { --th-entete: 70px; }
@media (max-width: 600px) { :root { --th-entete: 64px; } }
.th-entete { min-height: var(--th-entete); box-sizing: border-box; }
body.th-entete-sur-video header.site { position: sticky; top: 0; }
body.th-entete-sur-video .th-seuil--video { margin-top: calc(-1 * var(--th-entete)); }
body.th-entete-sur-video header.site:not(.pose) { background: linear-gradient(180deg, var(--voile), transparent); border-color: transparent; backdrop-filter: none; }
body.th-entete-sur-video header.site:not(.pose) :is(.logo, .logo small, .th-menu a:not(.btn)) { color: var(--sur-encre); }
body.th-entete-sur-video header.site:not(.pose) .th-nav__bouton { background: transparent; color: var(--sur-encre); border-color: var(--sur-encre); }
body.th-entete-sur-video .bandeau-demo { position: relative; z-index: 101; }

/* ---------- Images générées (Higgsfield) : formats et emplacements ---------- */
.th-photo--r169 { aspect-ratio: 16 / 9; }
.th-photo--r43 { aspect-ratio: 4 / 3; }
.th-photo--r34 { aspect-ratio: 3 / 4; }
.th-photo--r45 { aspect-ratio: 4 / 5; }
.th-table__photo { margin-top: var(--esp-3); }
.th-potager__photo { margin: 0 0 var(--esp-4); }
.th-cave__duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--esp-3); margin-top: var(--esp-4); align-items: start; }
@media (max-width: 760px) { .th-cave__duo { grid-template-columns: 1fr; } }
.th-nuit__detail { max-width: 300px; margin-top: var(--esp-3); }
.th-photo--pleine.th-photo--nuit { border: 0; }
.th-chambres-appel__photo { margin-top: var(--esp-4); }
.th-chambres-appel__photo .th-photo { max-width: 760px; }
.th-page__photo { margin-top: var(--esp-4); }
.th-carte-aparte__photo { margin-top: var(--esp-3); }
.th-provenance__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: var(--esp-4); align-items: start; }
@media (max-width: 860px) { .th-provenance__grille { grid-template-columns: 1fr; } }
.th-aparte__photo { margin-bottom: var(--esp-3); }
/* photos des chambres écrites par le bloc généré */
.chambre img { width: 100%; height: auto; border-radius: var(--rayon-petit); margin-bottom: var(--esp-2); }
.collection-7-chambres > .chambre-signature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--esp-4); align-items: center; }
.collection-7-chambres > .chambre-signature img { margin: 0; }
@media (max-width: 820px) { .collection-7-chambres > .chambre-signature { grid-template-columns: 1fr; } }