/* Site par Orz · Dylan · NoemaWorks · https://noemaworks.net
   sections.css : les onze sections de la page d'accueil, la carte, les credits. */

/* ============================================================ 5.1  HERO */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: calc(var(--nav-h) + 32px) 148px;
}

.hero__media {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

/* voiles strictement lineaires : jamais radial, jamais de vignette.
   Le voile du bas est celui du contrat ; celui de gauche porte la colonne
   de texte au contraste AA par-dessus une photo tres lumineuse. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgb(14 10 10 / .84) 0%,
      rgb(14 10 10 / .62) 30%,
      rgb(14 10 10 / .18) 52%,
      rgb(14 10 10 / 0) 66%),
    linear-gradient(to top,
      rgb(14 10 10 / .55) 0%,
      rgb(14 10 10 / .30) 26%,
      rgb(14 10 10 / 0) 62%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  align-items: center;
}

.hero__copy { grid-column: 1 / span 7; }

.hero__copy .kicker { color: var(--lantern); }

.hero h1 { margin-bottom: 26px; max-width: 14ch; }

.hero .lead {
  color: var(--text-on-ink);
  max-width: 40ch;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-bottom: 28px;
}

.hero__actions .tel-link {
  font-size: 1.125rem;
  color: var(--lantern);
  min-height: 48px;
  align-items: center;
}

/* pastille horaires en direct */
.hours-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--text-muted-on-ink);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.hours-pill[data-open="true"] {
  color: var(--lantern);
  border-color: rgb(242 179 58 / .45);
}

.hours-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

#dragon-anchor-hero {
  grid-column: 8 / span 5;
  justify-self: center;
  align-self: center;
  width: min(32vw, 460px);
  aspect-ratio: 1.283;
}

.hero__foot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.hero__counters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: .9375rem;
  color: var(--text-muted-on-ink);
  font-variant-numeric: tabular-nums;
}

.hero__counters b {
  font-weight: 400;
  color: var(--lantern);
}

.hero__counters .sep { color: var(--line-on-ink); }

.roar-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--text-on-ink);
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.roar-btn__mark {
  width: 18px;
  height: 14px;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .roar-btn:hover { border-color: var(--lacquer); color: var(--lantern); }
}

/* ======================================================= 5.2  CHIFFRES */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.figure__cell { padding-right: var(--gutter); }

.figure__cell + .figure__cell {
  border-left: 1px solid var(--line-on-rice);
  padding-left: clamp(20px, 3vw, 48px);
}

.figure__value { color: var(--text-on-rice); }

.figure__label {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .06em;
  color: var(--lantern-deep);
  max-width: 18ch;
}

.sakura-rule {
  width: 64px;
  height: 2px;
  background: var(--sakura);
  margin-top: clamp(32px, 4vw, 56px);
}

/* ======================================================== 5.2b CONCEPT */

#concept {
  padding-top: clamp(56px, 7vw, 96px);
  overflow: visible;
}

.concept__grid { align-items: start; }

.concept__text { grid-column: 1 / span 6; }

.concept__text h2 {
  font-size: clamp(2.25rem, 4vw, 4.25rem);
  margin-bottom: 28px;
  max-width: 15ch;
}

.concept__text p + p { margin-top: 20px; }

.concept__text p { color: var(--text-muted-on-rice); }

.concept__note {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lantern-deep);
}

.concept__photo {
  grid-column: 8 / span 5;
  margin-top: -80px;
  align-self: start;
}

.concept__photo img {
  width: 100%;
  height: 70vh;
  max-height: 760px;
  object-fit: contain;
  object-position: 50% 100%;
}

/* ======================================================== 5.3  CUISINES */

#cuisines {
  position: relative;
  padding: 0;
  background: var(--ink);
}

/* Repli sans JavaScript : les cinq panneaux s'empilent verticalement et restent
   tous lisibles. La pile superposee (et le pin) n'existent que sous `.od-anim`,
   posee par main.js : jamais de panneau invisible si le script ne tourne pas. */
.coins {
  position: relative;
  width: 100%;
}

.coin {
  position: relative;
  height: 76vh;
  overflow: hidden;
  transform-origin: 50% 100%;
}

/* `.od-anim` est transitoire : main.js la retire des que ses tweens sont batis
   (filet anti-opacite-zero). Elle ne peut donc pas porter une MISE EN PAGE.
   `.is-preloaded` est posee une fois pour toutes par preloader-dragon.js : c'est
   elle qui bascule les cinq panneaux en pile superposee pour le pin GSAP. */
