/*
Theme Name:   EMG Pro
Theme URI:    https://emg-pro.fr/
Template:     storefront
Author:       EMG
Author URI:   https://emg-pro.fr/
Description:  Thème enfant Storefront pour la boutique EMG. Phase 7 — pleine largeur (header + hero), H1 plus grand, italique renforcé, layout 2 colonnes garanti dès tablette.
Version:      0.4.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  emg-pro
Tags:         e-commerce, woocommerce, dark, professional
*/

/* =========================================================
   Design tokens — miroir 1:1 de emg-projet/tailwind.config.ts
   Phase 3 : réciprocité visuelle EMG ↔ shop-EMG
   ========================================================= */
:root {
  /* Brand palette (dark surfaces) */
  --emg-dark:           #17181c;
  --emg-dark-soft:      #1f2024;
  --emg-dark-softer:    #2a2c32;
  --emg-black:          #0d0d0e;

  /* Aliases historiques (rétro-compat) */
  --emg-primary:        var(--emg-dark);
  --emg-primary-soft:   var(--emg-dark-soft);
  --emg-primary-softer: var(--emg-dark-softer);
  --emg-secondary:      var(--emg-black);
  --emg-accent:         #ffffff;
  --emg-accent-contrast: var(--emg-dark);

  /* Neutrals (gray scale) */
  --emg-gray-50:        #f7f7f8;
  --emg-gray-100:       #eeeef0;
  --emg-gray-200:       #d9d9dd;
  --emg-gray-400:       #8b8b92;
  --emg-gray-500:       #6b6b72;
  --emg-gray-600:       #4a4a50;
  --emg-gray-800:       #2a2a2e;

  /* White overlays (whiteDim*) — full set */
  --emg-white-06:       rgba(255,255,255,0.06);
  --emg-white-08:       rgba(255,255,255,0.08);
  --emg-white-10:       rgba(255,255,255,0.10);
  --emg-white-14:       rgba(255,255,255,0.14);
  --emg-white-18:       rgba(255,255,255,0.18);
  --emg-white-28:       rgba(255,255,255,0.28);
  --emg-white-35:       rgba(255,255,255,0.35);
  --emg-white-40:       rgba(255,255,255,0.40);
  --emg-white-45:       rgba(255,255,255,0.45);
  --emg-white-55:       rgba(255,255,255,0.55);
  --emg-white-65:       rgba(255,255,255,0.65);
  --emg-white-78:       rgba(255,255,255,0.78);

  /* Typography — Inter only (alignement strict avec emg-projet) */
  --emg-font-body:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --emg-font-heading:   var(--emg-font-body);

  /* Type scale (mirror tailwind fontSize) */
  --emg-fs-micro:       10px;
  --emg-fs-eyebrow:     11px;
  --emg-fs-button:      13px;
  --emg-fs-nav:         13.5px;
  --emg-fs-small:       12.5px;
  --emg-fs-body:        14px;
  --emg-fs-lead:        15px;
  --emg-fs-h3:          20px;
  --emg-fs-stat:        34px;
  --emg-fs-h2:          36px;
  --emg-fs-h2intro:     38px;
  --emg-fs-h1-mobile:   34px;
  --emg-fs-h1:          54px;

  /* Radii (mirror borderRadius) */
  --emg-radius-btn:     8px;
  --emg-radius-cta:     10px;
  --emg-radius-stat:    12px;
  --emg-radius-card:    14px;
  --emg-radius-hero:    18px;

  /* Glass header (parité avec .glass-header de globals.css) */
  --emg-glass-bg:       rgba(23, 24, 28, 0.68);
  --emg-glass-blur:     20px;
  --emg-glass-border:   var(--emg-white-06);
}

/* =========================================================
   Base — force Inter partout, écrase Storefront
   ========================================================= */
