/**
 * custom.css — Charte Ferme de Gagnet appliquée au site.
 * Surcharge le template Platia sans le modifier (CDC §8).
 *
 * Les valeurs de la charte sont dans charte-tokens.css, chargé juste avant.
 * Ici, on ne fait que les appliquer : quel jeton pour quel composant.
 *
 * Le système en une phrase : un socle qui ne bouge jamais — logo Fg, nuit
 * #17150F, papier #F3EEE1, Quicksand — et un seul accent par écran, qui
 * bascule de l'or (visage Ferme) à la chartreuse (visage Marché) selon
 * l'attribut data-visage porté par <body>.
 *
 * Deux règles à ne pas contourner :
 *  1. Les teintes vives (or, chartreuse) ne servent JAMAIS de couleur de texte
 *     sur papier — d'où --fg-accent-texte, qui vaut la version « encre » sur
 *     fond clair et la teinte vive sur fond nuit.
 *  2. Les capitales sont réservées aux légendes et aux boutons, toujours
 *     interlettrées. Platia met ses titres de section en capitales : on les
 *     remet en casse normale plus bas.
 */

/*--------------------------------------------------------------
# 1. Du vocabulaire de la charte à celui du template
--------------------------------------------------------------*/
:root {
  /* Jetons dérivés, relevés dans l'UI Kit de la charte. Ils n'y figurent pas
     comme jetons nommés, mais y sont employés de façon constante. */
  --fg-encre-2: #3D382B;        /* Texte courant sur papier — un cran sous le nuit */
  --fg-encre-3: #6B6350;        /* Mentions, unités, contenances */
  --fg-surface: #FAF6EB;        /* Fond des cartes posées sur papier */
  --fg-nuit-survol: #2E2A1E;    /* Bouton nuit au survol */
  --fg-or-survol: #B8913F;      /* Or −8 % */
  --fg-chartreuse-survol: #B5C324; /* Chartreuse −8 % */
  --fg-accent-survol: var(--fg-or-survol);

  /* L'accent en TEXTE. Sur papier c'est la version encre (contraste AA) ;
     les blocs sombres le repassent en teinte vive, autorisée sur nuit. */
  --fg-accent-texte: var(--fg-accent-encre);

  /* Deux niveaux de texte sous le texte courant : les descriptions, puis les
     mentions et les unités. Ils sont contextuels comme --fg-accent-texte —
     un composant les emploie sans savoir s'il est posé sur papier ou sur
     nuit, et n'a donc pas à être redit pour chaque fond. */
  --fg-texte-doux: var(--fg-encre-2);
  --fg-texte-mention: var(--fg-encre-3);

  /* Vocabulaire Platia — toutes ses feuilles lisent ces variables-là. */
  --default-font: var(--fg-font-sans);
  --heading-font: var(--fg-font-sans);
  --nav-font: var(--fg-font-sans);

  --background-color: var(--fg-papier);
  --default-color: var(--fg-encre-2);
  --heading-color: var(--fg-nuit);
  --accent-color: var(--fg-accent-texte);
  --surface-color: var(--fg-surface);
  --contrast-color: var(--fg-papier);

  /* Navigation : la barre est nuit, ses liens sont crème. */
  --nav-color: var(--fg-papier);
  --nav-hover-color: var(--fg-accent);
  --nav-mobile-background-color: var(--fg-nuit);
  --nav-dropdown-background-color: var(--fg-nuit-2);
  --nav-dropdown-color: var(--fg-papier);
  --nav-dropdown-hover-color: var(--fg-accent);
}

/* La bascule doit redire --fg-accent-texte, et non se contenter de laisser
   --fg-accent-encre changer sous elle : une variable est substituée là où elle
   est déclarée. Écrit dans :root, `var(--fg-accent-encre)` y vaut déjà l'or,
   et c'est cette valeur-là qui descendrait jusqu'au Marché. */
[data-visage="marche"] {
  --fg-accent-survol: var(--fg-chartreuse-survol);
  --fg-accent-texte: var(--fg-chartreuse-encre);
}

/* Fond clair alterné : le papier foncé de la charte. */
.light-background {
  --background-color: var(--fg-papier-2);
  --surface-color: var(--fg-papier);
}

/* Blocs sombres — le nuit de la charte. Sur nuit, l'accent vif est autorisé
   en texte (7,7:1 pour l'or, 11,3:1 pour la chartreuse). */
.dark-background,
.chai-background {
  --background-color: var(--fg-nuit);
  --default-color: var(--fg-papier);
  --heading-color: var(--fg-papier);
  --surface-color: var(--fg-nuit-2);
  --contrast-color: var(--fg-papier);
  --fg-accent-texte: var(--fg-accent);
  --fg-texte-doux: color-mix(in srgb, var(--fg-papier), transparent 18%);
  --fg-texte-mention: color-mix(in srgb, var(--fg-papier), transparent 30%);
  --accent-color: var(--fg-accent);
  --nav-color: var(--fg-papier);
}

/* `chai` était un troisième fond, plus sombre encore, du temps où la palette
   comptait deux bruns. La charte n'a plus qu'un noir : la classe reste, pour
   que les sections déjà saisies en base continuent de s'afficher, mais elle
   ne fait qu'appliquer le nuit. */
.chai-background {
  background-color: var(--fg-nuit);
  color: var(--fg-papier);
}

/*--------------------------------------------------------------
# 2. Typographie et rythme général
--------------------------------------------------------------*/
body {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-corps);
  line-height: var(--fg-lh-corps);
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fg-font-sans);
  font-weight: 600;
  line-height: var(--fg-lh-titre);
  letter-spacing: 0;
  text-transform: none;
}

h1, .h1 { font-size: clamp(28px, 4.5vw, var(--fg-t-h1)); font-weight: 700; }
h2, .h2 { font-size: clamp(24px, 3.2vw, var(--fg-t-h2)); }
h3, .h3 { font-size: var(--fg-t-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--fg-t-h3); line-height: 1.25; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: var(--fg-t-corps); }

a {
  color: var(--fg-accent-texte);
  text-decoration-color: color-mix(in srgb, var(--fg-accent), transparent 45%);
}

a:hover {
  color: var(--fg-encre);
}