.is-preloaded .coins {
  height: 100dvh;
  overflow: hidden;
}

.is-preloaded .coin {
  position: absolute;
  inset: 0;
  height: auto;
}

.coin__media { position: absolute; inset: 0; }

.coin__media img,
.coin__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Boucle video muette sur un panneau : la video couvre l'image fixe, qui reste
   dessous pour le premier rendu et pour qui prefere moins de mouvement. */
.coin__media video {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .coin__media video,
  .alaune__video { display: none; }
}

.coin__kicker {
  position: absolute;
  /* grossi, il arrivait a seize pixels de l'etiquette du morceau en cours :
     on lui laisse de l'air pour que les deux lignes ne se disputent pas */
  top: calc(var(--nav-h) + 48px);
  right: var(--edge);
  margin: 0;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--lantern);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Le socle prend la hauteur du mot, avec de l'air au-dessus et au-dessous.
   Avant, la bande faisait 128 px fixes et le mot 11vw : a 1920 px de large le
   mot depassait sa bande et mordait sur la photo, le haut des lettres colle au
   bord de l'image. Dylan : « le texte mord sur l'image, c'est pas assez
   esthetique ». Le mot est un peu moins grand, le socle un peu plus haut, et
   plus rien ne se touche. */
.coin__plinth {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 128px;
  padding-block: clamp(22px, 2.6vw, 38px);
  background: var(--ink);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-inline: var(--edge);
}

.coin__word {
  font-family: var(--font-display);
  font-weight: 750;
  font-stretch: 92%;
  font-size: clamp(3rem, 8.4vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--rice);
  margin: 0;
  white-space: nowrap;
  flex: none;
}

/* L'explication du pays, dans le socle a cote du mot. Le kicker seul, en petit
   dans un coin, ne disait pas assez ce qu'on voit. Dylan : « qu'on voie bien
   ce que ca presente, mettre plus gros les explications de ce que c'est ».
   Elle prend la place qui reste, le mot garde la sienne. */
.coin__detail {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 46ch;
  margin: 0;
  color: var(--rice);
  font-size: clamp(1.0625rem, 1.45vw, 1.5rem);
  line-height: 1.35;
}

@media (max-width: 860px) {
  .coin__plinth {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .coin__detail {
    max-width: none;
    font-size: 1.0625rem;
  }
}

/* ======================================================== 5.4  STATIONS */

#stations {
  position: relative;
  overflow: hidden;
  transition: background-color 400ms var(--ease-out);
  padding-block: calc(var(--nav-h) + 12px) clamp(64px, 7vw, 112px);
}

#stations .marquee { margin-bottom: clamp(24px, 3vw, 40px); }

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-on-ink);
  padding-block: 14px;
  /* les mots se fondent aux deux bouts : aucun ne parait tranche net */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  margin-bottom: clamp(48px, 6vw, 88px);
  -webkit-user-select: none;
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted-on-ink);
}

.marquee__group span { padding-inline: 18px; }
.marquee__group span.dot { color: var(--lacquer); padding-inline: 0; }

.stations__layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--gutter);
  column-gap: 48px; /* la bande de fondu des cartes tient dans cet espace */
  align-items: start;
}

/* Le titre reste au centre de la hauteur de la bande pendant que les cartes
   defilent : la colonne de gauche cesse d'etre un bloc pose en haut avec du
   vide dessous. */
.stations__head { padding-left: var(--edge); align-self: center; }

.stations__head h2 {
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  max-width: 9ch;
  margin-bottom: 20px;
}

.stations__head p {
  color: var(--text-muted-on-ink);
  max-width: 23ch; /* s'arrete avant la bande de fondu des cartes */
}

/* Les cartes sortent par la gauche, juste a cote du titre. Un bord net a cet
   endroit coupe un mot en deux au milieu de l'ecran : on fond la sortie sur
   une bande situee dans la gouttiere, avant la position de repos de la
   premiere carte, qui reste donc entiere quand la bande est immobile. */
.stations__viewport {
  --stations-fondu: 72px;
  /* La bande se tire a la souris et se cale sur une carte entiere. Le
     defilement de la page n'est plus detourne. */
  overflow-x: auto;
  overflow-y: hidden;
  /* Aucun calage automatique : le navigateur ramenait la bande sur une carte
     entiere des qu'on lachait la souris, et ce retour en arriere se voyait.
     La bande s'arrete ou on la pose ; seules les fleches visent une carte. */
  scroll-padding-left: var(--stations-fondu);
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  margin-left: calc(-1 * var(--stations-fondu));
  padding-left: var(--stations-fondu);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--stations-fondu), #000 calc(100% - var(--stations-fondu)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--stations-fondu), #000 calc(100% - var(--stations-fondu)), transparent 100%);
}

