/* La Nuova Corona, Bassecourt · site écrit à la main (10.10.2026), sans framework.
   La maison : le travertin de son sol, l'espresso de ses tables, le laiton de son enseigne,
   et le rouge de ses volets, qui ouvrent le site.
   Règle : l'état par défaut de chaque élément animé EST l'état final. Sans JS, sous mouvement réduit,
   ou si un script tombe, la page est complète et immobile.
   Contrastes calculés : rouge #9e1b20 sur travertin 6,85:1 · laiton clair #e0c07e sur espresso 10,65:1 ·
   blanc cassé sur rouge 7,8:1 · texte atténué #6b5b4c sur travertin 5,59:1.
   LE LAITON NE PORTE DU TEXTE QUE SUR SOMBRE, LE ROUGE QUE SUR CLAIR. */

:root {
  color-scheme: only light;
  --travertin: #f3ede3;
  --papier: #faf6ee;
  --encre: #1d1714;
  --sourd: #6b5b4c;
  --bord: #ddd0bb;
  --champ: #9a8a76;
  --nuit: #16120f;
  --nuit-clair: #211a15;
  --creme: #ece4d8;
  --creme-sourd: #cfc4b4;
  --gris-nuit: #a1927f;
  --laiton: #b08a3e;
  --laiton-clair: #e0c07e;
  --laiton-filet: rgb(176 138 62 / .32);
  --rouge: #9e1b20;
  --rouge-fonce: #75130f;
  --blanc: #fdf8f0;

  --f-titre: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --f-texte: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-b4g: Poppins, Inter, system-ui, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-sortie: cubic-bezier(.23, 1, .32, 1);
  /* Le battant qui tourne sur ses gonds : il part lentement, prend de la vitesse, se pose. Mesuré au film :
     avec la courbe de sortie, 80 % du geste tombait dans les 150 premières ms et l'écran restait vide 0,5 s. */
  --ease-gond: cubic-bezier(.55, .05, .22, 1);

  /* Mesurées en JS (corona.js §1) ; ces valeurs ne servent que si le script ne tourne pas. */
  --nav-h: 61px;
  --sommaire-h: 0px;
  --barre-bas: 0px;
  --gout: 16px;
  --section: 72px;
  --large: 1180px;
}
@media (min-width: 960px) {
  :root { --nav-h: 99px; --gout: 32px; --section: 120px; }
}
@media (max-width: 959px) {
  :root { --barre-bas: calc(61px + env(safe-area-inset-bottom)); }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* La barre du haut, le sommaire de la carte et l'onglet du bas ne cachent jamais ce qui reçoit le focus. */
  scroll-padding-top: calc(var(--nav-h) + var(--sommaire-h) + 12px);
  scroll-padding-bottom: calc(var(--barre-bas) + 12px);
}
body {
  margin: 0; background: var(--travertin); color: var(--encre);
  font: 400 16px/1.65 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 960px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p, figure, ul, ol, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
.nuit :focus-visible { outline-color: var(--laiton-clair); }
/* Un titre qui reçoit le focus par script (après « Passer », après un envoi) n'est pas une commande : pas d'anneau. */
h1[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
.cache-lecteur {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Les heures et le numéro ne se coupent jamais en fin de ligne. */
.chiffres { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 70; background: var(--rouge); color: var(--blanc);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.evitement:focus { top: 12px; }
.contenu {
  max-width: var(--large); margin: 0 auto;
  padding-left: max(var(--gout), env(safe-area-inset-left)); padding-right: max(var(--gout), env(safe-area-inset-right));
}
.section { padding: var(--section) 0; }
.centre { text-align: center; }

/* ---------- Les titres : Bodoni, jamais sous 24 px (ses déliés s'effacent dessous) ---------- */
.titre-2 { font-family: var(--f-titre); font-size: clamp(32px, 5.2vw, 52px); line-height: 1.06; letter-spacing: .005em; }
.sous { margin-top: 12px; color: var(--sourd); }
.nuit .sous { color: var(--creme-sourd); }
/* Le surtitre : Inter en capitales espacées. Rouge sur clair, laiton sur sombre, jamais l'inverse. */
.sur {
  font: 600 12px/1.5 var(--f-texte); text-transform: uppercase; letter-spacing: .24em; color: var(--rouge);
}
.nuit .sur, .sur.laiton { color: var(--laiton-clair); }
.sur.calme { color: var(--sourd); }
.nuit .sur.calme { color: var(--gris-nuit); }

/* ---------- Les fonds ---------- */
.nuit { background: linear-gradient(168deg, var(--nuit-clair), var(--nuit)); color: var(--creme); }
.nuit h1, .nuit h2, .nuit h3 { color: #f7f1e6; }
/* Le galon : le double filet de laiton de son enseigne. Un galon n'est pas une marque ; son logo ne se dessine jamais. */
.galon {
  height: 7px; opacity: .6;
  background: linear-gradient(180deg, var(--laiton) 0 1px, transparent 1px 3px, var(--laiton) 3px 4px, transparent 4px 6px, var(--laiton) 6px 7px);
}
.losange { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); background: var(--laiton); flex: none; }

/* ---------- Le cadre : un cliché monté comme un tableau, le filet de laiton à 10 px du bord ---------- */
.cadre { position: relative; overflow: hidden; background: var(--nuit-clair); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
.cadre::after {
  content: ""; position: absolute; inset: 10px; z-index: 3; border: 1px solid rgb(224 192 126 / .5); pointer-events: none;
}

/* ---------- Les boutons : angles vifs, capitales ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 0;
  font: 600 13px/1.1 var(--f-texte); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform 100ms var(--ease);
}
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-contour { border-color: color-mix(in srgb, var(--rouge) 60%, transparent); color: var(--rouge); }
.btn-contour:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.nuit .btn-contour { border-color: rgb(224 192 126 / .6); color: var(--laiton-clair); }
.nuit .btn-contour:hover { background: var(--laiton-clair); border-color: var(--laiton-clair); color: var(--nuit); }
/* Le rouge plein est réservé à « Commander » : les autres boutons pleins sont en espresso, laiton clair (10,65:1). */
.btn-sombre { background: var(--nuit); border-color: var(--nuit); color: var(--laiton-clair); }
.btn-sombre:hover { background: var(--nuit-clair); color: #f3dca6; }

/* Commander sur Best4GoEat : le SEUL bouton rouge plein du site (blanc cassé sur rouge, 7,8:1).
   Sur l'espresso, l'aplat rouge se détache mal (2,3:1 entre les surfaces) : il porte donc le filet de laiton
   du cadre, à 4 px du bord. Le mot de marque garde sa graisse à lui (Poppins 900 italique). */
.btn-commander {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px; background: var(--rouge); color: var(--blanc); text-decoration: none;
  font: 600 13px/1.1 var(--f-texte); text-transform: uppercase; letter-spacing: .14em;
  transition: background-color 150ms var(--ease), transform 100ms var(--ease);
}
.btn-commander::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(224 192 126 / .7); pointer-events: none; }
.btn-commander:hover { background: var(--rouge-fonce); }
.btn-commander:active { transform: scale(.98); }
.btn-commander > svg { width: 20px; height: 20px; flex: none; }
/* Là où il y a de la place, le mot de marque cède au LOGO Best4GoEat (BG, 10.10 : « toujours aussi mettre le logo »).
   Le lien garde son aria-label ; le logo est décoratif. Il a son propre contour noir épais : il se lit sur le rouge. */
.cmd-texte { display: inline-flex; align-items: center; gap: 10px; }
.btn-commander .b4g-logo-bouton { width: auto; height: 38px; flex: none; overflow: visible; margin: -4px 0; }
.b4g-logo-bouton text { font-family: var(--f-b4g); font-style: italic; font-weight: 900; }

/* ---------- La barre « deck » : le nom centré, un rang de liens séparés par des losanges ---------- */
.deck {
  position: sticky; top: 0; z-index: 40; background: var(--travertin);
  border-bottom: 1px solid var(--bord); padding-top: env(safe-area-inset-top);
}
.deck-haut {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; height: 60px;
  max-width: var(--large); margin: 0 auto;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
}
.deck-nom {
  grid-column: 2; justify-self: center; display: inline-flex; align-items: center; min-height: 44px;
  font: 600 24px/1 var(--f-titre); letter-spacing: .01em; color: var(--encre); text-decoration: none; white-space: nowrap;
}
.deck-tel, .deck-commander, .deck-liens { display: none; }
.rond-tel {
  grid-column: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--nuit); color: var(--laiton-clair);
}
.rond-tel svg { width: 19px; height: 19px; }
@media (max-width: 359px) { .deck-nom { font-size: 24px; letter-spacing: 0; } .deck-haut { gap: 4px; } }
@media (min-width: 960px) {
  .deck-haut { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); height: 60px; gap: 24px; padding-left: max(var(--gout), env(safe-area-inset-left)); padding-right: max(var(--gout), env(safe-area-inset-right)); }
  .deck-nom { font-size: 28px; }
  .rond-tel { display: none; }
  .deck-tel {
    grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font: 600 15px/1 var(--f-texte); color: var(--encre); text-decoration: none;
  }
  .deck-tel svg { width: 16px; height: 16px; color: var(--rouge); }
  .deck-tel:hover { color: var(--rouge); }
  .deck-commander { grid-column: 3; justify-self: end; display: inline-flex; min-height: 48px; padding: 0 16px; font-size: 12px; gap: 9px; }
  .deck-commander > svg { width: 17px; height: 17px; }
  .deck-commander .b4g-logo-bouton { height: 36px; margin: -3px 0; }
  .deck-commander::after { inset: 3px; }
  .deck-liens {
    display: flex; justify-content: center; align-items: center; gap: 4px 18px; flex-wrap: wrap;
    border-top: 1px solid color-mix(in srgb, var(--bord) 70%, transparent); padding: 0 var(--gout);
  }
  .deck-liens a {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 4px;
    font: 600 12px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .18em; color: var(--sourd); text-decoration: none;
  }
  .deck-liens a:hover { color: var(--encre); }
  .deck-liens a[aria-current="page"] { color: var(--rouge); }
  .deck-liens .losange { opacity: .55; }
}

/* ---------- Le héros : le nom, et la salle montée en tableau ---------- */
.heros { position: relative; }
.heros-grille { display: grid; }
.heros-photo { aspect-ratio: 4 / 3; }
.heros-photo img { object-position: 50% 72%; }
.heros-texte { padding: 30px max(var(--gout), env(safe-area-inset-right)) 44px max(var(--gout), env(safe-area-inset-left)); }
.enseigne { font-family: var(--f-titre); font-weight: 600; line-height: .92; }
.enseigne .nuova {
  display: block; font-style: italic; font-size: clamp(24px, 6.4vw, 38px); line-height: 1; letter-spacing: .02em; color: var(--laiton-clair);
}
/* L'interlettrage DÉCROÎT quand le corps croît ; text-indent rattrape la chasse fantôme de la dernière lettre. */
.enseigne .corona {
  display: block; margin-top: 4px; font-size: clamp(56px, 17vw, 132px); text-transform: uppercase; letter-spacing: .04em; text-indent: .04em;
}
.nom-d-usage { margin-top: 12px; font: italic 600 clamp(20px, 5vw, 26px)/1.25 var(--f-titre); color: var(--laiton-clair); }
.heros .sur { margin-top: 14px; }
.phrase { margin-top: 16px; max-width: 40ch; color: var(--creme-sourd); }
.heros-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.heros-actions .btn-commander { grid-column: 1 / -1; }
/* Sur grand écran, « Il menù » est déjà dans la barre : le héros garde deux boutons sur une ligne. */
@media (min-width: 960px) { .heros-actions .menu-mobile { display: none; } }
.heros-actions .btn { padding: 0 10px; }
.heros-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px; }
.heros-tel a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 600 19px/1 var(--f-texte); color: var(--creme); text-decoration: none;
}
.heros-tel a svg { width: 18px; height: 18px; color: var(--laiton-clair); }
.heros-tel a:hover { color: var(--laiton-clair); }
.jour-h { font: 500 15px/1.4 var(--f-texte); color: var(--creme-sourd); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 600px) and (max-width: 959px) {
  .heros-photo { aspect-ratio: 16 / 10; }
  .heros-actions { display: flex; flex-wrap: wrap; }
  .heros-actions .btn { padding: 0 22px; }
}
@media (min-width: 960px) {
  .heros-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: center; gap: 64px;
    max-width: var(--large); margin: 0 auto; min-height: calc(100svh - var(--nav-h)); padding: 48px var(--gout) 56px;
  }
  .heros-photo { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; max-height: calc(100svh - var(--nav-h) - 104px); width: 100%; justify-self: end; }
  .heros-photo img { object-position: 50% 60%; }
  .heros-texte { grid-column: 1; grid-row: 1; padding: 0; }
  .phrase { font-size: 18px; }
  .heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .heros-actions .btn { padding: 0 22px; }
}

