/* La Grilladine · démo Vixya. Identité créée d'après le lieu : framboise des chaises, teck des tables, toile rayée du store, nuit et ampoules de la terrasse. */

@font-face { font-family: "Besley"; src: url("polices/besley.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Besley"; src: url("polices/besley-italique.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("polices/vietnam-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("polices/vietnam-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("polices/vietnam-400-italique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --nuit: #14131B;
  --nuit-2: #221F2B;
  --nuit-3: #2E2A38;
  --framboise: #C8174F;
  --framboise-vif: #F0507E;
  --framboise-fonce: #8F0C37;
  --toile: #F5EEE4;
  --toile-2: #E8DCCB;
  --teck: #C27A3E;
  --ampoule: #FFC85C;
  --creme: #FFF8EE;
  --encre: #1E1A22;
  --encre-2: #554D5A;
  --titres: "Besley", Georgia, "Times New Roman", serif;
  --texte: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g: 16px;
  --ressort: cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; }
body {
  margin: 0; background: var(--nuit); color: var(--creme);
  font: 400 17px/1.6 var(--texte); overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titres); margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ampoule); outline-offset: 3px; }

.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 18px; background: var(--creme); color: var(--encre); border-radius: 12px; font-weight: 600; }
.evitement:focus { left: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* — Procédés repris de outils/procedes/procedes.css — */
.js [data-titre-decoupe]:not(.pret) { visibility: hidden; animation: td-secours 0s linear 3s forwards; }
@keyframes td-secours { to { visibility: visible; } }
[data-titre-decoupe] > div[style*="clip"] { padding-block: 0.14em; margin-block: -0.14em; }

.autocollant {
  display: inline-block; width: fit-content; max-width: 100%;
  padding: 0.5em 1em; border: 0.25em solid var(--ac-bord, #fff); border-radius: 0.7em;
  background: var(--ac-fond, var(--framboise)); color: var(--ac-texte, #fff);
  font: 600 16px/1.15 var(--texte); letter-spacing: 0.01em; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 16px -8px rgba(0, 0, 0, 0.35);
  rotate: var(--ac-angle, -3deg);
  transition: rotate 0.35s var(--ressort), scale 0.35s var(--ressort), translate 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) { .autocollant:hover { rotate: calc(var(--ac-angle, -3deg) * 0.3); scale: 1.06; translate: 0 -4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 16px 24px -10px rgba(0, 0, 0, 0.4); } }
.autocollant-framboise { --ac-fond: var(--framboise); --ac-bord: var(--creme); }
.autocollant-toile { --ac-fond: var(--creme); --ac-texte: var(--framboise-fonce); --ac-bord: #fff; }

.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--nuit); border-top: 1px solid rgba(255, 248, 238, 0.12);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.6);
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .barre-appel a {
    display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 12px;
    border: 2px solid var(--framboise); border-radius: 999px;
    background: var(--framboise); color: #fff;
    font-size: 17px; font-weight: 600; line-height: 1.1; text-decoration: none;
  }
  .barre-appel a:not(:first-child) { background: transparent; border-color: rgba(255, 248, 238, 0.55); color: var(--creme); }
  .barre-appel svg { width: 1.25em; height: 1.25em; flex: none; }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  body:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=file]), textarea, select, [contenteditable]):focus) .barre-appel { transform: translateY(105%); visibility: hidden; }
}
@media print { .barre-appel { display: none; } }

/* — Téléphone court / long — */
.tel-court { display: none; }
@media (max-width: 419px) { .tel-long { display: none; } .tel-court { display: inline; } }

