/*
Theme Name: Bel Ami Comptoir
Theme URI: https://belami-lyon.fr
Author: Bel Ami
Description: Seconde direction graphique pour le Bistrot Bel Ami. Registre de comptoir : blanc cassé, vert de devanture, grande serif editoriale, photo souveraine et sections alternees. Meme contenu et memes donnees que le theme Bel Ami, autre ecriture.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: belami-comptoir
*/

/* ---------------------------------------------------------------
   1. Jetons
   Palette tiree de la photo d'assiettes : le bois, la terracotta,
   les herbes. Aucune couleur primaire, aucun aplat sature : la
   photo doit rester la seule chose colorée de la page.
--------------------------------------------------------------- */
:root {
  --papier:   #FBF9F5;
  --papier-2: #F4F0E8;
  --encre:    #23211D;
  --gris:     #6F6A61;
  --grege:    #EAE4DA;
  /* Le vert de la devanture du 34 rue Sergent Blandan, et l'accent du
     thème Bel Ami : les deux directions partagent la couleur de la maison. */
  --vert:     #163A2C;
  --olive:    #55603F;
  --trait:    rgba(35, 33, 29, 0.14);
  --trait-clair: rgba(251, 249, 245, 0.22);

  --titre: Newsreader, Georgia, "Times New Roman", serif;
  --texte: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Marge laterale unique : tout s'aligne dessus, y compris l'entete. */
  --marge: clamp(20px, 5.5vw, 68px);
  --wrap: 1280px;
  --entete: 64px;

  /* Respiration verticale entre deux sections. */
  --souffle: clamp(64px, 11vw, 132px);
}

@media (min-width: 900px) {
  :root { --entete: 78px; }
}

/* ---------------------------------------------------------------
   2. Bases
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--encre); color: var(--papier);
  padding: 12px 18px;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
   3. Rythme typographique
   Une seule echelle, en clamp : pas de media query sur les titres.
--------------------------------------------------------------- */
.display {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.6rem, 7.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}

.titre {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.017em;
}

.titre--petit {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Micro-libelle en capitales : avec la navigation (demande de Pierre le
   2026-10-21), la seule chose en capitales sur le site, donc le repere de
   rubrique. */
.label {
  font-family: var(--texte);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0;
}

.label--vert { color: var(--vert); }

.chapeau {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  line-height: 1.45;
  color: var(--encre);
}

.texte { color: var(--gris); max-width: 62ch; }
.texte + .texte { margin-top: 1em; }

.mesure { max-width: 46ch; }

/* ---------------------------------------------------------------
   4. Gabarit
--------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: var(--souffle); }
.section--serre { padding-block: clamp(44px, 7vw, 78px); }
.section--grege { background: var(--papier-2); }
.section--encre { background: var(--encre); color: var(--papier); }
.section--encre .texte { color: rgba(251, 249, 245, 0.72); }
.section--encre .label { color: rgba(251, 249, 245, 0.6); }

/* Bandeau d'affirmation : une phrase qu'on isole sur l'aplat de la maison.
   Distinct du bandeau encre, réservé lui à la signature du lieu. */
.section--vert { background: var(--vert); color: var(--papier); }
.section--vert .texte { color: rgba(251, 249, 245, 0.75); }
.section--vert .label { color: rgba(251, 249, 245, 0.6); }
.section--vert .phrase-isolee { color: var(--papier); }

.filet { border-top: 1px solid var(--trait); }

/* ---------------------------------------------------------------
   4 bis. Couleurs de fond réglables
   Une classe par couleur de la palette, posée par belami_comptoir_fond()
   d'après Personnaliser. « fond-sombre » passe tout le texte du bloc en
   clair : c'est ce qui permet de changer un fond sans rien casser.
--------------------------------------------------------------- */
.fond--blanc { background: var(--papier); }
.fond--creme { background: var(--papier-2); }
.fond--grege { background: var(--grege); }
.fond--vert  { background: var(--vert); }
.fond--encre { background: var(--encre); }

/* Sur le grège, le gris des onglets et des emplacements photo se fondrait. */
.fond--grege .onglets,
.fond--grege .photo-vide { background: var(--papier-2); }

.fond-sombre { color: var(--papier); }
.fond-sombre.filet { border-top-color: var(--trait-clair); }

.fond-sombre .texte,
.fond-sombre .manifeste__note,
.fond-sombre .mention-evolutive,
.fond-sombre .plats__prix,
.fond-sombre .horaires dd,
.fond-sombre address { color: rgba(251, 249, 245, 0.74); }

.fond-sombre .label,
.fond-sombre .label--vert { color: rgba(251, 249, 245, 0.6); }

.fond-sombre .chapeau,
.fond-sombre .pilier__chiffre,
.fond-sombre .formule__prix { color: var(--papier); }

.fond-sombre .fleche,
.fond-sombre address a { border-bottom-color: var(--trait-clair); }

.fond-sombre .plats,
.fond-sombre .plats li,
.fond-sombre .horaires > div { border-color: var(--trait-clair); }
.fond-sombre .plats__pointilles { border-bottom-color: var(--trait-clair); }

/* Le bouton plein est vert : sur un fond vert il disparaîtrait. Il passe en
   pastille claire, et se vide au survol. */
.fond-sombre .bouton {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--encre);
}
.fond-sombre .bouton:hover {
  background: transparent;
  border-color: var(--papier);
  color: var(--papier);
}

