/* =================================================================
   Coffee shop : feuille de style (CSS3 vanilla), gabarit « cafe »
   (15e gabarit, chantier « Café / Coffee shop » du 30/10/2026).
   Référence visuelle VALIDÉE par Charles : _maquettes/cafe-signature
   (« Corner deli, version signature »). Papier, bordeaux, laiton,
   espresso ; Instrument Serif pour les titres (romain + italique
   bordeaux en contrepoint), Figtree pour le texte et les petites
   capitales espacées, Big Shoulders Display pour l'ardoise seulement.
   L'or (dégradé laiton en background-clip:text) ne sert que sur fond
   sombre ou bordeaux : lambrequin, sceau, pied de page. Sections
   claires alternées (papier, latte) ; le sombre en touches (ardoise,
   carte d'horaires, sceau, pied).

   PALETTE FIXE (accent_fixed: true dans bot/sectors/_templates.json,
   comme bien-etre) : la couleur d'un client n'est posée qu'à sa demande
   (produce.py --accent). Variables lues par l'injection :
     --accent      : bordeaux (boutons, italiques des titres, lambrequin, sceau)
     --accent-deep : bordeaux foncé (survol, état actif)
     --accent-ink  : texte posé SUR l'accent (papier)
   Contraste mesuré (WCAG) : tout texte posé par cette feuille atteint
   4,5:1 au moins sur son fond (relevé du 30/10/2026 ; l'or sur bordeaux
   et sur espresso est éclairci par rapport à la maquette pour y arriver).
   ================================================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  color-scheme: light;

  /* Fonds clairs */
  --papier:   #FAF7F1;   /* fond de page */
  --papier-2: #F1EBE0;
  --latte:    #EFE6D8;   /* bandes alternées (origines, avis, visite) */
  --blanc:    #FFFCF7;   /* étiquettes, tickets, carte de commande */
  --ligne:    #E0D7C7;   /* filets */
  --bord:     #9C8F80;   /* bord des champs (3:1 sur blanc) */

  /* Sombres */
  --espresso:   #1B1411;
  --espresso-2: #241B17; /* pied de page */
  --espresso-3: #3A2D25;

  /* Accent (bordeaux) : voir la note en tête de fichier */
  --accent:      #8C2620;
  --accent-deep: #6E1C17;
  --accent-ink:  #FAF7F1;

  /* Laiton */
  --laiton:       #B48C48;   /* filets et décors */
  --laiton-clair: #DCC189;   /* texte sur fond sombre */
  --laiton-fonce: #7E6230;   /* texte sur papier et latte (5,3:1 et 4,6:1) */

  /* Textes */
  --texte:      #1B1411;
  --gris:       #675D55;     /* texte second (6,4:1 sur papier, 5,2:1 sur latte) */
  --ivoire:     #F3EADB;
  --ivoire-doux:#CFC3B2;
  --vert:       #3E8E5E;     /* pastille « ouvert » (décor, jamais du texte) */
  --danger:     #A3261E;

  /* Or : sur bordeaux et sur espresso seulement (extrémité sombre ≥ 4,5:1 sur le bordeaux) */
  --or: linear-gradient(180deg, #F7E9C2 0%, #E9CD8E 52%, #DCB973 100%);

  /* Typo */
  --f-serif:    "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-texte:    "Figtree", system-ui, "Segoe UI", sans-serif;
  --f-enseigne: "Big Shoulders Display", "Arial Narrow", sans-serif;

  /* Mise en page */
  --container: 1200px;
  --gutter: 28px;
  --sec: 132px;            /* espacement des sections (88 px sur téléphone) */
  --header-h: 84px;
  --callbar-h: 68px;
  --tt-bas: 22px;          /* retrait du bas du bouton « haut de page » */

  /* Transitions */
  --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
  --t-med:  .32s cubic-bezier(.4, 0, .2, 1);
  --t-slow: .7s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Aucun overflow sur <html> : l'en-tête est STICKY (piège du 18/09/2026, un overflow sur html
   ferait du body le conteneur de défilement et l'en-tête partirait avec la page). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--papier);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
fieldset { border: 0; min-width: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- MISE EN PAGE ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.or { background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.petit { font: 600 11.5px/1.2 var(--f-texte); letter-spacing: .24em; text-transform: uppercase; }

.sec { padding-block: var(--sec); }

/* En-tête de section : sur-titre en petites capitales laiton, titre serif, chapeau à droite. */
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.sec-hd__oeil { display: block; color: var(--laiton-fonce); margin-bottom: 18px; }
.sec-hd p { max-width: 26rem; font: 400 16.5px/1.65 var(--f-texte); color: var(--gris); }

/* Titres : Instrument Serif, romain + italique bordeaux. Taille plancher : le mot le plus long
   des trois langues (« Koffiecocktails » n'est pas un titre ; « vaste gasten », « toonbank »)
   tient de 280 à 1920 px. */
h1, h2, h3 { font-weight: 400; }
h2 { font: 400 clamp(44px, 5.8vw, 84px)/1 var(--f-serif); letter-spacing: -.02em; }
h2 em, h1 em { font-style: italic; color: var(--accent); }

.kicker { display: flex; align-items: center; gap: 14px; color: var(--laiton-fonce); }
.kicker::before { content: ""; width: 40px; height: 1px; background: var(--laiton); flex: none; }

/* ---------- LIEN D'ÉVITEMENT ---------- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .75rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 1rem; }

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font: 600 15px/1.15 var(--f-texte);
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn svg { flex-shrink: 0; }
.btn--bordeaux { background: var(--accent); color: var(--accent-ink); }
.btn--bordeaux:hover { background: var(--accent-deep); }
.btn--ligne { border-color: var(--espresso); color: var(--espresso); }
.btn--ligne:hover { background: var(--espresso); color: var(--ivoire); }
.btn--sm { padding: 12px 20px; font-size: 14px; }
/* Bouton pleine largeur : retour à la ligne permis et centré (leçon du garage, 22/09/2026). */
.btn--block { width: 100%; white-space: normal; text-align: center; }

/* ---------- EN-TÊTE (papier, collant) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, .97);
  color: var(--espresso);
  transition: box-shadow var(--t-med);
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(27, 20, 17, .35); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

/* Marque : le nom en capitales serif espacées + sous-titre italique bordeaux. Un nom long de
   démo (classe logo--long posée par main.js au-delà de 14 caractères) se resserre et passe sur
   deux lignes au plus ; le sous-titre s'efface alors. */
.logo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  color: var(--espresso);
}
.logo__nom {
  font: 400 32px/1.2 var(--f-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-right: -.2em;          /* l'espacement final ne compte pas */
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;      /* nom de démo d'un seul mot, plus long que la place (coiffure) */
  padding-block: .06em;
}
.logo__sous { font: italic 400 18px/1.2 var(--f-serif); color: var(--accent); white-space: nowrap; }
.logo--long { align-items: center; }
.logo--long .logo__nom { font-size: 24px; letter-spacing: .08em; margin-right: 0; }
.logo--long .logo__sous { display: none; }

/* Navigation : écart FIXE (en-têtes du 18/09/2026), libellés insécables. */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 28px; }
.nav__link {
  text-decoration: none;
  font: 500 12px/1 var(--f-texte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--espresso-3);
  white-space: nowrap;
  padding-block: 8px;
  transition: color var(--t-fast);
}
.nav__link:hover { color: var(--accent); }

/* Éléments du menu mobile, masqués en bureau */
.nav__phone, .nav__cta--mobile { display: none; }
/* Spécificité 0,2,0 : bat la règle .lang-switch { display: inline-flex } plus bas */
.nav .lang-switch--mobile { display: none; }
/* Voile du tiroir tablette : masqué partout par défaut, affiché de 601 px au seuil du burger. */
.nav-scrim { display: none; }

.header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ---------- SÉLECTEUR DE LANGUE ---------- */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--blanc);
}
.lang-switch__btn {
  font: 600 12px/1 var(--f-texte);
  letter-spacing: .08em;
  color: var(--gris);
  padding: 7px 10px;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch__btn:hover { color: var(--espresso); }
.lang-switch__btn.active { background: var(--espresso); color: var(--ivoire); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--espresso);
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- LAMBREQUIN DU STORE ---------- */
.store {
  position: relative;
  z-index: 3;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  background: var(--accent);
  background-image: repeating-linear-gradient(90deg, transparent 0 30px, rgba(0, 0, 0, .1) 30px 31px);
}
.store p {
  font: 600 12px/1.3 var(--f-texte);
  letter-spacing: .46em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: .46em;
}
.store::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
  background: radial-gradient(circle at 14px 0, var(--accent) 13.5px, transparent 14.5px) 0 0 / 28px 14px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(27, 20, 17, .16));
}

