/* ==========================================================================
   Le Délice · direction « Le trait de sauce »
   Un comptoir de snack en formica turquoise, une sauce piment pressée à la
   bouteille pour seul accent. Polices : Shrikhand (enseigne peinte, gras et
   penché) et Rubik (rond et franc, lisible sur un téléphone).
   ========================================================================== */
:root {
  --formica: #17bfb2;
  --formica-pale: #a9e9e2;
  --encre: #062a2c;
  --encre-douce: #2c5052;
  --creme: #fff6e3;
  --creme-ombre: #f5e6c8;
  --sauce: #d4300a;
  --sauce-texte: #b52607; /* la même sauce, assez sombre pour un petit texte sur le crème */

  --fond: var(--creme);
  --surface: var(--creme);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent: var(--sauce);
  --accent-texte: var(--creme);
  --titre: "Shrikhand", "Arial Black", sans-serif;
  --corps: "Rubik", system-ui, sans-serif;
  --t-corps: clamp(1.02rem, 1rem + .15vw, 1.0625rem);
  --marge: clamp(1.25rem, 4vw, 3.5rem);

  --nav-hauteur: 60px;
  --nav-fond: var(--creme);
  --nav-texte: var(--encre);
  --nav-bord: rgb(6 42 44 / .16);
  --nav-actif: rgb(6 42 44 / .08);
  --carte-filet: rgb(6 42 44 / .16);

  --filigrane-fond: var(--creme);
  --filigrane-texte: var(--encre);
  --filigrane-bord: rgb(6 42 44 / .28);
  --filigrane-point: var(--sauce);
  --assistant-fond: var(--sauce);
  --assistant-texte: var(--creme);
  --assistant-panneau: var(--creme);
  --assistant-panneau-texte: var(--encre);
  --assistant-bord: rgb(6 42 44 / .18);
  --assistant-bulle: var(--creme-ombre);

  /* Le formica : éclats clairs et sombres, comme un plan de comptoir. */
  --mouchetures: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%230fa89c'%3E%3Cpath d='M12 18l7-3 2 4-6 3zM64 9l5 2-2 5-5-3zM118 26l8-1 1 4-7 2zM33 62l6 2-3 5-5-3zM92 58l7-3 2 4-7 3zM139 74l5 3-3 4-4-3zM14 104l7 1-1 5-7-2zM70 96l4 4-4 3-3-4zM112 118l7-3 2 4-6 3zM48 134l6-2 2 4-6 3z'/%3E%3C/g%3E%3Cg fill='%2341d3c7'%3E%3Cpath d='M40 25l5-2 2 3-5 3zM92 18l4 3-3 3-3-3zM8 58l5 1-1 4-5-2zM60 48l6 1-2 4-5-2zM122 54l4 3-3 3-3-3zM36 90l5-2 2 3-5 3zM94 90l5 1-1 4-5-2zM136 112l3 4-4 2-2-4zM18 134l5-1 1 4-5 1zM84 134l5-2 2 3-5 3z'/%3E%3C/g%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a, button { cursor: pointer; }

/* Le filigrane : toujours lisible, moins présent tant qu'on ne le vise pas. */
.filigrane-demo { opacity: .82; transition: opacity .2s ease; }
.filigrane-demo:hover, .filigrane-demo:focus-visible { opacity: 1; }

.surtitre { font: 800 .76rem/1.2 var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sauce-texte); margin: 0 0 .8rem; }

