/*
Theme Name: Exclusive Magic Shop (enfant Astra)
Template: astra
Description: Thème enfant Astra pour exclusivemagicshop.com — fond encre, laiton, velours.
Version: 1.9
*/

:root {
  --ink: #14151c;
  --ink-panel: #1c1e28;
  --brass: #b98a3d;
  --brass-light: #d9ad5f;
  --brass-dim: #8a6a35;
  --velvet: #6a2331;
  --paper: #ece6d8;
  --paper-dim: #b9b3a3;
  --line: rgba(217, 173, 95, 0.22);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Base */
body {
  background:
    radial-gradient(ellipse 900px 600px at 50% -8%, rgba(217,173,95,0.10), transparent 60%),
    radial-gradient(ellipse 1200px 900px at 85% 15%, rgba(106,35,49,0.16), transparent 55%),
    var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
}
a { color: var(--brass-light); }
h1, h2, h3, h4 { font-family: var(--serif) !important; color: var(--paper) !important; }

/* Astra header/footer areas */
.ast-container, .site-header, .site-footer, .ast-footer-overlay {
  background: transparent;
}
.main-header-bar, .site-header {
  background: rgba(20,21,28,0.92) !important;
  border-bottom: 1px solid var(--line) !important;
}
.main-header-bar .site-title a, .ast-builder-menu a {
  color: var(--paper) !important;
}
.ast-builder-menu a:hover { color: var(--brass-light) !important; }

/* ---------- Menu mobile (panneau qui s'ouvre avec l'icône ☰) ----------
   Le texte du menu est crème (--paper). Astra affichait ce panneau sur
   fond blanc, d'où un texte illisible. On passe le panneau en fond
   encre, comme le reste du site. */
/* Version 1.7 : Astra peint le fond blanc sur chaque ligne du menu
   (li.menu-item et a.menu-link), pas seulement sur le conteneur.
   On force donc le fond encre à tous les niveaux. */
#ast-mobile-header .ast-mobile-header-content,
#ast-mobile-header .ast-mobile-header-content .main-navigation,
#ast-mobile-header .ast-mobile-header-content .main-header-menu,
#ast-mobile-header .ast-mobile-header-content .menu-item,
#ast-mobile-header .ast-mobile-header-content .menu-link,
#ast-mobile-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
#ast-mobile-header .ast-builder-menu-mobile .main-navigation .menu-item,
#ast-mobile-header .ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .menu-item,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-popup-drawer .menu-item,
.ast-mobile-popup-drawer .menu-link {
  background: var(--ink-panel) !important;
  background-color: var(--ink-panel) !important;
}
#ast-mobile-header .ast-mobile-header-content .menu-item > .menu-link,
#ast-mobile-header .ast-mobile-header-content .menu-item > a,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
.ast-mobile-popup-drawer .menu-item > .menu-link,
.ast-mobile-popup-drawer .menu-item > a {
  color: var(--paper) !important;
  border-color: var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
#ast-mobile-header .ast-mobile-header-content .current-menu-item > .menu-link,
#ast-mobile-header .ast-mobile-header-content .current-menu-item > a,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > a {
  color: var(--brass-light) !important;
}

/* Icône ☰ du menu mobile, en laiton au lieu du bleu d'Astra */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle {
  color: var(--brass-light) !important;
  background: transparent !important;
}
.ast-button-wrap .menu-toggle .ast-mobile-svg,
.ast-button-wrap .menu-toggle svg {
  fill: var(--brass-light) !important;
}

/* Buttons */
.btn-magic, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--brass) !important;
  color: var(--ink) !important;
  border: 1px solid var(--brass) !important;
  border-radius: 1px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--brass-light) !important;
}

/* ---------- Custom page sections (used by our page templates) ---------- */

/* Neutralise toute mise en page flex/grid qu'Astra pourrait appliquer
   à la zone de contenu, pour garantir un empilement vertical simple.
   Astra applique ".site-content .ast-container{display:flex}" — on
   l'annule explicitement avec le même niveau de spécificité. */
.site-content .ast-container,
.entry-content, .ast-container, #primary, .site-content {
  display: block !important;
  flex-direction: column !important;
}
#content.site-content > .ast-container > div {
  display: block !important;
  width: 100% !important;
  flex: none !important;
  float: none !important;
}

.ems-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .ems-wrap { padding: 0 20px; } }

.ems-hero {
  padding: 90px 0 70px;
  position: relative;
}

.ems-banner-link {
  display: block;
  line-height: 0;
}
.ems-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

.ems-intro {
  padding: 60px 0 20px;
}
.ems-intro h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 18px;
}
.ems-intro .lede {
  font-size: 1.15rem;
  color: var(--paper-dim);
  max-width: 62ch;
}
.ems-hero-photo {
  padding: 150px 0 110px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media (max-width: 900px) {
  .ems-hero-photo { padding: 90px 0 60px; background-position: 30% center; }
}
.ems-hero .kicker {
  font-family: var(--serif); font-style: italic; color: var(--brass-light);
  display: block; margin-bottom: 14px;
}
.ems-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 20px; }
.ems-hero p.lede { font-size: 1.1rem; color: var(--paper-dim); max-width: 60ch; }

