/* ==========================================================================
   La Fontaine Fleurie — « La Grande Tablée basque »
   La nappe de linge basque : fond de lin blanchi, rayures rouges et vertes
   tissées qui traversent les pages, champs de couleur pleine pour les
   moments forts (ardoise en rouge, terrasse en vert, le patron en indigo).
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Couleurs du linge */
  --lin: #fcfbf8;
  --lin-2: #f3f1ea;
  --fil: #e4e0d5;
  --rouge: #c4122f;
  --rouge-fonce: #9b0c24;
  --vert: #0b7a43;
  --vert-fonce: #075a31;
  --indigo: #22386f;
  --indigo-fonce: #182a55;
  --encre: #1b1716;
  --encre-2: #4a4340;
  --soleil: #f3c33d;

  /* Typo */
  --f-titre: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mesures */
  --largeur: 1240px;
  --goutiere: clamp(16px, 4vw, 48px);
  --r-sm: 3px;

  /* Échelle typographique (DESIGN.md → typography) */
  --t-label: 0.78rem;
  --t-caption: 0.82rem;
  --t-small: 0.94rem;
  --t-body: 1.0625rem;
  --t-lead: 1.15rem;
  --t-lead-fluid: clamp(1.1rem, 1.6vw, 1.3rem);
  --t-subtitle: 1.4rem;
  --t-title: clamp(1.5rem, 2.4vw, 1.9rem);
  --t-title-l: clamp(1.9rem, 3.4vw, 2.6rem);
  --t-headline-s: clamp(2.2rem, 4.4vw, 3.4rem);
  --t-headline: clamp(2.4rem, 5.6vw, 4.25rem);
  --t-display: clamp(3.1rem, 9vw, 6rem);

  /* Arrondis (DESIGN.md → rounded) */
  --r-pill: 999px;
  --r-rond: 50%;
  --ombre-tirage: 0 1px 2px rgb(27 23 22 / 0.12), 0 14px 30px -10px rgb(27 23 22 / 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* La bande basque : 7 rayures symétriques, 96px */
  --bande: linear-gradient(to bottom,
      var(--rouge) 0 22%,
      transparent 22% 29%,
      var(--rouge) 29% 33%,
      transparent 33% 39.5%,
      var(--vert) 39.5% 47.5%,
      transparent 47.5% 52.5%,
      var(--vert) 52.5% 60.5%,
      transparent 60.5% 67%,
      var(--rouge) 67% 71%,
      transparent 71% 78%,
      var(--rouge) 78% 100%);
  /* rayures imprimées franches, sans faux tissage */
  --trame: none;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-color: var(--rouge) var(--lin-2);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--lin);
  /* grain de lin : trame croisée très légère */
  background-image:
    repeating-linear-gradient(0deg, rgb(27 23 22 / 0.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(27 23 22 / 0.018) 0 1px, transparent 1px 4px);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-body);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
}

::selection { background: var(--rouge); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--lin-2); }
::-webkit-scrollbar-thumb { background: var(--rouge); border: 3px solid var(--lin-2); border-radius: var(--r-pill); }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--rouge); }
/* liens de contenu déjà visités : soulignement adouci (Opquast 141) */
main :is(p, li, address, td) a:not(.btn, .onglets a, .gros-numero):visited { text-decoration-color: var(--encre-2); }
:is(.sur-couleur, .pied) :is(p, li, address) a:not(.btn, .onglets a, .gros-numero):visited { text-decoration-color: var(--fil); }
/* lien vers un autre site (Opquast 142) */
.icone--externe { display: inline-block; width: 0.9em; height: 0.9em; margin: 0 -0.2em 0 0.1em; vertical-align: -0.08em; }
.btn .icone--externe { margin-left: -0.15em; }
/* format et poids d'un fichier à télécharger (Opquast 147, 148) */
.poids {
  font-family: var(--f-texte); font-stretch: 100%; font-weight: 600; font-size: var(--t-caption);
  letter-spacing: 0.01em; opacity: 0.78; white-space: nowrap;
}
a:not(.btn) > .poids { margin-left: 0.3em; }
/* emplacement de texte à rédiger dans WordPress */
.a-rediger {
  padding: 12px 14px; border: 1.5px dashed var(--fil); border-radius: var(--r-sm);
  background: rgb(255 255 255 / 0.55); font-style: italic;
}
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; border-radius: var(--r-sm); }
.sur-couleur :focus-visible { outline-color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 96;
}
h1 { font-size: var(--t-display); letter-spacing: -0.03em; }
h2 { font-size: var(--t-headline); }
h3 { font-size: var(--t-title); font-stretch: 85%; line-height: 1.05; }
h4 { font-size: var(--t-lead); font-stretch: 90%; line-height: 1.1; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.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;
}
.saut {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--encre); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
}
.saut:focus { top: 12px; }