/* — En-tête — */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: 70px; padding: 0 max(var(--g), env(safe-area-inset-right, 0px)) 0 max(var(--g), env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(14, 13, 20, 0.78), rgba(14, 13, 20, 0));
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.entete.pleine { background: rgba(20, 19, 27, 0.97); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); }
.logo { font: 800 23px/1 var(--titres); color: var(--creme); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.logo-la { font-style: italic; font-weight: 600; color: var(--framboise-vif); }
.apercu {
  font: 600 12px/1 var(--texte); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 9px; border: 1.5px solid rgba(255, 248, 238, 0.5); border-radius: 999px; color: rgba(255, 248, 238, 0.85); white-space: nowrap;
}
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.entete-tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px;
  border-radius: 999px; background: var(--framboise); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: transform 0.25s var(--ressort), background-color 0.2s ease;
}
.entete-tel svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.entete-tel .h-num, .entete-tel .h-appeler { display: none; }
@media (max-width: 419px) { .entete-tel { width: 50px; padding: 0; justify-content: center; } .entete-tel svg { width: 20px; height: 20px; } .apercu { font-size: 11px; padding: 6px 8px; } .logo { font-size: 21px; } }
@media (min-width: 420px) and (max-width: 559px) { .entete-tel .h-appeler { display: inline; } }
@media (min-width: 560px) { .entete-tel .h-num { display: inline; } }
@media (hover: hover) { .entete-tel:hover { background: #DA2160; transform: translateY(-1px); } }
.entete-table { display: none; }
@media (min-width: 960px) {
  .entete { height: 78px; padding-inline: clamp(32px, 4vw, 64px); }
  .logo { font-size: 27px; }
  .entete-tel { background: transparent; border: 1.5px solid rgba(255, 248, 238, 0.45); }
@media (hover: hover) { .entete-tel:hover { background: rgba(255, 255, 255, 0.08); } }
  .entete-table {
    display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 999px;
    background: var(--framboise); color: #fff; font-weight: 600; text-decoration: none;
    transition: transform 0.25s var(--ressort), background-color 0.2s ease;
  }
@media (hover: hover) { .entete-table:hover { background: #DA2160; transform: translateY(-1px); } }
}

/* — Boutons et pastilles — */
.boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: 999px;
  font: 600 17px/1.15 var(--texte); text-decoration: none; text-align: center;
  transition: transform 0.3s var(--ressort), background-color 0.2s ease, box-shadow 0.3s ease;
}
.bouton svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.bouton-plein { background: var(--framboise); color: #fff; box-shadow: 0 12px 26px -12px rgba(200, 23, 79, 0.9); }
@media (hover: hover) { .bouton-plein:hover { background: #DA2160; transform: translateY(-2px); } }
.bouton-cercle { border: 2px solid rgba(255, 248, 238, 0.55); color: var(--creme); }
@media (hover: hover) { .bouton-cercle:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); } }
.bouton-cercle svg { fill: currentColor; }
@media (max-width: 559px) { .boutons .bouton { flex: 1 1 auto; padding-inline: 18px; } }

.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(255, 248, 238, 0.22); background: rgba(255, 255, 255, 0.06);
  font-size: 16px; line-height: 1.3; color: var(--creme);
}
.pastille strong { font-weight: 600; }
.etoiles-mini { color: var(--ampoule); }
.point { width: 10px; height: 10px; border-radius: 50%; background: #9C95A3; flex: none; }
.ouvert .point { background: #5FD38A; box-shadow: 0 0 0 4px rgba(95, 211, 138, 0.22); }

/* — Haut de page — */
.heros { position: relative; background: var(--nuit); padding-bottom: 64px; overflow: hidden; }
.heros-visuel { position: relative; }
.heros-halo { display: none; }
.cadre-terrasse { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #0B0A12; }
.terrasse-photo { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 3 / 4; translate: 0 -6%; }
.terrasse-photo img { width: 100%; height: 100%; object-fit: cover; }
.penombre { position: absolute; inset: 0; background: #08070F; opacity: 0; }
.chaleur { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 45% at 58% 26%, rgba(255, 190, 100, 0.32), rgba(255, 190, 100, 0) 70%); mix-blend-mode: screen; }
.ampoules { position: absolute; inset: 0; }
.ampoule {
  position: absolute; left: var(--x); top: var(--y); width: calc(15% * var(--t, 1)); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 249, 230, 0.95) 0 5%, rgba(255, 218, 150, 0.6) 13%, rgba(255, 186, 90, 0.22) 33%, rgba(255, 170, 60, 0) 66%);
}
.lampe { background: radial-gradient(circle, rgba(255, 249, 235, 0.9) 0 4%, rgba(255, 220, 160, 0.42) 14%, rgba(255, 190, 100, 0.14) 36%, rgba(255, 170, 60, 0) 66%); }
.cadre-terrasse::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(20, 19, 27, 0), var(--nuit) 92%); pointer-events: none; }

/* État de départ quand le script prend la main : la terrasse dans la pénombre. Secours : tout s'allume seul à 3,5 s. */
.js .penombre { opacity: 0.72; animation: secours-penombre 0.6s ease 3.5s forwards; }
.js .chaleur, .js .ampoule, .js .heros-halo { opacity: 0; animation: secours-allume 0.6s ease 3.5s forwards; }
@keyframes secours-penombre { to { opacity: 0; } }
@keyframes secours-allume { to { opacity: 1; } }

.tirage {
  margin: 0; background: #fff; padding: 7px; border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 22px 40px -16px rgba(0, 0, 0, 0.6);
  rotate: var(--r, 0deg);
}
.tirage img { width: 100%; height: auto; border-radius: 2px; }
.tirage figcaption { padding: 9px 4px 3px; font: italic 600 17px/1.2 var(--titres); color: var(--encre); }
.tirage-heros { position: absolute; z-index: 2; right: var(--g); bottom: 12%; width: 31%; max-width: 170px; --r: 5deg; }
.tirage-heros img { aspect-ratio: 3 / 4; object-fit: cover; }

.heros-texte { position: relative; z-index: 3; margin-top: -34px; padding: 0 var(--g); }
.etiquette-ligne { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--texte); letter-spacing: 0.01em; color: var(--ampoule); }
@media (min-width: 420px) { .etiquette-ligne::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; } }
.heros h1 { margin: 14px 0 0; font-size: clamp(33px, 8.6vw, 62px); font-weight: 800; line-height: 1.07; letter-spacing: -0.012em; color: var(--creme); max-width: 15.5em; }
.heros h1 em, h2 em { font-style: italic; font-weight: 700; }
.heros h1 em { color: var(--framboise-vif); }
.heros-phrase { margin: 16px 0 20px; font-size: 18px; line-height: 1.55; color: rgba(255, 248, 238, 0.82); max-width: 32em; }
.heros .boutons { margin-top: 22px; }