/* ---------- ACCUEIL ---------- */
.hero { position: relative; min-height: min(82vh, 760px); display: flex; align-items: center; }
.hero > .hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(220, 193, 137, .8);
  pointer-events: none;
}
.hero__inner { position: relative; width: 100%; padding-block: 110px 118px; }
.hero__txt { max-width: min(540px, 44vw); }
.hero__title {
  margin-top: 30px;
  font: 400 clamp(56px, 6.6vw, 104px)/.94 var(--f-serif);
  letter-spacing: -.02em;
}
.hero__title em { display: block; padding-bottom: .08em; }
.hero__lead { margin-top: 30px; max-width: 29rem; font: 400 18px/1.7 var(--f-texte); color: var(--gris); }
.hero__lead b { color: var(--espresso); font-weight: 600; }
.hero__cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.preuves {
  display: flex;
  gap: 10px 28px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--ligne);
  font: 500 14px/1.3 var(--f-texte);
  color: var(--gris);
}
.preuves b { color: var(--espresso); font-weight: 600; }
/* « Ouvert aujourd'hui jusqu'à … » sur sa propre ligne, réservée avant que main.js l'écrive :
   le remplir ne déplace rien (CLS nul, tools/recette_debordements.py). */
.preuves__ouvert { flex-basis: 100%; min-height: 1.3em; }
.preuves__ouvert[hidden] { display: none; }
.preuves .pt {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vert);
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(62, 142, 94, .18);
  vertical-align: .05em;
}
.preuves .pt--ferme { background: var(--laiton); box-shadow: 0 0 0 3px rgba(180, 140, 72, .2); }

