/* ============================================================
   POLICES AUTO-HÉBERGÉES — 11.08.2026
   Servies depuis notre propre domaine au lieu des serveurs de Google.
   Deux raisons : 307 Ko de polices contre 142 Ko ici, et surtout aucune
   adresse IP de visiteur transmise à Google, ce qui a déjà valu des
   condamnations en Europe.
   Sous-ensemble latin uniquement : il couvre U+0000-00FF (tous les accents
   français) et U+0152-0153, donc le œ de « cœur » et de « bœuf ».
   Fraunces conserve ses quatre axes variables (opsz, wght, SOFT, WONK),
   vérifié dans le fichier : le rendu est identique à celui de Google.
   Licence SIL Open Font 1.1 pour les deux familles, auto-hébergement autorisé.
   ============================================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   LOU CAFETIÉ — Gorges du Verdon
   Design system v2, aux codes des tables du littoral.

   Ce qu'on a relevé sur Loulou Ramatuelle, Villa Marie, La Réserve
   Ramatuelle, Cheval Blanc St-Tropez et La Guérite Cannes :
     1. la photo occupe tout le premier écran, elle est le sujet
     2. le logo est petit et centré en haut, jamais une enseigne géante
     3. les titres sont en serif FINE, jamais en sans-serif grasse
     4. le texte est minuscule à côté de l'image, 3 à 6 mots
     5. le menu est réduit à un burger, même sur grand écran
     6. les boutons sont rectangulaires, sobres, sans couleur criarde
     7. une seule idée par écran, énormément de silence
     8. des neutres chauds, presque jamais de noir pur

   Couleurs relevées sur le paysage réel du Verdon.
   ============================================================ */

:root {
  --encre:      #1a1a18;  /* noir profond, charte Atelier AI. Jamais #000 */
  --calcaire:   #F4F0E8;  /* calcite en plein soleil, le fond de lecture du site */
  --sable:      #c8bfa8;  /* pierre, charte Atelier AI. Bandes de section */
  --sable-clair:#E7E0D3;  /* pierre éclaircie, pour les grandes surfaces */
  --blanc:      #FFFFFF;
  --teal:       #469FA1;  /* l'eau du Verdon, charte du client */
  --emeraude:   #2C6B63;  /* couloir Samson, liens sur fond clair */
  --ecume:      #8CC9C4;  /* accent sur fond sombre */
  --patine:     #B3AA9B;  /* filets, très discret */
  --gris-texte: #6B6255;  /* texte secondaire */

  /* Quincy CF est la typo imprimee du client (licence Adobe Fonts requise).
     Fraunces en est le repli libre le plus proche : memes rondeurs, meme chaleur.
     Reglages SOFT et WONK pour retrouver le trait de Quincy. */
  --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  /* Sans-serif geometrique, en echo a la baseline GORGES DU VERDON du logo.
     Reservee aux micro-labels utilitaires : sa carte n'utilise aucune sans-serif. */
  --sans:   'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad-x: 1.5rem;
  --section-y: 3.4rem;
  --max: 1180px;
  --sticky-h: 62px;
}

@media (min-width: 768px)  { :root { --pad-x: 2.75rem; --section-y: 4.8rem; } }
@media (min-width: 1200px) { :root { --pad-x: 4rem;    --section-y: 5.6rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--calcaire);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  padding-bottom: var(--sticky-h);
}
@media (min-width: 900px) { body { font-size: 17px; padding-bottom: 0; } }

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

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

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 300;
  font-variation-settings: 'SOFT' 60, 'WONK' 1; font-optical-sizing: auto; }

.h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: 0.002em;
}
.h2 {
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  line-height: 1.16;
}
.h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
}

/* Le surtitre : sans fine, capitales, très espacée. Le marqueur du luxe. */
.kicker {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 60, 'WONK' 0;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gris-texte);
  margin: 0 0 0.95rem;
  display: block;
}
.encre .kicker, .sur-photo .kicker { color: rgba(244,240,232,0.72); }
@media (min-width: 768px) { .kicker { font-size: 14px; } }

