/* =================================================================
   LA BALSAMINE — Grand gîte de caractère à Lunéville
   Feuille de style globale
   -----------------------------------------------------------------
   Sommaire
   1.  Tokens (variables) & reset
   2.  Typographie & utilitaires
   3.  Boutons & liens
   4.  Header & navigation
   5.  Menu mobile
   6.  Footer
   7.  Hero
   8.  Bandes de chiffres-clés
   9.  Sections « split » (texte + image)
   10. Bande sombre signature
   11. Cartes chambres / lieux
   12. Prestations (amenities)
   13. Galerie (teaser + page) & lightbox
   14. Chambres : configuration des lits
   15. Lunéville & alentours (lieux + distances)
   16. Réservation / Contact (coordonnées + formulaire + carte)
   17. Animations au défilement
   18. Responsive
   ================================================================= */

/* 1. TOKENS & RESET ------------------------------------------------ */
:root{
  /*
   * CAMAÏEU DE BEIGES — une seule famille de teinte, aucun noir.
   * ------------------------------------------------------------------
   * Toute la charte tient sur une gamme chaude continue (teinte ~35°),
   * de la porcelaine à la terre d'ombre. Le point le plus profond,
   * --ink, n'est plus un quasi-noir (#1f1b18) mais un taupe profond :
   * les bandes sombres, le pied de page et les titres appartiennent
   * désormais au même camaïeu que les fonds, au lieu de trancher dessus.
   *
   * Les huit valeurs ci-dessous forment une échelle ordonnée : chaque
   * rôle du site pioche dans cette échelle et nulle part ailleurs.
   * Aucune couleur écrite en dur ne doit réapparaître dans les feuilles.
   *
   * Contrastes WCAG mesurés sur --paper (fond de page) :
   *   --ink   7,3:1   --ink-2 5,3:1   --taupe 4,7:1
   * et sur --ink (bandes profondes) :
   *   --cream 7,9:1   --sand 5,5:1
   */
  --ink:#574d40;        /* terre d'ombre : titres, bandes profondes, pied de page */
  --ink-2:#6e6252;      /* grège : texte courant */
  --paper:#f6f1e6;      /* ivoire : fond principal */
  --paper-2:#ede6d7;    /* grès clair : aplats secondaires */
  --cream:#fcf9f3;      /* porcelaine : cartes, texte posé sur --ink */
  --sand:#dfd2b8;       /* sable : accent lisible sur --ink */
  --taupe:#7e6845;      /* bronze : surtitres, liens, focus */

  /*
   * Composantes brutes des trois encres, pour composer des opacités sans
   * réécrire un triplet en dur. Une seule base de voile pour le héros, les
   * badges photo et la visionneuse : ces trois surfaces avaient auparavant
   * trois bruns différents (42,33,25 / 38,30,22 / 31,27,24).
   */
  --on-light:87,77,64;    /* --ink, pour les textes secondaires sur fond clair */
  --on-dark:252,249,243;  /* --cream, pour les textes secondaires sur fond profond */
  --veil:74,64,52;        /* terre profonde : voiles photographiques */

  /*
   * Deux niveaux d'atténuation seulement, l'un et l'autre au-dessus du
   * seuil AA sur --ink (5,1:1 et 6,1:1). Le site en comptait neuf
   * (.55 .6 .66 .7 .72 .78 .82 .84 .92), dont plusieurs sous le seuil.
   */
  --on-dark-soft:rgba(252,249,243,.84);
  --on-dark-muted:rgba(252,249,243,.72);

  /* Filets : le trait décoratif, et le trait porteur d'information
     (bordures de champs de formulaire) qui doit tenir le 3:1.

     --line est translucide pour se poser sur n'importe lequel des fonds.
     Le preset « Filet » de theme.json ne peut pas l'être : la palette de
     l'éditeur n'accepte qu'une couleur opaque. Il porte donc #d9d3c8, soit
     exactement rgba(87,77,64,.18) aplati sur --paper — de sorte qu'un filet
     choisi dans l'éditeur tombe sur le même trait que celui dessiné ici.
     Changer l'un des deux oblige à recalculer l'autre. */
  --line:rgba(87,77,64,.18);
  --line-strong:rgba(87,77,64,.62);
  --line-light:rgba(252,249,243,.18);
  --line-dark-strong:rgba(252,249,243,.55); /* contour de commande posé sur une photo */

  --maxw:1280px;
  --pad:clamp(20px,5vw,56px);
  /* Rythme vertical resserré : moins de « blancs » entre blocs (était 64–128). */
  --section-y:clamp(40px,5.2vw,72px);
  --section-y-tight:clamp(24px,3.2vw,40px);

  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Une seule durée par nature d'interaction (le site en comptait sept). */
  --t-ui:.25s;      /* couleurs, fonds, filets */
  --t-media:.7s;    /* zooms photographiques */
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

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

a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:500; margin:0; }

