/* ============================================================================
   BVL Core — AFFINAGE "Editorial Noir" (chargé automatiquement sur tout le site).
   Objectif : discipliner l'acid lime + fiabiliser la lisibilité mobile,
   SANS modifier le thème (tout est ici ; se retire en désactivant le plugin).
   Cible les classes réelles du thème BVL Store.
   ============================================================================ */

/* ── 1. DISCIPLINE DE L'ACID LIME ──────────────────────────────────────────
   L'acid (#D8FF3D) reste un ACCENT (point ●, blink, séparateur, soulignement,
   focus). On le retire des gros boutons pleins, qui passent en noir. */
.btn.btn--acid,
a.btn--acid {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
  position: relative;
}
/* fine arête acid en bas du bouton = signature discrète */
.btn.btn--acid::after,
a.btn--acid::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--acid);
}
.btn.btn--acid:hover,
a.btn--acid:hover {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--paper) !important;
}

/* L'acid autorisé sur les micro-accents seulement (déjà le cas, on sécurise) */
.eyebrow .dot,
.topbar .blink,
.marquee .sep,
.store-pin-card .eyebrow span { background: var(--acid) !important; }

/* ── 2. LISIBILITÉ DU TEXTE SECONDAIRE ─────────────────────────────────────
   Le gris à 55% est un peu faible ; on remonte le contraste. */
.eyebrow,
.mono { color: rgba(10,10,10,.64); }

/* ── 3. LISIBILITÉ MOBILE ──────────────────────────────────────────────────
   Les titres géants (jusqu'à 220px) et le mono à 9-10px sont superbes sur
   desktop mais serrent sur smartphone (>80% du trafic). On recalibre. */
@media (max-width: 768px) {
  h1 { font-size: clamp(40px, 11vw, 64px) !important; line-height: .92 !important; }
  h2 { font-size: clamp(30px, 8vw, 46px) !important; }
  h3 { font-size: clamp(24px, 6vw, 34px) !important; }

  /* mono jamais en dessous de 11px pour rester lisible */
  .eyebrow,
  .mono,
  .product-brand,
  .stat-k { font-size: 11px !important; letter-spacing: .14em !important; }

  /* confort tactile : cibles ≥ 48px */
  .btn { min-height: 50px; }
  .header-utils button { min-width: 44px; min-height: 44px; }
}

/* ── 4. ACCESSIBILITÉ : focus visible partout ──────────────────────────────
   (utile clavier + critère SEO/qualité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

/* ── 5. SYSTÈME DE MARGES MOBILE UNIFIÉ ─────────────────────────────────────
   Source UNIQUE du rythme mobile (>80% du trafic). Deux règles simples :
   • Gouttière latérale = 20px partout (les bords s'alignent en scrollant).
   • Rythme vertical entre grandes sections = 56px (au lieu de 96-120px desktop).
   Tout est en !important car on surcharge les marges inline du thème. */
@media (max-width: 768px) {

  /* 5a — GOUTTIÈRE LATÉRALE UNIQUE (20px) ----------------------------------
     hero / footer / header / sec-pad utilisent déjà 20px. On aligne le reste. */
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .pullquote { padding: 8px 20px 0 !important; }       /* Edito : 48px → 20px */
  .pullquote-grid { padding: 28px 0 !important; }       /* moins d'air interne */

  /* 5b — RYTHME VERTICAL ENTRE SECTIONS (56px) -----------------------------
     Cible les marges inline du thème (Drop, Lookbook, Quatre univers, Marques)
     + les sections à marge CSS (Services, Boutique, Footer). */
  section[style*="margin-top:96px"],
  section[style*="margin-top:120px"] { margin-top: 56px !important; }
  .services { margin-top: 56px !important; }
  .store    { margin-top: 56px !important; }
  /* Footer « BVL STORE » remonté : moins de vide avant le mast (visible surtout après la pagination boutique) */
  .site-footer { margin-top: 28px !important; padding-top: 28px !important; }

  /* 5c — ESPACES INTERNES TROP GÉNÉREUX sur mobile ------------------------- */
  .service h3 { margin-top: 40px !important; }           /* 64px → 40px */
  .footer-cols { margin-top: 32px !important; }          /* sous le grand logo footer */

  /* 5d — HERO + MARQUEE compactés ----------------------------------------- */
  .hero { padding-top: 14px !important; padding-bottom: 20px !important; }
  .hero .eyebrow { font-size: 9px !important; letter-spacing: .12em !important; } /* « VOL. 26… » moins gros → ne pousse plus le titre */
  .marquee { margin-top: 32px !important; }              /* était 96px de vide au-dessus */
  .cats { margin-top: 24px !important; }                 /* resserre titre Rayons → vignettes */
}

/* 5e — BUG : vignettes catégories invisibles en mobile/tablette -------------
   .cat n'a pas de hauteur (contenu en position:absolute) → on lui en donne une
   pour que les 5 catégories réapparaissent (placeholders rayés jusqu'aux vraies
   images de catégorie). */
@media (max-width: 1024px) {
  .cat { aspect-ratio: 4 / 3; min-height: 130px; }
}