/* ---------------------------------------------------------------
   5. Entete
   Transparente sur le hero, opaque des qu'on defile : la photo
   commence sous la barre au lieu de commencer apres.
--------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--entete);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.est-pose {
  background: var(--vert);
  border-bottom-color: transparent;
}

/* Sur l'aplat vert, tout le contenu de la barre passe en papier.
   Exception sur la navigation ouverte : le panneau mobile démarre SOUS la
   barre et il est en papier plein écran, donc ses entrées restent sombres. */
.site-header.est-pose .brand__logo,
.site-header.est-pose .nav:not([data-ouvert="1"]) a { color: var(--papier); }
.site-header.est-pose .nav-toggle__trait,
.site-header.est-pose .nav-toggle__trait::before,
.site-header.est-pose .nav-toggle__trait::after { background: var(--papier); }

.site-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: 104px; height: auto; color: var(--vert); }

/* Sur le hero mobile la barre flotte au-dessus de la photo : le logo
   passe en blanc cassé pour rester lisible sur le bois.
   Le `:not([data-ouvert="1"])` sur la navigation n'est pas décoratif : une
   fois le panneau mobile ouvert, ce n'est plus la photo qui est derrière les
   entrées mais un aplat de papier plein écran. Sans cette exclusion, le menu
   s'affiche en blanc cassé sur blanc cassé, donc invisible. */
.hero-sombre .site-header:not(.est-pose) .brand__logo,
.hero-sombre .site-header:not(.est-pose) .nav:not([data-ouvert="1"]) a,
.hero-sombre .site-header:not(.est-pose) .nav-toggle__trait { color: var(--papier); }
.hero-sombre .site-header:not(.est-pose) .nav-toggle__trait,
.hero-sombre .site-header:not(.est-pose) .nav-toggle__trait::before,
.hero-sombre .site-header:not(.est-pose) .nav-toggle__trait::after { background: var(--papier); }

.nav { margin-left: auto; }

.nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

/* Navigation en capitales, demande de Pierre le 2026-10-21. Corps réduit et
   lettres espacées : à 0.94rem comme avant, des capitales crieraient.
   « Réserver » n'est pas dans .nav, il garde sa casse. */