/* 2. TYPOGRAPHIE & UTILITAIRES ------------------------------------ */
.container{
  max-width:min(100%,var(--maxw));
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
/* Toute section qui n’est pas la première d’une page : top resserré
   (évite le double padding entre blocs WP parfois non-adjacents stricts). */
.entry-content .section ~ .section,
.wp-block-post-content .section ~ .section,
.stats ~ .section,
.labels-band ~ .section,
.home-gallery-section ~ .section,
.feature-dark ~ .section,
.section + .labels-band,
.section + .home-gallery-section{
  padding-top:var(--section-y-tight);
}
/*
 * Les bandes pleine largeur portent leur propre respiration intérieure : la
 * bande sombre par le padding de sa colonne de texte, les bandes crème et
 * encre par le .section qu'elles contiennent. Leur ajouter en plus le padding
 * de rythme ci-dessus ne les décalait que par le haut — jamais par le bas —
 * et leur contenu se retrouvait systématiquement désaxé : la photographie de
 * la bande sombre venait toucher le bord inférieur, l'appel à l'action se
 * tenait 84px sous le bord haut pour 44px au-dessus du bas.
 */
.section + .feature-dark,
.section + .section--ink,
.section + .section--cream{
  padding-top:0;
  padding-bottom:0;
}
.section--cream{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--ink{ background:var(--ink); color:var(--cream); }

/* Surtitre unique du site. Le héros utilisait autrefois une variante
   (12.5px / .16em / 400) : deux réglages pour un même rôle typographique.
   Une seule spécification, reprise par .hero__eyebrow. */
.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 12px;
}
.eyebrow--sand{ color:var(--sand); }

.title{
  font-family:var(--font-serif);
  font-weight:500;
  /* Échelle section unifiée (toutes pages) — entre large et x-large WP. */
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.12;
  margin:0;
  /* Évite les dernières lignes d'un seul mot sans casser les groupes de sens
     (« du XVIIIᵉ / siècle »), ce que produisait text-wrap:balance. */
  text-wrap:pretty;
}

.lead{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(21px,2.4vw,28px);
  line-height:1.5;
  margin:0 0 24px;
}

.body-text{
  font-size:17px;
  line-height:1.8;
  color:var(--ink-2);
  max-width:52ch;
  text-wrap:pretty;
}
.section--ink .body-text{ color:var(--on-dark-soft); }

.text-center{ text-align:center; }
.measure-center{ margin-left:auto; margin-right:auto; }

/* Chapô centré : à 52ch le paragraphe faisait cinq lignes centrées, nettement
   plus étroites que le .lead posé juste au-dessus — un empilement en escalier.
   Une mesure plus large le ramène à trois ou quatre lignes alignées sur la
   largeur du chapô italique. */
.body-text.measure-center{ max-width:min(100%,66ch); }

/* 3. BOUTONS & LIENS ---------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:17px 30px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  min-height:44px;
}
.btn--primary{ background:var(--ink); color:var(--cream); }
.btn--primary:hover{ background:var(--taupe); color:var(--cream); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ background:var(--taupe); color:var(--cream); }
.btn--ghost{ background:transparent; border-color:var(--line-dark-strong); color:var(--cream); }
.btn--ghost:hover{ background:var(--cream); color:var(--ink); }
.btn--ghost-ink{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost-ink:hover{ background:var(--ink); color:var(--cream); }

.link-arrow{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:6px;
  transition:color .25s ease;
}
.link-arrow:hover{ color:var(--taupe); }
.link-arrow::after{ content:" \00a0→"; }
/* La classe est portée par le <p>, la cible cliquable est le <a> qu'il
   contient : les 44px réservés ci-dessus ne s'appliquaient donc pas au lien,
   haut de 19px seulement. `stretch` lui fait occuper la hauteur de la ligne
   sans rien déplacer. */
.link-arrow > a{ align-self:stretch; display:flex; align-items:center; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center{ justify-content:center; }

/* 4. HEADER & NAVIGATION ------------------------------------------ */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(var(--on-dark),.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-ui) ease,background var(--t-ui) ease;
}
.site-header.is-scrolled{
  background:rgba(var(--on-dark),.97);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(var(--on-light),.5);
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand__logo{ height:46px; width:auto; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:.15em;
  white-space:nowrap;
}
.brand__tag{
  font-size:10px;
  letter-spacing:.34em;
  color:var(--taupe);
  margin-top:5px;
  white-space:nowrap;
}

.main-nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.main-nav a{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  /* Le gris à 72 % d'encre plafonnait à 3,7:1 : sous le seuil AA pour du
     petit texte capitalisé. Le rôle « texte secondaire » a déjà un token. */
  color:var(--ink-2);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color var(--t-ui) ease;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--taupe); }

.header-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }

.lang{ display:flex; align-items:center; gap:7px; font-size:12px; letter-spacing:.1em; }
.lang a,.lang span{ color:var(--ink-2); }
.lang .sep{ color:var(--line); }
.lang a:hover{ color:var(--ink); }
.lang [aria-current="true"]{ color:var(--ink); font-weight:500; }

.btn-reserve{
  display:inline-flex;
  align-items:center;
  background:var(--ink);
  color:var(--cream);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:13px 22px;
  min-height:44px;
  transition:background .25s ease;
}
.btn-reserve:hover{ background:var(--taupe); }

/* 5. VERROU DE DEFILEMENT ----------------------------------------- */
/*
 * Le burger et le menu plein ecran de la maquette statique vivaient ici
 * (.burger, .mobile-menu, .mobile-nav, .mobile-menu__lang/__cta, environ
 * soixante-dix lignes). Aucun de ces elements n'existe plus : le menu mobile
 * est celui du bloc `core/navigation` (overlayMenu:"mobile"), mis en forme
 * dans wordpress.css sous @media (max-width: 1000px). Les regles orphelines
 * decrivaient donc un composant absent du DOM comme de la base — de quoi
 * egarer la lecture du chrome mobile.
 *
 * Seule survit la ligne ci-dessous, bien vivante : assets/js/site.js pose
 * `menu-open` sur <body> a l'ouverture de la visionneuse pour bloquer le
 * defilement de l'arriere-plan.
 */
body.menu-open{ overflow:hidden; }

/* 6. FOOTER ------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--cream); }
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,5vw,64px) var(--pad) clamp(28px,3.5vw,40px);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(40px,5vw,64px);
}
/* Le bloc de marque du pied de page reprend les graisses de l'en-tête :
   il héritait sinon du 300 et de l'interligne 1.6 du corps de texte. */