.stations__viewport::-webkit-scrollbar { display: none; }

/* pendant le glissement, le calage se tait et le curseur se ferme */
.stations__viewport.est-tire {
  cursor: grabbing;
}

.stations__track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: max-content;
  padding-right: var(--edge);
}

.station {
  flex: none;
  width: 420px;
}

/* Les deux fleches de la bande, sous le titre. Au doigt, la bande se fait
   glisser : elles ne servent qu'a la souris. */
.stations__fleches {
  display: none;
  gap: 12px;
  margin-top: 28px;
}

.stations__fleche {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-ink);
  border-radius: 50%;
  color: var(--text-on-ink);
  background: transparent;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.stations__fleche svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.stations__fleche[hidden] { visibility: hidden; }

@media (min-width: 861px) {
  .stations__fleches { display: flex; }
}

@media (hover: hover) and (pointer: fine) {
  .stations__fleche:hover { border-color: var(--lantern); color: var(--lantern); }
}

/* La section est epinglee : la bande entiere doit tenir dans la hauteur de
   l'ecran, sinon le texte des cartes est coupe en bas. On borne donc la photo
   par la hauteur disponible, deduction faite de la barre de navigation, du
   marquee et du pave de texte. Les neuf cartes ont la meme taille : la bande
   se lit comme une seule ligne. */
.station__media {
  position: relative;
  width: 100%;
  height: clamp(220px, calc(100dvh - 400px), 520px);
  overflow: hidden;
  background: var(--charcoal-2);
}

.station__media img,
.station__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}

/* Boucle video muette sur une carte : elle couvre l'image fixe, qui reste
   dessous pour le premier rendu et pour qui prefere moins de mouvement. */
.station__media video {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .station__media video { display: none; }
}

/* Survol : un lent rapprochement de la photo seule. La carte, elle, ne bouge
   pas : son ressort faisait sauter le cadrage. */
@media (hover: hover) and (pointer: fine) {
  .station:hover .station__media img,
  .station:hover .station__media video { transform: scale(1.05); }
}

.station__index {
  display: block;
  margin: 20px 0 8px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .12em;
  color: var(--lantern);
}

.station h3 { margin-bottom: 8px; color: var(--text-on-ink); }

.station p {
  color: var(--text-muted-on-ink);
  font-size: 1rem;
  max-width: 38ch;
}

/* la station fruits de mer, seule teintee */
.station--mer .station__media { background: var(--sea-deep); }

.station--mer .station__body {
  background: var(--sea-deep);
  color: var(--rice);
  padding: 20px 24px 24px;
}

.station--mer .station__index { color: var(--rice); margin-top: 0; }
.station--mer h3 { color: var(--rice); }
.station--mer p { color: var(--rice); }

/* ========================================================== 5.5  TARIFS */

.tarifs__grid { align-items: start; }

.tarifs__head { grid-column: 1 / span 4; }

.tarifs__head h2 {
  font-size: clamp(2.25rem, 3.6vw, 4rem);
  margin-bottom: 24px;
  max-width: 11ch;
}

.tarifs__note {
  color: var(--text-muted-on-ink);
  font-size: 1rem;
  max-width: 34ch;
  margin-bottom: 28px;
}

.tarifs__body { grid-column: 5 / span 8; }

.tarif-bloc + .tarif-bloc {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line-on-ink);
}

.tarif-bloc h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-stretch: normal;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lantern);
  margin-bottom: 20px;
}

.tarif-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 10px;
}

.tarif-row__label {
  flex: none;
  max-width: 60%;
  color: var(--text-on-ink);
  font-weight: 500;
}

.tarif-row__dots {
  flex: 1 1 auto;
  min-width: 24px;
  border-bottom: 1px dotted var(--line-on-ink);
  transform: translateY(-.35em);
}

.tarif-row__price {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--lantern);
  line-height: 1;
  font-size: clamp(1.375rem, 2vw, 2rem);
}

.tarif-bloc--adulte .tarif-row__price { font-size: var(--fs-price); }
.tarif-bloc--adulte .tarif-row { padding-block: 14px; }

