/* ==========================================================================
   OPIUM — Restaurant Club · Marseille La Valentine
   Feuille de style principale — Paper34
   Palette : noir profond, or brossé, blanc. Typo display : Rift Soft.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices — reprises de la charte existante de l'établissement
   WOFF2 en premier (≈25 % plus léger), WOFF conservé en repli.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Rift Soft';
  src: url('../fonts/rift_soft_light-webfont.woff2') format('woff2'),
       url('../fonts/rift_soft_light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rift Soft';
  src: url('../fonts/rift_soft_demi-webfont.woff2') format('woff2'),
       url('../fonts/rift_soft_demi-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rift Soft';
  src: url('../fonts/rift_soft_bold-webfont.woff2') format('woff2'),
       url('../fonts/rift_soft_bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* L'Outfit livrée avec l'ancien site ne mappait que 146 glyphes : ni é, ni à,
   ni ç, ni «». Chaque accent tombait sur une police système — visible sur le
   « É » de RÉSERVER. Celle-ci couvre le français en entier. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fonds */
  --noir: #08080a;
  --noir-2: #0e0e11;
  --surface: #131317;
  --surface-2: #1b1b21;
  --bordure: rgba(192, 143, 59, 0.18);
  --bordure-douce: rgba(255, 255, 255, 0.07);

  /* Or */
  --or: #c08f3b;
  --or-clair: #e8ce96;
  --or-fonce: #6f5120;

  /* Texte */
  --blanc: #ffffff;
  --gris: #a9a9b2;
  --gris-2: #74747f;

  /* Typo */
  --display: 'Rift Soft', 'Oswald', 'Haettenschweiler', sans-serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rythme */
  --gouttiere: 22px;
  --max: 1180px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gouttiere: 40px;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Un peu d'air au-dessus des cibles d'ancre */
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Pas de `height: auto` ici : il écraserait l'attribut height des icônes
   inline, qui s'effondrent alors à zéro dans un conteneur flex. */
svg {
  max-width: 100%;
  display: block;
  flex: 0 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Le navigateur applique `margin: 16px 40px` aux figure : sans ce reset, les
   cartes des bandes se retrouvaient séparées de 90 px au lieu de 10. */
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

::selection {
  background: var(--or);
  color: var(--noir);
}

/* Accessibilité clavier */
:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gouttiere);
  z-index: 200;
  background: var(--or);
  color: var(--noir);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  transition: top 0.25s var(--ease);
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: clamp(64px, 11vw, 128px);
  position: relative;
}

.section--serre {
  padding-block: clamp(48px, 8vw, 88px);
}

/* --------------------------------------------------------------------------
   5. Éléments typographiques
   -------------------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 18px;
}

.kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or));
}

.titre-section {
  font-size: clamp(2.6rem, 10vw, 5.2rem);
  margin-bottom: 20px;
}

.titre-section .fin {
  font-weight: 300;
  color: var(--or);
}

.intro {
  font-size: 1.0625rem;
  color: var(--gris);
  max-width: 58ch;
}

/* Filet décoratif or */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--bordure) 20%, var(--bordure) 80%, transparent);
}

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn--or {
  background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, #a9762c);
  color: #180f02;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(192, 143, 59, 0.28);
}

.btn--or:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 42px rgba(192, 143, 59, 0.42);
}

.btn--fantome {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bordure);
  color: var(--blanc);
  backdrop-filter: blur(8px);
}

.btn--fantome:hover {
  transform: translateY(-2px);
  border-color: var(--or);
  background: rgba(192, 143, 59, 0.1);
}

.btn--large {
  width: 100%;
}

@media (min-width: 560px) {
  .btn--large {
    width: auto;
  }
}

