/* ============================================================
   BOUILLON SALEYA — accueil, construction pas a pas (v6)
   Etape 1 : fond blanc, lisere rouge double en cadre fixe,
   hero = les chaises en pleine page (sous le lisere, jusqu'aux bords),
   le logo au centre, disque plein.
   ============================================================ */
:root {
  --blanc: #FFFFFF;
  --rouge: #860101;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --cadre: 14px;
  --marge: 34px;   /* blanc entre le lisere et la photo */
  --nav: 76px;     /* hauteur de la bande du menu */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--blanc); }
body { position: relative; display: flow-root; overflow-x: hidden; min-height: 100svh; }  /* flow-root : la marge du hero ne traverse plus le body, le lisere reste a sa place */
img { display: block; max-width: 100%; }

/* Le lisere : cadre fixe, trait epais + trait fin, comme le bord de l'assiette */
.lisere { position: absolute; inset: var(--cadre); z-index: 80; pointer-events: none; border: 4px solid var(--rouge); }

/* Le hero : pleine page, bord a bord, sous le lisere */
/* Le menu : dans la bande blanche, entre le lisere et la photo */
.nav { position: relative; z-index: 10; height: var(--nav); margin: calc(var(--cadre) + 4px) calc(var(--cadre) + var(--marge)) 0; display: flex; align-items: center; justify-content: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(28px, 4vw, 56px); }
.nav a { position: relative; display: inline-block; padding: 8px 2px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nav a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 2px; background: var(--rouge); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav a:focus-visible { outline: 2px solid var(--rouge); outline-offset: 4px; }

/* ---- Burger (mobile) : 3 barres rouges, fond transparent, cible 44 px ---- */
.nav-titre { display: none; position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.burger { display: none; position: absolute; right: -10px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .25s var(--ease); }
.burger span { display: block; position: relative; width: 24px; height: 2.5px; background: var(--rouge); border-radius: 2px; transition: background .3s var(--ease); }
/* les trois barres ne se transforment plus en croix : le tiroir a la sienne,
   et la mue restait figee en diagonale quand la navigation l'interrompait */
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; background: var(--rouge); border-radius: 2px; }
.burger span::before { top: -8px; }
.burger span::after { top: 8px; }
/* `translate` porte deja le centrage : un translateY ici s'y ajoutait
   et faisait remonter les trois barres au doigt */
.burger:active { transform: scale(.92); }
/* Ouvert : les deux barres externes se croisent, la centrale s'efface */

/* ---- Drawer mobile : le pattern du starter (toujours dans le DOM, backdrop en opacite,
   panel en translateX(110%), pointer-events none au repos), angles vifs ---- */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, .55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity .45s var(--ease); }