.mono { font-family: var(--sans); font-weight: 300; letter-spacing: 0.06em; font-size: 14.5px; }

p { margin: 0 0 1.15em; max-width: 60ch; }
.lead { font-size: 1.06rem; color: var(--gris-texte); line-height: 1.8; }
.encre .lead, .encre p { color: rgba(244,240,232,0.78); }

a { color: var(--emeraude); }
.encre a { color: var(--ecume); }

.chiffre {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  display: block;
}

/* ---------- Structure ---------- */

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.encre { background: var(--encre); color: var(--calcaire); }
.encre .h1, .encre .h2, .encre .h3 { color: var(--calcaire); }
.sable { background: var(--sable); }
.filet { height: 1px; background: var(--patine); opacity: 0.5; border: 0; margin: 0; }
.filet-teal { height: 1px; background: var(--teal); border: 0; width: 46px; margin: 1.2rem 0 0; }
.filet-braise { height: 1px; background: var(--teal); border: 0; width: 46px; margin: 1.2rem 0 0; }

/* ---------- En-tête : logo centré, burger partout ---------- */

.statut {
  background: var(--encre);
  color: rgba(244,240,232,0.8);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem var(--pad-x);
}
/* L'état d'ouverture ne doit JAMAIS pousser le numéro hors de l'écran : le groupe
   peut rétrécir (min-width:0) et c'est le texte qui se coupe proprement. Sans ça,
   un libellé long ("Bar ouvert · service soir à 19h30") débordait sur téléphone. */