.footer-brand__name{ font-family:var(--font-serif); font-size:26px; font-weight:600; letter-spacing:.14em; line-height:1.1; }
.footer-brand__tag{ font-size:10px; letter-spacing:.34em; color:var(--sand); margin-top:9px; line-height:1.2; }
.footer-brand__blurb{
  font-size:15px; line-height:1.7;
  color:var(--on-dark-muted);
  margin:22px 0 0; max-width:34ch;
}
.footer-col__title{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); margin-bottom:20px;
}
.footer-nav{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:11px; }
.footer-nav a{ font-size:15px; color:var(--on-dark-soft); }
.footer-nav a:hover{ color:var(--cream); }

.footer-contact{ display:flex; flex-direction:column; gap:13px; font-size:15px; color:var(--on-dark-soft); }
.footer-contact a:hover{ color:var(--cream); }

/* Réseaux sociaux : sous le blurb de marque, dans le bloc identité — c'est
   la même chose qu'un logo et une adresse, une façon de reconnaître la maison.
   Deux pastilles bordées comme les cartouches de classement du pied de page :
   le pied de page n'a qu'un seul dessin de cadre. */
.footer-social{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.footer-social__item{ margin:0; }
.footer-social__link{
  display:inline-flex; align-items:center; gap:9px;
  min-height:40px; padding:9px 15px;
  border:1px solid var(--line-light);
  font-size:13px; letter-spacing:.06em;
  color:var(--on-dark-soft);
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.footer-social__link:hover,
.footer-social__link:focus-visible{
  color:var(--cream);
  border-color:var(--sand);
  background:rgba(var(--on-dark),.06);
}
.footer-social__icon{ display:inline-flex; flex:0 0 auto; }

.footer-labels{ display:flex; flex-direction:column; gap:14px; }
.footer-label{ border:1px solid var(--line-light); padding:14px 16px; }
.footer-label__big{ font-family:var(--font-serif); font-size:20px; font-weight:500; line-height:1.2; }
.footer-label__small{ font-size:11px; letter-spacing:.06em; color:var(--on-dark-muted); margin-top:5px; line-height:1.3; }

/* Bandeau partenaires (PETR / MDT / LEADER / UE) — le bandeau est entièrement
   décrit dans wordpress.css : sa mise en forme ne tient que par des sélecteurs
   de wrappers Gutenberg (.wp-block-image, .wp-block-group) et par les
   neutralisations !important des styles du cœur. Le dupliquer ici faisait
   diverger les deux copies. Seul le filet de séparation reste ci-dessus, sur
   .footer-grid / .footer-partners. */

.footer-legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-top:28px; font-size:12px; color:var(--on-dark-muted);
}
.footer-legal a{ border-bottom:1px solid var(--line-light); }
.footer-legal a:hover{ color:var(--cream); }

/* 7. HERO --------------------------------------------------------- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  color:var(--cream);
  overflow:hidden;
}
/*
 * Hauteur du héros d'accueil.
 * La bande suivait la hauteur de fenêtre seule (78vh) : sur un écran large elle
 * s'étirait jusqu'à 2,4:1, et la façade — un bâtiment plus haut que large — s'y
 * réduisait à une tranche de mur. En suivant aussi la largeur, la bande garde un
 * rapport voisin de celui de la photographie (1,55:1), et le recadrage ne coûte
 * plus qu'une marge de quelques pour cent.
 */
.hero--home{ min-height:min(clamp(520px,54vw,880px),88vh); }
.hero--page{ min-height:min(48vh,440px); }
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  z-index:0;
}
/* La photographie du héros d'accueil est recadrée à la prise de vue
   (bin/make-hero-facade-crop.php) : elle se pose donc centrée, sans décalage. */
.hero--home .hero__img{ object-position:center center; }
.hero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/*
 * Voile photographique — terre d'ombre translucide, jamais un noir.
 * Deux dégradés croisés : l'un ancre la colonne de texte à gauche, l'autre
 * assoit le bas de la bande. Là où les deux se superposent (bloc de titre et
 * d'appels à l'action), l'opacité cumulée atteint ~0,85 : la porcelaine y passe
 * 6,2:1. Le quart supérieur droit reste presque nu, et la façade garde sa
 * lumière de fin de journée.
 */
.hero--home .hero__veil{
  background:
    linear-gradient(90deg,rgba(var(--veil),.60) 0%,rgba(var(--veil),.30) 42%,rgba(var(--veil),0) 72%),
    linear-gradient(180deg,rgba(var(--veil),.34) 0%,rgba(var(--veil),.14) 30%,rgba(var(--veil),.46) 62%,rgba(var(--veil),.70) 100%);
}
.hero--page .hero__veil{
  background:
    linear-gradient(90deg,rgba(var(--veil),.54) 0%,rgba(var(--veil),.26) 44%,rgba(var(--veil),0) 74%),
    linear-gradient(180deg,rgba(var(--veil),.30) 0%,rgba(var(--veil),.30) 46%,rgba(var(--veil),.66) 100%);
}
.hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:clamp(88px,12vh,140px) var(--pad) clamp(36px,5.5vw,72px);
  animation:balfade .9s ease both;
  /* Ne pas s’étirer : le flex justify-end place le bloc bas de hero. */
  flex:0 0 auto;
  height:auto;
  min-height:0;
}
.hero--page .hero__inner{ padding-top:clamp(56px,8vh,88px); padding-bottom:clamp(28px,3.5vw,44px); }
/* Même spécification que .eyebrow (voir §2) : un seul surtitre pour le site. */
.hero__eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--sand);
  margin:0 0 14px;
  max-width:none;
  /* Une seule ombre portée pour tout le texte du héros : trois couches
     empilées revenaient à repeindre un fond noir derrière le surtitre. */
  text-shadow:0 1px 16px rgba(var(--veil),.75);
}
.hero__title{
  font-family:var(--font-serif); font-weight:500;
  /* Échelle display proportionnée (plus de 80px sur H1 multi-ligne long). */
  font-size:clamp(28px,3.8vw,48px); line-height:1.12;
  margin:0; max-width:22ch; letter-spacing:.005em;
  text-wrap:pretty;
  text-shadow:0 1px 16px rgba(var(--veil),.75);
}
.hero--page .hero__title{ font-size:clamp(28px,3.6vw,46px); max-width:18ch; line-height:1.1; }
/* Chapô du héros.
   À 48ch il mesurait 501px, soit exactement la largeur du titre (504px) : les
   deux blocs formaient un seul rectangle gris, et la coupe tombait sur « au
   cœur » puis « et du » avec une dernière ligne 130px plus courte. À 46ch les
   trois lignes ne varient plus que de 59px et le pavé se tient. */
