/* ==========================================================================
   La Table du Moulin — feuille de style du thème
   --------------------------------------------------------------------------
   Charte reprise du logo de la maison : brun #503830 et terracotta #D86848
   sur fond blanc, titres dans la calligraphie de la carte papier.

   Cette feuille habille le site public ET l'admin. Les deux se distinguent
   par la classe posée sur <body> dans theme/header.php :
     .public-view -> typographie de parade (grands titres manuscrits)
     .admin-view  -> titres sobres, sinon un écran de réglages devient
                     illisible en police calligraphiée.

   Les variables --brand-*, --text-*, --font-* sont celles que l'écran
   "Thème" de l'admin (wikiwi/theme.php) peut réécrire : garder ces noms.
   ========================================================================== */

:root {
  /* Couleurs de la charte */
  --brand-primary: #D86848;   /* terracotta du logo */
  --brand-dark: #503830;      /* brun du logo */
  --brand-orange: #D86848;
  --brand-vivid-blue: #D86848;

  --text-heading: #503830;
  --text-body: #6B5950;
  --text-muted: #9B897F;
  --text-link: #B4502F;
  --link-hover: #8E3B1B;
  --btn-hover: #B4502F;
  --footer-text: #6B5950;

  /* Fonds et filets */
  --paper: #FFFFFF;
  --soft-peach: #FDF3EF;
  --soft-grey: #F7F3F0;
  --hairline: #EEE3DC;

  --bg-gradient-start: #FFFFFF;
  --bg-gradient-end: #FFFFFF;
  --bg-image: none;

  /* Typographie */
  --font-heading-h1: 'Parisienne', cursive;
  --font-heading-h2: 'Parisienne', cursive;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-h1: 400;
  --fw-h2: 400;
  --fw-body: 400;
  --h1-scale: 1;
  --h2-scale: 1;

  /* Mesures */
  --page-max: 1180px;
  --page-gutter: 28px;
  --header-h: 86px;
  --radius: 4px;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Les cercles décoratifs et les blocs pleine largeur dépassent
     volontairement des bords : on coupe ce qui sort, sans jamais afficher de
     barre horizontale. "clip" plutôt que "hidden" : hidden ferait de <html>
     un conteneur de défilement et casserait l'en-tête collant. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--text-body);
  background-color: var(--paper);
  background-image: var(--bg-image);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--text-link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

::selection { background: var(--brand-primary); color: #fff; }

/* Le conteneur de contenu : header.php n'utilise plus .container de
   Bootstrap pour <main>, afin de pouvoir laisser certains blocs déborder
   en pleine largeur d'écran (carte du restaurant, bandeaux photo). */
.site-main {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 56px var(--page-gutter) 96px;
}
.site-main-wide { max-width: min(1800px, 96vw); }

/* Déborder du conteneur jusqu'aux bords de l'écran, sans jamais créer de
   barre de défilement horizontale. */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   2. Typographie
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }

.public-view h1 {
  font-family: var(--font-heading-h1);
  font-weight: var(--fw-h1);
  font-size: calc(clamp(2.4rem, 5.2vw, 4.2rem) * var(--h1-scale));
  line-height: 1.08;
  text-align: center;
  margin: 0 0 1.6rem;
}

.public-view h2 {
  font-family: var(--font-heading-h2);
  font-weight: var(--fw-h2);
  font-size: calc(clamp(2.1rem, 4.2vw, 3.4rem) * var(--h2-scale));
  line-height: 1.12;
  margin: 0 0 1.3rem;
}

/* Un titre à qui on a donné une classe utilitaire Bootstrap (.h4, .h5...)
   est un titre de service — formulaire de contact, écrans d'admin : il
   doit rester dans la police courante, pas en calligraphie. */
.public-view h1.h3, .public-view h1.h4, .public-view h1.h5,
.public-view h2.h3, .public-view h2.h4, .public-view h2.h5 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
/* La taille aussi : sans ça, le clamp() des règles h1/h2 ci-dessus
   l'emporte sur celle de la classe utilitaire de Bootstrap. */
.public-view h1.h3, .public-view h2.h3 { font-size: 1.6rem; }
.public-view h1.h4, .public-view h2.h4 { font-size: 1.3rem; }
.public-view h1.h5, .public-view h2.h5 { font-size: 1.1rem; }

.public-view h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; margin-bottom: .9rem; }
.public-view h4 { font-size: 1.1rem; font-weight: 700; }