/* La formule qui s'applique a l'heure ou la page est ouverte. Le rouge laque
   du logo n'atteint pas le seuil de contraste en petit texte sur ce fond : la
   couleur vit donc dans une pastille pleine, au couple deja utilise par le
   bouton d'appel. Et la couleur ne porte jamais l'information seule, la ligne
   dit aussi a voix haute quel service elle designe. */
/* Le trait est pose en absolu dans la gouttiere : une marge negative aurait
   elargi la ligne et pousse la page trois pixels au-dela de l'ecran a 360 px. */
.tarif-row.est-en-cours { position: relative; }

.tarif-row.est-en-cours::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--lacquer);
}

.tarif-row.est-en-cours .tarif-row__label {
  max-width: 78%;
  color: var(--rice);
  font-weight: 700;
}

.tarif-row.est-en-cours .tarif-row__dots { border-bottom-color: rgb(226 52 27 / .45); }

.tarif-row__quand {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-family: var(--font-mono);
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Au doigt, la pastille prend sa propre ligne : le libelle et le prix gardent
   leur place et rien ne se retrouve tranche au bord. */
@media (max-width: 700px) {
  /* Le prix ne se comprime jamais : c'est donc au libelle de ceder. Avec une
     largeur maximale figee, il gardait sa place et poussait le prix trois
     pixels hors de l'ecran. Ici il prend ce qui reste et se replie. */
  .tarif-row.est-en-cours .tarif-row__label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow-wrap: break-word;
  }

  .tarif-row.est-en-cours .tarif-row__dots { min-width: 0; }

  /* la pastille prend sa propre ligne, sous le libelle */
  .tarif-row__quand {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 0;
  }
}

.tarifs__emporter-note {
  margin-top: 14px;
  font-size: .9375rem;
  color: var(--text-muted-on-ink);
  max-width: 46ch;
}

.tarifs__link { margin-top: clamp(36px, 4vw, 56px); }

/* ========================================================= 5.6  A LA UNE */

#alaune { overflow: hidden; }

/* Les deux colonnes commencent et finissent a la meme hauteur : le bouton
   d'appel ne descend plus sous les photos. */
.alaune__grid { align-items: stretch; }

/* Deux images cote a cote : la boucle des trompe-l'oeil et la photo des
   verrines. Si le gerant change la photo depuis son espace, content.js retire
   la video et la photo prend toute la largeur. */
.alaune__photo {
  grid-column: 1 / span 7;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: clamp(360px, 34vw, 640px);
}

.alaune__photo img,
.alaune__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.alaune__photo img:only-child {
  grid-column: 1 / -1;
  aspect-ratio: 8 / 5;
}

.alaune__text {
  grid-column: 8 / span 5;
  align-self: center;
}

.alaune__text h3 {
  font-size: clamp(2.25rem, 4.2vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin-bottom: 24px;
}

/* Le sakura ne peut pas porter du texte sur papier de riz (contraste 1,4).
   La touche unique de l'ecran devient donc un filet, comme dans #chiffres. */
.alaune__rule {
  width: 64px;
  height: 2px;
  background: var(--sakura);
  margin-bottom: 22px;
}

/* Le texte occupe toute sa colonne : la marge de droite de la page vaut celle
   de gauche, sans grand vide au bord. */
.alaune__lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-muted-on-rice);
}

.alaune__faits {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lantern-deep);
}

.alaune__faits li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alaune__faits li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lacquer-deep);
  flex: none;
}

.alaune__cta { margin-top: 32px; }

/* Moins de mouvement : la boucle disparait, la photo prend les deux colonnes.
   Cette regle doit rester apres le `display: block` du bloc ci-dessus. */
@media (prefers-reduced-motion: reduce) {
  .alaune__video { display: none; }

  .alaune__photo img {
    grid-column: 1 / -1;
    aspect-ratio: 8 / 5;
  }
}

/* ======================================================== 5.7  GALERIE */

#galerie .kicker { color: var(--lantern-deep); }

#galerie h2 { margin-bottom: clamp(28px, 3.4vw, 56px); }

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: 4px;
  margin-top: clamp(40px, 4vw, 64px);
}

.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--rice);
  padding: 0;
  border-radius: 0;
  cursor: zoom-in;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img { transform: scale(1.05); }
}

