/* ==========================================================================
   AZUR — Layout : header, footer
   ========================================================================== */


/* ── 1. Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--deep); /* opaque par défaut sur toutes les pages */
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
}

/*
 * Pages avec hero plein écran sur fond sombre — header transparent au départ.
 * azur-nav.js ajoute .is-scrolled au scroll pour rétablir le fond.
 */
.home .site-header,
.single-product .site-header,
.page-template-template-about .site-header,
.page-template-template-contact .site-header,
.error404 .site-header {
  background-color: transparent;
}

/* État au scroll — azur-nav.js */
.site-header.is-scrolled {
  background-color: var(--deep);
  backdrop-filter: blur(4px);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
}

/* Logo */
.site-logo {
  font-family: var(--font-cormorant);
  font-weight: 300;
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0.35em;
  color: var(--white);
  transition: color var(--transition-base);
}

.site-logo:hover {
  color: var(--gold-light);
}

/* Menu principal */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-menu a {
  font-family: var(--font-dm-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--warm-grey);
  transition: color var(--transition-base);
}

.nav-menu a:hover {
  color: var(--gold);
}

/* Icône panier */
.nav-cart {
  font-family: var(--font-dm-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--warm-grey);
  transition: color var(--transition-base);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-cart:hover {
  color: var(--gold);
}

.cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0; /* annule l'héritage letter-spacing: 0.2em du sélecteur nav */
}

/* Cache le compteur s'il est à zéro */
.cart-count:empty,
.cart-count[aria-hidden="true"]:not(:empty) {
  display: inline-flex;
}


/* ── 2. Contenu principal ──────────────────────────────────────────────────── */

/*
 * Compense le header fixe sur toutes les pages.
 * Exception : hero plein écran home et page produit — le contenu commence
 * intentionnellement sous le header transparent (pas de décalage voulu).
 */
.site-main {
  padding-top: var(--header-height);
  flex: 1; /* pousse le footer vers le bas quand le contenu est court */
}

/* Conteneur des pages génériques (page.php) — centrage et largeur max */
.page-content__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* Pages avec hero plein écran — pas de décalage (header transparent intentionnel) */
.home .site-main,
.single-product .site-main,
.page-template-template-about .site-main,
.page-template-template-contact .site-main,
.error404 .site-main {
  padding-top: 0;
}


/* ── 3. Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--deep);
  color: var(--warm-grey);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 6rem 3rem 5rem;
  text-align: center;
}

/* Logo footer */
.footer-logo {
  font-family: var(--font-cormorant);
  font-style: normal;
  font-weight: 300;
  font-size: 2rem;
  text-transform: none;
  letter-spacing: 0.5em;
  color: var(--white);
  line-height: 1;
}

/* Navigation principale footer */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
}

.footer-nav a {
  font-family: var(--font-dm-sans);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--warm-grey);
  transition: color var(--transition-base);
}

.footer-nav a:hover {
  color: var(--gold-light);
}

/* Filet doré entre menu principal et menu légal */
.footer-rule {
  display: block;
  width: 60px;
  height: 1px;
  background-color: var(--gold);
}

/* Menu légal — discret, 9px, une ligne */
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal-nav li {
  display: flex;
  align-items: center;
}

.footer-legal-nav li + li::before {
  content: '|';
  margin: 0 0.6rem;
  color: var(--muted);
  opacity: 0.4;
  font-size: 8px;
}

.footer-legal-nav a {
  font-family: var(--font-dm-sans);
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-legal-nav a:hover {
  color: var(--warm-grey);
}

/* Copyright */
.footer-copy {
  font-family: var(--font-dm-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  line-height: 1;
}


/* ── 3. Composants partagés — sections, grilles, cartes produit ────────────── */

/* Conteneur centré avec largeur max */
.section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* En-tête de section */
.section__header {
  text-align: center;
  margin-bottom: 4rem;
}

.section__label {
  display: block;
  font-family: var(--font-dm-sans);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 1rem;
}

.section__title {
  font-family: var(--font-cormorant);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--charcoal);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

/* Modificateur uppercase — utilisé sur "Azur en six" et "Vous aimerez aussi" */
.section__title--upper {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.section__rule {
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--gold);
  margin: 1.5rem auto 0;
}

/* Message si aucun produit */
.section__empty {
  text-align: center;
  font-family: var(--font-dm-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm-grey);
}

.section__empty--light { color: var(--muted); }

/* ── Grilles produits — masonry CSS columns ── */

/* column-gap uniquement : le gap vertical est géré par margin-bottom sur .product-card */
.products-grid {
  column-gap: 2rem;
}

.products-grid--2 { column-count: 2; }
.products-grid--3 { column-count: 3; }
.products-grid--4 { column-count: 4; }

/* ── Carte produit ── */

/* break-inside:avoid empêche la coupure d'une carte entre deux colonnes */
.product-card {
  break-inside: avoid;
  margin-bottom: 2rem;
}

.product-card__link {
  display: block;
  color: inherit;
}

/* Le cadre (.azur-framed.thin) occupe toute la largeur de la carte */
.product-card__frame {
  display: block;
  width: 100%;
}

/* Image en proportions natives — pas de recadrage, hauteurs libres */
.product-card__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bloc texte sous le cadre */
.product-card__info {
  padding: 1.25rem 0 0;
  text-align: center;
}

.product-card__name {
  font-family: var(--font-cormorant);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--charcoal);
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  transition: color var(--transition-base);
}

.product-card__link:hover .product-card__name {
  color: var(--gold);
}

.product-card__price {
  font-family: var(--font-cormorant);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

/* Override WooCommerce — le span interne hérite de la couleur et police du parent */
.product-card__price .woocommerce-Price-amount,
.product-card__price .woocommerce-Price-currencySymbol {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}


/* ==========================================================================
   RESPONSIVE — Navigation hamburger + layout
   ========================================================================== */

/* ── Bouton hamburger ── */

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000; /* au-dessus de l'overlay menu (999) */
  position: relative;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--white);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Transformation en X via aria-expanded */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Bloque le scroll du body quand le menu est ouvert */
body.nav-is-open {
  overflow: hidden;
}

/* ── Mobile ≤ 768px ── */

@media (max-width: 768px) {

  /* Affiche le hamburger */
  .nav-toggle {
    display: flex;
  }

  /* Réduit le padding du header */
  .site-nav {
    padding: 1.25rem 1.5rem;
  }

  /* Menu masqué par défaut */
  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    background-color: var(--deep);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  /* Menu ouvert */
  .nav-menu.nav-open {
    display: flex;
  }

  /* Liens du menu — grands, en Cormorant sur fond sombre */
  .nav-menu a {
    font-family: var(--font-cormorant);
    font-size: clamp(32px, 8vw, 48px);
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--white);
  }

  .nav-menu a:hover {
    color: var(--gold);
  }

  /* Compteur panier et bouton hamburger au-dessus de l'overlay */
  .nav-cart {
    z-index: 1000;
    position: relative;
  }

  /* Footer responsive */
  .footer-inner {
    padding: 4rem 1.5rem 3rem;
  }

  .footer-nav {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}