.btn-groupe {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

@media (min-width: 560px) {
  .btn-groupe {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* Marge basse généreuse : la flèche de scroll ne doit jamais chevaucher les CTA */
  padding: clamp(72px, 15vw, 120px) var(--gouttiere) 96px;
}

/* Nappe de dégradé animée */
.hero__nappe {
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(46% 42% at 24% 26%, rgba(192, 143, 59, 0.30) 0%, transparent 62%),
    radial-gradient(40% 38% at 78% 68%, rgba(140, 92, 30, 0.24) 0%, transparent 64%),
    radial-gradient(50% 48% at 52% 92%, rgba(232, 206, 150, 0.12) 0%, transparent 60%);
  filter: blur(38px);
  animation: derive 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes derive {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, 2%, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-2%, 3%, 0) scale(1.04);
  }
}

/* Grain */
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* --depart va de 0 (en haut) à 1 (hero quitté). Le JS ne met à jour que cette
   variable ; le fondu et le recul sont décrits ici. */
.hero {
  --depart: 0;
}

.hero__contenu {
  position: relative;
  z-index: 2;
  max-width: 820px;
  opacity: calc(1 - var(--depart));
  transform: translateY(calc(var(--depart) * -40px)) scale(calc(1 - var(--depart) * 0.06));
  will-change: opacity, transform;
}

/* Parallaxe de la nappe : elle descend moins vite que la page. */
.hero__nappe {
  translate: 0 calc(var(--depart) * 14%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__contenu {
    opacity: 1;
    transform: none;
  }

  .hero__nappe {
    translate: none;
  }
}

.hero__logo {
  width: min(200px, 46vw);
  margin: 0 auto 12px;
}

/* Signature de marque : « Opium » est trop générique pour être référencé seul,
   la maison bascule doucement vers « Opium by Avenue Montaigne ». */
.hero__marque {
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 22px;
}

.hero__marque span {
  font-family: var(--sans);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  font-style: italic;
  color: var(--gris);
  margin-inline: 2px;
}

.hero__titre {
  font-size: clamp(2.7rem, 12vw, 6.4rem);
  line-height: 0.9;
  margin-bottom: 18px;
}

.hero__titre .or {
  color: var(--or);
  font-weight: 300;
}

.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 22px;
}

.hero__meta strong {
  color: var(--blanc);
  font-weight: 400;
}

@media (min-width: 640px) {
  .hero__meta {
    flex-direction: row;
    gap: 16px;
  }

  .hero__meta span:not(:last-child)::after {
    content: '·';
    margin-left: 16px;
    color: var(--or);
  }
}

.hero__tel {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--blanc);
  margin-bottom: 8px;
  transition: color 0.3s var(--ease);
}

.hero__tel:hover {
  color: var(--or);
}

.hero .btn-groupe {
  justify-content: center;
  align-items: center;
}

/* Flèche de scroll */
.hero__fleche {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--or);
  animation: rebond 2.4s ease-in-out infinite;
}

@keyframes rebond {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
}

/* --------------------------------------------------------------------------
   9. Bandeau « infos pratiques » (bloc L'essentiel)
   -------------------------------------------------------------------------- */

.essentiel {
  background: var(--noir-2);
  border-block: 1px solid var(--bordure);
}