.public-view .site-main p { margin-bottom: 1.25rem; }
.public-view .site-main p:last-child { margin-bottom: 0; }

/* Titre d'un bloc de contenu (champ "Titre au-dessus de ce bloc") :
   volontairement PAS en calligraphie — à l'intérieur d'une page, un
   intertitre doit rester lisible d'un coup d'œil. */
.public-view h2.block-heading,
.block-heading {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 1.4rem;
}
.block-heading-center { text-align: center; }
.block-heading-spacer { visibility: hidden; }

/* Surtitre réutilisable (pied de page, blocs) */
.eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 1rem;
}

.script-title { font-family: var(--font-heading-h1); font-weight: 400; }

/* Filet botanique décoratif, repris des illustrations de la carte papier. */
.leaf-divider {
  display: block;
  width: 36px;
  height: 64px;
  margin: 0 auto 1.8rem;
  opacity: .9;
}

/* ==========================================================================
   3. Boutons
   ========================================================================== */

.btn-tdm {
  display: inline-block;
  padding: 15px 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-tdm-sm { padding: 11px 24px; font-size: .68rem; }

.btn-tdm-solid { background: var(--brand-primary); color: #fff; }
.btn-tdm-solid:hover,
.btn-tdm-solid:focus-visible { background: var(--btn-hover); color: #fff; }

.btn-tdm-ghost { border-color: var(--hairline); color: var(--text-body); background: transparent; }
.btn-tdm-ghost:hover,
.btn-tdm-ghost:focus-visible { border-color: var(--brand-primary); color: var(--text-link); }

/* Boutons Bootstrap du contenu et de l'admin, ramenés à la charte. */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--btn-hover);
  --bs-btn-hover-border-color: var(--btn-hover);
  --bs-btn-active-bg: var(--btn-hover);
  --bs-btn-active-border-color: var(--btn-hover);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--text-link);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--btn-hover);
  --bs-btn-active-border-color: var(--btn-hover);
}
.public-view .btn-primary,
.public-view .btn-outline-primary {
  border-radius: 999px;
  padding: 13px 32px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. En-tête et navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(80, 56, 48, .07); }

.header-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  transition: min-height .3s ease;
}
.site-header.is-scrolled .header-inner { min-height: 68px; }

.header-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-side-end { justify-content: flex-end; }

.header-logo {
  display: block;
  line-height: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;   /* le logo agrandi passe au-dessus du contenu de la page */
}
.header-logo img {
  height: 56px;
  width: auto;
  /* Agrandissement au survol par transform (et non par la hauteur) : l'en-tête
     garde sa taille, rien ne bouge autour. Le point d'ancrage est le haut,
     donc le logo se déploie vers le bas, par-dessus la page. */
  transition: height .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
  transform-origin: center top;
}
.header-logo:hover img,
.header-logo:focus-visible img { transform: scale(1.45); }
.site-header.is-scrolled .header-logo img { height: 42px; }

.main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

.nav-link-tdm {
  display: inline-block;
  padding: 10px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-heading);
  white-space: nowrap;
}
.nav-link-tdm:hover { color: var(--brand-primary); }
.nav-link-tdm.active { color: var(--brand-primary); }
.nav-link-tdm.active::after {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  margin: 5px auto 0;
  background: var(--brand-primary);
}

/* Sous-menu au survol (écrans larges uniquement) */
.nav-cell { position: relative; }
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(80, 56, 48, .1);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-cell:hover .nav-submenu,
.nav-cell:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu a {
  display: block;
  padding: 9px 22px;
  font-size: .85rem;
  color: var(--text-body);
  white-space: nowrap;
}
.nav-submenu a:hover { background: var(--soft-peach); color: var(--text-link); }

.header-cta { flex-shrink: 0; padding: 12px 28px; }

/* Bouton d'ouverture du menu (petits écrans) */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--text-heading);
  transition: background-color .2s ease;
}
.burger span:last-child { width: 16px; background: var(--brand-primary); }