.dark-background a:hover,
.chai-background a:hover {
  color: var(--fg-papier);
}

/* Grille de la charte : 12 colonnes, 1200 px utiles, gouttière 24,
   marges 64 sur grand écran et 20 sur mobile. */
.container {
  max-width: calc(var(--fg-grille-max) + 40px);
  padding-inline: 20px;
}

@media (min-width: 992px) {
  .container {
    max-width: calc(var(--fg-grille-max) + 128px);
    padding-inline: var(--fg-s8);
  }
}

/* Espacement entre sections : 48 à 96 px selon la place disponible. */
.section {
  padding-block: var(--fg-s7);
}

@media (min-width: 992px) {
  .section {
    padding-block: var(--fg-s9);
  }
}

/*--------------------------------------------------------------
# 2 bis. Le mot d'émotion
# Dancing Script, six mots au plus, jamais en capitales, jamais un
# paragraphe, un prix ou une information pratique.
--------------------------------------------------------------*/
.mot-emotion {
  font-family: var(--fg-font-script);
  font-size: clamp(28px, 3.5vw, var(--fg-t-display));
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-accent-texte);
}

/*--------------------------------------------------------------
# 3. En-têtes de section
--------------------------------------------------------------*/
.section-title {
  padding-block: 0 var(--fg-s5);
  margin-bottom: var(--fg-s6);
}

/* Platia met ses titres en capitales et pose un mot fantôme en gros derrière.
   La charte réserve les capitales aux légendes : on rétablit la casse. */
.section-title h2 {
  position: relative;
  font-size: clamp(24px, 3.2vw, var(--fg-t-h2));
  font-weight: 600;
  text-transform: none;
  padding-bottom: var(--fg-s3);
  margin-bottom: var(--fg-s4);
}

.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 68px;
  height: 2px;
  transform: translateX(-50%);
  background: var(--fg-accent);
}

/* Le sur-titre est une légende, pas le mot fantôme du template : on le sort
   du positionnement absolu que Platia applique à tout span de cet en-tête. */
.section-title .description-title {
  position: static;
  display: block;
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-legende);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  color: var(--fg-accent-texte);
  margin-bottom: var(--fg-s3);
}

/* Lien d'évitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--fg-nuit);
  color: var(--fg-papier);
  padding: var(--fg-s3) var(--fg-s5);
  border-radius: 0 0 var(--fg-r-doux) 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--fg-papier);
}

/*--------------------------------------------------------------
# 4. En-tête et navigation
# Barre nuit, liens Quicksand 600 / 13,5, survol vers l'accent.
--------------------------------------------------------------*/
.header .topbar {
  font-size: var(--fg-t-petit);
  background-color: var(--fg-nuit);
  color: var(--fg-papier);
  border-bottom: 1px solid var(--fg-filet-nuit);
  padding-block: var(--fg-s2);
}

.header .topbar a,
.header .topbar i {
  color: var(--fg-papier);
}

.header .topbar a:hover,
.header .topbar .social-links a:hover {
  color: var(--fg-accent);
}

/* Platia rend son bandeau transparent au-dessus du hero et bascule les
   couleurs. Le nôtre est opaque et sombre en permanence : c'est le socle. */
.header .branding {
  --heading-color: var(--fg-papier);
  --default-color: var(--fg-papier);
  background-color: var(--fg-nuit);
  box-shadow: 0 1px 0 var(--fg-filet-nuit);
  min-height: 72px;
}

.header .logo img {
  margin-right: var(--fg-s3);
}

.header .logo .sitename {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-h3);
  font-weight: 700;
  margin: 0;
  color: var(--fg-papier);
  letter-spacing: 0;
}

.navmenu ul li a {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-petit);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fg-papier);
}

.navmenu ul li a:hover,
.navmenu ul li a.active,
.navmenu ul li:hover > a {
  color: var(--fg-accent);
}

/* Menu déroulant : surface élevée sur nuit. */
.navmenu .dropdown ul {
  background-color: var(--fg-nuit-2);
  border-radius: var(--fg-r-doux);
  box-shadow: 0 8px 28px rgba(23, 21, 15, .45);
}

.navmenu .dropdown ul a {
  color: var(--fg-papier);
}

.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active {
  color: var(--fg-accent);
}

.mobile-nav-toggle {
  color: var(--fg-papier);
}

/* Menu mobile : même socle nuit, plein écran. */
.mobile-nav-active .navmenu > ul {
  background-color: var(--fg-nuit);
  border-color: var(--fg-filet-nuit);
}

.mobile-nav-active .navmenu > ul a {
  color: var(--fg-papier);
}

/*--------------------------------------------------------------
# 5. Hero — grande photo, voile nuit
--------------------------------------------------------------*/
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
}

.hero .hero-background img,
.hero .hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deux voiles : l'oblique porte l'accroche, le second rattrape le bas de
   l'image, où les points forts tombent souvent sur du feuillage en plein
   soleil. Sans lui, la ligne de légende passe sous le seuil de lisibilité. */
.hero .hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(23, 21, 15, .6) 0%, rgba(23, 21, 15, 0) 45%),
    linear-gradient(105deg, rgba(23, 21, 15, .86) 0%, rgba(23, 21, 15, .6) 45%, rgba(23, 21, 15, .25) 100%);
}

.hero .hero-content {
  position: relative;
  z-index: 2;
  padding-block: var(--fg-s9) var(--fg-s8);
}

/* L'accroche du hero est une légende : capitales interlettrées, pas du script. */
.hero .tagline {
  display: inline-block;
  font-size: var(--fg-t-legende);
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  font-weight: 600;
  color: var(--fg-accent);
  margin-bottom: var(--fg-s4);
}

.hero .hero-title {
  color: var(--fg-papier);
  margin-bottom: var(--fg-s5);
}

.hero .hero-description {
  color: color-mix(in srgb, var(--fg-papier), transparent 8%);
  font-size: 18px;
  max-width: 46ch;
  margin-bottom: var(--fg-s6);
}

.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-s3);
  margin-bottom: var(--fg-s7);
}

.hero .hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-s6);
  padding-top: var(--fg-s5);
  border-top: 1px solid var(--fg-filet-nuit);
}

.hero .feature-item {
  display: flex;
  align-items: center;
  gap: var(--fg-s3);
  color: var(--fg-papier);
}