.essentiel__grille {
  display: grid;
  gap: 2px;
  background: var(--bordure-douce);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 700px) {
  .essentiel__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

.essentiel__item {
  background: var(--noir-2);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.essentiel__label {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

.essentiel__valeur {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
}

.essentiel__detail {
  font-size: 0.9375rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   10. Cartes offres (formules / planches / chicha)
   -------------------------------------------------------------------------- */

.grille {
  display: grid;
  gap: 13px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .grille--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grille--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grille--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.carte-offre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.carte-offre::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0.5;
}

@media (hover: hover) {
  .carte-offre:hover {
    transform: translateY(-5px);
    border-color: var(--bordure);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  }
}

.carte-offre__titre {
  font-size: 1.75rem;
  margin-bottom: 10px;
}

.carte-offre__prix {
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  margin-bottom: 4px;
}

.carte-offre__unite {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-2);
  margin-bottom: 16px;
}

.carte-offre__desc {
  font-size: 0.9375rem;
  color: var(--gris);
}

.carte-offre__liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.carte-offre__liste li {
  position: relative;
  padding-left: 18px;
}

.carte-offre__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
}

.carte-offre__media {
  margin: -30px -26px 22px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.carte-offre__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

@media (hover: hover) {
  .carte-offre:hover .carte-offre__media img {
    transform: scale(1.05);
  }
}

/* Carte mise en avant */
.carte-offre--phare {
  background: linear-gradient(160deg, rgba(192, 143, 59, 0.14), rgba(19, 19, 23, 1) 58%);
  border-color: var(--bordure);
}

.badge {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: rgba(192, 143, 59, 0.12);
  color: var(--or-clair);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   11. Galerie plats (bande scrollable mobile)
   -------------------------------------------------------------------------- */

.bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 10px;
  margin-top: 36px;
  padding-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--or-fonce) transparent;
}

.bande::-webkit-scrollbar {
  height: 4px;
}

.bande::-webkit-scrollbar-thumb {
  background: var(--or-fonce);
  border-radius: 4px;
}

@media (min-width: 700px) {
  .bande {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    overflow: visible;
  }
}

.bande__item {
  scroll-snap-align: start;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure-douce);
}

.bande__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bande__legende {
  padding: 16px 18px 20px;
}

.bande__nom {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bande__desc {
  font-size: 0.875rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   12. Page carte — navigation par catégories
   -------------------------------------------------------------------------- */

.carte-entete {
  /* Pas de barre fixe au-dessus : l'en-tête démarre directement en haut de page. */
  padding: clamp(40px, 9vw, 72px) 0 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.carte-entete__fond {
  position: absolute;
  inset: -40% -10% auto;
  height: 130%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(192, 143, 59, 0.22), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.carte-entete > .wrap {
  position: relative;
  z-index: 1;
}

/* Barre d'onglets collante — seul élément fixe de la page carte. */
.categories {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
  background: rgba(8, 8, 10, 0.97);
  backdrop-filter: saturate(160%) blur(14px);
  border-block: 1px solid var(--bordure-douce);
}

.categories__barre {
  display: block;
}

/* Un `display` d'auteur l'emporte sur l'attribut `hidden` : il faut le rétablir
   explicitement, sinon la barre reste affichée sous le champ de recherche. */
.categories__barre[hidden] {
  display: none;
}

/* La loupe défile avec les catégories plutôt que d'être ancrée : elle occupe
   la première place de la piste, là où le pouce revient naturellement. */
.categories__piste {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 12px var(--gouttiere);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

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

.categories__loupe {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  background: rgba(192, 143, 59, 0.1);
  color: var(--or-clair);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.categories__loupe:hover {
  background: rgba(192, 143, 59, 0.2);
  color: var(--blanc);
}

.categories__lien {
  flex: 0 0 auto;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--bordure-douce);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gris);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
}

.categories__lien:hover {
  color: var(--blanc);
  border-color: var(--bordure);
}

.categories__lien.est-actif {
  background: var(--or);
  border-color: var(--or);
  color: #180f02;
  font-weight: 700;
}

/* Champ de recherche — occupe la barre collante quand il est ouvert, en lieu
   et place des onglets. Zéro hauteur d'écran supplémentaire. */
.recherche {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px var(--gouttiere);
}

.recherche[hidden] {
  display: none;
}

.recherche__champ {
  width: 100%;
  min-height: 44px;
  padding: 11px 48px;
  border-radius: 999px;
  border: 1px solid var(--or);
  background: var(--surface);
  color: var(--blanc);
  font-family: var(--sans);
  font-size: 1rem;
}

.recherche__champ::placeholder {
  color: var(--gris-2);
}

/* On a notre propre bouton de fermeture : pas de doublon avec celui du navigateur. */
.recherche__champ::-webkit-search-cancel-button,
.recherche__champ::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.recherche__champ:focus {
  outline: none;
  border-color: var(--or-clair);
}

.recherche__icone {
  position: absolute;
  left: calc(var(--gouttiere) + 18px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--or);
  pointer-events: none;
}

.recherche__fermer {
  position: absolute;
  right: calc(var(--gouttiere) + 6px);
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recherche__fermer:hover {
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.06);
}

/* Compteur de résultats, annoncé aussi aux lecteurs d'écran */
.compteur {
  padding: 0 var(--gouttiere) 12px;
  font-size: 0.875rem;
  color: var(--or);
}

.compteur[hidden] {
  display: none;
}

.aucun-resultat {
  display: none;
  text-align: center;
  padding: 60px var(--gouttiere);
  color: var(--gris);
}

.aucun-resultat.est-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   13. Page carte — sections et lignes
   -------------------------------------------------------------------------- */

.categorie {
  padding-block: clamp(44px, 7vw, 76px);
  border-bottom: 1px solid var(--bordure-douce);
}

.categorie:last-of-type {
  border-bottom: 0;
}

.categorie.est-masquee {
  display: none;
}

.categorie__entete {
  margin-bottom: 30px;
}

.categorie__titre {
  font-size: clamp(2.2rem, 8vw, 3.6rem);
}

.categorie__intro {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--gris);
  max-width: 60ch;
}

.groupe + .groupe {
  margin-top: 40px;
}

.groupe.est-masque {
  display: none;
}

.groupe__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bordure);
}

.groupe__titre {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--or-clair);
}

.groupe__prix {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--or);
  white-space: nowrap;
}