/* Panneau du menu (petits écrans) */
.nav-offcanvas { width: min(340px, 86vw); background: #fff; }
.nav-offcanvas .offcanvas-header { border-bottom: 1px solid var(--hairline); padding: 20px 26px; }
.nav-offcanvas .offcanvas-title { font-size: 2rem; color: var(--text-heading); }
.nav-offcanvas .offcanvas-body { padding: 26px; }

.offcanvas-nav > li { border-bottom: 1px solid var(--hairline); }
.offcanvas-nav > li:last-child { border-bottom: none; }
.offcanvas-nav > li > a {
  display: block;
  padding: 16px 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-heading);
}
.offcanvas-nav > li > a.active,
.offcanvas-nav > li > a:hover { color: var(--brand-primary); }
.offcanvas-subnav { padding: 0 0 12px 16px; }
.offcanvas-subnav a {
  display: block;
  padding: 7px 0;
  font-size: .92rem;
  color: var(--text-body);
}

/* Bandeau d'alerte (Texte alerte, dans l'admin) */
.alert-band {
  background: var(--brand-primary);
  color: #fff;
  text-align: center;
  padding: 11px 20px;
  font-size: .92rem;
  letter-spacing: .02em;
}

/* ==========================================================================
   5. Bandeau photo d'une page (galerie "bandeau")
   ========================================================================== */

.home-slide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -56px;        /* colle le bandeau sous l'en-tête */
  margin-bottom: 3.5rem;
}

.home-slide .carousel-item { position: relative; }

.gallery-img {
  width: 100%;
  height: clamp(340px, 62vh, 680px);
  object-fit: cover;
  display: block;
}
.gallery-img.is-panoramic { object-fit: contain; background: var(--soft-grey); }

/* Un voile très léger en bas de la photo : le blanc de la page y fond,
   au lieu d'une coupure nette entre la photo et le texte. */
.home-slide .carousel-item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
  pointer-events: none;
}

.gallery-credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  font-size: .7rem;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.carousel-control-prev, .carousel-control-next { width: 9%; opacity: .55; }
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Galerie en bandeau défilant
   -------------------------------------------------------------------------- */
.marquee-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 8px 0;
}
.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-slide 70s linear infinite;
}
.marquee-gallery:hover .marquee-track { animation-play-state: paused; }
.marquee-track img {
  width: auto;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}

/* --------------------------------------------------------------------------
   Galerie en mosaïque
   -------------------------------------------------------------------------- */
.mosaic-gallery {
  column-count: 3;
  column-gap: 16px;
}
.mosaic-item {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  line-height: 0;
  /* Révélation au défilement, photo par photo (voir render_mosaic_gallery). */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
}
.mosaic-item.is-visible { opacity: 1; transform: none; }
.mosaic-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  transition: opacity .3s ease, transform .4s ease;
}
.mosaic-item:hover img,
.mosaic-item:focus-visible img { opacity: .88; transform: scale(1.015); }

/* Copyright posé sur la vignette : présent, mais le plus effacé possible.
   Pas de pastille ni de fond — juste une ombre portée pour rester lisible
   aussi bien sur une photo claire que sombre. Un peu plus net au survol. */
.mosaic-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: rgba(255, 255, 255, .5);
  font-size: .56rem;
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
  pointer-events: none;
  transition: color .25s ease;
}
.mosaic-item:hover .mosaic-credit { color: rgba(255, 255, 255, .8); }
.mosaic-item { position: relative; }

/* Visionneuse de la mosaïque */
.mosaic-viewer {
  position: fixed;
  inset: 0;
  z-index: 1065;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 76px;
  background: rgba(37, 27, 22, .93);
}
.mosaic-viewer[hidden] { display: none; }
.mosaic-viewer > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
}
.mosaic-viewer button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .25s ease;
}
.mosaic-viewer button:hover { background: var(--brand-primary); }
.mosaic-viewer-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .08em;
}
.mosaic-viewer-credit[hidden] { display: none; }

.mosaic-viewer-close { top: 20px; right: 20px; }
.mosaic-viewer-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.mosaic-viewer-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   6. Blocs de contenu
   ========================================================================== */

/* --------------------------------------------------------------------------
   Décor de la charte : cercles poudrés et photos en arche
   (repris de la maquette validée).
   -------------------------------------------------------------------------- */

