/* O'Vestiaire — accueil (modules dans l'ordre validé le 22/09) */

/* ---------- 1. Héros ---------- */
.hero { position: relative; min-height: max(720px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 45%; will-change: transform; }
.hero::before { /* voiles relevés sur la planche validée */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 9, 4, .9) 0%, rgba(10, 9, 4, .66) 40%, rgba(10, 9, 4, .18) 78%, rgba(10, 9, 4, .3) 100%),
    linear-gradient(0deg, var(--alv-bg), rgba(0, 0, 0, 0) 30%),
    linear-gradient(180deg, rgba(10, 9, 4, .7), rgba(0, 0, 0, 0) 22%);
}
.hero::after { /* trame de la carte, à peine perceptible côté texte */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/marque/trame-courbes.jpg") left center / cover; mix-blend-mode: screen; opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.hero__inner { width: 100%; padding: calc(var(--alv-header-h) + 40px) var(--alv-gutter) clamp(90px, 11vh, 140px); }
.hero__content { max-width: 780px; }
.hero .kicker { color: var(--alv-ink); font-size: 16px; letter-spacing: .14em; }
.hero .kicker::before { background: var(--alv-gold-solid); width: 46px; }
.hero h1 { margin-bottom: 32px; }
.hero h1 .line { display: block; }
.hero .lead { max-width: 46ch; font-size: 18px; margin-bottom: 36px; color: rgba(247, 243, 234, .92); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Macaron « Troisième mi-temps » : hexagone du logo, rouge adouci, liseré or */
.badge-hex {
  --bw: clamp(170px, 17vw, 250px); /* largeur du macaron : les textes en dérivent, pour rester dans le liseré à toute taille */
  position: absolute; right: clamp(24px, 14vw, 230px); top: calc(var(--alv-header-h) + clamp(30px, 6vh, 70px));
  width: var(--bw); aspect-ratio: 1.08; display: grid; place-items: center; text-align: center;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55));
}
.badge-hex__shape { position: absolute; inset: 0; }
/* Reflet or unique : à l'entrée (classe posée par main.js) et au survol. Découpé à la forme de l'hexagone. */
.badge-hex__shape::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  clip-path: polygon(26.9% 3%, 73.1% 3%, 97.2% 50%, 73.1% 97%, 26.9% 97%, 2.8% 50%);
  background: linear-gradient(110deg, transparent 38%, rgba(255, 246, 220, .6) 50%, transparent 62%) 120% 0 / 260% 100% no-repeat;
}
.badge-hex.is-sheen .badge-hex__shape::after, .badge-hex:hover .badge-hex__shape::after { animation: alv-badge-sheen var(--alv-dur-sheen) var(--alv-ease-in-out) 1 both; }
@keyframes alv-badge-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
.badge-hex__shape svg { width: 100%; height: 100%; overflow: visible; }
.badge-hex__text { position: relative; transform: rotate(-6deg); display: grid; gap: 6px; }
.badge-hex__text .t1, .badge-hex__text .t3 { font: 700 clamp(12px, 1.1vw, 16px)/1 var(--alv-font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--alv-yellow); }
.badge-hex__text .t2 { font: 400 calc(var(--bw) * .115)/.95 var(--alv-font-display); text-transform: uppercase; letter-spacing: -.02em; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 700 11px/1 var(--alv-font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--alv-ink-soft); }
/* Le mot est posé par la feuille de style : une indication d'interface, pas du contenu à indexer. */
.scroll-cue::before { content: "Défiler"; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--alv-gold-solid), transparent); transform-origin: top; animation: alv-cue 2.2s var(--alv-ease-in-out) infinite; }
@keyframes alv-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 2. Bandeau d'infos (noir + filet rouge : le rouge recule) ---------- */
.infos { position: relative; background: var(--alv-bg-raised); border-block: 1px solid var(--alv-hair); }
.infos__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(28px, 6vw, 96px); padding-block: 22px; margin: 0; list-style: none; font: 600 15px/1.4 var(--alv-font-label); letter-spacing: .08em; text-transform: uppercase; }
.infos__list li { display: inline-flex; align-items: center; gap: 12px; }
.infos__list svg { width: 18px; height: 18px; color: var(--alv-gold-solid); flex: none; }
.infos__list a:hover { color: var(--alv-gold-solid); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5BD67A; box-shadow: 0 0 0 0 rgba(91, 214, 122, .6); animation: alv-pulse 2.2s infinite; }
.status-dot.is-closed { background: var(--alv-red); animation: none; }
@keyframes alv-pulse { 70% { box-shadow: 0 0 0 10px rgba(91, 214, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 214, 122, 0); } }
.status b { color: var(--alv-yellow); font-weight: 800; }