.nav a {
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
.nav a:hover::after,
.nav .current-menu-item > a::after { transform: scaleX(1); }

/* Bouton réserver, à droite de la navigation.
   Le sélecteur passe par .site-header à dessein : à spécificité égale,
   « .bouton { display: inline-flex } » est déclaré plus bas et l'emporterait,
   ce qui ferait réapparaître le bouton sur mobile alors que la barre d'appel
   fixe le propose déjà en permanence. */
.site-header .entete-resa {
  margin-left: clamp(18px, 2.4vw, 34px);
  display: none;
}

@media (min-width: 900px) {
  .site-header .entete-resa { display: inline-flex; }
}

/* Fond sombre derrière la barre : le bouton passe en contour clair plutôt
   qu'en pastille pleine, pour ne pas voler la vedette au titre du hero.
   Il se remplit au survol, ce qui garde un signal d'action franc. */
.site-header.est-pose .entete-resa,
.hero-sombre .site-header:not(.est-pose) .entete-resa {
  background: transparent;
  color: var(--papier);
  border-color: rgba(251, 249, 245, 0.55);
}
.site-header.est-pose .entete-resa:hover,
.hero-sombre .site-header:not(.est-pose) .entete-resa:hover {
  background: var(--papier); border-color: var(--papier); color: var(--vert);
}

.nav-toggle {
  position: relative;
  margin-left: auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}

.nav-toggle__trait,
.nav-toggle__trait::before,
.nav-toggle__trait::after {
  display: block; width: 22px; height: 1.5px;
  background: var(--encre);
  transition: transform 220ms ease, opacity 160ms ease;
}
.nav-toggle__trait::before, .nav-toggle__trait::after { content: ""; position: absolute; }
.nav-toggle__trait::before { transform: translateY(-7px); }
.nav-toggle__trait::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__trait { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__trait::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__trait::after  { transform: rotate(-45deg); }

/* Navigation mobile : plein ecran, une entree par ligne, grande. */
@media (max-width: 899px) {
  .nav {
    position: fixed;
    inset: var(--entete) 0 0 0;
    background: var(--papier);
    padding: clamp(28px, 8vw, 56px) var(--marge);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
    overflow-y: auto;
  }
  .nav[data-ouvert="1"] { opacity: 1; transform: none; visibility: visible; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav a {
    font-family: var(--titre);
    font-weight: 300;
    /* Un peu plus petit qu'en casse normale : « INFOS PRATIQUES » doit
       tenir sur une ligne à 360 px de large (mesuré : 275 px sur 320). */
    font-size: clamp(1.75rem, 7.6vw, 2.4rem);
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--encre);
  }
  .nav a::after { display: none; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* Bascule FR · EN, au bout de la barre sur ordinateur, entre le logo et le
   bouton du menu sur téléphone : un touriste doit la trouver sans ouvrir le
   menu. Même couleur que la navigation, quel que soit le fond. */
.langues {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre);
}
.site-header.est-pose .langues,
.hero-sombre .site-header:not(.est-pose) .langues { color: var(--papier); }

.langues__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 3px;
  text-decoration: none;
  color: inherit;
  opacity: 0.6;
  transition: opacity 160ms ease;
}
.langues__lien:hover,
.langues__lien[aria-current="true"] { opacity: 1; }
.langues__point { opacity: 0.45; }

@media (max-width: 899px) {
  .brand { order: 1; }
  .site-header .langues { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 6px; }
}

@media (min-width: 900px) {
  .site-header .langues { margin-left: clamp(16px, 2vw, 26px); }
}

/* ---------------------------------------------------------------
   5 bis. Bandeau d'introduction de page

   Le principe repris du Comptoir des Résistants : hors accueil, la barre du
   haut et le premier bloc de la page ne font qu'un seul aplat vert. La page
   s'ouvre donc sur une masse de couleur, pas sur un titre posé sur du blanc.

   La marge négative est la clé : le bandeau remonte SOUS la barre fixe et
   reprend sa hauteur en rembourrage. Résultat, aucune couture possible entre
   les deux, et une page qui n'utiliserait pas le bandeau garde quand même le
   décalage de sécurité posé sur le corps.
--------------------------------------------------------------- */
.entete-page {
  background: var(--vert);
  color: var(--papier);
  margin-top: calc(var(--entete) * -1);
  padding-top: calc(var(--entete) + clamp(34px, 6vw, 68px));
  padding-bottom: clamp(44px, 7vw, 88px);
}

.entete-page .label { color: rgba(251, 249, 245, 0.60); }
.entete-page .display { color: var(--papier); }
.entete-page .chapeau { color: rgba(251, 249, 245, 0.78); }

/* Le titre d'une page intérieure n'est pas une enseigne : on descend d'un
   cran sous l'échelle du hero, sinon quatre mots occupent tout l'écran. */
.entete-page .display { font-size: clamp(2.3rem, 5.6vw, 4rem); }

.entete-page a { color: var(--papier); }

/* ---------------------------------------------------------------
   6. Boutons et liens flechés
--------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  /* Le vert de la maison, pas du noir : un appel à l'action doit porter la
     couleur de l'enseigne, c'est ce qui le rend reconnaissable d'une page à
     l'autre. Le survol descend d'un ton plutôt que de changer de teinte. */
  background: var(--vert);
  color: var(--papier);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--vert);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease;
}
.bouton:hover { background: #102E22; border-color: #102E22; color: var(--papier); }

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

.bouton--clair {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--papier);
}
.bouton--clair:hover { background: var(--vert); border-color: var(--vert); color: var(--papier); }