/* 72 cellules pleines sur 6 rangees : aucune case vide */
.g-6x2 { grid-column: span 6; grid-row: span 2; }
.g-3x2 { grid-column: span 3; grid-row: span 2; }
.g-4x2 { grid-column: span 4; grid-row: span 2; }
.g-6x1 { grid-column: span 6; }
.g-4x1 { grid-column: span 4; }
.g-3x1 { grid-column: span 3; }

.gallery__more {
  display: none;
  margin-top: 24px;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-on-rice);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .9375rem;
  color: var(--text-on-rice);
}

/* boite lumineuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  background: rgb(14 10 10 / .96);
  padding: clamp(16px, 4vw, 56px);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: grid;
  gap: 16px;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

.lightbox__caption {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--text-muted-on-ink);
  text-align: center;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  color: var(--text-on-ink);
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; margin-top: -26px; }
.lightbox__next { right: 20px; top: 50%; margin-top: -26px; }

@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover,
  .lightbox__prev:hover,
  .lightbox__next:hover { border-color: var(--lantern); color: var(--lantern); }
}

/* ========================================================== 5.8  SOCIAL */

/* Le chiffre et son libelle sur une ligne, alignes sur la base : « 7 M de
   vues sur TikTok » se lit d'un trait, la poignee du compte dessous. */
.social__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 36px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.social__titre {
  display: grid;
  gap: 12px;
  padding-bottom: .12em;
}

.social__figure { color: var(--lantern); }

.social__handle { font-weight: 300; }

.social__head h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  color: var(--text-on-ink);
  max-width: 18ch;
}

.social__handle {
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--text-muted-on-ink);
}

.reels {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding-block: 18px 8px;
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scrollbar-width: thin;
  scrollbar-color: var(--charcoal-2) transparent;
}

.reel {
  flex: none;
  width: 300px;
  scroll-snap-align: center;
}

/* Ecran large : les six videos tiennent dans la grille, alignees sur le titre
   des deux cotes, sans carte coupee a droite. */
@media (min-width: 1200px) {
  .reels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .reel { width: auto; }
}

.reel__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: var(--charcoal-2);
  transition: transform 400ms var(--ease-out);
}

.reel__frame video,
.reel__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--rice);
}

.reel__play span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(14 10 10 / .62);
  border: 1px solid rgb(244 235 221 / .5);
  font-size: 1rem;
  padding-left: 4px;
}

.reel__views {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  color: var(--lantern);
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .reel:nth-child(odd) .reel__frame { transform: rotate(-2deg); }
  .reel:nth-child(even) .reel__frame { transform: rotate(2deg); }
  .reel:hover .reel__frame { transform: rotate(0deg); }
}

.ig {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--line-on-ink);
}

.ig__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 28px;
}

.ig__head h3 { color: var(--text-on-ink); }

.ig__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ig__grid[hidden] { display: none; }

.ig__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--charcoal-2);
  border-radius: var(--radius);
}

.ig__item img { width: 100%; height: 100%; object-fit: cover; }

.ig__legend {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--text-muted-on-ink);
  font-size: .75rem;
  line-height: 1.35;
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .ig__item:hover .ig__legend,
  .ig__item:focus-within .ig__legend { opacity: 1; }
}

/* ============================================================ 5.9  AVIS */

.avis__grid { align-items: start; }

.avis__score { grid-column: 1 / span 4; }

.avis__score .figure-xl { color: var(--text-on-rice); }

.avis__score-label {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .875rem;
  letter-spacing: .06em;
  color: var(--lantern-deep);
  max-width: 20ch;
}

.avis__stars {
  display: flex;
  gap: 5px;
  margin-top: 20px;
}

.avis__stars svg { width: 20px; height: 20px; fill: var(--lantern-deep); }

.avis__deck {
  grid-column: 6 / span 7;
  position: relative;
  display: grid;
  min-height: 320px;
}

.avis-card {
  grid-area: 1 / 1;
  pointer-events: none;
  background: var(--rice-2);
  border: 1px solid var(--line-on-rice);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  transform-origin: 50% 100%;
}

/* En-tete : medaillon a l'initiale, nom, provenance, etoiles quand la note est
   connue. Pas de photo de profil : ce sont les donnees personnelles des
   clients, on ne les republie pas. */
.avis-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avis-card__avatar {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rice);
  background: var(--lacquer-deep);
}

.avis-card__avatar--2 { background: var(--sea-deep); }
.avis-card__avatar--3 { background: var(--lantern-deep); }
.avis-card__avatar--4 { background: var(--charcoal); }

.avis-card__who {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.avis-card__who b {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-on-rice);
}