/* Petit cadre : photo du prospect trop petite pour le plein cadre (moins de 1 200 x 640, doctrine
   de bien-etre) ; le rendu pose .hero--cadre : la photo passe dans un cadre papier à droite. */
.hero--cadre > .hero-photo {
  top: 50%;
  bottom: auto;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: min(40%, 460px);
  aspect-ratio: 4 / 5;
  transform: translateY(-50%);
  padding: 12px;
  background: var(--blanc);
  box-shadow: 0 30px 50px -30px rgba(27, 20, 17, .45);
}
.hero--cadre .hero-photo::after { inset: 22px; }

/* Ardoise rainurée « Le spécial du jour », à cheval sur la photo. */
.ardoise {
  position: absolute;
  left: -56px;
  bottom: 64px;
  z-index: 2;
  width: 240px;
  padding: 10px;
  background: var(--espresso);
  box-shadow: 0 30px 50px -22px rgba(27, 20, 17, .6);
}
.ardoise__in {
  border: 1px solid var(--laiton);
  padding: 16px 18px 18px;
  background: repeating-linear-gradient(180deg, #221915 0 7px, #1A130F 7px 8px);
}
.ardoise__titre { display: block; color: var(--laiton-clair); }
.ardoise__plat {
  margin-top: 10px;
  font: 600 25px/1.08 var(--f-enseigne);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F3ECDF;
}
.ardoise__prix { margin-top: 10px; font: italic 400 28px/1 var(--f-serif); color: var(--laiton-clair); }

/* ---------- LA CARTE : PLAN DES LIGNES ---------- */
.carte input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.bascule {
  display: inline-flex;
  margin-top: 40px;
  padding: 4px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: #fff;
}
.bascule label {
  padding: 11px 22px;
  border-radius: 999px;
  font: 500 14px/1.2 var(--f-texte);
  color: var(--gris);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.bascule label small { font-size: 12.5px; margin-left: 6px; }
#jour:checked ~ .bascule label[for="jour"],
#soir:checked ~ .bascule label[for="soir"] { background: var(--espresso); color: var(--ivoire); }
#jour:focus-visible ~ .bascule label[for="jour"],
#soir:focus-visible ~ .bascule label[for="soir"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La carte du jour reste visible sans les radios (carte du soir retirée par le rendu). */
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 56px; }
.plan.soir { display: none; }
#soir:checked ~ .plan.jour { display: none; }
#soir:checked ~ .plan.soir { display: grid; }

.ligne__hd { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lettre {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--laiton);
  font: italic 400 21px/1 var(--f-serif);
  color: var(--laiton-fonce);
}
.ligne__hd b { display: block; font: 400 30px/1.05 var(--f-serif); letter-spacing: -.01em; }
.ligne__hd small {
  display: block;
  margin-top: 6px;
  font: 500 11px/1.3 var(--f-texte);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.arrets { position: relative; }
.arrets::before {
  content: "";
  position: absolute;
  left: 17px; top: 14px; bottom: 14px;
  width: 1.5px;
  background: var(--laiton);
  opacity: .7;
}
.arrets li { position: relative; padding: 12px 0 12px 46px; }
.arrets li::before {
  content: "";
  position: absolute;
  left: 13px; top: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--papier);
  border: 1.5px solid var(--laiton);
}
.r { display: flex; align-items: baseline; gap: 10px; font: 500 16px/1.3 var(--f-texte); }
.r__nom { min-width: 0; }
.r i { flex: 1; min-width: 16px; border-bottom: 1px dotted #BFB2A0; transform: translateY(-4px); }
.r__prix { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arrets small { display: block; margin-top: 3px; font: italic 400 16px/1.3 var(--f-serif); color: var(--gris); }

.terminus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
  font: 500 13.5px/1.5 var(--f-texte);
  color: var(--gris);
}
.terminus b { color: var(--espresso); font-weight: 600; }
.soir-only { display: none; }
#soir:checked ~ .terminus .soir-only { display: inline; }

/* ---------- ORIGINES DU MOMENT (bande latte) ---------- */
.origines { background: var(--latte); }
.etiquettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.etiquette { background: var(--blanc); padding: 12px; box-shadow: 0 24px 40px -30px rgba(27, 20, 17, .35); }
.etiquette__in {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 26px 24px 24px;
  border: 1px solid var(--laiton);
  outline: 1px solid var(--laiton);
  outline-offset: -5px;
}
.etiquette .num { display: flex; justify-content: space-between; gap: 12px; color: var(--laiton-fonce); }
.etiquette .pays { font: 400 48px/.95 var(--f-serif); letter-spacing: -.01em; }
.etiquette .reg { margin-top: -8px; font: italic 400 19px/1.2 var(--f-serif); color: var(--gris); }
.notes { display: flex; flex-wrap: wrap; gap: 7px; }
.notes span { padding: 7px 12px; border: 1px solid var(--ligne); border-radius: 999px; font: 500 13px/1 var(--f-texte); }
.etiquette dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--ligne);
  font: 500 14px/1.3 var(--f-texte);
}
.etiquette dt { color: var(--gris); }
.etiquette dd { text-align: right; }