.hero .feature-item i {
  font-size: 22px;
  color: var(--fg-accent);
}

.hero .feature-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.hero .feature-text .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  opacity: .7;
}

.hero .feature-text .value {
  font-weight: 600;
}

/* Encart clair posé sur le nuit : on y rétablit la palette papier, sinon le
   texte crème resterait illisible sur le crème de la carte. */
.hero .booking-card {
  --default-color: var(--fg-encre-2);
  --heading-color: var(--fg-nuit);
  --surface-color: var(--fg-papier);
  --fg-accent-texte: var(--fg-accent-encre);
  --fg-texte-doux: var(--fg-encre-2);
  --fg-texte-mention: var(--fg-encre-3);
  --accent-color: var(--fg-accent-encre);
  color: var(--default-color);
  background: var(--fg-papier);
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-carte);
  padding: var(--fg-s6);
  box-shadow: 0 24px 60px rgba(23, 21, 15, .38);
}

.hero .booking-card h3 {
  color: var(--fg-nuit);
  margin-bottom: var(--fg-s2);
}

.hero .booking-card .booking-intro {
  font-size: var(--fg-t-petit);
  color: var(--fg-encre-2);
  margin-bottom: var(--fg-s5);
}

/*--------------------------------------------------------------
# 6. Boutons
# Pill 999, Quicksand 600. Taille M : 13/26. Survol : teinte −8 %.
# Un seul bouton accent par écran.
--------------------------------------------------------------*/
.btn,
.btn.btn-primary,
.btn.btn-outline {
  font-family: var(--fg-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--fg-r-pill);
  padding: 13px 26px;
  letter-spacing: 0;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Sur papier, le bouton principal est nuit : l'accent reste réservé à un seul
   appel par écran, et l'or délavé sur crème ne tient pas la lecture. */
.btn-primary,
.btn.btn-primary {
  background-color: var(--fg-nuit);
  border: 1.5px solid var(--fg-nuit);
  color: var(--fg-papier);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus-visible,
.btn.btn-primary:focus-visible {
  background-color: var(--fg-nuit-survol);
  border-color: var(--fg-nuit-survol);
  color: var(--fg-papier);
}

.btn-outline,
.btn.btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--fg-nuit);
  color: var(--fg-nuit);
  padding: 12px 25px;
}

.btn-outline:hover,
.btn.btn-outline:hover {
  background-color: rgba(23, 21, 15, .07);
  border-color: var(--fg-nuit);
  color: var(--fg-nuit);
}

/* Sur nuit, le nuit disparaîtrait : le bouton principal passe à l'accent,
   texte nuit — c'est la forme du visage Marché de l'UI Kit. */
.dark-background .btn-primary,
.dark-background .btn.btn-primary,
.chai-background .btn-primary,
.chai-background .btn.btn-primary,
.hero .hero-text .hero-actions .btn.btn-primary {
  background-color: var(--fg-accent);
  border-color: var(--fg-accent);
  color: var(--fg-nuit);
}

.dark-background .btn-primary:hover,
.dark-background .btn.btn-primary:hover,
.chai-background .btn-primary:hover,
.chai-background .btn.btn-primary:hover,
.hero .hero-text .hero-actions .btn.btn-primary:hover {
  background-color: var(--fg-accent-survol);
  border-color: var(--fg-accent-survol);
  color: var(--fg-nuit);
}

.dark-background .btn-outline,
.dark-background .btn.btn-outline,
.chai-background .btn-outline,
.chai-background .btn.btn-outline,
.hero .hero-text .hero-actions .btn.btn-outline {
  border-color: color-mix(in srgb, var(--fg-papier), transparent 60%);
  color: var(--fg-papier);
  background-color: transparent;
}

.dark-background .btn-outline:hover,
.dark-background .btn.btn-outline:hover,
.chai-background .btn-outline:hover,
.chai-background .btn.btn-outline:hover,
.hero .hero-text .hero-actions .btn.btn-outline:hover {
  background-color: color-mix(in srgb, var(--fg-papier), transparent 90%);
  border-color: var(--fg-papier);
  color: var(--fg-papier);
}

/* Platia cible les boutons du hero et de l'encart avec une spécificité plus
   forte et leur impose ses rayons de 8 px : on réaligne sur la charte. */
.hero .hero-text .hero-actions .btn,
.hero .booking-card .btn-primary {
  border-radius: var(--fg-r-pill);
  border-width: 1.5px;
  border-style: solid;
  font-size: 14px;
  padding: 13px 26px;
  transform: none;
}

.hero .hero-text .hero-actions .btn:hover,
.hero .booking-card .btn-primary:hover {
  transform: none;
}

/* L'encart de demande de visite est un bloc clair : son bouton suit la règle
   du papier, nuit sur crème. */
.hero .booking-card .btn-primary,
.hero .booking-card .btn.btn-primary {
  background-color: var(--fg-nuit);
  border-color: var(--fg-nuit);
  color: var(--fg-papier);
}

.hero .booking-card .btn-primary:hover,
.hero .booking-card .btn.btn-primary:hover {
  background-color: var(--fg-nuit-survol);
  border-color: var(--fg-nuit-survol);
}

.btn:disabled,
.btn.disabled {
  opacity: .35;
}

/* Bouton téléphone : la taille « grand » de la charte. */
.btn-tel {
  font-size: 15.5px;
  padding: 16px 32px;
}

.btn-tel i {
  margin-right: var(--fg-s2);
}

/*--------------------------------------------------------------
# 7. Bandeau de confiance (distinctions)
--------------------------------------------------------------*/
.confiance {
  padding-block: var(--fg-s7);
}

.confiance-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--fg-s5);
  margin: 0;
  text-align: center;
}

.confiance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fg-s1);
  padding-inline: var(--fg-s2);
  position: relative;
}

.confiance-item + .confiance-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--fg-filet);
}

.dark-background .confiance-item + .confiance-item::before,
.chai-background .confiance-item + .confiance-item::before {
  background: var(--fg-filet-nuit);
}

.confiance-item i {
  font-size: 28px;
  color: var(--fg-accent-texte);
  margin-bottom: var(--fg-s1);
}