/* ---------- Les rendez-vous : trois faits datés, séparés par un filet, sans cartes ---------- */
.rdv-grille { display: grid; gap: 44px; margin-top: 44px; }
.rdv { text-align: center; }
.rdv article { padding: 0 8px; }
/* Le tiret de « 10.– » : en didone c'est un délié, presque invisible ; il passe en Inter. */
.tiret { font-family: var(--f-texte); font-weight: 500; font-size: .8em; }
.rdv .chiffre { margin-top: 14px; font: 600 50px/1 var(--f-titre); color: var(--rouge); font-variant-numeric: lining-nums tabular-nums; }
.rdv h3 { margin-top: 12px; font: 600 24px/1.15 var(--f-titre); }
.rdv article > p:last-child { margin: 10px auto 0; max-width: 30ch; color: var(--sourd); font-size: 15px; line-height: 1.6; }
/* Le tampon : la carte de fidélité est un carton qu'on tamponne au comptoir. Le seul geste ludique du site. */
.tampon {
  display: inline-block; padding: .06em .28em .1em; border: 2px solid currentColor; border-radius: .14em;
  box-shadow: inset 0 0 0 3px var(--travertin), inset 0 0 0 4px currentColor; transform: rotate(-4deg);
  font-size: .84em;
}
@media (min-width: 760px) {
  .rdv-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .rdv article + article { border-left: 1px solid var(--bord); }
  .rdv .chiffre { font-size: 56px; }
}