.statut-etat { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.statut-etat [data-statut-texte] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barre du haut, variante « deux groupes » : tout ce qui informe à gauche,
   tout ce qui permet d'agir à droite. Structure relevée sur Verde Beach, le seul
   site du panel conçu pour du trafic publicitaire froid. */
.statut-g, .statut-d { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.statut-d { margin-left: auto; }
.statut-filet { width: 1px; height: 11px; background: rgba(244,240,232,0.22); flex: 0 0 auto; }
.statut-lieu { color: rgba(244,240,232,0.62); white-space: nowrap; }
/* Le numéro n'est PAS traité comme les autres micro-labels : des chiffres en
   capitales espacées à 0,2 em sont pénibles à lire et à recopier. Casse normale,
   chiffres à chasse fixe, contraste plein. */
.statut-tel {
  font-family: var(--sans); font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.02em; text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--calcaire); text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.statut-tel:hover, .statut-tel:focus-visible { color: var(--ecume); }

/* Sur téléphone la barre doit tenir sur UNE ligne : le village saute, le texte
   d'état est raccourci par le script, le numéro reste. */
@media (max-width: 599px) {
  .statut { font-size: 9.5px; letter-spacing: 0.16em; gap: 0.7rem; padding: 0.6rem var(--pad-x); }
  .statut-g, .statut-d { gap: 0.7rem; }
  /* Le village disparaît, et son filet avec lui : sinon il reste un trait orphelin. */
  .statut-lieu, .statut-g .statut-filet { display: none; }
  .statut-tel { font-size: 12px; }
}
.pastille { width: 5px; height: 5px; border-radius: 50%; background: var(--patine); flex-shrink: 0; }
.pastille.ouvert { background: #7FA98A; }
.pastille.bientot { background: #C7A15E; }
.pastille.ferme  { background: #A8776F; }
.langues a, .langues span { color: rgba(244,240,232,0.5); text-decoration: none; }
.langues span { cursor: default; }
.langues a { cursor: pointer; transition: color 0.25s ease; }
.langues a:hover { color: var(--calcaire); }
/* Le FR est un ÉTAT, pas un lien : cliquable, il renvoyait le visiteur à
   l'accueil depuis n'importe quelle page. Sélecteur sur .actif, pas sur a.actif. */
.langues .actif { color: var(--calcaire); }

.entete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--pad-x);
}
.entete .logo { height: 40px; width: auto; margin: 0 auto; }
@media (min-width: 900px) { .entete { padding: 1.4rem var(--pad-x); } .entete .logo { height: 46px; } }

.entete-gauche { justify-self: start; }
.entete-droite { justify-self: end; }

.burger {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  display: flex; align-items: center; gap: 11px;
  font-family: var(--sans); font-weight: 400; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.28em; color: var(--calcaire);
}
.burger .traits { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.burger .traits span { display: block; height: 1px; background: var(--calcaire); width: 22px; }
.burger .mot { display: none; }
@media (min-width: 600px) { .burger .mot { display: inline; } }
.entete-sombre .burger { color: var(--encre); }
.entete-sombre .burger .traits span { background: var(--encre); }

.lien-resa {
  font-family: var(--sans); font-weight: 400; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--calcaire); text-decoration: none; white-space: nowrap;
}
.entete-sombre .lien-resa { color: var(--encre); }

/* En-tête posé sur une section claire (pages intérieures) : il reprend sa place
   dans le flux et bascule en encre. Le logo noir est servi tel quel, pas inversé. */
.entete-sombre { position: relative; background: var(--calcaire); }

.nav-mob {
  position: fixed; inset: 0; background: var(--encre); z-index: 60;
  padding: 1.5rem var(--pad-x); display: none; flex-direction: column;
}
.nav-mob.ouvert { display: flex; }
.nav-mob-haut { display: flex; justify-content: flex-end; }
.nav-mob-fermer { background: none; border: 0; color: var(--calcaire); font-size: 28px; font-weight: 200; line-height: 1; cursor: pointer; padding: 4px 10px; }
.nav-mob nav { display: flex; flex-direction: column; gap: 0.2rem; margin: auto 0; }
.nav-mob nav a {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 6.5vw, 2.6rem); line-height: 1.35;
  color: var(--calcaire); text-decoration: none;
}
.nav-mob nav a[aria-current="page"] { color: var(--ecume); }
.nav-mob-pied { font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.12em; color: rgba(244,240,232,0.55); line-height: 2.1; text-transform: uppercase; }
.nav-mob-pied a { color: var(--ecume); text-decoration: none; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 15px et non 10,5px. Relevé du 31.07.2026 : le milieu écrit ses boutons entre
     10 et 12 px (La Guérite 10, Loulou 11, Verde Beach 12) — c'est un code de
     discrétion qui ne tient pas sur un téléphone tenu en plein soleil.
     Aston Martin et Cheval Blanc, les deux mieux construits du panel, sont à 16 px.
     En capitales, 15 px égale visuellement 16 px en bas-de-casse (hauteur de capitale
     supérieure à la hauteur d'x). L'interlettrage descend de 0,28 à 0,15 em, sinon
     « RÉSERVER UNE TABLE » dépasse la largeur d'un écran de 375 px. */
  font-family: var(--sans); font-weight: 400; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.15em;
  padding: 1.05rem 1.9rem; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
  text-align: center; line-height: 1;
}
.btn-primaire { background: var(--encre); color: var(--calcaire); border-color: var(--encre); }
.btn-primaire:hover { background: transparent; color: var(--encre); }
.btn-ligne { background: transparent; color: var(--encre); border-color: rgba(30,27,24,0.45); }
.btn-ligne:hover { background: var(--encre); color: var(--calcaire); border-color: var(--encre); }
.encre .btn-primaire, .sur-photo .btn-primaire { background: var(--calcaire); color: var(--encre); border-color: var(--calcaire); }
.encre .btn-primaire:hover, .sur-photo .btn-primaire:hover { background: transparent; color: var(--calcaire); }
.encre .btn-ligne, .sur-photo .btn-ligne { color: var(--calcaire); border-color: rgba(244,240,232,0.5); }
.encre .btn-ligne:hover, .sur-photo .btn-ligne:hover { background: var(--calcaire); color: var(--encre); border-color: var(--calcaire); }
.btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Hero : la photo occupe tout ---------- */

.hero { position: relative; min-height: 68vh; display: flex; align-items: flex-end; background: var(--encre); overflow: hidden; }
@media (min-width: 900px) { .hero { min-height: 78vh; } }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30,27,24,0.52) 0%, rgba(30,27,24,0.42) 34%, rgba(30,27,24,0.62) 62%, rgba(30,27,24,0.86) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 7rem; padding-bottom: 2.5rem; text-align: center; }
@media (min-width: 900px) { .hero-inner { padding-bottom: 3.25rem; } }
.hero .h1 { color: var(--calcaire); margin: 0 auto; max-width: 16ch; }
.hero-preuve { color: rgba(244,240,232,0.82); margin: 1.1rem auto 1.8rem; max-width: 46ch; font-size: 1.02rem; }
.hero .btns { justify-content: center; }
/* Mesuré : à 15 px les deux boutons du hero font 248 + 146 + 12 = 406 px, pour
   327 px disponibles sur un écran de 375 px. Ils passent donc à la ligne, et deux
   boutons centrés de largeurs inégales font bancal. Sur téléphone on les empile
   en pleine largeur : plus propre, et une cible tactile plus large. */
@media (max-width: 479px) {
  .hero .btns { flex-direction: column; align-items: stretch; }
  .hero .btns .btn { width: 100%; }
}
/* La preuve sociale du hero.
   Relevé du 31.07.2026 sur 10 concurrents (Bâoli, Club 55, La Guérite, Loulou,
   La Ponche, Verde Beach, Les Moulins, Villa Marie, La Réserve, Casa Amor) :
   AUCUN n'affiche de note ni d'avis sur sa page d'accueil. C'est le seul terrain
   où Lou Cafetié gagne. Le nombre doit donc se lire, pas se deviner.
   Avant : 10,5 px à 62 % d'opacité, soit une mention légale. */
.hero-social {
  /* margin auto obligatoire : la règle générique `p { max-width: 60ch }` (l.104)
     s'applique aussi ici, donc sans `auto` le bloc reste collé au bord gauche. */
  margin: 2rem auto 0;
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.hero-social-n {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 0.9;
  letter-spacing: 0.01em; color: #f4f0e8;
}
.hero-social-t {
  font-family: var(--sans); font-weight: 300;
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  line-height: 1.75; color: rgba(244,240,232,0.82);
  border-left: 1px solid rgba(244,240,232,0.28); padding-left: 0.7rem;
}

/* ---------- Bandeau infos ---------- */

/* Sur la pierre #c8bfa8, le gris de texte courant ne tient pas le contraste
   (3,27:1). Dans ces zones uniquement, il passe à #4C4539, mesuré à 5,17:1. */
.infos { background: var(--sable); }
.sable .kicker, .infos-item dt { color: #4C4539; }
.sable .lead, .sable p { color: #4C4539; }
.sable .sourcing-ligne .ou { color: #4C4539; }
.sable .sourcing-ligne { border-bottom-color: rgba(26,26,24,0.22); }
.infos-item { border-color: rgba(26,26,24,0.22) !important; }
.infos-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .infos-grid { grid-template-columns: repeat(4, 1fr); } }
.infos-item { padding: 1.1rem 0; border-bottom: 1px solid rgba(179,170,155,0.55); text-align: center; }
@media (min-width: 760px) {
  .infos-item { padding: 1.6rem 1.25rem; border-bottom: 0; border-left: 1px solid rgba(179,170,155,0.55); }
  .infos-item:first-child { border-left: 0; }
}
.infos-item:last-child { border-bottom: 0; }
.infos-item dt {
  font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gris-texte); margin-bottom: 0.45rem;
}
.infos-item dd { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--encre); }
.infos-item dd a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--teal); }

