/* ============================================================
   BOUILLON SALEYA — page « Le bouillon »
   Reprend la DNA de l'accueil : blanc, un seul rouge, lisere 4 px,
   Montserrat Black, personnages qui sortent des traits.
   ============================================================ */
.page-interne .nav .nav-logo { opacity: 1; }

/* ---- Hero photo : le meme cadre que l'accueil, sans video ni logo, la photo fixe ---- */
.hero--photo { height: auto; }
.hero--photo .hero-cadre { position: relative; top: auto; }
.hero-img--photo { opacity: 1 !important; transform: none !important; object-position: 50% 32%; }
.hero-voile--photo { opacity: 1; background: linear-gradient(to top, rgba(28, 8, 6, .55) 0%, rgba(28, 8, 6, .18) 45%, rgba(28, 8, 6, 0) 75%); }
.hero--photo .hero-titre { opacity: 1; visibility: visible; }
/* le degrade sous les textes est retire en desktop (le voile pleine hauteur
   suffit), mais gardé sur telephone ou les photos claires mangent le texte */
@media (min-width: 701px) { .hero--photo .hero-titre::before { content: none; } }
@media (min-width: 1024px) {
  /* la photo est en portrait : on la montre entiere, calee a droite, et le mur ocre se prolonge a gauche sous le titre */
  .hero--photo .hero-cadre { background: linear-gradient(180deg, #EFB967 0%, #F3C67C 38%, #ECCB9E 70%, #E5C39B 100%); }
  .hero-img--photo { left: auto; right: 0; width: auto; height: 100%; object-fit: contain; object-position: right center; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 200px); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 200px); }
  .hero--photo .hero-titre-h { font-size: clamp(38px, 5.4vw, 86px); }
  .hero--photo .hero-titre-h .mot-ligne { display: block; }
}
@media (max-width: 1023px), (pointer: coarse) {
  .hero--photo { height: auto; }
  .hero--photo .hero-cadre { position: relative; }
  .hero-img--photo { object-position: 50% 30%; }
}