/* Les boutons sont des boudins de sauce : pleins, ronds, un reflet dessus. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: 0 2rem;
  border: 0; border-radius: 999px; background: var(--sauce); color: var(--creme);
  font: 700 1.08rem/1.1 var(--corps); text-decoration: none;
  box-shadow: inset 0 3px 2px -1px rgb(255 226 196 / .5), inset 0 -5px 6px -2px rgb(70 8 0 / .4), 0 6px 14px rgb(6 42 44 / .28);
  transition: transform .2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: scale(.97); }
.bouton--creme { background: var(--creme); color: var(--encre); box-shadow: inset 0 -4px 5px -2px rgb(6 42 44 / .22), 0 6px 14px rgb(70 8 0 / .35); }
.bouton--creux { background: transparent; color: var(--creme); box-shadow: inset 0 0 0 2px var(--creme); min-height: 48px; padding: 0 1.4rem; font-size: 1rem; }
.bouton--creux[hidden] { display: none; }

/* Le trait de sauce : le motif qui circule d'une section à l'autre. */
.trait { display: block; width: var(--trait-l, 9.5rem); height: auto; overflow: visible; }
.trait__sauce { fill: none; stroke: var(--sauce); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.trait__reflet { fill: none; stroke: #ffd9bf; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; transform: translate(-1.2px, -2.4px); }
.socle-actif [data-revele] .trait__sauce, .socle-actif [data-revele] .trait__reflet,
.socle-actif .trait[data-revele] .trait__sauce, .socle-actif .trait[data-revele] .trait__reflet {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1) .2s;
}
.socle-actif .est-visible .trait__sauce, .socle-actif .est-visible .trait__reflet,
.socle-actif .trait.est-visible .trait__sauce, .socle-actif .trait.est-visible .trait__reflet { stroke-dashoffset: 0; }

/* ---------------- La barre ---------------- */
.navigation__nom { font-size: 1.32rem; color: var(--encre); }
.navigation__appel { box-shadow: inset 0 2px 1px -1px rgb(255 226 196 / .55), inset 0 -3px 4px -2px rgb(70 8 0 / .4); }
@media (max-width: 760px) {
  .navigation { padding: 0 .75rem; gap: .25rem; }
  .navigation__nom { display: inline-flex; }
  .navigation__liens { flex: none; }
  .navigation__liens li { flex: none; }
  .navigation__liens a { width: auto; padding: 0 .7rem; background: transparent; }
  .navigation__liens a[aria-current] { box-shadow: none; background: var(--nav-actif); }
  .navigation__appel { flex: none; padding: 0 1.05rem; }
}
@media (max-width: 365px) { .navigation__liens { display: none; } }

/* ---------------- 1. Le comptoir : le nom s'écrit à la sauce ---------------- */
.accueil { --longueur: 250svh; }
.accueil .scene__collant { background: var(--formica) var(--mouchetures); color: var(--encre); }
.accueil .toile { z-index: 1; }
/* Toile abandonnée (téléphone trop lent, contexte perdu) : retirée, le SVG reprend. */
.accueil:not(.toile-prete) .toile { visibility: hidden; }

/* Sans WebGL, la sauce descend en rideau plein. */
.rideau { position: absolute; inset: 0; z-index: 1; background: var(--sauce); transform: translateY(calc((var(--couvert, 0) - 1) * 100%)); }
.accueil.toile-prete .rideau, html:not(.socle-actif) .rideau { display: none; }

.accueil__textes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.temps { position: absolute; left: 0; right: 0; }
.temps--comptoir {
  top: var(--nav-hauteur); bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .85rem var(--marge) calc(5rem + env(safe-area-inset-bottom));
}
.temps--comptoir a { pointer-events: auto; }
.tampon {
  display: inline-block; padding: .42rem .8rem .4rem; margin: 0;
  border-radius: 999px; background: var(--creme); color: var(--encre);
  font: 800 .76rem/1.2 var(--corps); letter-spacing: .12em; text-transform: uppercase;
}
.ecriture { position: relative; flex: 1 1 0; min-height: 0; width: calc(100% + 1.5rem); margin: .35rem -.75rem .35rem; align-self: stretch; }
.ecriture svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* Le nom ne s'affiche pas tout fait avant que la bouteille l'écrive. Le SVG revient si
   le WebGL est refusé, et de lui-même au bout de 3 s si rien n'a démarré entre-temps. */
.socle-actif .accueil:not(.toile-prete):not([data-repli]) .repli-webgl { opacity: 0; animation: nom-apparait .3s linear 3s forwards; }
@keyframes nom-apparait { to { opacity: 1; } }
.ecriture path { fill: none; stroke: var(--sauce); stroke-width: 31; stroke-linecap: round; stroke-linejoin: round; }
.accroche { font: 400 clamp(1.85rem, 8.6vw, 3rem)/1.04 var(--titre); margin: 0 0 .5rem; }
.liste-plats { font-weight: 600; font-size: 1.05rem; line-height: 1.38; margin: 0 0 1rem; max-width: 26rem; }
.temps--comptoir .bouton { align-self: stretch; }
[data-sous-sauce] { transition: opacity .12s linear; }
.sous-sauce { opacity: 0; visibility: hidden; }

/* Faible hauteur : on serre pour que le nom garde sa place. */
@media (max-height: 700px) and (max-width: 760px) {
  .accroche { font-size: 1.7rem; margin-bottom: .3rem; }
  .liste-plats { font-size: .98rem; margin-bottom: .6rem; }
  .temps--comptoir .bouton { min-height: 50px; }
  .temps--comptoir { padding-top: .6rem; padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}

/* La bouteille : suit la pointe du trait, posée par le JS (le bout en bas). */
.bouteille {
  position: absolute; left: -32px; top: 0; z-index: 3; width: 64px; height: 150px;
  transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  filter: drop-shadow(3px 7px 6px rgb(6 42 44 / .32));
}
.bouteille.est-la { opacity: 1; }
.bouteille.en-vol { transition: transform .8s cubic-bezier(.3, 1.25, .5, 1); }

/* Deuxième temps : l'écran est couvert de sauce, la question du comptoir. */
.temps--servi {
  inset: var(--nav-hauteur) 0 0 0; display: flex; align-items: center; padding: 0 var(--marge) 4.5rem;
  color: var(--creme); opacity: 0; visibility: hidden; transition: opacity .16s linear, visibility 0s linear .16s;
}
.accueil.est-servi .temps--servi { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
.temps--servi h2 { font-size: clamp(3.3rem, 16.4vw, 8rem); margin-bottom: 1.1rem; }
.temps--servi p { font-weight: 700; font-size: 1.25rem; line-height: 1.35; margin: 0 0 1.4rem; max-width: 30rem; }

/* Sans le socle (mouvement réduit, sans JavaScript) : une suite de blocs dans le flux. */
html:not(.socle-actif) .accueil { height: auto; }
html:not(.socle-actif) .accueil .scene__collant { position: static; height: auto; overflow: visible; background: none; }
html:not(.socle-actif) .accueil .toile, html:not(.socle-actif) .bouteille { display: none; }
html:not(.socle-actif) .accueil__textes { position: static; }
html:not(.socle-actif) .temps { position: static; opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.socle-actif) .temps--comptoir { background: var(--formica) var(--mouchetures); padding-top: calc(var(--nav-hauteur) + 1rem); padding-bottom: 2.5rem; }
html:not(.socle-actif) .ecriture { flex: none; aspect-ratio: 1060 / 830; }
html:not(.socle-actif) .temps--servi { background: var(--sauce); padding-top: 3rem; padding-bottom: 3.5rem; }

/* ---------------- 2. La carte d'exemple ---------------- */
.carte-resto { position: relative; background: var(--creme); padding: 0 var(--marge) 4rem; }
/* La sauce du dessus coule sur le crème : la scène et la carte se touchent. */
.coulures { display: block; max-width: none; width: calc(100% + 2 * var(--marge)); margin: 0 calc(-1 * var(--marge)) 1.3rem; height: clamp(58px, 15vw, 110px); }
.coulures__sauce { fill: var(--sauce); }
.coulures__reflet { fill: none; stroke: #ffd9bf; stroke-width: 2.4; stroke-linecap: round; opacity: .65; vector-effect: non-scaling-stroke; }
.carte-resto__tete h2 { font-size: clamp(3.3rem, 18vw, 7.5rem); line-height: .96; white-space: nowrap; }
.carte-resto__tete .trait { margin: .5rem 0 1.15rem; --trait-l: 12rem; }
.mention-exemple {
  margin: 0 0 1.5rem; padding: .75rem 1rem; border-radius: .9rem;
  background: var(--encre); color: var(--creme); font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.carte-resto__onglets { gap: .45rem; margin-bottom: 1.5rem; }
.carte-resto__onglets [role="tab"] { min-height: 48px; padding: 0 1rem; border: 2px solid var(--encre); color: var(--encre); font-weight: 700; font-size: 1rem; }
.carte-resto__onglets [role="tab"][aria-selected="true"] {
  box-shadow: inset 0 2px 2px -1px rgb(255 226 196 / .55), inset 0 -4px 5px -2px rgb(70 8 0 / .4);
}
.carte-photos { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: 0 0 1.25rem; }
.carte-photos--deux { grid-template-columns: 1fr 1fr; }
.carte-photo { position: relative; margin: 0; overflow: hidden; border-radius: 1.15rem; background: var(--creme-ombre); }
.carte-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-photos--deux .carte-photo img { aspect-ratio: 1 / 1.08; }
.legende {
  position: absolute; left: .5rem; bottom: .5rem; padding: .22rem .55rem; border-radius: 999px;
  background: var(--encre); color: var(--creme); font-size: .72rem; font-weight: 500; line-height: 1.3;
}
.carte-resto__categorie { font-size: 2rem; }
.carte-resto__liste { display: block; }
.carte-resto__liste li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 2px solid var(--carte-filet);
}
.carte-resto__liste strong { font-size: 1.14rem; font-weight: 700; }
.carte-resto__liste b { font: 400 1.5rem/1 var(--titre); color: var(--sauce-texte); white-space: nowrap; }
.carte-resto__liste span { grid-column: 1 / -1; margin-top: .2rem; }
.carte-resto__sauces { margin: 1rem 0 0; font-weight: 600; }
.carte-resto__note { margin: 1.5rem 0 0; font-weight: 600; color: var(--encre-douce); }

/* ---------------- Le bandeau qui défile : les plats en enseigne ---------------- */
.bandeau { overflow: hidden; background: var(--formica) var(--mouchetures); color: var(--encre); padding: .55rem 0; border-block: 3px solid var(--encre); }
.bandeau__piste { display: flex; width: max-content; animation: bandeau 26s linear infinite; }
.bandeau__piste span { font: 400 2.05rem/1.2 var(--titre); white-space: nowrap; padding-right: 1.2rem; }
@keyframes bandeau { to { transform: translateX(-50%); } }

/* ---------------- 3. Le plat du jour, écrit avec le doigt ---------------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) var(--marge); }
.jour { background: var(--encre); color: var(--creme); }
.jour .surtitre { color: var(--formica-pale); }
.jour h2 { font-size: clamp(2.7rem, 13vw, 5rem); margin-bottom: .6rem; }
.jour .trait { margin: 0 0 1rem; }
.jour__intro { font-size: 1.1rem; margin-bottom: 1.2rem; max-width: 34rem; }
.ardoise {
  /* Plafonnée à la hauteur de l'écran : au doigt, il reste toujours de quoi faire défiler la page. */
  position: relative; height: min(40svh, 340px); min-height: 180px; border-radius: 1.3rem; overflow: hidden;
  background: var(--formica) var(--mouchetures); color: var(--encre);
}
.ardoise canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pinch-zoom; cursor: crosshair; }
.ardoise__consigne {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center;
  font: 400 1.9rem/1.1 var(--titre); pointer-events: none; transition: opacity .2s ease;
}
.ardoise.a-servi .ardoise__consigne { opacity: 0; visibility: hidden; }
.jour__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin-top: 1rem; min-height: 48px; }
.jour__note { margin: 0; font-size: 1.02rem; flex: 1 1 15rem; }

/* ---------------- 4. Ce qu'il reste à remplacer ---------------- */
.remplacer { background: var(--formica) var(--mouchetures); color: var(--encre); }
.remplacer .surtitre { color: var(--encre); }
.remplacer h2 { font-size: clamp(2.6rem, 12.4vw, 5rem); margin-bottom: 1.6rem; }
.remplacer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.remplacer__liste li { padding: 1.15rem 1.2rem 1.05rem; border-radius: 1.2rem; background: var(--creme); }
.remplacer__liste .trait { --trait-l: 4.6rem; margin-bottom: .55rem; }
.remplacer__liste strong { display: block; font: 400 1.5rem/1.1 var(--titre); margin-bottom: .3rem; }
.remplacer__liste p { margin: 0; color: var(--encre-douce); }

/* ---------------- 5. À Saint-Louis ---------------- */
.infos { background: var(--creme); display: grid; gap: 1.4rem; }
.infos h2 { font-size: clamp(2.6rem, 13.2vw, 5.5rem); margin-bottom: .4rem; }
.infos .trait { margin-bottom: .9rem; }
.infos p:last-child { margin: 0; }
.carte-google { display: block; width: 100%; height: 340px; border: 0; border-radius: 1.3rem; background: var(--creme-ombre); }

/* ---------------- Pied de page ---------------- */
.pied { background: var(--encre); color: var(--creme); padding: 2.8rem var(--marge) calc(6.4rem + env(safe-area-inset-bottom)); }
.pied__nom { font: 400 2.5rem/1 var(--titre); margin: 0 0 .5rem; }
.pied .trait { margin-bottom: 1.1rem; --trait-l: 7rem; }
.pied p { max-width: 38rem; }
.pied a { color: inherit; font-weight: 600; }
.pied__credit { font-size: .92rem; color: var(--formica-pale); margin: 0; }
.pied__credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------- Bureau et tablette ---------------- */
@media (min-width: 761px) {
  .temps--comptoir {
    display: grid; grid-template-columns: minmax(19rem, 2fr) 3fr; grid-template-rows: auto auto auto 1fr auto;
    column-gap: 2rem; padding-top: 1.5rem; padding-bottom: 6rem; align-items: start;
  }
  .tampon { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 12vh; }
  .accroche { grid-column: 1; grid-row: 2; margin-top: 1.1rem; }
  .liste-plats { grid-column: 1; grid-row: 3; font-size: 1.15rem; }
  .temps--comptoir .bouton { grid-column: 1; grid-row: 4; align-self: start; justify-self: start; }
  .ecriture { grid-column: 2; grid-row: 1 / -1; align-self: stretch; height: 100%; width: 100%; margin: 0; }
  .carte-resto { padding-bottom: 6rem; }
  .carte-resto__tete, .carte-resto__onglets, .carte-resto__note { max-width: 74rem; margin-inline: auto; }
  .carte-resto__panneau { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; max-width: 74rem; margin-inline: auto; }
  .jour > *, .remplacer > * { max-width: 74rem; margin-inline: auto; }
  .ardoise { height: min(420px, 55svh); }
  .remplacer__liste { grid-template-columns: repeat(3, 1fr); }
  .infos { grid-template-columns: 2fr 3fr; align-items: center; padding-inline: max(var(--marge), calc((100% - 74rem) / 2)); }
  .carte-google { height: 420px; }
}

/* Pas de reflet ni de bandeau qui bouge si le visiteur le demande. */
@media (prefers-reduced-motion: reduce) {
  .bandeau__piste { animation: none; }
}

/* Le bouton de l'assistant est de la couleur de la sauce : un filet crème le
   détache quand l'écran entier en est couvert. */
.assistant-bouton { box-shadow: 0 0 0 2.5px var(--creme), 0 10px 26px rgb(6 42 44 / .32); }