/* ---------- Emplacement photo ---------- */

.photo-slot {
  position: relative;
  background: rgba(179,170,155,0.16);
  border: 1px solid rgba(179,170,155,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1rem; text-align: center;
}
.encre .photo-slot, .hero .photo-slot { background: rgba(244,240,232,0.05); border-color: rgba(244,240,232,0.24); }
.photo-slot-in { max-width: 32ch; }
.photo-slot .tag {
  font-family: var(--sans); font-size: 9.5px; font-weight: 400; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 0.55rem;
}
.photo-slot .quoi { font-family: var(--serif); font-size: 0.9rem; line-height: 1.45; color: var(--gris-texte); margin: 0; }
.encre .photo-slot .quoi, .hero .photo-slot .quoi { color: rgba(244,240,232,0.72); }
.photo-slot .fmt {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--patine); margin-top: 0.6rem; display: block;
}
/* Dans le hero, pas de bloc de consigne en surimpression : il finirait toujours
   par croiser le titre sur un ecran court. Une seule ligne, dans le flux. */
.hero-consigne {
  display: inline-block;
  font-family: var(--sans); font-weight: 300; font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244,240,232,0.62);
  border: 1px solid rgba(244,240,232,0.24);
  padding: 0.5rem 0.95rem; margin-bottom: 1.5rem;
}
.hero-consigne b { color: var(--teal); font-weight: 400; }
.hero-fond { position: absolute; inset: 0; background: var(--encre); }
.hero-fond::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(244,240,232,0.022) 0 14px, transparent 14px 28px);
}