.groupe__prix small {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-2);
  margin-left: 6px;
}

.groupe__note {
  width: 100%;
  font-size: 0.875rem;
  color: var(--gris-2);
}

/* Seule la barre de catégories est collante ici (~69 px). Les cibles de
   défilement doivent atterrir dessous.
   Une ligne n'a pas de marge propre : il lui faut toute la hauteur de la barre.
   Une catégorie, elle, porte déjà son padding haut — sinon on verrait la fin
   de la catégorie précédente au-dessus du titre visé. */
/* La carte a sa propre barre collante : ses cibles portent leurs marges. */
html.page-carte {
  scroll-padding-top: 0;
}

.page-carte .pied__bas {
  padding-bottom: 56px;
}

.page-carte .ligne {
  /* Une ligne n'est visée que pendant une recherche : la barre porte alors le
     champ ET le compteur de résultats (~105 px), pas seulement les onglets. */
  scroll-margin-top: 128px;
}

.page-carte .categorie {
  scroll-margin-top: 44px;
}

/* Une ligne de carte */
.ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  align-items: start;
}

.ligne:last-child {
  border-bottom: 0;
}

.ligne.est-masquee {
  display: none;
}

.ligne--avec-image {
  grid-template-columns: 78px 1fr auto;
  align-items: center;
}

.ligne__vignette {
  width: 78px;
  height: 78px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--bordure-douce);
  grid-row: span 2;
}

.ligne__corps {
  min-width: 0;
}

.ligne__nom {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.35;
}

.ligne__variante-texte {
  display: block;
  font-size: 0.875rem;
  color: var(--or);
  margin-top: 2px;
}

.ligne__desc {
  font-size: 0.9375rem;
  color: var(--gris);
  line-height: 1.55;
  margin-top: 4px;
}

.ligne__prix {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--blanc);
  white-space: nowrap;
  text-align: right;
  line-height: 1.3;
}

.ligne__format {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--gris-2);
  font-weight: 400;
}

/* Variantes multiples (33cl / 50cl…) */
.ligne__variantes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}

.ligne__variante {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.ligne__variante .fmt {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--gris-2);
}

.ligne__variante .val {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
}

.ligne--phare {
  background: linear-gradient(100deg, rgba(192, 143, 59, 0.09), transparent 65%);
  border-radius: 12px;
  padding-inline: 16px;
  border-bottom-color: transparent;
}

.ligne--phare .ligne__prix {
  color: var(--or);
}