.conteneur { width: min(100% - 2 * var(--goutiere), var(--largeur)); margin-inline: auto; }
.mesure { max-width: 66ch; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.icone { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- La bande (rayures basques) ---------- */
.bande {
  height: 96px;
  background-image: var(--trame), var(--bande);
  background-color: transparent;
}
.bande--fine { height: 28px; }
.bande--mini {
  height: 10px;
  background-image: linear-gradient(to bottom, var(--rouge) 0 40%, transparent 40% 60%, var(--vert) 60% 100%);
}
.bande--sur-rouge {
  background-image: var(--trame), linear-gradient(to bottom,
      #fff 0 22%, transparent 22% 29%, #fff 29% 33%, transparent 33% 39.5%,
      var(--vert) 39.5% 47.5%, transparent 47.5% 52.5%, var(--vert) 52.5% 60.5%,
      transparent 60.5% 67%, #fff 67% 71%, transparent 71% 78%, #fff 78% 100%);
}

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--rouge);
  --fg: #fff;
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0.7em 1.35em;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bg); border-radius: var(--r-sm);
  font-family: var(--f-titre); font-stretch: 90%; font-weight: 700; font-size: var(--t-lead); line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 10px 18px -10px rgb(27 23 22 / 0.55);
}
.btn:hover { --bg: var(--rouge-fonce); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgb(27 23 22 / 0.5); }
.btn--appel { font-size: var(--t-lead-fluid); padding-inline: 1.3em 1.5em; }
.btn--appel .num { letter-spacing: 0.01em; }
.btn--ligne { --bg: transparent; --fg: var(--encre); border-color: var(--encre); box-shadow: none; }
.btn--ligne:hover { --bg: var(--encre); --fg: #fff; }
.btn--blanc { --bg: #fff; --fg: var(--rouge); border-color: #fff; }
.btn--blanc:hover { --bg: var(--lin-2); --fg: var(--rouge-fonce); }
.btn--ligne-blanc { --bg: transparent; --fg: #fff; border-color: rgb(255 255 255 / 0.8); box-shadow: none; }
.btn--ligne-blanc:hover { --bg: #fff; --fg: var(--encre); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px;
}
.lien-fleche .icone { transition: transform 0.25s var(--ease); }
.lien-fleche:hover .icone { transform: translateX(4px); }

/* ---------- Étiquette tissée (le label cousu) ---------- */
.etiquette {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--rouge); color: #fff;
  padding: 0.55em 1em 0.5em;
  font-family: var(--f-titre); font-stretch: 85%; font-weight: 700;
  font-size: var(--t-small); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  padding-right: 1.9em;
  /* étiquette tissée à bout cranté */
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.8em) 50%, 100% 100%, 0 100%);
}
.etiquette svg { width: 1.2em; height: 1.2em; color: #fff; }
.etiquette--lin { background: var(--lin); color: var(--rouge); }
.etiquette--lin svg { color: var(--rouge); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgb(252 251 248 / 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--fil);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 76px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--encre);
}
.marque svg { width: 38px; height: 38px; color: var(--rouge); transition: transform 0.6s var(--ease); }
.marque:hover svg { transform: rotate(72deg); }
.marque__nom {
  font-family: var(--f-titre); font-stretch: 78%; font-weight: 800;
  font-size: var(--t-title); line-height: 0.9; letter-spacing: -0.02em;
}
.marque__nom small {
  display: block; font-family: var(--f-texte); font-stretch: 100%;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.02em; color: var(--encre-2); margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav__liens { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__liens a { display: block; }
.nav__liens a {
  position: relative;
  padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: var(--t-small);
  color: var(--encre); border-radius: var(--r-sm);
}
.nav__liens a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__liens a:hover::after,
.nav__liens a[aria-current="page"]::after { transform: scaleX(1); }
.nav__liens a[aria-current="page"] { color: var(--rouge); }
.entete__appel { flex: none; }
.entete__appel.btn { min-height: 46px; font-size: var(--t-body); padding: 0.55em 1.1em; }
.burger {
  display: none;
  min-width: 52px; height: 52px; padding: 4px 6px 5px; gap: 2px; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; border: 2px solid var(--encre); border-radius: var(--r-sm);
  color: var(--encre); cursor: pointer;
}
.burger svg { width: 22px; height: 22px; }
/* légende visible de l'icône (Opquast 159) */
.burger__texte { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }

@media (max-width: 1080px) {
  .nav__liens a { padding-inline: 8px; font-size: var(--t-small); }
  .nav__liens a::after { left: 8px; right: 8px; }
}
@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .entete__appel { display: none; }
  /* sans ce retrait, le flou de l'en-tête sert de repère au menu fixe, qui ne couvre plus l'écran */
  .entete { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(252 251 248 / 0.98); }
  .nav {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: 96px var(--goutiere) 120px;
    background-color: var(--rouge);
    background-image: var(--trame);
    transform: translateY(-100%); visibility: hidden;
    transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
  }
  .nav.est-ouverte { transform: none; visibility: visible; transition: transform 0.55s var(--ease); }
  .nav__liens a {
    color: #fff; font-family: var(--f-titre); font-stretch: 78%; font-weight: 800;
    font-size: var(--t-headline-s); line-height: 1; padding: 12px 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.25); border-radius: 0;
  }
  .nav__liens { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liens a::after { display: none; }
  /* page courante : soulignement épais en plus de la couleur (Opquast 181) */
  .nav__liens a[aria-current="page"] {
    color: var(--soleil);
    text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.12em;
  }
  .nav__fermer {
    position: absolute; top: 14px; right: var(--goutiere);
    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 2px solid #fff; color: #fff; border-radius: var(--r-sm); cursor: pointer;
  }
  .nav__fermer svg { width: 24px; height: 24px; }
  .nav__appel {
    margin-top: 28px; align-self: flex-start;
  }
}
@media (min-width: 961px) {
  .nav__fermer, .nav__appel { display: none !important; }
}

/* ---------- Barre d'appel mobile ---------- */
.barre-appel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; gap: 8px;
  padding: 10px var(--goutiere) calc(10px + env(safe-area-inset-bottom));
  background: rgb(252 251 248 / 0.96);
  border-top: 1px solid var(--fil);
  box-shadow: 0 -10px 24px -18px rgb(27 23 22 / 0.5);
}
.barre-appel .btn { flex: 1; justify-content: center; min-height: 50px; }
.barre-appel .btn--ligne { flex: 0 0 auto; }
@media (max-width: 960px) {
  .barre-appel { display: flex; }
  body { padding-bottom: 76px; }
}