.ems-section { padding: 60px 0; }
.ems-section-alt { background: var(--ink-panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.ems-legal h2 { font-size: 1.3rem; margin-top: 40px; margin-bottom: 12px; }
.ems-legal h2:first-child { margin-top: 0; }
.ems-legal p, .ems-legal li { color: var(--paper-dim); max-width: 74ch; margin-bottom: 10px; }
.ems-legal .todo { color: var(--velvet); background: rgba(106,35,49,0.15); padding: 1px 6px; border-radius: 2px; font-size: 0.85em; }

.ems-contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.ems-contact-form label { display: block; font-family: var(--serif); font-style: italic; color: var(--brass-light); margin-bottom: 6px; }
.ems-contact-form input, .ems-contact-form textarea {
  width: 100%; background: var(--ink-panel); border: 1px solid var(--line); color: var(--paper);
  padding: 11px 13px; font-family: var(--sans);
}

/* ---------- WooCommerce product grid, restyled to match our design ---------- */

.woocommerce ul.products li.product {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 18px 18px 22px;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif) !important;
  color: var(--paper) !important;
  font-size: 1.1rem !important;
}
.woocommerce ul.products li.product .price {
  color: var(--brass-light) !important;
  font-family: var(--serif) !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--paper-dim) !important;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--brass-light) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--paper-dim) !important;
}

/* ---------- Panier, commande et icône panier (version 1.8) ----------
   Astra met des fonds blancs sur les en-têtes de tableaux et les blocs
   de totaux : le texte crème y devenait invisible. On passe tout en
   fond encre, texte crème, titres de colonnes en laiton. */

/* Tableaux du panier et de la commande */
.woocommerce table.shop_table {
  background: var(--ink) !important;
  border: 1px solid var(--line) !important;
  color: var(--paper) !important;
}
.woocommerce table.shop_table thead,
.woocommerce table.shop_table thead tr,
.woocommerce table.shop_table thead th {
  background: var(--ink-panel) !important;
  color: var(--brass-light) !important;
  border-color: var(--line) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
  color: var(--paper) !important;
  border-color: var(--line) !important;
}
.woocommerce table.shop_table td.product-name a {
  color: var(--brass-light) !important;
}

/* Bloc « Total panier » */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  background: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-page .cart-collaterals .cart_totals > h2 {
  background: var(--ink-panel) !important;
  color: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Champs de saisie (quantité, code promo, formulaire de commande) */
.woocommerce input.input-text,
.woocommerce .quantity .qty,
.woocommerce textarea,
.woocommerce select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.select2-container--default .select2-selection--single {
  background: var(--ink-panel) !important;
  color: var(--paper) !important;
  border: 1px solid var(--line) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--paper) !important;
}
.select2-dropdown,
.select2-results__option {
  background: var(--ink-panel) !important;
  color: var(--paper) !important;
}
.woocommerce ::placeholder {
  color: var(--paper-dim) !important;
  opacity: 0.7;
}

/* Page de commande : titres et bloc de paiement */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout label {
  color: var(--paper) !important;
}
.woocommerce-checkout #payment,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment ul.payment_methods {
  background: var(--ink-panel) !important;
  color: var(--paper) !important;
  border-color: var(--line) !important;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--ink-panel) !important;
}

/* Icône panier de l'en-tête : laiton au lieu du bleu d'Astra */
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart .ast-cart-menu-wrap .count {
  background: transparent !important;
  border-color: var(--brass-light) !important;
  color: var(--brass-light) !important;
}
.ast-site-header-cart svg,
.ast-site-header-cart .ast-icon svg {
  fill: var(--brass-light) !important;
  color: var(--brass-light) !important;
}
.ast-site-header-cart i.astra-icon::after,
.ast-site-header-cart .ast-cart-menu-wrap .count::after {
  background: var(--brass) !important;
  color: var(--ink) !important;
  border-color: var(--brass) !important;
}

/* Petit panier déroulant (survol de l'icône) */
.ast-site-header-cart .widget_shopping_cart,
.astra-cart-drawer,
.astra-cart-drawer .astra-cart-drawer-header {
  background: var(--ink-panel) !important;
  color: var(--paper) !important;
  border-color: var(--line) !important;
}
.ast-site-header-cart .widget_shopping_cart a,
.astra-cart-drawer a {
  color: var(--paper) !important;
}

/* ---------- Grille produits sur téléphone : une seule colonne (version 1.9) ----------
   Astra affiche 2 colonnes sur mobile : la vidéo devenait minuscule.
   Sous 768 px (téléphones), une fiche par ligne, pleine largeur. */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 28px !important;
  }
}