/* ==========================================================================
   Site vitrine — feuille de style unique
   Palette : pin des Landes, papier, rouge de la Madeleine.
   Aucune dépendance, aucun build. Déposer tel quel en FTP.
   ========================================================================== */

:root {
  /* Couleurs */
  --encre:      #16241D;  /* vert pin très sombre, sert de "noir" */
  --pin:        #2E5E4E;  /* vert pin moyen */
  --papier:     #E9E6DC;  /* papier légèrement grisé */
  --papier-vif: #F5F3EC;  /* papier clair, cartes */
  --sable:      #D3C7AB;  /* sable des Landes, filets et bordures */
  --feria:      #C1272D;  /* rouge des fêtes de la Madeleine */
  --encre-doux: #5A6960;  /* texte secondaire */

  /* Typographie */
  --display: "Bricolage Grotesque", Georgia, serif;
  --texte:   "Instrument Sans", system-ui, -apple-system, sans-serif;
  --chiffre: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Rythme */
  --marge:   clamp(1.25rem, 5vw, 4rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --max:     72rem;
}

/* --------------------------------------------------------------- Base --- */

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

html {
  scroll-behavior: smooth;
  /* Empêche le navigateur (surtout Android/Chrome) d'ajuster tout seul
     les couleurs du site selon le mode clair/sombre du téléphone — ce
     thème "clair"/"sombre" est le nôtre, choisi par secteur, pas celui
     du système. Renforce la balise <meta name="color-scheme"> déjà
     posée dans le <head> de chaque page. */
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: linear-gradient(180deg,
    var(--papier) 0%,
    color-mix(in srgb, var(--papier) 88%, var(--fond-sombre, var(--papier))) 100%);
  background-attachment: fixed;
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--feria);
  outline-offset: 3px;
}

.enveloppe {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--encre);
  color: var(--papier-vif);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------- Typographie --- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: 62ch; }

.chapeau {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--encre-doux);
  max-width: 48ch;
}

.etiquette {
  font-family: var(--chiffre);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--feria);
  display: block;
  margin-bottom: 1.2rem;
}

.etiquette--clair { color: var(--sable); }

/* ------------------------------------------------------------ Boutons --- */

.bouton {
  display: inline-block;
  font-family: var(--texte);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: .95rem 1.7rem;
  border: 2px solid var(--encre);
  background: var(--encre);
  color: var(--papier-vif);
  transition: transform .15s ease, background-color .15s ease;
}
.bouton:hover { background: var(--pin); border-color: var(--pin); transform: translateY(-2px); }

.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { background: var(--encre); color: var(--papier-vif); border-color: var(--encre); }

.bouton--rouge { background: var(--feria); border-color: var(--feria); }
.bouton--rouge:hover { background: #A31F24; border-color: #A31F24; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------- En-tête / pied --- */

.entete {
  border-bottom: 1px solid var(--sable);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 50;
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.marque {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.marque span { color: var(--feria); }

.navigation {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  font-size: .95rem;
}
.navigation a { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.navigation a:hover { border-bottom-color: var(--feria); }
.navigation a[aria-current="page"] { border-bottom-color: var(--encre); font-weight: 600; }

.pied {
  background: var(--encre);
  color: var(--papier);
  padding-block: var(--section) 2.5rem;
  margin-top: var(--section);
}
.pied a { color: var(--papier); }
.pied h3 { color: var(--papier-vif); }

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
}

.pied__bas {
  border-top: 1px solid rgba(211, 199, 171, .25);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: var(--sable);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  justify-content: space-between;
}

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

.section { padding-block: var(--section); }
.section--sombre { background: var(--encre); color: var(--papier); }
.section--sombre h2 { color: var(--papier-vif); }
.section--sombre .chapeau { color: var(--sable); }
.section--pin { background: var(--pin); color: var(--papier-vif); }
.section--pin h2 { color: var(--papier-vif); }

.section__titre { max-width: 38ch; }

/* ------------------------------------------------------------- Accueil --- */

.heros { padding-block: clamp(3rem, 8vw, 6rem) var(--section); }

.heros__grille {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 60rem) {
  .heros__grille { grid-template-columns: 1.05fr .95fr; }
}

.heros h1 em {
  font-style: normal;
  color: var(--feria);
}

/* Faux résultat Google — le constat de départ, dans le monde du client */
.fiche {
  background: var(--papier-vif);
  border: 1px solid var(--sable);
  padding: 1.5rem;
  box-shadow: 0 18px 40px -28px rgba(22, 36, 29, .55);
}

.fiche__recherche {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--sable);
  border-radius: 999px;
  padding: .6rem 1rem;
  font-size: .9rem;
  color: var(--encre-doux);
  margin-bottom: 1.4rem;
  background: var(--papier);
}

.fiche__nom {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 .2rem;
}

.fiche__meta {
  font-size: .9rem;
  color: var(--encre-doux);
  margin: 0 0 1.2rem;
}
.fiche__meta strong { color: var(--encre); }

.fiche__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.fiche__bouton {
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border: 1px solid var(--sable);
  border-radius: 999px;
  color: var(--pin);
  background: var(--papier);
}

.fiche__bouton--absent {
  color: #9AA39C;
  border-style: dashed;
  position: relative;
  text-decoration: line-through;
}

.fiche__note {
  margin: 1.3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--sable);
  font-size: .9rem;
  color: var(--feria);
  font-weight: 600;
}

/* --------------------------------------------------------------- Devis --- */
/* L'élément signature : l'offre présentée comme un devis d'artisan.       */

.devis {
  background: var(--papier-vif);
  color: var(--encre);
  border: 1px solid var(--sable);
  max-width: 44rem;
  margin-inline: auto;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .5);
}