/* Bouton du sachet (contrat « Grains à emporter ») : né caché, révélé par le widget. Tant qu'il
   reste caché, p.etiquette__prix (son frère suivant) dit le sachet et son prix. */
.acheter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 18px;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--ivoire);
  text-decoration: none;
  font: 600 14px/1.2 var(--f-texte);
  transition: background var(--t-fast);
}
.acheter:hover { background: var(--accent); }
.acheter[hidden] { display: none; }
.acheter__lib { display: inline-flex; align-items: center; gap: 8px; }
.acheter__lib svg { flex: none; }   /* l'icône garde ses 16 px quand le nom servi est long */
.acheter__px { font: italic 400 20px/1 var(--f-serif); color: var(--laiton-clair); white-space: nowrap; }
.acheter:hover .acheter__px { color: var(--accent-ink); }
.etiquette__prix {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
  font: 600 14px/1.3 var(--f-texte);
}
.etiquette__px { font: italic 400 22px/1 var(--f-serif); color: var(--accent); white-space: nowrap; }
.acheter:not([hidden]) + .etiquette__prix { display: none; }

/* ---------- LA MAISON ---------- */
.maison { padding-bottom: 72px; }
.maison__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.maison__texte { margin-top: 28px; max-width: 32rem; font: 400 18.5px/1.7 var(--f-texte); color: var(--gris); }
.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.atout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 24px;
  border-top: 1px solid var(--ligne);
}
.atout__ic {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--laiton);
  color: var(--laiton-fonce);
}
.atout__txt { min-width: 0; }
.atout__txt b { display: block; font: 400 26px/1.1 var(--f-serif); }
.atout__txt small { display: block; margin-top: 6px; font: 400 14.5px/1.45 var(--f-texte); color: var(--gris); }

/* ---------- VITRINE ---------- */
.maison + .vitrine { padding-top: 0; }
.vitrine__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vitrine .cadre { position: relative; }
.vitrine .cadre::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(220, 193, 137, .75);
  pointer-events: none;
}
.vitrine img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vitrine figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font: 400 22px/1.15 var(--f-serif);
}
.vitrine__prix { font-style: italic; color: var(--accent); white-space: nowrap; }