.hero__sub{
  font-family:var(--font-sans);
  font-size:clamp(15px,1.35vw,18px); line-height:1.6;
  max-width:46ch; margin:26px 0 0;
  color:var(--cream);
  text-wrap:pretty;
  text-shadow:0 1px 16px rgba(var(--veil),.75);
}
/* Les boutons se retrouvaient collés au chapô (écart réel mesuré : 0px), les
   marges natives étant neutralisées par les wrappers Gutenberg. */
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

@keyframes balfade{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* 8. BANDES DE CHIFFRES-CLÉS -------------------------------------- */
.stats{ background:var(--ink); color:var(--cream); }
.stats__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.stats__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:1px;
  background:var(--line-light);
}
.stat{ background:var(--ink); padding:26px 18px; text-align:center; }
/*
 * Chiffres-clés : composés dans la police de texte, pas dans le serif.
 * Cormorant Garamond ne livre que des chiffres elzéviriens (bas de casse) et
 * n'expose aucune variante « lining » — `font-variant-numeric` reste sans
 * effet. Dans une rangée que l'œil compare, cela donnait : « 12 » haut de 12px
 * d'encre contre 20px pour « 320 », « 6 » posé sur la ligne de base tandis que
 * « 3 » et « 5 » descendaient de 7px. Jost aligne les cinq nombres sur une même
 * hauteur et une même ligne de base, et rejoint les libellés déjà en Jost.
 */
.stat__value{
  font-family:var(--font-sans);
  font-size:32px; font-weight:300; line-height:1; letter-spacing:.02em;
  color:var(--sand);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-top:9px; color:var(--on-dark-muted); }

/* variante claire (page chambres) */
/* La bande elle-même repasse au papier. Elle restait à l'encre alors que ses
   cellules étaient claires : la grille étant tenue dans la colonne de contenu,
   le fond sombre dépassait de part et d'autre en deux oreilles brunes, et le
   bloc clair semblait posé de travers sur une barre foncée. */
.stats--paper{ background:var(--paper); }
.stats--paper .stats__grid{ background:var(--line); border:1px solid var(--line); gap:1px; }
.stats--paper .stat{ background:var(--paper); }
.stats--paper .stat__value{ color:var(--ink); }
.stats--paper .stat__label{ color:var(--ink-2); }

/* 9. SECTIONS « SPLIT » ------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
.split__text .title{ margin-bottom:26px; max-width:22ch; }
.split__text .body-text{ margin:0 0 20px; }
.split__text .body-text + .body-text{ margin-bottom:32px; }
.split__media{ position:relative; }
.split__media img{ width:100%; object-fit:cover; }
.ratio-4-5{ aspect-ratio:4/5; }
.ratio-5-4{ aspect-ratio:5/4; }

.salon-caption{
  position:absolute; bottom:-22px; left:-22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:18px 24px; max-width:230px;
  font-family:var(--font-serif); font-style:italic;
  font-size:19px; line-height:1.3;
}

/* 10. BANDE SOMBRE SIGNATURE -------------------------------------- */
.feature-dark{ background:var(--ink); color:var(--cream); }
/* La bande signature s'alignait sur 1280px sans gouttière : son image démarrait
   56px à gauche de la colonne de contenu du reste du site. Le padding la remet
   sur la même verticale que les titres qui l'encadrent. */
.feature-dark__grid{
  max-width:var(--maxw); margin:0 auto;
  padding-left:var(--pad); padding-right:var(--pad);
  display:grid; grid-template-columns:1fr 1fr;
  /* La photographie donne sa hauteur à la bande ; le texte se centre à côté.
     En `stretch`, c'était l'inverse : la colonne de texte imposait sa hauteur
     à la photographie (voir ci-dessous). */
  align-items:center;
}
/*
 * Le cadre de la photographie tient son propre rapport.
 *
 * Il était étiré sur la hauteur de la colonne de texte : 584 × 303, soit
 * 1,93:1, pour des clichés en 4:3. `object-fit:cover` amputait alors 31 % de
 * la hauteur de l'image — dans la salle à manger, le lustre passait à la
 * trappe en haut et les chaises étaient tranchées en plein dossier en bas.
 * En 3:2 la perte tombe à 11 % : la pièce se lit du plafond au sol.
 */
