/* =====================================================================
   belugamarseille.fr — styles
   Mobile-first. Importe tokens.css pour les variables et @font-face.
   ===================================================================== */

/* =====================================================================
   Reset minimal (annule les marges body par défaut du navigateur)
   ===================================================================== */
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   A11y : skip link et visually-hidden
   ===================================================================== */
.bg-skip {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--choco);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.bg-skip:focus {
  top: 8px;
}

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

/* =====================================================================
   Layout : wrapper centré
   ===================================================================== */
.bg-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
@media (min-width: 540px) {
  .bg-wrap { padding: 0 24px 64px; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.bg-hero {
  text-align: center;
  padding: 40px 8px 40px;
}
.bg-hero__logo {
  display: block;
  margin: 0 auto;
}
.bg-hero__logo img {
  width: clamp(150px, 40vw, 200px);
  height: auto;
  margin: 0 auto;
  display: block;
}
.bg-hero__tag {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 4vw, 1.7rem);
  color: var(--terracotta);
  margin: 4px 0 4px;
  line-height: 1.05;
  font-weight: 600;
}
.bg-hero__sub {
  font-size: var(--fs-sm);
  color: var(--choco-soft);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: 500;
}

/* Status pill */
.bg-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.bg-status__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--open);
  box-shadow: 0 0 0 4px rgba(46, 125, 91, 0.15);
  animation: bg-pulse 2s infinite;
}
.bg-status.is-closed .bg-status__dot {
  background: var(--closed);
  box-shadow: 0 0 0 4px rgba(177, 75, 75, 0.15);
}
@keyframes bg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* =====================================================================
   Eyebrow (labels ALL CAPS)
   ===================================================================== */
.bg-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--choco-soft);
  font-weight: 600;
  margin: 0 0 6px;
}
.bg-eyebrow--terracotta { color: var(--terracotta); }
.bg-eyebrow--light { color: rgba(255, 255, 255, 0.55); }

.bg-section-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--choco-soft);
  font-weight: 500;
  margin: 32px 0 12px;
  text-align: center;
}

/* =====================================================================
   GRID + CARD BASE
   ===================================================================== */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 540px) {
  .bg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

.bg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
a.bg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(61, 41, 20, 0.2);
}
a.bg-card:active { transform: translateY(0); }

.bg-card--wide { grid-column: 1 / -1; }

.bg-card__icon {
  width: 26px;
  height: 26px;
  color: var(--choco);
}
.bg-card__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.bg-card__sub {
  font-size: var(--fs-sm);
  color: var(--choco-soft);
  margin: 0;
  line-height: 1.45;
}

/* =====================================================================
   CARD ADDRESS (chocolat + mini-map)
   ===================================================================== */