.confiance-titre {
  font-family: var(--fg-font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.25;
}

.confiance-detail {
  font-size: var(--fg-t-petit);
  color: var(--fg-texte-mention);
  line-height: 1.4;
}

/*--------------------------------------------------------------
# 8. Les portes (Canards / Alcools / Gîte)
--------------------------------------------------------------*/
.porte-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--fg-r-carte);
  min-height: 380px;
  color: var(--fg-papier);
}

.porte-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.porte-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 21, 15, .92) 0%, rgba(23, 21, 15, .5) 45%, rgba(23, 21, 15, .1) 100%);
  transition: background .4s ease;
}

.porte-card:hover img {
  transform: scale(1.06);
}

.porte-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--fg-s6);
}

.porte-card-content h3 {
  color: var(--fg-papier);
  margin-bottom: var(--fg-s2);
}

.porte-card-content p {
  color: color-mix(in srgb, var(--fg-papier), transparent 15%);
  margin-bottom: var(--fg-s3);
  font-size: var(--fg-t-petit);
}

/* Sur photo assombrie, la teinte vive est lisible : c'est du nuit. */
.porte-card-lien {
  font-weight: 600;
  font-size: var(--fg-t-petit);
  color: var(--fg-accent);
}

.porte-card:hover .porte-card-lien {
  color: var(--fg-papier);
}

/*--------------------------------------------------------------
# 9. Fiches produits
# Rayon 14, image 170, contenu 20/22, prix Quicksand 700 / 19.
--------------------------------------------------------------*/
.menu-card {
  background: var(--fg-surface);
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-carte);
  overflow: hidden;
  box-shadow: var(--fg-ombre-carte);
  transition: box-shadow .3s ease, transform .3s ease;
  display: flex;
  flex-direction: column;
}

.menu-card:hover {
  box-shadow: 0 14px 36px rgba(23, 21, 15, .14);
  transform: translateY(-4px);
}

.menu-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fg-papier-2);
}

.menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le prix reste en nuit, jamais en accent : la chartreuse ne doit jamais
   toucher une étiquette produit, et l'or seul y perdrait en lisibilité. */
.menu-card-image .price-overlay {
  position: absolute;
  right: var(--fg-s3);
  bottom: var(--fg-s3);
  background: var(--fg-nuit);
  color: var(--fg-papier);
  padding: 9px 16px;
  font-weight: 700;
  font-size: var(--fg-t-petit);
  border-radius: var(--fg-r-pill);
  box-shadow: 0 2px 10px rgba(23, 21, 15, .3);
}

.menu-card-image .dietary-badges {
  position: absolute;
  left: var(--fg-s3);
  top: var(--fg-s3);
}

.badge-contenance {
  display: inline-flex;
  background: rgba(23, 21, 15, .78);
  color: var(--fg-papier);
  padding: 8px 14px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1;
  border-radius: var(--fg-r-pill);
  backdrop-filter: blur(2px);
}

.menu-card-content {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.menu-card-content h3 {
  margin-bottom: var(--fg-s2);
}

.menu-card-content > p {
  font-size: var(--fg-t-petit);
  color: var(--fg-texte-doux);
  margin-bottom: var(--fg-s4);
}

.produit-meta {
  margin: 0 0 var(--fg-s3);
  font-size: var(--fg-t-petit);
  color: var(--fg-texte-mention);
}

.produit-meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--fg-s2);
  padding-block: 2px;
}

.produit-meta i {
  color: var(--fg-accent-texte);
  margin-top: .22rem;
  flex-shrink: 0;
}

/* Médaille : pill, filet accent et pastille accent (UI Kit). */
.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fg-s2);
  background: transparent;
  color: var(--heading-color);
  border: 1.5px solid var(--fg-accent);
  padding: 7px 12px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: var(--fg-r-pill);
}

.mini-badge i {
  color: var(--fg-accent-texte);
  margin-right: 0;
}

/* Intertitre de sous-famille dans les catalogues */
.titre-famille {
  font-size: clamp(20px, 2.4vw, 24px);
  margin-bottom: var(--fg-s5);
  padding-bottom: var(--fg-s2);
  border-bottom: 1px solid var(--fg-filet);
}

.dark-background .titre-famille,
.chai-background .titre-famille {
  border-bottom-color: var(--fg-filet-nuit);
}

/* Filtres isotope : des boutons pill secondaires. */
.menu-filters ul,
.isotope-filters ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fg-s2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-filters ul li,
.isotope-filters ul li {
  cursor: pointer;
  padding: 9px 18px;
  border: 1.5px solid var(--fg-filet);
  border-radius: var(--fg-r-pill);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.menu-filters ul li:hover,
.isotope-filters ul li:hover {
  border-color: var(--fg-nuit);
  color: var(--fg-nuit);
}

.menu-filters ul li.filter-active,
.isotope-filters ul li.filter-active {
  background: var(--fg-nuit);
  border-color: var(--fg-nuit);
  color: var(--fg-papier);
}

.dark-background .menu-filters ul li,
.dark-background .isotope-filters ul li,
.chai-background .menu-filters ul li,
.chai-background .isotope-filters ul li {
  border-color: color-mix(in srgb, var(--fg-papier), transparent 60%);
  color: var(--fg-papier);
}

.dark-background .menu-filters ul li.filter-active,
.dark-background .isotope-filters ul li.filter-active,
.chai-background .menu-filters ul li.filter-active,
.chai-background .isotope-filters ul li.filter-active {
  background: var(--fg-accent);
  border-color: var(--fg-accent);
  color: var(--fg-nuit);
}

.tarifs-validite {
  font-size: var(--fg-t-petit);
  color: var(--fg-texte-mention);
}

/* La ligne de poids et de date sous la carte du bon de commande papier, page
   « Commander ». La carte, elle, est un encart de la charte : elle n'a aucun
   style propre, c'est ce qui lui donne le même poids visuel que les autres. */
.bon-papier-detail {
  opacity: 0.8;
}

/*--------------------------------------------------------------
# 10. Équipe
--------------------------------------------------------------*/
.chef-card {
  background: var(--fg-surface);
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-carte);
  overflow: hidden;
  box-shadow: var(--fg-ombre-carte);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}

.chef-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(23, 21, 15, .14);
}