/* Deux grands cercles très clairs, posés derrière le contenu de chaque page.
   Purement décoratifs : jamais d'information dedans, et jamais de barre de
   défilement horizontale (body a overflow-x: hidden). */
.public-view .site-main { position: relative; }
.public-view .site-main::before,
.public-view .site-main::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.public-view .site-main::before {
  top: 40px;
  left: -230px;
  width: 440px;
  height: 440px;
  background: var(--soft-peach);
}
.public-view .site-main::after {
  top: 46%;
  right: -270px;
  width: 520px;
  height: 520px;
  background: var(--soft-grey);
}

/* Photo "en arche" : sommet arrondi, base à peine adoucie, et une pastille
   de couleur décalée derrière. */
.image-arch { position: relative; }
.image-arch img {
  position: relative;
  z-index: 1;
  /* Un rayon volontairement démesuré en haut : le navigateur le réduit
     jusqu'à ce que les deux coins se touchent, ce qui donne un vrai
     demi-cercle, quelle que soit la largeur de la photo. Un rayon en
     pourcentage donnerait une ellipse écrasée, pas un arc. */
  border-radius: 999px 999px 10px 10px;
}
.image-arch::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
}
.image-arch-left::before { top: -26px; left: -26px; background: var(--soft-peach); }
.image-arch-right::before { bottom: -26px; right: -26px; background: var(--soft-grey); }

/* Filet botanique sous le titre de page, comme sur la carte papier. */
.public-view .site-main > h1::after {
  content: '';
  display: block;
  width: 36px;
  height: 70px;
  margin: 1.6rem auto 0;
  background: url('filet-botanique.svg') center / contain no-repeat;
}

/* Fiche "Personne" */
.person-card { padding: 10px 0; }
.person-photo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--soft-peach);
}
.person-card h5 { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); }

/* Carte de service (icône + résumé + bouton).
   L'enveloppe existe pour que survoler n'importe quelle partie de la carte
   anime l'icône, pas seulement l'icône elle-même. */
.service-card-wrap {
  height: 100%;
  padding: 30px 22px;
  background: var(--soft-peach);
  border-radius: var(--radius);
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-card-wrap:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(80, 56, 48, .1); }
.service-card-icon { text-align: center; font-size: 2.4rem; color: var(--brand-primary); margin-bottom: .6rem; transition: transform .3s ease; }
.service-card-wrap:hover .service-card-icon { transform: scale(1.08); }
.service-card-icon-image img { width: 72px; height: 72px; object-fit: contain; }
.service-card { padding: 0 8px 8px; }
.service-card-summary { color: var(--text-body); }

/* Coordonnées de contact */
.contact-info-block i { color: var(--brand-primary); }

/* Formulaire de contact */
.public-view .form-control,
.public-view .form-select {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 1rem;
  color: var(--text-body);
}
.public-view .form-control:focus,
.public-view .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(216, 104, 72, .12);
}
.public-view .form-label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }

/* ==========================================================================
   7. La carte du restaurant (image pleine largeur)
   ========================================================================== */

/* La figure déborde jusqu'aux bords de l'écran (le 50% porte ici sur la
   colonne qui la contient, d'où la technique habituelle), et c'est le
   bouton-image à l'intérieur qui est plafonné puis centré : au-delà de
   1800 px, une carte étirée devient démesurée et dépasse la définition
   réelle du fichier. */
.menu-image {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-block: 0 1.5rem;
  text-align: center;
}
/* L'image entière est le bouton d'agrandissement. */
.menu-image-trigger {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.menu-image img {
  width: 100%;
  height: auto;
  display: block;
}

.menu-image-hint {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 22px rgba(80, 56, 48, .16);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-heading);
  transition: background-color .25s ease, color .25s ease;
}
.menu-image-trigger:hover .menu-image-hint,
.menu-image-trigger:focus-visible .menu-image-hint {
  background: var(--brand-primary);
  color: #fff;
}

/* Visionneuse plein écran (pas de nouvel onglet) */
.menu-modal .modal-content {
  position: relative;   /* ancre le bouton de fermeture, placé en absolu */
  background: #FFFFFF;
  border: none;
  border-radius: 0;
  height: 100%;
}
/* Le bouton flottant de réservation passerait par-dessus la visionneuse :
   on l'efface le temps que la carte est ouverte. */