.feature-dark__media{ aspect-ratio:3/2; min-height:0; }
.feature-dark__media img{ width:100%; height:100%; object-fit:cover; }
.feature-dark__text{
  padding:clamp(32px,4vw,52px) 0 clamp(32px,4vw,52px) clamp(24px,4vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.feature-dark__text .title{ font-size:clamp(28px,3.4vw,42px); line-height:1.12; margin-bottom:18px; }
.feature-dark__text .body-text{ max-width:50ch; margin:0 0 18px; color:var(--on-dark-soft); }
.feature-dark__text .link-arrow{ align-self:flex-start; margin-top:14px; }

/* 11. CARTES (chambres / lieux) ----------------------------------- */
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px 18px; margin-bottom:clamp(22px,2.8vw,32px);
}
.section-head .title{ max-width:22ch; }

/* En-tête galerie accueil : titre + lien (plus de chapô lead) — rangée compacte. */
.section-head.home-gallery-head{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px 20px;
  margin-bottom:0;
  padding-bottom:clamp(16px,2vw,24px);
}
.section-head.home-gallery-head .title{ max-width:none; }
.section-head.home-gallery-head .link-arrow{ margin:0; }

/* Section six chambres (accueil) : en-tête + piste centrés sur grand écran. */
.section.reveal > .section-head:has(.section-head__title){
  width:100%;
  max-width:100%;
}
.section-head__title{
  flex:1 1 auto;
  min-width:min(100%, 280px);
  text-align:left;
}
.section-head:has(.section-head__title){
  align-items:flex-end;
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(20px,2.4vw,34px);
}

/* Carrousel chambres : ne jamais rester en display:grid (casse le viewport). */
.cards-grid.lb-carousel,
.lb-carousel.cards-grid{
  display:block;
  grid-template-columns:none;
  gap:0;
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
.card{ background:var(--cream); border:1px solid var(--line); display:flex; flex-direction:column; }
.card--link{ cursor:pointer; }
.card__media{ overflow:hidden; aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.card--link:hover .card__media img,
.card__media:hover img{ transform:scale(1.05); }
.card__body{ padding:24px 24px 28px; }
.card__level{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.card__name{
  font-family:var(--font-serif); font-weight:500; font-size:26px; margin:10px 0;
  /* Sans cette valeur le titre reprenait l'interligne 1.6 des titres globaux :
     deux fois plus aéré que .room-card__name pour le même objet. */
  line-height:1.15;
  text-wrap:pretty;
}
.card__desc{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:0; }

/* grille chambres détaillée (page chambres) */
.room-card .card__media{ aspect-ratio:3/2; }
.room-card .card__body{ padding:26px 26px 30px; }
.room-card__head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.room-card__name{ font-family:var(--font-serif); font-weight:500; font-size:26px; margin:0; line-height:1.15; text-wrap:pretty; }
.room-card__level{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); white-space:nowrap; }
.room-card__desc{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:14px 0 18px; }
.room-card__beds{ font-size:12px; letter-spacing:.06em; color:var(--ink); padding-top:14px; border-top:1px solid var(--line); }

/* 12. PRESTATIONS ------------------------------------------------- */
.amenities-head{ margin-bottom:clamp(22px,2.8vw,32px); text-align:center; }
.amenities-head .title,
.amenities-head .eyebrow{ margin-left:auto; margin-right:auto; text-align:center; }
.amenities-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(28px,3vw,52px);
}
.amenity-group__title{
  font-family:var(--font-serif); font-size:20px; font-weight:500; line-height:1.2;
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px;
}
.amenity-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.amenity-list li{ font-size:15px; color:var(--ink-2); display:flex; gap:11px; align-items:baseline; }
.amenity-list li::before{ content:"◆"; color:var(--taupe); font-size:10px; line-height:1.7; }

/* 13. GALERIE & LIGHTBOX ------------------------------------------ */
/* teaser accueil (grille statique si pas de marquee) */
.gallery-teaser{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:8px; padding:0 8px;
}
.gallery-teaser a{ overflow:hidden; aspect-ratio:1/1; }
.gallery-teaser img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.gallery-teaser a:hover img{ transform:scale(1.07); }

/* Marquee : ne pas hériter du grid teaser (sinon colonnes fantômes + gros trou). */
.gallery-teaser.lb-marquee,
.gallery-teaser[data-lb-marquee],
.lb-marquee.gallery-teaser{
  display:block;
  grid-template-columns:none;
  gap:0;
  padding:0;
  overflow:hidden;
  width:100%;
}

/* page galerie : masonry */
.gallery-grid{ column-count:3; column-gap:12px; }
.gallery-item{
  display:block; width:100%; padding:0; margin:0 0 12px; border:none; background:none;
  break-inside:avoid; overflow:hidden; cursor:pointer; position:relative;
}
.gallery-item img{
  width:100%; display:block;
  transition:transform .7s ease,filter .4s ease;
  filter:saturate(.96);
}
.gallery-item:hover img,
.gallery-item:focus-visible img{ transform:scale(1.04); filter:saturate(1.05); }
.gallery-item:focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; }

/* page galerie : sections maison uniquement, sans légendes sous les photos */
.gallery-page{
  padding-top:clamp(22px,2.8vw,36px);
  padding-bottom:clamp(28px,3.5vw,48px);
}
.gallery-sections{ padding-bottom:0; }
.gallery-page .gallery-section{
  max-width:none;
  margin:0;
  padding:0;
}
.gallery-section + .gallery-section{ margin-top:clamp(28px,3.5vw,48px); }
.gallery-section__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.gallery-section__title{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(20px,2.2vw,28px); line-height:1.12; margin:0; color:var(--ink);
}
.gallery-section__rule{ display:none; }
.gallery-item__cap,
.gallery-item .gallery-item__cap{ display:none !important; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:90;
  background:rgba(var(--veil),.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,80px);
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:100%; max-height:84vh; object-fit:contain; box-shadow:0 30px 80px rgba(var(--veil),.4); }
.lightbox__close{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:var(--cream);
  font-size:40px; line-height:1; cursor:pointer; padding:6px 12px;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  /* Même commande que les flèches de la galerie navigable (.lb-gallery__btn)
     et du carrousel (.lb-carousel__btn) : même fond, même filet, même cible
     de 44px — trois flèches « précédent / suivant » du site, un seul dessin. */
  background:rgba(var(--veil),.44); border:1px solid var(--line-dark-strong);
  color:var(--cream); width:44px; height:44px;
  cursor:pointer; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-ui) ease, border-color var(--t-ui) ease;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible{ background:var(--taupe); border-color:var(--taupe); outline:none; }
.lightbox__prev{ left:18px; }
.lightbox__next{ right:18px; }
/* Captions under enlarged photos are deliberately empty (alt stays on the img). */
.lightbox__caption{ display:none !important; }

/* 14. CHAMBRES : CONFIGURATION DES LITS --------------------------- */
.bedconfig{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px); align-items:center;
}
.bedconfig__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.bedconfig__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .8s ease;
}
.bedconfig__media img.is-hidden{ opacity:0; }
.bedconfig__badge{
  position:absolute; left:18px; bottom:18px;
  /* Même fond que le compteur de la galerie navigable : deux pastilles
     d'information posées sur une photographie. */
  background:rgba(var(--veil),.78); color:var(--cream);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:9px 16px;
}
.bedconfig__text .title{ font-size:clamp(28px,3.4vw,42px); line-height:1.12; margin-bottom:18px; }
.bedconfig__text .body-text{ max-width:46ch; margin:0 0 30px; }
.bedconfig__toggle{ display:inline-flex; border:1px solid var(--ink); background:var(--paper); }
/* Le bloc ne produit que des <a class="wp-block-button__link"> : les trois
   regles visant un <button> etaient inoperantes. La mise en forme reelle vit
   dans wordpress.css (.bedconfig__toggle .wp-block-button__link). */