.chef-card .image-wrapper {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--fg-papier-2);
}

.chef-card .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait pas encore réalisé : pastille avec l'initiale */
.portrait-initiale {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fg-font-sans);
  font-size: 5rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--fg-nuit), transparent 78%);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fg-papier), transparent 30%), transparent 62%),
    var(--fg-papier-2);
}

.chef-card .role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  font-weight: 600;
  color: var(--fg-accent-texte);
}

.chef-card .excerpt {
  font-size: var(--fg-t-petit);
  color: var(--fg-texte-doux);
}

/*--------------------------------------------------------------
# 11. Blocs sur nuit et mention alcool
--------------------------------------------------------------*/
.dark-background .menu-card,
.chai-background .menu-card,
.dark-background .chef-card,
.chai-background .chef-card {
  background: var(--fg-nuit-2);
  border-color: var(--fg-filet-nuit);
  box-shadow: none;
}

.dark-background .menu-card-image,
.chai-background .menu-card-image {
  background: var(--fg-nuit);
}

.dark-background .mini-badge,
.chai-background .mini-badge {
  color: var(--fg-papier);
}

.mention-alcool {
  display: flex;
  align-items: flex-start;
  gap: var(--fg-s3);
  max-width: 760px;
  margin: var(--fg-s7) auto 0;
  padding: var(--fg-s4) var(--fg-s5);
  border: 1px solid var(--fg-filet);
  border-left: 3px solid var(--fg-accent);
  background: var(--fg-papier-2);
  border-radius: var(--fg-r-doux);
}

.mention-alcool i {
  color: var(--fg-accent-texte);
  font-size: 18px;
  margin-top: 2px;
}

.mention-alcool p {
  margin: 0;
  font-size: var(--fg-t-petit);
  line-height: 1.55;
}

.dark-background .mention-alcool,
.chai-background .mention-alcool {
  border-color: var(--fg-filet-nuit);
  border-left-color: var(--fg-accent);
  background: var(--fg-nuit-2);
}

/*--------------------------------------------------------------
# 12. Vidéo YouTube en façade (chargée au clic)
--------------------------------------------------------------*/
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--fg-r-carte);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fg-s4);
  overflow: hidden;
}

.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 21, 15, .5);
  transition: background .3s ease;
}

.video-facade:hover::after,
.video-facade:focus-visible::after {
  background: rgba(23, 21, 15, .32);
}

.video-facade-play {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--fg-accent);
  color: var(--fg-nuit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  box-shadow: 0 6px 26px rgba(23, 21, 15, .45);
  transition: transform .3s ease;
}

.video-facade:hover .video-facade-play {
  transform: scale(1.09);
}

.video-facade-title {
  position: relative;
  z-index: 2;
  color: var(--fg-papier);
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-h3);
  font-weight: 600;
  text-align: center;
  padding-inline: var(--fg-s4);
  text-shadow: 0 2px 12px rgba(23, 21, 15, .5);
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

/*--------------------------------------------------------------
# 13. Carte, contact, formulaires
# Champs blancs, filet 1,5 px, rayon 6, filet accent au focus.
--------------------------------------------------------------*/
.carte-osm {
  width: 100%;
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-carte);
  display: block;
}

.carte-lien {
  font-size: var(--fg-t-petit);
  margin-top: var(--fg-s2);
}

.php-email-form .form-control {
  font-family: var(--fg-font-sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--fg-r-doux);
  border: 1.5px solid var(--fg-filet);
  padding: 12px 14px;
  background: var(--fg-blanc);
  color: var(--fg-nuit);
}

.php-email-form .form-control::placeholder {
  color: var(--fg-encre-3);
}

.php-email-form .form-control:focus {
  border-color: var(--fg-accent);
  box-shadow: none;
  outline: none;
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  color: var(--fg-texte-doux);
  margin-bottom: var(--fg-s2);
}

/* Champ piège anti-spam : invisible pour l'humain, rempli par les robots */
.champ-piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info-contact-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-contact-liste li {
  display: flex;
  gap: var(--fg-s4);
  padding-block: var(--fg-s3);
  border-bottom: 1px solid var(--fg-filet);
}

.dark-background .info-contact-liste li,
.chai-background .info-contact-liste li {
  border-bottom-color: var(--fg-filet-nuit);
}

.info-contact-liste li:last-child {
  border-bottom: 0;
}

.info-contact-liste i {
  font-size: 20px;
  color: var(--fg-accent-texte);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-contact-liste strong {
  display: block;
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-h3);
  font-weight: 600;
  color: var(--heading-color);
}

/*--------------------------------------------------------------
# 14. Appel à l'action téléphone
--------------------------------------------------------------*/
.appel {
  background-image: linear-gradient(rgba(23, 21, 15, .9), rgba(23, 21, 15, .9));
  background-size: cover;
  background-position: center;
  padding-block: var(--fg-s9);
}

.appel-texte {
  max-width: 52ch;
  margin: 0 auto var(--fg-s6);
  font-size: 18px;
  color: color-mix(in srgb, var(--fg-papier), transparent 10%);
}

.appel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-s3);
  justify-content: center;
  margin-bottom: var(--fg-s4);
}

.appel-mobile {
  font-size: var(--fg-t-petit);
  color: color-mix(in srgb, var(--fg-papier), transparent 25%);
}

.appel-mobile a {
  color: var(--fg-accent);
}

/*--------------------------------------------------------------
# 15. Bandeau de titre des pages intérieures
--------------------------------------------------------------*/
.page-title {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: 9rem var(--fg-s8);
  margin-bottom: 0;
}

.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 21, 15, .82), rgba(23, 21, 15, .66));
}

.page-title .container {
  position: relative;
  z-index: 2;
}

.page-title h1 {
  color: var(--fg-papier);
  margin-bottom: var(--fg-s3);
}

.page-title p {
  color: color-mix(in srgb, var(--fg-papier), transparent 10%);
  max-width: 60ch;
  font-size: 18px;
  margin-bottom: var(--fg-s4);
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-s2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fg-t-petit);
  color: color-mix(in srgb, var(--fg-papier), transparent 30%);
}

.page-title .breadcrumbs ol li + li::before {
  content: "/";
  padding-right: var(--fg-s2);
  opacity: .6;
}