/* ---------- La carte en bref (les incontournables, tirés de l'API) ---------- */
.bref { background: var(--papier); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.assiettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; margin-top: 40px; text-align: left; }
.assiette figure { aspect-ratio: 4 / 5; }
.assiette .sur { margin-top: 14px; font-size: 11px; letter-spacing: .2em; }
.assiette .ligne { margin-top: 4px; }
.assiette .desc { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sourd); }
@media (min-width: 760px) {
  .assiettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
  .assiette .desc { font-size: 15px; }
}
/* La ligne de carte : le nom, le pointillé d'une carte imprimée, le prix. Le pointillé se rétracte
   jusqu'à zéro plutôt que de pousser le prix hors du cadre. */
.ligne { display: flex; align-items: baseline; align-items: last baseline; gap: 8px; }
.ligne h3 { font: 600 17px/1.3 var(--f-texte); min-width: 0; overflow-wrap: anywhere; }
.points { flex: 1 1 0; min-width: 12px; align-self: flex-end; margin-bottom: .36em; border-bottom: 1px dotted color-mix(in srgb, var(--sourd) 55%, transparent); }
.prix { flex: none; font: 600 17px/1.3 var(--f-texte); color: var(--rouge); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.nuit .prix { color: var(--laiton-clair); }
.lignes-bref { max-width: 860px; margin: 40px auto 0; text-align: left; display: grid; gap: 0 56px; }
.lignes-bref li { padding: 14px 0; border-bottom: 1px solid var(--bord); }
.lignes-bref .sur { font-size: 11px; letter-spacing: .2em; }
.lignes-bref .ligne { margin-top: 2px; }
.lignes-bref .desc { margin-top: 2px; font-size: 14px; color: var(--sourd); }
.assiettes + .lignes-bref { margin-top: 28px; }
@media (min-width: 760px) { .lignes-bref { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.suite { margin-top: 44px; }
@media (max-width: 599px) { .suite .btn { width: 100%; } }

/* ---------- La salle : trois façons d'être à table, une grille régulière encadrée ---------- */
.salles { display: grid; gap: 36px; margin-top: 44px; text-align: left; }
.salle figure { aspect-ratio: 4 / 3; }
.salle h3 { margin-top: 16px; font: 600 24px/1.15 var(--f-titre); }
.salle p { margin-top: 6px; color: var(--sourd); font-size: 15px; }
.salles-note { margin: 36px auto 0; max-width: 52ch; color: var(--sourd); }
@media (min-width: 760px) { .salles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ---------- Il forno a legna, avec Giovanni ---------- */
.forno-grille { display: grid; gap: 40px; align-items: center; }
.forno .titre-2 .compte-pizzas { color: var(--laiton-clair); }
.forno p.texte { margin-top: 18px; max-width: 46ch; color: var(--creme-sourd); }
.citation { margin-top: 30px; padding-left: 20px; border-left: 1px solid var(--laiton-filet); max-width: 46ch; }
/* La voix de la maison : Bodoni italique 600 (la 500 rompt ses déliés à 17 px), jamais sous 20 px. */
.citation blockquote p { font: italic 600 clamp(20px, 2.2vw, 23px)/1.55 var(--f-titre); color: #e9dfcf; }
.citation figcaption { margin-top: 12px; font-size: 14px; color: var(--gris-nuit); }
.forno-actions { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 30px; }
.lien { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--laiton-clair); text-underline-offset: 5px; }
.lien-clair { color: var(--rouge); }
.forno-photo { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .forno-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; } }

/* ---------- Nous trouver ---------- */
.infos-grille { display: grid; gap: 40px; margin-top: 40px; text-align: left; }
.info h3 { font: 600 26px/1.1 var(--f-titre); margin-bottom: 14px; }
.jour { font: 600 17px/1.4 var(--f-texte); color: var(--rouge); margin-bottom: 10px; font-variant-numeric: lining-nums tabular-nums; }
.semaine { width: 100%; border-collapse: collapse; font-size: 15px; }
.semaine th { text-align: left; font-weight: 500; padding: 6px 12px 6px 0; text-transform: capitalize; }
.semaine td { text-align: right; padding: 6px 0; font-variant-numeric: lining-nums tabular-nums; }
.semaine tr + tr { border-top: 1px solid var(--bord); }
.semaine tr.ferme td { color: var(--sourd); }
.semaine .plage { white-space: nowrap; }
.semaine tr.aujourdhui th, .semaine tr.aujourdhui td { font-weight: 600; color: var(--rouge); }
.souplesse { margin-top: 12px; font-size: 14px; color: var(--sourd); }
.info .btn { margin-top: 16px; }
.facade { margin-top: 18px; aspect-ratio: 16 / 9; max-width: 360px; }
.facade + p { margin-top: 8px; font-size: 14px; color: var(--sourd); }
.grand-tel { font: 600 30px/1.1 var(--f-texte); }
.grand-tel a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.grand-tel a:hover { color: var(--rouge); }
.info .liens { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; }
.info .liens a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--rouge); text-underline-offset: 5px; }
@media (min-width: 960px) { .infos-grille { grid-template-columns: 1.1fr 1fr 1fr; gap: 56px; } }

/* ---------- Pied de page : le colophon ---------- */
.pied { padding: 44px 0 calc(48px + var(--barre-bas)); font-size: 15px; text-align: center; }
.pied .contenu { display: grid; gap: 10px; justify-items: center; }
.pied .nom-pied { font: 600 28px/1 var(--f-titre); color: #f7f1e6; }
.pied a { color: var(--creme); }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.pied nav a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 5px; }
.revoir { display: none !important; }
.mouvement:not(.eco) .revoir { display: inline-flex !important; }
.colophon { color: var(--gris-nuit); }
.colophon a { color: var(--creme-sourd); }
.colophon span { white-space: nowrap; }

/* ---------- L'onglet du bas, sur téléphone et tablette : Commander | Réserver | Appeler ---------- */
.barre-bas {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 1px;
  background: var(--nuit); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgb(22 18 15 / .25);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
.barre-bas a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 61px; padding: 0 6px;
  background: var(--nuit); color: var(--laiton-clair); text-decoration: none; font: 600 13px/1.1 var(--f-texte);
}
.barre-bas a + a { box-shadow: -1px 0 0 var(--laiton-filet); }
.barre-bas svg { width: 20px; height: 20px; flex: none; }
.barre-bas .bb-commander { background: var(--rouge); color: var(--blanc); }
.bb-commander span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bb-commander small { font-family: var(--f-b4g); font-style: italic; font-weight: 900; font-size: 12px; letter-spacing: 0; }
.barre-bas a:focus-visible { outline: 3px solid var(--laiton-clair); outline-offset: -3px; }
.barre-bas a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--laiton-clair); }
/* Dès l'arrivée, on peut commander : l'onglet reste au-dessus des volets pendant l'accueil (BG, 10.10). */
.accueil .barre-bas { z-index: 52; }
@media (min-width: 960px) { .barre-bas { display: none; } }