.ratio-45, .ratio-11, .ratio-32, .ratio-169, .ratio-31 { width: 100%; min-height: 0; }
.ratio-45  { aspect-ratio: 4/5; }
.ratio-11  { aspect-ratio: 1/1; }
.ratio-32  { aspect-ratio: 3/2; }
.ratio-169 { aspect-ratio: 16/9; }
.ratio-31  { aspect-ratio: 16/9; }
@media (min-width: 700px) { .ratio-31 { aspect-ratio: 3/1; } }

/* ---------- Grilles ---------- */

.grille-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grille-3 { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 820px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3.25rem; align-items: center; }
  .grille-3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.8rem; }
}

/* ---------- Cartes plat ---------- */

.plat { text-align: center; }
.plat-media { margin-bottom: 0.95rem; }
.plat-media img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.plat h3 { margin-bottom: 0.35rem; }
.plat-detail {
  font-family: var(--sans); font-weight: 300; font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gris-texte); margin: 0 0 0.5rem;
}
.encre .plat-detail { color: rgba(244,240,232,0.6); }
.plat-prix { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--encre); }
.encre .plat-prix { color: var(--calcaire); }

/* ---------- Carte du restaurant ---------- */

.menu-groupe + .menu-groupe { margin-top: 3rem; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 2rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(179,170,155,0.5); align-items: baseline; }
.menu-item:last-child { border-bottom: 0; }
.menu-item-nom { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.3; }
.menu-item-en { font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--patine); }
.menu-item-prix { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; white-space: nowrap; }
.menu-item-desc { grid-column: 1 / -1; margin: 0.5rem 0 0; font-size: 15px; color: var(--gris-texte); max-width: 62ch; }

/* ---------- Sourcing ---------- */

.sourcing-ligne { padding: 1.5rem 0; border-bottom: 1px solid rgba(179,170,155,0.5); text-align: center; }
.sourcing-ligne:last-child { border-bottom: 0; }
.sourcing-ligne .quoi { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 3.4vw, 2.2rem); line-height: 1.15; display: block; }
.sourcing-ligne .ou {
  font-family: var(--sans); font-weight: 300; font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gris-texte); margin-top: 0.9rem; display: block;
}

/* ---------- Avis ---------- */