/* Grande image sur une ligne mise en avant (bateau à sushis) */
.ligne__grande-image {
  grid-column: 1 / -1;
  margin-top: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--bordure-douce);
}

.ligne__grande-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   14. Accès / contact
   -------------------------------------------------------------------------- */

.acces {
  display: grid;
  gap: 30px;
  margin-top: 44px;
}

@media (min-width: 860px) {
  .acces {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
  }
}

.acces__carte {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--or-fonce);
  background: var(--surface);
  aspect-ratio: 4 / 3;
  box-shadow: 0 0 0 1px rgba(192, 143, 59, 0.12), 0 18px 46px rgba(0, 0, 0, 0.5);
}

/* Halo doré sur les bords du plan, sans gêner la lecture au centre. */
.acces__carte::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(192, 143, 59, 0.22) 100%);
}

.acces__carte iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Plan sombre et légèrement doré, pour qu'il appartienne à la page plutôt
     que d'y poser un rectangle gris. L'inversion assombrit, le sépia ramène
     la teinte vers l'or de la charte. */
  filter: invert(0.93) grayscale(1) sepia(0.62) saturate(2.4) hue-rotate(-12deg)
    brightness(0.62) contrast(1.02);
}

.infos-liste {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.info-bloc__label {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 5px;
}

.info-bloc__valeur {
  font-size: 1.0625rem;
  color: var(--blanc);
}

.info-bloc__valeur a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.info-bloc__valeur a:hover {
  color: var(--or-clair);
  border-bottom-color: var(--or);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}

.faq__item[open] {
  border-color: var(--bordure);
}

.faq__q {
  padding: 20px 54px 20px 22px;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.25;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--or);
  border-bottom: 2px solid var(--or);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq__r {
  padding: 0 22px 22px;
  font-size: 0.9375rem;
  color: var(--gris);
}

/* --------------------------------------------------------------------------
   16. Barre d'action mobile (appel / itinéraire)
   -------------------------------------------------------------------------- */

/* Deux bulles posées au-dessus du contenu, plutôt qu'un bandeau épinglé qui
   ampute la hauteur d'écran en permanence. */
.barre-action {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  gap: 10px;
  transform: translate(-50%, 140%);
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
  opacity: 0;
  pointer-events: none;
}

.barre-action.est-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .barre-action {
    display: none;
  }
}

.barre-action__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(20, 20, 25, 0.86);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--bordure);
  color: var(--blanc);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.barre-action__btn:active {
  transform: scale(0.96);
}

.barre-action__btn--or {
  background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, #a9762c);
  border-color: transparent;
  color: #180f02;
  font-weight: 700;
  box-shadow: 0 10px 34px rgba(192, 143, 59, 0.4);
}

/* --------------------------------------------------------------------------
   15 bis. Carrousel de bouteilles
   -------------------------------------------------------------------------- */

.bouteilles {
  margin-top: 36px;
  overflow: hidden;
  /* Les bouteilles portent une ombre portée qui déborde sous elles : sans cette
     marge, la carte du pack qui suit sur la page carte leur coupe la base. */
  margin-bottom: 34px;
  /* Les bouteilles émergent du noir plutôt que d'être coupées net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* Le JS bascule sur un défilement natif : le doigt reprend la main avec
   l'inertie du système. La classe n'est posée qu'une fois le relais assuré,
   pour que l'animation CSS reste le repli si le script ne tourne pas. */
.bouteilles.est-manipulable {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Pas de `touch-action` ici : le navigateur route lui-même le geste selon sa
     direction — l'horizontal fait défiler la bande, le vertical fait défiler
     la page. Le forcer à `pan-y` interdirait justement l'horizontal. */
  cursor: grab;
}

.bouteilles.est-manipulable::-webkit-scrollbar {
  display: none;
}

.bouteilles.est-manipulable:active {
  cursor: grabbing;
}

.bouteilles.est-manipulable .bouteilles__ruban {
  animation: none;
}

/* Pas de sélection de texte ni de fantôme d'image pendant le glissement. */
.bouteilles.est-manipulable img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.bouteilles__ruban {
  display: flex;
  width: max-content;
  animation: defile 46s linear infinite;
}

.bouteilles:hover .bouteilles__ruban {
  animation-play-state: paused;
}

.bouteilles__piste {
  display: flex;
  align-items: flex-end;
  gap: clamp(26px, 6vw, 54px);
  padding-inline: clamp(13px, 3vw, 27px);
}

.bouteilles__piste img {
  height: clamp(112px, 26vw, 168px);
  width: auto;
  /* Reflet sombre : les visuels produit arrivent sur fond transparent, il leur
     faut un ancrage pour ne pas flotter dans le vide. */
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.75));
}