/* ---------- LES HABITUÉS : TICKETS DE CAISSE (bande latte) ---------- */
.avis { background: var(--latte); }
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; align-items: start; }
.ticket {
  position: relative;
  padding: 24px 24px 30px;
  background: var(--blanc);
  filter: drop-shadow(0 16px 22px rgba(27, 20, 17, .10));
}
.ticket:nth-child(1) { transform: rotate(-.8deg); }
.ticket:nth-child(2) { transform: rotate(.6deg); margin-top: 30px; }
.ticket:nth-child(3) { transform: rotate(-.3deg); }
.ticket.reveal:not(.is-visible) { transform: translateY(24px); }
/* Bord dentelé du ticket (déchiré au massicot). */
.ticket::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  background:
    linear-gradient(-45deg, transparent 7px, var(--blanc) 0) 0 0 / 14px 10px repeat-x,
    linear-gradient(45deg, transparent 7px, var(--blanc) 0) 0 0 / 14px 10px repeat-x;
}
.ticket__tete { text-align: center; padding-bottom: 14px; border-bottom: 1px dashed var(--ligne); }
.ticket__nom {
  display: block;
  font: 400 21px/1.15 var(--f-serif);
  letter-spacing: .24em;
  text-transform: uppercase;
  padding-left: .24em;
  overflow-wrap: anywhere;
}
.ticket__tete small {
  display: block;
  margin-top: 7px;
  font: 500 10.5px/1.3 var(--f-texte);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.ticket__etoiles { display: block; margin-top: 16px; color: var(--accent); letter-spacing: .2em; font-size: 14px; }
.ticket__cit { margin-top: 10px; font: italic 400 23px/1.25 var(--f-serif); }
.ticket__pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--ligne);
  font: 600 11px/1.3 var(--f-texte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- COMMANDER À EMPORTER (formule Standard) ---------- */
.commander__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.commander__intro h2 { margin-top: 26px; }
.commander__lead { margin-top: 28px; max-width: 28rem; font: 400 18px/1.7 var(--f-texte); color: var(--gris); }
.commander__alt { margin-top: 26px; font: 500 15px/1.5 var(--f-texte); color: var(--gris); }
.commander__alt a { color: var(--espresso); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--laiton); white-space: nowrap; }
.commander__alt a:hover { color: var(--accent); }

.commande { background: var(--blanc); padding: 12px; box-shadow: 0 30px 50px -36px rgba(27, 20, 17, .45); }
.commande__in {
  padding: 36px 34px 32px;
  border: 1px solid var(--laiton);
  outline: 1px solid var(--laiton);
  outline-offset: -5px;
}
.form { display: grid; gap: 20px; min-width: 0; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font: 600 11.5px/1.3 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--laiton-fonce); }
.field__optional { text-transform: none; letter-spacing: .02em; font-weight: 500; color: var(--gris); }
.field__input {
  width: 100%;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--bord);
  border-radius: 2px;
  background: var(--papier);
  font: 400 16px/1.4 var(--f-texte);
  color: var(--espresso);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input::placeholder { color: #6F655C; opacity: 1; }   /* 5,3:1 sur le papier des champs */
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea.field__input { resize: vertical; min-height: 116px; }
.field__error { font: 500 13.5px/1.35 var(--f-texte); color: var(--danger); }
.field__error:empty { display: none; }
.field.has-error .field__input { border-color: var(--danger); }
.form__rgpd { font: 400 13.5px/1.55 var(--f-texte); color: var(--gris); }
.form__rgpd a { color: var(--espresso); }
.form__success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--laiton);
  background: var(--papier);
  font: 500 15px/1.5 var(--f-texte);
  color: var(--espresso);
}
.form__success[hidden] { display: none; }
.form__success svg { flex: none; margin-top: 2px; color: var(--vert); }

