/* Le p'tit coin des zabitants · démo Vixya
   La page reprend la façade peinte du comptoir : le jaune qui passe au terracotta, l'île et les oiseaux à l'encre noire,
   le pointillé, le nom calligraphié en blanc et le cadre rose du passe-plat. */

@font-face { font-family: "Calistoga"; src: url("polices/calistoga.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Reddit Sans"; src: url("polices/reddit-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --cuisine: #2A1E1A;
  --jaune: #E4AC2E;
  --jaune-clair: #EDBB45;
  --terre: #B85F45;
  --terre-fonce: #A04C37;
  --rose: #D94F84;
  --rose-fonce: #A8355F;
  --sable: #F8E9CB;
  --creme: #FFF5E4;
  --encre: #1F1613;
  --titres: "Calistoga", Georgia, serif;
  --texte: "Reddit Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --entete: 64px;
  --auvent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 60' preserveAspectRatio='none'%3E%3Cpath d='M22 2H618L638 58H2Z' fill='%23EFD9AE' stroke='%231F1613' stroke-width='3' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3Cpath d='M44 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M68 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M92 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M116 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M140 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M164 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M188 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M212 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M236 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M260 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M284 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M308 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M332 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M356 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M380 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M404 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M428 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M452 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M476 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M500 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M524 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M548 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M572 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3Cpath d='M596 4V56' stroke='%231F1613' stroke-width='1.4' vector-effect='non-scaling-stroke' opacity='.75'/%3E%3C/svg%3E");
  --facade: linear-gradient(180deg, #EDBB45 0%, #E4AC2E 40%, #DE9F38 50%, #CB7550 60%, #B85F45 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .08 0 0 0 0 .05 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 30 L0 12.9 L24 18.2 L48 15.1 L72 14.3 L96 16.2 L107.1 9.6 L111.6 15.4 L120 14.6 L144 13.2 L168 15.5 L192 16.2 L216 16.3 L231.9 10.1 L238.4 17.2 L240 18.2 L264 19.0 L288 20.4 L312 17.4 L336 17.1 L360 17.3 L384 15.4 L408 10.4 L432 12.0 L444.8 4.4 L449.2 10.9 L456 9.9 L480 11.8 L504 11.5 L528 8.7 L543.1 5.1 L547.7 10.0 L552 11.3 L559.9 1.4 L563.8 12.6 L576 13.9 L600 12.8 L611.6 5.0 L615.1 12.5 L624 12.1 L648 10.9 L672 11.3 L696 10.2 L720 6.8 L744 6.4 L768 9.5 L775.3 3.5 L778.6 8.8 L792 8.2 L805.1 3.6 L811.1 8.6 L816 9.0 L840 11.7 L864 14.0 L879.7 9.4 L884.2 14.3 L888 14.6 L912 18.5 L923.9 13.6 L930.5 17.6 L936 16.6 L960 17.0 L984 17.0 L999.8 7.9 L1006.7 14.6 L1008 12.3 L1032 13.0 L1056 14.7 L1065.3 10.2 L1070.6 14.9 L1080 15.1 L1094.6 7.2 L1100.4 15.4 L1104 15.8 L1128 15.8 L1136.3 6.4 L1139.8 18.1 L1152 20.3 L1176 16.5 L1200 17.8 L1200 30 Z M44.5 24.1 l107.5 0.5 l0 1.1 l-107.5 0 Z M1145.1 23.1 l67.8 -0.3 l0 1.1 l-67.8 0 Z M873.2 24.1 l65.8 -0.3 l0 1.1 l-65.8 0 Z M485.9 24.1 l80.3 -0.1 l0 1.1 l-80.3 0 Z M745.8 22.9 l60.2 0.2 l0 1.1 l-60.2 0 Z M507.3 18.6 l58.1 0.5 l0 1.1 l-58.1 0 Z M1193.0 22.1 l108.5 0.4 l0 1.1 l-108.5 0 Z M239.4 22.2 l42.2 -0.0 l0 1.1 l-42.2 0 Z M668.8 23.2 l115.1 -0.0 l0 1.1 l-115.1 0 Z M224.6 20.6 l44.9 0.2 l0 1.1 l-44.9 0 Z M626.1 21.5 l75.6 0.3 l0 1.1 l-75.6 0 Z M434.9 23.0 l32.3 -0.2 l0 1.1 l-32.3 0 Z M650.0 18.6 l95.1 -0.2 l0 1.1 l-95.1 0 Z M282.9 22.3 l68.6 -0.4 l0 1.1 l-68.6 0 Z M927.5 23.6 l112.4 0.4 l0 1.1 l-112.4 0 Z M817.1 24.7 l32.3 0.3 l0 1.1 l-32.3 0 Z M721.3 22.8 l110.8 -0.5 l0 1.1 l-110.8 0 Z M163.2 17.6 l39.7 -0.4 l0 1.1 l-39.7 0 Z M11.4 21.8 l115.1 -0.3 l0 1.1 l-115.1 0 Z M160.4 18.6 l90.7 -0.3 l0 1.1 l-90.7 0 Z M547.6 25.0 l68.0 0.2 l0 1.1 l-68.0 0 Z M929.2 20.2 l67.5 -0.4 l0 1.1 l-67.5 0 Z M276.2 23.5 l117.7 -0.3 l0 1.1 l-117.7 0 Z M1110.6 21.1 l41.0 -0.3 l0 1.1 l-41.0 0 Z M723.1 18.4 l37.0 -0.2 l0 1.1 l-37.0 0 Z M775.9 21.4 l73.3 0.5 l0 1.1 l-73.3 0 Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--cuisine); color: var(--creme); font: 400 1.0625rem/1.6 var(--texte); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.aller { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--creme); color: var(--encre); border-radius: 999px; font-weight: 700; }
.aller:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

.logo-deux { aspect-ratio: 11258 / 3255; height: auto; fill: currentColor; }
.logo-ligne { aspect-ratio: 21939 / 1781; height: auto; fill: currentColor; }

.cadre { width: min(100% - 32px, 1200px); margin-inline: auto; }
.surtitre { margin: 0; font: 700 0.875rem/1.3 var(--texte); letter-spacing: 0.14em; text-transform: uppercase; }
.titre { margin: 12px 0 18px; font-family: var(--titres); font-size: clamp(1.9rem, 7.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
.chapo { margin: 0 0 18px; font-size: 1.125rem; line-height: 1.6; max-width: 36em; }

/* ---------- boutons ---------- */
.actions { 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: 2px solid transparent; border-radius: 999px; font: 700 1.0625rem/1.1 var(--texte); text-decoration: none; text-align: center; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.3), background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.bouton svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.bouton:active { transform: scale(0.97); }
@media (hover: hover) { .bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55); } }
.bouton-plein, .bouton-creme { background: var(--creme); color: var(--encre); }
.bouton-trait { border-color: currentColor; color: var(--creme); background: transparent; }
.bouton-encre { background: var(--encre); color: var(--creme); }
.bouton-large { width: 100%; }

/* ---------- en-tête ---------- */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--entete); display: flex; align-items: center; gap: 10px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: rgba(42, 30, 26, 0.94); color: var(--creme); }
@supports (backdrop-filter: blur(8px)) { .entete { background: rgba(42, 30, 26, 0.84); backdrop-filter: blur(10px); } }
.entete-logo { display: block; flex: none; color: var(--creme); }
.entete-logo .logo-deux { width: clamp(96px, 29vw, 124px); }
.apercu { flex: none; padding: 6px 10px; border: 1.5px solid rgba(255, 245, 228, 0.55); border-radius: 999px; font: 700 0.75rem/1 var(--texte); letter-spacing: 0.12em; text-transform: uppercase; cursor: help; }
.entete-nav { display: none; }
.entete-appel { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px; border-radius: 999px; background: var(--jaune); color: var(--encre); font: 700 1rem/1 var(--texte); text-decoration: none; transition: background-color 0.25s, transform 0.25s; }
.entete-appel svg { width: 18px; height: 18px; fill: currentColor; }
.entete-appel .long { display: none; }
@media (hover: hover) { .entete-appel:hover { background: var(--jaune-clair); } }
@media (min-width: 420px) { .entete-appel .court { display: none; } .entete-appel .long { display: inline; } }

/* ---------- haut de page : le comptoir ---------- */
.heros { padding-top: var(--entete); background: var(--cuisine); display: grid; grid-template-columns: 100%; }
.heros-haut { padding: 12px 16px 0; }
.heros .surtitre { color: var(--jaune); }
.heros-titre { margin: 4px 0 0; font-family: var(--titres); font-size: clamp(1.4rem, 6.6vw, 4.25rem); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }

/* Sur téléphone, le comptoir dessiné porte le premier écran, en pleine largeur : l'auvent de tôle, le mur, le passe-plat
   au cadre rose avec ses deux assiettes (à leur taille, sans les étirer), puis le comptoir peint où le nom s'écrit. */
.passe-plat { position: relative; margin-top: 58px; padding: 14px 14px 0; background: var(--sable); }
.passe-plat::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 100%; height: 44px; background: var(--auvent) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
.fenetre { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 7px; background: var(--rose); border-radius: 6px 6px 0 0; box-shadow: inset 0 0 0 2px rgba(31, 22, 19, 0.3); }
.ouverture { margin: 0; overflow: hidden; aspect-ratio: 1 / 1.04; border-radius: 3px; background: #140d0b; box-shadow: inset 0 0 0 2px rgba(31, 22, 19, 0.35); }
.ouverture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.ouverture + .ouverture img { object-position: 50% 50%; }
.pastille-passe { position: absolute; right: 16px; bottom: -14px; z-index: 2; --ac-fond: var(--jaune); --ac-texte: var(--encre); --ac-bord: var(--creme); --ac-taille: 0.875rem; }

.facade { position: relative; isolation: isolate; padding: 22px 0 16px; background: var(--facade); color: var(--creme); }
.facade::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 12px; background: #F3C863; border-bottom: 2px solid rgba(31, 22, 19, 0.4); box-shadow: 0 3px 6px -2px rgba(31, 22, 19, 0.35); z-index: 1; }
.facade::after, .bande-comptoir::after, .pied::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.16; pointer-events: none; z-index: -1; }
.facade-dessin { width: 100%; height: auto; margin: 0; color: var(--encre); overflow: visible; }
.pointille { fill: none; stroke: var(--encre); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 8.5; }
.masque-trace { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1000 1000; stroke-dashoffset: 0; }
.ile, .relief { fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.relief { stroke-width: 2.2; }
.point-resto { fill: var(--rose); stroke: var(--encre); stroke-width: 2; }
.mer path { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.oiseaux { color: var(--encre); }
.logo-facade { display: block; margin: 0; color: var(--creme); filter: drop-shadow(0 2px 0 rgba(31, 22, 19, 0.22)); }
.logo-facade.logo-deux { position: absolute; right: 14px; bottom: 14px; width: min(62%, 360px); }
.logo-facade.logo-ligne { display: none; }

.heros-bas { display: flex; flex-direction: column; padding: 14px 16px 70px; background: linear-gradient(180deg, #B85F45, var(--terre-fonce)); }
.heros-texte { order: 2; margin: 22px 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 34em; }
.heros-infos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.heros-infos .etat { margin: 0; gap: 7px; padding: 7px 11px 7px 10px; font-size: 0.875rem; white-space: nowrap; }
.note-pastille { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; background: rgba(255, 245, 228, 0.1); color: var(--creme); font-weight: 600; font-size: 0.875rem; line-height: 1.25; text-decoration: none; white-space: nowrap; }
.note-etoile { color: var(--jaune); }
.etat { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 16px 10px 14px; border-radius: 999px; background: rgba(31, 22, 19, 0.3); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.etat-point { width: 11px; height: 11px; flex: none; border-radius: 50%; background: rgba(255, 245, 228, 0.55); }
.etat[data-ouvert="oui"] .etat-point { background: var(--jaune); box-shadow: 0 0 0 4px rgba(228, 172, 46, 0.3); }
.etat-clair { background: rgba(31, 22, 19, 0.08); color: var(--encre); }
.etat-clair .etat-point { background: rgba(31, 22, 19, 0.35); }
.etat-clair[data-ouvert="oui"] .etat-point { background: #3C8C3A; box-shadow: 0 0 0 4px rgba(60, 140, 58, 0.22); }
.heros-bas .actions .bouton { flex: 1 1 auto; }
/* écran court (360 × 740) : les assiettes un peu moins hautes, pour garder le bouton d'appel au-dessus de la barre */
@media (max-width: 999px) and (max-height: 760px) {
  .ouverture { aspect-ratio: 1 / 0.8; }
  .passe-plat { margin-top: 52px; }
  .heros-bas { padding-top: 10px; }
}
/* sous 390 px, les deux pastilles tiennent sur une ligne même avec « Fermé · ouvre dimanche à 9 h » : le nom peint et le bouton d'appel restent dans le premier écran */
@media (max-width: 389px) {
  .heros-infos .etat, .note-pastille { padding: 7px 8px; font-size: 0.8125rem; }
  .heros-infos .etat { gap: 6px; }
}

/* Animation unique du comptoir au chargement : préparée en CSS (rien n'est caché sans JavaScript),
   et montrée d'office après 3 s si le script n'a pas démarré. */
.js .facade .trace, .js .facade .masque-trace { stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; }
.js .facade .logo-facade { clip-path: inset(-10% 100% -10% 0); }
.js .facade .oiseaux use, .js .facade .point-resto { opacity: 0; }
.js:not(.heros-pret) .facade .trace, .js:not(.heros-pret) .facade .masque-trace { animation: secours-trace 0s linear 3s forwards; }
.js:not(.heros-pret) .facade .logo-facade { animation: secours-logo 0s linear 3s forwards; }
.js:not(.heros-pret) .facade .oiseaux use, .js:not(.heros-pret) .facade .point-resto { animation: secours-op 0s linear 3s forwards; }
@keyframes secours-trace { to { stroke-dashoffset: 0; } }
@keyframes secours-logo { to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes secours-op { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .facade .trace, .js .facade .masque-trace { stroke-dashoffset: 0; animation: none; }
  .js .facade .logo-facade { clip-path: none; animation: none; }
  .js .facade .oiseaux use, .js .facade .point-resto { opacity: 1; animation: none; }
}

/* ---------- les bandes peintes ---------- */
.bande { position: relative; padding: 70px 0 84px; background: var(--fond); }
.bande::before, .pied::before { content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 22px; background: var(--fond); -webkit-mask: var(--bord) center / 100% 100% no-repeat; mask: var(--bord) center / 100% 100% no-repeat; pointer-events: none; }
.bande-sable { --fond: var(--sable); color: var(--encre); }
.bande-sable .surtitre { color: var(--terre-fonce); }
.bande-comptoir { --fond: var(--jaune-clair); isolation: isolate; color: var(--encre); background: linear-gradient(180deg, #EDBB45 0%, #E4AC2E 45%, #DFA036 62%, #CC7A4C 80%, #B85F45 100%); }
.bande-comptoir .surtitre { color: #7A3424; }
.bande-terre { --fond: var(--terre-fonce); color: var(--creme); }
.bande-terre .surtitre { color: #FFD98A; }
.bande-cuisine { --fond: var(--cuisine); color: var(--creme); }
.bande-cuisine .surtitre { color: var(--jaune); }
.bande-rose { --fond: var(--rose-fonce); color: var(--creme); }
.bande-rose .surtitre { color: #FFD98A; }

/* Apparitions au défilement (IntersectionObserver) : rien n'est caché sans le script ni avec « réduire les animations ». */
.anim .apparait:not(.vu) { opacity: 0; transform: translateY(26px); }
.anim .apparait { transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* ---------- la cuisine : deux photos et les mots des clients ---------- */
.cuisine-texte .chapo a { font-weight: 700; white-space: nowrap; }
.collage { margin-top: 34px; display: grid; grid-template-columns: 100%; gap: 16px; }
.collage-titre { margin: 0 0 4px; font-family: var(--titres); font-size: 1.5rem; line-height: 1.2; color: var(--terre-fonce); text-wrap: balance; }
.mots { display: contents; list-style: none; margin: 0; padding: 0; }
.mot { --ac-texte: var(--encre); --ac-bord: var(--creme); --ac-taille: 1rem; --ac-epaisseur-bord: 0.28em; max-width: min(320px, calc(100% - 24px)); padding: 0.7em 1em 0.75em; text-align: left; font-weight: 700; line-height: 1.3; }
.mot small { display: block; margin-top: 6px; font-size: 0.875rem; font-weight: 600; opacity: 0.8; }
.m1 { order: 2; --ac-fond: var(--rose); justify-self: start; margin-left: 12px; }
.m2 { order: 3; --ac-fond: var(--jaune); justify-self: end; margin-right: 6px; }
.m3 { order: 4; --ac-fond: var(--terre-fonce); --ac-texte: var(--creme); justify-self: start; margin-left: 4px; }
.m4 { order: 6; --ac-fond: var(--creme); --ac-bord: #fff; justify-self: start; margin-left: 8px; }
.m5 { order: 7; --ac-fond: var(--jaune); justify-self: end; margin-right: 4px; }
.m6 { order: 8; --ac-fond: var(--rose); justify-self: start; margin-left: 18px; }

/* ---------- sur place ou à emporter : la barquette traverse la rue, en pleine largeur ---------- */
/* La scène finit la bande : la rivière touche le bord peint de la bande suivante. */
.bande.emporter { padding-bottom: 0; }
.emporter-tete { display: grid; grid-template-columns: 100%; }
.citation { margin: 4px 0 24px; padding: 4px 0 4px 18px; border-left: 4px solid var(--encre); }
.citation p { margin: 0; font-family: var(--titres); font-size: 1.3rem; line-height: 1.3; }
.citation footer { margin-top: 8px; font-size: 0.9375rem; font-weight: 600; }
.scene-large { position: relative; margin-top: 34px; overflow: clip; }
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene-ordi { display: none; }
@media (min-width: 700px) {
  .scene-tel { display: none; }
  .scene-ordi { display: block; width: min(100%, 1600px); margin-inline: auto; }
}
.s-trait, .s-trait path { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-fin { stroke-width: 1.4; }
.s-mur { fill: var(--sable) !important; }
.s-toit { fill: #EFD9AE !important; }
.s-interieur { fill: var(--cuisine) !important; stroke: none !important; }
.s-cadre-rose { fill: none; stroke: var(--rose) !important; stroke-width: 6 !important; }
.s-assiette { fill: var(--creme); stroke: none; }
.s-comptoir { fill: url(#g-comptoir) !important; }
.s-rebord { stroke-width: 4 !important; }
.s-logo { fill: var(--creme); }
.s-mini-ile path { fill: none; stroke: var(--encre); stroke-width: 9; }
.s-oiseaux { color: var(--encre); }
.s-tirets { fill: none; stroke: var(--creme); stroke-width: 2.6; stroke-dasharray: 16 14; opacity: 0.75; }
.s-panneau { fill: var(--encre) !important; }
.s-p { font: 700 19px var(--texte); fill: var(--jaune); }
.s-etiquette { font-family: var(--titres); font-size: 17px; fill: var(--encre); }
.s-clair { fill: var(--creme); }
.s-galets ellipse { fill: #D9B48A; stroke: var(--encre); stroke-width: 2.2; }
.s-galets .s-galet-pose { fill: #F1D3A6; }
.s-eau-fond { fill: #2E6F6B; stroke: none; }
.s-eau path { fill: none; stroke: #CDE7DF; stroke-width: 2.4; stroke-linecap: round; opacity: 0.8; }
.s-route { fill: #3B2C26; }
.s-remparts { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }
.s-remparts-2 { opacity: 0.3; }
.s-fin-2, .s-fin-2 path { stroke-width: 2 !important; opacity: 0.7; }
.s-pointille { fill: none; stroke: var(--encre); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0.1 9; }
.masque-trajet { fill: none; stroke: #fff; stroke-width: 18; stroke-dasharray: 1000 1000; stroke-dashoffset: 0; }
.b-corps { fill: var(--creme); stroke: var(--encre); stroke-width: 2.4; stroke-linejoin: round; }
.b-trait { fill: none; stroke: var(--encre); stroke-width: 1.6; opacity: 0.6; }
.b-riz { fill: #FFFDF6; stroke: var(--encre); stroke-width: 1.6; }
.b-cari { fill: var(--terre); stroke: var(--encre); stroke-width: 1.6; }
.vapeur path { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.s-chemin { fill: none; stroke: none; }
.s-touffes { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; opacity: 0.42; }
.s-fleche-clair { fill: none; stroke: var(--creme); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-chute { fill: none; stroke: var(--creme); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 22 5; }
.s-bouillon { fill: none; stroke: var(--creme); stroke-width: 2.2; stroke-linecap: round; }
.s-pastille rect { fill: var(--rose); stroke: var(--creme); stroke-width: 3.5; }
.s-pastille text { font: 700 15px var(--texte); fill: var(--creme); letter-spacing: 0.01em; }
.s-route-nom { font-size: 16px; }

/* La scène vit tant qu'elle est à l'écran (classe posée par le script) : la cascade tombe, le courant passe, la vapeur monte. */
@media (prefers-reduced-motion: no-preference) {
  .scene-large.vit .s-chute { animation: chute 0.8s linear infinite; }
  .scene-large.vit .s-eau path { animation: courant 4.8s ease-in-out infinite alternate; }
  .scene-large.vit .s-eau path:nth-child(even) { animation-duration: 6.2s; animation-direction: alternate-reverse; }
  .scene-large.vit .vapeur-vit { animation: vapeur 2.6s ease-in-out infinite; }
}
@keyframes chute { to { stroke-dashoffset: -27; } }
@keyframes courant { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
@keyframes vapeur { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- venir et horaires ---------- */
.venir-grille { display: grid; grid-template-columns: 100%; gap: 40px; }
.adresse { margin: 6px 0 20px; font-style: normal; font-family: var(--titres); font-size: 1.45rem; line-height: 1.3; }
.venir .actions { margin-bottom: 18px; }
.acces { margin: 0; font-size: 1rem; opacity: 0.9; }
.horaires { padding: 24px 20px 14px; background: var(--creme); color: var(--encre); border-radius: 18px; rotate: -1.2deg; box-shadow: 0 2px 0 rgba(31, 22, 19, 0.25), 0 24px 40px -22px rgba(0, 0, 0, 0.6); }
.horaires-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 8px; }
.horaires h3 { margin: 0; font-family: var(--titres); font-size: 1.6rem; line-height: 1.2; }
.horaires .etat { margin: 0; }
.jours { list-style: none; margin: 0; padding: 0; }
.jours li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 8px; font-size: 1.0625rem; }
.jours li + li { border-top: 1px solid rgba(31, 22, 19, 0.08); }
.jours li span:first-child { font-weight: 700; }
.jours li::after { content: ""; order: 1; flex: 1; min-width: 12px; border-bottom: 3px dotted rgba(31, 22, 19, 0.35); transform: translateY(-4px); }
.jours li span:last-child { order: 2; font-variant-numeric: tabular-nums; }
.jours li.ferme span:last-child { color: var(--terre-fonce); font-weight: 700; }
.jours li.aujourdhui { background: linear-gradient(100deg, rgba(228, 172, 46, 0.55), rgba(237, 187, 69, 0.35)); border-radius: 10px; }
.jours li.aujourdhui span:first-child::after { content: " · aujourd'hui"; font-weight: 600; color: var(--terre-fonce); }

/* ---------- les avis : des cartes de couleur qui s'empilent ---------- */
.avis-grille { display: grid; grid-template-columns: 100%; gap: 28px; }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 8px 0 12px; }
.note-chiffre { font-family: var(--titres); font-size: 3rem; line-height: 0.9; letter-spacing: -0.02em; color: var(--jaune); }
.note-detail { display: grid; gap: 4px; font-size: 1.0625rem; line-height: 1.3; }
.note-detail [data-compte] { font-weight: 800; font-variant-numeric: tabular-nums; }
.etoiles { color: var(--jaune); letter-spacing: 0.12em; font-size: 1.5rem; line-height: 1; }
.etoile-vide { opacity: 0.28; }
.lien-google { display: inline-flex; align-items: center; min-height: 50px; font-weight: 700; color: var(--creme); text-underline-offset: 5px; }
.pile { list-style: none; margin: 0; padding: 0; }
.carte-avis { position: sticky; top: calc(var(--entete) + 16px + var(--i) * 9px); min-height: min(56svh, 440px); margin-bottom: 14svh; padding: 24px 22px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border-radius: 22px; transform-origin: 50% 0; rotate: var(--penche, 0deg); box-shadow: 0 -12px 34px -14px rgba(0, 0, 0, 0.55); }
.carte-avis:last-child { margin-bottom: 0; }
.carte-dessin { position: absolute; right: 22px; top: 22px; width: 54px; height: auto; color: currentColor; opacity: 0.55; }
.carte-vague { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; width: 62px; }
.carte-avis blockquote { margin: 0; }

/* Trois avis s'empilent au défilement ; les cinq autres se lisent d'un coup, sans bloquer la page (demande de Maoni, 13 octobre) :
   des bons accrochés par une pince au rail du comptoir. Sur téléphone, ils pendent l'un sous l'autre ; sur ordinateur, côte à côte. */
.avis { overflow-x: clip; } /* les bons partent penchés avant de se poser : rien ne doit élargir la page */
.avis-dessin { display: none; }
.avis-dessin .ile, .avis-dessin .relief { stroke: var(--jaune); stroke-width: 1.5; stroke-dasharray: 1000 1000; }
.avis-dessin .pointille { stroke: rgba(255, 245, 228, 0.75); }
.avis-dessin .point-resto { stroke: var(--cuisine); stroke-width: 1.2; }
.avis-dessin .oiseaux { color: var(--creme); }
.rail-avis { position: relative; margin-top: 64px; }
.rail { position: absolute; z-index: 1; left: -4px; right: -4px; top: 0; height: 7px; border-radius: 4px; background: linear-gradient(#E3D9CC, #9A8D82); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
.rail::before, .rail::after { content: ""; position: absolute; top: -6px; width: 12px; height: 19px; border-radius: 3px; background: #7A6C62; box-shadow: inset 0 0 0 2px rgba(31, 22, 19, 0.35); }
.rail::before { left: 12px; }
.rail::after { right: 12px; }
.bons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 100%; justify-items: center; }
.bon { --pt: 44px; position: relative; width: min(var(--l, 100%), 520px); padding-top: var(--pt); rotate: calc(var(--a, 0deg) * 0.45); transform-origin: 50% 0; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.36)); }
.bon:first-child { --pt: 30px; }
/* la ficelle qui relie le bon au précédent (ou au rail) */
.bon::before { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: calc(var(--pt) - 10px); translate: -50% 0; border-inline: 1.5px solid rgba(255, 245, 228, 0.6); }
.pince { position: absolute; z-index: 2; left: 50%; top: calc(var(--pt) - 22px); width: 16px; height: 36px; translate: -50% 0; border: 2px solid var(--encre); border-radius: 4px 4px 7px 7px; background: linear-gradient(90deg, #F2D7AA, #D6A564); }
.pince::after { content: ""; position: absolute; left: 50%; top: 10px; width: 9px; height: 9px; translate: -50% 0; border: 2px solid #5E524B; border-radius: 50%; background: #D8CFC4; }
/* le papier du bon, bord du bas dentelé comme un ticket */
.bon-papier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 22px 30px; border-radius: 3px 3px 0 0;
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7.5px) no-repeat;
  mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 7.5px) no-repeat; }
/* Chaque bon a son papier, son format et sa fixation : un ticket de caisse, un papier kraft déchiré, une feuille lignée,
   un carton percé enfilé sur la ficelle, un papier rose au coin plié ; pinces en bois ou pinces noires. */
.bon-ticket { --l: 88%; }
.bon-ticket .bon-papier { padding-top: 34px; background: #FFFDF7; color: var(--encre);
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 16px 8px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 15px) no-repeat;
  mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 16px 8px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 8px repeat-x, linear-gradient(#000 0 0) 0 50% / 100% calc(100% - 15px) no-repeat; }
.bon-ticket .bon-papier blockquote p { font-size: clamp(1.1rem, 4.5vw, 1.25rem); }
.bon-kraft { --l: 78%; }
.bon-kraft .bon-papier { padding-bottom: 38px; background: linear-gradient(160deg, #D4AF86, #C29A70); color: var(--encre); -webkit-mask: none; mask: none;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 93% 98%, 86% 95%, 77% 100%, 68% 95%, 58% 99%, 48% 94%, 38% 99%, 28% 95%, 18% 100%, 9% 95%, 0 99%); }
.bon-kraft .bon-papier blockquote p { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
.bon-ligne { --l: 94%; }
.bon-ligne .bon-papier { padding: 26px 22px 26px 50px; border-radius: 3px; -webkit-mask: none; mask: none; color: var(--encre);
  background: radial-gradient(circle at 18px 50%, var(--cuisine) 5px, #0000 5.5px) 0 0 / 36px 46px repeat-y, linear-gradient(90deg, #0000 36px, rgba(217, 79, 132, 0.6) 36px 38px, #0000 38px), repeating-linear-gradient(180deg, #0000 0 28px, rgba(46, 111, 107, 0.22) 28px 29px), var(--creme); }
.bon-carte { --l: 74%; }
.bon-carte::before { z-index: 3; height: calc(var(--pt) + 24px); }
.bon-carte .bon-papier { padding-top: 46px; border-radius: 14px; -webkit-mask: none; mask: none; }
.bon-carte .bon-papier::before { content: ""; position: absolute; left: 50%; top: 16px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: var(--cuisine); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55); }
.bon-carte .bon-papier blockquote p { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
.bon-rose { --l: 90%; }
.bon-rose .bon-papier { border-radius: 3px; -webkit-mask: none; mask: none; padding-bottom: 34px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  background: linear-gradient(to top left, #0000 50%, #CC6A92 50%) 100% 100% / 28px 28px no-repeat, var(--rose-fonce); }
.bon-ticket .carte-etoiles, .bon-kraft .carte-etoiles, .bon-ligne .carte-etoiles { color: var(--terre-fonce); }
.pince-noire { top: calc(var(--pt) - 12px); width: 30px; height: 20px; border: 0; border-radius: 3px 3px 6px 6px; background: linear-gradient(#45372F, #1F1613); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.pince-noire::after { top: -14px; width: 18px; height: 16px; border: 2px solid #D8CFC4; border-bottom: 0; border-radius: 9px 9px 0 0; background: none; }
.bon-papier blockquote { margin: 0; }
.bon-papier .carte-nom span { display: block; margin: 2px 0 0; }
.bon-papier blockquote p { margin: 0; font-family: var(--titres); font-size: clamp(1.15rem, 4.8vw, 1.35rem); line-height: 1.28; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bon { transition: rotate 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
  .bon:hover { rotate: calc(var(--a, 0deg) * -0.6); }
}
.carte-avis blockquote p { margin: 0; font-family: var(--titres); font-size: clamp(1.4rem, 6vw, 2.05rem); line-height: 1.24; }
.carte-etoiles { margin: 0; font-size: 1.15rem; letter-spacing: 0.14em; }
.carte-nom { margin: 0; font-weight: 800; font-size: 1.0625rem; }
.carte-nom span { margin-left: 8px; font-weight: 500; opacity: 0.75; }
.c-jaune { background: var(--jaune); color: var(--encre); }
.c-sable { background: var(--sable); color: var(--encre); }
.c-creme { background: var(--creme); color: var(--encre); }
.c-rose { background: var(--rose-fonce); color: var(--creme); }
.c-terre { background: var(--terre-fonce); color: var(--creme); }
.c-jaune .carte-etoiles, .c-sable .carte-etoiles, .c-creme .carte-etoiles { color: var(--terre-fonce); }
.c-rose .carte-etoiles, .c-terre .carte-etoiles { color: #FFD98A; }

/* ---------- une table : le SMS déjà écrit ---------- */
.table-grille { display: grid; grid-template-columns: 100%; gap: 30px; }
.grand-numero { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 0 14px; font-family: var(--titres); font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; color: var(--creme); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: rgba(255, 217, 138, 0.7); text-underline-offset: 8px; }
.grand-numero svg { width: 0.7em; height: 0.7em; flex: none; fill: #FFD98A; }
@media (hover: hover) { .grand-numero:hover { text-decoration-color: #FFD98A; } }

/* L'écran du SMS : le message s'écrit dans une bulle, comme sur le téléphone du client ; ce qui vient de changer s'allume. */
.ecran { position: relative; display: grid; gap: 12px; }
.fleche-encre { display: none; }
.telephone { position: relative; padding: 16px 16px 22px; background: var(--creme); color: var(--encre); border-radius: 22px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.6); }
.tel-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(31, 22, 19, 0.12); }
.tel-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.tel-contact { margin: 0; display: grid; line-height: 1.25; font-size: 1rem; }
.tel-contact b { font-weight: 800; }
.tel-contact span { font-size: 0.9375rem; color: rgba(31, 22, 19, 0.7); }
.tel-fil { display: grid; padding-top: 14px; }
.tel-titre { justify-self: center; margin: 0 0 10px; font-weight: 800; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terre-fonce); }
.bulle { justify-self: end; max-width: 94%; margin: 0; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--jaune); color: var(--encre); font-size: 1.0625rem; line-height: 1.5; box-shadow: 0 6px 14px -10px rgba(31, 22, 19, 0.6); }
.ecran .bouton-large { margin-top: 6px; }
.demande-note { margin: 0; text-align: center; font-size: 0.9375rem; color: rgba(255, 245, 228, 0.85); }

/* ---------- pied de page : la façade encore ---------- */
.pied { --fond: #EDBB45; position: relative; isolation: isolate; color: var(--creme); background: linear-gradient(180deg, #EDBB45 0%, #E4AC2E 22%, #DE9F38 30%, #C9724F 40%, #B85F45 55%, var(--terre-fonce) 100%); }
.pied-facade { display: grid; justify-items: center; gap: 18px; padding: 56px 16px 26px; }
.pied-dessin { order: -1; width: min(100%, 340px); height: auto; color: var(--encre); overflow: visible; }
.pied-logo { color: var(--creme); filter: drop-shadow(0 2px 0 rgba(31, 22, 19, 0.2)); }
.pied-logo.logo-deux { width: min(88%, 420px); }
.pied-logo.logo-ligne { display: none; }
.pied-infos { display: grid; gap: 24px; padding: 14px 0 44px; font-size: 1rem; }
.pied-infos p { margin: 4px 0; }
.pied-titre { font-family: var(--titres); font-size: 1.25rem; }
.pied-mention { font-size: 0.9375rem; opacity: 0.92; }
.pied a { text-underline-offset: 4px; }

/* ---------- barre d'appel collante (procédé) ---------- */
.barre-appel { --barre-fond: var(--cuisine); --barre-bouton: var(--jaune); --barre-texte: var(--encre); --barre-trait: rgba(255, 245, 228, 0.15); }

/* ---------- grand écran ---------- */
@media (min-width: 1000px) {
  :root { --entete: 76px; }
  .entete { padding-inline: max(28px, calc((100% - 1240px) / 2)); gap: 16px; }
  .entete-logo .logo-deux { width: 140px; }
  .entete-nav { display: flex; gap: 28px; margin-left: auto; }
  .entete-nav a { font-weight: 600; font-size: 1rem; text-decoration: none; opacity: 0.88; padding: 10px 0; background: linear-gradient(var(--jaune), var(--jaune)) 0 100% / 0 2px no-repeat; transition: background-size 0.3s, opacity 0.3s; }
  .entete-nav a:hover { opacity: 1; background-size: 100% 2px; }
  .entete-appel { margin-left: 18px; }

  .heros { --marge: max(40px, calc((100% - 1240px) / 2)); grid-template-columns: var(--marge) minmax(0, 1fr) 64px minmax(0, 1fr) var(--marge); grid-template-areas: ". haut . passe ." ". bas . passe ." "facade facade facade facade facade"; }
  .heros-haut { grid-area: haut; padding: 54px 0 0; }
  .heros-titre { font-size: clamp(2.6rem, 3.9vw, 3.6rem); }
  .heros-bas { grid-area: bas; padding: 22px 0 46px; background: none; }
  .heros-texte { order: 0; margin: 0 0 22px; }
  .heros-infos { margin-top: 22px; }
  .heros-bas .actions .bouton { flex: 0 0 auto; }
  .passe-plat { grid-area: passe; align-self: end; justify-self: end; width: min(100%, 600px); margin: 96px 0 0; padding: 0; background: none; }
  .fenetre { padding: 10px; gap: 10px; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 2px rgba(31, 22, 19, 0.25); }
  .ouverture { aspect-ratio: 4 / 5; }
  .heros-infos .etat, .note-pastille { font-size: 0.9375rem; padding: 8px 12px; }
  .passe-plat::before { left: -26px; right: -26px; height: 62px; }
  .facade { grid-area: facade; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 30px var(--marge) 28px; }
  .facade-dessin { order: 2; width: min(32%, 420px); margin: 0; }
  .logo-facade.logo-deux { display: none; }
  .logo-facade.logo-ligne { display: block; width: min(60%, 820px); margin: 60px 0 0; }

  .bande { padding: 110px 0 120px; }
  .bande::before, .pied::before { top: -27px; height: 28px; }

  .cuisine .cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .cuisine-texte { position: sticky; top: calc(var(--entete) + 56px); }
  /* les deux photos sont déjà dans le passe-plat du haut de page : ici, seulement les mots des clients */
  .collage { position: relative; display: block; margin: 0; height: 560px; }
  .collage-titre { position: absolute; left: 0; top: 0; max-width: 52%; }
  .mot { position: absolute; margin: 0; max-width: 300px; --ac-taille: 1.0625rem; }
  .m1 { left: 0; top: 96px; }
  .m2 { left: 50%; top: 70px; max-width: 290px; }
  .m3 { left: 4%; top: 236px; }
  .m4 { left: 52%; top: 232px; max-width: 290px; }
  .m5 { left: 0; top: 398px; max-width: 310px; }
  .m6 { left: 56%; top: 420px; max-width: 250px; }

  .emporter-tete { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: end; }
  .emporter-tete .titre { margin-bottom: 0; }
  .emporter-suite .citation { margin-bottom: 22px; }
  .scene-large { margin-top: 30px; }

  .venir-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 80px; align-items: center; }
  .horaires { padding: 32px 30px 20px; }

  .avis-grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
  /* la colonne de gauche reste en place pendant que les cartes s'empilent : le 4,0 en très grand et l'île au trait */
  .avis-tete { position: sticky; top: calc(var(--entete) + 36px); display: flex; flex-direction: column; min-height: calc(100svh - var(--entete) - 72px); }
  .avis-tete .lien-google { align-self: flex-start; }
  .avis-dessin { display: block; width: min(100%, 440px); height: auto; margin-top: auto; padding-top: 18px; overflow: visible; }
  .carte-avis { padding: 34px 36px 30px; min-height: 360px; margin-bottom: 14vh; top: calc(var(--entete) + 50px + var(--i) * 10px); }
  .note-chiffre { font-size: 3.4rem; }
  .carte-dessin { right: 32px; top: 30px; width: 64px; }
  .carte-vague { width: 74px; }
  .rail-avis { margin-top: 110px; }
  .rail { left: -12px; right: -12px; }
  .bons { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.98fr) minmax(0, 1.06fr) minmax(0, 0.94fr) minmax(0, 1.04fr); gap: 26px; align-items: start; }
  .bon-kraft .bon-papier blockquote p, .bon-carte .bon-papier blockquote p { font-size: 1.32rem; }
  .bon, .bon:first-child { --pt: calc(30px + var(--fil, 0px)); width: auto; rotate: var(--a, 0deg); }
  .bon-papier { padding: 28px 20px 30px; }
  .bon-papier blockquote p { font-size: 1.2rem; }

  /* le texte à gauche ; à droite le téléphone dessiné avec le SMS déjà écrit */
  .table-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texte ecran"; gap: 36px 64px; align-items: center; }
  .table-texte { grid-area: texte; position: sticky; top: calc(var(--entete) + 40px); }
  .ecran { grid-area: ecran; width: min(100%, 400px); justify-self: center; }
  .fleche-encre { position: absolute; fill: none; stroke: var(--creme); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
  .telephone { padding: 46px 14px 34px; border: 3px solid var(--encre); border-radius: 40px; rotate: 2.5deg; box-shadow: inset 0 0 0 5px var(--sable), 0 34px 54px -30px rgba(0, 0, 0, 0.7); }
  .telephone::before { content: ""; position: absolute; left: 50%; top: 16px; width: 64px; height: 8px; translate: -50% 0; border-radius: 4px; background: var(--encre); }
  .tel-fil { min-height: 110px; align-content: start; }

  .pied-facade { padding: 80px var(--m, 40px) 30px; }
  .pied-logo.logo-deux { display: none; }
  .pied-logo.logo-ligne { display: block; width: min(80%, 1000px); }
  .pied-dessin { width: 420px; }
  .pied-infos { grid-template-columns: 1.1fr 1fr 1.3fr; gap: 48px; padding-bottom: 60px; }
}

@media (min-width: 1280px) {
  /* deux temps sur la largeur : le texte, puis le téléphone */
  .table-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "texte ecran"; gap: 64px; align-items: center; }
  .table-texte { position: static; }
  .ecran { width: auto; }
  .fleche-encre { display: block; left: -58px; top: 14%; width: 66px; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton, .entete-appel { transition: none; }
}