.avis-card__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text-muted-on-rice);
}

.avis-card__g {
  width: 14px;
  height: 14px;
  flex: none;
}

.avis-card__stars {
  display: flex;
  gap: 3px;
  margin-left: auto;
  flex: none;
}

.avis-card__stars svg {
  width: 16px;
  height: 16px;
  fill: var(--lantern-deep);
}

.avis-card__stars svg.is-off { opacity: .25; }

.avis-card blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 94%;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text-on-rice);
  max-width: 34ch;
}

/* Barre de navigation : fleches, pastilles, compteur, lien vers Google. */
/* La pile de cartes descend de quelques pixels sous son cadre : sans cette
   priorite, elle recouvrait le haut des fleches et volait la moitie du clic. */
.avis__nav {
  position: relative;
  z-index: 3;
  grid-column: 6 / span 7;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 28px;
}

.avis__arrow {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-rice);
  border-radius: 50%;
  color: var(--text-on-rice);
  background: transparent;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.avis__arrow svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .avis__arrow:hover {
    border-color: var(--lacquer-deep);
    color: var(--lacquer-deep);
  }
}

.avis__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La pastille courante se remplit pendant le delai du defilement automatique :
   on voit que ca tourne, et quand ca passe a la suivante. */
.avis__dot {
  position: relative;
  width: 28px;
  height: 3px;
  padding: 0;
  background: transparent;
}

.avis__dot::before,
.avis__dot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 2px;
}

.avis__dot::before { background: var(--line-on-rice); }

.avis__dot::after {
  background: var(--lacquer-deep);
  transform: scaleX(0);
  transform-origin: left;
}

.avis__dot[aria-current="true"]::after { transform: scaleX(1); }

.avis__nav.is-auto .avis__dot[aria-current="true"]::after {
  animation: od-avis-progression 6s linear forwards;
}

@keyframes od-avis-progression {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.avis__compteur {
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--text-muted-on-rice);
}

.avis__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--lantern-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =========================================================== 5.10 INFOS */

.infos__grid { align-items: start; }

.infos__side { grid-column: 1 / span 5; }

.infos__side h2 {
  font-size: clamp(2.25rem, 3.6vw, 4rem);
  margin-bottom: 32px;
}

/* Leur phrase d'accueil, reprise de leur propre site. */
.infos__accueil {
  margin: 0 0 32px;
  max-width: 44ch;
  font-size: 1.0625rem;
  color: var(--text-muted-on-rice);
}

.hours-table {
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 36px;
}

.hours-table th,
.hours-table td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-on-rice);
  font-weight: 400;
}

.hours-table th { color: var(--text-on-rice); }

.hours-table td {
  text-align: right;
  color: var(--text-muted-on-rice);
}

.hours-table tr.is-today th,
.hours-table tr.is-today td {
  color: var(--lacquer-deep);
  border-bottom-color: var(--lacquer-deep);
}

.infos__block + .infos__block { margin-top: 28px; }

.infos__address {
  font-style: normal;
  font-size: 1.0625rem;
  color: var(--text-on-rice);
}

.infos__tel {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  color: var(--lacquer-deep);
  margin-top: 6px;
}

.infos__map-wrap {
  grid-column: 6 / span 7;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--rice-2);
}

#map {
  height: 520px;
  width: 100%;
  background: var(--rice-2);
}

.map-fallback {
  display: grid;
  place-content: center;
  gap: 14px;
  height: 520px;
  padding: 32px;
  text-align: center;
  color: var(--text-on-rice);
}

.map-fallback[hidden] { display: none; }

/* ======================================================= carte.html */

.menu-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
  background: var(--ink);
  border-block: 1px solid var(--line-on-ink);
  padding-block: 12px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* Les fleches se posent par-dessus les bouts de la barre : la premiere famille
   reste alignee sur le texte de la page, et la barre ne change jamais de largeur. */
.menu-nav .wrap { position: relative; }

/* Fleches de la barre, sur ecran large avec une souris seulement : au doigt,
   la barre se fait glisser. */
.menu-nav__fleche {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-on-ink);
  border-radius: 50%;
  color: var(--text-on-ink);
  background: var(--ink);
  transform: translateY(-50%);
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.menu-nav__fleche--prev { left: 0; }
.menu-nav__fleche--next { right: 0; }