.avis-chiffre { text-align: center; }
.avis-chiffre .sous {
  font-family: var(--sans); font-weight: 300; font-size: 10.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gris-texte); display: block; margin-top: 1.1rem;
}
.avis-liste { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.75rem; }
@media (min-width: 820px) { .avis-liste { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.avis { text-align: center; }
.avis blockquote { margin: 0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: var(--encre); }
.avis figcaption {
  font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gris-texte); margin-top: 1.4rem;
}

/* ---------- Plan d'accès ---------- */

.plan-etapes { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.plan-etapes li { display: grid; grid-template-columns: 32px 1fr auto; gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid rgba(179,170,155,0.5); }
.plan-etapes .num { font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; color: var(--teal); }
.plan-etapes .lieu { font-family: var(--serif); font-size: 1.06rem; }
.plan-etapes .temps { font-family: var(--sans); font-weight: 300; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gris-texte); white-space: nowrap; }

/* ---------- FAQ ---------- */

.faq details { border-bottom: 1px solid rgba(179,170,155,0.5); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-weight: 500; font-size: 1.12rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 20px; color: var(--teal); line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 1.2rem; margin: 0; color: var(--gris-texte); font-size: 16px; }

/* ---------- Pied de page ---------- */

.pied { background: var(--encre); color: var(--calcaire); padding-top: 3.25rem; padding-bottom: 2rem; text-align: center; }
.pied-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 820px) { .pied-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: left; } }
.pied h4 {
  font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(244,240,232,0.5); margin: 0 0 1.4rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.75rem; }
.pied a { color: var(--calcaire); text-decoration: none; font-family: var(--serif); font-size: 1rem; }
.pied a:hover { color: var(--ecume); }
.pied .logo-pied { height: 58px; width: auto; margin: 0 auto 1.75rem; }
@media (min-width: 820px) { .pied .logo-pied { margin-left: 0; } }
.pied .adr { font-family: var(--serif); font-size: 1rem; color: rgba(244,240,232,0.78); line-height: 1.9; font-style: normal; }
.vautour { width: 64px; opacity: 0.38; margin: 1.5rem auto 0; }
@media (min-width: 820px) { .vautour { margin-left: 0; } }
.pied-bas {
  margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(244,240,232,0.14);
  font-family: var(--sans); font-weight: 300; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(244,240,232,0.45);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: center;
}
@media (min-width: 820px) { .pied-bas { justify-content: space-between; } }

/* ---------- Barre collante mobile ---------- */

.sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--encre); display: flex;
  height: var(--sticky-h); align-items: stretch;
  border-top: 1px solid rgba(244,240,232,0.14);
}
.sticky .btn { flex: 1; border: 0; border-radius: 0; padding: 0 0.5rem; font-size: 10px; letter-spacing: 0.22em; }
.sticky .btn-primaire { background: var(--calcaire); color: var(--encre); }
.sticky .btn-ligne { background: transparent; color: var(--calcaire); border-left: 1px solid rgba(244,240,232,0.18); }
@media (min-width: 900px) { .sticky { display: none; } }

/* ---------- Utilitaires ---------- */

.centre { text-align: center; }
.centre p, .centre .lead { margin-left: auto; margin-right: auto; }
.centre .filet-teal, .centre .filet-braise { margin-left: auto; margin-right: auto; }
.centre .btns { justify-content: center; }
.mt-0 { margin-top: 0; }
.mb-l { margin-bottom: 2.1rem; }
.saut { margin-top: 1.6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 1px solid var(--teal); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   ÉCRAN DE CHARGEMENT
   Mécanique relevée sur astonmartin.com/fr : le logo se compose, puis
   monte et rétrécit en disparaissant.

   RÈGLE DE FLUIDITÉ : on n'anime QUE transform et opacity, les deux seules
   propriétés que le navigateur peut confier au GPU. Une première version
   animait clip-path (recalcul de rendu à chaque image, donc saccades) et
   appliquait le rétrécissement à l'écran entier, fond compris — on voyait
   le rectangle sombre se réduire, ce qui trahissait le procédé.
   Ici : le logo seul monte et rétrécit, le fond disparaît en fondu derrière,
   et le tracé se fait par un cache opaque qui glisse en translateX.

   Garde-fous (le site reçoit du trafic publicitaire en 4G) :
     - une seule fois par session, 2 s au total, puis retrait du DOM
     - animations en CSS pur : si le JS échoue, l'écran part quand même
     - entièrement désactivé si le visiteur a demandé moins d'animations
   ============================================================ */

.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--encre);
  display: flex; align-items: center; justify-content: center;
  animation: preloader-fond 0.62s cubic-bezier(0.33, 0, 0.67, 1) 1.34s forwards;
}