.page-title .breadcrumbs a {
  color: var(--fg-accent);
}

.page-title .breadcrumbs a:hover {
  color: var(--fg-papier);
}

/*--------------------------------------------------------------
# 16. Blocs éditoriaux divers
--------------------------------------------------------------*/
.bloc-image {
  border-radius: var(--fg-r-carte);
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(23, 21, 15, .16);
}

.bloc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.liste-atouts {
  list-style: none;
  padding: 0;
  margin: var(--fg-s5) 0 0;
}

.liste-atouts li {
  display: flex;
  gap: var(--fg-s3);
  padding-block: var(--fg-s2);
}

.liste-atouts i {
  color: var(--fg-accent-texte);
  font-size: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

.encart-info {
  background: var(--surface-color);
  border: 1px solid var(--fg-filet);
  border-left: 3px solid var(--fg-accent);
  padding: var(--fg-s5) var(--fg-s6);
  border-radius: var(--fg-r-doux);
  box-shadow: var(--fg-ombre-carte);
}

.dark-background .encart-info,
.chai-background .encart-info {
  border-color: var(--fg-filet-nuit);
  border-left-color: var(--fg-accent);
  box-shadow: none;
}

.encart-info h3 {
  margin-bottom: var(--fg-s3);
}

.encart-info h3 i {
  color: var(--fg-accent-texte);
}

/* Tableau de la charte : en-tête en légende capitale sur filet nuit 2 px,
   lignes séparées d'un filet papier, prix à droite en 700. */
.tableau-port {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 14px;
}

.tableau-port th,
.tableau-port td {
  padding: 11px 8px;
  text-align: left;
  border-bottom: 1px solid var(--fg-filet);
}

.tableau-port thead th {
  background: transparent;
  color: var(--heading-color);
  font-family: var(--fg-font-sans);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-block: var(--fg-s3);
  border-bottom: 2px solid var(--fg-nuit);
}

.tableau-port td:first-child {
  font-weight: 600;
}

.tableau-port th:last-child,
.tableau-port td:last-child {
  text-align: right;
  font-weight: 700;
}

.tableau-port tbody tr:last-child td {
  border-bottom: 0;
}

.dark-background .tableau-port th,
.dark-background .tableau-port td,
.chai-background .tableau-port th,
.chai-background .tableau-port td {
  border-bottom-color: var(--fg-filet-nuit);
}

.dark-background .tableau-port thead th,
.chai-background .tableau-port thead th {
  border-bottom-color: var(--fg-papier);
}

.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fg-s4);
}

.galerie-grille a {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--fg-r-carte);
}

.galerie-grille img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.galerie-grille a:hover img {
  transform: scale(1.07);
}

/* Bouton de remontée : pastille accent, picto nuit. */
.scroll-top {
  background-color: var(--fg-accent);
  border-radius: var(--fg-r-pill);
}

.scroll-top i {
  color: var(--fg-nuit);
}

.scroll-top:hover {
  background-color: var(--fg-accent-survol);
}

/*--------------------------------------------------------------
# 17. Pied de page
# Nuit, liseré dégradé or → chartreuse de 4 px, signature en script.
--------------------------------------------------------------*/
.footer {
  position: relative;
  padding-top: var(--fg-s8);
}

/* Le seul endroit du site où les deux accents se côtoient : le liseré du
   pied de page, qui dit que la ferme et le stand sont la même maison. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--fg-or), var(--fg-chartreuse));
}

/* Scopé au bloc-marque : le même mot sert de <strong> dans le copyright,
   où il doit rester à la taille de la ligne. */
.footer .logo .sitename {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-h3);
  font-weight: 700;
  margin-left: var(--fg-s3);
  color: var(--fg-papier);
}

/* Le carré noir fait partie du bloc-marque livré : on ne l'arrondit pas,
   on ne le recolore pas, on ne lui ajoute ni ombre ni halo. */
.footer .logo img,
.header .logo img {
  border-radius: 0;
}

/* Signature : mot d'émotion en script, dans l'accent. */
.footer-signature {
  font-family: var(--fg-font-script);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-accent);
  margin-bottom: var(--fg-s4);
}

.footer .category-title {
  font-family: var(--fg-font-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--fg-papier), transparent 45%);
  margin-bottom: var(--fg-s4);
}

.footer a {
  color: var(--fg-papier);
  font-size: var(--fg-t-petit);
  text-decoration: none;
}

.footer a:hover {
  color: var(--fg-accent);
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul li {
  padding-block: var(--fg-s1);
}

.footer .footer-links i {
  font-size: 10px;
  color: var(--fg-accent);
  margin-right: var(--fg-s1);
}

.footer .contact-item {
  display: flex;
  gap: var(--fg-s3);
  margin-bottom: var(--fg-s3);
}

.footer .contact-icon i {
  color: var(--fg-accent);
  font-size: 16px;
}

.footer .contact-info p {
  margin: 0;
  font-size: var(--fg-t-petit);
  line-height: 1.6;
}

.footer-bottom {
  margin-top: var(--fg-s7);
  padding-top: var(--fg-s5);
  border-top: 1px solid var(--fg-filet-nuit);
  text-align: center;
}

.footer-alcool {
  font-size: var(--fg-t-petit);
  color: color-mix(in srgb, var(--fg-papier), transparent 35%);
  max-width: 62ch;
  margin-inline: auto;
}

.footer .copyright p {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--fg-papier), transparent 50%);
  margin: 0;
}

/*--------------------------------------------------------------
# 18. Page 404
--------------------------------------------------------------*/
.erreur-404 {
  text-align: center;
  padding-block: var(--fg-s9);
}

.erreur-404 .code {
  font-family: var(--fg-font-sans);
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fg-filet);
  margin-bottom: var(--fg-s2);
}

/*--------------------------------------------------------------
# 19. Reprises de spécificité
#
# Platia écrit certaines de ses règles très profondément — par exemple
# `.menu .menu-grid .menu-card .menu-card-image .price-overlay`. Une classe
# seule ne peut pas les surcharger, quel que soit l'ordre des feuilles :
# c'est la spécificité qui tranche, pas la position.
#
# On les reprend ici, sélecteur pour sélecteur, et nulle part ailleurs :
# regroupées, elles se relisent et se retirent d'un bloc le jour où le
# template changera. Aucune ne fait autre chose que réappliquer la charte
# déjà décrite plus haut — pas de valeur nouvelle, et jamais de !important.
--------------------------------------------------------------*/