.bouton--petit { padding: 9px 20px; font-size: 0.85rem; }

/* Lien fleché : le motif de navigation interne du site. */
.fleche {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--trait);
  transition: gap 220ms ease, border-color 220ms ease;
}
.fleche::after { content: "\2192"; transition: transform 220ms ease; }
.fleche:hover { gap: 14px; border-bottom-color: currentColor; }
.fleche:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------
   7. Hero
   Un seul bloc, sur le modèle du Comptoir des Résistants : la photo
   en plein cadre, un voile sombre réglable, le texte centré dessus.
   Le texte reste du vrai texte HTML, sélectionnable et lu par Google.

   Tout ce qui se règle dans Personnaliser arrive en variables CSS
   posées sur le bloc (voir belami_comptoir_hero()) :
     --focus-m / --focus-d  point de focus, téléphone / ordinateur
     --voile-m / --voile-d  opacité du voile, téléphone / ordinateur
--------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Un peu moins que l'écran entier sur téléphone : le bloc suivant
     dépasse en bas et invite à défiler, comme sur la référence. */
  min-height: max(560px, 86svh);
  padding: calc(var(--entete) + 28px) var(--marge) 52px;
  /* Sans photo réglée, l'aplat reste sombre : le texte clair y est lisible. */
  background: var(--encre);
  color: var(--papier);
  text-align: center;
}

.hero__fond,
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__fond { display: block; z-index: -2; }

.hero__image {
  object-fit: cover;
  object-position: var(--focus-m, 50% 50%);
}

/* Le voile : un aplat uni, dont seule l'opacité se règle. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(26, 24, 21);
  opacity: var(--voile-m, 0.45);
  pointer-events: none;
}

/*
 * Dégradé de sécurité sous la barre du haut : même voile à zéro, le logo
 * et la navigation restent lisibles sur une photo claire.
 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: calc(var(--entete) + 60px);
  background: linear-gradient(to bottom, rgba(26, 24, 21, 0.38), rgba(26, 24, 21, 0));
  pointer-events: none;
}

.hero__contenu {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vw, 26px);
}

.hero__titre {
  margin: 0;
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(2.9rem, 8vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--papier);
}

/* La petite ligne au-dessus du nom : capitales très espacées, comme la
   référence, mais dans la police de texte du site. */
.hero__kicker {
  display: block;
  margin: 0 auto 20px;
  max-width: 46ch;
  font-family: var(--texte);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.92);
}

.hero__accroche { display: block; }

.hero__sous {
  max-width: 44ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  color: rgba(251, 249, 245, 0.86);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

.hero .hero__actions { justify-content: center; margin-top: 4px; }

/* Lien fléché sur fond sombre. */
.fleche--clair { color: var(--papier); border-bottom-color: rgba(251, 249, 245, 0.45); }

/* Sur la photo, le bouton clair se remplit de vert au survol : pas de
   pastille transparente qui se perdrait dans l'image. */
.hero .bouton--clair:hover { background: var(--vert); border-color: var(--vert); color: var(--papier); }

/* Invite à défiler, centrée sous le texte. */
.hero__decouvrir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(10px, 2.4vw, 22px);
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.9);
}
.hero__decouvrir::before { content: "\2193"; font-size: 0.95rem; letter-spacing: 0; }
.hero__decouvrir:hover { color: var(--papier); }

@media (min-width: 900px) {
  .hero {
    min-height: 100svh;
    padding-block: calc(var(--entete) + 40px) 64px;
  }
  /* Sur une ligne, comme sur la référence : la place ne manque pas. */
  .hero__kicker { max-width: none; }
  .hero__image { object-position: var(--focus-d, var(--focus-m, 50% 50%)); }
  .hero::before { opacity: var(--voile-d, var(--voile-m, 0.45)); }
}

/* ---------------------------------------------------------------
   8. Manifeste
   Une phrase, beaucoup de blanc autour. C'est la respiration qui
   fait le ton, pas la taille du texte.
--------------------------------------------------------------- */
.manifeste { text-align: center; }
.manifeste__phrase { margin-inline: auto; max-width: 22ch; }
.manifeste .label { margin-bottom: clamp(20px, 3vw, 30px); }
.manifeste__note { margin: clamp(22px, 3vw, 32px) auto 0; max-width: 54ch; color: var(--gris); }