.preloader-logo {
  position: relative;
  width: min(62vw, 330px);
  transform: translateZ(0);
  will-change: transform;
  animation: preloader-envol 0.86s cubic-bezier(0.5, 0, 0.2, 1) 1.24s forwards;
}
.preloader-logo img { width: 100%; height: auto; display: block; }

/* Le cache : un rectangle de la couleur du fond qui découvre la signature
   en glissant vers la droite. Uniquement du translateX, donc fluide. */
.preloader-cache {
  position: absolute; top: -6%; right: 0; bottom: -6%; left: -1%;
  background: var(--encre);
  transform: translateZ(0);
  will-change: transform;
  animation: preloader-trace 1.02s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s forwards;
}

.preloader-filet {
  display: block; height: 1px; width: 46px; margin: 1.35rem auto 0;
  background: var(--teal);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform, opacity;
  animation: preloader-filet 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.86s forwards;
}

@keyframes preloader-trace {
  from { transform: translateX(0); }
  to   { transform: translateX(101%); }
}
@keyframes preloader-filet {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes preloader-envol {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -32vh, 0) scale(0.26); }
}
@keyframes preloader-fond {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
}

/* Le café offert. Gratuité réelle, imprimée sur la carte 2026 du client.
   Les blocs de rappel « Votre table est prête » sont tous sur fond encre :
   l'accent lisible sur fond sombre est l'écume, jamais le teal plein. */
.offert { color: var(--ecume); }

/* Titre d'accueil long (le wording du client : « Brasserie, bar, cocktails,
   cuisson au feu de bois »). En 375 px il partait sur 4 lignes et mangeait tout
   le premier écran. Taille resserrée + équilibrage automatique des lignes :
   pas de <br> forcé, qui coupait « cuisson au feu de / bois ». */
.h1.h1-long { font-size: clamp(1.95rem, 5.4vw, 3.7rem); text-wrap: balance; }

/* Liste d'accès : la ville se lit d'un coup d'œil, la route passe en second.
   Sans ça, chaque ligne faisait quatre lignes de serif sur téléphone et
   plus personne ne trouvait la sienne. */
.plan-etapes .via {
  display: block; font-family: var(--sans); font-weight: 300;
  font-size: 13.5px; line-height: 1.6; color: var(--gris-texte); margin-top: 0.2rem;
}
.encre .plan-etapes .via { color: rgba(244,240,232,0.6); }

/* Grille des publics : quatre blocs de texte en 2x2. La .grille-2 générique est
   centrée verticalement (elle sert d'habitude à un texte face à une image) ;
   ici il faut que les titres de la seconde rangée s'alignent entre eux. */
.grille-publics { align-items: start; }

/* ---------- Photos réelles (montage du 11.08.2026) ---------- */
figure.photo, .photo { margin: 0; max-width: 100%; }
.photo { position: relative; overflow: hidden; background: rgba(179,170,155,0.16); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--patine); margin-top: 0.55rem; display: block;
}
.encre .photo figcaption { color: rgba(244,240,232,0.6); }
.credit {
  position: absolute; right: 0.6rem; bottom: 0.5rem;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.72); text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.bandeau-photo { width: 100%; aspect-ratio: 16/9; margin: 3rem 0 0; }
@media (max-width: 700px) { .bandeau-photo { aspect-ratio: 4/3; } }
.gloire { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 780px) { .gloire { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.gloire-sec { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 780px) { .gloire-sec { grid-template-columns: 1fr; } }