.bedconfig__toggle button{
  border:none; background:transparent; color:var(--ink);
  font-family:var(--font-sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 24px; min-height:44px; cursor:pointer;
  transition:background .3s ease,color .3s ease;
}
.bedconfig__toggle button + button{ border-left:1px solid var(--ink); }
.bedconfig__toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--cream); }
.bedconfig__caption{ font-size:13px; color:var(--ink-2); margin-top:18px; min-height:1.2em; }

/* 15. LUNÉVILLE & ALENTOURS --------------------------------------- */
/* Les deux listes de lieux de la page « Lunéville & alentours » partagent une
   seule trame : en auto-fit, la première tombait sur 4 colonnes et la seconde
   sur 3, avec des cartes de largeurs différentes empilées l'une sur l'autre. */
.places-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);
}
.place-card{ background:var(--cream); border:1px solid var(--line); }
.place-card__media{ overflow:hidden; aspect-ratio:3/2; }
.place-card__media img{ width:100%; height:100%; object-fit:cover; }
.place-card__body{ padding:22px 24px 26px; }
.place-card__tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); margin-bottom:10px; }
.place-card__name{ font-family:var(--font-serif); font-weight:500; font-size:23px; margin:0 0 10px; line-height:1.15; text-wrap:pretty; }
.place-card__desc{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:0; }
.place-card__credit{
  font-size:11px;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:16px 0 0;
}
.place-card__credit a{ border-bottom:1px solid var(--line); }
.place-card__credit a:hover{ color:var(--taupe); }

.distances{ max-width:960px; margin:0 auto; }
.distances .title{ text-align:center; font-size:clamp(28px,3.4vw,42px); line-height:1.12; margin-bottom:clamp(22px,2.8vw,32px); }
.distance-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.distance-row__name{ font-size:17px; color:var(--ink); }
.distance-row__dist{ font-size:13px; letter-spacing:.1em; color:var(--taupe); white-space:nowrap; }

/* 16. RÉSERVATION / CONTACT --------------------------------------- */
/* Deux colonnes égales : contact+carte | formulaire+tarifs.
   align-items:start évite d’étirer la colonne courte (vide à droite). */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,5vw,72px);
  align-items:start;
}
.contact-grid > .wp-block-group{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
}
.contact-hero{
  padding:clamp(32px,4vw,48px) var(--pad) clamp(12px,2vw,20px);
}
.contact-hero .title{
  font-size:clamp(28px,3.6vw,46px);
  max-width:18ch;
  line-height:1.12;
  margin-bottom:16px;
}
.contact-section{
  padding:clamp(28px,3.5vw,44px) var(--pad) clamp(40px,5vw,64px);
}
.contact-subtitle{
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 0;
}
.contact-details{ display:flex; flex-direction:column; gap:24px; }
.detail{ border-bottom:1px solid var(--line); padding-bottom:24px; }
.detail__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px; }
.detail__value{ font-family:var(--font-serif); font-size:23px; line-height:1.3; }
.detail__value a:hover{ color:var(--taupe); }
.detail__sub{ font-size:13px; color:var(--ink-2); margin-top:5px; }