/* ---------- Statut en direct ---------- */
.statut {
  display: inline-flex; align-items: flex-start; gap: 0.6em;
  font-weight: 600; font-size: var(--t-small); color: var(--encre-2);
}
.statut__point {
  width: 11px; height: 11px; border-radius: var(--r-rond); flex: none; margin-top: 0.42em;
  background: var(--encre-2);
}
.statut[data-etat="ouvert"] .statut__point { background: var(--vert); box-shadow: 0 0 0 4px rgb(11 122 67 / 0.18); }
.statut[data-etat="bientot"] .statut__point { background: var(--soleil); box-shadow: 0 0 0 4px rgb(243 195 61 / 0.25); }
.statut[data-etat="ferme"] .statut__point { background: var(--rouge); }
.sur-couleur .statut { color: #fff; }

/* ==========================================================================
   Accueil : la nappe
   ========================================================================== */
.une { position: relative; padding-top: clamp(28px, 5vw, 64px); }
.une__grille {
  display: grid; grid-template-columns: 7fr 5fr; column-gap: clamp(24px, 4vw, 64px);
  grid-template-areas: "titre photos" "suite photos";
  grid-template-rows: auto 1fr;
  align-items: start;
}
.une__titre { grid-area: titre; position: relative; z-index: 3; }
.une__titre h1 { max-width: 9ch; }
.une__titre h1 em { font-style: normal; color: var(--rouge); }
.une__suite { grid-area: suite; position: relative; z-index: 3; padding-bottom: 40px; }
.une__chapo {
  font-size: var(--t-lead-fluid); line-height: 1.5; max-width: 34em;
  margin: 26px 0 30px; color: var(--encre);
}
.une__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.une__note { margin-top: 18px; font-size: var(--t-small); color: var(--encre-2); max-width: 36em; }
.une__note strong { color: var(--encre); }
.une__statut { margin-top: 22px; }
.une__statut--mobile { display: none; }

.une__photos {
  grid-area: photos; position: relative; z-index: 3;
  min-height: 640px; margin-bottom: -170px;
}
.tirage {
  position: absolute; margin: 0;
  background: #fff; padding: 9px 9px 12px;
  box-shadow: var(--ombre-tirage);
}
.tirage img { width: 100%; }
.tirage figcaption {
  font-size: var(--t-caption); font-weight: 600; line-height: 1.3; padding: 9px 3px 0; color: var(--encre-2);
}
.tirage figcaption b { color: var(--encre); }
.une__photos .tirage--1 { top: 0; right: 0; width: 100%; transform: rotate(1.6deg); }
.une__photos .tirage--2 { top: 400px; left: -16%; width: 70%; transform: rotate(-3deg); }
.nappe--mobile { display: none; }

.nappe {
  position: relative; z-index: 2;
  margin-top: -24px;
}
.nappe .bande { height: clamp(120px, 14vw, 170px); }
.nappe__etiquette {
  position: absolute; left: max(var(--goutiere), calc((100% - var(--largeur)) / 2)); top: 50%;
  transform: translateY(-50%) rotate(-1.5deg); z-index: 3;
  font-size: var(--t-small);
}
@media (prefers-reduced-motion: no-preference) {
  .nappe .bande, .tete-page .bande { animation: deroule 1.25s var(--ease) 0.15s both; }
  .nappe--large .nappe__etiquette { animation: pose 0.7s var(--ease) 1s both; }
  .une__photos .tirage--1 { animation: tirage1 0.9s var(--ease) 0.45s both; }
  .une__photos .tirage--2 { animation: tirage2 0.9s var(--ease) 0.65s both; }
}
@keyframes deroule {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes pose {
  from { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1.08); }
  to { opacity: 1; transform: translateY(-50%) rotate(-1.5deg); }
}
@keyframes tirage1 {
  from { opacity: 0; transform: translateY(-18px) rotate(5deg); }
  to { opacity: 1; transform: rotate(1.6deg); }
}
@keyframes tirage2 {
  from { opacity: 0; transform: translateY(-18px) rotate(-8deg); }
  to { opacity: 1; transform: rotate(-3deg); }
}

.reperes {
  display: flex; flex-wrap: wrap; gap: 10px 36px;
  padding: 26px 0 0; margin: 0; list-style: none;
  font-weight: 600; font-size: var(--t-small);
}
.reperes li { display: inline-flex; align-items: center; gap: 0.55em; }
.reperes .icone { color: var(--rouge); }
.reperes a { text-decoration-color: rgb(27 23 22 / 0.35); }
.reperes a:hover { text-decoration-color: var(--rouge); }

@media (max-width: 960px) {
  .une { padding-top: 22px; }
  .une__grille { grid-template-columns: 1fr; grid-template-areas: "titre" "photos" "suite"; grid-template-rows: auto; }
  .une__titre h1 { max-width: 12ch; }
  .une__photos { min-height: 0; margin: 20px 0 0; }
  .tirage { position: relative; }
  .une__photos .tirage--1 { top: auto; right: auto; width: auto; max-width: 560px; margin-inline: 6px; transform: rotate(-1.2deg); }
  .une__photos .tirage--2 { display: none; }
  .une__photos .tirage--1 { position: relative; z-index: 2; }
  .nappe--mobile { display: block; position: relative; z-index: 1; margin: -34px calc(-1 * var(--goutiere)) 0; }
  .nappe--mobile .bande { height: 84px; }
  .nappe--mobile .nappe__etiquette { left: var(--goutiere); top: auto; bottom: 10px; transform: rotate(-1.5deg); font-size: var(--t-label); }
  .une__statut--mobile { display: inline-flex; margin-top: 12px; font-size: var(--t-small); }
  .une__statut--large { display: none; }
  .nappe--large { display: none; }
  .une__chapo { margin-top: 30px; }
  .reperes { padding-top: 8px; }
}
@media (max-width: 560px) {
  .une__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 136px); position: relative; }