.devis__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 2px solid var(--encre);
}

.devis__marque {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  margin: 0;
}

.devis__reference {
  font-family: var(--chiffre);
  font-size: .78rem;
  color: var(--encre-doux);
  text-align: right;
  line-height: 1.8;
}

.devis__corps { padding: clamp(1.25rem, 4vw, 2.5rem); }

.devis__lignes {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.devis__lignes th {
  font-family: var(--chiffre);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--encre-doux);
  font-weight: 500;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--sable);
}

.devis__lignes th:last-child,
.devis__lignes td:last-child { text-align: right; }

.devis__lignes td {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--sable);
  vertical-align: top;
}

.devis__intitule { font-weight: 600; display: block; margin-bottom: .3rem; }

.devis__detail {
  font-size: .875rem;
  color: var(--encre-doux);
  display: block;
  max-width: 34ch;
}

.devis__prix {
  font-family: var(--chiffre);
  font-size: 1.05rem;
  font-weight: 500;
  white-space: nowrap;
}

.devis__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.4rem;
  margin-top: .3rem;
}

.devis__total-intitule {
  font-family: var(--chiffre);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

.devis__total-montant {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  letter-spacing: -.03em;
  line-height: 1;
}

.devis__mention {
  font-family: var(--chiffre);
  font-size: .72rem;
  color: var(--encre-doux);
  margin: 1.5rem 0 0;
  line-height: 1.7;
}

.devis__pied {
  border-top: 1px dashed var(--sable);
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.devis__accord {
  font-family: var(--chiffre);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

/* ------------------------------------------------------------- Étapes --- */

.etapes {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: 3rem;
  counter-reset: etape;
}

.etape { counter-increment: etape; }

.etape::before {
  content: counter(etape);
  font-family: var(--chiffre);
  font-size: .8rem;
  color: var(--feria);
  display: block;
  padding-bottom: .8rem;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--feria);
}

.etape h3 { margin-bottom: .4rem; }
.etape p { font-size: .95rem; margin: 0; color: var(--encre-doux); }
.section--sombre .etape p,
.section--pin .etape p { color: var(--sable); }
.section--sombre .etape h3,
.section--pin .etape h3 { color: var(--papier-vif); }

/* ------------------------------------------------------- Réalisations --- */

.travaux {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  margin-top: 3rem;
}

.travail {
  background: var(--papier-vif);
  border: 1px solid var(--sable);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.travail:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -30px rgba(22, 36, 29, .6);
}

.travail img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--sable);
  background: var(--papier);
}

.travail__texte { padding: 1.1rem 1.3rem 1.4rem; }
.travail__texte h3 { margin-bottom: .2rem; font-size: 1.1rem; }
.travail__texte p { margin: 0; font-size: .9rem; color: var(--encre-doux); }

/* ------------------------------------------------------------ Arguments --- */

.arguments {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 3rem;
}