/* ---------- PASSEZ AU COMPTOIR (bande latte) ---------- */
.visite { background: var(--latte); }
.visite__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.visite__adr { margin-top: 28px; font: 400 18.5px/1.65 var(--f-texte); color: var(--gris); }
.visite__adr b { color: var(--espresso); font-weight: 600; }
.visite__adr a { color: var(--gris); text-decoration: none; border-bottom: 1px solid var(--laiton); }
.visite__adr a:hover { color: var(--accent); }
.visite__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* Carte d'horaires espresso à double filet laiton, ligne du jour en laiton clair. */
.horaires { position: relative; padding: 12px; background: var(--espresso); color: var(--ivoire); }
.horaires__in {
  padding: 34px 32px 28px;
  border: 1px solid var(--laiton);
  outline: 1px solid var(--laiton);
  outline-offset: -5px;
}
.horaires__titre { font: 400 34px/1.05 var(--f-serif); text-align: center; }
.horaires__sous { display: block; margin-top: 10px; color: var(--laiton-clair); }
/* Jour et horaires trop longs pour une ligne (décision de Charles « G1 » du 04/10/2026, règle du
   garage) : la ligne se replie seulement quand le mot le plus long du jour et les horaires ne
   tiennent plus côte à côte ; les horaires passent alors dessous, calés à droite. */
.hours { margin-top: 24px; }
.hours__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 15px;
  border-bottom: 1px dashed rgba(243, 234, 219, .18);
  font: 500 16.5px/1.25 var(--f-texte);
}
.hours__day { flex: 1 1 0; }
.hours__time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__row.is-today { color: var(--laiton-clair); font-weight: 600; }
.horaires__note { margin-top: 18px; text-align: center; font: 400 14px/1.55 var(--f-texte); color: var(--ivoire-doux); }
.sceau { position: absolute; right: -22px; top: -34px; width: 108px; height: 108px; }

/* ---------- PIED DE PAGE (espresso) ---------- */
.footer { background: var(--espresso-2); color: #B9AC9C; font: 500 14.5px/1.55 var(--f-texte); }
.footer a { text-decoration: none; transition: color var(--t-fast); }
.footer a:hover { color: var(--laiton-clair); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 72px 56px;
}
.footer__logo { display: inline-block; }
.footer__nom {
  font: 400 30px/1.2 var(--f-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.footer__tagline { margin-block: 16px 18px; max-width: 34ch; }
.footer__call { display: inline-flex; align-items: center; gap: 8px; color: var(--laiton-clair); font-weight: 600; font-size: 17px; }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__col-title {
  margin-bottom: 16px;
  font: 600 11.5px/1.3 var(--f-texte);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laiton-clair);
}
.footer__col ul { display: grid; gap: 10px; }

/* Ligne du bas : société, copyright, liens légaux. Dernière ligne du pied, gouttière du
   conteneur gardée (jamais de padding horizontal à zéro, constat du 03/10/2026). */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 24px;
  border-top: 1px solid rgba(243, 234, 219, .12);
  font-size: 13.5px;
}
.footer__company { flex-basis: 100%; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* Fin de page : le bouton « haut de page » se poserait sur la dernière ligne du pied. Sous elle,
   le pied garde la place du bouton : son retrait du bas, sa hauteur et 12 px d'air ; sur
   téléphone, le retrait du bas compte aussi la barre basse « Commander · Itinéraire ». Dès
   1349 px (1332 px de largeur utile + 17 px de barre de défilement classique), le bouton est
   dans la marge du conteneur (22 + 44 px <= (largeur - 1200) / 2) : rendu inchangé. */
@media (max-width: 1348px) {
  .footer__bottom { padding-bottom: calc(var(--tt-bas) + 44px + 12px); }
}

/* ---------- BARRE BASSE DU TÉLÉPHONE ---------- */
/* Classe floating-cta en plus : la règle des démos (.to-top,.floating-cta { margin-bottom }) la
   remonte au-dessus du bandeau. Affichée sur téléphone seulement (plus bas). */
.callbar { display: none; }

/* ---------- BOUTON « HAUT DE PAGE » ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: var(--tt-bas);
  z-index: 85;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--accent);
  border: 1px solid var(--laiton);
  box-shadow: 0 12px 26px -12px rgba(27, 20, 17, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med), background var(--t-fast), color var(--t-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- RÉVÉLATIONS AU DÉFILEMENT ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
.ticket.reveal.is-visible:nth-child(1) { transform: rotate(-.8deg); }
.ticket.reveal.is-visible:nth-child(2) { transform: rotate(.6deg); }
.ticket.reveal.is-visible:nth-child(3) { transform: rotate(-.3deg); }

/* =================================================================
   RESPONSIVE
   ================================================================= */

/* Menu replié (burger) jusqu'à 1279 px : la barre dépliée (marque et sous-titre, cinq liens,
   FR/NL/EN, « Commander ») demande environ 1 170 px, que le conteneur n'offre qu'à partir de
   1280 px. Seuil repris par main.js (matchMedia, même requête) : le menu se referme en quittant
   la plage. */
@media (max-width: 1279px) {
  /* MENU MOBILE : panneau papier plein écran sous l'en-tête, fermé par opacité et visibilité
     seulement (aucun positionnement hors écran : jamais de défilement horizontal). */
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 14px var(--gutter) 40px;
    background: var(--papier);
    border-top: 1px solid var(--ligne);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-block: 10px;
    border-bottom: 1px solid var(--ligne);
    font: 400 32px/1.1 var(--f-serif);
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--espresso);
    white-space: normal;
  }
  .nav__link:hover, .nav__link:focus-visible { color: var(--accent); }

  .nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--espresso);
    text-decoration: none;
    font: 600 18px/1.2 var(--f-texte);
  }
  .nav__phone svg { color: var(--laiton-fonce); flex-shrink: 0; }

  .nav__cta--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
    text-align: center;
    font: 600 16px/1.25 var(--f-texte);
  }

  .nav .lang-switch--mobile { display: inline-flex; align-self: flex-start; }
  .lang-switch--desktop { display: none; }

  .burger { display: flex; }
}

