/* Pages Auteurs (/marques, /marques/*) : mêmes header mobile, menu latéral et
   cartes produits que le reste du site (index.html). Chargé après les styles
   inline de ces pages, d'où quelques !important pour écraser l'ancienne copie. */

/* ---- Tous écrans : tailles du logo et du panier comme index.html ---- */
.topbar .logo { font-size: 29px; }
.topbar .topbar-icon svg { position: static !important; }
.topbar .cart-btn svg { width: 24px; height: 24px; }
.mobile-nav, .mobile-nav-backdrop { display: none; }

/* ---- Langue (FR/EN) pour le menu et les cartes ---- */
html[lang="en"] .mobile-nav .lang-fr,
html[lang="en"] .bc-card .lang-fr { display: none !important; }
html[lang="fr"] .mobile-nav .lang-en,
html[lang="fr"] .bc-card .lang-en { display: none !important; }
html[lang] .mobile-nav .mobile-nav-lang .lang-fr,
html[lang] .mobile-nav .mobile-nav-lang .lang-en { display: inline !important; }

/* ---- Header mobile sur une ligne : [menu][loupe]  passéist.  [favoris][panier] ---- */
@media (max-width: 900px) {
  .topbar {
    padding: 0 6px !important;
    height: var(--topbar-h-mobile) !important; min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 40px 40px 1fr 40px 40px !important;
    align-items: center; gap: 0 !important;
    flex-wrap: nowrap !important;
    border-bottom-color: transparent !important;  /* plus de trait sous le header */
  }
  .topbar-right, .topbar-icons { display: contents !important; }
  .top-nav { display: none !important; }
  /* Bulle de discussion à la place de la loupe (comme index.html) */
  .topbar .topbar-icon-search, .topbar .lang-toggle { display: none !important; }
  .nav-toggle {
    display: flex !important;
    grid-column: 1; grid-row: 1;
    width: 40px; height: 40px; justify-self: center;
    align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .topbar .topbar-icon { width: 40px !important; height: 40px !important; justify-self: center; grid-row: 1; }
  .topbar .topbar-icon svg { width: 20px; height: 20px; }
  .topbar .cart-btn svg { width: 24px; height: 24px; }
  .topbar .topbar-icon-chat { grid-column: 2; }
  /* Favoris tout à droite, panier juste avant */
  .topbar .cart-btn { grid-column: 4; }
  .topbar .topbar-icon-fav { grid-column: 5; }
  /* Remonté de 3px : le centre visuel du logo (hauteur des minuscules)
     s'aligne sur celui des icônes (mesuré au pixel). */
  .topbar .logo { grid-column: 3; grid-row: 1; justify-self: center; font-size: 31px; position: relative; top: -3px; }
  body.marques-page { padding-top: calc(var(--topbar-h-mobile) + 16px) !important; }

  /* Panneau menu : glisse depuis la gauche, voile sur le reste de la page */
  .mobile-nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10,12,18,0.35);
    z-index: 260;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  }
  .mobile-nav-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; }
  .mobile-nav {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0; right: auto;
    width: min(84vw, 340px);
    /* Dégradé de transparence : plus opaque sur le bord gauche, plus
       transparent vers la droite (Tom). */
    background: linear-gradient(90deg, rgba(28,34,48,0.95) 0%, rgba(28,34,48,0.80) 55%, rgba(28,34,48,0.58) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    border-right: 1px solid var(--line);
    z-index: 261;
    transform: translateX(-100%); opacity: 1;
    visibility: hidden; pointer-events: none;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.65s;
    padding: 64px 28px calc(24px + env(safe-area-inset-bottom));
    flex-direction: column; gap: 0;
    overflow-y: auto;
  }
  .mobile-nav.open {
    transform: translateX(0);
    visibility: visible; pointer-events: auto;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .mobile-nav > a {
    color: var(--ink); text-decoration: none;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    padding: 14px 0; align-self: flex-start;
  }
  .mobile-nav > a.active {
    font-weight: 700; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 6px;
  }
  .mobile-nav-close {
    position: absolute; top: 7px; left: 14px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .mobile-nav-close svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; fill: none; }
  .mobile-nav-foot {
    margin-top: auto; padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .mobile-nav-contact {
    color: var(--ink); text-decoration: none;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    padding: 8px 0;
  }
}
body.no-scroll { overflow: hidden; }

/* ---- Carrousel "Notre sélection" : cartes au format Boutique ----
   REGLE FIGEE par Tom, voir PHOTOS.md : photo 1 de la fiche, cadre 3:4, fond
   blanc, contain, coins 6px ; texte comme les cartes de la Boutique.
   Les cartes sont générées au build (netlify/plugins/generate-product-pages). */
.carousel .bc-card {
  flex: 0 0 200px;
  background: transparent;
  color: var(--ink); text-decoration: none;
  scroll-snap-align: start;
  display: block;
}
.carousel .bc-card:hover { transform: none; }
.bc-img {
  aspect-ratio: 3 / 4;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.bc-img img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center;
}
.bc-body { padding: 12px 0 0; line-height: 1.45; }
.bc-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 800;
  margin-bottom: 6px;
}
.bc-brand .bc-brand-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-price {
  flex: 0 0 auto;
  padding: 3px 9px;
  background: #f4f1ec; color: #1C2230;
  font-size: 10px; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  border-radius: 4px;  /* biseau + coins arrondis, comme index.html */
  white-space: nowrap;
}
.bc-name {
  font-family: var(--font-sans);
  font-size: 14px; color: var(--text-dim); font-weight: 300;
  font-style: italic; letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.bc-meta {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px; color: var(--text-mute); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .carousel .bc-card { flex-basis: 42vw; }
  .bc-brand { font-size: 9px; gap: 6px; margin-bottom: 4px; }
  .bc-name { font-size: 13px; margin-bottom: 4px; }
  .bc-body { padding-top: 8px; }
  .bc-meta { padding-top: 4px; }
}

/* ---- Bouton « Voir toutes les pièces <marque> » : même style que EXPLORER
   de l'accueil (.hero-cta) : bleu ardoise, texte crème, coins 6px. ---- */
.cta-shop { text-align: center; margin-top: 36px; }
.cta-shop a {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px !important;
  background: #5a7593 !important; color: #f4f1ec !important;
  border: none !important; border-radius: 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important; font-weight: 500 !important;
  text-transform: uppercase; letter-spacing: var(--tracking-wide) !important;
  text-decoration: none !important; line-height: 1.4;
  max-width: 100%;
  transition: background 0.25s ease, transform 0.35s ease;
}
.cta-shop a::after { content: '→'; font-size: 14px; font-weight: 300; }
.cta-shop a:hover { background: #738ba8 !important; transform: scale(1.02); }
@media (max-width: 600px) {
  .cta-shop a { padding: 13px 22px !important; font-size: 11px !important; }
}

/* ---- Lumière et relief (comme index.html) : 2 Ombre, 3 Liseré, 5 Contraste ---- */
.bc-img { box-shadow: 0 26px 40px -12px rgba(0,0,0,0.85), 0 6px 14px rgba(0,0,0,0.45); }
.carousel { padding-bottom: 40px !important; }  /* place pour l'ombre des cartes */
.topbar { border-bottom-color: transparent !important; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.7); }
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  /* Filet fondu : invisible sur les bords, lumineux seulement au centre */
  background: linear-gradient(90deg, transparent 0%, transparent 10%, rgba(244,241,236,0.12) 28%, rgba(244,241,236,0.55) 50%, rgba(244,241,236,0.12) 72%, transparent 90%, transparent 100%);
  pointer-events: none;
}
.mobile-nav { box-shadow: inset -1px 0 0 rgba(255,255,255,0.35), 24px 0 50px rgba(0,0,0,0.55); border-right-color: transparent !important; }
.cta-shop a { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 24px -8px rgba(0,0,0,0.7); }
:root { --text-dim: #f2eee8; --text-mute: #d4d1cb; }
.bc-brand-name { color: #ffffff; }
.bc-name { color: #f2eee8; }
.bc-meta { color: #d4d1cb; }

/* ---- Verre dépoli progressif du menu (comme index.html) ---- */
.mobile-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.mobile-nav::before, .mobile-nav::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
.mobile-nav::before { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mobile-nav::after {
  -webkit-backdrop-filter: blur(28px) saturate(130%); backdrop-filter: blur(28px) saturate(130%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 100%);
}
.mobile-nav.open::before, .mobile-nav.open::after { opacity: 1; }

/* ---- Étiquettes de prix : biseau + coins arrondis 4px, partout ---- */
.product-price-wrap, .detail-price-wrap, .bc-price { border-radius: 4px; }

/* ---- Bulle de chat fixe, plus de secousse (comme index.html) ---- */
.topbar-icon-chat svg { animation: none !important; }

/* ---- Tirer vers le bas en haut de page = rafraîchir, comme sur tout le site
   (les styles inline de ces pages bloquaient le geste natif) ---- */
html, body { overscroll-behavior-y: auto !important; }

/* Bas de page : typo du site (Inter), minuscules, plus petit et plus discret (Tom) */
.footer { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0.01em !important;
  font-size: 12px !important; font-weight: 400; color: var(--text-mute); border-top-color: rgba(244,241,236,0.08) !important; }
.footer a { opacity: 0.75; }
@media (max-width: 900px) {
  .footer, body[data-page="home"] .footer { font-size: 11.5px !important; gap: 8px !important; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) !important; }
  .footer-nav { gap: 18px !important; }
}