.argument { border-left: 2px solid var(--sable); padding-left: 1.4rem; }
.argument h3 { margin-bottom: .35rem; }
.argument p { margin: 0; font-size: .95rem; color: var(--encre-doux); }
.section--sombre .argument { border-left-color: var(--pin); }
.section--sombre .argument p { color: var(--sable); }

/* ------------------------------------------------------------- Contact --- */

.contact-grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .contact-grille { grid-template-columns: 1fr 1fr; }
}

.coordonnees { list-style: none; margin: 2rem 0 0; padding: 0; }

.coordonnees li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--sable);
}
.coordonnees li:first-child { border-top: 1px solid var(--sable); }

.coordonnees dt,
.coordonnees .cle {
  font-family: var(--chiffre);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-doux);
  display: block;
  margin-bottom: .3rem;
}

.coordonnees .valeur {
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}
.coordonnees a.valeur:hover { color: var(--feria); }

/* --------------------------------------------------- Pages juridiques --- */

.page-texte { max-width: 46rem; }
.page-texte h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.page-texte h2:first-of-type { margin-top: 1rem; }
.page-texte ul { padding-left: 1.2rem; max-width: 62ch; }
.page-texte li { margin-bottom: .5rem; }

.encadre {
  background: var(--papier-vif);
  border-left: 3px solid var(--feria);
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}
.encadre p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Rappel --- */