body.modal-open .floating-cta { display: none; }
.menu-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;      /* le déplacement se fait par transform, pas par défilement */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Le navigateur ne doit pas confisquer les gestes : c'est la visionneuse
     qui gère le pincement et le glissement. */
  touch-action: none;
}
.menu-modal-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.menu-modal-img.is-zoomed { cursor: grab; }
.menu-modal-img.is-grabbing { cursor: grabbing; }

/* Module loupe : − / niveau / + / vue d'ensemble */
.menu-zoom {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 26px rgba(80, 56, 48, .22);
}
.menu-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-dark);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.menu-zoom-btn:hover { background: var(--brand-primary); color: #fff; }
.menu-zoom-level {
  min-width: 60px;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Le mode d'emploi s'adapte au matériel : pas de molette ni de touche
   Échap sur un téléphone. */
.hint-tactile { display: none; }
@media (hover: none) {
  .hint-souris { display: none; }
  .hint-tactile { display: inline; }
  .menu-zoom { bottom: 48px; }
}

.menu-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 22px rgba(80, 56, 48, .18);
  color: var(--text-heading);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.menu-modal-close:hover { background: var(--brand-primary); color: #fff; }

.menu-modal-hint {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 20px 18px;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   8. Réservation (widget Barestho)
   ========================================================================== */

.barestho-wrap {
  /* Plafonné puis centré dans sa colonne : étalé sur toute la largeur, le
     formulaire de réservation a des lignes trop longues (une case "2
     adultes" seule à 700 px de large). */
  max-width: 540px;
  margin-inline: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.barestho-widget { display: block; }

/* Module posé sur une grande photo de fond, sur toute la largeur d'écran.
   La photo est une vraie balise <img> (et non un background-image) pour
   qu'elle reste indexable, qu'on puisse lui donner un point de cadrage, et
   qu'elle se charge comme les autres photos du site. */
.reservation-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  min-height: 680px;
  overflow: hidden;
}
.reservation-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile clair : le blanc de la carte doit se détacher même sur une photo
   très lumineuse, sans assombrir la photo au point de la gâcher. */
.reservation-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(80, 56, 48, .22);
}
.reservation-hero-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  padding: 44px 40px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(80, 56, 48, .26);
}
.reservation-hero-card .barestho-wrap {
  max-width: none;
  border: none;
  border-radius: 0;
}

@media (max-width: 575.98px) {
  .reservation-hero { padding: 40px 14px; min-height: 0; }
  .reservation-hero-card { padding: 26px 18px; }
}

/* ==========================================================================
   9. Contenus tiers en attente de consentement
   ========================================================================== */

.consent-embed { background: var(--soft-grey); border: 1px dashed var(--hairline); }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1060;
  background: #fff;
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 30px rgba(80, 56, 48, .1);
}
.cookie-banner-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 16px var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ==========================================================================
   10. Bouton flottant de réservation
   ========================================================================== */

.floating-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(80, 56, 48, .25);
  transition: background-color .25s ease, transform .25s ease;
}
.floating-cta:hover { background: var(--btn-hover); color: #fff; transform: translateY(-2px); }
.floating-cta i { font-size: 1.05rem; }

/* ==========================================================================
   11. Pied de page
   ========================================================================== */

.site-footer {
  background: var(--soft-grey);
  border-top: 1px solid var(--hairline);
  color: var(--footer-text);
  /* Marge basse généreuse : le bouton flottant de réservation est en
     position fixe et viendrait sinon masquer la dernière ligne. */
  padding: 76px 0 110px;
}
.footer-inner { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

.footer-logo { text-align: center; margin-bottom: 52px; }
.footer-logo img { height: 74px; width: auto; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.footer-col-center { text-align: center; }
.footer-col-end { text-align: right; }

.footer-text { font-size: .95rem; line-height: 2; font-weight: 300; margin: 0; }
.footer-text a { color: var(--footer-text); }
.footer-text a:hover { color: var(--brand-primary); }

.footer-cta { margin: 18px 0 0; }

.footer-socials { margin: 16px 0 0; font-size: 1.3rem; }
.footer-socials a { color: var(--text-heading); margin-left: 14px; }
.footer-socials a:hover { color: var(--brand-primary); }
.footer-col:not(.footer-col-end) .footer-socials a { margin: 0 14px 0 0; }

.footer-bottom {
  margin-top: 62px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.footer-legal, .footer-credit { font-size: .78rem; color: var(--text-muted); margin: 0; }
.footer-legal a, .footer-credit a { color: var(--text-muted); text-decoration: underline; }
.footer-legal a:hover, .footer-credit a:hover { color: var(--brand-primary); }

/* ==========================================================================
   12. Admin — reste sobre et lisible
   ========================================================================== */

.admin-view { font-size: 15px; line-height: 1.6; background: #fff; }
.admin-view .site-main { max-width: 1320px; padding-top: 28px; padding-bottom: 60px; }
.admin-view h1 { font-size: 1.7rem; font-weight: 700; }
.admin-view h2 { font-size: 1.3rem; font-weight: 700; }
.admin-view .site-header { position: static; }
.admin-view .header-logo img { height: 44px; }

/* Barre d'administration (wikiwi/partials/adminbar.php).
   Collée en haut : les écrans d'édition sont longs, et on doit pouvoir
   changer de section sans remonter toute la page. */
.admin-bar {
  position: sticky;
  top: 0;
  z-index: 1035;
  background: #FBF6F2;                            /* crème, dans la charte */
  border-bottom: 3px solid var(--brand-primary);  /* séparation nette avec la page */
  box-shadow: 0 2px 14px rgba(80, 56, 48, .06);
}
.admin-bar-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.admin-bar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; flex: 1 1 auto; }

.admin-bar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.admin-bar-link i { font-size: .95rem; opacity: .7; }
.admin-bar-link:hover { background: #F2E6DE; color: var(--brand-dark); }
.admin-bar-link.active { background: var(--brand-primary); color: #fff; font-weight: 700; }
.admin-bar-link.active i { opacity: 1; }

.admin-bar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.admin-bar-link.active .admin-bar-badge { background: #fff; color: var(--brand-primary); }

.admin-bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.admin-bar-user {
  color: var(--text-muted);
  font-size: .78rem;
  white-space: nowrap;
}

.admin-bar-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #E0CFC4;
  border-radius: 999px;
  color: var(--brand-dark);
  font-size: .76rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.admin-bar-action:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.admin-bar-logout:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* Bascule "mode client" : tout à droite, réduite à l'œil. C'est un outil
   d'exploitation, pas une fonction du site — il ne doit pas attirer l'œil
   plus que les vraies entrées du menu. */
.admin-bar-mode { margin: 0 0 0 2px; display: inline-flex; }
.admin-bar-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #C3B2A7;
  font-size: .95rem;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.admin-bar-mode-btn:hover { color: var(--brand-dark); background: #F2E6DE; }
/* Enclenché : l'œil se remplit et prend la couleur de la maison, sans fond
   ni cadre — assez pour comprendre l'état, pas assez pour déranger. */
.admin-bar-mode-btn.is-on { color: var(--brand-primary); }
.admin-bar-mode-btn.is-on:hover { color: var(--brand-primary); background: #F2E6DE; }

@media (max-width: 991.98px) {
  .admin-bar-inner { padding: 8px 14px; }
  .admin-bar-link span { display: none; }   /* icônes seules : la barre tient sur une ligne */
  .admin-bar-link { padding: 9px 11px; }
  .admin-bar-link.active span { display: inline; }
  .admin-bar-action span { display: none; }
  .admin-bar-user { display: none; }
}

.photo-thumb {
  width: 76px; height: 76px; object-fit: cover;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--soft-grey);
}
.photo-thumb-empty { background: var(--soft-grey) center / 24px no-repeat; }

/* ==========================================================================
   13. Adaptations aux petits écrans
   ========================================================================== */

/* Entre 992 et 1200 px, la navigation se resserre : avec six rubriques aux
   libellés longs, les liens de droite finissaient par mordre sur le logo
   centré. Marge de sécurité si une rubrique s'ajoute un jour. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nav-link-tdm { padding-inline: 9px; font-size: .68rem; letter-spacing: .12em; }
  .header-logo img { height: 48px; }
}

@media (max-width: 991.98px) {
  :root { --header-h: 72px; --page-gutter: 20px; }
  .header-inner { grid-template-columns: 1fr auto 1fr; }
  .header-logo img { height: 44px; }
  .site-header.is-scrolled .header-logo img { height: 38px; }
  .site-main { padding-top: 40px; padding-bottom: 68px; }
  .home-slide { margin-top: -40px; }
}

@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 34px; text-align: center; }
  .footer-col-end, .footer-col-center { text-align: center; }
  .footer-col:not(.footer-col-end) .footer-socials a { margin: 0 8px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .floating-cta { right: 14px; bottom: 14px; padding: 13px 20px; font-size: .66rem; }
  .mosaic-gallery { column-count: 2; column-gap: 10px; }
  .mosaic-item { margin-bottom: 10px; }
  .mosaic-viewer { padding: 64px 14px; }
  .mosaic-viewer-prev { left: 8px; }
  .mosaic-viewer-next { right: 8px; }
  .person-photo { width: 150px; height: 150px; }
  .menu-image-hint { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aos], .mosaic-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   14. Interface d'administration — styles récupérés
   --------------------------------------------------------------------------
   Ces règles existaient dans le thème d'origine et ont été perdues lors de
   la réécriture de cette feuille pour le restaurant. Sans elles, plusieurs
   outils de l'admin n'ont plus aucun style et paraissent cassés : le point
   de cadrage des photos devient invisible, la bibliothèque de médias perd
   sa grille, les poignées de glisser-déposer disparaissent.
   ========================================================================== */

/* Graphique en barres "maison" pour les statistiques de visite (pas de
   librairie JS de graphiques — juste des divs dont la hauteur reflète la
   valeur, cohérent avec le reste du projet : sans dépendance externe). */
.stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  margin-top: 1.25rem; /* place pour les chiffres au-dessus des barres les plus hautes */
}

.stats-bar-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.stats-bar {
  position: relative;
  width: 100%;
  min-height: 2px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
  transition: background 0.15s;
}

.stats-bar-col:hover .stats-bar {
  background: var(--brand-orange);
}

/* Chiffre affiché en permanence au-dessus de chaque barre — plus besoin
   de survoler et d'attendre l'infobulle pour lire la valeur. */
.stats-bar-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  font-size: 0.65rem;
  color: var(--brand-dark);
  white-space: nowrap;
}

/* Camembert "maison" (dégradé conique CSS, pas de librairie JS) pour la
   répartition des visiteurs par source. */
.stats-pie {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stats-pie-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.4rem;
}

.rubrique-row {
  cursor: grab;
}

.rubrique-row-child {
  background: #f5f4f1;
}

.rubrique-child-arrow {
  margin-right: 0.25rem;
}

.rubrique-row.sortable-ghost {
  opacity: 0.4;
}

/* Fiche "Masquée" dans l'éditeur de bloc Galerie d'articles (voir
   wikiwi/rubrique-edit.php) : reste visible et modifiable dans l'admin,
   juste estompée pour rappeler qu'elle n'apparaît plus sur le site. */
.articles-editor-row-masked .photo-thumb {
  opacity: 0.35;
  filter: grayscale(1);
}

/* Bibliothèque de photos (réutiliser, pivoter, renommer ou supprimer une
   photo déjà envoyée) */
.media-library-item {
  width: 110px;
  text-align: center;
}

.media-library-thumb-wrap {
  position: relative;
  cursor: pointer;
}

.media-library-thumb {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  display: block;
}

/* Survol : superpose nom + actions sur la photo (plutôt qu'une simple
   infobulle native, lente à apparaître et peu visible) */
.media-library-overlay {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.media-library-thumb-wrap:hover .media-library-overlay {
  opacity: 1;
}

.media-library-overlay-name {
  font-size: 0.7rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-badge {
  display: block;
  font-size: 0.7rem;
  margin-top: 0.25rem;
}

.media-library-badge-used {
  color: #6c757d;
}

.media-library-badge-unused {
  color: var(--brand-primary);
  font-weight: 600;
}

.media-library-actions {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.media-library-actions .btn {
  padding: 0.1rem 0.35rem;
}

/* Dossiers dans la bibliothèque */
.media-library-folder-icon {
  width: 100%;
  height: 90px;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd);
  background: #f8f6f1;
  color: var(--brand-primary);
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Photo déjà utilisée à cet emplacement précis (avant même de choisir) */
.media-library-item-current .media-library-thumb {
  border: 2px solid var(--brand-primary);
}

.media-library-current-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  color: var(--brand-primary);
  background: #fff;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}

#mediaLibraryBreadcrumb .media-library-crumb {
  text-decoration: none;
}

#mediaLibraryBreadcrumb .media-library-crumb:last-child {
  font-weight: 600;
  pointer-events: none;
  color: inherit;
}

/* Poignée de redimensionnement des colonnes (glisser pour agrandir/réduire).
   Visible en permanence (badge rond avec icône), pas seulement au survol,
   pour que la fonction se voie sans qu'il faille la découvrir par hasard. */
.col-block-inner {
  position: relative;
}

.col-resize-handle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
  background: var(--brand-primary);
  color: #fff;
  font-size: 12px;
  opacity: 0.85;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s, transform 0.15s;
}

.col-resize-handle:hover,
.col-resize-handle:active {
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
}

/* Poignée de déplacement des colonnes (glisser pour réordonner/inverser) */
.col-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.col-drag-handle:hover {
  color: var(--brand-primary);
}

.col-block-ghost {
  opacity: 0.35;
}

/* Poignée de déplacement des rangées (glisser pour réordonner la page) */
.row-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.row-drag-handle:hover {
  color: var(--brand-primary);
}

/* Poignée de déplacement des photos (galerie de page + galeries de bloc) */
.photo-drag-handle {
  cursor: grab;
  color: #9a938a;
  padding: 0 2px;
}

.photo-drag-handle:hover {
  color: var(--brand-primary);
}

.photo-row.sortable-ghost,
.gallery-editor-row.sortable-ghost {
  opacity: 0.35;
}

/* Popup de cadrage : on clique sur la photo pour placer le point à
   toujours garder visible. */
.cadrage-stage {
  position: relative;
  width: 100%;
  cursor: crosshair;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

#cadrageModal .modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

.cadrage-stage img {
  width: 100%;
  height: auto;
  display: block;
}

.cadrage-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brand-primary), 0 1px 5px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  left: 50%;
  top: 50%;
}

.gallery-carousel .gallery-img {
  width: 100%;
  height: var(--gallery-height, 500px);
  object-fit: cover;
}

/* Photo marquée "panoramique" : hauteur réduite pour ne pas la recadrer
   trop serré verticalement — proportionnelle à la hauteur choisie dans
   l'admin (jamais une valeur fixe : sinon changer la hauteur du bandeau
   n'a aucun effet visible tant que les photos sont marquées
   panoramiques, ce qui a été un vrai bug). Règle dédiée pour le bandeau
   d'accueil (.home-slide) car elle a besoin d'une spécificité CSS plus
   forte pour l'emporter sur la règle de hauteur normale de ce contexte. */
.gallery-carousel .gallery-img.is-panoramic {
  height: calc(var(--gallery-height, 500px) * 0.55);
}

.home-slide .gallery-carousel .gallery-img.is-panoramic {
  height: calc(var(--gallery-height, 460px) * 0.55);
}

.fb-embed-wrap {
  max-width: 500px;
}

#mapPickerMap {
  height: 420px;
  border-radius: 6px;
}

.gallery-carousel .carousel-item {
  position: relative;
}

.gallery-carousel .gallery-credit {
  position: absolute;
  left: 12px;
  bottom: 8px;
  color: #fff;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.gallery-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--brand-primary);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}


/* Hauteur du bandeau photo : valeur réglée par page dans l'admin
   (--gallery-height, posée en ligne par render_gallery), plafonnée sur
   petit écran pour ne pas occuper tout le téléphone. */
.home-slide .gallery-carousel .gallery-img {
  height: var(--gallery-height, 560px);
}
@media (max-width: 767.98px) {
  .home-slide .gallery-carousel .gallery-img {
    height: min(var(--gallery-height, 560px), 340px);
  }
}