/* ---------------------------------------------------------------
   9. Piliers alternés
   Le motif structurant de la page d'accueil : photo d'un cote,
   texte de l'autre, et on inverse a chaque bloc.
--------------------------------------------------------------- */
.pilier { padding-block: clamp(48px, 8vw, 96px); }

.pilier__grille {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.pilier__photo { margin: 0; }

.pilier__photo img,
.pilier__photo .photo-vide,
.pilier__photo .bloc-video__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pilier__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 20px);
}

.pilier__chiffre {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--vert);
}

@media (min-width: 860px) {
  .pilier__grille { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
  /* Un bloc sur deux inverse l'ordre : la photo passe a gauche. */
  .pilier--inverse .pilier__photo { order: 2; }
  .pilier--inverse .pilier__corps { order: 1; }
  .pilier__photo img,
  .pilier__photo .photo-vide,
  .pilier__photo .bloc-video__media { aspect-ratio: 5 / 6; }
}

/* Emplacement photo encore vide : on nomme ce qu'on attend. */
.photo-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grege);
  color: var(--gris);
  text-align: center;
  padding: 24px;
}
.photo-vide__mot {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: 22ch;
}

/* Conteneur générique produit par belami_photo(). */
.photo-mord { position: relative; overflow: hidden; }
.photo-mord img { width: 100%; }

/* Le tableau du fond, page Le Bel Ami. La photo garde son format, portrait
   ou paysage, et une ombre légère l'accroche au mur comme dans la salle.
   Limitée en hauteur : un portrait ne doit pas manger deux écrans. */
.tableau { margin: clamp(22px, 3vw, 32px) 0 0; }
.tableau__photo {
  display: inline-block;
  vertical-align: top;
  max-width: min(620px, 100%);
  box-shadow: 0 24px 48px -30px rgba(20, 24, 20, 0.5);
}
.tableau__photo img { width: auto; max-height: 78vh; }
/* Cadre vide (administrateur seulement) : un format de tableau courant. */
.tableau__photo .photo-vide { width: min(620px, 82vw); aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------
   Emplacement vidéo
   La boucle ne démarre jamais toute seule : voir belami_comptoir_video().
   Le bouton de pause n'apparaît que lorsque la lecture a réellement
   commencé, sinon il proposerait d'arrêter une image fixe.
--------------------------------------------------------------- */
.bloc-video { position: relative; }
.bloc-video__media { display: block; width: 100%; background: var(--grege); }

.bloc-video__pause {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(35, 33, 29, 0.55);
  color: var(--papier);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms ease;
}
.bloc-video__pause:hover { background: rgba(35, 33, 29, 0.78); }

/* En lecture : deux barres. En pause : un triangle. */
.bloc-video__icone {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.bloc-video__pause[aria-pressed="true"] .bloc-video__icone {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

/* ---------------------------------------------------------------
   10. Ardoise
   Les lignes viennent du plugin (bot Telegram) quand une carte est
   publiée, sinon du contenu de démonstration du thème. Mise en
   page en filets : c'est une carte de bistrot, pas un tableau.
--------------------------------------------------------------- */
.ardoise__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 26px;
  margin-bottom: clamp(24px, 3.5vw, 38px);
}

.onglets { display: inline-flex; gap: 6px; padding: 4px; background: var(--grege); border-radius: 999px; }

.onglets button {
  border: 0;
  background: transparent;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gris);
  transition: background 180ms ease, color 180ms ease;
}
.onglets button[aria-selected="true"] { background: var(--papier); color: var(--encre); }

.plats { border-top: 1px solid var(--trait); }

.plats li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: clamp(13px, 1.8vw, 18px);
  border-bottom: 1px solid var(--trait);
}

.plats__nom { flex: 1 1 auto; }

/* Les pointillés relient le plat à son prix sans dessiner un tableau. */
.plats__pointilles {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--trait);
  transform: translateY(-4px);
  min-width: 24px;
}

.plats__prix {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--gris);
  white-space: nowrap;
}

.formules {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(26px, 4vw, 40px);
}