/* Encart tarifs : sous le formulaire (colonne droite), compact et lisible. */
.rate-box{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(22px,3vw,28px);
  width:100%;
  box-sizing:border-box;
}
.rate-box__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sand); margin-bottom:10px; }
.rate-box__value{
  font-family:var(--font-serif);
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.2;
  margin-bottom:10px;
  text-wrap:pretty;
  max-width:22ch;
}
.rate-box__note{ font-size:13px; line-height:1.7; color:var(--on-dark-soft); margin:0; max-width:42ch; }
.rate-box__link{ display:inline-block; margin-top:16px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); border-bottom:1px solid currentColor; padding-bottom:4px; }
.rate-box__link:hover{ color:var(--cream); }

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:clamp(36px,6vw,48px); }
}

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.field input,.field textarea{
  font-family:var(--font-sans); font-size:15px; font-weight:300;
  padding:13px 14px;
  /* --line (contour décoratif, ~1,3:1 sur --cream) ne suffit pas à marquer le
     contour d'un champ de saisie : --line-strong tient le 3:1 requis pour un
     composant d'interface (WCAG 1.4.11). */
  border:1px solid var(--line-strong);
  background:var(--cream); color:var(--ink); width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field textarea:focus{ outline:2px solid var(--taupe); outline-offset:0; border-color:var(--taupe); }
.form-note{ font-size:12px; line-height:1.6; color:var(--ink-2); margin:0; }
.contact-form .btn{ width:100%; border:none; }

/* Google Maps : couleurs d’origine (plus de filtre gris/sépia). */
.map-embed iframe,
.contact-map-card iframe,
.lb-map-card__frame,
.contact-map-card iframe{
  filter:none;
}


.map-embed{ border-top:1px solid var(--line); }
.map-embed iframe{ display:block; width:100%; height:340px; border:0; }
.contact-map-card{
  background:var(--cream);
  border:1px solid var(--line);
}
.contact-map-card iframe{
  display:block;
  width:100%;
  height:260px;
  border:0;
}
.contact-map-card__link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.contact-map-card__link:hover{ color:var(--taupe); }

/* 17. ANIMATIONS AU DÉFILEMENT ------------------------------------ */
/* Le masquage initial n'est appliqué QUE si JavaScript est actif
   (classe .js posée sur <html>). Sans JS, le contenu reste visible. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease,transform .8s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* 17bis. PAGES LÉGALES (mentions légales / CGV) ------------------- */
.legal-hero{ padding-bottom:0; }
.legal-main{ padding-top:clamp(40px,6vw,72px); padding-bottom:var(--section-y); }
.legal-wrap{ max-width:760px; margin:0 auto; }
.legal-updated{ font-size:13px; letter-spacing:.06em; color:var(--taupe); margin:0 0 44px; }
.legal-block{ margin:0 0 40px; }
.legal-block:last-child{ margin-bottom:0; }
.legal-block h2{
  font-size:clamp(22px,2.6vw,30px); line-height:1.16; margin:0 0 16px;
  padding-top:24px; border-top:1px solid var(--line);
}
.legal-block--plain h2{ padding-top:0; border-top:0; }
.legal-block h3{
  font-family:var(--font-sans); font-weight:500; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--taupe);
  margin:24px 0 10px;
}
.legal-block p{ font-size:17px; line-height:1.8; color:var(--ink-2); margin:0 0 14px; max-width:70ch; }
.legal-block p:last-child{ margin-bottom:0; }
.legal-block ul{ margin:0 0 16px; padding-left:1.2em; max-width:70ch; }
.legal-block li{ font-size:17px; line-height:1.8; color:var(--ink-2); margin-bottom:6px; }
.legal-block strong{ font-weight:500; color:var(--ink); }
/* Tableau d'identité légale.
   La migration vers Gutenberg a remplacé les <dt>/<dd> par de simples groupes
   sans classe : les règles ci-dessous ne s'appliquaient plus et chaque valeur
   démarrait à une abscisse différente, au lieu de former une colonne. Les
   sélecteurs structurels ciblent les deux cellules quelle que soit la balise,
   et la distinction libellé / valeur est rétablie. */