.menu-nav__fleche svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .menu-nav__fleche {
    display: inline-grid;
    place-items: center;
  }

  .menu-nav__fleche[hidden] { display: none; }

  .menu-nav__fleche:hover {
    border-color: var(--lantern);
    color: var(--lantern);
  }
}

.menu-nav__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  /* La barre de familles deborde a droite sans que rien ne l'indique : deux a
     cinq filtres restaient hors de l'ecran. Le degrade de bord se retire tout
     seul en fin de course, il signale donc « il y en a encore » sans rien
     ajouter a l'interface. Aucune lueur : c'est un fondu vers le fond. */
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 42px), transparent 100%);
}

/* en fin de defilement, plus rien a masquer */
.menu-nav__list:has(> :last-child:target),
.menu-nav__list.est-au-bout {
  -webkit-mask-image: none;
  mask-image: none;
}

/* barre deja defilee : le bout gauche se fond aussi, sous la fleche de retour */
.menu-nav__list.est-decale {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 42px), transparent 100%);
}

.menu-nav__list.est-decale.est-au-bout {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px);
  mask-image: linear-gradient(to right, transparent 0, #000 72px);
}

.menu-nav__list > * { scroll-snap-align: start; }

.menu-nav__list::-webkit-scrollbar { display: none; }

.menu-nav__list button,
.menu-nav__list a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted-on-ink);
  text-decoration: none;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.menu-nav__list [aria-pressed="true"],
.menu-nav__list [aria-current="true"] {
  color: var(--ink);
  background: var(--lantern);
  border-color: var(--lantern);
}

@media (hover: hover) and (pointer: fine) {
  .menu-nav__list button:hover,
  .menu-nav__list a:hover { color: var(--lantern); border-color: var(--lantern); }
  .menu-nav__list [aria-pressed="true"]:hover { color: var(--ink); }
}

.famille { scroll-margin-top: calc(var(--nav-h) + 90px); }

.famille[hidden] { display: none; }

.famille + .famille { margin-top: clamp(56px, 6vw, 96px); }

.famille__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 8px;
}

.famille__head h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  flex: none;
}

.famille__rule {
  flex: 1;
  height: 1px;
  background: var(--line-on-ink);
}

.famille__note {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--text-muted-on-ink);
  margin-bottom: 24px;
}

.ardoise { display: grid; }

.ardoise__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-on-ink);
}

/* Une vignette a gauche de la ligne : photo du restaurant pour les formules,
   produit detoure pour les boissons. */
.ardoise__row--img {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.ardoise__img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--charcoal-2);
}

.ardoise__img--produit {
  object-fit: contain;
  padding: 4px;
}

/* ligne sans image dans une famille illustree : la case garde sa place */
.ardoise__img--vide {
  display: block;
  background: transparent;
}

.ardoise__name {
  font-weight: 500;
  color: var(--text-on-ink);
}

.ardoise__detail {
  display: block;
  margin-top: 3px;
  font-size: .9375rem;
  color: var(--text-muted-on-ink);
  font-weight: 400;
}

.ardoise__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--lantern);
  white-space: nowrap;
  text-align: right;
}

.ardoise__row--buffet .ardoise__price { font-size: clamp(1.375rem, 2.4vw, 2.25rem); }

.carte-intro { max-width: 52ch; color: var(--text-muted-on-ink); }

/* ===================================================== credits.html */

.credits-block + .credits-block {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--line-on-ink);
}

.credits-block h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  margin-bottom: 24px;
}

.credits-list { display: grid; gap: 16px; max-width: 72ch; }

.credits-list li { color: var(--text-muted-on-ink); }

.credits-list b { color: var(--text-on-ink); font-weight: 600; }

.credits-list a { color: var(--lantern); }

.mentions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 40px;
  max-width: 900px;
}

.mentions-grid dt {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lantern);
  margin-bottom: 6px;
}

.mentions-grid dd {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-on-ink);
  color: var(--text-on-ink);
  min-height: 1.6em;
}

.mentions-grid dd:empty::before {
  content: "À compléter";
  color: var(--text-muted-on-ink);
}

/* --- filtre de la carte : 100 % CSS, il marche sans JavaScript ---------- */

.menu-nav__list li {
  position: relative;
  flex: none;
  display: inline-flex;
}

.menu-nav__list label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted-on-ink);
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out),
              background-color 180ms var(--ease-out);
}

.menu-nav__list input:checked + label {
  color: var(--ink);
  background: var(--lantern);
  border-color: var(--lantern);
}