/* Une seule piste est visible à la fois : on décale d'exactement sa largeur. */
@keyframes defile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bouteilles {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bouteilles__ruban {
    animation: none;
  }

  /* Sans défilement, la copie ferait doublon au défilement manuel. */
  .bouteilles__piste[aria-hidden='true'] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16 bis. Retour à l'accueil (page carte)
   -------------------------------------------------------------------------- */

.retour {
  position: fixed;
  left: var(--gouttiere);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(20, 20, 25, 0.86);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--bordure);
  color: var(--blanc);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
    background 0.3s var(--ease);
}

.retour:hover {
  border-color: var(--or);
  background: rgba(192, 143, 59, 0.16);
}

.retour:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--noir-2);
  border-top: 1px solid var(--bordure);
  padding-block: 56px 32px;
}

.pied__haut {
  display: grid;
  gap: 34px;
  margin-bottom: 40px;
}

@media (min-width: 760px) {
  .pied__haut {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.pied__logo {
  width: 130px;
  margin-bottom: 18px;
}

.pied__texte {
  font-size: 0.9375rem;
  color: var(--gris);
  max-width: 40ch;
}

.pied__titre {
  font-size: 1.125rem;
  color: var(--or);
  margin-bottom: 14px;
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.pied__liste a:hover {
  color: var(--or-clair);
}

.pied__bas {
  padding-top: 26px;
  padding-bottom: 56px;
  border-top: 1px solid var(--bordure-douce);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--gris-2);
}

@media (min-width: 700px) {
  .pied__bas {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (min-width: 900px) {
  .pied__bas {
    padding-bottom: 0;
  }
}

.pied__paper34 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}

.pied__paper34:hover {
  opacity: 1;
}

.pied__paper34 img {
  width: 62px;
}

.mentions {
  margin-top: 22px;
  font-size: 0.8125rem;
  color: var(--gris-2);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   18 bis. Rappel de fin de carte
   -------------------------------------------------------------------------- */

.fin-de-carte {
  margin-top: clamp(40px, 7vw, 72px);
  padding: clamp(28px, 5vw, 44px);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(192, 143, 59, 0.1), rgba(19, 19, 23, 1) 62%);
}

.fin-de-carte__titre {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 12px;
}

.fin-de-carte__texte {
  font-size: 0.9375rem;
  color: var(--gris);
  max-width: 56ch;
}

.fin-de-carte .btn-groupe {
  margin-top: 24px;
}

/* Le pack reprend la carte de l'accueil, à l'intérieur de la carte détaillée. */
.groupe--pack {
  position: relative;
  padding: clamp(26px, 5vw, 38px);
  margin-bottom: 26px;
  border: 1px solid var(--or-fonce);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(192, 143, 59, 0.13), rgba(19, 19, 23, 1) 62%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
}

.groupe--pack.est-masque {
  display: none;
}

/* Offre datée : la carte d'exception ne paraît que le soir dit, posé par le
   script du <head>. Par défaut c'est le pack habituel qui s'affiche — donc
   aussi ce que voit un robot d'indexation, et ce qui reste si le script ne
   s'exécute pas. */
.groupe--pack-exception {
  display: none;
}

.a-offre-du-soir .groupe--pack-exception {
  display: block;
}

.a-offre-du-soir .groupe--pack-habituel {
  display: none;
}

/* Le badge de l'offre d'un soir se distingue du badge horaire habituel. */
.groupe--pack-exception .badge {
  border-color: var(--or);
  background: rgba(192, 143, 59, 0.18);
  color: var(--or-clair);
}

.groupe--pack .carte-offre__titre {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 10px;
}

.groupe--pack .carte-offre__prix {
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  margin: 0;
}

.groupe--pack .carte-offre__unite {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-2);
  margin-top: 6px;
}

.groupe--pack .carte-offre__liste {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.groupe--pack .carte-offre__liste li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--gris);
}

.groupe--pack .carte-offre__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
}