.drawer-panel { position: absolute; top: var(--cadre); right: var(--cadre); bottom: var(--cadre); width: min(400px, calc(100vw - 2 * var(--cadre))); background: rgba(255, 255, 255, .96); backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4); border: 4px solid var(--rouge); padding: 18px 24px calc(42px + env(safe-area-inset-bottom, 0px)); transform: translateX(110%); transition: transform .5s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 28px 70px rgba(20, 18, 16, .3), 0 8px 20px rgba(20, 18, 16, .16); }
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.drawer-head img { width: 60px; height: 60px; }
.drawer-close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--rouge); cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer-links { display: flex; flex-direction: column; margin-top: 10px; }
.drawer-link { display: flex; align-items: baseline; justify-content: space-between; padding: 19px 0 17px; border-bottom: 1px solid rgba(134, 1, 1, .18); color: var(--rouge); -webkit-text-fill-color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; text-decoration: none; transition: padding-left .35s cubic-bezier(.22,.61,.36,1); -webkit-tap-highlight-color: transparent; }
.drawer-link:first-child { padding-top: 8px; }
.drawer-link:last-child { border-bottom: 0; }
.drawer-link .idx { font-size: 9px; letter-spacing: .36em; font-weight: 700; color: rgba(134, 1, 1, .4); -webkit-text-fill-color: rgba(134, 1, 1, .4); align-self: flex-start; margin-top: 4px; }
.drawer-link[aria-current="page"] .idx { color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.drawer-link:active { padding-left: 6px; }
/* iOS : aucun changement de couleur au tap, dans tous les etats */
.drawer-link:visited, .drawer-link:focus, .drawer-link:hover, .drawer-link:active { color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.drawer-pied { margin-top: auto; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(134, 1, 1, .6); }
@media (hover: hover) and (pointer: fine) { .drawer-link:hover { padding-left: 10px; } .drawer-link:hover .idx { color: var(--rouge); } }

/* Le hero : une piste de scroll de 2 ecrans ; le cadre reste colle pendant que
   la photo s'efface et revele la video. Exception documentee a la regle
   « pas d'animation mobile » : demandee explicitement par Julius, pilotee par
   le scroll (pas d'animation autonome), opacite + transform seulement. */
.hero { position: relative; margin: 0 calc(var(--cadre) + var(--marge)) 0; height: calc(2 * 100svh); }
.hero-cadre { position: sticky; top: calc(var(--cadre) + var(--marge)); height: calc(100svh - var(--cadre) - 4px - var(--nav)); min-height: 520px; overflow: hidden; background: var(--blanc); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #1a1412; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform-origin: center; will-change: opacity, transform; }

/* Le logo au centre : PNG a exterieur transparent, disque plein */
.logo { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: clamp(210px, 29vw, 420px); height: auto; filter: drop-shadow(0 14px 34px oklch(0% 0 0 / .28)); }


/* ============================================================
   SECTION 2 — Le bouillon (teaser). Memes marges que le hero, angles vifs,
   un seul rouge. Reveal au scroll sur desktop uniquement (regle DESIGN_RULES).
   ============================================================ */
.s-bouillon { margin: 0 calc(var(--cadre) + var(--marge)); padding: clamp(56px, 8vw, 112px) 0 40px; }
.bouillon { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.sur-titre { display: inline-flex; align-items: center; gap: 14px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.sur-titre::before { content: ""; width: 34px; height: 3px; background: var(--rouge); }
.titre-section { margin: 22px 0 0; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.7vw, 54px); line-height: 1.02; letter-spacing: .005em; text-wrap: balance; max-width: 15ch; }
.texte { margin: 28px 0 0; max-width: 52ch; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 16.5px; line-height: 1.75; }
.texte + .texte { margin-top: 14px; }
.reperes { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px 36px; }
.reperes li { padding-top: 14px; border-top: 3px solid var(--rouge); }
.reperes .k { display: block; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; }
.reperes .v { display: block; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bouton { display: inline-flex; align-items: center; justify-content: center; margin-top: 40px; padding: 19px 32px; background: var(--rouge); border: 2px solid var(--rouge); color: #fff; -webkit-text-fill-color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color .35s var(--ease), color .35s var(--ease), transform .3s var(--ease); }
.bouton:active { transform: translateY(1px); }
.bouton:visited, .bouton:focus { color: #fff; -webkit-text-fill-color: #fff; }
.bouton:focus-visible { outline: 2px solid var(--rouge); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .bouton:hover { background: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); } }
.bouillon-photo { margin: 0; }
.bouillon-photo img { width: 100%; aspect-ratio: 163 / 200; object-fit: cover; object-position: center 68%; }   /* moins haute, rognee surtout par le haut, l'assiette reste centree */
.bouillon-photo figcaption { margin-top: 12px; color: #6B5B52; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* Reveal desktop seulement : la section arrive en fondu-montee quand elle entre dans l'ecran */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal:nth-child(2) { transition-delay: .12s; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .bouillon { grid-template-columns: 1fr; gap: 30px; }
  .bouillon-photo { order: -1; }
  .bouillon-photo img { aspect-ratio: 4 / 3; object-position: center 0%; }
}
@media (max-width: 700px) {
  .s-bouillon { padding: 44px 0 40px; }
  .reperes { grid-template-columns: 1fr; gap: 14px; }
  .reperes .v { font-size: 15px; }   /* les horaires tiennent sur une ligne jusqu'a 320 px */
  .bouton { width: 100%; }
}


/* ---- Hachures de separation (responsive) : la hachure de la carte du restaurant,
   a l'horizontale, penchee vers la droite. Elle remplit tout le blanc entre le hero
   et la section 2. Invisible en desktop. ---- */
.hachures { display: block; height: 44px; margin: 0 calc(var(--cadre) + var(--marge)); background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); }
.s-bouillon { padding-top: 0; }
/* Desktop : bande plus discrete (48 px) ; la section 2 ne garde presque rien sous sa photo */
@media (min-width: 901px) {
  .hachures { height: 48px; }
  .s-bouillon { padding-top: 0; padding-bottom: 8px; }
}


/* ============================================================
   SECTION 3 — La carte (teaser). Memes marges, meme rouge, angles vifs.
   Tete de section a deux colonnes, bande de trois photos, menu en trois
   colonnes avec les prix a droite, bouton. Reveal desktop seulement.
   ============================================================ */
.s-carte { margin: 0 calc(var(--cadre) + var(--marge)); padding: 0 0 clamp(20px, 2.5vw, 32px); }
.carte-tete { display: block; }
.carte-tete .titre-section { max-width: 24ch; }   /* deux lignes en desktop */
.carte-tete .texte { margin-top: 0; padding-bottom: 6px; }
.carte-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.carte-photos figure { margin: 0; border: 4px solid var(--rouge); }
.carte-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center var(--y, 50%); }
.carte-photos figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.carte-photos figcaption b { color: var(--rouge); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; margin-top: 20px; }   /* memes colonnes que les photos */
.menu > div { padding-right: 40px; }   /* les traits s'arretent avant le bord droit de la photo */
.menu h3 { margin: 0; padding-bottom: 12px; border-bottom: 3px solid var(--rouge); color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 26px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.menu ul { list-style: none; margin: 6px 0 0; padding: 0; }
.menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid rgba(134, 1, 1, .18); }
.menu li:last-child { border-bottom: 0; }
.menu .nom { color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; }
.menu .det { grid-column: 1; margin-top: 3px; color: #6B5B52; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13.5px; font-weight: 500; }
.menu .prix { color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(36px, 4vw, 52px); padding-top: 24px; border-top: 3px solid var(--rouge); }
.carte-pied p { margin: 0; max-width: 56ch; color: #6B5B52; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.6; }
.carte-pied .bouton { margin-top: 0; }
@media (max-width: 1023px), (pointer: coarse) {
  .carte-tete { grid-template-columns: 1fr; gap: 16px; }
  .menu { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .s-carte { padding: 0 0 26px; }
  .carte-photos { grid-template-columns: 1fr; gap: 14px; }
  .carte-photos img { aspect-ratio: 16 / 10; object-position: center var(--ym, 50%); }
  .carte-pied { flex-direction: column; align-items: stretch; }
  .carte-pied .bouton { width: 100%; }
}


/* « + N autres » en fin de colonne, et le bloc rouge plein qui ferme la section : le store */
.menu .plus { border-bottom: 0; padding-top: 14px; }
.menu .plus a { display: inline-block; text-decoration: none; -webkit-text-fill-color: var(--rouge); transition: opacity .18s ease; }
@media (hover: hover) and (pointer: fine) { .menu .plus a:hover { opacity: .62; } }
.menu .plus a:active { opacity: .62; }
.menu .plus a:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }
.menu .plus span, .menu .plus a { color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.carte-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(32px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); padding: clamp(32px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px); background: var(--rouge); color: #fff; }
.carte-cta-titre { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.02; letter-spacing: .005em; }
.carte-cta-texte { margin: 14px 0 0; max-width: 46ch; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .92); }
.bouton--blanc { margin-top: 0; background: #fff; border-color: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.bouton--blanc:visited, .bouton--blanc:focus { color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
@media (hover: hover) and (pointer: fine) { .bouton--blanc:hover { background: transparent; color: #fff; -webkit-text-fill-color: #fff; } }
@media (max-width: 1023px), (pointer: coarse) { .carte-cta { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .carte-cta { padding: 28px 22px; } .carte-cta .bouton { width: 100%; } }


/* ---- Le titre de la carte en boite, et le serveur qui traverse toute la page derriere elle
   (on voit le haut de son corps depasser). Desktop seulement. ---- */
.carte-tete { position: relative; }
.titre-boite { position: relative; z-index: 1; display: inline-block; margin: 0; padding: 10px 16px 12px; background: #fff; border: 3px solid var(--rouge); max-width: 24ch; }
.scene { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .carte-tete { padding-top: 96px; }   /* la tete, le plateau et les epaules depassent de la boite */
  .scene { display: block; position: absolute; left: calc(-1 * var(--marge) + 4px); right: calc(-1 * var(--marge) + 4px); bottom: 16px; height: 200px; overflow: hidden; z-index: 0; }
  .perso { position: absolute; left: 0; bottom: -3px; width: 146px; height: 200px; object-fit: fill; transform: translateX(110vw); will-change: transform; backface-visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .scene { display: none !important; } }


/* ---- Le chef (dessin de Julius, clip Higgsfield : marche + poele qui saute), desktop seulement.
   Il entre par la gauche au-dessus de « Le bouillon », marche jusqu'a la photo, demi-tour, ressort. ---- */
.scene-chef { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .bouillon { position: relative; align-items: stretch; }
  .bouillon > div.bloc-texte { padding-top: 194px; display: flex; flex-direction: column; }   /* 14 px de blanc + 180 px pour le chef, puis « Le bouillon » */
  .bouillon > div.bloc-texte .reperes { margin-bottom: 40px; }
  .bouillon > div.bloc-texte .bouton { margin-top: 36px; align-self: flex-start; }   /* le bouton descend au niveau du bas de la photo (legende comprise) */
  .scene-chef { display: block; position: absolute; left: calc(-1 * var(--marge) + 4px); top: 0; width: 300px; height: 180px; overflow: hidden; }
  .chef { position: absolute; left: 0; bottom: -2px; width: 131px; height: 180px; object-fit: fill; transform: translateX(-110vw); will-change: transform; backface-visibility: hidden; }
}



/* ============================================================
   SECTION 4 — Le lieu : la traversee du cours Saleya.
   Desktop : la section se fige a l'ecran, la bande de photos defile
   horizontalement au rythme du scroll, le titre glisse a une autre vitesse,
   un bandeau rouge defile en bas comme le lettrage du store.
   Mobile : bande en balayage natif, bandeau fixe, aucune animation.
   ============================================================ */
.s-lieu { margin: 0 calc(var(--cadre) + var(--marge)); }
.lieu-colle { position: relative; }
.lieu-titre { margin: 0; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: clamp(44px, 7vw, 108px); white-space: nowrap; }
.lieu-titre small { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; line-height: 1; }
.lieu-titre small::before { content: ""; display: inline-block; width: 34px; height: 3px; background: var(--rouge); margin-right: 14px; vertical-align: middle; }
.lieu-bande { display: flex; gap: 16px; will-change: transform; }
.lieu-bande figure { flex: none; margin: 0; position: relative; width: clamp(240px, 24vw, 380px); border: 4px solid var(--rouge); box-sizing: border-box; }
.lieu-bande figure.large { width: clamp(360px, 40vw, 620px); }
.lieu-bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lieu-bande figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--rouge); color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.lieu-defile { background: var(--rouge); color: #fff; overflow: hidden; padding: 16px 0; }
.lieu-defile-piste { display: flex; width: max-content; }
.lieu-defile-groupe { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2vw, 26px); letter-spacing: .04em; white-space: nowrap; }
.lieu-defile-groupe i { display: inline-block; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); flex: none; }
.lieu-infos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 22px 0 0; }
.lieu-infos .adr { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 600; color: #2B2320; line-height: 1.5; }
.lieu-infos .adr b { color: var(--rouge); font-weight: 900; text-transform: uppercase; font-size: 17px; margin-right: 16px; }
.lieu-infos .adr span { display: inline-block; margin-right: 16px; }
.lieu-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lieu-actions .bouton { margin-top: 0; }
.bouton--contour { background: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.bouton--contour:visited, .bouton--contour:focus { color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
@media (hover: hover) and (pointer: fine) { .bouton--contour:hover { background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; } }
/* --- desktop : section figee, bande pilotee par le scroll --- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .s-lieu { height: calc(100vh + var(--course, 900px)); }
  .lieu-colle { position: sticky; top: 0; height: 100vh; background: #fff; z-index: 2; display: grid; grid-template-rows: auto 1fr auto auto; grid-template-columns: minmax(0, 1fr); padding: 30px 0 16px; overflow: hidden; }
  .lieu-titre { will-change: transform; }
  .lieu-scene { position: relative; overflow: hidden; margin: 28px 0 0; background: #fff; }
  .lieu-bande { position: absolute; inset: 0; height: 100%; }
  .lieu-bande figure { height: 100%; }
  .lieu-defile { margin-top: 28px; }
  .lieu-defile-piste { animation: lieuDefile 38s linear infinite; }
  @keyframes lieuDefile { to { transform: translateX(-50%); } }
}
@media (max-width: 1023px), (pointer: coarse) {
  .s-lieu { padding: 56px 0 24px; }
  .lieu-infos { padding-top: 28px; }
  .lieu-titre { white-space: normal; }
  .lieu-scene { margin: 24px calc(-1 * (var(--cadre) + var(--marge))) 0; padding: 0 calc(var(--cadre) + var(--marge)); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lieu-scene::-webkit-scrollbar { display: none; }
  .lieu-bande figure { scroll-snap-align: start; width: min(78vw, 360px); aspect-ratio: 3 / 4; }
  .lieu-bande figure.large { width: min(78vw, 360px); }
  .lieu-defile { margin-top: 24px; }
  .lieu-defile-piste { width: auto; animation: none; }
  .lieu-defile-groupe:nth-child(2) { display: none; }
  .lieu-defile-groupe > :nth-child(n+7) { display: none; }
  .lieu-defile-groupe { white-space: normal; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; padding: 0 18px; }
  .lieu-infos { grid-template-columns: 1fr; }
  .lieu-actions .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lieu-defile-piste { animation: none; } }


/* ============================================================
   SECTION 5 — Le rendez-vous. Les deux personnages arrivent l'un vers l'autre
   et s'arretent de part et d'autre du titre ; reservation facon ticket de bistrot.
   ============================================================ */
.s-final { margin: 0 calc(var(--cadre) + var(--marge)); padding: clamp(20px, 2.5vw, 32px) 0 clamp(48px, 6vw, 80px); }
.final-scene { position: relative; text-align: center; }
.final-titre { position: relative; z-index: 1; display: inline-block; margin: 0; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 5.6vw, 84px); line-height: .96; letter-spacing: .005em; }
.final-titre small { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; line-height: 1; }
.final-perso { display: none; }
.final-texte { max-width: 60ch; margin: 22px auto 0; text-align: center; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 16.5px; line-height: 1.7; color: #2B2320; }
.final-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0 clamp(20px, 3vw, 44px); align-items: end; max-width: 1100px; margin: clamp(36px, 5vw, 56px) auto 0; }
.champ { display: flex; flex-direction: column; gap: 10px; }
.champ label { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--rouge); }
.champ input { width: 100%; background: transparent; border: 0; border-bottom: 3px solid var(--rouge); padding: 10px 0 12px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 700; color: #2B2320; outline: 0; border-radius: 0; }
.champ input::placeholder { color: rgba(43, 35, 32, .45); font-weight: 600; }
.champ input:focus { border-bottom-color: #2B2320; }
.final-form .bouton { margin-top: 0; padding: 21px 32px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .final-scene { padding-top: 10px; margin: 0 calc(-1 * var(--marge) + 4px); padding-left: calc(var(--marge) - 4px); padding-right: calc(var(--marge) - 4px); overflow-x: clip; }
  .final-perso { display: block; position: absolute; bottom: -4px; height: 180px; width: auto; z-index: 0; transform: translateX(-200px); will-change: transform; backface-visibility: hidden; object-fit: fill; }
  .final-perso.chef { left: 0; width: 131px; }
  .final-perso.serveur { left: 0; width: 146px; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .final-form { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
  .final-form .bouton { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .s-final { padding: 22px 0 56px; }
  .final-form { grid-template-columns: 1fr; gap: 22px; }
  .final-form .bouton { width: 100%; }
}


/* ============================================================
   FOOTER — fond rouge, dans le cadre du lisere. Logo, liens vers toutes les pages,
   horaires, contact, informations legales, signature.
   ============================================================ */
.footer { margin: 0 var(--cadre) var(--cadre); background: var(--rouge); color: #fff; padding: clamp(48px, 6vw, 80px) var(--marge) 28px; }
.footer-haut { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px clamp(24px, 3vw, 48px); padding-bottom: clamp(36px, 4vw, 52px); border-bottom: 1px solid rgba(255, 255, 255, .32); }
.footer-marque img { width: 128px; height: 128px; display: block; }
.footer-marque p { margin: 18px 0 0; max-width: 28ch; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 14.5px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.footer h4 { margin: 0 0 16px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .7); padding-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, .35); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer a, .footer li, .footer address { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 600; color: #fff; -webkit-text-fill-color: #fff; text-decoration: none; font-style: normal; line-height: 1.45; }
.footer a:visited, .footer a:focus, .footer a:active { color: #fff; -webkit-text-fill-color: #fff; }
.footer a { border-bottom: 1.5px solid transparent; transition: border-color .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { border-bottom-color: #fff; } }
.footer .horaires-pied li { display: grid; grid-template-columns: 1fr; row-gap: 2px; }
.footer .horaires-pied li > span:first-child { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.footer .horaires-pied .h { font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer .horaires-pied .ferme .h { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.footer address b { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.footer-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 22px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .78); text-wrap: balance; }
.footer-bas strong { color: #fff; font-weight: 800; }
@media (max-width: 1023px), (pointer: coarse) { .footer-haut { grid-template-columns: 1fr 1fr; } .footer-marque { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .footer { padding: 40px var(--marge) 24px; }
  .footer-haut { grid-template-columns: 1fr; gap: 30px; }
  .footer-marque img { width: 108px; height: 108px; }
  .footer-bas { flex-direction: column; }
}

/* La suite de la page, blanche, a construire */
.suite { height: 0; }

/* Desktop souris : le reveal est pilote par la molette, la page ne bouge pas
   tant que la video n'est pas revelee. Pas de piste de scroll ici. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hero { height: calc(100svh - var(--cadre) - 4px - var(--nav)); }
  .hero-cadre { position: relative; top: auto; }
}
@media (max-width: 900px) {
  .nav ul { display: none; }
  .burger { display: flex; }
  .nav-titre { display: block; }
}
@media (max-width: 700px) {
  :root { --cadre: 9px; --marge: 20px; --nav: 50px; }
  .nav a { font-size: 11px; letter-spacing: .18em; }
  .nav ul { gap: 22px; }
  .hero-img { object-position: 42% 55%; }
  .logo { width: clamp(180px, 54vw, 260px); }
}
@media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero-cadre { position: relative; } .hero-img { opacity: 0 !important; transform: none !important; } .drawer-backdrop, .drawer-panel, .drawer-link, .burger span, .burger span::before, .burger span::after { transition: none; } }

/* ---- Les horaires : la semaine en sept colonnes, le mercredi hachure, le jour courant en rouge ---- */
.s-horaires { margin: 0 calc(var(--cadre) + var(--marge)); padding: 14px 0 clamp(16px, 2vw, 28px); }
.horaires-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(32px, 5vw, 80px); margin-bottom: clamp(32px, 4vw, 52px); }
.horaires-titre { max-width: 16ch; }
.horaires-etat { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 18px; border: 2px solid var(--rouge); color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.horaires-etat i { display: block; width: 10px; height: 10px; background: var(--rouge); flex: none; }
.horaires-etat.est-ouvert i { animation: pouls 1.8s var(--ease) infinite; }
@keyframes pouls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .55; } }
.semaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 4px solid var(--rouge); border-bottom: 4px solid var(--rouge); }
.semaine li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 30px; border-left: 2px solid var(--rouge); color: #2B2320; }
.semaine li:first-child { border-left: 0; }
.semaine b { display: block; margin-bottom: 14px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 2.1vw, 30px); line-height: 1; letter-spacing: .01em; }
.semaine b span { display: none; }
.semaine em { font-style: normal; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.semaine em small { font-size: inherit; padding: 0 2px; }
.semaine li.ferme { background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); justify-content: flex-start; }
.semaine li.ferme b { background: #fff; align-self: flex-start; padding: 4px 8px; margin: -4px 0 10px -8px; }
.semaine li.ferme .mot { align-self: flex-start; background: #fff; color: var(--rouge); padding: 5px 8px; margin-left: -8px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.semaine li.aujourdhui { background: var(--rouge); color: #fff; }
.semaine li.aujourdhui b { color: #fff; }
.semaine li.aujourdhui::before { content: "Aujourd'hui"; position: absolute; top: 0; left: 0; padding: 5px 8px; background: #fff; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.semaine li.aujourdhui.ferme .mot { background: #fff; }
.semaine li.reveal { transition-delay: calc(var(--i, 0) * .07s); }
@media (hover: hover) and (pointer: fine) {
  .semaine li.is-visible { transition: background-color .28s var(--ease); transition-delay: 0s; }
  .semaine li.is-visible b, .semaine li.is-visible em { transition: color .28s var(--ease); transition-delay: 0s; }
  .semaine li:not(.ferme):not(.aujourdhui):hover { background: var(--rouge); }
  .semaine li:not(.ferme):not(.aujourdhui):hover b, .semaine li:not(.ferme):not(.aujourdhui):hover em { color: #fff; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .s-horaires { padding: 12px 0 28px; }
  .horaires-tete { grid-template-columns: 1fr; align-items: start; gap: 18px; margin-bottom: 28px; }
  .horaires-etat { margin: 0; white-space: normal; }
  .semaine { grid-template-columns: 1fr; border-top-width: 3px; border-bottom-width: 3px; }
  .semaine li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 14px 10px; border-left: 0; border-top: 2px solid var(--rouge); }
  .semaine li:first-child { border-top: 0; }
  .semaine b { margin: 0; font-size: 15px; }
  .semaine b span { display: inline; }
  .semaine em { font-size: 13px; }
  .semaine li.ferme { background: none; }
  .semaine li.ferme b { background: none; padding: 0; margin: 0; }
  .semaine li.ferme .mot { grid-column: 2 / -1; justify-self: end; padding: 0; margin: 0; background: none; }
  .semaine li.aujourdhui::before { position: static; grid-column: 1 / -1; padding: 0; background: none; color: rgba(255,255,255,.85); }
  .horaires-etat { font-size: 11.5px; letter-spacing: .14em; padding: 10px 14px; }
  .semaine li.reveal { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .horaires-etat.est-ouvert i { animation: none; } }


/* ---- L'esprit bouillon : bande pleine largeur, boite blanche bord a bord, les hachures ne font que le cadre ---- */
.manifeste { padding: 10px; background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); }
.manifeste-boite { background: #fff; padding: clamp(36px, 3.6vw, 56px) 24px; text-align: center; }
.manifeste-titre { margin: 0; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: .005em; }
.manifeste-texte { margin: 0; max-width: 52ch; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 16.5px; line-height: 1.65; color: #2B2320; }


/* ---- Les photos d'ambiance : une mosaique qui prolonge la grille des horaires ---- */
.ambiance { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; height: 100%; min-height: 520px; }
.amb { position: relative; margin: 0; min-height: 0; min-width: 0; overflow: hidden; background: #f3efe9; border: 4px solid var(--rouge); }
.amb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.amb-a { grid-column: 1 / 5; } .amb-b { grid-column: 5 / 8; } .amb-c { grid-column: 1 / 3; } .amb-d { grid-column: 3 / 8; }
.amb figcaption { position: absolute; left: 0; bottom: 0; padding: 9px 12px; background: var(--rouge); color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .amb img { transform: scale(1.01); transition: transform 1.1s var(--ease-out); }
  .amb figcaption { transform: translateY(100%); transition: transform .45s var(--ease-out); }
  .amb:hover img { transform: scale(1.06); }
  .amb:hover figcaption { transform: none; }
  .ambiance.reveal .amb { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); }
  .ambiance.reveal.is-visible .amb { clip-path: inset(0 0 0 0); }
  .ambiance.reveal .amb:nth-child(2) { transition-delay: .12s; } .ambiance.reveal .amb:nth-child(3) { transition-delay: .22s; } .ambiance.reveal .amb:nth-child(4) { transition-delay: .32s; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .ambiance { order: -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; height: auto; min-height: 0; }
  .amb-a, .amb-d { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .amb-b, .amb-c { grid-column: auto; aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .ambiance.reveal .amb { clip-path: none; transition: none; } }

/* ---- Le client qui mange, pose a cote du titre de la traversee (un espace de mot entre les deux) ---- */
.client { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .client { display: inline-block; vertical-align: baseline; height: .72em; width: auto; aspect-ratio: 450 / 560; object-fit: fill; transform: scale(1.5); transform-origin: left bottom; will-change: transform; backface-visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .client { display: none; } }

.lieu-trait { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lieu-titre { position: relative; }
  .client { position: relative; z-index: 1; }
  .lieu-trait { display: block; position: absolute; height: 4px; background: var(--rouge); z-index: 2; pointer-events: none; }
}

/* intitules de la traversee : fond blanc, texte rouge */
.lieu-bande figcaption { display: none; }

/* ---- Selecteur de langue : meme bouton que "Itineraire", pose a droite de la nav ---- */
.nav .langue { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: inline-flex; margin-top: 0; padding: 11px 16px; color: #fff; -webkit-text-fill-color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; }
.nav .langue:hover { background: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.nav .langue::after { content: none; }
.nav .langue:focus-visible { outline: 2px solid var(--rouge); outline-offset: 4px; }
@media (max-width: 1023px), (pointer: coarse) { .nav .langue { width: auto; right: 46px; padding: 9px 12px; font-size: 10.5px; } }



/* ---- Le cachet quitte le centre du hero et vient se poser a gauche de la nav pendant le reveal (desktop) ---- */
.nav .nav-logo { display: none; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 60px; height: 60px; padding: 0; opacity: 0; }
.nav .nav-logo::after { content: none; }
.nav-logo img { display: block; width: 100%; height: 100%; }
.nav-logo:focus-visible { outline: 2px solid var(--rouge); outline-offset: 4px; }
.logo-vol { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .nav .nav-logo { display: block; }
  .hero .logo { display: none; }
  .logo-vol { display: block; position: absolute; z-index: 11; left: 50%; top: 50%; width: clamp(210px, 29vw, 420px); height: auto; margin: 0; translate: -50% -50%; transform-origin: center; will-change: transform; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .28)); pointer-events: none; }
}

/* ---- Sur la video : une seule grande phrase en bas a gauche, qui monte mot par mot quand le film apparait ---- */
.hero-titre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(24px, 4vw, 56px); pointer-events: none; opacity: 0; visibility: hidden; }
.hero-titre::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(20, 8, 6, .55), rgba(20, 8, 6, 0)); z-index: -1; }
.hero-titre-sur { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.hero-titre-sur i { font-style: normal; display: block; }
.hero-titre-sur i + i::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 14px; background: #fff; transform: rotate(45deg); vertical-align: middle; }
.hero-titre-h { margin: 0; color: #fff; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 5vw, 84px); line-height: .92; letter-spacing: .005em; }
.hero-titre .mot { display: inline-block; transform: translateY(1.1em); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s var(--ease-out); }
.hero-titre.est-visible .mot { transform: none; opacity: 1; }
.hero-titre.est-visible .mot:nth-child(2) { transition-delay: .06s; } .hero-titre.est-visible .mot:nth-child(4) { transition-delay: .12s; } .hero-titre.est-visible .mot:nth-child(5) { transition-delay: .18s; } .hero-titre.est-visible .mot:nth-child(6) { transition-delay: .24s; }
.hero-titre-sur { transform: translateY(12px); opacity: 0; transition: transform .8s var(--ease-out) .3s, opacity .6s var(--ease-out) .3s; }
.hero-titre.est-visible .hero-titre-sur { transform: none; opacity: 1; }
@media (max-width: 700px) { .hero-titre { padding: 18px; } .hero-titre-sur { font-size: 10.5px; letter-spacing: .22em; margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .hero-titre .mot, .hero-titre-sur { transition: none; } }

.hero-voile { position: absolute; inset: 0; z-index: 2; background: rgba(28, 8, 6, .38); opacity: 0; pointer-events: none; }

/* liseré rouge autour du hero, qui se prolonge autour de la bande de hachures */
.hero-cadre { border: 4px solid var(--rouge); border-bottom: 0; box-sizing: border-box; }
.hachures { border: 4px solid var(--rouge); border-top: 0; box-sizing: border-box; background-clip: padding-box; }

.lieu-infos .horaires-etat { justify-self: start; align-self: center; margin: 0; }

/* ---- Les deux boutons sous la phrase du hero ---- */
.hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; pointer-events: auto; transform: translateY(16px); opacity: 0; transition: transform .8s var(--ease-out) .34s, opacity .6s var(--ease-out) .34s; }
.hero-titre.est-visible .hero-boutons { transform: none; opacity: 1; }
.hero-boutons .bouton { margin-top: 0; padding: 17px 28px; }
.hero-boutons .bouton--blanc { background: #fff; border-color: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
.hero-boutons .bouton--verre { background: transparent; border-color: #fff; color: #fff; -webkit-text-fill-color: #fff; }
.hero-boutons .bouton--verre:visited, .hero-boutons .bouton--verre:focus { color: #fff; -webkit-text-fill-color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .hero-boutons .bouton { transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
  .hero-boutons .bouton--blanc:hover { background: transparent; border-color: #fff; color: #fff; -webkit-text-fill-color: #fff; }
  .hero-boutons .bouton--verre:hover { background: #fff; border-color: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
  .hero-boutons .bouton:hover { transform: translateY(-2px); }
  .hero-boutons .bouton:active { transform: translateY(0); }
}
@media (max-width: 700px) { .hero-boutons { margin-top: 18px; gap: 10px; } .hero-boutons .bouton { padding: 14px 18px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .hero-boutons { transition: none; } }

.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
.footer .footer-bas a { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .78); -webkit-text-fill-color: rgba(255, 255, 255, .78); }
.footer .footer-bas a:hover { color: #fff; -webkit-text-fill-color: #fff; }

.footer .footer-insta { position: absolute; right: 0; bottom: 22px; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff; border: 2px solid rgba(255, 255, 255, .5); border-bottom: 2px solid rgba(255, 255, 255, .5); transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.footer .footer-insta svg { display: block; }
@media (hover: hover) and (pointer: fine) { .footer .footer-insta:hover { background: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); border-color: #fff; } }
@media (max-width: 1023px), (pointer: coarse) { .footer .footer-insta { position: static; margin-top: 4px; justify-self: start; } .footer-haut { grid-template-columns: 1fr 1fr; } .footer-haut > div:nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 700px) { .footer-haut { grid-template-columns: 1fr; } .footer-haut > div:nth-child(3) { grid-column: auto; } }

/* ---- Selecteur de langue (bouton + liste) ---- */
.i18n-attente body { visibility: hidden; }
/* Bouton = langue en cours. Au clic, une seule case dessous = l'autre langue.
   Meme largeur, meme hauteur, chacune d'une seule couleur. */
.nav .langue-choix { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 148px; }
.nav .langue-choix .langue { position: static; translate: none; display: block; width: 100%; padding: 11px 0; text-align: center; text-indent: .22em; }
/* .nav ul { display: flex } est plus specifique que .langue-liste : sans le prefixe .nav
   la liste s'ouvre en flex et la case se reduit a la largeur de son texte. */
.nav .langue-liste { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 0; list-style: none; }
.nav .langue-liste[hidden] { display: none; }
.nav .langue-liste li { display: block; width: 100%; }
.langue-liste button.est-actif { display: none; }   /* on ne propose que l'autre langue */
.langue-liste button { display: block; width: 100%; padding: 11px 0; background: #fff; border: 2px solid var(--rouge); color: var(--rouge); -webkit-text-fill-color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-align: center; text-indent: .22em; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); transition: background-color .2s ease, color .2s ease; }
/* Les deux cases restent toujours en opposition : survoler l'une bascule l'autre,
   pour qu'elles ne soient jamais blanches (ni rouges) toutes les deux en meme temps. */
@media (hover: hover) and (pointer: fine) {
  .langue-liste button:hover { background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; }
  .nav .langue-bouton:hover + .langue-liste button { background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; }
  .nav .langue-choix:has(.langue-liste button:hover) .langue-bouton { background: #fff; color: var(--rouge); -webkit-text-fill-color: var(--rouge); }
}
.langue-liste button:active { background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; }
.langue-liste button:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
@media (max-width: 1023px), (pointer: coarse) { .nav .langue-choix { right: 46px; width: 118px; } .nav .langue-choix .langue { padding: 9px 0; } .langue-liste button { padding: 9px 0; font-size: 10.5px; letter-spacing: .18em; text-indent: .18em; } }

/* ---- Mobile : cibles tactiles a 44px minimum (le doigt, pas le curseur) ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .nav .langue-choix .langue { padding: 15px 12px; }
  .menu .plus a { padding: 15px 0; margin: -15px 0; }
}

/* ---- Telephone : pas de cadre autour de la page, on rend la largeur a l'ecran ---- */
@media (max-width: 700px) {
  :root { --cadre: 0px; --marge: 16px; }
  .lisere { display: none; }
  /* le drawer garde son retrait : sans lui, sa bordure rouge collerait aux bords */
  .drawer-panel { top: 10px; right: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); }
  /* sans le cadre, plus rien n'eloignait la nav de la barre d'etat / Dynamic Island */
  .nav { margin-top: calc(10px + env(safe-area-inset-top, 0px)); }
  /* paysage : ne pas passer sous l'encoche */
  .s-bouillon, .s-horaires, .nav { margin-left: calc(var(--marge) + env(safe-area-inset-left, 0px)); margin-right: calc(var(--marge) + env(safe-area-inset-right, 0px)); }
}

/* ---- Telephone : hero plus court, on doit voir les hachures sans scroller loin ---- */
@media (max-width: 700px) {
  .hero { height: calc(80svh + 320px); margin-top: 14px; }
  .hero-cadre { height: 80svh; min-height: 0; }
  /* de l'air au-dessus de la nav : sans le cadre, tout paraissait colle en haut */
  .nav { margin-top: calc(18px + env(safe-area-inset-top, 0px)); }
  /* le logo du hero est anime par JS : il monte et retrecit au scroll */
  .hero .logo { will-change: transform, opacity; }
}

/* ---- Telephone : le selecteur de langue vit dans le menu, il mangeait la nav ---- */
.drawer-langue { display: none; }
@media (max-width: 900px) {
  .nav .langue-choix { display: none; }
  .drawer-langue { display: block; margin-top: 22px; padding-top: 18px; border-top: 2px solid rgba(134, 1, 1, .16); }
  .drawer-langue-titre { display: block; margin-bottom: 12px; color: rgba(134, 1, 1, .6); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
  .drawer-langue .langue-bouton { display: none; }
  .drawer-langue .langue-liste, .drawer-langue .langue-liste[hidden] { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .drawer-langue .langue-liste li { flex: 1 1 0; }
  /* ici on montre les deux langues, l'active en plein : c'est un choix, pas un menu deroulant */
  .drawer-langue .langue-liste button { display: block; width: 100%; padding: 15px 0; font-size: 11px; box-shadow: none; }
  .drawer-langue .langue-liste button.est-actif { display: block; background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; }
}

/* ---- Telephone : le hero tient en un ecran, les hachures sont la des le depart ---- */
@media (max-width: 700px) {
  .hero { height: 76svh; margin-top: 6px; }
  .hero-cadre { position: relative; top: auto; height: 76svh; min-height: 0; }
  /* pendant la revelation, la page est retenue : le doigt fait avancer la video */
  html.hero-retient, html.hero-retient body { overflow: hidden; overscroll-behavior: none; }
}

/* ---- Telephone : le logo vole vers la nav, a gauche du titre de page ---- */
@media (max-width: 700px) {
  /* le logo statique vit dans la carte, qui coupe ce qui depasse : on prend
     celui qui est hors de la carte, comme le fait le desktop */
  .hero .logo { display: none; }
  .logo-vol { display: block; position: absolute; z-index: 11; left: 50%; top: 50%; width: clamp(180px, 54vw, 260px); height: auto; margin: 0; translate: -50% -50%; transform-origin: center; will-change: transform; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .28)); pointer-events: none; }
  /* sa cible : l'emplacement du logo dans la nav, le titre se decale a droite */
  .nav .nav-logo { display: block; width: 38px; height: 38px; }
  /* aligne a gauche au depart, il glisse quand le logo vient se poser */
  .nav-titre { left: 0; transition: transform .5s var(--ease); }
  html.logo-pose .nav-titre { transform: translateX(50px); }
  /* les hachures et la section suivante se rapprochent */
  .s-lieu { padding-top: 24px; }
}

/* ---- Telephone : carrousel du lieu centre, et le surtitre "Le lieu" saute ---- */
@media (max-width: 700px) {
  .lieu-titre small { display: none; }
  /* le retrait lateral vaut la moitie de ce qui reste : l'image se centre,
     ses deux voisines depassent a egalite de chaque cote */
  .lieu-scene { padding-inline: 13vw; }
  .lieu-bande figure, .lieu-bande figure.large { width: 74vw; scroll-snap-align: center; }
}

/* ---- Telephone : la semaine regroupee, le bandeau en trois blocs ---- */
.semaine-tel { display: none; }
@media (max-width: 700px) {
  /* la grille des 7 jours reste lue par les lecteurs d'ecran, mais on affiche
     la version regroupee, seule lisible sur un ecran etroit */
  .semaine { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .semaine-tel { display: block; list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rouge); border-bottom: 3px solid var(--rouge); }
  .semaine-tel li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 12px; border-top: 2px solid var(--rouge); }
  .semaine-tel li:first-child { border-top: 0; }
  .semaine-tel b { flex: 1 1 auto; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 4.2vw, 19px); line-height: 1.1; letter-spacing: .01em; }
  .semaine-tel .heures { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .semaine-tel em { font-style: normal; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .semaine-tel em small { font-size: inherit; padding: 0 3px; }
  .semaine-tel li.ferme { background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); }
  .semaine-tel li.ferme b, .semaine-tel li.ferme em { background: #fff; padding: 3px 9px; }
  .semaine-tel li.ferme em { color: var(--rouge); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; }
  .semaine-tel li.aujourdhui { background: var(--rouge); }
  .semaine-tel li.aujourdhui b, .semaine-tel li.aujourdhui em { color: #fff; }
  .semaine-tel li.aujourdhui.ferme b, .semaine-tel li.aujourdhui.ferme em { color: var(--rouge); }

  /* le bandeau rouge : trois blocs qu'on balaie, sans la petite icone */
  .lieu-defile { overflow: hidden; padding: 22px 0 16px; }
  /* la piste devient le conteneur qui defile ; le groupe garde sa largeur
     de contenu pour que chaque bloc fasse exactement un ecran */
  .lieu-defile-piste { display: block; width: auto; animation: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lieu-defile-piste::-webkit-scrollbar { display: none; }
  .lieu-defile-groupe:nth-child(2) { display: none; }
  .lieu-defile-groupe { display: flex; flex-wrap: nowrap; width: max-content; gap: 0; padding: 0; white-space: normal; font-size: clamp(21px, 6.4vw, 30px); }
  .lieu-defile-groupe i { display: none; }
  .lieu-defile-groupe > span { flex: 0 0 100vw; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; text-align: center; padding: 0 22px; line-height: 1.12; }
  .lieu-defile-groupe > span:nth-of-type(n+4) { display: none; }   /* les 3 messages, pas leurs doublons */
  .lieu-defile-points { display: flex; justify-content: center; gap: 8px; padding-top: 16px; }
  .lieu-defile-points i { display: block; width: 7px; height: 7px; background: #fff; opacity: .34; transform: rotate(45deg); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .lieu-defile-points i.est-actif { opacity: 1; transform: rotate(45deg) scale(1.3); }
}

/* ---- Telephone : un seul ecart vertical, tenu d'une section a l'autre ---- */
@media (max-width: 700px) {
  :root { --ecart: 24px; }
  .s-lieu { padding-bottom: 0; }
  .s-horaires { padding-top: var(--ecart); padding-bottom: var(--ecart); }
  .s-bouillon { padding-top: 0; }
  .lieu-scene { margin-top: var(--ecart); }
  .lieu-defile { margin-top: var(--ecart); }
}

/* ---- Telephone : deux retouches sur le bandeau et les horaires ---- */
@media (max-width: 700px) {
  /* le fond blanc du jour ferme doit epouser le mot, pas barrer la ligne */
  .semaine-tel li.ferme b { flex: 0 1 auto; }
  /* hauteur figee : "6 rue Sainte-Reparate" tient sur deux lignes, les autres
     sur une seule -- sans cela le bandeau saute a chaque balayage */
  .lieu-defile-groupe > span { display: flex; align-items: center; justify-content: center; min-height: 2.24em; }
}

/* ---- Telephone : les horaires, structure en blocs plutot qu'en colonnes.
   Deux colonnes se disputaient la largeur et se lisaient mal : le nom des
   jours prend sa ligne, les horaires la suivante. ---- */
@media (max-width: 700px) {
  .semaine-tel li { display: block; padding: 20px 14px; }
  .semaine-tel .marque { display: block; margin-bottom: 9px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
  .semaine-tel b { display: block; margin-bottom: 9px; font-size: clamp(19px, 5.6vw, 26px); }
  .semaine-tel .heures { display: flex; flex-direction: row; align-items: center; gap: 13px; }
  .semaine-tel .heures i { display: block; width: 6px; height: 6px; flex: none; background: var(--rouge); transform: rotate(45deg); }
  .semaine-tel em { font-size: clamp(15px, 4.2vw, 17px); }

  /* le mercredi : hachures de la marque, le jour sur blanc, la mention en plein */
  .semaine-tel li.ferme b { display: inline-block; background: #fff; padding: 4px 10px; margin-left: -10px; }
  .semaine-tel li.ferme .heures em { background: var(--rouge); color: #fff; padding: 6px 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: 12.5px; }

  /* aujourd'hui : bloc plein, nomme, pour qu'on sache de quel jour il s'agit */
  .semaine-tel li.aujourdhui .marque { color: rgba(255, 255, 255, .82); }
  .semaine-tel li.aujourdhui .heures i { background: #fff; }
  .semaine-tel li.aujourdhui.ferme b { background: #fff; }
  .semaine-tel li.aujourdhui.ferme .heures em { background: #fff; color: var(--rouge); }
}

/* ---- Telephone : bandeau, texte centre en hauteur et tenant sur une ligne ---- */
@media (max-width: 700px) {
  /* padding symetrique : le texte se centre dans le rectangle entier.
     Les reperes sortent du flux, sinon ils poussaient le texte vers le haut. */
  .lieu-defile { position: relative; padding: 30px 0; }
  .lieu-defile-points { display: none; }   /* remplaces par les fleches */
  /* le JS gere desormais les copies : ne plus masquer au-dela du 3e bloc */
  .lieu-defile-groupe > span:nth-of-type(n+4) { display: flex; }
  .lieu-defile-groupe > span { min-height: 0; padding: 0 14px; white-space: nowrap; }
  .lieu-defile-groupe { font-size: clamp(15px, 5.4vw, 28px); }
}

/* ---- Telephone : quatre ajustements ---- */
@media (max-width: 700px) {
  /* 1. tout le rouge devient saisissable : le rembourrage passe du bandeau
     aux blocs, la zone qui defile couvre donc toute la hauteur */
  .lieu-defile { padding: 0; }
  .lieu-defile-groupe > span { padding: 30px 14px; }
  .lieu-defile-points { pointer-events: none; }   /* les reperes ne volent pas le geste */

  /* 2. les horaires sont encadres sur les quatre cotes */
  .semaine-tel { border: 3px solid var(--rouge); }

  /* 3. et 4. titres centres (essai) */
  .hero-titre { text-align: center; }
  .hero-titre-sur { justify-content: center; }
  .hero-boutons { justify-content: center; }
  .lieu-titre { text-align: center; }
}

/* ---- Telephone : de l'air entre le cadre et les pastilles du mercredi ---- */
@media (max-width: 700px) {
  .semaine-tel li { padding-left: 18px; padding-right: 18px; }
}

/* ---- Telephone : voile degrade sous les textes du hero.
   Un degrade a deux teintes a une pente d'opacite constante, que l'oeil lit
   comme une bande nette. On approche donc une courbe adoucie avec plusieurs
   paliers : la fin du voile devient invisible. Il demarre au-dessus du
   sur-titre et descend jusqu'au bas du hero. ---- */
@media (max-width: 700px) {
  .hero-titre::before {
    top: -72px; bottom: 0; height: auto;
    background: linear-gradient(to top,
      rgba(18, 7, 5, .86) 0%,
      rgba(18, 7, 5, .84) 10%,
      rgba(18, 7, 5, .79) 22%,
      rgba(18, 7, 5, .71) 34%,
      rgba(18, 7, 5, .61) 47%,
      rgba(18, 7, 5, .49) 60%,
      rgba(18, 7, 5, .36) 72%,
      rgba(18, 7, 5, .22) 83%,
      rgba(18, 7, 5, .10) 92%,
      rgba(18, 7, 5, 0) 100%);
  }
}

/* ---- Telephone : centrage general et allegement des sections ---- */
@media (max-width: 700px) {
  /* 1. les horaires, centres dans leur cadre */
  .semaine-tel li { text-align: center; }
  .semaine-tel .heures { justify-content: center; }
  .semaine-tel li.ferme b { margin-left: 0; }
  .semaine-tel li.ferme .heures { justify-content: center; }

  /* 2. la mosaique d'ambiance ne sert pas sur telephone */
  .ambiance { display: none; }

  /* 3. "Un bouillon au coeur du Vieux-Nice" : sans surtitre, centre */
  .bloc-texte .sur-titre { display: none; }
  .bloc-texte { text-align: center; }
  .bloc-texte .bouton { width: 100%; }

  /* 5. "Quelques classiques" centre dans son cadre */
  .carte-tete { text-align: center; }
  .carte-tete .titre-boite { display: block; max-width: none; }

  /* 7. l'encart "Decouvrez la carte" centre */
  .carte-cta { text-align: center; justify-items: center; }

  /* 8. pied de page centre, les deux colonnes de liens cote a cote */
  .footer-haut { grid-template-columns: 1fr 1fr; gap: 26px 18px; text-align: center; justify-items: center; }
  .footer-haut > div:nth-child(3) { grid-column: 1 / -1; }
  .footer-haut ul { padding: 0; }
  .footer .footer-insta { grid-column: 1 / -1; justify-self: center; margin-top: 2px; }
  .footer address { text-align: center; }
  .footer-bas { flex-direction: column; align-items: center; text-align: center; }
  .footer-legal { display: flex; flex-direction: column; align-items: center; gap: 8px; }
}

/* ---- Telephone : la photo de chaque rubrique du menu ---- */
@media (max-width: 700px) {
  .carte-photos[data-vide] { display: none; }
  .menu > div > figure { margin: 0 0 16px; border: 4px solid var(--rouge); box-sizing: border-box; }
  .menu > div > figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; object-position: center var(--ym, 70%); }
}

/* ---- Telephone : le meme ecart de 24px d'une section a l'autre, partout ---- */
@media (max-width: 700px) {
  .bloc-texte .titre-section { margin-top: 0; }
  .s-bouillon { padding-bottom: var(--ecart); }
  .menu { margin-top: var(--ecart); }
  .carte-cta { margin-top: var(--ecart); }
  .s-carte { padding-bottom: var(--ecart); }
  .s-final { padding-top: 0; }
}

/* ---- Telephone : en colonne unique, le retrait droit des rubriques du menu
   (prevu pour aligner les traits sur la photo en desktop) desequilibre ---- */
@media (max-width: 700px) {
  .menu > div { padding-right: 0; }
}

/* ---- Telephone : les titres de section prennent toute la largeur.
   .titre-section est bride a 15ch et .titre-boite a 24ch : sur un ecran
   etroit cela resserre le texte au centre et multiplie les lignes. ---- */
@media (max-width: 700px) {
  .titre-section, .titre-boite { max-width: none; }
  /* "Quelques classiques" perd son cadre et devient un vrai titre */
  .carte-tete .titre-boite { border: 0; background: none; padding: 0; }
  .bloc-texte .titre-section, .carte-tete .titre-boite { font-size: clamp(24px, 7.2vw, 38px); line-height: 1.02; text-wrap: balance; }
}

/* ---- Telephone : essai sans le titre "Quelques classiques".
   La photo prend sa place, avec le meme ecart de 24px qu'ailleurs. ---- */
@media (max-width: 700px) {
  /* uniquement l'accueil : les pages internes ont des titres qui portent la
     meme classe et doivent rester visibles */
  .s-carte .carte-tete { display: none; }
  .menu { margin-top: 0; }
}

/* ---- Variante courte du sous-titre de l'encart sur telephone : la version
   longue laissait "prix." seul sur une deuxieme ligne ---- */
.sur-etroit { display: none; }
@media (max-width: 700px) {
  .sur-large { display: none; }
  .sur-etroit { display: inline; }
  /* taille fluide calee pour tenir sur une ligne jusqu'aux ecrans de 320px */
  .carte-cta-texte { font-size: clamp(13.5px, 4.1vw, 16px); }
}

/* ---- Telephone : le titre deplace prend la place de l'ancien ---- */
@media (max-width: 700px) {
  .bloc-texte .titre-section[data-remplace] { display: none; }
  .s-final[data-vide] { display: none; }
  /* borne basse a 26px : a 30px le titre ne laissait plus la place aux
     personnages sur les ecrans de 320px */
  .bloc-texte .final-titre { display: block; margin: 0 0 4px; font-size: clamp(26px, 8.2vw, 44px); line-height: .98; }
  .bloc-texte .final-titre small { margin-bottom: 14px; font-size: 12px; letter-spacing: .26em; }
}

/* ---- Telephone : barre d'action collee en bas ---- */
.barre-cta { display: none; }
@media (max-width: 700px) {
  /* le bouton Itineraire du bas fait doublon avec la barre */
  .bloc-texte .bouton { display: none; }

  .barre-cta {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-top: 3px solid var(--rouge);
    transform: translateY(115%); opacity: 0; pointer-events: none;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .4s var(--ease);
  }
  .barre-cta.est-visible { transform: none; opacity: 1; pointer-events: auto; }
  /* le menu passe devant : la barre s'efface le temps qu'il est ouvert */
  body.drawer-open .barre-cta { transform: translateY(115%); opacity: 0; pointer-events: none; }
  .barre-cta .bouton { flex: 1 1 0; width: auto; margin-top: 0; padding: 15px 10px; font-size: 11.5px; }
  /* la derniere ligne du pied de page ne doit pas passer sous la barre */
  .footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Telephone : les deux boutons de la barre ---- */
@media (max-width: 700px) {
  /* la barre respire un peu plus */
  .barre-cta { padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px)); }
  /* sans border-box, les rembourrages s'ajoutent a la base flex et les deux
     boutons n'ont pas la meme largeur */
  /* base 50% et non 0 : en border-box, une base nulle plancher sur le
     rembourrage + bordure de chaque bouton, et les deux n'ont pas le meme
     rembourrage -> ils differaient de 8px */
  .barre-cta .bouton { flex: 1 1 50%; padding: 17px 10px; box-sizing: border-box; min-width: 0; }
  /* Itineraire : bordure rouge, sinon le blanc se perd sur un fond clair */
  .barre-cta .bouton--blanc { border-color: var(--rouge); }
  /* le second bouton reste en rouge plein : plus lisible et moins charge
     que les hachures a cette taille */
  /* la derniere ligne du pied de page suit la nouvelle hauteur */
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Telephone, essai : scene des personnages autour du titre "Entrees" ---- */
@media (max-width: 700px) {
  /* la scene deborde jusqu'aux bords de l'ecran pour que les personnages
     entrent depuis l'exterieur, le titre reste dans la colonne de contenu */
  /* pas de rembourrage haut : l'espace avec la photo etait juste, et les
     personnages tiennent dans la hauteur du titre */
  /* le rembourrage haut loge le depassement des personnages, centres en
     hauteur sur le texte ; la marge de la photo est reduite d'autant pour
     que l'ecart avec elle ne bouge pas */
  .mn-scene { position: relative; margin: 0 calc(-1 * var(--marge)); padding: 16px var(--marge) 0; overflow-x: clip; }
  .mn-scene h3 { position: relative; z-index: 1; text-align: center; }
  .menu > div > figure { margin-bottom: 0; }
  /* tailles ecrites en dur : "width: auto" dependrait du chargement de la
     video. Proportions relevees sur les fichiers : 104x144 et 105x144. */
  /* planche d'images plutot qu'une video : iOS refuse de lire une video hors
     de l'ecran, les personnages glissaient alors sans bouger les jambes.
     14 images pour le chef, 16 pour le serveur, extraites des clips. */
  /* les planches sont recadrees au plus juste sur le dessin : le pied touche
     le bas de la case, donc "bottom: 3px" pose les deux pile sur le trait,
     quelle que soit leur taille. Le serveur garde sa taille relative reelle,
     il est un peu plus petit que le chef. */
  .mn-perso { display: block; position: absolute; bottom: 2px; z-index: 0; left: 0;
    background-repeat: no-repeat; background-position: 0 0;
    transform: translateX(-200px); will-change: transform; pointer-events: none; }
  .mn-perso.chef { width: 37px; height: 51px; background-image: url(img/marche-chef.png); background-size: 518px 51px; }
  .mn-perso.serveur { width: 34px; height: 48px; background-image: url(img/marche-serveur.png); background-size: 544px 48px; }
  /* la duree d'un cycle correspond a celle du clip, au rythme choisi :
     les pieds ne patinent pas par rapport au deplacement */
  .mn-perso.chef.marche { animation: marcheChef .972s steps(14) infinite; }
  .mn-perso.serveur.marche { animation: marcheServeur 1.402s steps(16) infinite; }
}
@keyframes marcheChef { to { background-position-x: -518px; } }
@keyframes marcheServeur { to { background-position-x: -544px; } }
@media (max-width: 700px) {
}

/* ---- Telephone : pied de page resserre, il occupait 77% de l'ecran ---- */
@media (max-width: 700px) {
  .footer { padding-top: 30px; }
  .footer h4 { margin: 0 0 10px; padding-bottom: 7px; font-size: 11px; letter-spacing: .22em; }
  .footer ul { gap: 7px; }
  .footer a, .footer li, .footer address { line-height: 1.35; }
  .footer-haut { gap: 20px 18px; padding-bottom: 20px; }
  .footer address b { margin-bottom: 2px; }
  .footer .footer-insta { margin-top: 0; }
  .footer-bas { padding-top: 16px; gap: 7px 18px; }
  /* les deux liens legaux cote a cote plutot qu'empiles */
  .footer-legal { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
}

/* ---- Telephone : le bouton Instagram en icone double le lien "Instagram"
   deja liste dans "Liens utiles" juste au-dessus. Sur un ecran etroit il
   coute une ligne entiere pour rien. ---- */
@media (max-width: 700px) {
  .footer .footer-insta { display: none; }
  /* "Nous trouver" passe en tete, seul sur sa ligne, avant les deux colonnes */
  .footer-haut > div:nth-child(3) { order: -1; grid-column: 1 / -1; }
  .footer-haut { padding-bottom: 18px; }
  .footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Telephone : les deux personnages encadrent "On se voit au Bouillon ?".
   Fixes, donc en pur CSS. Ils debordent jusqu'aux bords de l'ecran : la
   colonne ne laisse qu'une quarantaine de pixels de chaque cote, trop peu
   pour rester a l'echelle du titre. ---- */
@media (max-width: 700px) {
  /* --retrait : de combien ils rentrent depuis le bord de l'ecran.
     Les reduire un peu degage a la fois la marge au bord et l'ecart au texte. */
  /* --retrait : de combien ils rentrent depuis le bord de l'ecran. Fluide,
     sinon ils touchent presque le texte sur les ecrans de 320px. */
  .bloc-texte .final-titre { position: relative; --ph: clamp(48px, 16.6vw, 70px); --retrait: clamp(6px, 2.3vw, 11px); }
  .bloc-texte .final-titre::before,
  .bloc-texte .final-titre::after {
    content: ""; position: absolute; bottom: 0; pointer-events: none;
    background-repeat: no-repeat; background-position: bottom center; background-size: contain;
  }
  /* rapports releves sur les images : 294x405 et 267x381 */
  .bloc-texte .final-titre::before {
    left: calc(-1 * var(--marge) + var(--retrait));
    height: var(--ph); width: calc(var(--ph) * 0.7259);
    background-image: url(img/perso-chef.png);
  }
  .bloc-texte .final-titre::after {
    right: calc(-1 * var(--marge) + var(--retrait));
    height: calc(var(--ph) * 0.9407); width: calc(var(--ph) * 0.6592);
    background-image: url(img/perso-serveur.png);
  }
}

/* ---- Telephone : section "L'addition", propre au responsive ---- */
.s-addition { display: none; }
@media (max-width: 700px) {
  /* elle remplace le bloc de presentation en bas de page */
  .s-bouillon { display: none; }

  .s-addition { display: block; margin: 0 calc(var(--cadre) + var(--marge)); padding: 0 0 var(--ecart); text-align: center; }
  .add-surtitre { display: block; margin-bottom: 10px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
  .add-titre { margin: 0 0 16px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 9vw, 44px); line-height: 1; letter-spacing: .005em; }

  .add-ticket { position: relative; border: 3px solid var(--rouge); background: #fff; padding: 0 0 0; overflow: hidden; }
  .add-hachures { height: 14px; background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); }

  .add-lignes { list-style: none; margin: 0; padding: 4px 16px 0; }
  /* les intitules sont poses d'emblee : seuls les chiffres s'animent */
  /* l'ecart tient le nom a distance du prix : un intitule long revenait a la
     ligne trop tard et venait butter contre le chiffre */
  .add-lignes li { display: flex; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px dashed rgba(134, 1, 1, .32); }
  .add-lignes li:last-child { border-bottom: 0; padding-bottom: 12px; }
  .add-nom { flex: 1 1 auto; text-align: left; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .add-prix { flex: none; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

  .add-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 16px; background: var(--rouge); color: #fff;
    opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
  .s-addition.est-visible .add-total { opacity: 1; transform: none; transition-delay: .1s; }
  .add-total span { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
  .add-total b { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: clamp(26px, 7.4vw, 34px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

  .add-note { margin: 14px 0 0; color: #2B2320; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13.5px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
  .add-lignes li, .add-total { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Telephone : section de cloture, commune aux trois pages ---- */
.s-cloture { display: none; }
@media (max-width: 700px) {
  /* la scene finale d'origine et l'encart Instagram de La carte font doublon */
  .s-final { display: none; }
  .lb-cta[data-double] { display: none; }

  /* aucun rembourrage bas : la piste des personnages doit toucher le pied de
     page, ils marchent sur sa ligne */
  .s-cloture { display: block; margin: 0 calc(var(--cadre) + var(--marge)); padding: 0; text-align: center; }

  .cloture-titre { margin: 0; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 9.2vw, 46px); line-height: .98; letter-spacing: .005em; }
  .cloture-adresse { margin: 12px 0 0; color: rgba(134, 1, 1, .72); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }

  /* fond blanc et cadre rouge, comme les lignes des horaires : le aplat rouge
     alourdissait la fin de page, deja rouge au pied */
  .cloture-insta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; padding: 16px 18px;
    background: #fff; border: 3px solid var(--rouge); color: var(--rouge); -webkit-text-fill-color: var(--rouge); text-decoration: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .cloture-insta svg { flex: none; }
  .cloture-insta span { display: block; text-align: left; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; }
  .cloture-insta b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
  .cloture-insta i { display: block; margin-top: 3px; color: #2B2320; -webkit-text-fill-color: #2B2320; font-style: normal; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; }

  /* la piste occupe toute la largeur de l'ecran et se termine sur le pied de
     page : les personnages marchent sur sa ligne et sortent par les bords */
  .cloture-piste { position: relative; height: 52px; margin: 20px calc(-1 * (var(--cadre) + var(--marge))) 0; overflow: hidden; }
  .cloture-perso { position: absolute; bottom: 0; left: 0; display: block; background-repeat: no-repeat; background-position: 0 0;
    transform: translateX(-400px); will-change: transform; }
  .cloture-perso.chef { width: 37px; height: 51px; background-image: url(img/marche-chef.png); background-size: 518px 51px; }
  .cloture-perso.serveur { width: 34px; height: 48px; background-image: url(img/marche-serveur.png); background-size: 544px 48px; }
  /* duree d'un cycle = duree du clip au rythme 2,2 : les pas restent accordes
     a la vitesse de traversee */
  .cloture-perso.marche.chef { animation: marcheChef .663s steps(14) infinite; }
  .cloture-perso.marche.serveur { animation: marcheServeur 1.083s steps(16) infinite; }

  /* entree en douceur */
  .s-cloture .cloture-titre, .s-cloture .cloture-adresse, .s-cloture .cloture-insta {
    opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease-out); }
  .s-cloture.est-visible .cloture-titre { opacity: 1; transform: none; }
  .s-cloture.est-visible .cloture-adresse { opacity: 1; transform: none; transition-delay: .1s; }
  .s-cloture.est-visible .cloture-insta { opacity: 1; transform: none; transition-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .s-cloture .cloture-titre, .s-cloture .cloture-adresse, .s-cloture .cloture-insta {
    opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Telephone : le titre de page est deja decale quand le logo est present
   des le depart. Sur l'accueil c'est l'arrivee du logo qui le pousse. ---- */
@media (max-width: 700px) {
  html.logo-fixe .nav-titre { transform: translateX(50px); transition: none; }
}

/* ---- Pied de page, hors desktop : une seule colonne et un intervalle unique.
   Les deux colonnes de liens repetaient la navigation et la barre du bas ; il
   ne reste que l'adresse. Le meme ecart separe le haut du bloc rouge, le trait
   et le bas de la page. ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .footer-haut > div:nth-child(1), .footer-haut > div:nth-child(2) { display: none; }
  .footer-haut { grid-template-columns: 1fr; gap: 18px; text-align: center; justify-items: center; }
  .footer-haut > div:nth-child(3) { grid-column: auto; }
  .footer .footer-insta { justify-self: center; }   /* visible seulement en tablette */

  .footer { padding-top: 24px; padding-bottom: 24px; }
  .footer-haut { padding-bottom: 24px; }
  .footer-bas { padding-top: 24px; gap: 8px; }
}

/* ---- Hors desktop : la page ne se deplace jamais lateralement. Ceinture de
   securite : un depassement isole ne doit pas rendre toute la page baladeuse.
   `clip` plutot que `hidden` : il ne cree pas de conteneur de defilement et
   laisse donc les elements colles (sticky) fonctionner. ---- */
@media (max-width: 1023px), (pointer: coarse) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* ---- Hors desktop : deux fleches disent que le bandeau se balaie. Elles
   respirent doucement vers l'exterieur, sous un fondu du rouge pour que le
   texte s'efface derriere elles plutot que de les heurter. ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .lieu-defile { position: relative; }
  .lieu-defile::before, .lieu-defile::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 1;
    pointer-events: none;
  }
  .lieu-defile::before { left: 0; background: linear-gradient(90deg, var(--rouge) 34%, transparent); }
  .lieu-defile::after { right: 0; background: linear-gradient(270deg, var(--rouge) 34%, transparent); }

  /* la cible fait 44 px et ne bouge pas ; seul le chevron respire, sinon on
     court apres un element de 11 px qui se derobe sous le doigt */
  .defile-fleche { position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .defile-fleche--g { left: 2px; }
  .defile-fleche--d { right: 2px; }
  .defile-fleche i { display: block; width: 11px; height: 11px;
    border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; }
  .defile-fleche--g i { animation: defileG 1.9s ease-in-out infinite; }
  .defile-fleche--d i { animation: defileD 1.9s ease-in-out infinite; }
  .defile-fleche:active i { opacity: 1; }
  @keyframes defileG {
    0%, 100% { transform: translateX(0) rotate(135deg); opacity: .5; }
    50% { transform: translateX(-4px) rotate(135deg); opacity: 1; }
  }
  @keyframes defileD {
    0%, 100% { transform: translateX(0) rotate(-45deg); opacity: .5; }
    50% { transform: translateX(4px) rotate(-45deg); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .defile-fleche i { animation: none !important; opacity: .85 !important; transform: rotate(-45deg); }
  .defile-fleche--g i { transform: rotate(135deg); }
}

/* ---- Le tiroir : l'acces Instagram, juste au-dessus de l'adresse ---- */
@media (max-width: 1023px), (pointer: coarse) {
  /* Instagram ouvre le bloc du bas : liens en haut, tout le reste groupe en
     pied. Le vide se met la ou il ne gene pas, entre les deux. */
  .drawer-insta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
    padding: 14px 0; border-top: 1px solid rgba(134, 1, 1, .18);
    color: var(--rouge); -webkit-text-fill-color: var(--rouge); text-decoration: none;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13px;
    font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent; }
  .drawer-insta svg, .drawer-route svg { flex: none; }
  .drawer-route { display: inline-flex; align-items: center; gap: 10px;
    margin-top: auto; padding: 14px 0; border-top: 1px solid rgba(134, 1, 1, .18);
    color: var(--rouge); -webkit-text-fill-color: var(--rouge); text-decoration: none;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 13px;
    font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent; }
  /* c'est l'itineraire qui ouvre le bloc du bas : Instagram le suit */
  .drawer-insta { margin-top: 0; }
  .drawer-langue { margin-top: 0; padding-top: 14px; border-top: 1px solid rgba(134, 1, 1, .18); }
  /* le pied portait sa propre marge souple : il se decollait du bloc bas et
     laissait un second vide sous les langues */
  .drawer-pied { margin-top: 0; padding-top: 14px; border-top: 1px solid rgba(134, 1, 1, .18); }
  /* SA / LE / YA : un detail de marque, pas un numero d'ordre efface */
  .drawer-link .idx { font-size: 11px; font-weight: 900; letter-spacing: .2em; color: var(--rouge); -webkit-text-fill-color: var(--rouge); opacity: .6; }
}

/* ---- Le burger ne s'anime qu'une fois la page posee. Au changement de page,
   la croix revenait en barres pendant la navigation : on voyait les trois
   traits tourner, et ils restaient parfois figes en diagonale. ---- */
html:not(.pose) .burger span,
html:not(.pose) .burger span::before,
html:not(.pose) .burger span::after,
html:not(.pose) .nav-titre,
html:not(.pose) .nav-logo,
html:not(.pose) .drawer,
html:not(.pose) .drawer-panel,
html:not(.pose) .drawer-backdrop { transition: none !important; animation: none !important; }

/* ---- La visionneuse : la photo en grand, et le defilement continue ---- */
.visio { display: none; }
@media (max-width: 1023px), (pointer: coarse) {
  html.visio-ouverte, html.visio-ouverte body { overflow: hidden; overscroll-behavior: none; }

  .visio { display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(22, 11, 11, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    opacity: 0; transition: opacity .26s ease-out; }
  .visio.ouverte { opacity: 1; }

  .visio-scene { position: absolute; inset: 0; display: flex; align-items: center;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .visio-scene::-webkit-scrollbar { display: none; }
  .visio-bande { display: flex; width: max-content; height: 100%; align-items: center; margin: 0; }
  .visio-bande figure { flex: none; width: 100vw; height: 100%; margin: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 64px 16px calc(64px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box; scroll-snap-align: center; }
  .visio-bande img { display: block; max-width: 100%; max-height: 100%;
    width: auto; height: auto; object-fit: contain; border: 3px solid var(--rouge); background: #fff; }

  .visio-fermer { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
    z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 2px solid rgba(255, 255, 255, .5); background: transparent; color: #fff;
    -webkit-tap-highlight-color: transparent; cursor: pointer; }
  .visio-compte { position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 2; margin: 0; text-align: center; color: #fff;
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px; font-weight: 800; letter-spacing: .24em; pointer-events: none; }

  /* les tuiles se donnent pour cliquables, sans halo bleu au doigt */
  #lieu-bande figure, .lb-bande figure { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .visio { transition: none !important; }
}

/* ---- Telephone couche : la hauteur tombe sous 560 px alors que la largeur
   passe le seuil des tablettes. Les photos, calees sur la largeur, debordaient
   de l'ecran en hauteur et leur cadre sortait du champ. On les cale donc sur
   la hauteur disponible, la largeur suivant le format. ---- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .lieu-bande figure, .lieu-bande figure.large,
  .lb-scene .lb-bande figure { height: min(62vh, 420px); width: auto; aspect-ratio: 3 / 4; }
  .lieu-scene, .lb-scene { padding-inline: calc((100vw - min(62vh, 420px) * 0.75) / 2); }

  /* sans carrousel, le mur de photos reste une grille : deux colonnes la
     faisaient deborder en hauteur, quatre tiennent dans l'ecran couche */
  .lb-mur-photos > .lb-bande { grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 1fr; }   /* une seule rangee, quel que soit le nombre de photos */

  /* le bandeau tient sur une ligne : empile, il mangeait tout l'ecran */
  .lieu-defile-groupe { flex-wrap: nowrap; white-space: nowrap; font-size: 15px; gap: 0; }
  .lieu-defile-groupe > span { flex: 0 0 auto; min-height: 0; padding: 0 16px; white-space: nowrap; }
  .lieu-defile { padding: 12px 0; }

  /* la visionneuse se cale aussi sur la hauteur */
  .visio-bande figure { padding: 46px 16px; }
  .visio-fermer { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .visio-compte { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Telephone couche : c'est encore un telephone. Le cadre rouge revenait
   au-dessus de 700 px de large et les carrousels, qui vont bord a bord, le
   traversaient. On le retire, comme debout. ---- */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  :root { --cadre: 0px; --marge: 16px; }
  .lisere { display: none; }
}

/* ---- Le tiroir sort plus vite qu'il n'entre : a la navigation, on ne fait
   pas attendre le visiteur devant un panneau qui se retire. ---- */
.drawer:not(.open) .drawer-panel { transition-duration: .26s; }
.drawer:not(.open) .drawer-backdrop { transition-duration: .22s; }

/* ---- Les mots de liaison des jours : en minuscules et nettement plus petits
   que les noms, pour qu'ils se lisent comme des mots-outils et que la ligne
   tienne sur un ecran etroit. ---- */
@media (max-width: 700px) {
  .semaine-tel b { white-space: nowrap; }
  .semaine-tel b .jour-lien { display: inline; font-size: .58em; font-weight: 700;
    text-transform: lowercase; letter-spacing: .06em; opacity: .72; }
}

/* ---- Ordinateur : le choix de langue s'ouvre et se ferme en fondu plutot que
   d'apparaitre net. Les deux cases changent de couleur a la meme cadence, et un
   pont invisible comble l'espace sous le bouton : en le traversant, la souris
   perdait le survol et les couleurs clignotaient. ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .nav .langue-choix .langue,
  .nav .langue-liste button { transition: background-color .22s var(--ease), color .22s var(--ease); }
}

/* ---- Ordinateur : plus de liste a ouvrir, le bouton bascule lui-meme ---- */
@media (min-width: 1024px) { .nav .langue-liste, .nav .langue-liste[hidden] { display: none; } }

/* ============================================================
   TABLETTES — tactiles mais plus larges qu'un telephone. Les regles
   « ordinateur » exigent un survol et un pointeur fin, qu'une tablette n'a pas ;
   les regles « mobile » s'arretaient a 1023 px. Les grandes tablettes n'avaient
   donc aucune mise en page. On leur donne le comportement tactile, a leur
   echelle.
   ============================================================ */
@media (min-width: 701px) and (pointer: coarse) {
  /* le carrousel du lieu : contenu dans le cadre, balaye au doigt */
  .lieu-scene { position: relative; overflow-x: auto; overflow-y: hidden;
    margin: 28px 0 0; padding-inline: 12vw; background: #fff;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lieu-scene::-webkit-scrollbar { display: none; }
  .lieu-bande { position: static; display: flex; gap: 16px; width: max-content;
    height: auto; transform: none !important; }
  .lieu-bande figure, .lieu-bande figure.large { flex: none; width: 62vw; height: auto;
    aspect-ratio: 3 / 4; scroll-snap-align: center; }
  .s-lieu { height: auto; }
  .lieu-colle { position: static; height: auto; display: block; padding: 30px 0 16px; overflow: visible; }

  /* le bandeau : une ligne qui defile, pas trois lignes empilees */
  .lieu-defile-piste { display: block; width: auto; animation: none; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lieu-defile-piste::-webkit-scrollbar { display: none; }
  .lieu-defile-groupe { display: flex; flex-wrap: nowrap; width: max-content; gap: 0; padding: 0;
    white-space: normal; font-size: clamp(20px, 2.4vw, 30px); }
  .lieu-defile-groupe i { display: none; }
  .lieu-defile-groupe > span { flex: 0 0 100vw; box-sizing: border-box; scroll-snap-align: center;
    scroll-snap-stop: always; text-align: center; padding: 0 22px; line-height: 1.12;
    display: flex; align-items: center; justify-content: center; }
  .lieu-defile-groupe:nth-child(2) { display: none; }
}

/* ---- Tablettes (suite) : les blocs concus en deux colonnes pour l'ordinateur
   tiennent toute la largeur, et les photos de rubrique se couchent. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .bloc-texte .titre-section, .carte-tete .titre-section { max-width: none; }
  .s-bouillon .bloc-texte, .s-bouillon .bloc { max-width: none; }
  .menu > div > figure img { aspect-ratio: 16 / 10; }
  .carte-photos img { aspect-ratio: 16 / 10; }
}

/* ---- Tablettes : pas de cadre rouge autour de la page. Les carrousels vont
   bord a bord, comme au telephone ; le lisere revenait au-dessus de 700 px et
   les photos le traversaient. Meme parti que pour le telephone couche. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  :root { --cadre: 0px; --marge: 28px; }
  .lisere { display: none; }
  .drawer-panel { top: 10px; right: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); }
  .nav { margin-top: calc(10px + env(safe-area-inset-top, 0px)); }
}

/* ---- Tablettes : le hero tenait deux ecrans, herite de l'ordinateur ou la
   molette fait avancer la revelation sans bouger la page. Au doigt, il fallait
   defiler un ecran entier avant de voir les hachures. On garde la revelation
   pilotee par le defilement, sur une piste courte. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .hero { height: calc(100svh + 260px); margin-top: 8px; }

  /* le carrousel va bord a bord des deux cotes : cale sur la marge de section,
     il partait de 28 px a gauche et debordait a droite */
  .lieu-scene { margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge)); }
}

/* ---- Tablettes : la photo de rubrique, glissee au-dessus de sa liste, gardait
   la largeur qu'elle avait dans la colonne de l'ordinateur. Elle prend la
   largeur de la liste, comme au telephone, et retrouve son cadre. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .menu > div > figure { width: auto; max-width: none; margin: 0 0 16px;
    border: 4px solid var(--rouge); box-sizing: border-box; }
  .menu > div > figure img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---- Tablette couchee : les tuiles, calees sur la largeur, devenaient plus
   hautes que l'ecran. On les cale sur la hauteur, la largeur suit le format.
   Meme parti que pour le telephone couche. ---- */
@media (min-width: 701px) and (pointer: coarse) and (orientation: landscape) {
  .lieu-bande figure, .lieu-bande figure.large,
  .lb-scene .lb-bande figure { height: min(70vh, 560px); width: auto; aspect-ratio: 3 / 4; }
  .lieu-scene, .lb-scene { padding-inline: calc((100vw - min(70vh, 560px) * 0.75) / 2); }
}

/* ---- Tablettes : l'accueil se lit centre, comme au telephone. Les titres, le
   texte et les boutons restaient cales a gauche sur toute la largeur de
   l'ecran, ce qui les faisait paraitre poses de travers. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .bloc-texte { text-align: center; }
  /* les paragraphes sont brides a 60 caracteres : sans marges automatiques,
     le bloc restait colle a gauche meme une fois le texte centre */
  .bloc-texte p { margin-inline: auto; }
  .lieu-titre { text-align: center; }
  .carte-tete { text-align: center; }

  /* les traits sous « Entrees », « Plats », « Desserts » vont jusqu'au bord de
     leur photo : le retrait servait aux trois colonnes de l'ordinateur */
  .menu > div { padding-right: 0; }
  .menu h3 { text-align: center; }

  .carte-cta { text-align: center; justify-items: center; }
  .carte-cta-texte { margin-inline: auto; }
  /* le bouton prenait toute la largeur du bloc : il se pose sur sa propre
     largeur, avec de quoi rester une cible confortable au doigt */
  .carte-cta .bouton { width: auto; min-width: 300px; }

  /* l'air entre les hachures et « Le lieu », divise par deux */
  .s-lieu { padding-top: 16px; }
  .lieu-colle { padding-top: 15px; }
}

/* ---- Tablettes : les surtitres sont centres, le trait qui les precedait les
   posait de travers. Et sur les pages sans hero anime, le cachet prend sa
   place a gauche de la nav, le titre de page se decale d'autant. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .sur-titre::before { content: none; }
  .lieu-titre small::before { content: none; }

  html.logo-fixe .nav .nav-logo { display: block; width: 46px; height: 46px; }
  html.logo-fixe .nav-titre { transform: translateX(58px); transition: none; }
}

/* ---- Tablettes : le cachet quitte le hero et vient se poser dans la nav,
   comme au telephone et a l'ordinateur. Il etait reste statique : les regles
   qui font voler le logo n'existaient qu'aux deux extremites. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .hero .logo { display: none; }
  .logo-vol { display: block; position: absolute; z-index: 11; left: 50%; top: 50%;
    width: clamp(200px, 29vw, 340px); height: auto; margin: 0; translate: -50% -50%;
    transform-origin: center; will-change: transform;
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .28)); pointer-events: none; }
  .nav .nav-logo { display: block; width: 46px; height: 46px; }
  .nav-titre { left: 0; transition: transform .5s var(--ease); }
  html.logo-pose .nav-titre { transform: translateX(58px); }
}