@media (min-width: 700px) { .formules { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.formule {
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: clamp(18px, 2.6vw, 26px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.formule__prix { font-family: var(--titre); font-size: 1.7rem; font-weight: 300; color: var(--vert); }

.fraicheur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--gris);
  margin: 0;
}
/*
 * Le point qui bat. C'est lui qui dit « cette information est fraîche »,
 * bien avant que le texte soit lu. Vert quand la carte est de la semaine,
 * sombre et immobile quand elle ne l'est pas : l'animation elle-même est
 * une information, on ne la laisse donc pas tourner sur une carte périmée.
 */
.fraicheur__point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vert);
  color: var(--vert);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 currentColor;
  animation: pouls-point 2.6s ease-out infinite;
}

@keyframes pouls-point {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fraicheur__point { animation: none; }
}

/* Au-delà d'une semaine le point reste vert mais ne bat plus : l'animation
   dit « tout frais », elle ne doit pas le dire d'une carte vieille d'un mois. */
.fraicheur--calme .fraicheur__point { animation: none; box-shadow: none; }

/* Sous la carte du soir, qui reste en ligne même quand elle date un peu. */
.mention-evolutive {
  margin: 10px 0 0;
  font-family: var(--titre);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--gris);
  max-width: 52ch;
}

/* ---------------------------------------------------------------
   11. Cave
--------------------------------------------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  border: 1px solid var(--trait);
  background: transparent;
  border-radius: 999px;
  /* 10 px et non 7 : la pastille passe de 39 à 45 px de haut, au-dessus du
     minimum tactile de 44 px. */
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--gris);
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Pastille de teinte, sur les filtres de couleur uniquement. Un anneau vide
   pour ce qui n'est pas une couleur de vin : voir belami_comptoir_teinte(). */
.chip__point {
  display: inline-block;
  vertical-align: middle;
  width: 9px; height: 9px;
  margin-right: 7px;
  margin-top: -2px;
  border-radius: 50%;
  border: 1px solid rgba(35, 33, 29, 0.30);
}
.chip[aria-pressed="true"] .chip__point { border-color: rgba(251, 249, 245, 0.50); }

/* ---------------------------------------------------------------
   Rails de filtres

   Une ligne par famille, avec son libellé. Deux lignes valent deux
   familles : la séparation se voit sans rien lire. Sur téléphone la ligne
   défile au lieu de s'enrouler, ce qui rend la hauteur de la zone de
   filtres CONSTANTE, quel que soit le nombre de régions.
--------------------------------------------------------------- */
.filtre { display: flex; flex-direction: column; gap: 9px; }
.filtre + .filtre { margin-top: 16px; }
.filtre__rail { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 899px) {
  /* Le rail sort de la gouttière pour défiler d'un bord à l'autre. */
  .filtre__piste { position: relative; margin-inline: calc(var(--marge) * -1); }
  .filtre__rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: var(--marge);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filtre__rail::-webkit-scrollbar { display: none; }
  .filtre__rail > .chip { flex: 0 0 auto; scroll-snap-align: start; }

  /* Le dégradé du bord droit : c'est lui qui dit qu'il y en a d'autres. */
  .filtre__piste::after {
    content: "";
    position: absolute; right: 0; top: 0; bottom: 0; width: 38px;
    background: linear-gradient(to left, var(--papier), rgba(251, 249, 245, 0));
    pointer-events: none;
  }
}
.chip:hover { border-color: var(--encre); color: var(--encre); }
.chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.chip[hidden] { display: none; }

/* Le compte que porte chaque filtre : présent, mais jamais au même niveau
   que le libellé, sinon la ligne de pastilles devient illisible. */
.chip__n {
  margin-left: 4px;
  font-size: 0.76em;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.registre { border-top: 1px solid var(--trait); }

.registre li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding-block: clamp(14px, 2vw, 19px);
  border-bottom: 1px solid var(--trait);
}
.registre li[hidden] { display: none; }

.vin__domaine { font-weight: 500; }
.vin__detail { grid-column: 1; font-size: 0.9rem; color: var(--gris); }
.vin__prix {
  grid-row: 1 / span 2;
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
}

/*
 * Le montant et son unité étaient dans la même police et la même graisse :
 * « 1 659 € Bouteille » se lisait comme une seule chaîne. On sépare les deux
 * niveaux, le chiffre en serif et l'unité en micro-capitales grises.
 */