/* --------------------------------------------------------------------------
   16 ter. Régime tarifaire
   -------------------------------------------------------------------------- */

/* Les deux prix sont dans le HTML ; data-tarif, posé par le script du <head>,
   décide lequel s'affiche. Par défaut le tarif habituel — il vaut six jours
   sur sept, c'est celui qu'un robot d'indexation doit retenir, et c'est celui
   qui reste affiché si le script ne s'exécute pas. */
.prix-majore {
  display: none;
}

[data-tarif='majore'] .prix-normal {
  display: none;
}

[data-tarif='majore'] .prix-majore {
  display: inline;
}
/* --------------------------------------------------------------------------
   17 bis. Curseur doré
   -------------------------------------------------------------------------- */

/* La classe n'est posée qu'une fois le curseur construit : sans JS, le curseur
   natif reste en place. */
.curseur-actif,
.curseur-actif a,
.curseur-actif button,
.curseur-actif summary,
.curseur-actif label,
.curseur-actif [role='button'] {
  cursor: none;
}

/* Exception : dans un champ, le curseur texte reste plus utile que l'ornement. */
.curseur-actif input,
.curseur-actif textarea {
  cursor: text;
}

.curseur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  will-change: transform;
}

.curseur-visible .curseur {
  opacity: 1;
}

.curseur--point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--or-clair), var(--or));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.curseur--anneau {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--or);
  /* Le liseré sombre garde l'anneau lisible sur les CTA dorés, où un or sur
     or disparaîtrait — et ce sont justement les éléments qu'on survole. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px rgba(192, 143, 59, 0.35);
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
    background 0.28s var(--ease), border-color 0.28s var(--ease),
    opacity 0.25s var(--ease);
}

/* Au survol d'un élément cliquable, l'anneau s'ouvre et se remplit. */
.curseur--anneau.est-actif {
  width: 46px;
  height: 46px;
  background: rgba(192, 143, 59, 0.14);
  border-color: var(--or-clair);
}

.curseur--anneau.est-presse {
  width: 24px;
  height: 24px;
  background: rgba(192, 143, 59, 0.26);
}

/* Le curseur est un ornement : on le retire pour qui préfère le natif. */
@media (prefers-reduced-motion: reduce) {
  .curseur--anneau {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   18. Animations d'apparition
   -------------------------------------------------------------------------- */

/* Les apparitions sont pilotées par IntersectionObserver + transition CSS, et
   non par GSAP : une transition CSS s'applique même si le rendu est gelé
   (onglet en arrière-plan), alors qu'un tween a besoin de frames. Sur un site
   dont le rôle est d'afficher une carte, du contenu resté invisible n'est pas
   une option. GSAP ne gère plus que le décor du hero. */
/* L'état de repos ne descend jamais sous 0.55 d'opacité : si l'apparition ne
   se déclenche pas (onglet suspendu, JS en échec), le texte reste parfaitement
   lisible sur le fond sombre. Un contenu de carte ne doit jamais pouvoir
   disparaître pour une raison décorative. */
.reveal {
  opacity: 0.55;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.est-revele {
  opacity: 1;
  transform: none;
}

/* Sans JS — ou si l'observateur n'est pas disponible — rien n'est amputé. */
.nojs .reveal,
.sans-anim .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__nappe {
    animation: none;
  }
}