/* ---- Ancien hero interne (conserve pour le lede) ---- */
.lb-hero { margin: 0 calc(var(--cadre) + var(--marge)); padding: clamp(24px, 3.5vw, 48px) 0 0; }
.lb-hero .lieu-titre { font-size: clamp(34px, 5.15vw, 80px); }
.lb-lede { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px clamp(40px, 6vw, 96px); align-items: end; margin-top: clamp(28px, 3.5vw, 48px); }
.lb-lede p { margin: 0; max-width: 40ch; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: #2B2320; }
.lb-lede sup { font-size: .6em; }
.lb-note { display: inline-flex; align-items: center; gap: 14px; justify-self: end; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.lb-note i { display: block; width: 7px; height: 7px; background: var(--rouge); transform: rotate(45deg); }
.lb-photo { position: relative; margin: clamp(32px, 4vw, 56px) 0 0; border: 4px solid var(--rouge); aspect-ratio: 21 / 9; background: #f3efe9; }
.lb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-photo figcaption { position: absolute; left: -4px; bottom: -4px; z-index: 1; padding: 10px 16px 6px 0; background: #fff; color: var(--rouge); border-top: 4px solid var(--rouge); border-right: 4px solid var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; line-height: 1.3; }
.lb-photo-cache { position: absolute; inset: 0; overflow: hidden; }

/* ---- Sections communes ---- */
.s-histoire, .s-regles, .s-infos, .s-faq, .lb-cta { margin: 0 calc(var(--cadre) + var(--marge)); padding: clamp(56px, 7vw, 96px) 0 0; }
.s-histoire { padding-top: clamp(40px, 5vw, 64px); }
.titre-2l { max-width: none; text-wrap: initial; }
.s-histoire .sur-titre { display: flex; position: relative; z-index: 1; }
.s-histoire .titre-boite { margin-top: 18px; }
.s-histoire .carte-tete { padding-top: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .s-histoire .carte-tete { padding-top: 23px; } .s-histoire .scene { bottom: 6px; } }
.lb-maison.s-bouillon { padding-top: clamp(40px, 5vw, 72px); }
.lb-cta { padding-top: clamp(40px, 5vw, 64px); }
.lb-cta .carte-cta { margin-top: 0; }

/* ---- L'histoire : trois reperes entre deux filets ---- */
.lb-dates { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--rouge); border-bottom: 4px solid var(--rouge); }
.lb-dates li { padding: 30px 28px 34px; border-left: 2px solid var(--rouge); color: #2B2320; }
.lb-dates li:first-child { border-left: 0; }
.lb-dates b { display: block; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lb-dates h3 { margin: 16px 0 8px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.lb-dates li.est-actif { background: var(--rouge); color: #fff; }
.lb-dates li.est-actif b, .lb-dates li.est-actif h3 { color: #fff; }
.lb-dates p { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 15.5px; line-height: 1.6; }


/* ---- Infos pratiques : la semaine, puis trois cases ---- */
.s-infos .semaine { margin-top: clamp(28px, 3.5vw, 44px); }
.lb-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.lb-info { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 26px 28px; border: 4px solid var(--rouge); color: #2B2320; }
.lb-info i { font-style: normal; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.lb-info b { display: block; margin: 16px 0 10px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.1; }
.lb-info p, .lb-info ul { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.6; }
.lb-info ul { padding: 0; list-style: none; }
.lb-info li { position: relative; padding-left: 18px; }
.lb-info li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--rouge); transform: rotate(45deg); }
.lb-info .bouton { margin-top: auto; padding-top: 17px; padding-bottom: 17px; }
.lb-info p + .bouton { margin-top: 24px; }

/* ---- Questions frequentes : filets rouges, croix qui tourne ---- */
.lb-faq { margin-top: clamp(24px, 3vw, 36px); border-bottom: 4px solid var(--rouge); }
.lb-faq details { border-top: 2px solid var(--rouge); }
.lb-faq details:first-child { border-top-width: 4px; }
.lb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .04em; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.lb-faq summary::-webkit-details-marker { display: none; }
.lb-faq summary:focus-visible { outline: 2px solid var(--rouge); outline-offset: 6px; }
.lb-faq summary em { position: relative; flex: none; width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.lb-faq summary em::before, .lb-faq summary em::after { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 4px; background: var(--rouge); }
.lb-faq summary em::after { transform: rotate(90deg); }
.lb-faq details[open] summary em { transform: rotate(45deg); }
.lb-faq-corps { overflow: hidden; }
.lb-faq-corps p { margin: 0; padding: 0 0 26px; max-width: 64ch; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 15.5px; line-height: 1.65; color: #2B2320; }

/* ---- Desktop : survols et entrees ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lb-dates li, .lb-info { transition: background-color .28s var(--ease); }
  .lb-dates li *, .lb-info * { transition: color .28s var(--ease), border-color .28s var(--ease); }
  .lb-dates li:hover { background: var(--rouge); color: #fff; }
  .lb-dates li:hover b, .lb-dates li:hover h3 { color: #fff; }
  .lb-dates li.reveal, .lb-info.reveal, .lb-faq details.reveal { transition-delay: calc(var(--i, 0) * .08s); }
  .lb-dates li.is-visible, .lb-info.is-visible { transition-delay: 0s; }
  .lb-photo.reveal img { transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
  .lb-photo.reveal.is-visible img { transform: none; }
  .lb-faq summary { transition: color .28s var(--ease); }
  .lb-faq summary:hover { color: #2B2320; }
  .lb-faq summary:hover em::before, .lb-faq summary:hover em::after { background: #2B2320; }
  .lb-faq summary em::before, .lb-faq summary em::after { transition: background-color .28s var(--ease); }
}

/* ---- Tablette et mobile ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .lb-hero { padding-top: 16px; }
  .lb-hero .lieu-titre { font-size: clamp(32px, 8vw, 56px); }
  .lb-lede { grid-template-columns: 1fr; gap: 16px; }
  .lb-note { justify-self: start; }
  .lb-photo { aspect-ratio: 4 / 3; }
  .lb-dates { grid-template-columns: 1fr; border-top-width: 3px; border-bottom-width: 3px; }
  .lb-dates li { border-left: 0; border-top: 2px solid var(--rouge); padding: 22px 0 26px; }
  .lb-dates li:first-child { border-top: 0; }
  .lb-infos { grid-template-columns: 1fr; gap: 12px; }
  .lb-info { padding: 22px 20px 24px; }
  .lb-info .bouton { width: 100%; }
  .s-histoire, .s-regles, .s-infos, .s-faq { padding-top: 48px; }
  .s-histoire { padding-top: 40px; }
  .lb-cta { padding-top: 36px; }
}
@media (max-width: 700px) {
  .lb-photo { aspect-ratio: 3 / 4; }
  .lb-faq summary { padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) { .lb-photo.reveal img { transform: none; transition: none; } }

/* ---- Ce qui fait un bouillon : quatre gestes, joues par les personnages de la maison, dans le tableau de la semaine ---- */
.s-regles .sur-titre { display: flex; }
.s-regles { padding-top: 22px; }
@media (max-width: 1023px), (pointer: coarse) { .s-regles { padding-top: 18px; } }
.lb-gestes-titre { font-size: clamp(30px, 4.6vw, 74px); }
@media (max-width: 1023px), (pointer: coarse) { .lb-gestes-titre { white-space: normal; font-size: clamp(30px, 8vw, 46px); } }
.lb-quatre { list-style: none; margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 4px solid var(--rouge); border-bottom: 4px solid var(--rouge); }
.lb-quatre li { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 22px 28px; border-left: 2px solid var(--rouge); color: #2B2320; }
.lb-quatre li:first-child { border-left: 0; }
.lb-geste-scene { position: relative; height: 210px; margin: 0 -22px 22px; border-bottom: 2px solid var(--rouge); overflow: hidden; background: #fff; }
.lb-geste-perso { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 172px; width: auto; }

.lb-geste-perso--chef { height: 190px; }
.lb-geste-perso--serveur { height: 186px; }
.lb-geste-perso--prix { height: 210px; }
.lb-geste-perso--client { height: 150px; }
.lb-geste-cachet { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150px; height: 150px; transform: rotate(-8deg); }
.lb-quatre b { display: block; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: -.01em; }
.lb-quatre h3 { margin: 12px 0 8px; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.lb-quatre p { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lb-quatre li.reveal { transition-delay: calc(var(--i, 0) * .1s); }
  .lb-quatre li.is-visible { transition-delay: 0s; }
  .lb-geste-cachet { transition: transform .5s var(--ease-out); }
  .lb-quatre li:hover .lb-geste-cachet { transform: rotate(0deg) scale(1.06); }
}
@media (max-width: 1023px), (pointer: coarse) {
  .lb-quatre { grid-template-columns: 1fr 1fr; border-top-width: 3px; border-bottom-width: 3px; }
  .lb-quatre li { border-left: 0; border-top: 2px solid var(--rouge); padding: 0 14px 22px; }
  .lb-quatre li:nth-child(-n+2) { border-top: 0; }
  .lb-quatre li:nth-child(even) { border-left: 2px solid var(--rouge); }
  .lb-geste-scene { height: 150px; margin: 0 -14px 16px; }
  .lb-geste-perso { height: 130px; }

  .lb-geste-perso--chef { height: 140px; }
  .lb-geste-perso--serveur { height: 136px; }
  .lb-geste-perso--prix { height: 152px; }
  .lb-geste-perso--client { height: 110px; }
  .lb-geste-cachet { width: 110px; height: 110px; }
  .lb-quatre b { font-size: 30px; }
  .lb-quatre p { font-size: 14px; }
}
@media (max-width: 700px) {
  .lb-quatre { grid-template-columns: 1fr; }
  .lb-quatre li { border-left: 0 !important; border-top: 2px solid var(--rouge); }
  .lb-quatre li:first-child { border-top: 0; }
}

.lb-quatre li { background: var(--rouge); }
.lb-quatre b, .lb-quatre h3, .lb-quatre p { color: #fff; }
.lb-geste-scene { margin-bottom: 0; padding-bottom: 22px; }
.lb-quatre li { border-left-color: #fff; padding-top: 22px; }
.lb-geste-scene { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.lb-quatre li { padding-top: 0; }
.lb-quatre b { margin-top: 22px; }
.lb-quatre { border-bottom: 0; }
.lb-quatre li:not(:first-child) .lb-geste-scene { box-shadow: -2px 0 0 var(--rouge); }
.s-histoire { padding-top: 26px; }
@media (max-width: 1023px), (pointer: coarse) { .s-histoire { padding-top: 22px; } }

/* ---- La maison : une bande de photos bord a bord, sans cadre ---- */
.lb-mur-photos { margin: clamp(48px, 6vw, 80px) 0 0; }
.lb-mur-titre { margin: 0 calc(var(--cadre) + var(--marge)) clamp(20px, 2.4vw, 30px); font-size: clamp(30px, 4.6vw, 74px); }
.lb-bande { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.lb-bande figure { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.lb-bande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-bande figcaption { position: absolute; left: 0; bottom: 0; padding: 9px 14px; background: #fff; color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lb-bande img { transition: transform 1.2s var(--ease-out); }
  .lb-bande figure:hover img { transform: scale(1.05); }
}
@media (max-width: 1023px), (pointer: coarse) { .lb-bande { grid-template-columns: 1fr 1fr; } .lb-mur-titre { white-space: normal; font-size: clamp(28px, 8vw, 44px); } }

.s-histoire { padding-top: 22px; }
.lb-mur-photos { margin-top: clamp(36px, 4vw, 56px); }
.lb-mur-tete { position: relative; margin: 0 calc(var(--cadre) + var(--marge)) clamp(20px, 2.4vw, 30px); }
.lb-mur-tete .sur-titre { display: flex; }
.lb-mur-tete .titre-boite { margin-top: 18px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-mur-tete { padding-top: 23px; } .lb-mur-tete .scene { bottom: 6px; } }
.lb-gestes-titre { font-size: clamp(28px, 3.7vw, 60px); }
.lb-mur-photos { margin-top: 76px; }
.lb-bande { margin: 0 calc(var(--cadre) + var(--marge)); border: 4px solid var(--rouge); }
.lb-bande figure + figure { border-left: 4px solid var(--rouge); }
.lb-bande figcaption { background: var(--rouge); color: #fff; }
.lb-mur-tete .sur-titre { transition: opacity .35s var(--ease); }
.lb-mur-tete .sur-titre.masque { opacity: 0; }
.lb-mur-tete .sur-titre { display: inline-flex; }
.lb-mur-tete .sur-titre { position: relative; z-index: 2; background: #fff; padding-right: 10px; }
.lb-mur-photos { margin-top: 96px; }
.lb-mur-tete .titre-boite { display: table; }
.lb-bande { gap: 14px; border: 0; }
.lb-bande figure { border: 4px solid var(--rouge); }
.lb-bande figure + figure { border-left: 4px solid var(--rouge); }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-mur-tete { padding-top: 8px; } }
.lb-mur-photos { margin-top: 104px; }
.lb-bande figcaption { display: none; }
.lb-infos-tete { position: relative; }
.lb-infos-titre { display: table; padding: 10px; background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, #fff 4px 6.5px); }
.lb-infos-titre span { display: block; padding: 12px 18px 14px; background: #fff; color: var(--rouge); }
.lb-chef2 { width: 131px; height: 180px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-infos-tete { padding-top: 23px; } .lb-infos-tete .scene { bottom: 6px; } }
.lb-infos-titre span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-infos-tete .scene { height: 300px; } .lb-infos-tete { padding-top: 70px; } }
.lb-infos-titre span { background: var(--rouge); color: #fff; }
.s-infos { padding-top: 26px; }
.s-infos .semaine { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-infos-tete .scene { bottom: 44px; } }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-infos-tete { padding-top: 96px; } .lb-infos-tete .scene { bottom: 30px; } }
.s-infos { padding-top: 8px; }
.lb-infos-titre { background: none; padding: 0; border: 0; }
.lb-infos-titre { border: 3px solid var(--rouge); padding: 10px 16px 12px; background: #fff; }
.lb-infos-titre span { background: none; color: var(--rouge); padding: 0; }
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .lb-infos-tete { padding-top: 120px; } .lb-infos-tete .scene { bottom: 22px; } }
.s-infos .lb-infos { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) { .lb-dates li:hover { background: none; } .lb-dates li:hover b, .lb-dates li:hover h3 { color: var(--rouge); } .lb-dates li:hover p { color: #2B2320; } .lb-dates li.est-actif:hover { background: var(--rouge); } .lb-dates li.est-actif:hover b, .lb-dates li.est-actif:hover h3, .lb-dates li.est-actif:hover p { color: #fff; } }

/* ---- Mobile : le titre des infos pratiques doit revenir a la ligne dans son cadre ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .lb-infos-titre span { white-space: normal; }
  .lb-infos-titre { font-size: clamp(26px, 7vw, 44px); max-width: 100%; }
}

/* ================= TELEPHONE : refonte de la page ================= */
@media (max-width: 700px) , (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) , (min-width: 701px) and (pointer: coarse) {
  /* --- l'histoire : tout centre --- */
  .lb-dates li { text-align: center; }
  .lb-dates li p { margin-left: auto; margin-right: auto; }

  /* --- le mur de photos --- */
  /* le personnage marcheur est une mecanique desktop */
  .lb-mur-tete .scene, .lb-infos-tete .scene { display: none; }
  .lb-mur-tete, .lb-infos-tete { padding-top: 0; }

  /* le mur de photos reprend le carrousel de l'accueil : une image centree,
     une coupee de chaque cote, boucle infinie. Le quinconce precedent
     debordait de l'ecran et coupait les legendes. */
  /* la section est deja pleine largeur : une marge negative de plus la faisait
     deborder de 16 px a droite, et decalait d'autant le centrage des tuiles */
  .lb-scene { margin: var(--ecart) 0 0;
    padding-inline: 13vw; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lb-scene::-webkit-scrollbar { display: none; }
  .lb-bande { display: flex; width: max-content; gap: 16px; margin: 0; }
  .lb-bande figure { flex: none; width: 74vw; margin: 0; aspect-ratio: 3 / 4;
    scroll-snap-align: center; border: 4px solid var(--rouge); box-sizing: border-box; overflow: hidden; }
  .lb-bande figure img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: none; }
  .lb-bande figure::after { content: none; }
  .lb-bande figcaption { display: none; }

  /* --- infos pratiques : tout centre --- */
  .lb-infos { text-align: center; }
  .lb-info { align-items: center; }
  .lb-info ul { list-style: none; padding: 0; text-align: center; }
  .lb-info .bouton { width: 100%; }
  /* le numero est cliquable mais reste aux couleurs du theme : iOS le peignait
     en bleu, la meta format-detection l'en empeche desormais */
  .lb-tel { color: inherit; -webkit-text-fill-color: currentColor; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-bande figure img, .lb-bande figcaption { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Telephone : le meme ecart vertical partout, comme sur l'accueil ---- */
@media (max-width: 700px) {
  .s-histoire { padding-top: var(--ecart); }
  .s-histoire > h2 { margin-top: 0; }
  .lb-mur-photos { padding-top: var(--ecart); }
  .lb-mur-tete { margin-top: 0; padding-top: 0; }
  .s-infos { padding-top: var(--ecart); }
  .lb-infos-tete { padding-top: 0; }
  .s-infos .lb-infos { margin-top: var(--ecart); }
  .lb-cta { padding-top: var(--ecart); }
  .s-cloture { padding-top: var(--ecart); }
}

/* ---- Telephone : marges heritees du desktop qui creusaient la page ---- */
@media (max-width: 700px) {
  .lb-mur-photos { margin-top: 0; }     /* 104px herites, la section decrochait */
  .lb-dates li:last-child { padding-bottom: 0; }
  .lb-infos { gap: var(--ecart); }
}

/* ---- Telephone : rembourrages et lisibilite ---- */
@media (max-width: 700px) {
  /* le bloc des dates n'avait aucun rembourrage lateral ni bas : le texte
     touchait les bordures */
  .lb-dates li { padding: 24px 22px; }
  .lb-dates li:last-child { padding-bottom: 24px; }

  /* liste a puces centree : la puce en position absolue restait a gauche du
     bloc, loin du texte. Elle passe dans le flux, collee au mot. */
  .lb-info li { padding-left: 0; }
  .lb-info li::before { position: static; display: inline-block; margin-right: 9px; vertical-align: middle; top: auto; }

  /* un bloc a hachures pour rompre la suite de fonds blancs : le contenu
     reste sur blanc pour rester lisible */
  .lb-info--raye { position: relative; background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); padding: 24px; }
  .lb-info--raye::before { content: ""; position: absolute; inset: 11px; background: #fff; }
  .lb-info--raye > * { position: relative; }
}

/* ---- Telephone : ce titre est plus long que les autres, il lui faut sa
   propre taille pour tenir sur deux lignes ---- */
@media (max-width: 700px) {
  .carte-tete .lb-infos-titre { font-size: clamp(19px, 6.4vw, 30px); }
}

/* ---- Telephone : les dates forment un bloc encadre, comme les horaires de
   l'accueil. Le premier sur blanc, le deuxieme en hachures, le dernier en
   rouge plein. ---- */
@media (max-width: 700px) {
  .lb-dates { border: 3px solid var(--rouge); }
  .lb-dates li { border-left: 0; border-top: 2px solid var(--rouge); }
  .lb-dates li:first-child { border-top: 0; }
  /* le bloc du milieu : hachures au pourtour, contenu sur panneau blanc pour
     rester lisible */
  .lb-dates li:nth-child(1) { position: relative; background: repeating-linear-gradient(135deg, var(--rouge) 0 4px, transparent 4px 6.5px); padding: 26px 24px; }
  .lb-dates li:nth-child(1)::before { content: ""; position: absolute; inset: 11px; background: #fff; }
  .lb-dates li:nth-child(1) > * { position: relative; }

  /* Telephone et Bon a savoir retires : la section etait trop chargee. Le
     numero reste accessible par le pied de page. */
  .lb-infos > .lb-info:nth-child(2), .lb-infos > .lb-info:nth-child(3) { display: none; }
}

/* ---- Le plan du Vieux-Nice dans le bloc adresse, hors desktop uniquement.
   Le cadre du plan mord un peu sur le rembourrage du bloc : il respire plus
   large que le texte sans toucher le bord. ---- */
.plan { display: none; }
@media (max-width: 1023px), (pointer: coarse) {
  /* sans cadre : le bloc s'aligne sur les marges de la page et le plan gagne
     toute la largeur que le cadre lui prenait */
  /* le titre des photos heritait d'une marge de 18 px qui doublait l'ecart :
     au-dessus comme au-dessous, on tient les 24 px */
  .lb-mur-tete .titre-section { margin-top: 0; }
  /* le texte d'acces se rapproche de l'adresse, qui lui sert de titre */
  .s-infos .lb-infos { margin-top: 10px; }

  .s-infos .lb-info { border: 0; padding: 0; }
  /* l'adresse est passee en titre de section : le sur-titre et le nom du bloc
     feraient doublon, deux lignes plus bas */
  .s-infos .lb-info > i, .s-infos .lb-info > b { display: none; }
  .carte-tete .lb-infos-titre { font-size: clamp(23px, 7.18vw, 34px); }

  .s-infos .lb-info:first-child .bouton {
    display: block; text-align: center;
    background: #fff; border: 2px solid var(--rouge);
    color: var(--rouge); -webkit-text-fill-color: var(--rouge);
  }

  .plan { display: block; position: relative; margin: 20px 0; border: 2px solid var(--rouge); background: #fff; line-height: 0; }
  .plan-trace { position: relative; }
  .plan svg { display: block; width: 100%; height: auto; }

  .plan-etiq { position: absolute; transform: translate(-50%, -50%); color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 9.5px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff, 0 0 8px #fff; }

  /* la cible fait 74px : on tape sur l'immeuble sans viser */
  .plan-lien { position: absolute; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
  .plan-nom { position: absolute; left: 50%; bottom: calc(100% - 5px); transform: translateX(-50%); background: var(--rouge); color: #fff; -webkit-text-fill-color: #fff; padding: 5px 9px 4px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 800; font-size: 10px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .plan-nom::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--rouge); }

  /* une main qui montre : le curseur arrive, tape deux fois, s'efface. Joue une
     seule fois a l'apparition du plan, et jamais si l'appareil demande le calme */
  .plan-onde, .plan-curseur { position: absolute; pointer-events: none; opacity: 0; }
  .plan-onde { left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--rouge); border-radius: 50%; }
  .plan-curseur { left: 50%; top: 50%; width: 21px; height: 21px; line-height: 0; }
  .plan-curseur svg { display: block; }
  .plan.vu .plan-onde { animation: plan-onde .95s ease-out 1.42s 1 both; }
  .plan.vu .plan-curseur { animation: plan-curseur 3.1s ease-out .55s 1 both; }
  @keyframes plan-onde {
    0% { transform: scale(.3); opacity: 0; }
    18% { opacity: .8; }
    100% { transform: scale(2.1); opacity: 0; }
  }
  @keyframes plan-curseur {
    0% { opacity: 0; transform: translate(19px, 19px) scale(1); }
    16% { opacity: 1; transform: translate(7px, 7px) scale(1); }
    28% { transform: translate(7px, 7px) scale(.78); }
    38% { transform: translate(7px, 7px) scale(1); }
    52% { transform: translate(7px, 7px) scale(.78); }
    62% { opacity: 1; transform: translate(7px, 7px) scale(1); }
    88% { opacity: 1; transform: translate(7px, 7px) scale(1); }
    100% { opacity: 0; transform: translate(13px, 13px) scale(1); }
  }

  .plan-echelle { position: absolute; right: 10px; bottom: 9px; padding-top: 4px; width: 16.7%; border-top: 2px solid var(--rouge); color: var(--rouge); font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 9px; line-height: 1.2; letter-spacing: .1em; text-align: center; pointer-events: none; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff; }

  .plan-trace, .plan-etiq, .plan-lien, .plan-echelle { opacity: 0; transition: opacity .6s var(--ease-out, ease-out); }
  .plan-etiq, .plan-lien, .plan-echelle { transition-delay: .22s; }
  .plan.vu .plan-trace, .plan.vu .plan-etiq, .plan.vu .plan-lien, .plan.vu .plan-echelle { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-trace, .plan-etiq, .plan-lien, .plan-echelle { opacity: 1 !important; transition: none !important; }
  .plan-onde, .plan-curseur { display: none !important; animation: none !important; }
}

/* ---- Juste au-dessus du seuil des tablettes, le titre des infos pratiques
   tient sur une ligne forcee de 1001 px : il sortait de l'ecran a 1024 px de
   large. On le laisse revenir a la ligne tant que la place manque. ---- */
@media (min-width: 1024px) and (max-width: 1340px) {
  .lb-infos-titre span { white-space: normal; }
}

/* ---- Ordinateur : le mur de photos devient la meme traversee que l'accueil.
   La grille a quatre colonnes laissait la cinquieme photo seule a la ligne. ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lb-mur-photos.figee { height: calc(100vh + var(--course, 900px)); margin: 0; }
  /* le serveur du titre depasse vers le haut : c'est la scene des photos qui
     coupe, pas le bloc colle, sinon on lui rognait la tete */
  .lb-colle { position: sticky; top: 0; height: 100vh; background: #fff; z-index: 2;
    display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: center;
    /* le serveur monte 68 px au-dessus du titre : sans cette reserve il sortait
       du bloc colle et passait sur le cartouche des dates */
    padding: 104px calc(var(--cadre) + var(--marge)) 40px; }
  .lb-colle .lb-mur-tete { margin: 0; }
  .lb-scene-dk { position: relative; overflow: hidden; margin: 28px 0 0; background: #fff; }
  .lb-mur-photos.figee .lb-bande { position: absolute; inset: 0; height: 100%;
    display: flex; gap: 16px; width: max-content; margin: 0; border: 0;
    will-change: transform; }
  .lb-mur-photos.figee .lb-bande figure { flex: none; height: 100%; width: clamp(240px, 24vw, 380px);
    aspect-ratio: auto; border: 4px solid var(--rouge); box-sizing: border-box; }

}

/* ---- Le numero se lit comme les autres titres : rouge, sans le bleu ni le
   soulignement que le navigateur pose sur un lien non style. ---- */
.lb-tel, .lb-tel:visited, .lb-tel:focus, .lb-tel:active {
  color: var(--rouge); -webkit-text-fill-color: var(--rouge); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .lb-tel:hover { text-decoration: none; opacity: .78; } }

/* ---- Ordinateur : le cuisinier avait 240 px au-dessus du titre contre 124 au
   serveur — l'ecart venait du rembourrage herite, laisse tel quel ici. On le
   resserre pour que les deux personnages respirent pareil. ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .lb-infos-tete { padding-top: 98px; }   /* la toque mordait sur les photos du carrousel */
}

/* ---- Le moyen de venir sur sa propre ligne : accroche a l'adresse, il faisait
   un pave difficile a parcourir. ---- */
@media (max-width: 1023px), (pointer: coarse) {
  .s-infos .lb-info p > span { display: block; }
  .s-infos .lb-info p .acces-transport { margin-top: 6px; }
}

/* ---- Ordinateur : la traversee est collee avec un z-index 2 et recouvrait la
   section suivante — elle coupait la tete du cuisinier, qui depasse vers le
   haut. La section des infos passe donc devant. ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .s-infos { position: relative; z-index: 3; }
}

/* ---- Tablettes : le meme traitement tactile qu'un telephone, a leur echelle.
   Sans cela le mur de photos restait en grille alors que le carrousel etait
   bien monte, et les cartouches des dates perdaient leur rembourrage. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .lb-dates li { padding: 26px 30px 30px; }

  .lb-scene { margin: var(--ecart, 24px) 0 0; padding-inline: 12vw;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lb-scene::-webkit-scrollbar { display: none; }
  .lb-mur-photos > .lb-scene > .lb-bande,
  .lb-scene .lb-bande { display: flex; grid-template-columns: none; width: max-content;
    gap: 16px; margin: 0; border: 0; }
  .lb-scene .lb-bande figure { flex: none; width: 62vw; aspect-ratio: 3 / 4;
    scroll-snap-align: center; border: 4px solid var(--rouge); box-sizing: border-box; overflow: hidden; }
  .lb-scene .lb-bande figcaption { display: none; }

  /* le plan tenait presque mille pixels de haut : on le ramene a une hauteur
     lisible, l'emprise reste la meme */
  .plan { max-height: min(62vh, 560px); overflow: hidden; }
  .plan-trace svg { height: min(62vh, 560px); width: auto; max-width: none; margin: 0 auto; display: block; }
}

/* ---- Tablettes : les titres encadres restaient a gauche au-dessus d'un texte
   centre. On les centre, comme tout le reste de la page tactile. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .lb-mur-tete .titre-boite, .lb-infos-tete .titre-boite { margin-inline: auto; }
  .lb-mur-tete, .lb-infos-tete { text-align: center; }
  .lb-mur-tete .sur-titre, .lb-infos-tete .sur-titre { justify-content: center; }
}

/* ---- Tablettes : le bloc pratique. Le titre touchait presque le carrousel,
   les boutons faisaient toute la largeur face a un plan etroit, et les quatre
   reperes s'empilaient en colonne alors qu'il y a la place pour deux. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .s-infos { padding-top: 40px; }

  /* le plan gagne en largeur : cale sur la hauteur, il ne prenait qu'un peu
     plus de la moitie du bloc */
  .plan { max-height: 76vh; }
  .plan-trace svg { height: 76vh; }

  .lb-info .bouton { width: auto; min-width: 300px; }

  .lb-info ul { display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; gap: 10px 44px; text-align: left; }
  .lb-info li { padding-left: 18px; }
  .lb-info li::before { position: absolute; left: 0; top: .62em;
    display: block; margin-right: 0; vertical-align: baseline; }
}

/* ---- Tablettes : le mur de photos suivait le bloc de Nice de tres loin. Il
   se cale sur l'ecart du bloc pratique. Et sous le plan, les deux boutons se
   posent cote a cote : le texte qui les separait passe dessous. ---- */
@media (min-width: 701px) and (pointer: coarse) {
  .lb-mur-photos { margin-top: 40px; }

  .lb-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    width: 100%; max-width: 620px; margin: 24px auto 0; }
  .lb-boutons .bouton { width: auto; min-width: 0; margin: 0; }
}