.legal-id{ margin:0; border-top:1px solid var(--line); }
.legal-id > div{ display:flex; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.legal-id dt,
.legal-id > * > .legal-id__term,
.legal-id > * > *:first-child{
  flex:0 0 210px;
  margin:0;
  font-size:13px; line-height:1.6; letter-spacing:.06em;
  text-transform:uppercase; color:var(--taupe);
}
.legal-id dd,
.legal-id > * > .legal-id__desc,
.legal-id > * > *:nth-child(2){
  flex:1 1 auto; min-width:0;
  margin:0; font-size:17px; line-height:1.6; color:var(--ink);
  text-transform:none; letter-spacing:normal;
}
.legal-id > * > * > p{ margin:0; font-size:inherit; line-height:inherit; color:inherit; }
.legal-id > * > * > p + p{ margin-top:4px; }
.legal-todo{ color:var(--taupe); font-style:italic; }
.legal-download{ margin-top:28px; }
@media (max-width:600px){
  .legal-id > div{ flex-direction:column; gap:3px; padding:11px 0; }
  .legal-id dt,
  .legal-id > * > *:first-child{ flex-basis:auto; }
}

/* 18. RESPONSIVE -------------------------------------------------- */
@media (max-width:1023px){
  .feature-dark__grid{ grid-template-columns:1fr; }
  /* Même rapport qu'en deux colonnes : la photographie ne doit pas se recadrer
     autrement selon la largeur de l'écran. */
  .feature-dark__media{ aspect-ratio:3/2; min-height:0; }
  .gallery-grid{ column-count:2; }
}

/* Le passage au menu déroulant sous 1000px est entièrement traité dans
   wordpress.css : c'est là que vivent le bouton du bloc `core/navigation`,
   l'overlay et le masquage de .header-actions.
   La règle héritée qui se trouvait ici masquait `.main-nav` — donc aussi le
   <ul> du menu, WordPress recopiant la className du bloc sur les deux — et
   contraignait wordpress.css à la réafficher en `!important`. */

@media (max-width:900px){
  .places-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px){
  .places-grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .split,
  .bedconfig{ grid-template-columns:1fr; }
  .split__media{ order:-1; }
  .split--media-last .split__media{ order:0; }
  .salon-caption{ left:0; bottom:16px; }
  .feature-dark__text{ order:1; }
}

/* Bande de chiffres-clés : jamais de case vide en fin de rangée.
   Elle sert deux jeux — 5 valeurs (accueil) et 6 (page chambres) — et en
   `auto-fit` le 5e bloc se retrouvait seul face à trois cases vides entre 600
   et 1000px. Sur 6 colonnes, 3 blocs de 2 puis 2 blocs de 3 remplissent les
   deux rangées ; les sélecteurs ne visent la seconde rangée que s'il y a
   exactement cinq blocs, la série de six restant en 3 + 3. */
@media (min-width:601px) and (max-width:1000px){
  .stats__grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .stats__grid > .stat{ grid-column:span 2; }
  .stats__grid > .stat:nth-child(4):nth-last-child(2),
  .stats__grid > .stat:nth-child(5):nth-last-child(1){ grid-column:span 3; }
}

@media (max-width:600px){
  .gallery-grid{ column-count:1; }
  .form-row{ grid-template-columns:1fr; }
  /* Deux colonnes : un 5e bloc impair prend toute la largeur. */
  .stats__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats__grid > .stat:last-child:nth-child(odd){ grid-column:1 / -1; }
  /* En colonne, le `justify-content:space-between` posé par la mise en page
     flex de Gutenberg ne gouverne plus que l'axe vertical : sans consigne
     d'axe transverse, les deux lignes héritaient du centrage et la mention
     légale se retrouvait centrée sous un copyright aligné à gauche. */
  .footer-legal{ flex-direction:column; align-items:flex-start; gap:8px; }
  /* En portrait la bande n'a plus besoin de suivre la largeur : la photographie
     y est déjà plus haute que le cadre. On la borne pour que le premier écran
     montre aussi le début de la page. */
  .hero--home{ min-height:min(64vh,520px); }
  /* Cadre portrait sur une photographie en bande : au centre exact, la coupe
     tombait sur la descente de gouttière. On recentre sur la porte cochère et
     les travées qui l'encadrent. */
  .hero--home .hero__img{ object-position:40% center; }
  .hero__inner{ padding-top:clamp(72px,14vh,110px); }
  .hero__title{ max-width:100%; }
  /* Le surtitre du héros est la seule ligne d'interlettrage large qui doive
     tenir sur une seule ligne à 390px : on resserre plutôt que de renvoyer
     « France » seul à la ligne. */
  .hero__eyebrow{ font-size:11px; letter-spacing:.16em; }
  /* Boutons empilés : même largeur, sinon le bord droit est en escalier. */
  .hero__actions .btn,
  .hero__actions .wp-block-button,
  .hero__actions .wp-block-button__link{ width:100%; text-align:center; }
  .room-card__head{ flex-direction:column; align-items:flex-start; gap:4px; }
  .room-card__level{ white-space:normal; }
  .contact-map-card iframe{ height:230px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:380px){
  .brand__name{ font-size:19px; }
  .brand__tag{ letter-spacing:.26em; font-size:10px; }
  .brand__logo{ height:40px; }
}

/* accessibilité : mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .card--link:hover .card__media img,
  .card__media:hover img,
  .gallery-item:hover img,
  .gallery-teaser a:hover img{ transform:none; }
}

/* focus visible global */
a:focus-visible,button:focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; }

/*
 * Contextes sombres : anneau de focus et survol de lien en --sand, pas --taupe.
 * ------------------------------------------------------------------
 * --taupe sur --ink mesure 1,56:1 — bien en dessous du 3:1 requis pour un
 * indicateur de focus (et du 4,5:1 pour un texte de lien au survol). C'était
 * déjà le traitement de .btn--primary / .btn-reserve ; il est généralisé ici
 * à tous les blocs qui posent un fond --ink (bande signature, pied de page,
 * menu plein écran, bande de chiffres, CTA sombre) et à la photographie du
 * héros, assombrie par un voile de même famille.
 */
.section--ink a:focus-visible,
.section--ink button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.feature-dark a:focus-visible,
.feature-dark button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.btn--primary:focus-visible,
.btn-reserve:focus-visible{ outline-color:var(--sand); }

.section--ink .link-arrow:hover,
.site-footer .link-arrow:hover,
.feature-dark .link-arrow:hover,
.hero .link-arrow:hover{ color:var(--sand); }

/* 19. GABARITS DE REPLI (404, recherche, index, archive, single) ---
   Les pages éditoriales composent elles-mêmes leur gouttière avec
   `.container .section`. Les cinq gabarits de repli n'ont pas de contenu
   éditable : ils portaient `.lb-section` / `.lb-kicker`, deux classes sans
   aucune règle — le titre se collait au header et le bouton au pied de page.
   Une seule déclaration leur rend la trame du site. */
.lb-section{
  max-width:min(100%,var(--maxw));
  margin:0 auto;
  padding:var(--section-y) var(--pad);
}
/* Même spécification que .eyebrow (§2) : un seul surtitre pour le site. */
.lb-kicker{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 12px;
}

/* 20. BANDEAU DE CONSENTEMENT ------------------------------------- */
/* Une barre basse, pas une fenêtre modale : aucun voile, le contenu reste
   lisible et défilable derrière elle. Elle n'a pas de croix — une croix ne
   vaut pas consentement, et son absence évite de le laisser croire.

   Les deux commandes sortent de `.btn` : même boîte, même corps de texte,
   même graisse, un clic chacune. Seul l'aplat les distingue (`--primary`
   contre `--ghost-ink`), et les deux tiennent au-delà de 7:1 de contraste.
   La condition posée par la CNIL — refuser aussi facile qu'accepter — est
   tenue sur ce qui se mesure : lisibilité, taille, nombre de gestes. Ne pas
   atténuer `--ghost-ink` ni rétrécir sa boîte pour « aider » l'acceptation,
   ce serait franchir la ligne.

   z-index 80 : au-dessus de l'en-tête collant (60), sous la visionneuse
   (90), qui doit pouvoir la recouvrir. */
.consent-bar{
  position:fixed;
  inset:auto 0 0;
  z-index:80;
  background:var(--cream);
  border-top:1px solid var(--line);
}
.consent-bar[hidden]{ display:none; }
.consent-bar__inner{
  max-width:min(100%,var(--maxw));
  margin:0 auto;
  padding:16px var(--pad);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.consent-bar__text{
  margin:0;
  max-width:64ch;
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
}
.consent-bar__more{ color:var(--taupe); border-bottom:1px solid currentColor; }
.consent-bar__actions{ display:flex; gap:12px; flex-shrink:0; }
.consent-bar__btn{ padding:12px 22px; }

/* Sous 640 px, les deux boutons passent la largeur et se partagent la
   ligne à parts égales : la symétrie doit tenir aussi au téléphone. */
@media (max-width:640px){
  .consent-bar__actions{ width:100%; }
  .consent-bar__btn{ flex:1 1 0; }
}