/* ---------- La carte ---------- */
.carte-tete { padding: 48px 0 44px; text-align: center; }
.carte-tete h1 { font: italic 600 clamp(52px, 11vw, 104px)/.95 var(--f-titre); color: #f7f1e6; }
.carte-tete .sous { margin-top: 14px; }
.carte-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.a-savoir { max-width: 720px; margin: 32px auto 0; padding: 16px 20px; border: 1px solid var(--bord); background: var(--papier); font-size: 15px; color: var(--sourd); text-align: center; }
.a-savoir strong { color: var(--encre); font-weight: 600; }
.sommaire {
  position: sticky; top: var(--nav-h); z-index: 30; margin-top: 32px; background: var(--travertin);
  border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
.sommaire ol {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 0 max(var(--gout), env(safe-area-inset-left)); max-width: var(--large); margin: 0 auto;
}
.sommaire ol::-webkit-scrollbar { display: none; }
.sommaire li { flex: none; display: flex; align-items: center; }
.sommaire a {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 11px; white-space: nowrap;
  font: 600 12px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .14em; color: var(--sourd); text-decoration: none;
}
.sommaire a:hover { color: var(--encre); }
.sommaire a[aria-current="true"] { color: var(--rouge); box-shadow: inset 0 -2px 0 var(--rouge); }
.sommaire a:focus-visible { outline-offset: -4px; }
@media (min-width: 960px) {
  .sommaire ol { flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: 0; max-width: none; }
  .sommaire a { padding: 0 8px; letter-spacing: .1em; }
}
.rubriques { max-width: 1000px; margin: 0 auto; padding-bottom: var(--section); }
/* Le titre de rubrique n'est jamais caché sous les barres : scroll-padding-top (html) compte la barre ET le sommaire. */
.rubrique { padding-top: 64px; }
.rubrique-tete { text-align: center; }
.rubrique-tete h2 { font: 600 clamp(30px, 4.6vw, 42px)/1.08 var(--f-titre); }
.rubrique-tete .compte { margin-top: 8px; font-size: 14px; color: var(--sourd); }
.rubrique-tete::after { content: ""; display: block; width: 180px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--laiton) 18%, var(--laiton) 82%, transparent); }
.rubrique-photo { max-width: 560px; margin: 28px auto 0; aspect-ratio: 4 / 3; }
.rubrique-photo + .legende { margin-top: 10px; text-align: center; font-size: 13px; color: var(--sourd); }
.lignes { margin-top: 24px; }
.lignes li { padding: 13px 0; border-bottom: 1px solid var(--bord); break-inside: avoid; }
.lignes .desc { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--sourd); }
@media (min-width: 900px) { .lignes { columns: 2; column-gap: 56px; } }
.fin-carte { max-width: 720px; margin: 48px auto 0; text-align: center; font-size: 14px; color: var(--sourd); }