/* MENU TABLETTE : de 601 px au seuil du burger, le panneau devient un tiroir ancré à droite, avec
   un voile cliquable (aucun translateX : pas de défilement horizontal). */
@media (min-width: 601px) and (max-width: 1279px) {
  .nav {
    left: auto;
    width: min(80vw, 420px);
    border-left: 1px solid var(--ligne);
    box-shadow: -24px 0 60px -24px rgba(27, 20, 17, .35);
    z-index: 95;                 /* au-dessus du voile (90), sous l'en-tête (100) */
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(27, 20, 17, .38);
    /* Retient le défilement de la page sous le voile (le verrou du body le double). */
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med), visibility var(--t-med);
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Tablette : la carte, les étiquettes et les tickets sur deux colonnes, la vitrine garde ses trois
   cadres (une seule colonne seulement sous 641 px, plus bas). */
@media (max-width: 980px) {
  .plan, .etiquettes, .tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { gap: 44px 48px; }
  .etiquettes { gap: 24px; }
  .tickets { gap: 32px; }
  .vitrine__grille { gap: 20px; }
  .vitrine figcaption { font-size: 19px; }
  .maison__grille, .commander__grille, .visite__grille { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .horaires { max-width: 520px; }
  .hero > .hero-photo { width: 46%; }
  .hero__txt { max-width: 48vw; }
  /* L'ardoise passe DANS la photo, en bas à gauche (elle ne déborde plus sur le texte). */
  .ardoise { left: 28px; bottom: 28px; width: 210px; }
  .ardoise__plat { font-size: 22px; }
  .ardoise__prix { font-size: 24px; }
  .hero--cadre > .hero-photo { width: 42%; }
}

@media (max-width: 640px) {
  .plan, .etiquettes, .vitrine__grille, .tickets { grid-template-columns: minmax(0, 1fr); }
  .ticket:nth-child(2) { margin-top: 0; }
  .vitrine__grille { gap: 28px; }
  .vitrine img { aspect-ratio: 4 / 3; }
  .vitrine figcaption { font-size: 22px; }
}

/* Téléphone : photo en haut, texte dessous ; barre basse « Commander · Itinéraire ». Le bouton
   « haut de page » monte au-dessus de la barre (son retrait du bas la compte). */
@media (max-width: 760px) {
  :root {
    --header-h: 66px;
    --tt-bas: calc(var(--callbar-h) + 12px);
  }
  .hero { min-height: 0; display: block; }
  .hero > .hero-photo { position: relative; width: auto; height: 380px; }
  .hero-photo > img { object-position: 50% 70%; }
  .hero-photo::after { inset: 24px 12px 12px; }
  .hero__inner { padding-block: 44px 72px; }
  .hero__txt { max-width: none; }
  .ardoise { left: 24px; bottom: 24px; width: 188px; padding: 8px; }
  .ardoise__in { padding: 12px 14px 14px; }
  .ardoise__titre { letter-spacing: .14em; }
  .ardoise__plat { font-size: 20px; }
  .ardoise__prix { font-size: 22px; margin-top: 8px; }
  /* Petit cadre sur téléphone : photo 4:3 encadrée, dans la gouttière. */
  .hero--cadre > .hero-photo {
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    transform: none;
    margin: 24px var(--gutter) 0;
  }

  .callbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: var(--callbar-h);
    padding: 10px var(--gutter);
    background: rgba(250, 247, 241, .98);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -12px 28px -16px rgba(27, 20, 17, .3);
    transition: opacity var(--t-fast), visibility var(--t-fast);
  }
  .callbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 48px;
    padding: 0 10px;
    border-radius: 999px;
    text-decoration: none;
    font: 600 15px/1.1 var(--f-texte);
    white-space: nowrap;
  }
  .callbar__btn svg { flex-shrink: 0; }
  .callbar__btn--form { background: var(--accent); color: var(--accent-ink); }
  .callbar__btn--route { border: 1px solid var(--espresso); color: var(--espresso); background: var(--blanc); }
  /* Saisie dans la section de commande (clavier ouvert) : la barre s'efface pour ne pas couvrir
     le champ ou le bouton d'envoi ; elle revient dès que le focus quitte la section. */
  body.saisie-en-cours .callbar { opacity: 0; visibility: hidden; }
}