.section--serre { padding-block: clamp(56px, 7vw, 96px); }
.section__tete { margin-bottom: clamp(32px, 5vw, 56px); display: grid; gap: 18px; }
.section__tete p { font-size: var(--t-lead); max-width: 40em; }
.sur-couleur { color: #fff; }
.sur-couleur a:not(.btn) { color: #fff; }
.fond-rouge { background-color: var(--rouge); background-image: var(--trame); }
.fond-vert { background-color: var(--vert); background-image: var(--trame); }
.fond-indigo { background-color: var(--indigo); background-image: var(--trame); }
.fond-lin-2 { background-color: var(--lin-2); }
.texte-doux { color: rgb(255 255 255 / 0.86); }

/* ---------- Ardoise ---------- */
.ardoise { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.formules { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid rgb(255 255 255 / 0.9); }
.formules li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.35);
  font-weight: 600; font-size: var(--t-body);
}
.formules .prix {
  font-family: var(--f-titre); font-stretch: 80%; font-weight: 800; font-size: var(--t-title-l); line-height: 1;
}
.formules .prix small { font-size: 0.55em; font-weight: 700; margin-left: 2px; }
.ardoise__date {
  display: inline-block; margin: 16px 0 0; padding: 5px 12px 4px;
  border: 1.5px solid rgb(255 255 255 / 0.6); border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 700; line-height: 1.3;
}
.ardoise__note { margin-top: 18px; font-size: var(--t-small); }
.ardoise__cinema {
  margin-top: 26px; padding: 18px 20px; background: rgb(27 23 22 / 0.16);
  border-radius: var(--r-sm); font-size: var(--t-small);
}
.ardoise__cinema strong { display: block; font-family: var(--f-titre); font-stretch: 85%; font-size: var(--t-subtitle); margin-bottom: 4px; }
.cours { display: grid; gap: 0; }
.cours__bloc { padding: 22px 0 24px; border-bottom: 1px solid rgb(255 255 255 / 0.35); display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; }
.cours__bloc:first-child { padding-top: 0; }
.cours__bloc h3 { font-size: var(--t-title); }
.cours__bloc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cours__bloc li { font-size: var(--t-lead-fluid); font-weight: 600; line-height: 1.35; }
.cours__ou {
  display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.7); margin-bottom: 8px;
}
.pizza-moment {
  margin-top: 30px; background: var(--lin); color: var(--encre);
  display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center;
  padding: 30px 24px 22px; border-radius: var(--r-sm);
  box-shadow: 0 18px 30px -18px rgb(27 23 22 / 0.55);
  position: relative; overflow: hidden;
}
.pizza-moment::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background: linear-gradient(to bottom, var(--rouge) 0 40%, transparent 40% 60%, var(--vert) 60% 100%);
}
.pizza-moment h3 { font-size: var(--t-title); color: var(--rouge); }
.pizza-moment p { margin: 6px 0 0; font-size: var(--t-body); font-weight: 500; }
.pizza-moment__prix { text-align: right; display: grid; gap: 4px; font-weight: 600; font-size: var(--t-small); }
.pizza-moment__prix b { font-family: var(--f-titre); font-stretch: 80%; font-size: var(--t-title); line-height: 1; display: block; }
.ardoise-vide { font-size: var(--t-lead); font-weight: 600; }
@media (max-width: 900px) {
  .ardoise { grid-template-columns: 1fr; }
  .cours__bloc { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 480px) {
  .pizza-moment { grid-template-columns: 1fr; }
  .pizza-moment__prix { text-align: left; grid-auto-flow: column; justify-content: start; gap: 24px; }
}

/* ---------- Trois cuisines : la tablée ---------- */
.tablee-section { padding-bottom: clamp(56px, 8vw, 110px); }
.tablee { position: relative; }
.tablee__nappe { position: absolute; left: 0; right: 0; top: clamp(70px, 9vw, 120px); height: clamp(110px, 11vw, 150px); }
.tablee__grille { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.couvert__tirage { margin: 0 0 28px; background: #fff; padding: 9px 9px 12px; box-shadow: var(--ombre-tirage); }
.couvert:nth-child(1) .couvert__tirage { transform: rotate(-1.4deg); }
.couvert:nth-child(2) .couvert__tirage { transform: rotate(1deg) translateY(18px); margin-bottom: 46px; }
.couvert:nth-child(3) .couvert__tirage { transform: rotate(-0.6deg); }
.couvert__tirage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.couvert__tirage figcaption { font-size: var(--t-label); font-weight: 600; color: var(--encre-2); padding: 9px 2px 0; }
.couvert h3 { font-size: var(--t-title-l); font-stretch: 78%; line-height: 0.95; }
.couvert > p { margin-top: 12px; font-size: var(--t-body); }
.couvert .plats { margin-top: 16px; }
.couvert .plat__nom { font-size: var(--t-small); }
.couvert__lien { margin-top: 18px; }
.cuisine__marque { width: 64px; height: 18px; margin-bottom: 18px; background: var(--bande); background-size: 100% 100%; }
@media (max-width: 900px) {
  .tablee__grille { grid-template-columns: 1fr; gap: 56px; }
  .tablee__nappe { top: 40px; height: 100px; }
  .couvert:nth-child(2) .couvert__tirage { transform: rotate(1deg); margin-bottom: 28px; }
  .couvert .couvert__tirage { max-width: 560px; }
}

/* ---------- Liste de plats (carte) ---------- */
.plats { list-style: none; margin: 22px 0 0; padding: 0; }
.plat { padding: 11px 0; border-bottom: 1px dashed rgb(27 23 22 / 0.18); }
.plat__ligne { display: flex; align-items: baseline; gap: 10px; }
.plat__nom { font-weight: 700; font-size: var(--t-body); }
.plat__points { flex: 1; min-width: 20px; border-bottom: 2px dotted rgb(27 23 22 / 0.3); transform: translateY(-5px); }
.plat__prix { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.plat__desc { font-size: var(--t-small); color: var(--encre-2); margin-top: 2px; max-width: 58ch; line-height: 1.45; }
.plat--sans-prix .plat__points { display: none; }
.sur-couleur .plat { border-bottom-color: rgb(255 255 255 / 0.3); }
.sur-couleur .plat__points { border-bottom-color: rgb(255 255 255 / 0.45); }
.sur-couleur .plat__desc { color: rgb(255 255 255 / 0.84); }

/* ---------- Petits plus ---------- */
.plus { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.anniv {
  position: relative; background: var(--rouge); color: #fff; padding: clamp(28px, 4vw, 44px);
  background-image: var(--trame);
  box-shadow: 0 24px 40px -24px rgb(27 23 22 / 0.7);
  transform: rotate(-1deg);
}
.anniv__chiffre {
  font-family: var(--f-titre); font-stretch: 75%; font-weight: 800;
  font-size: var(--t-display); line-height: 0.8; letter-spacing: -0.04em; display: block;
}
.anniv h3 { font-size: var(--t-title); margin: 14px 0 12px; }
.anniv p { font-size: var(--t-body); color: rgb(255 255 255 / 0.9); }
.plus__liste { list-style: none; margin: 0; padding: 0; }
.plus__liste li { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: 24px 0; border-bottom: 1px solid var(--fil); }
.plus__liste li:first-child { padding-top: 0; }
.plus__prix {
  grid-row: span 2; min-width: 5.6ch;
  font-family: var(--f-titre); font-stretch: 78%; font-weight: 800; font-size: var(--t-title-l); line-height: 1; color: var(--rouge);
}
.plus__liste h3 { font-size: var(--t-subtitle); }
.plus__liste p { font-size: var(--t-body); color: var(--encre-2); }
@media (max-width: 900px) {
  .plus { grid-template-columns: 1fr; }
  .anniv { transform: none; }
  .plus__liste li { grid-template-columns: 1fr; gap: 4px; }
  .plus__prix { grid-row: auto; }
}

/* ---------- Terrasse ---------- */
.terrasse { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.terrasse__photos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: end; }
.terrasse__photos figure { margin: 0; background: #fff; padding: 8px; box-shadow: 0 20px 34px -18px rgb(27 23 22 / 0.6); }
.terrasse__photos figure:first-child { transform: rotate(-1.4deg); }
.terrasse__photos figure:last-child { transform: rotate(2deg) translateY(28px); }
.terrasse__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.terrasse__texte p { font-size: var(--t-lead); }
.terrasse__texte .btn { margin-top: 14px; }
@media (max-width: 860px) {
  .terrasse { grid-template-columns: 1fr; }
  .terrasse__photos figure:last-child { transform: rotate(2deg) translateY(16px); }
}

/* ---------- Horaires et accès ---------- */
.infos { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.horaires { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.horaires caption { text-align: left; margin-bottom: 14px; }
.horaires th, .horaires td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--fil); font-size: var(--t-body); }
.horaires th { font-weight: 700; width: 34%; }
.horaires thead th { font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-2); padding-block: 8px; border-bottom: 2px solid var(--encre); }
.horaires tr.est-aujourdhui th, .horaires tr.est-aujourdhui td { background: rgb(196 18 47 / 0.07); }
.horaires tr.est-aujourdhui th::after {
  content: "Aujourd'hui"; display: inline-block; margin-left: 10px; padding: 2px 8px 3px;
  background: var(--rouge); color: #fff; font-size: var(--t-label); font-weight: 700; border-radius: var(--r-sm); vertical-align: 2px;
}
.horaires .ferme { color: var(--encre-2); }
.regles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.regles li { position: relative; padding-left: 26px; font-size: var(--t-small); color: var(--encre-2); }
.regles li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 12px; height: 6px;
  background: linear-gradient(to bottom, var(--rouge) 0 45%, transparent 45% 60%, var(--vert) 60%);
}
.regles strong { color: var(--encre); }
.adresse { font-style: normal; font-size: var(--t-lead); line-height: 1.45; font-weight: 600; }
.adresse__boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.adresse__boutons .btn { min-height: 46px; font-size: var(--t-body); }
.bloc-appel {
  margin-top: 30px; padding: 26px; background: var(--encre); color: #fff; border-radius: var(--r-sm);
  background-image: var(--trame);
}
.bloc-appel p { color: rgb(255 255 255 / 0.85); font-size: var(--t-small); }
.bloc-appel a.gros-numero {
  display: block; font-family: var(--f-titre); font-stretch: 78%; font-weight: 800;
  font-size: var(--t-headline-s); line-height: 1; color: #fff; text-decoration: none; margin: 8px 0 12px;
  font-variant-numeric: tabular-nums lining-nums;
}
.bloc-appel a.gros-numero:hover { color: var(--soleil); }
@media (max-width: 900px) {
  .infos { grid-template-columns: 1fr; }
  .horaires th { width: auto; }
  .horaires th, .horaires td { padding: 12px 6px; font-size: var(--t-small); white-space: nowrap; }
  .horaires tr.est-aujourdhui th { white-space: normal; }
}

/* ---------- Le patron ---------- */
.patron { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.patron__images { position: relative; display: grid; grid-template-columns: 1fr 0.75fr; gap: 14px; align-items: end; }
.patron__images figure { margin: 0; background: #fff; padding: 8px; box-shadow: 0 20px 34px -18px rgb(27 23 22 / 0.65); }
.patron__images figure:first-child { transform: rotate(-2deg); }
.patron__images figure:last-child { transform: rotate(3deg) translateY(-24px); }
.patron__images figcaption { color: var(--encre-2); font-size: var(--t-label); font-weight: 600; padding: 8px 2px 0; }
.patron__texte p { font-size: var(--t-lead); }
.patron__texte .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 860px) {
  .patron { grid-template-columns: 1fr; }
  .patron__images { max-width: 520px; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #fff; }
.pied .bande { height: 56px; }
.pied__grille {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
  padding-block: 56px 40px;
}
.pied h2 { font-size: var(--t-lead); font-stretch: 90%; margin-bottom: 14px; letter-spacing: 0; color: var(--soleil); }
.pied p, .pied li, .pied address { font-size: var(--t-small); color: rgb(255 255 255 / 0.82); font-style: normal; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); }
.pied a:hover { text-decoration-color: var(--soleil); }
.pied .marque { color: #fff; margin-bottom: 16px; }
.pied .marque svg { color: #fff; }
.pied .marque__nom small { color: rgb(255 255 255 / 0.7); }
.pied__numero {
  display: inline-block; font-family: var(--f-titre); font-stretch: 78%; font-weight: 800; font-size: var(--t-title-l); line-height: 1;
  text-decoration: none !important; margin: 4px 0 10px; font-variant-numeric: tabular-nums lining-nums;
}
.pied__bas {
  border-top: 1px solid rgb(255 255 255 / 0.16); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  font-size: var(--t-caption); color: rgb(255 255 255 / 0.66);
}
.pied__bas p { font-size: inherit; color: inherit; margin: 0; }
.pied__bas a { color: inherit; }
.pied__intl { margin: -4px 0 10px; font-size: var(--t-caption); }
.pied__intl .num { white-space: nowrap; }
.pied .pied__autres { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 0.16); }
.alcool { font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 900px) {
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pied__grille { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Pages intérieures
   ========================================================================== */
.tete-page { padding-top: clamp(40px, 7vw, 88px); }
.tete-page__grille { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(32px, 5vw, 72px); align-items: end; padding-bottom: clamp(32px, 5vw, 56px); }
.tete-page h1 { font-size: var(--t-display); }
.tete-page__chapo { font-size: var(--t-lead-fluid); line-height: 1.55; }
.tete-page .bande { height: 44px; }
@media (max-width: 860px) {
  .tete-page__grille { grid-template-columns: 1fr; }
}

/* Carte */
.carte-outils {
  position: sticky; top: 77px; z-index: 20;
  background: rgb(252 251 248 / 0.96); border-bottom: 1px solid var(--fil);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.carte-outils__barre { display: flex; align-items: center; gap: 24px; min-height: 64px; }
/* pas de retrait par défaut de la liste ; la marge de fin laisse la dernière pastille sortir du fondu */
.onglets {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
  padding: 10px 40px 10px 0; margin: 0; list-style: none;
  mask-image: linear-gradient(to right, var(--encre) calc(100% - 48px), transparent);
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  display: inline-block; white-space: nowrap; padding: 8px 14px; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-small); text-decoration: none; border: 1.5px solid var(--fil); background: #fff;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.onglets a:hover { border-color: var(--encre); }
.onglets a.est-actif { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bascule { display: inline-flex; flex: none; border: 2px solid var(--encre); border-radius: var(--r-sm); overflow: hidden; }
.bascule button {
  border: 0; background: transparent; padding: 8px 12px; font: inherit; font-weight: 700; font-size: var(--t-small); cursor: pointer; color: var(--encre);
  min-height: 40px;
}
.bascule button[aria-pressed="true"] { background: var(--encre); color: #fff; }
@media (max-width: 700px) {
  .carte-outils__barre { flex-wrap: wrap; gap: 0 12px; padding-bottom: 10px; }
  .onglets { flex-basis: 100%; }
}

.carte { display: grid; gap: 0; }
.carte__section { padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--fil); display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.carte__section:last-child { border-bottom: 0; }
.carte__tete { position: sticky; top: 170px; }
.carte__tete h2 { font-size: var(--t-headline-s); }
.carte__tete p { margin-top: 14px; color: var(--encre-2); font-size: var(--t-small); }
.carte__tete .cuisine__marque { margin-bottom: 16px; }
.carte__tete figure { margin: 22px 0 0; background: #fff; padding: 8px; box-shadow: var(--ombre-tirage); max-width: 320px; transform: rotate(-1.5deg); }
.carte__tete figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte__tete figcaption { font-size: var(--t-label); font-weight: 600; color: var(--encre-2); padding: 8px 2px 0; }
.carte__corps .plats { margin-top: 0; columns: 2; column-gap: clamp(24px, 4vw, 48px); }
.carte__corps .plats .plat { break-inside: avoid; }
.carte__corps .plats--une { columns: 1; }
/* prix à plusieurs colonnes : vrai tableau, même dessin que la liste (Opquast 185, 245) */
.plats-table { width: 100%; border-collapse: collapse; }
.plats-table thead th {
  padding: 0 0 6px 10px; border-bottom: 2px solid var(--encre); text-align: right; white-space: nowrap;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--encre-2);
}
.plats-table thead th:first-child { padding-left: 0; }
.plats-table tbody tr { border-bottom: 1px dashed rgb(27 23 22 / 0.18); }
.plats-table tbody th, .plats-table td { padding: 11px 0; vertical-align: baseline; }
.plats-table tbody th { text-align: left; font-weight: 400; }
.plats-table td {
  width: 4.2em; padding-left: 10px; text-align: right; white-space: nowrap;
  font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
}
.groupe + .groupe { margin-top: 40px; }
.groupe h3 { font-size: var(--t-title); margin-bottom: 10px; }
.sous-section { margin-top: 36px; padding: 22px 24px; background: var(--lin-2); border-radius: var(--r-sm); }
.sous-section h3 { font-size: var(--t-subtitle); color: var(--rouge); }
.sous-section .plats { columns: 1; margin-top: 8px; }
.menus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 48px); }
.menu-formule { padding: 22px 0; border-bottom: 1px solid var(--fil); }
.menu-formule h3 { font-size: var(--t-title); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.menu-formule h3 span { color: var(--rouge); font-size: var(--t-subtitle); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.menu-formule p { margin-top: 8px; font-size: var(--t-small); color: var(--encre-2); }
.menu-formule a { font-weight: 700; }
.mention-prix { font-size: var(--t-small); color: var(--encre-2); margin-top: 18px; }
.chargement { color: var(--encre-2); font-weight: 600; padding: 40px 0; }
.telechargements { display: flex; flex-wrap: wrap; gap: 12px; }
.telechargements .btn { font-size: var(--t-body); min-height: 48px; }
@media (max-width: 900px) {
  .carte__section { grid-template-columns: 1fr; }
  .carte__tete { position: static; }
  .carte__corps .plats { columns: 1; }
  .menus { grid-template-columns: 1fr; }
}
body.prix-emporter .plat__prix[data-sur-place] { display: none; }
body:not(.prix-emporter) .plat__prix[data-emporter] { display: none; }

/* Galerie simple */
.galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 22px); align-items: start; }
.galerie figure { margin: 0; background: #fff; padding: 8px 8px 10px; box-shadow: var(--ombre-tirage); }
.galerie img { width: 100%; object-fit: cover; }
.galerie figcaption { font-size: var(--t-caption); font-weight: 600; color: var(--encre-2); padding: 8px 2px 0; }
.g-6 { grid-column: span 6; } .g-4 { grid-column: span 4; } .g-5 { grid-column: span 5; } .g-7 { grid-column: span 7; } .g-3 { grid-column: span 3; } .g-8 { grid-column: span 8; }
.galerie .ratio-43 img { aspect-ratio: 4 / 3; }
.galerie .ratio-34 img { aspect-ratio: 3 / 4; object-position: 50% 12%; }
.galerie .ratio-11 img { aspect-ratio: 1; }
.incline-g { transform: rotate(-1.2deg); }
.incline-d { transform: rotate(1.4deg); }
@media (max-width: 760px) {
  .galerie { grid-template-columns: 1fr; gap: 20px; }
  .galerie > * { grid-column: 1 !important; margin-top: 0 !important; }
  .galerie .ratio-34 img { aspect-ratio: 4 / 3; }
  .incline-g, .incline-d { transform: none; }
}

/* Deux colonnes génériques */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.duo--centre { align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

.citation {
  margin: 0; font-family: var(--f-titre); font-stretch: 82%; font-weight: 700;
  font-size: var(--t-title-l); line-height: 1.15; letter-spacing: -0.01em;
}
.citation footer { font-family: var(--f-texte); font-size: var(--t-body); font-weight: 600; margin-top: 16px; color: var(--encre-2); letter-spacing: 0; }
.sur-couleur .citation footer { color: rgb(255 255 255 / 0.8); }

.texte-long p { font-size: var(--t-body); max-width: 62ch; }
.texte-long h2 + p, .texte-long h3 + p { margin-top: 18px; }

/* Mentions légales */
.legal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
.legal section { padding: 26px 0; border-bottom: 1px solid var(--fil); }
.legal h2 { font-size: var(--t-subtitle); margin-bottom: 10px; }
.legal p, .legal address { font-style: normal; color: var(--encre-2); }
@media (max-width: 760px) { .legal { grid-template-columns: 1fr; } }

/* Grand appel (vente à emporter) */
.grand-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.grand-appel__numero {
  font-family: var(--f-titre); font-stretch: 75%; font-weight: 800; line-height: 0.9;
  font-size: var(--t-display); letter-spacing: -0.03em; color: #fff; text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.grand-appel__numero:hover { color: var(--soleil); }

/* Impression */
@media print {
  .entete, .barre-appel, .carte-outils, .nappe, .pied .bande, .burger, .saut,
  .pied__grille > div:last-child { display: none !important; }
  body { background: #fff; padding: 0; }
  .fond-rouge, .fond-vert, .fond-indigo { background: #fff !important; color: var(--encre) !important; }
  .sur-couleur, .sur-couleur a { color: var(--encre) !important; }
}