/* Fiches produits : rayon 14, fond crème, filet, ombre de la charte. */
.menu .menu-grid .menu-card {
  background-color: var(--fg-surface);
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-carte);
  box-shadow: var(--fg-ombre-carte);
}

.menu .menu-grid .menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(23, 21, 15, .14);
}

.dark-background .menu .menu-grid .menu-card,
.menu.dark-background .menu-grid .menu-card,
.menu.chai-background .menu-grid .menu-card {
  background-color: var(--fg-nuit-2);
  border-color: var(--fg-filet-nuit);
  box-shadow: none;
}

/* La photo produit est cadrée par son rapport, pas par une hauteur fixe :
   les bocaux et les bouteilles n'ont pas la même silhouette. */
.menu .menu-grid .menu-card .menu-card-image {
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--fg-papier-2);
}

/* Le prix reste en nuit : la chartreuse ne touche jamais une étiquette. */
.menu .menu-grid .menu-card .menu-card-image .price-overlay {
  background-color: var(--fg-nuit);
  color: var(--fg-papier);
  padding: 9px 16px;
  border-radius: var(--fg-r-pill);
  font-size: var(--fg-t-petit);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(23, 21, 15, .3);
}

/* Contenance : badge pill de la charte, en capitales interlettrées. */
.menu .menu-grid .menu-card .menu-card-image .dietary-badges span {
  background-color: rgba(23, 21, 15, .78);
  color: var(--fg-papier);
  padding: 8px 14px;
  border-radius: var(--fg-r-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.menu .menu-grid .menu-card .menu-card-content {
  padding: 20px 22px 22px;
}

.menu .menu-grid .menu-card .menu-card-content p {
  color: var(--fg-texte-doux);
  font-size: var(--fg-t-petit);
  line-height: var(--fg-lh-corps);
}

/* Titres : la charte fixe H1 à 40 px, hero et bandeaux compris. */
.hero .hero-text .hero-title,
.page-title h1 {
  font-size: clamp(28px, 4.5vw, var(--fg-t-h1));
  font-weight: 700;
  line-height: var(--fg-lh-titre);
}

/* Accroche du hero et intitulés des points forts : ce sont des légendes —
   12 px, capitales, interlettrage .12em. */
.hero .hero-text .tagline {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-legende);
  letter-spacing: var(--fg-ls-legende);
  color: var(--fg-accent);
  margin-bottom: var(--fg-s4);
}

.hero .hero-text .hero-features .feature-item .feature-text .label {
  font-size: 11px;
  letter-spacing: var(--fg-ls-legende);
  color: color-mix(in srgb, var(--fg-papier), transparent 30%);
}

.hero .hero-text .hero-features .feature-item i {
  font-size: 22px;
  color: var(--fg-accent);
}

/* Pied de page : le texte courant en petit, la signature en script. */
.footer .footer-content p {
  font-size: var(--fg-t-petit);
  line-height: var(--fg-lh-corps);
  color: color-mix(in srgb, var(--fg-papier), transparent 25%);
}

.footer .footer-content p.footer-signature {
  font-family: var(--fg-font-script);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-accent);
  margin-bottom: var(--fg-s4);
}

/* Le nom de la marque garde la graisse de la charte, pas celle du template. */
.footer .footer-content .logo span {
  font-family: var(--fg-font-sans);
  font-size: var(--fg-t-h3);
  letter-spacing: 0;
  color: var(--fg-papier);
}

/* Portraits de l'équipe : le fond de vignette suit le papier, pas l'accent. */
.chefs .team-grid .chef-card {
  border-color: var(--fg-filet);
  box-shadow: var(--fg-ombre-carte);
}

.chefs .team-grid .chef-card .image-wrapper {
  background: var(--fg-papier-2);
}

/*--------------------------------------------------------------
# 20. Carrousel d'actualités
--------------------------------------------------------------*/

/* Le carrousel réutilise la vignette « porte-card » : il n'y a ici que ce que
   le défilement impose, et rien sur l'apparence des cartes elles-mêmes. */

.actualites-carrousel {
  /* Place pour les pastilles de pagination, qui sortent du cadre des cartes. */
  padding-bottom: 2.5rem;
}

/* Sans cela, une diapositive prend la hauteur de la plus haute et les cartes
   ne se touchent plus par le bas. */
.actualites-carrousel .swiper-slide {
  height: auto;
}

.actualites-carrousel .swiper-pagination {
  bottom: 0;
}

.actualites-carrousel .swiper-pagination-bullet-active {
  background: var(--fg-accent);
}

/* Une actualité sans photo garde un fond lisible : le dégradé de la vignette
   est fait pour poser du texte clair sur une image, il ne suffit pas seul. */
.porte-card-sans-photo {
  background: var(--fg-nuit);
}