html,
body,
button,
input,
select,
optgroup,
textarea,
.site,
.site-content,
.site-header,
.site-footer,
.entry-content,
.widget,
.woocommerce,
.woocommerce-page {
  font-family: var(--emg-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--emg-dark);
  background-color: #ffffff;
  font-size: var(--emg-fs-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.site-header .site-branding,
.site-header .main-navigation a,
.entry-title,
.page-title,
.product_title,
.woocommerce-loop-product__title {
  font-family: var(--emg-font-body) !important;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--emg-dark);
}

h1, .entry-title, .page-title { font-size: var(--emg-fs-h1-mobile); letter-spacing: -0.03em; line-height: 1.05; }
@media (min-width: 768px) {
  h1, .entry-title, .page-title { font-size: var(--emg-fs-h1); }
}
h2 { font-size: var(--emg-fs-h2); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: var(--emg-fs-h3); line-height: 1.3; font-weight: 700; }

a { color: var(--emg-dark); }
a:hover, a:focus { color: var(--emg-gray-600); }

/* =========================================================
   Header / Footer (dark surfaces)
   ========================================================= */
.site-header {
  background-color: var(--emg-dark);
  color: #ffffff;
  border-bottom: 1px solid var(--emg-white-06);
}
.site-header a,
.site-header .main-navigation a { color: #ffffff; }

.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus { color: var(--emg-white-78); }

/* Phase 3 : masque le titre/description texte du header
   (le logo image prendra le relais via le Customizer) */
.site-header .site-branding .site-title,
.site-header .site-branding .site-description {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Si un logo image est défini, on le laisse visible normalement */
.site-header .site-branding .custom-logo-link { display: inline-block; }

.site-footer {
  background-color: var(--emg-dark);
  color: var(--emg-white-55);
}
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--emg-white-78); }

/* =========================================================
   Buttons / CTA — alignés sur Button.primary du Next.js
   ========================================================= */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--emg-accent);
  color: var(--emg-accent-contrast);
  border: 1px solid var(--emg-accent);
  border-radius: var(--emg-radius-cta);
  font-family: var(--emg-font-body);
  font-size: var(--emg-fs-button);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  text-transform: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--emg-dark);
  color: #ffffff;
  border-color: var(--emg-dark);
}

.button:hover,
.woocommerce a.button:hover { background-color: var(--emg-gray-100); }
.button.alt:hover,
.woocommerce a.button.alt:hover { background-color: var(--emg-dark-soft); border-color: var(--emg-dark-soft); }

/* =========================================================
   Cards (produits, blocs)
   ========================================================= */
.woocommerce ul.products li.product,
.card {
  background: #ffffff;
  border: 1px solid var(--emg-gray-200);
  border-radius: var(--emg-radius-card);
}

.woocommerce ul.products li.product .price,
.price { color: var(--emg-dark); font-weight: 700; }

/* =========================================================
   Phase 6 : header chirurgical (logo + menu + mini-cart)
   ========================================================= */