/* ---------- En-têtes de section : titre à gauche, chapô à droite ---------- */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; margin-bottom: 52px; }
.sec-head .lead { font-size: 17px; max-width: 560px; } /* le chapeau se lit sous le titre, jamais isolé à droite (Aurélien, 06/10) */
.sec-head--rule { padding-bottom: 36px; border-bottom: 1px solid var(--alv-hair); }

/* ---------- 3. La carte ---------- */
.planches { display: grid; grid-template-columns: 1fr 1.45fr 1fr 1.72fr; gap: 18px; }
.planche { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; min-height: 320px; }
.planche__top { display: flex; justify-content: space-between; font: 700 13px/1 var(--alv-font-label); letter-spacing: .14em; text-transform: uppercase; }
.planche__top span:last-child { color: var(--alv-ink-soft); }
.planche h3 { margin-top: 18px; }
.planche p { font-size: 16px; line-height: 1.45; color: var(--alv-ink-soft); margin: 0; }
.planche .price { margin-top: auto; font: 700 24px/1 var(--alv-font-label); letter-spacing: .05em; color: var(--alv-ink); }
.planche .soir { font: 700 11px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--alv-gold-solid); opacity: .8; }

.carte-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 48px; align-items: stretch; }
.menu-card { position: relative; padding: 32px; border-radius: var(--alv-radius-lg); background: var(--alv-surface); border: 1px solid var(--alv-hair); box-shadow: var(--alv-shadow-1); overflow: hidden; }
.menu-card .tag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--alv-font-label); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--alv-red); padding: 7px 11px; border-radius: 6px; margin-bottom: 18px; }
.menu-card .tag--gold { background: var(--alv-gold-fill); color: #1A1206; }
.menu-card h3 { font-size: clamp(32px, 2.7vw, 40px); line-height: 1; letter-spacing: -.02em; margin-bottom: 20px; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.price-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(247, 219, 142, .18); font-size: 16px; }
.price-list li:last-child { border-bottom: 0; }
.price-list .dots { flex: 1; }
.price-list b { font: 700 17px/1 var(--alv-font-label); letter-spacing: .04em; white-space: nowrap; }
.price-list small { display: block; font-size: 14px; color: var(--alv-ink-soft); }
.menu-card .note { margin: 16px 0 0; font-size: 14px; color: var(--alv-ink-faint); }

.shots { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; padding-top: 12px; }
.shots__row { display: flex; gap: 18px; align-items: flex-start; }
.shot { width: 48%; }
.shot--b { margin-top: 28px; }
@media (hover: hover) {
}
.shots .link { position: relative; z-index: 2; align-self: flex-start; }

/* ---------- 4. Les spéciaux du moment ---------- */
.speciaux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.speciaux__all { margin-top: 40px; }
.special { display: flex; flex-direction: column; border-radius: var(--alv-radius-lg); overflow: hidden; min-height: 560px; box-shadow: var(--alv-shadow-1); transition: transform var(--alv-dur-hover) var(--alv-ease-out), box-shadow var(--alv-dur-hover) var(--alv-ease-out); }
@media (hover: hover) { .special:hover { transform: translateY(-8px); box-shadow: var(--alv-shadow-2); } }
.special:has(:focus-visible) { transform: translateY(-8px); box-shadow: var(--alv-shadow-2); }
.special .media { height: 260px; flex: none; }
.special__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; flex: 1; }
.special h3 { font-size: 26px; line-height: 1.04; letter-spacing: -.01em; color: inherit; min-height: 3.12em; }
.special p { font-size: 16px; line-height: 1.45; margin: 0; }
.special small { font: 700 13px/1.4 var(--alv-font-label); letter-spacing: .04em; text-transform: uppercase; }
.special .link { margin-top: auto; align-self: flex-start; }
.special--gold { background: var(--alv-gold-fill); color: #120C04; }
.special--gold small { color: rgba(10, 9, 4, .78); }
.special--gold .link::after { background: #120C04; }
.special--dark { background: var(--alv-bg); border: 1px solid var(--alv-line); }
.special--dark small { background: var(--alv-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.special--red { background: var(--alv-red); color: #fff; }
.special--red small { color: #FFFFFF; }
.special--red .link::after { background: var(--alv-yellow); }
.special--yellow { background: var(--alv-yellow); color: #120C04; }
.special--yellow small { color: var(--alv-red-deep); }
.special--yellow .link::after { background: #120C04; }
/* Cinq cartes (la viande du moment s'ajoute) : une rangée sur grand écran ; en dessous, deux colonnes dont la dernière carte prend toute la largeur. */
@media (min-width: 1360px) {
  .speciaux:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .speciaux:has(> :nth-child(5)) .special h3 { font-size: 20px; }
}
@media (min-width: 641px) and (max-width: 1359px) {
  .speciaux:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speciaux:has(> :nth-child(5)) > :last-child { grid-column: 1 / -1; }
}
/* Six cartes (la nouveauté du comptoir s'ajoute) : deux rangées de trois, puis trois rangées de deux. */
@media (min-width: 1024px) {
  .speciaux:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .speciaux:has(> :nth-child(6)) .special h3 { font-size: 26px; }
}
@media (min-width: 641px) and (max-width: 1359px) {
  .speciaux:has(> :nth-child(6)) > :last-child { grid-column: auto; }
}

/* ---------- 5. Le lieu ---------- */
.lieu { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.lieu .lead { max-width: 40ch; margin-bottom: 30px; }
.lieu h2 { font-size: clamp(40px, 4.7vw, 70px); line-height: .9; }
.lieu__mosaic { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: clamp(460px, 46vw, 660px); }
.lieu__mosaic .media { margin: 0; border-radius: var(--alv-radius); border: 1px solid var(--alv-hair); }
.lieu__mosaic .media:first-child { grid-row: span 2; }
.lieu__mosaic .media:first-child img { object-position: 12% 30%; transform-origin: 20% 40%; }
.lieu__mosaic figcaption { position: absolute; left: 14px; bottom: 12px; font: 700 12px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; padding: 7px 10px; background: rgba(10, 9, 4, .72); backdrop-filter: blur(6px); border-radius: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--alv-hair); list-style: none; padding-left: 0; }
.tags li { font: 600 13px/1 var(--alv-font-label); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 6. Les prochaines soirées ---------- */
.soirees { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.soiree { display: grid; gap: 22px; perspective: 900px; }
.poster { position: relative; aspect-ratio: 3 / 4; border-radius: var(--alv-radius); overflow: hidden; border: 1px solid var(--alv-hair); background: #000; transform-style: preserve-3d; box-shadow: var(--alv-shadow-2); will-change: transform; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.poster__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 238, 186, .28), transparent 55%); opacity: 0; transition: opacity var(--alv-dur-s); }
.poster:hover .poster__glare, .poster:focus-visible .poster__glare { opacity: 1; }
.soiree__meta { display: grid; grid-template-columns: 74px 1fr; gap: 18px; align-items: start; }
.date-chip { display: grid; justify-items: center; padding: 10px 0 9px; border: 1px solid var(--alv-line); border-radius: 12px; }
.date-chip b { font: 400 30px/1 var(--alv-font-display); }
.date-chip span { font: 700 12px/1 var(--alv-font-label); letter-spacing: .2em; text-transform: uppercase; color: #F7F3EA; margin-top: 6px; }
.soiree h3 { font-size: clamp(26px, 2.2vw, 31px); line-height: .98; letter-spacing: -.02em; margin-bottom: 8px; }
.soiree p { font-size: 15px; color: var(--alv-ink-soft); margin-bottom: 14px; }

/* ---------- 7. Grandes tablées : le seul grand moment rouge ---------- */
.tablees { position: relative; overflow: hidden; background: var(--alv-red); isolation: isolate; }
.tablees::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/marque/trame-courbes.jpg") center / cover; mix-blend-mode: multiply; opacity: .35; }
.tablees__mark { position: absolute; right: -6%; top: 50%; width: min(62vw, 900px); transform: translateY(-50%) rotate(-8deg); opacity: .14; z-index: -1; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.4); }
.tablees__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.tablees h2 { font-size: var(--alv-fs-h2-sm); line-height: .86; }
.tablees h2 span { padding-top: .16em; } /* l’accent de « Équipe » n’est plus rogné par le découpage du dégradé */
.tablees .kicker { color: #FFFFFF; }
.tablees p { font-size: 18px; max-width: 40ch; margin-bottom: 28px; }
.tablees__copy { padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, .35); }

/* ---------- 8. Avis ---------- */
.avis { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; }
.score { display: flex; align-items: baseline; gap: 12px; }
.score .num { font: 400 clamp(84px, 8vw, 110px)/.8 var(--alv-font-display); letter-spacing: -.01em; padding-bottom: .2em; margin-bottom: -.2em; } /* la virgule descend sous la ligne : le dégradé doré doit la couvrir */
.score .sur { font: 600 21px/1 var(--alv-font-label); letter-spacing: .08em; text-transform: uppercase; }
.avis__meta { margin-top: 18px; display: grid; gap: 10px; }
.avis__meta .label { color: var(--alv-ink-soft); }
.avis-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avis-card { padding: 24px; border-radius: var(--alv-radius); background: var(--alv-surface); border: 1px solid var(--alv-hair); min-height: 210px; display: flex; flex-direction: column; gap: 12px; }
.avis-card .q { font: 400 54px/.6 var(--alv-font-display); color: var(--alv-red); height: 26px; }
.avis-card p { font-size: 16px; color: var(--alv-ink-soft); margin: 0; }
.avis-card .who { margin-top: auto; font: 700 13px/1 var(--alv-font-label); letter-spacing: .12em; text-transform: uppercase; }
/* Photos de clients en polaroïd (code de la carte imprimée) */
.guests { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: end; max-width: 380px; margin-top: 40px; }
.guest { position: relative; }
.guest figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 6px; background: rgba(10, 9, 4, .72); backdrop-filter: blur(6px); font: 700 11px/1 var(--alv-font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--alv-cream); }
.guest--a img { aspect-ratio: 4 / 3; object-position: 38% 50%; }
@media (hover: hover) {
}

/* ---------- 9. Nous trouver ---------- */
.trouver { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.map { position: relative; aspect-ratio: 1.06; border-radius: var(--alv-radius); overflow: hidden; border: 1px solid var(--alv-line); box-shadow: var(--alv-shadow-2); }
.map picture { display: contents; }
.map img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.map__pin { position: absolute; left: 47%; top: 45%; display: flex; align-items: center; gap: 10px; transform: translate(-22px, -100%); }
.map__pin svg { width: 46px; height: 56px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.map__pin .ring { position: absolute; left: 23px; bottom: -4px; width: 14px; height: 8px; border-radius: 50%; background: rgba(200, 55, 45, .6); transform: translateX(-50%); animation: alv-ring 2s infinite; }
@keyframes alv-ring { 0% { transform: translateX(-50%) scale(1); opacity: .9; } 100% { transform: translateX(-50%) scale(5); opacity: 0; } }
.map__label { background: var(--alv-bg); border: 1px solid var(--alv-red); padding: 8px 12px; border-radius: 6px; font: 700 13px/1.25 var(--alv-font-label); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.map__label span { display: block; font: 500 14px/1.3 var(--alv-font-body); letter-spacing: 0; text-transform: none; color: var(--alv-ink-soft); }
/* Source des données (licence ODbL) : un « i » discret, la mention au survol, au toucher ou au clavier */
.map__credit { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; border-radius: 999px; background: rgba(10, 9, 4, .6); font-size: 11px; line-height: 1; color: rgba(247, 243, 234, .7); outline: none; }
.map__credit-i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(247, 243, 234, .28); border-radius: 50%; font: italic 600 11px/1 var(--alv-font-body); cursor: help; }
.map__credit-texte { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s, padding .3s; }
.map__credit:hover .map__credit-texte, .map__credit:focus-within .map__credit-texte { max-width: 140px; padding: 0 6px 0 10px; }
.map__credit a { color: inherit; }
/* Toute la carte ouvre la fiche Google ; l'étiquette dit où mène le clic */
.map__google { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 38px; color: var(--alv-cream); text-decoration: none; }
.map__google-tag { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--alv-line); border-radius: 999px; background: rgba(10, 9, 4, .78); backdrop-filter: blur(4px); font: 700 12px/1 var(--alv-font-label); letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.map__google svg { width: 14px; height: 14px; color: var(--alv-gold-solid); rotate: -90deg; transition: transform .3s; }
.map__google:hover .map__google-tag, .map__google:focus-visible .map__google-tag { border-color: var(--alv-gold-solid); color: var(--alv-ink); }
.map__google:hover svg, .map__google:focus-visible svg { transform: translate(-2px, 2px); }
.map__google:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: -4px; border-radius: inherit; }
.addr { font: 600 21px/1.3 var(--alv-font-label); letter-spacing: .03em; margin: 26px 0 6px; }
.hours { margin: 26px 0; padding: 18px 0; border-block: 1px solid var(--alv-hair); }
.hours dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 12px 0 0; font-size: 15px; }
.hours dt { font: 600 15px/1.4 var(--alv-font-label); letter-spacing: .06em; text-transform: uppercase; }
.hours dd { margin: 0; color: var(--alv-ink-soft); }
.hours .is-today dt, .hours .is-today dd { background: var(--alv-gold); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hours .row { display: contents; }
.trouver__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 10. Partenaires ---------- */
.partners-head { text-align: center; margin-bottom: 40px; }
.partners-head .kicker { justify-content: center; }
.partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px, 4vw, 96px); }
.partner { display: grid; place-items: center; transition: transform .5s var(--alv-ease-out); }
.partner img { height: clamp(64px, 9vw, 130px); width: auto; max-width: 100%; object-fit: contain; } /* même hauteur pour les logos, sans cadre : ils se lisent sur le noir */
.partner--carre img { height: clamp(84px, 11.7vw, 170px); } /* logos presque carrés (écusson, rond) : +30 % pour un poids comparable aux logos en largeur */
@media (hover: hover) {
  .partner:hover { transform: translateY(-3px); }
}
.partner:has(:focus-visible) { transform: translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .planches { grid-template-columns: repeat(2, 1fr); }
  .speciaux { grid-template-columns: repeat(2, 1fr); }
  .carte-row { grid-template-columns: 1fr 1fr; }
  .shots { grid-column: span 2; min-height: 0; padding-top: 8px; align-items: center; }
  .shots__row { display: flex; justify-content: center; gap: clamp(16px, 4vw, 40px); margin-bottom: 36px; }
  .shot { width: min(42%, 240px); }
  .shot--b { margin-top: 18px; }
  .shots .link { align-self: center; }
  .avis { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sec-head { gap: 20px; }
  .lieu, .trouver, .tablees__grid { grid-template-columns: 1fr; }
  .lieu__mosaic { height: 520px; }
  .soirees { grid-template-columns: repeat(2, 1fr); } /* tablette : deux colonnes, comme les planches et les spéciaux */
  .tablees__copy { padding-left: 0; border-left: 0; }
  .avis-cards { grid-template-columns: 1fr; }
}
/* Tablette : une soirée seule sur la dernière rangée se centre, à la largeur d'une colonne */
@media (min-width: 641px) and (max-width: 900px) {
  .soiree:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(10px, 1.5vw, 22px)); }
}
/* Macaron : le titre du héros (« Restaurant, ») court jusqu'au tiers droit de l'écran entre 641 et 1140 px, et le
   macaron, calé en haut à droite, le recouvrait. De 901 à 1140 px il descend dans l'angle bas droit, que le titre
   et le chapô ne touchent pas. De 641 à 900 px, il n'y a de place libre nulle part sur un écran court : il disparaît
   sous 960 px de haut (comme sur téléphone) et reste en haut à droite sur un écran plus haut (tablette portrait). */
@media (min-width: 901px) and (max-width: 1140px) {
  .badge-hex { top: auto; bottom: clamp(90px, 11vh, 140px); right: var(--alv-gutter); }
}
@media (min-width: 641px) and (max-width: 900px) and (max-height: 959px) {
  .badge-hex { display: none; }
}
@media (max-width: 640px) {
  .hero { min-height: 100svh; }
  .hero__inner { padding-bottom: 130px; }
  .hero .lead { font-size: 17px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .badge-hex { right: 16px; top: calc(var(--alv-header-h) + 10px); width: 132px; }
  .scroll-cue { display: none; }
  .infos__list { flex-direction: column; align-items: flex-start; padding-inline: 6px; }
  .planches, .speciaux, .carte-row { grid-template-columns: 1fr; }
  .planche { min-height: 0; }
  .shots { grid-column: auto; }
  .shots__row { gap: 14px; margin-bottom: 28px; }
  .shot { width: 46%; }
  .special { min-height: 0; }
  .lieu__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 180px; height: auto; }
  .lieu__mosaic .media:first-child { grid-row: auto; grid-column: span 2; }
  .tags { margin-top: 36px; }
}

.swipe-hint { display: none; align-items: center; gap: 10px; margin-top: 4px; font: 700 11px/1 var(--alv-font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--alv-ink-faint); }
.swipe-hint::before { content: "Faites glisser"; }
.swipe-hint i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--alv-line), transparent); }

/* Téléphone : carrousels à défilement horizontal (planches, spéciaux, soirées) */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(38px, 10.6vw, 52px); }
  /* Téléphone : pas de macaron. Sur un écran court, il couvrait le titre, et le héros n'a aucune place libre
     (décision d'Aurélien, 12/10/2026) ; le texte dit déjà « troisième mi-temps ». */
  .badge-hex { display: none; }
  .planches, .speciaux, .soirees {
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--alv-gutter); gap: 14px; touch-action: pan-x pan-y;
    margin-inline: calc(-1 * var(--alv-gutter)); padding: 6px var(--alv-gutter) 18px; max-width: none;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .planches::-webkit-scrollbar, .speciaux::-webkit-scrollbar, .soirees::-webkit-scrollbar { display: none; }
  .planches > *, .speciaux > *, .soirees > * { flex: 0 0 82%; scroll-snap-align: start; }
  .planche { min-height: 300px; }
  .special .media { height: 220px; }
  .swipe-hint { display: flex; }
}

@media (min-width: 1181px) { .shots__row { display: contents; } }

/* ---------- Peaufinage 05/10 ---------- */
@media (max-width: 900px) {
  .infos__list a { display: inline-block; padding-block: 12px; }
  .infos__list { padding-block: 12px; gap: 0; }
}
@media (max-width: 1180px) {
  .special h3 { min-height: 0; }
}
@media (max-width: 640px) {
  /* voile vertical : le texte du héros passe sur la baie vitrée claire */
  .hero::before {
    background:
      linear-gradient(0deg, var(--alv-bg) 0%, rgba(10, 9, 4, .9) 38%, rgba(10, 9, 4, .55) 62%, rgba(10, 9, 4, .35) 100%),
      linear-gradient(90deg, rgba(10, 9, 4, .55), rgba(10, 9, 4, .15));
  }
  .tablees h2 { line-height: 1.08; } /* l’accent de « Équipe » se cachait sous le V de « Votre » */
  .badge-hex { width: 148px; right: var(--alv-gutter); }
  .badge-hex__text { gap: 4px; }
  .badge-hex__text .t1, .badge-hex__text .t3 { font-size: 10px; letter-spacing: .14em; }
  .badge-hex__text .t2 { font-size: 19px; }
  .map__pin { left: 38%; }
  .map__label { white-space: normal; max-width: 170px; }
  .guests { max-width: 340px; }
}

/* Plan : crédit OSM lisible (obligation de licence) ; étiquette à gauche du repère pour dégager la rue des Grillons */
.map__credit { right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 4px; background: rgba(10, 9, 4, .78); font-size: 11px; color: var(--alv-ink-soft); }
.map__pin { flex-direction: row-reverse; transform: translate(calc(-100% + 24px), -100%); }
.map__pin .ring { left: calc(100% - 23px); }
/* téléphone : le repère reste sur le restaurant (47 % / 45 %), l’étiquette passe au-dessus */
@media (max-width: 640px) {
  .map__pin { left: 47%; flex-direction: column-reverse; gap: 6px; transform: translate(-50%, -100%); }
  .map__pin .ring { left: 50%; }
  .map__label { max-width: none; white-space: nowrap; text-align: center; }
}