.rappel {
  background: var(--feria);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.rappel h2 { color: #fff; }
.rappel p { margin-inline: auto; color: rgba(255, 255, 255, .9); }
.rappel .bouton {
  background: #fff;
  color: var(--feria);
  border-color: #fff;
  margin-top: 1.5rem;
}
.bv-colonne-produits .bv-carrousel.swiper .swiper-wrapper{padding-bottom:30px;}
.bv-colonne-produits .bv-carrousel.swiper .swiper-button-next svg{
    height: 10px;
    width: 10px;
}
.bv-colonne-produits .bv-carrousel.swiper .swiper-button-prev svg{
    height: 10px;
    width: 10px;
}

.bv-colonne-produits .bv-carrousel.swiper .swiper-button-next svg path{
    fill: #000;
}
.bv-colonne-produits .bv-carrousel.swiper .swiper-button-prev svg path{
    fill: #000;
}
.rappel .bouton:hover { background: var(--encre); color: #fff; border-color: var(--encre); }

/* ==========================================================================
   site-client.css
   Habillage du build commun des sites livrés : bandeau de navigation,
   bannière plein cadre, bandeau "Réservez en ligne", pied de page.
   Préfixes de classes : nv- (nav), bn- (bannière), rv- (réservation),
   pd- (pied). Le bloc produits/horaires reste dans bloc-vitrine.css.
   S'appuie sur les variables de style-base.css (couleurs, typo) sans
   les redéfinir.
   ========================================================================== */

/* Gouttière latérale commune à toutes les enveloppes du site. Définie
   une seule fois ici pour que le bandeau de réservation, qui n'est pas
   une enveloppe mais doit s'aligner dessus au pixel, puisse la
   réutiliser au lieu d'en recalculer une approximation de son côté.
   Si cette valeur change, elle doit changer partout en même temps. */
:root {
  --gouttiere: clamp(0.75rem, 2vw, 1.25rem);
  --largeur-site: 96rem;
}

/* -------------------------------------------------- Pied collé en bas --- */
/* Sur les pages courtes (Contact, Mentions légales, Confidentialité), le
   contenu ne remplit pas la hauteur de l'écran : le pied de page
   s'arrêtait donc au milieu de la fenêtre, avec du vide en dessous.

   Le body devient une colonne flex d'au moins la hauteur de la fenêtre,
   et le pied reçoit margin-top: auto — il absorbe alors tout l'espace
   restant et va se poser en bas. Sur une page longue, il n'y a plus
   d'espace à absorber : la règle ne fait plus rien et le comportement
   est exactement celui d'avant.

   Les deux thèmes sont visés (.pd-pied pour le sombre, .pd2-pied pour
   le clair), sinon le défaut resterait sur les instituts et onglerie.

   Le double min-height n'est pas une faute de frappe : 100dvh suit la
   hauteur réellement visible sur mobile quand la barre d'adresse se
   rétracte, alors que 100vh compte toujours la fenêtre pleine et
   provoque un petit défilement parasite. La première ligne sert de
   repli pour les navigateurs qui ne connaissent pas dvh, la seconde
   l'emporte partout ailleurs. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Sans ça, un enfant à hauteur définie — la bannière et son
   aspect-ratio, typiquement — pourrait être comprimé par le calcul flex
   au lieu de garder sa taille. On neutralise le rétrécissement, jamais
   la croissance. */
body > * { flex-shrink: 0; }

.pd-pied,
.pd2-pied { margin-top: auto; }

/* ------------------------------------------- Ancres et barre collante --- */
/* La barre de navigation est en position: sticky. Quand on clique sur un
   lien d'ancre, le navigateur amène le HAUT de la section pile en haut
   de la fenêtre — donc sous la barre, qui la recouvre. Le titre de
   section se retrouve caché derrière le menu, et le visiteur atterrit
   directement sur le contenu sans comprendre où il est.
   scroll-margin-top réserve la place : le défilement s'arrête plus tôt,
   de la hauteur de la barre plus une marge de respiration.
   La valeur suit la hauteur réelle de .nv-entete (min-height 4.25rem).
   Si cette hauteur change, celle-ci doit changer avec elle. */
:target {
  scroll-margin-top: 6rem;
}

section[id],
main [id],
.bv-section,
.pr-section {
  scroll-margin-top: 6rem;
}

.nv-enveloppe {
  width: 100%;
  max-width: var(--largeur-site, 96rem);
  margin-inline: auto;
  padding-inline: var(--gouttiere, clamp(0.75rem, 2vw, 1.25rem));
}

/* ------------------------------------------------------------------- Nav --- */

.nv-entete {
  background: var(--header-fond, var(--fond-sombre, var(--encre, #16241D)));
  color: var(--header-texte, var(--papier-vif, #F5F3EC));
  position: sticky;
  top: 0;
  z-index: 50;
}

.nv-entete .nv-enveloppe {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.25rem;
}

/* Sur desktop, le panneau est "invisible" en tant que conteneur : ses
   deux enfants (nv-liens, nv-actions) redeviennent directement des
   éléments de la grille à 3 colonnes ci-dessus, exactement comme avant
   l'introduction du menu mobile. */
.nv-panel { display: contents; }
.nv-toggle-entree { display: none; }
.nv-hamburger { display: none; }

.nv-marque {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--logo-couleur, var(--papier-vif, #fff));
  text-decoration: none;
  white-space: nowrap;
}

.nv-marque--image {
  display: inline-flex;
  align-items: center;
}
.nv-marque--image img {
  display: block;
  max-height: 3.5rem;
  object-fit: contain;
}

.nv-liens {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-self: center;
}
.nv-liens a {
  color: var(--menu-lien, var(--sable, #D3C7AB));
  text-decoration: none;
  font-size: .92rem;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}
.nv-liens a:hover {
  color: var(--menu-lien-hover, var(--header-texte, #ffffff));
  border-bottom-color: var(--feria, #C1272D);
}
body.theme-sombre .nv-liens a:hover {
  color: var(--header-texte, #ffffff);
}
body.theme-clair .nv-liens a:hover {
  color: #111111;
}

.nv-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
}

.nv-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(245,243,236,.35);
  color: var(--reseau-couleur, var(--papier-vif, #fff));
}
.nv-reseau:hover {
  border-color: var(--reseau-couleur-hover, var(--feria, #C1272D));
  color: var(--reseau-couleur-hover, var(--feria, #C1272D));
}

.nv-bouton {
  background: var(--header-bouton-fond, var(--feria, #C1272D));
  color: var(--header-bouton-texte, #fff);
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1.1rem;
  white-space: nowrap;
}
.nv-bouton:hover {
  background: var(--header-bouton-fond-hover, var(--feria-sombre, #A31F24));
  color: var(--header-bouton-texte-hover, var(--header-bouton-texte, #fff));
}

/* --------------------------------------------------------- Menu mobile --- */
/* En dessous de 60rem (~960px) : le logo et le bouton hamburger restent
   seuls visibles dans la barre. Cocher la case (via l'étiquette
   .nv-hamburger) affiche le panneau contenant liens + réseaux + bouton,
   empilés verticalement. Aucun JavaScript : la case à cocher cachée
   fait tout le travail, donc ça fonctionne même si autre chose sur la
   page a un problème. */
@media (max-width: 59.99rem) {
  .nv-entete .nv-enveloppe {
    grid-template-columns: auto 1fr;
  }

  /* Le hamburger passe avant le logo dans l'ordre visuel (order), sans
     changer l'ordre réel dans le HTML — la case à cocher doit rester
     avant .nv-panel dans le code pour que le sélecteur CSS ":checked ~"
     fonctionne, peu importe où les choses apparaissent à l'écran. */
  .nv-hamburger { order: 1; }
  .nv-marque { order: 2; }

  .nv-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--header-texte, var(--papier-vif, #fff));
    cursor: pointer;
  }
  .nv-hamburger svg {
    transition: transform .25s ease;
  }
  .nv-toggle-entree:checked ~ .nv-hamburger svg {
    transform: rotate(90deg);
  }

  /* Le panneau se superpose au contenu de la page (position: absolute,
     ancré sur .nv-entete qui est déjà "sticky" donc positionné) au lieu
     de pousser tout le reste vers le bas. L'ouverture/fermeture anime en
     douceur via max-height + opacity plutôt qu'un simple display
     none/flex, qui ne peut pas être transitionné en CSS. */
  .nv-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding-inline: var(--gouttiere, clamp(0.75rem, 2vw, 1.25rem));
    background: var(--header-fond, var(--encre, #16241D));
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-.5rem);
    transition: max-height .32s ease, opacity .22s ease, transform .28s ease;
  }
  .nv-toggle-entree:checked ~ .nv-panel {
    max-height: 32rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    padding-block: 1.25rem 1.75rem;
    border-top: 1px solid rgba(245, 243, 236, .15);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
  }

  .nv-liens {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    justify-self: auto;
    width: 100%;
  }
  .nv-liens a {
    display: block;
    width: 100%;
    font-size: 1.05rem;
  }

  .nv-actions {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .9rem;
    width: 100%;
  }
  .nv-bouton {
    width: 100%;
    text-align: center;
  }
}

/* -------------------------------------------------------------- Bannière --- */

.bn-banniere {
  position: relative;
  width: 100%;
  min-height: 49vh;
  aspect-ratio: 1920 / 780;
  max-height: 546px;
  background-size: cover;
  background-position: center;
  background-color: var(--fond-sombre, #16241D);
  display: flex;
  align-items: flex-end;
}

.bn-voile {
  width: 100%;
  padding-block: clamp(5rem, 14vw, 8rem) clamp(2.25rem, 6vw, 3.5rem);
}

.bn-etiquette {
  font-family: var(--chiffre, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--feria, #C1272D);
  display: block;
  margin-bottom: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.bn-titre {
  font-family: var(--display, "Bricolage Grotesque", Georgia, serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3.8rem);
  color: var(--papier-vif, #fff);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 .8rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .7);
}

.bn-texte {
  color: var(--papier-vif, #fff);
  opacity: .95;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  max-width: 42ch;
  margin: 0 0 1.6rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.bn-boutons {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.bn-bouton {
  display: inline-block;
  background: var(--bouton-fond, var(--feria, #C1272D));
  color: var(--bouton-texte, #fff);
  text-decoration: none;
  font-weight: 600;
  padding: .9rem 1.6rem;
}
.bn-bouton:hover {
  background: var(--bouton-fond-hover, var(--feria-sombre, #A31F24));
  color: var(--bouton-texte-hover, var(--bouton-texte, #fff));
}

.bn-bouton--creux {
  background: transparent;
  color: var(--papier-vif, #fff);
  border: 1px solid rgba(245, 243, 236, .5);
}
.bn-bouton--creux:hover {
  background: rgba(245, 243, 236, .12);
  border-color: var(--papier-vif, #fff);
}

/* ------------------------------------------------------ Réservez en ligne --- */

/* Le bandeau n'est pas une enveloppe : c'est un encadré à fond plein qui
   doit néanmoins commencer et finir exactement sur les mêmes verticales
   que le contenu des enveloppes voisines.

   L'ancienne version s'y prenait par un max-width calculé :
     max-width: calc(78rem - clamp(2.5rem, 8vw, 5rem));
   Ça ne tombait juste qu'au-delà de 1248 px de large, là où la gouttière
   atteint son plafond de 2.5rem. En dessous, la gouttière vaut 4vw, le
   max-width ne mordait plus, et le bandeau s'étalait sur 100 % de la
   largeur de son parent — collé aux deux bords de l'écran pendant que
   tout le reste gardait sa marge.

   La version ci-dessous se cale sur la même variable --gouttiere que les
   enveloppes, donc l'alignement est vrai à toutes les largeurs :
   - width : la largeur du parent moins une gouttière de chaque côté ;
   - max-width : la largeur intérieure d'une enveloppe pleine, pour que
     le bandeau ne dépasse jamais le contenu au-delà de 1248 px.

   Attention si tu déplaces le bandeau dans le HTML : il doit rester
   enfant direct d'un conteneur SANS padding latéral. Placé dans une
   .nv-enveloppe ou une .bv-enveloppe, il serait décalé deux fois. */
.rv-bandeau {
  --rv-gouttiere: var(--gouttiere, clamp(0.75rem, 2vw, 1.25rem));
  background: var(--bandeau-fond, rgba(255, 255, 255, .04));
  color: var(--papier-vif, #fff);
  border: 1px solid color-mix(in srgb, var(--feria, #C1272D) 45%, rgba(245, 243, 236, .35));
  border-radius: 10px;
  padding-block: clamp(1.5rem, 3vw, 2rem);
  /* Marge haute à 0 : l'espacement au-dessus vient du padding-bottom de
     la section précédente. Si tu veux décoller davantage le bandeau,
     remplace le 0 par la même clamp que la valeur de droite. */
  margin-block: 0 clamp(1.5rem, 4vw, 3rem);
  margin-inline: auto;
  width: calc(100% - 2 * var(--rv-gouttiere));
  max-width: calc(var(--largeur-site, 96rem) - 2 * var(--rv-gouttiere));
}

.rv-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rv-texte {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}

.rv-icone {
  color: var(--feria, #C1272D);
  flex-shrink: 0;
  margin-top: .15rem;
}

.rv-titre {
  color: var(--bandeau-titre, var(--papier-vif, #fff));
  font-weight: 700;
  margin: 0 0 .2rem;
  font-size: 1.05rem;
}

.rv-sous-titre {
  margin: 0;
  font-size: .88rem;
  color: var(--bandeau-texte, var(--sable, #D3C7AB));
  max-width: 40ch;
}

.rv-liens {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}

.rv-bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--papier-vif, #fff);
  background: rgba(245, 243, 236, .1);
  border: 1px solid rgba(245, 243, 236, .5);
  border-radius: 6px;
  padding: .6rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.rv-bouton:hover { background: rgba(245, 243, 236, .2); border-color: var(--papier-vif, #fff); }

.rv-bouton--plein {
  background: var(--bouton-fond, var(--feria, #C1272D));
  color: var(--bouton-texte, #fff);
  border-color: var(--bouton-fond, var(--feria, #C1272D));
}
.rv-bouton--plein:hover {
  background: var(--bouton-fond-hover, var(--feria-sombre, #A31F24));
  border-color: var(--bouton-fond-hover, var(--feria-sombre, #A31F24));
  color: var(--bouton-texte-hover, var(--bouton-texte, #fff));
}

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

.pd-pied {
  background: var(--footer-fond, var(--fond-sombre, var(--encre, #16241D)));
  color: var(--footer-texte, var(--sable, #D3C7AB));
  padding-block: 1.5rem;
  border-top: 1px solid rgba(211,199,171,.2);
}

.pd-interieur {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
}

.pd-liens {
  display: flex;
  gap: .5rem 1.25rem;
  flex-wrap: wrap;
  font-size: .78rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(211, 199, 171, .18);
}
.pd-liens a { color: var(--footer-texte, var(--sable, #D3C7AB)); }
.pd-liens a:hover { color: var(--papier-vif, #fff); }

.pd-interieur a { color: inherit; text-decoration: none; }
.pd-interieur a:hover { color: var(--papier-vif, #fff); }

body.theme-sombre {
  background: var(--fond-sombre, #0A0908);
  color: #F5F3EC;
}
body.theme-sombre .pr-titre,
body.theme-sombre .bv-titre,
body.theme-sombre .rz-titre,
body.theme-sombre .ct2-titre,
body.theme-sombre .lg-titre {
  color: #F5F3EC;
}
body.theme-sombre .pr-texte,
body.theme-sombre .rz-etiquette,
body.theme-sombre .ct2-etiquette {
  color: #C8C0B0;
}

body.theme-sombre .rv-bandeau {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(245, 243, 236, .22);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feria, #C1272D) 35%, transparent);
}