.site-header {
  padding: 0.6rem 0;
}
.site-header .col-full {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.site-header .site-branding {
  margin: 0;
  flex: 0 0 auto;
}
.site-header .site-branding .custom-logo-link img,
.site-header .site-logo-anchor img {
  height: 32px;
  width: auto;
  max-height: 32px;
}
.site-header .main-navigation {
  flex: 1 1 auto;
  margin: 0;
}
.site-header .main-navigation ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-start;
}
.site-header .main-navigation a {
  font-size: var(--emg-fs-nav);
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 16px;
  display: inline-block;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation a:hover {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}
.site-header .site-search,
.site-header .secondary-navigation,
.site-header .header-widget-region { display: none !important; }

.site-header .site-header-cart .cart-contents {
  background: var(--emg-white-06);
  border: 1px solid var(--emg-white-14);
  color: #ffffff !important;
  border-radius: var(--emg-radius-btn);
  padding: 9px 14px;
  font-size: var(--emg-fs-button);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header .site-header-cart .cart-contents:hover { background: var(--emg-white-10); }
.site-header .site-header-cart { margin: 0; flex: 0 0 auto; }
.site-header .site-header-cart .widget_shopping_cart { display: none; }

/* =========================================================
   Phase 6 : Hero noir pur (#000) + radial glow + grille technique
   Parité avec emg-projet/src/components/Hero.tsx
   ========================================================= */
.emg-hero-root {
  position: relative;
  background: #000000 !important;
  overflow: hidden;
  isolation: isolate;
}
.emg-hero-root::before {
  /* Radial glow discret en haut-droite (parité Hero.tsx) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 800px 500px at 75% 10%,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.02) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.emg-hero-root::after {
  /* Grille technique masquée (très discrète) */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.emg-hero-root > .e-con-inner,
.emg-hero-root > .elementor-container { position: relative; z-index: 1; }

/* =========================================================
   Form fields
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  font-family: var(--emg-font-body);
  border: 1px solid var(--emg-gray-200);
  border-radius: var(--emg-radius-btn);
  background-color: #ffffff;
  color: var(--emg-dark);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--emg-dark);
  outline: none;
  box-shadow: 0 0 0 3px var(--emg-white-14);
}

/* =========================================================
   Phase 7 : pleine largeur stricte (header + content)
   Storefront contraint tout dans .col-full (max 1860px + ~4.3% padding).
   On casse cette contrainte pour matcher la vitrine EMG (Full Width).
   ========================================================= */
.site,
.site-content,
.content-area,
#primary,
.site-main {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header : étire .col-full sur 100% avec un padding latéral tenu.
   box-sizing: border-box pour que le padding ne déborde pas. */
.site-header .col-full,
.storefront-primary-navigation .col-full {
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .site-header .col-full,
  .storefront-primary-navigation .col-full {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Footer : on conserve le confort de lecture (boxed naturel) */
.site-footer .col-full {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* Le main contient l'Elementor : aucune marge ne doit subsister */
.site-main .col-full,
.site-content .col-full {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Storefront ajoute un padding-top conséquent à .site-content qui crée
   un bandeau blanc entre header et hero. On le supprime sur les pages
   Elementor full-width pour coller le hero au header. */
.elementor-page .site-content,
.page-template-elementor_header_footer .site-content,
.home .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* La nav primaire Storefront est intégrée au header sombre.
   On garde son fond transparent pour qu'elle hérite du noir du header. */
.storefront-primary-navigation {
  background-color: transparent !important;
  margin: 0 !important;
}

/* Storefront ajoute margin-bottom: 3.706325em (~59px) sur .site-header.
   Sur les pages full-width Elementor, on veut que le hero soit collé. */
.site-header {
  margin-bottom: 0 !important;
}

/* Storefront wrappe parfois entry-content avec padding — on le neutralise
   uniquement pour les pages Elementor en pleine largeur. */
.page-template-elementor_header_footer .entry-content,
.page-template-elementor_header_footer article,
.page-template-elementor_header_footer .hentry,
.elementor-page .entry-content,
.elementor-page article {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   Phase 7 : header — répartition logo (gauche) / nav+cart (droite)
   ========================================================= */
.site-header .col-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}
.site-header .site-branding {
  flex: 0 0 auto;
  margin-right: auto;
}
.site-header .main-navigation {
  flex: 0 1 auto;
  margin: 0;
}
.site-header .main-navigation ul {
  justify-content: flex-end;
}
.site-header .site-header-cart {
  flex: 0 0 auto;
  margin-left: 16px;
}

/* =========================================================
   Phase 7 : Hero — H1 plus grand, italique renforcé,
   layout 2 colonnes dès 768px, padding réduit.
   ========================================================= */
.emg-hero-root {
  padding-top: 120px !important;
  padding-bottom: 88px !important;
}
@media (max-width: 1024px) {
  .emg-hero-root {
    padding-top: 96px !important;
    padding-bottom: 72px !important;
  }
}
@media (max-width: 640px) {
  .emg-hero-root {
    padding-top: 72px !important;
    padding-bottom: 56px !important;
  }
}

/* H1 hero : on pousse à 64px desktop, 44px tablette, 32px mobile.
   La règle force la taille même si Elementor inline plus petit. */
.emg-hero-root h1.elementor-heading-title {
  font-size: 64px !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}
@media (max-width: 1024px) {
  .emg-hero-root h1.elementor-heading-title {
    font-size: 48px !important;
  }
}
@media (max-width: 640px) {
  .emg-hero-root h1.elementor-heading-title {
    font-size: 34px !important;
  }
}

/* Italique du H1 : on assure la visibilité quelle que soit la police
   chargée (Inter italic via Google Fonts) */
.emg-hero-root h1.elementor-heading-title i,
.emg-hero-root h1.elementor-heading-title em {
  font-style: italic !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Force layout 2 colonnes dès 768px : on cible le wrap intérieur
   uniquement (et pas les colonnes elles-mêmes, qui doivent rester
   en flex-direction column pour empiler badge/H1/paras/CTAs). */
@media (min-width: 768px) {
  .emg-hero-root .elementor-element-herowrap10,
  .emg-hero-root > .e-con-inner > .e-con.e-con-boxed {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
  /* Largeurs explicites : Elementor `_flex_size: grow` + image
     intrinsèque large faisaient déborder colR. On force 50/50. */
  .emg-hero-root .elementor-element-herocolL10,
  .emg-hero-root .elementor-element-herocolR10 {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  /* Image hero : occupe tout sa colonne sans déborder */
  .emg-hero-root .elementor-element-heroimg11 img {
    width: 100% !important;
    height: auto !important;
    display: block;
    max-width: 100% !important;
  }
}