/*--------------------------------------------------------------
# 21. Adaptations mobiles
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .hero {
    min-height: auto;
  }

  .hero .hero-content {
    padding-block: 8rem var(--fg-s7);
  }

  .hero .booking-card {
    margin-top: var(--fg-s7);
  }

  .confiance-item + .confiance-item::before {
    display: none;
  }

  .page-title {
    padding-block: 7.5rem var(--fg-s6);
  }
}

@media (max-width: 575px) {
  .hero .hero-features {
    gap: var(--fg-s4);
  }

  .btn-tel {
    width: 100%;
  }

  .appel-actions .btn {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# 22. Appel à l'action du menu
# Une entrée de menu marquée `cta` en base devient un bouton plein.
# Le site vend : la porte d'entrée de la commande ne peut pas avoir
# le même poids visuel qu'un lien de navigation parmi six autres.
--------------------------------------------------------------*/
.navmenu ul li a.nav-cta {
  background: var(--fg-accent);
  color: var(--fg-nuit);
  font-size: var(--fg-t-corps);
  font-weight: 700;
  padding: 10px 22px;
  margin-left: var(--fg-s3);
  border-radius: var(--fg-r-pill);
  box-shadow: 0 2px 10px rgba(23, 21, 15, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}

.navmenu ul li a.nav-cta:hover,
.navmenu ul li:hover > a.nav-cta,
.navmenu ul li a.nav-cta.active {
  color: var(--fg-nuit);
  background: var(--fg-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(23, 21, 15, .38);
}

/* La page en cours reste signalée, mais par un liseré : le bouton est déjà
   la couleur d'accent, il ne peut pas se mettre en avant deux fois. */
.navmenu ul li a.nav-cta.active {
  box-shadow: 0 0 0 3px rgba(201, 161, 78, .35);
}

/* Menu mobile : le bouton garde son fond, mais reprend toute la largeur —
   à mi-hauteur d'un menu plein écran, une pilule flottante se perd. */
.mobile-nav-active .navmenu a.nav-cta {
  display: block;
  color: var(--fg-nuit);
  margin: var(--fg-s3) 0 0;
  text-align: center;
}

/*--------------------------------------------------------------
# 23. Bon de commande en ligne
# Reprend la lecture du bon de commande papier : une ligne par
# produit, la quantité à droite, le montant qui apparaît dès
# qu'elle est saisie.
--------------------------------------------------------------*/
.commande-etapes .liste-atouts {
  margin-bottom: 0;
}

.commande-titre {
  margin-bottom: var(--fg-s5);
}

.commande-famille {
  margin-bottom: var(--fg-s7);
}

.commande-famille-titre {
  font-size: var(--fg-t-h3);
  padding-bottom: var(--fg-s2);
  margin-bottom: var(--fg-s3);
  border-bottom: 2px solid var(--fg-nuit);
}

.commande-sous-famille {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--fg-ls-legende);
  color: var(--fg-texte-doux);
  margin: var(--fg-s5) 0 var(--fg-s2);
}

.commande-ligne {
  display: grid;
  grid-template-columns: 1fr auto 92px 110px;
  gap: var(--fg-s3);
  align-items: center;
  padding: var(--fg-s3) var(--fg-s2);
  border-bottom: 1px solid var(--fg-filet);
}

/* Une ligne dont la quantité est saisie se détache : sur un catalogue de
   trente produits, c'est ce qui permet de relire sa commande d'un coup d'œil
   sans faire défiler jusqu'au récapitulatif. */
.commande-ligne-remplie {
  background: var(--fg-papier-2);
  border-radius: var(--fg-r-doux);
}

.commande-produit label {
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.commande-contenance {
  display: inline-block;
  margin-left: var(--fg-s2);
  font-size: var(--fg-t-legende);
  color: var(--fg-texte-doux);
}

/* Conserve / semi-conserve : deux lignes distinctes pour le même bocal, comme
   sur le bon de commande papier. La pastille est ce qui les différencie à la
   lecture — sans elle, on croit à un doublon. */
.commande-version {
  display: inline-block;
  margin-left: var(--fg-s2);
  padding: 2px 9px;
  font-size: var(--fg-t-legende);
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--fg-filet);
  border-radius: var(--fg-r-pill);
  background: var(--fg-papier-2);
  color: var(--fg-encre-2);
}

.commande-ligne-remplie .commande-version {
  background: var(--fg-blanc);
}

.commande-prix {
  white-space: nowrap;
  font-size: 14px;
  color: var(--fg-texte-doux);
}

.commande-quantite .form-control {
  text-align: center;
  padding: 8px;
  border: 1.5px solid var(--fg-filet);
  border-radius: var(--fg-r-doux);
  background: var(--fg-blanc);
  color: var(--fg-nuit);
  font-weight: 600;
}

.commande-quantite .form-control:focus {
  border-color: var(--fg-accent);
  box-shadow: none;
  outline: none;
}

.commande-montant {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.commande-recap {
  border-left-width: 5px;
}

.commande-recap-vide {
  color: var(--fg-texte-doux);
  font-size: 14px;
  margin-bottom: 0;
}

.commande-totaux {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--fg-s2) var(--fg-s4);
  margin: 0 0 var(--fg-s4);
}

.commande-totaux dt {
  font-weight: 500;
}

.commande-totaux dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.commande-totaux .commande-total-general {
  font-size: var(--fg-t-h3);
  font-weight: 700;
  padding-top: var(--fg-s2);
  border-top: 2px solid var(--fg-nuit);
}

/* Les trois zones de message ne s'affichent qu'au moment où elles ont quelque
   chose à dire. Le masquage est posé ici, sur nos propres formulaires, et non
   laissé à la feuille du template : il est fonctionnel et non décoratif — une
   page qui annonce « commande envoyée » avant le moindre clic ment au
   visiteur. Le rendre tributaire d'une classe reprise du template, c'est
   accepter qu'il tombe le jour où cette classe change de nom.

   Les afficher reste possible : `d-block` de Bootstrap vaut
   `display: block !important` et l'emporte, c'est ce qu'emploie gagnet.js. */
.form-gagnet .loading,
.form-gagnet .error-message,
.form-gagnet .sent-message {
  display: none;
}

/* Les erreurs de commande arrivent en plusieurs lignes — une par champ
   manquant. Sans ceci, elles s'afficheraient d'un seul tenant. */
.form-commande .error-message {
  white-space: pre-line;
}

.commande-secours {
  display: inline-block;
  margin-top: var(--fg-s2);
  font-weight: 600;
}

@media (max-width: 575px) {
  /* Deux colonnes : la désignation et son prix sur la première ligne, la
     quantité et le montant sur la seconde. Une grille à quatre colonnes
     rendrait les champs inutilisables au doigt. */
  .commande-ligne {
    grid-template-columns: 1fr 110px;
    gap: var(--fg-s2);
  }

  .commande-produit {
    grid-column: 1 / -1;
  }

  .commande-prix {
    grid-column: 1;
  }

  .commande-quantite {
    grid-column: 2;
  }

  .commande-montant {
    grid-column: 1 / -1;
    text-align: right;
  }

  .commande-montant:empty {
    display: none;
  }
}

/* Respect du réglage système « animations réduites ».
   On rend aussi les éléments AOS immédiatement visibles : sans cela,
   ils resteraient à opacity 0 puisque plus rien ne déclenche la révélation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }

  .porte-card:hover img,
  .galerie-grille a:hover img {
    transform: none;
  }
}