@media (min-width: 960px) {
  .heros {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
    gap: clamp(40px, 5vw, 96px); min-height: min(100svh, 940px);
    padding: 118px clamp(40px, 6vw, 110px) 96px;
  }
  .heros-texte { order: 1; margin: 0; padding: 0; }
  .heros-visuel { order: 2; justify-self: center; width: min(100%, 470px); }
  .terrasse-photo { translate: none; }
  .cadre-terrasse { aspect-ratio: 3 / 4; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .cadre-terrasse::after { display: none; }
  .heros-halo { display: block; position: absolute; inset: -22% -38% -12% -38%; background: radial-gradient(ellipse 50% 42% at 54% 32%, rgba(255, 196, 96, 0.24), rgba(255, 170, 60, 0.07) 55%, rgba(255, 170, 60, 0) 75%); pointer-events: none; }
  .tirage-heros { right: auto; left: -72px; bottom: -40px; width: 200px; max-width: none; --r: -6deg; }
  .heros h1 { font-size: clamp(44px, 4.3vw, 64px); }
}

/* — Ruban — */
.ruban-cadre { position: relative; z-index: 5; overflow: hidden; padding: 26px 0; margin: -44px 0 -26px; pointer-events: none; }
.ruban { background: var(--framboise); rotate: -2.2deg; margin-inline: -24px; padding: 15px 0; border-block: 2px solid rgba(255, 255, 255, 0.18); }
.ruban-piste { display: flex; width: max-content; white-space: nowrap; font: italic 700 22px/1.1 var(--titres); color: #fff; animation: defile 42s linear infinite; }
.ruban-piste > * { margin-right: 22px; }
.ruban-piste i { font-style: normal; color: var(--ampoule); }
.ruban.en-pause .ruban-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (min-width: 960px) { .ruban-piste { font-size: 28px; } .ruban { padding: 18px 0; } }

/* — Bandes — */
.bande { position: relative; padding: 76px var(--g); }
.bande-toile { background: var(--toile); color: var(--encre); }
.bande-nuit { background: var(--nuit); color: var(--creme); }
.bande-framboise { background: var(--framboise); color: #fff; }
.bande h2 { margin: 20px 0 16px; font-size: clamp(30px, 7.4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; max-width: 17em; }
.bande-toile h2 em { color: var(--framboise); }
.bande-nuit h2 em { color: var(--framboise-vif); }
.bande-framboise h2 em { color: var(--ampoule); }
.chapo { font-size: 18px; line-height: 1.6; max-width: 34em; }
.bande-toile .chapo { color: var(--encre-2); }
.bande-nuit .chapo { color: rgba(255, 248, 238, 0.8); }
.chapo a { font-weight: 600; white-space: nowrap; text-decoration-color: var(--framboise); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bande-nuit .chapo a { text-decoration-color: var(--framboise-vif); }
.bande-toile .bouton-cercle { border-color: var(--encre); color: var(--encre); }
@media (hover: hover) { .bande-toile .bouton-cercle:hover { background: rgba(30, 26, 34, 0.06); } }
@media (min-width: 960px) { .bande { padding: 128px clamp(40px, 6vw, 110px); } }

/* Citations en typographie */
.citations { list-style: none; margin: 0; padding: 0; }
.citation { padding: 22px 0; border-top: 1.5px solid rgba(30, 26, 34, 0.14); }
.citation blockquote { margin: 0; font: italic 500 21px/1.42 var(--titres); }
.signature { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 16px/1.2 var(--texte); color: var(--framboise); }
.signature::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.citations-nuit .citation { border-top-color: rgba(255, 248, 238, 0.16); }
.citations-nuit .signature { color: var(--framboise-vif); }

/* — La viande — */
.viande-grille { display: grid; grid-template-areas: "texte" "photo" "citations"; }
.viande-texte { grid-area: texte; }
.viande-photo { grid-area: photo; position: relative; margin: 34px calc(var(--g) * -1) 0; }
.cadre-entrecote { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #3A2A20; }
.cadre-entrecote img { width: 100%; height: 114%; object-fit: cover; translate: 0 -6%; }
.tirage-thon { position: absolute; left: var(--g); bottom: -46px; width: 40%; max-width: 190px; --r: -5deg; }
.tirage-thon img { aspect-ratio: 1; object-fit: cover; }
.viande .citations { grid-area: citations; margin-top: 74px; }
@media (min-width: 960px) {
  .viande-grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); grid-template-areas: "photo texte" "photo citations"; column-gap: clamp(48px, 6vw, 110px); align-items: start; }
  .viande-photo { margin: 0; position: sticky; top: 108px; }
  .cadre-entrecote { border-radius: 24px; box-shadow: 0 40px 70px -40px rgba(60, 30, 10, 0.6); }
  .tirage-thon { left: auto; right: -34px; bottom: -40px; width: 200px; --r: 5deg; }
  .viande .citations { margin-top: 36px; }
  .citation blockquote { font-size: 24px; }
}

/* — Le toit-terrasse — */
.terrasse { padding-top: 0; }
.store {
  --s: 26px; --h: 38px;
  height: calc(var(--h) + var(--s) / 2); margin-inline: calc(var(--g) * -1);
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 55%),
    repeating-linear-gradient(90deg, #EFEAE1 0 var(--s), #8E8994 var(--s) calc(var(--s) * 2));
  -webkit-mask: linear-gradient(#000 0 0) top left / 100% var(--h) no-repeat, radial-gradient(circle at 50% 0, #000 calc(var(--s) / 2 - 0.5px), transparent calc(var(--s) / 2)) left var(--h) / var(--s) calc(var(--s) / 2) repeat-x;
  mask: linear-gradient(#000 0 0) top left / 100% var(--h) no-repeat, radial-gradient(circle at 50% 0, #000 calc(var(--s) / 2 - 0.5px), transparent calc(var(--s) / 2)) left var(--h) / var(--s) calc(var(--s) / 2) repeat-x;
  transform-origin: top center;
}
.guirlande { display: flex; justify-content: center; margin: -10px calc(var(--g) * -1) 0; pointer-events: none; }
.guirlande svg { width: 100%; height: auto; flex: none; overflow: visible; }
.guirlande svg + svg { display: none; }
.guirlande .verre { fill: #FFE6A8; transition: fill 0.25s ease; }
.guirlande .halo { opacity: 1; transition: opacity 0.35s ease; }
.js .guirlande .bulbe:not(.on) .verre { fill: #6A6372; }
.js .guirlande .bulbe:not(.on) .halo { opacity: 0; }
.terrasse-grille { display: grid; grid-template-areas: "texte" "tirages" "citations"; padding-top: 18px; }
.terrasse-texte { grid-area: texte; }
.terrasse-tirages { grid-area: tirages; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 38px; }
.terrasse-tirages .tirage { padding-bottom: 30px; }
.tirage-a { grid-column: 1 / 9; grid-row: 1; --r: -4deg; }
.tirage-a img { aspect-ratio: 4 / 5; object-fit: cover; }
.tirage-b { grid-column: 6 / 13; grid-row: 1; margin-top: 96px; --r: 4deg; z-index: 2; }
.tirage-b img { aspect-ratio: 4 / 5; object-fit: cover; }
.terrasse-avis { grid-area: citations; margin-top: 56px; }
.vedette { margin: 0; }
.vedette blockquote { margin: 0; font: italic 600 clamp(28px, 7vw, 46px)/1.22 var(--titres); color: var(--creme); letter-spacing: -0.01em; text-wrap: balance; }
.vedette .signature { color: var(--framboise-vif); margin-top: 16px; }
.petites { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 22px; }
.petites li { padding-left: 18px; border-left: 2px solid var(--framboise-vif); }
.petites blockquote { margin: 0; font: italic 500 19px/1.45 var(--titres); color: rgba(255, 248, 238, 0.88); }
.petites .signature { color: var(--framboise-vif); margin-top: 8px; }
.petites .signature::before { display: none; }
@media (min-width: 640px) { .store { --s: 32px; --h: 48px; } .guirlande svg { width: 50%; } .guirlande svg + svg { display: block; } }
@media (min-width: 960px) {
  .store { margin-inline: calc(clamp(40px, 6vw, 110px) * -1); --s: 36px; --h: 56px; }
  .guirlande { margin-inline: calc(clamp(40px, 6vw, 110px) * -1); }
  .terrasse-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texte tirages" "citations citations"; column-gap: clamp(48px, 6vw, 110px); align-items: center; padding-top: 30px; }
  .terrasse-tirages { margin-top: 0; max-width: 560px; justify-self: end; width: 100%; }
  .terrasse-avis { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; margin-top: 96px; padding-top: 56px; border-top: 1px solid rgba(255, 248, 238, 0.14); }
  .petites { margin-top: 0; }
}

/* — Les avis — */
.avis-grille { display: grid; gap: 0; }
.carte-google {
  display: flex; align-items: center; gap: 18px; margin: 24px 0 0; padding: 18px 22px; max-width: 440px;
  background: #fff; color: var(--encre); border-radius: 22px; text-decoration: none;
  box-shadow: 0 14px 26px -18px rgba(60, 0, 20, 0.7);
  transition: transform 0.3s var(--ressort), box-shadow 0.3s ease;
}
@media (hover: hover) { .carte-google:hover { transform: translateY(-3px) rotate(-0.5deg); } }
.note-grande { font: 800 60px/1 var(--titres); color: var(--framboise); letter-spacing: -0.02em; min-width: 2.2ch; }
.note-detail { display: flex; flex-direction: column; gap: 3px; font-size: 16px; line-height: 1.35; }
.etoiles { display: inline-block; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.etoiles::before { content: "★★★★★"; background: linear-gradient(90deg, #F5A623 calc(var(--note) / 5 * 100%), #DDD5CB 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lien-fleche { font-weight: 600; color: var(--framboise); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lien-fleche::after { content: " →"; }

.themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; max-width: 460px; }
.themes[hidden] { display: none; }
.themes-titre { width: 100%; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.theme {
  min-height: 46px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.6); background: transparent; color: #fff; font: 600 16px/1 var(--texte);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ressort);
}
@media (hover: hover) { .theme:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } }
.theme[aria-pressed="true"] { background: #fff; color: var(--framboise); border-color: #fff; }
.avis-carte mark { background: none; color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.5s ease; background-image: linear-gradient(rgba(255, 200, 92, 0.55), rgba(255, 200, 92, 0.55)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.42em; }
.pile[data-theme="cuisson"] mark[data-t="cuisson"], .pile[data-theme="accueil"] mark[data-t="accueil"], .pile[data-theme="copieux"] mark[data-t="copieux"], .pile[data-theme="terrasse"] mark[data-t="terrasse"], .pile[data-theme="cocktails"] mark[data-t="cocktails"] { background-size: 100% 0.42em; }
.pile-zone { margin-top: 40px; }
.pile { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.avis-carte {
  background: #FFF9F2; color: var(--encre); border-radius: 22px; padding: 22px 20px 26px;
  box-shadow: 0 26px 44px -24px rgba(60, 0, 20, 0.75), 0 2px 4px rgba(60, 0, 20, 0.15);
}
.avis-tete { display: flex; align-items: center; gap: 12px; }
.initiale { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--i); color: #fff; font: 800 21px/1 var(--titres); flex: none; }
.avis-nom { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 17px; line-height: 1.2; }
.avis-etoiles { color: #F5A623; letter-spacing: 2px; font-size: 16px; }
.etoile-vide { color: #DDD5CB; }
.avis-carte p { margin-top: 14px; font-size: 17px; line-height: 1.6; }
.avis-carte.court p { margin-top: 18px; font: italic 500 22px/1.45 var(--titres); }
.pile.active { gap: 0; touch-action: pan-y; }
.pile.active .avis-carte { grid-area: 1 / 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; }
.pile.active .avis-carte.tire { cursor: grabbing; }
.pile.active .avis-carte:not(.dessus) > * { opacity: 0; transition: opacity 0.2s ease; }
.pile.active .avis-carte.dessus > * { transition: opacity 0.25s ease 0.05s; }
.pile-commandes { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 44px; }
.pile-commandes[hidden], .pile-aide[hidden] { display: none; }
.rond {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; padding: 0;
  border: 2px solid currentColor; background: transparent; cursor: pointer;
  transition: transform 0.3s var(--ressort), background-color 0.2s ease;
}
.rond svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .rond:hover { transform: scale(1.06); } }
.rond:active { transform: scale(0.94); }
.avis .rond { color: #fff; }
.avis .rond-plein { background: #fff; color: var(--framboise); border-color: #fff; }
.pile-compte { min-width: 72px; text-align: center; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.pile-aide { margin-top: 12px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, 0.82); }
@media (min-width: 960px) {
  .avis-grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 120px); align-items: center; }
  .pile-zone { margin-top: 0; }
  .pile.active { padding-bottom: 28px; }
  .avis-carte { padding: 30px 32px 34px; }
  .avis-carte p { font-size: 18px; }
  .avis-carte.court p { font-size: 26px; }
  .pile-aide { display: none; }
}

/* — Réserver une table — */
.table-grille { display: grid; gap: 34px; }
.reservation {
  background: #FFFCF8; border: 1.5px solid var(--toile-2); border-radius: 26px; padding: 22px 18px 24px;
  box-shadow: 0 30px 60px -40px rgba(80, 40, 20, 0.45);
}
.table-numero { display: inline-block; margin-bottom: 20px; font: 800 clamp(34px, 8.6vw, 54px)/1 var(--titres); letter-spacing: -0.01em; color: var(--framboise); text-decoration: none; border-bottom: 3px solid currentColor; padding-bottom: 4px; white-space: nowrap; }
.apercu-message { margin: 4px 0 20px; }
.apercu-titre { display: block; font-size: 16px; color: var(--encre-2); }
.bulle {
  margin: 10px 0 0 auto; width: fit-content; max-width: 100%; padding: 14px 18px;
  background: var(--framboise); color: #fff; border-radius: 22px 22px 6px 22px;
  font-size: 17px; line-height: 1.5; box-shadow: 0 14px 26px -16px rgba(200, 23, 79, 0.9);
}
@media (min-width: 560px) {
  .reservation { padding: 30px 30px 32px; }
}
@media (min-width: 960px) {
  .table-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 110px); align-items: start; }
  .table-texte { position: sticky; top: 120px; }
}

/* — Nous trouver — */
.infos-grille { display: grid; gap: 40px; }
.pastille-claire { margin-bottom: 22px; }
.pratique { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; color: rgba(255, 248, 238, 0.82); font-size: 16px; }
.pratique li { display: flex; gap: 12px; align-items: baseline; }
.pratique li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--framboise-vif); flex: none; translate: 0 -2px; }
.horaires { background: var(--nuit-2); border-radius: 26px; padding: 24px 18px 14px; border: 1px solid rgba(255, 255, 255, 0.06); }
.horaires h3 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.horaires table { width: 100%; border-collapse: collapse; }
.horaires th, .horaires td { padding: 13px 8px; border-bottom: 1px solid rgba(255, 248, 238, 0.09); vertical-align: top; font-size: 16px; }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 0; }
.horaires th { text-align: left; font-weight: 600; white-space: nowrap; }
.horaires td { text-align: right; }
.horaires td span { display: inline-block; white-space: nowrap; margin-left: 12px; }
.horaires .vide, .jour-ferme td { color: rgba(255, 248, 238, 0.55); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { background: rgba(240, 80, 126, 0.16); }
.horaires tr.aujourdhui th { box-shadow: inset 3px 0 0 var(--framboise-vif); border-radius: 10px 0 0 10px; }
.horaires tr.aujourdhui td { border-radius: 0 10px 10px 0; }
.badge-jour { display: block; margin-top: 3px; font-size: 16px; font-weight: 400; color: var(--framboise-vif); }
@media (min-width: 960px) {
  .infos-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: clamp(48px, 6vw, 110px); align-items: center; }
  .horaires { padding: 32px 30px 20px; }
}

/* — Pied de page — */
.pied { background: var(--framboise); color: #fff; padding: 60px var(--g) 44px; overflow: hidden; }
.pied-logo { margin: 0 0 30px; font: 800 clamp(54px, 15vw, 230px)/0.92 var(--titres); letter-spacing: -0.03em; }
.pied-logo .logo-la { display: block; font-size: 0.42em; color: var(--ampoule); margin-bottom: 0.06em; }
.pied-infos { display: grid; gap: 16px; font-size: 16px; line-height: 1.6; max-width: 60em; }
.pied-infos a { font-weight: 600; text-underline-offset: 3px; }
.insecable { white-space: nowrap; }
.pied-demo { color: rgba(255, 255, 255, 0.85); }
@media (min-width: 960px) {
  .pied { padding: 90px clamp(40px, 6vw, 110px) 60px; }
  .pied-infos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* — Sans animation : tout est déjà en place — */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-titre-decoupe]:not(.pret) { visibility: visible; animation: none; }
  .js .penombre { opacity: 0; animation: none; }
  .js .chaleur, .js .ampoule, .js .heros-halo { opacity: 1; animation: none; }
  .js .guirlande .bulbe:not(.on) .verre { fill: #FFE6A8; }
  .js .guirlande .bulbe:not(.on) .halo { opacity: 1; }
  .ruban-piste { animation: none; }
  .autocollant, .bouton, .rond, .carte-google, .entete-tel, .entete-table { transition: none; }
}