.bg-card--address {
  padding: 0;
  background: var(--choco);
  color: #fff;
  border-color: var(--choco);
}
.bg-minimap {
  display: block;
  width: 100%;
  height: 170px;
  border: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.bg-address__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  color: #fff;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--t-fast) var(--ease);
}
.bg-address__body:hover { background: rgba(255, 255, 255, 0.04); }
.bg-address__body .bg-eyebrow {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.bg-address__title {
  font-size: clamp(1.1rem, 1.04rem + 0.29vw, 1.25rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: #fff;
}
.bg-address__sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  margin: 4px 0 0;
}
.bg-address__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.bg-address__alt {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}
.bg-address__alt-btn {
  flex: 1;
  padding: 9px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  transition: background var(--t-fast) var(--ease);
}
.bg-address__alt-btn:hover { background: rgba(255, 255, 255, 0.16); }

/* =====================================================================
   CARD TEL (terracotta plein)
   ===================================================================== */
.bg-card--tel {
  background: var(--terracotta);
  color: #fff;
  border-color: var(--terracotta);
}
.bg-card--tel .bg-card__title,
.bg-card--tel .bg-card__icon { color: #fff; }
.bg-card--tel .bg-card__sub { color: rgba(255, 255, 255, 0.88); }

/* =====================================================================
   CARD REVIEWS (étoiles + CTA chocolat)
   ===================================================================== */
.bg-card--reviews .bg-card__icon { color: var(--gold); }
.bg-stars {
  display: inline-flex;
  gap: 2px;
  margin: 2px 0 4px;
}
.bg-stars svg { display: block; }
.bg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 9px 14px;
  background: var(--choco);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: background var(--t-fast) var(--ease);
}
.bg-btn-primary:hover { background: var(--choco-deep); }

/* =====================================================================
   CARD HOURS (today)
   ===================================================================== */
.bg-hours__today {
  font-weight: 800;
  font-size: clamp(1.15rem, 1.06rem + 0.38vw, 1.35rem);
  color: var(--choco);
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bg-link {
  font-size: 0.78rem;
  color: var(--choco);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: auto;
  display: inline-block;
  padding-top: 8px;
}

/* =====================================================================
   CARD USP 60 PARFUMS (image à droite)
   ===================================================================== */
.bg-card--usp {
  padding: 0;
  background: linear-gradient(135deg, var(--cream-warm) 0%, #F2D9B5 100%);
  border-color: var(--gold);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 220px;
  align-items: stretch;
  gap: 0;
}
.bg-usp__txt {
  padding: 22px 18px 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.bg-usp__big {
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  color: var(--choco);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 2px 0;
}
.bg-usp__hand {
  font-family: var(--font-hand);
  color: var(--terracotta);
  font-size: clamp(1.1rem, 1.01rem + 0.38vw, 1.3rem);
  line-height: 1;
  margin: 0 0 8px;
  transform: rotate(-1deg);
  font-weight: 600;
}
.bg-usp__photo {
  position: relative;
  overflow: hidden;
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  min-height: 200px;
}
.bg-usp__photo picture,
.bg-usp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg-usp__photo-cap {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 0.89rem + 0.29vw, 1.1rem);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font-weight: 600;
}
@media (max-width: 539px) {
  .bg-card--usp { grid-template-columns: 1fr; }
  .bg-usp__photo {
    aspect-ratio: 4 / 3;
    border-radius: 0 0 var(--radius) var(--radius);
    min-height: 0;
  }
}

/* =====================================================================
   CARD MENU (chocolat CTA fort)
   ===================================================================== */
.bg-card--menu {
  background: var(--choco);
  border-color: var(--choco);
  color: #fff;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.bg-card--menu .bg-card__sub { color: rgba(255, 255, 255, 0.78); }
.bg-menu__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.bg-menu__icon svg { width: 22px; height: 22px; }
.bg-menu__body { min-width: 0; }
.bg-menu__title {
  margin: 0 0 4px;
  font-size: clamp(1rem, 0.94rem + 0.29vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.bg-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  transition: transform var(--t-fast) var(--ease);
}
a.bg-card--menu:hover .bg-menu__cta { transform: translateX(2px); }
@media (max-width: 539px) {
  .bg-card--menu { grid-template-columns: 1fr; }
  .bg-menu__cta { justify-self: start; }
}

/* =====================================================================
   SOCIAL ROW (Insta + WhatsApp + TripAdvisor + TikTok)
   ===================================================================== */
.bg-social {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 540px) {
  .bg-social { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .bg-social { grid-template-columns: repeat(4, 1fr); }
}
.bg-social__card { padding-top: 16px; }
.bg-social__logo {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.bg-social__logo svg {
  width: 32px;
  height: 32px;
}
.bg-social__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--choco);
  transition: color var(--t-fast) var(--ease);
}
a.bg-social__card:hover .bg-social__cta { color: var(--terracotta); }

/* =====================================================================
   CARD EVENTS (cream-warm + bordure dashed)
   ===================================================================== */
.bg-card--events {
  background: var(--cream-warm);
  border-color: var(--gold);
  border-style: dashed;
  border-width: 1.5px;
}
.bg-card--events .bg-card__icon { color: var(--basil); }

/* =====================================================================
   GALERIE
   ===================================================================== */
.bg-gallery { margin: 8px 0 8px; }
.bg-gallery__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 540px) {
  .bg-gallery__row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.bg-gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.bg-gallery__item picture,
.bg-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg-gallery__item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-hover);
}
.bg-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(42, 27, 13, 0.65));
  pointer-events: none;
}
.bg-gallery__cap {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  color: #fff;
  font-family: var(--font-hand);
  font-size: clamp(0.95rem, 0.89rem + 0.29vw, 1.1rem);
  font-weight: 600;
  line-height: 1.1;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* =====================================================================
   PRESSE
   ===================================================================== */
.bg-press {
  margin-top: 24px;
  padding: 26px 22px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
}
.bg-press__label {
  text-align: center;
  margin: 0 0 14px;
}
.bg-press__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  align-items: baseline;
}
.bg-press__item {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  font-weight: 600;
  color: var(--choco);
  text-decoration: none;
  line-height: 1.1;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  padding-bottom: 2px;
}
.bg-press__item:hover {
  border-bottom-color: var(--terracotta);
  color: var(--terracotta);
}

/* =====================================================================
   HOURS DETAIL (table semaine)
   ===================================================================== */
.bg-hours-detail {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bg-hours-detail .bg-eyebrow {
  text-align: center;
  margin: 0 0 12px;
}
.bg-hours {
  display: inline-block;
  text-align: left;
  background: var(--surface);
  padding: 14px 22px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  min-width: 260px;
  box-shadow: var(--shadow);
}
.bg-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
  color: var(--choco-soft);
}
.bg-hours__row.is-today {
  font-weight: 700;
  color: var(--choco);
}
.bg-status--inline {
  display: inline-flex;
  margin: 0 auto 14px;
}

/* CTA hero, redirige vers la carte des glaces */
.bg-cta-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 12px 22px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bg-cta-hero svg {
  transition: transform var(--t-fast) var(--ease);
}
.bg-cta-hero:hover,
.bg-cta-hero:focus-visible {
  background: var(--choco);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.bg-cta-hero:hover svg,
.bg-cta-hero:focus-visible svg {
  transform: translateX(3px);
}
.bg-cta-hero:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
.bg-cta-hero:active {
  transform: translateY(0);
}
@media (min-width: 540px) {
  .bg-cta-hero {
    margin: 22px auto 0;
    padding: 13px 26px;
    font-size: 1rem;
  }
}

/* =====================================================================
   FOOTER MINIMAL
   ===================================================================== */
.bg-footer {
  margin-top: 36px;
  padding: 16px 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--choco-soft);
}
.bg-footer p { margin: 0; }
.bg-footer a {
  color: var(--choco);
  border-bottom: 1px dotted var(--choco-soft);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.bg-footer a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* Bandeau legal (mentions + politique de confidentialite) */
.bg-footer__legal {
  margin-top: 6px !important;
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Bouton "Gerer les cookies" : meme aspect que les liens texte du footer */
.bg-footer__cookies {
  font: inherit;
  color: var(--choco);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--choco-soft);
  padding: 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bg-footer__cookies:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.bg-footer__cookies:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* =====================================================================
   BARRE DE NAVIGATION FIXE (apparait au scroll, facon appli)
   Masquee tout en haut ; visible quand on remonte ; cachee quand on descend.
   ===================================================================== */
.bg-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 14px rgba(27, 27, 27, 0.06);
  transform: translateY(-100%);
  transition: transform var(--t-base) var(--ease);
  will-change: transform;
}
.bg-nav.is-visible { transform: translateY(0); }
.bg-nav__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 540px) {
  .bg-nav__inner { padding: 10px 24px; }
}
.bg-nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.bg-nav__brand img {
  height: 30px;
  width: auto;
  display: block;
}
.bg-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.bg-nav__links a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--choco);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bg-nav__links a:hover { color: var(--terracotta); }
.bg-nav__links a[aria-current="page"] {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.bg-nav__links a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .bg-nav { transition: none; }
}