.vin__montant {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

.vin__format {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Servi au verre : le montant passe à l'accent, l'unité reste grise. */
.vin__montant--verre { color: var(--vert); }
.vin__format + .vin__montant { margin-top: 8px; }

.registre__vide {
  padding-block: 34px;
  color: var(--gris);
  border-bottom: 1px solid var(--trait);
}

.compte { font-size: 0.85rem; color: var(--gris); margin-bottom: 22px; }

/* ---------------------------------------------------------------
   12. Réserver et infos
--------------------------------------------------------------- */
.resa__grille {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 860px) {
  .resa__grille { grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(48px, 6vw, 90px); }
}

.horaires { display: grid; gap: 20px; }

.horaires > div { display: grid; gap: 3px; padding-top: 16px; border-top: 1px solid var(--trait); }

.horaires dt { font-weight: 500; }
.horaires dd { margin: 0; color: var(--gris); }

address { font-style: normal; color: var(--gris); }

/* La rue et la ville, plus grandes et plus foncées que le reste de l'adresse. */
.adresse-forte { color: var(--encre); font-size: 1.12rem; }
.fond-sombre .adresse-forte { color: var(--papier); }
address a { text-decoration: none; border-bottom: 1px solid var(--trait); }
address a:hover { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------
   13. Pied de page
--------------------------------------------------------------- */
/*
 * Deux étages de couleur réglable (Personnaliser > Couleurs de fond des
 * blocs) : le haut porte le logo et la phrase, le bas l'adresse, les
 * services et les liens. Couleurs par défaut : crème, puis vert.
 * Chaque règle a sa version claire et sa version sombre, pour qu'un
 * changement de fond ne rende jamais le texte illisible.
 */
.pied-haut { padding-block: clamp(52px, 8vw, 90px) clamp(34px, 5vw, 52px); }

/* Sur téléphone, de la place sous le dernier lien pour la barre d'appel fixe. */
.pied-bas { padding-block: clamp(36px, 5vw, 52px) clamp(90px, 10vw, 64px); }

.pied-logo { width: 132px; color: var(--vert); margin-bottom: 18px; }
.fond-sombre .pied-logo { color: var(--papier); }

.pied-baseline { max-width: 26ch; }

.site-footer .label { color: var(--gris); }
.site-footer .fond-sombre .label { color: rgba(251, 249, 245, 0.6); }

.pied-service { font-weight: 500; color: var(--encre); }
.fond-sombre .pied-service { color: rgba(251, 249, 245, 0.94); }

.pied-grille {
  display: grid;
  gap: clamp(30px, 5vw, 44px);
}

@media (min-width: 760px) { .pied-grille { grid-template-columns: repeat(3, 1fr); } }

.pied-grille h2 { margin-bottom: 14px; }

.nav-pied { display: grid; gap: 9px; }
.nav-pied a { text-decoration: none; color: var(--encre); font-size: 0.94rem; }
.nav-pied a:hover { color: var(--vert); }
.fond-sombre .nav-pied a { color: rgba(251, 249, 245, 0.8); }
.fond-sombre .nav-pied a:hover { color: var(--papier); }

/* « Gérer les cookies » est un bouton (il ouvre le bandeau) habillé en lien. */
.nav-pied .lien-cookies { color: var(--encre); }
.fond-sombre .nav-pied .lien-cookies { color: rgba(251, 249, 245, 0.8); }

/* Instagram : un lien qu'on voit, pas une ligne de liste. */
.insta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.insta:hover { background: var(--vert); border-color: var(--vert); color: var(--papier); }
.fond-sombre .insta { border-color: var(--trait-clair); color: var(--papier); }
.fond-sombre .insta:hover { background: var(--papier); border-color: var(--papier); color: var(--vert); }

.pied-signature {
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  color: var(--gris);
  font-size: 0.82rem;
}
.fond-sombre .pied-signature { border-top-color: var(--trait-clair); color: rgba(251, 249, 245, 0.58); }

/* ---------------------------------------------------------------
   13 bis. Blocs éditoriaux des pages intérieures
--------------------------------------------------------------- */

/* Ouverture courte et centrée : une affirmation, puis une précision.
   Deux tailles, deux couleurs, et beaucoup de blanc autour. */
.ouverture { text-align: center; }
.ouverture__phrase { margin-inline: auto; max-width: 24ch; }
.ouverture__precision { margin: clamp(20px, 3vw, 30px) auto 0; max-width: 56ch; color: var(--gris); }

/* Compteur : quatre chiffres qui disent la cave d'un coup d'œil. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 32px);
  border-top: 1px solid var(--trait);
  padding-top: clamp(28px, 4vw, 44px);
}

@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }

.chiffres__valeur {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--vert);
  font-variant-numeric: tabular-nums;
}

.chiffres__quoi { margin-top: 10px; }

/* Une phrase qu'on sort du paragraphe pour la faire respirer, en fin de
   bloc dense. C'est la respiration demandée sur le grand texte de la cave. */
.phrase-isolee {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: 26ch;
}

/* Rythme à trois temps : midi, soir, cave. */
.trio { display: grid; gap: clamp(24px, 4vw, 40px); }
.trio > div { padding-top: 18px; border-top: 1px solid var(--trait); }

@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }

/* Chiffre ou mention mise en avant au milieu d'un texte courant. */
.mention {
  font-family: var(--titre);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  color: var(--vert);
}

/* ---------------------------------------------------------------
   13 ter. Appel à l'action flottant

   Le registre de la cave est tout en bas de la page : sans raccourci, il
   faudrait faire défiler tout l'éditorial pour l'atteindre. La pastille est
   donc présente dès le premier écran, et s'efface une fois le registre à
   l'écran, pour ne pas rester posée sur ce qu'elle désigne.

   Sans JavaScript elle reste simplement visible : un lien d'ancre fonctionne
   de toute façon.
--------------------------------------------------------------- */
.cta-flottant {
  position: fixed;
  right: var(--marge);
  /* Au-dessus de la barre d'appel mobile, jamais par-dessus. */
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 55;
  box-shadow: 0 6px 26px rgba(35, 33, 29, 0.20);
  transition: opacity 260ms ease, transform 260ms ease, visibility 260ms;
}

.cta-flottant svg { flex: 0 0 auto; }

.cta-flottant[data-cache="1"] {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}

@media (min-width: 900px) {
  /* Plus de barre d'appel sur ordinateur : la pastille descend. */
  .cta-flottant { bottom: 30px; }
}

/* ---------------------------------------------------------------
   14. Barre d'appel mobile
   Sur telephone, reserver et appeler doivent rester a portee de
   pouce sans remonter la page.
--------------------------------------------------------------- */
.cta-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  gap: 10px;
  padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 249, 245, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--trait);
}