/* Petits téléphones */
@media (max-width: 560px) {
  :root { --gutter: 16px; --sec: 88px; }
  .logo__nom { font-size: 25px; }
  .logo__sous { display: none; }
  .logo--long .logo__nom { font-size: 19px; }
  .store { height: 36px; }
  .store p { font-size: 10px; letter-spacing: .32em; padding-left: .32em; }
  .hero > .hero-photo { height: 300px; }
  .hero--cadre > .hero-photo { height: auto; }   /* le cadre suit sa largeur (4:3), jamais l'inverse */
  .hero__inner { padding-block: 36px 68px; }
  .hero__title { font-size: 56px; }
  .hero__lead { font-size: 16.5px; }
  .hero__cta .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .preuves { gap: 10px 22px; }
  .bascule { display: flex; width: 100%; }
  .bascule label { flex: 1; text-align: center; padding: 12px 8px; }
  .bascule label small { display: none; }
  .etiquette__in { padding: 22px 18px 18px; }
  .atouts { grid-template-columns: minmax(0, 1fr); }
  .commande__in { padding: 26px 18px 22px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .horaires__in { padding: 28px 18px 22px; }
  .sceau { right: -6px; top: -40px; width: 88px; height: 88px; }
  .visite__cta .btn, .commander .btn { white-space: normal; text-align: center; }
  .btn--block { line-height: 1.3; }
}

/* Très petits téléphones : le « Commander » de l'en-tête s'efface (la barre basse le porte). */
@media (max-width: 359px) {
  .header__cta { display: none; }
  .hero__title { font-size: 50px; }
  .ardoise { width: 170px; }
  .callbar__btn { font-size: 14px; gap: 6px; }
}

/* Liens du pied sur une colonne de la marque jusqu'à 1024 px, deux colonnes jusqu'à 720 px
   (colonne Contact sur toute la largeur, décision de Charles du 03/10/2026 pour le garage,
   l'artisan et l'agence, même pied ici), une seule jusqu'à 480 px : minmax(0, 1fr) et
   overflow-wrap: anywhere, un e-mail plus long que l'écran passe à la ligne. 1 / -1 et non
   1 / 3 : sous 481 px, sur une colonne, 1 / 3 créerait une colonne vide. */
@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer__inner, .footer__nav { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { overflow-wrap: anywhere; }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .nav, .nav.is-open { transform: none; }
}

/* Adresse e-mail affichée dans la page (04/10/2026, décision de Charles « E2 ») : le bot pose une
   coupure permise juste après « @ » (<wbr>) et enveloppe dans .itx-email une adresse écrite seule
   hors d'un lien. Cette coupure, et son filet (une partie encore trop longue se coupe n'importe
   où), ne jouent que dans l'adresse de « Passez au comptoir », jusqu'à la largeur où sa section
   passe sur une colonne. Ailleurs (pied de page), la coupure est neutralisée. */
a[href^="mailto:"] wbr, .itx-email wbr { display: none; }
@media (max-width: 980px) {
  .visite__adr a[href^="mailto:"] wbr, .visite__adr .itx-email wbr { display: inline; }
  .visite__adr a[href^="mailto:"], .visite__adr .itx-email { overflow-wrap: anywhere; }
}