.menu-nav__list input:focus-visible + label {
  outline: 2px solid var(--focus-on-ink);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .menu-nav__list label:hover { color: var(--lantern); border-color: var(--lantern); }
  .menu-nav__list input:checked + label:hover { color: var(--ink); }
}

.cartes { padding-bottom: clamp(64px, 7vw, 104px); }

/* Une regle par famille : `:has()` lit l'etat du bouton radio choisi.
   Si le navigateur ne connait pas `:has()`, toutes les familles restent
   visibles : la page reste complete, jamais vide. */
.menu-filter:has(#f-buffet:checked) .famille:not(#buffet),
.menu-filter:has(#f-aperitifs:checked) .famille:not(#aperitifs),
.menu-filter:has(#f-eaux:checked) .famille:not(#eaux),
.menu-filter:has(#f-boissons:checked) .famille:not(#boissons),
.menu-filter:has(#f-bieres:checked) .famille:not(#bieres),
.menu-filter:has(#f-cafe:checked) .famille:not(#cafe),
.menu-filter:has(#f-digestifs:checked) .famille:not(#digestifs),
.menu-filter:has(#f-rouges:checked) .famille:not(#rouges),
.menu-filter:has(#f-roses:checked) .famille:not(#roses),
.menu-filter:has(#f-blancs:checked) .famille:not(#blancs),
.menu-filter:has(#f-champagne:checked) .famille:not(#champagne),
.menu-filter:has(#f-pichets:checked) .famille:not(#pichets),
.menu-filter:has(#f-verre:checked) .famille:not(#verre) {
  display: none;
}

/* quand une seule famille est affichee, elle ne porte plus de marge haute */
.menu-filter:not(:has(#f-tout:checked)) .famille + .famille { margin-top: 0; }

.famille__sub { margin-top: 32px; }

.ardoise__name { display: block; }

.carte-foot {
  padding-bottom: clamp(72px, 8vw, 112px);
  border-top: 1px solid var(--line-on-ink);
  padding-top: clamp(32px, 4vw, 48px);
}

.carte-foot__cta { margin-top: 28px; }

/* --- credits ----------------------------------------------------------- */

.credits-page { padding-bottom: clamp(72px, 8vw, 112px); }

.famille__sub-tight { margin-top: 24px; }

.mentions-sub { margin: 40px 0 28px; }

.mentions-sub--first { margin-top: 0; }

/* Mentions legales : une ligne sans valeur affiche un libelle en face du vide et
   fait « site inacheve ». Elle reste donc masquee tant que le restaurant n'a pas
   renseigne le champ depuis son espace de gestion. Regle purement CSS : elle vaut
   aussi sans JavaScript, et la ligne reapparait d'elle-meme une fois remplie. */
.mentions-grid > div:has(dd[data-od^="mentions."]:empty) { display: none; }

.mentions-attente {
  margin: 0 0 18px;
  color: var(--text-muted-on-rice);
  font-size: .9375rem;
}

/* des qu'une seule valeur est posee, la phrase d'attente n'a plus lieu d'etre */
.mentions-grid:has(dd[data-od^="mentions."]:not(:empty)) ~ .mentions-attente,
.mentions-attente:has(+ .mentions-grid dd[data-od^="mentions."]:not(:empty)) { display: none; }

/* Pastille d'horaires : le contraste depend du fond de la section qui la porte.
   Sur encre, l'or lanterne ; sur papier de riz, l'or fonce et l'encre attenuee,
   qui passent tous deux le seuil AA. Mesure avant correctif : 1,56:1. */
.on-rice .hours-pill,
.bg-rice .hours-pill,
.bg-rice-2 .hours-pill {
  color: var(--text-muted-on-rice);
  border-color: var(--line-on-rice);
}

.on-rice .hours-pill[data-open="true"],
.bg-rice .hours-pill[data-open="true"],
.bg-rice-2 .hours-pill[data-open="true"] {
  color: var(--lantern-deep);
  border-color: rgb(122 79 0 / .38);
}

/* Puces de navigation du deck d'avis : elles mesuraient 28 par 3 pixels.
   La zone cliquable fait maintenant 44 par 44, le point reste petit. */
.avis__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.avis__dot::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--line-on-rice);
  transition: background-color 200ms var(--ease-out);
}

.avis__dot[aria-current="true"]::before,
.avis__dot.is-active::before { background: var(--lantern-deep); }

@media (hover: hover) and (pointer: fine) {
  .avis__dot:hover::before { background: var(--text-muted-on-rice); }
}