/* ---------- Réserver ---------- */
.page-tete { padding: 44px 0 52px; }
.page-tete-grille { display: grid; gap: 32px; align-items: center; }
.page-tete h1 { font: 600 clamp(40px, 8vw, 72px)/1 var(--f-titre); }
.resa-tel { margin-top: 16px; font-size: 19px; color: var(--creme); }
.resa-tel a { font-weight: 600; color: var(--laiton-clair); white-space: nowrap; text-underline-offset: 5px; }
.page-tete .jour-h { margin-top: 12px; }
.page-tete .sous { max-width: 48ch; }
.page-tete figure { aspect-ratio: 4 / 3; }
@media (min-width: 960px) { .page-tete-grille { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 64px; } .page-tete { padding: 64px 0 72px; } }
.formulaire { max-width: 720px; margin: 0 auto; }
.formulaire .titre-2 { text-align: center; }
.sans-js { margin-top: 24px; padding: 22px; border: 1px solid var(--bord); background: var(--papier); text-align: center; font-size: 18px; }
.sans-js a { font-weight: 600; color: var(--rouge); white-space: nowrap; }
/* Le numéro tient lieu de formulaire tant que reserver.js n'a pas tourné (sans JS, ou script tombé). */
.formulaires-prets .sans-js { display: none; }
form.demande { margin-top: 28px; padding: 24px 20px; border: 1px solid var(--bord); background: var(--papier); }
@media (min-width: 760px) { form.demande { padding: 32px; } }
.champs { display: grid; gap: 18px; }
@media (min-width: 640px) { .champs.deux { grid-template-columns: 1fr 1fr; } .champs.trois { grid-template-columns: 1.3fr 1fr .7fr; } }
.champs + .champs, .champs + .champ, .champ + .champs { margin-top: 18px; }
.champ { display: grid; gap: 6px; align-content: start; }
.champ label { font: 600 12px/1.3 var(--f-texte); text-transform: uppercase; letter-spacing: .12em; color: var(--sourd); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--champ); border-radius: 0; background: #fff;
  font-size: 16px; color: var(--encre);
}
.champ textarea { min-height: 110px; resize: vertical; }
/* Le contour transparent ne se voit pas en mode normal (la bordure rouge et le halo parlent), mais devient le repère en couleurs forcées (Windows contraste élevé), où bordure et ombre disparaissent. */
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid transparent; border-color: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 18%, transparent); }
.aide { font-size: 14px; line-height: 1.45; color: var(--sourd); }
.aide.erreur { color: var(--rouge); font-weight: 600; }
form.demande > .aide { margin-top: 8px; }
form.demande > * + .champ { margin-top: 18px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.envoyer { width: 100%; margin-top: 24px; min-height: 54px; }
.envoyer[disabled] { opacity: .65; cursor: progress; }
.etat { margin-top: 14px; text-align: center; font-size: 15px; }
.etat.erreur { color: var(--rouge); font-weight: 600; }
.etat a { color: var(--rouge); font-weight: 600; white-space: nowrap; }
.donnees { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--sourd); }
.donnees a { color: var(--rouge); }
.reussi { margin-top: 28px; padding: 32px 22px; border: 1px solid var(--bord); background: var(--papier); text-align: center; }
.reussi h3 { font: 600 28px/1.15 var(--f-titre); }
.reussi p { margin-top: 10px; color: var(--sourd); }
.reussi .btn { margin-top: 18px; }
.ecrire { border-top: 1px solid var(--bord); }