.cta-bar a { flex: 1 1 0; justify-content: center; }

@media (min-width: 900px) { .cta-bar { display: none; } }

/* ---------------------------------------------------------------
   15. Apparition au défilement
   Uniquement quand le JavaScript est la ET que le visiteur ne
   demande pas moins d'animations : sinon le contenu est visible
   d'emblee, jamais masque par du CSS que rien ne viendra retirer.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms ease, transform 620ms ease;
  }
  .js [data-reveal].est-vu { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   16. Contenu libre (l'éditeur WordPress)
--------------------------------------------------------------- */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-family: var(--titre); font-weight: 300; font-size: 1.9rem; line-height: 1.2; margin-top: 1.6em; }
.entry-content h3 { font-family: var(--titre); font-weight: 400; font-size: 1.35rem; margin-top: 1.5em; }
.entry-content p, .entry-content li { color: var(--gris); }
.entry-content ul { list-style: disc; padding-left: 1.2em; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { margin-block: 1.6em; }

/* Tableaux de contenu (la liste des cookies de la politique de confidentialité,
   par exemple). Sur téléphone, le tableau défile de côté plutôt que d'élargir
   la page. */
.entry-content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}
.entry-content th,
.entry-content td {
  min-width: 9em;
  padding: 10px 18px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait);
}
.entry-content th { font-weight: 500; color: var(--encre); }
.entry-content td { color: var(--gris); }
.fond-sombre .entry-content th { color: var(--papier); }
.fond-sombre .entry-content td,
.fond-sombre .entry-content p,
.fond-sombre .entry-content li { color: rgba(251, 249, 245, 0.74); }
.fond-sombre .entry-content th,
.fond-sombre .entry-content td { border-bottom-color: var(--trait-clair); }

/* ---------------------------------------------------------------
   17. Décalage de l'en-tête fixe
   Le hero passe SOUS la barre ; toutes les autres pages commencent
   dessous.
--------------------------------------------------------------- */
body { padding-top: var(--entete); }
body.a-hero { padding-top: 0; }

/* Une ancre visée ne doit pas finir cachée derrière la barre. */
[id] { scroll-margin-top: calc(var(--entete) + 16px); }