/* Spacer : reserve la hauteur de la barre fixe dans le flux (pages ou la
   barre est visible d'emblee), pour que le contenu ne passe pas dessous au
   chargement. Absent sur l'accueil (barre masquee en haut). */
.bg-nav__spacer { height: 49px; }
@media (min-width: 540px) {
  .bg-nav__spacer { height: 51px; }
}

/* Hauteur de barre constante (= spacer), que le logo soit affiche ou non. */
.bg-nav__inner { min-height: 30px; }
/* Mobile : faire tenir 4 liens. Sous 540px on masque le logo de la barre
   (l'accueil reste accessible par le lien Accueil et le hero porte la
   marque) ; liens centres, ecart reduit. */
@media (max-width: 539px) {
  .bg-nav__brand { display: none; }
  .bg-nav__inner { justify-content: center; }
  .bg-nav__links { gap: 16px; }
}
/* Accueil : logo de barre masque (desktop comme mobile) pour ne pas
   dupliquer le grand hero-logo ; liens centres. */
.bg-nav--home .bg-nav__brand { display: none; }
.bg-nav--home .bg-nav__inner { justify-content: center; }

/* =====================================================================
   RESPONSIVE TUNING (desktop large)
   ===================================================================== */
@media (min-width: 768px) {
  .bg-hero { padding-bottom: 40px; }
  .bg-card { padding: 20px; }
  .bg-card--menu { padding: 20px 22px; }
}