/* ---------- L'histoire ---------- */
.jalons { max-width: 760px; margin: 44px auto 0; display: grid; gap: 36px; }
.jalon { display: grid; gap: 6px; }
.jalon .annee { font: 600 34px/1 var(--f-titre); color: var(--rouge); font-variant-numeric: lining-nums; }
.jalon h3 { font: 600 24px/1.2 var(--f-titre); }
.jalon p { color: var(--sourd); }
@media (min-width: 760px) { .jalon { grid-template-columns: 170px minmax(0, 1fr); gap: 0 32px; } .jalon .annee { grid-row: 1 / span 2; } }
.mot { max-width: 760px; margin: 0 auto; text-align: center; }
.mot blockquote { margin-top: 30px; }
.mot blockquote p { font: italic 600 clamp(20px, 2.4vw, 24px)/1.65 var(--f-titre); color: #e9dfcf; }
.mot figcaption { margin-top: 18px; color: var(--gris-nuit); font-size: 14px; }
.apropos { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; color: var(--sourd); }
.apropos .titre-2 { color: var(--encre); text-align: center; margin-bottom: 8px; }
.histoire-photo { max-width: 480px; margin: 52px auto 0; aspect-ratio: 3 / 4; }

/* ---------- 404 et pages de passage ---------- */
.perdu { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 48px var(--gout); text-align: center; }
.perdu h1 { font: 600 clamp(36px, 8vw, 64px)/1.05 var(--f-titre); }
.perdu .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.perdu .coord a { color: var(--laiton-clair); font-weight: 600; }

/* =====================================================================
   MOUVEMENT — n'existe que si le visiteur l'accepte (classe .mouvement posée dans <head>).
   ===================================================================== */
@property --jour { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* 0. Le passage : bouton « Passer l'animation », caché hors de l'accueil. */
.volets, .passer { display: none; }

/* 1. L'accueil (2,6 s) : les volets rouges ferment la salle, leurs persiennes s'entrouvrent,
      les battants s'ouvrent vers nous sur leurs charnières, la salle se pose, le nom monte. */
.accueil .volets {
  display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: 0; z-index: 50;
  perspective: 1400px; perspective-origin: 50% 45%;
  animation: volets-partent 1ms linear 1.62s both;
}
.battant {
  position: relative; border: 14px solid var(--rouge); background: transparent;
  box-shadow: inset 0 0 0 1px var(--rouge-fonce), 0 0 0 1px var(--rouge-fonce);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
}
.battant.g { border-right-width: 10px; transform-origin: 0 50%; animation: ouvrir-g 700ms var(--ease-gond) .9s both; }
.battant.d { border-left-width: 10px; transform-origin: 100% 50%; animation: ouvrir-d 700ms var(--ease-gond) .9s both; }
.lames {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, #b3282d 0 1px, var(--rouge) 1px 9px, #861719 9px 12px, var(--rouge-fonce) 12px 14px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 calc(14px - var(--jour)), #0000 calc(14px - var(--jour)) 14px);
  mask: repeating-linear-gradient(180deg, #000 0 calc(14px - var(--jour)), #0000 calc(14px - var(--jour)) 14px);
  animation: persiennes-entrouvertes 600ms var(--ease) .15s both;
}
/* La traverse du milieu, comme sur ses volets : elle reste pleine quand les lames s'ouvrent. */
.traverse { position: absolute; left: 0; right: 0; top: calc(50% - 8px); height: 16px; background: var(--rouge); box-shadow: 0 1px 0 var(--rouge-fonce), 0 -1px 0 #b3282d; }
.accueil .heros-photo img { animation: poser 1200ms var(--ease-sortie) 1s both; }
.accueil .heros .arrive { animation: arrive 420ms var(--ease-sortie) both; animation-delay: calc(1.45s + var(--i, 0) * 80ms); }
/* « Passer » : en haut à droite, sur les volets, jamais sur le texte ; il part avec eux. */
.accueil .passer {
  display: inline-flex; align-items: center; position: fixed; z-index: 51;
  right: max(16px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 14px);
  min-height: 44px; padding: 0 18px; cursor: pointer; border: 1px solid var(--laiton-clair); border-radius: 0;
  font: 600 12px/1 var(--f-texte); text-transform: uppercase; letter-spacing: .14em; color: var(--blanc); background: rgb(22 18 15 / .78);
  animation: arrive 200ms var(--ease-sortie) 300ms both, passer-part 200ms var(--ease) 1.05s both;
}
.accueil .passer:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.accueil-saute .heros-photo img { animation: adoucir 260ms var(--ease-sortie) both; }

@keyframes persiennes-entrouvertes { from { --jour: 0px; } to { --jour: 6px; } }
@keyframes ouvrir-g { from { transform: none; } to { transform: rotateY(-100deg); } }
@keyframes ouvrir-d { from { transform: none; } to { transform: rotateY(100deg); } }
@keyframes volets-partent { to { visibility: hidden; pointer-events: none; } }
@keyframes passer-part { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes poser { from { transform: scale(1.06); } to { transform: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes adoucir { from { opacity: .35; } to { opacity: 1; } }

/* 2. Le geste qui revient : une photo hors écran se découvre une fois, quand ses persiennes s'ouvrent. */
.persienne { display: none; }
.js.mouvement .persienne-attend .persienne {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, #b3282d 0 1px, var(--rouge) 1px 9px, #861719 9px 12px, var(--rouge-fonce) 12px 14px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 calc(14px - var(--jour)), #0000 calc(14px - var(--jour)) 14px);
  mask: repeating-linear-gradient(180deg, #000 0 calc(14px - var(--jour)), #0000 calc(14px - var(--jour)) 14px);
}
.js.mouvement .persienne-attend img { transform: scale(1.04); }
.persienne-joue .persienne { animation: persiennes-ouvertes 650ms var(--ease-sortie) both; }
.persienne-joue img { animation: poser-doux 900ms var(--ease-sortie) both; }
/* Sans @property (iOS ≤ 16.3, Firefox ESR 115), les lames ne s'animent pas : elles s'effacent en fondu. */
.sans-property .persienne-joue .persienne { animation: fondre 450ms var(--ease) both; }
@keyframes persiennes-ouvertes { from { --jour: 0px; } to { --jour: 14px; } }
@keyframes poser-doux { from { transform: scale(1.04); } to { transform: none; } }
@keyframes fondre { to { opacity: 0; } }

/* 3. Le tampon se pose une fois, d'un coup, un peu de travers, et l'encre s'arrête net. */
.js.mouvement .tampon-attend .tampon { opacity: 0; }
.tampon-joue .tampon { animation: tamponner 420ms var(--ease-sortie) both; }
@keyframes tamponner {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.35); }
  70% { opacity: 1; transform: rotate(-4deg) scale(.98); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active, .btn-commander:active { transform: none; }
}

/* ---------- Impression : la carte sur papier, lisible, sans décor ni barres ---------- */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .deck, .barre-bas, .volets, .passer, .evitement, .sommaire, .carte-actions, .heros-actions, .heros-tel, .revoir,
  form.demande, .sans-js, .forno-actions, .persienne, .galon { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .nuit, .bref, .pied { background: none !important; color: #000 !important; }
  .nuit *, .pied *, .enseigne .nuova, .nom-d-usage { color: #000 !important; }
  .heros-grille { display: block; min-height: 0; padding: 0; }
  .heros-photo { aspect-ratio: auto; height: 6cm; max-height: none; }
  .carte-tete, .page-tete { padding: 0 0 12pt; }
  .rubrique { padding-top: 18pt; break-inside: avoid-page; }
  .rubrique-photo, .rubrique-photo + .legende, .cadre::after { display: none !important; }
  .lignes li { break-inside: avoid; }
  .prix { color: #000; }
  .persienne-attend img, .tampon-attend .tampon { transform: none !important; opacity: 1 !important; }
  a { text-decoration: none; }
}