/*
Theme Name:     MyAfricanBoxes
Theme URI:
Description:    Storefront child theme.
Author:         Webaxial
Author URI:
Template:       storefront
Version:        0.2.0
*/

/* ========================================================================
   MyAfricanBoxes — design system
   Palette extraite du brief de marque officiel. Typo : Fraunces (display,
   chaleureux, empattements doux — echo des textiles/motifs graves de la
   maquette) + Manrope (texte courant, lisible, sans froideur geometrique).
   Signature visuelle : la "ligne de voyage" en pointilles dores qui relie
   les etapes, clin d'oeil au concept "la boite qui voyage".
   ======================================================================== */

:root{
  --mab-beige-sable: #E8DCCB;
  --mab-creme: #F8F4EE;
  --mab-brun-cacao: #5A3E2B;
  --mab-noir: #5A3E2B;
  --mab-noir-2: #46301F;
  --mab-dore: #C8A96B;
  --mab-dore-clair: #E4CD99;
  --mab-line: rgba(200,169,107,0.22);
  --mab-shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  --mab-glass-bg: rgba(38,32,24,0.5);
  --mab-glass-border: rgba(232,220,195,0.14);
  --mab-glass-highlight: rgba(255,244,220,0.06);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
}

/* Texture de fond : lattice discret + vignette chaude, evite le noir plat.
   Inspire des motifs geometriques dores deja presents dans la maquette
   (losanges graves sur la box), garde volontairement tres subtil pour ne
   pas tomber dans le "design tribal cliche" que le brief de marque exclut. */
body{
  background-color: var(--mab-noir);
  background-image:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(200,169,107,0.11), transparent 60%),
    radial-gradient(ellipse 900px 700px at 100% 30%, rgba(90,62,43,0.24), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23C8A96B' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M42 2 L82 42 L42 82 L2 42 Z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23C8A96B' stroke-opacity='0.05' stroke-width='1.4'%3E%3Ccircle cx='80' cy='80' r='34'/%3E%3Ccircle cx='80' cy='80' r='20'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: auto, auto, 84px 84px, 160px 160px;
}

/* ---- Emblemes Adinkra : grand format, effet foil dore, halo lumineux.
   Utilises comme armoiries en arriere-plan des entetes de section (3
   symboles au total sur le site — dosage volontaire, jamais en motif
   repete) plutot qu'en petites icones discretes. ---- */
.mab-section-head{ position:relative; z-index:1; }
.mab-emblem{
  position:absolute; top:50%; left:50%; z-index:-1;
  transform:translate(-50%,-52%);
  width:min(64vw, 460px); height:min(64vw, 460px);
  opacity:.22;
  filter: drop-shadow(0 0 40px rgba(200,169,107,.4));
  pointer-events:none;
}
.mab-symbol-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--mab-dore-clair); opacity:.85; margin-top:.6rem;
}
.mab-symbol-tag svg{ width:20px; height:20px; }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

*{ box-sizing:border-box; }
html, body{ overflow-x: hidden; }

body{
  background-color: var(--mab-noir);
  color: var(--mab-creme);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

h1,h2,h3,h4,.site-title a{
  font-family: var(--font-display) !important;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mab-creme) !important;
}

a{ color: var(--mab-dore-clair); text-decoration: none; }

/* ---- Header : transparent, laisse voir le hero pleine page en dessous.
   Seule la pastille de navigation porte l'effet verre glace (demande
   explicite), le logo flotte librement a cote, sans bandeau plein. ---- */
.site-header, #masthead{
  background-color: transparent !important;
  border-bottom: none !important;
  color: var(--mab-creme) !important;
  position: sticky; top: 0; z-index: 200;
}

.storefront-primary-navigation{
  background: rgba(20,16,11,0.5) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--mab-glass-border) !important;
  border-radius: 999px;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.5), inset 0 1px 0 var(--mab-glass-highlight);
  padding: .3rem .5rem !important;
}
.main-navigation .menu-toggle{
  background: transparent; border:none; color:var(--mab-creme);
}

/* Icone + montant du panier : Storefront les code en gris fonce (#333) par
   defaut, invisibles sur notre header sombre/transparent. */
.site-header-cart,
.site-header-cart a.cart-contents,
.site-header-cart .amount,
.site-header-cart .count{
  color: var(--mab-creme) !important;
}
.site-header-cart a.cart-contents:before{
  color: var(--mab-creme) !important;
  filter: none !important;
}
.site-header-cart a.cart-contents:hover,
.site-header-cart a.cart-contents:hover:before{
  color: var(--mab-dore-clair) !important;
}
#colophon{ background-color: var(--mab-noir-2) !important; color: var(--mab-creme) !important; border-color: var(--mab-line) !important; }
.site-title a, .site-description{ color: var(--mab-creme) !important; }
.main-navigation ul li a{ color: var(--mab-creme) !important; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; }
.main-navigation ul li a:hover{ color: var(--mab-dore) !important; }
#colophon a{ color: var(--mab-creme); opacity:.8; }
#colophon a:hover{ opacity:1; color:var(--mab-dore-clair); }

/* Logo : taille genereuse et lisible a toutes les tailles d'ecran */
.custom-logo-link img, .site-branding img{
  max-height: 76px !important;
  width: auto !important;
}
@media (min-width:600px){
  .custom-logo-link img, .site-branding img{ max-height: 96px !important; }
}
@media (min-width:1024px){
  .custom-logo-link img, .site-branding img{ max-height: 116px !important; }
}

/* Titre de page auto-genere par Storefront : retire (le hero de chaque
   page porte deja son propre titre). Le fil d'ariane reste visible. */
.entry-header, .page .entry-title, article > .entry-header{
  display: none !important;
}

/* Header : logo a gauche, menu + panier a droite, sur une seule ligne */
#masthead .col-full:first-child{
  display: flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap: nowrap; width:auto; max-width:none; padding-top:.6rem; padding-bottom:.6rem;
}
#masthead .site-search{ display:none; }
.storefront-primary-navigation{ width:auto; margin: .5rem 1.5rem .5rem 0; }
.storefront-primary-navigation > .col-full{
  display:flex; align-items:center; gap:1.2rem; width:auto; max-width:none; padding:0;
}
#masthead{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding: 0 1.5rem; }
@media (max-width: 900px){
  #masthead{ flex-direction:column; align-items:stretch; padding:0; }
  #masthead .col-full:first-child{ padding:1rem 1.2rem; }
  .storefront-primary-navigation{ margin: 0 1.2rem 1rem; }
  .storefront-primary-navigation > .col-full{ padding:.4rem .8rem; flex-wrap:wrap; }
}

.content-area, #content, .site-content, .u-columns{ background-color: var(--mab-noir) !important; color: var(--mab-creme) !important; }

/* ---- Buttons ---- */
.button, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce-page a.button, input[type="submit"], .wpcf7-submit{
  display:inline-block;
  background-color: var(--mab-dore) !important;
  color: var(--mab-noir) !important;
  border: 1px solid var(--mab-dore) !important;
  border-radius: 2px !important;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  padding: .95rem 2rem !important;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 24px -10px rgba(200,169,107,.5);
}
.button:hover, .woocommerce a.button:hover, input[type="submit"]:hover, .wpcf7-submit:hover{
  background-color: var(--mab-dore-clair) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(200,169,107,.65);
}
.button.ghost{
  background: transparent !important;
  color: var(--mab-creme) !important;
  border: 1px solid var(--mab-creme) !important;
  box-shadow: none;
}
.button.ghost:hover{ border-color: var(--mab-dore) !important; color: var(--mab-dore) !important; }

/* ---- Hero : plein ecran, plein-bleed reel (casse le conteneur Storefront) ---- */
.mab-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding: 6rem 1.5rem 4rem;
  text-align: left;
  overflow: hidden;
}
/* Voile tres leger : juste assez pour ancrer le bas de l'image (liseret +
   respiration avant la section suivante), l'image reste claire et lumineuse.
   La lisibilite du texte est portee par le panneau verre du hero-content,
   pas par un voile sombre sur toute la photo. */
.mab-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,16,10,.12) 0%, rgba(20,16,10,.02) 35%, rgba(20,16,10,.46) 100%);
}
.mab-hero::after{
  /* liseret de pagne : frise geometrique doree en pied de hero, clin d'oeil
     au bord tisse d'un pagne africain */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cg fill='%23C8A96B'%3E%3Cpolygon points='0,14 14,0 28,14'/%3E%3Cpolygon points='28,14 42,0 56,14'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity:.55;
}
.mab-hero-inner{ position:relative; max-width:1200px; margin:0 auto; width:100%; }
.mab-hero-content{
  max-width:580px;
  background: rgba(20,16,11,0.56);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--mab-glass-border);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.55), inset 0 1px 0 var(--mab-glass-highlight);
  border-radius: 18px;
  padding: 2.6rem;
}
@media (max-width:780px){ .mab-hero-content{ padding:1.8rem; } }
.mab-eyebrow{
  font-family: var(--font-body); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  color: var(--mab-dore-clair); display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem;
}
.mab-eyebrow::before{ content:""; width:28px; height:1px; background: var(--mab-dore); display:inline-block; }
.mab-hero h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); line-height:1.08; margin:0 0 1.2rem; text-wrap:balance; }
.mab-hero .accent{ color: var(--mab-dore); font-style: italic; }
.mab-hero p.lede{ font-size:1.1rem; color: var(--mab-creme); opacity:.88; max-width:46ch; margin:0 0 2rem; }
.mab-cta-row{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---- Sections ---- */
.mab-section{
  max-width: 1160px;
  margin: 0 auto;
  padding: 6.5rem 1.5rem;
}
.mab-section + .mab-section{ border-top: 1px solid var(--mab-line); }
.mab-section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.mab-section-head .mab-eyebrow{ justify-content:center; }
.mab-section-head .mab-eyebrow::before{ display:none; }
.mab-section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin:.3rem 0 .8rem; }
.mab-section-head p{ color: var(--mab-creme); opacity:.75; }

/* ---- Journey line (signature element) ---- */
.mab-journey{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  counter-reset: step;
}
.mab-journey::before{
  content:"";
  position:absolute; top:28px; left:8%; right:8%; height:1px;
  background-image: linear-gradient(90deg, var(--mab-dore) 40%, transparent 40%);
  background-size: 14px 1px;
  background-repeat: repeat-x;
}
.mab-journey-step{ position:relative; text-align:center; }
.mab-journey-step .num{
  counter-increment: step;
  width:56px; height:56px; margin:0 auto 1.2rem; border-radius:50%;
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--mab-dore);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:1.3rem; color: var(--mab-dore-clair); position:relative; z-index:1;
}
.mab-journey-step h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin:0 0 .4rem; }
.mab-journey-step p{ font-size:.9rem; opacity:.75; margin:0; }
@media (max-width: 720px){
  .mab-journey{ grid-template-columns:1fr; gap:2.5rem; }
  .mab-journey::before{ display:none; }
}

/* ---- Feature / content grid with real photos ---- */
.mab-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:2.1rem; }
.mab-card{
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--mab-glass-border);
  box-shadow: inset 0 1px 0 var(--mab-glass-highlight);
  border-radius: 10px;
  padding: 1.8rem;
  text-align:center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mab-card:hover{ transform: translateY(-4px); border-color: var(--mab-dore); box-shadow: var(--mab-shadow); }
.mab-card h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mab-dore-clair) !important; margin:.2rem 0 .6rem; }
.mab-card p{ font-size:.88rem; opacity:.78; margin:0; }
.mab-card .icon{ width:40px; height:40px; margin:0 auto 1rem; color:var(--mab-dore); }

.mab-photo-card{
  border-radius:6px; overflow:hidden; position:relative; aspect-ratio:4/5;
  border:1px solid var(--mab-line);
}
.mab-photo-card img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.mab-photo-card:hover img{ transform: scale(1.05); }
.mab-photo-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem;
  background: linear-gradient(0deg, rgba(15,12,8,.92), transparent);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mab-creme);
}

/* ---- Pricing cards ---- */
.mab-pricing{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.6rem; align-items:stretch; }
.mab-price-card{
  position:relative;
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid var(--mab-glass-border);
  box-shadow: inset 0 1px 0 var(--mab-glass-highlight);
  border-radius:12px;
  padding:2.4rem 1.8rem; text-align:center; display:flex; flex-direction:column;
}
.mab-price-card.is-popular{ border-color: var(--mab-dore); box-shadow: 0 0 0 1px var(--mab-dore), var(--mab-shadow); }
.mab-price-card .ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--mab-dore); color:var(--mab-noir); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.3rem .9rem; border-radius:99px; font-weight:700;
}
.mab-price-card .duree{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mab-dore-clair); margin-bottom:.4rem; }
.mab-price-card .prix{ font-family:var(--font-display); font-size:2.6rem; color:var(--mab-creme); margin:.2rem 0; }
.mab-price-card .prix span{ font-size:1rem; opacity:.6; }
.mab-price-card .economie{ color:var(--mab-dore-clair); font-size:.85rem; margin-bottom:1.2rem; }
.mab-price-card ul{ list-style:none; padding:0; margin:0 0 1.6rem; text-align:left; font-size:.88rem; opacity:.85; }
.mab-price-card ul li{ padding:.35rem 0 .35rem 1.5rem; position:relative; }
.mab-price-card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--mab-dore); }
.mab-price-card .button{ margin-top:auto; }

/* ---- Timeline (Notre Histoire) ---- */
.mab-timeline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.6rem; position:relative; }
.mab-timeline::before{ content:""; position:absolute; top:10px; left:5%; right:5%; height:1px; background-image:linear-gradient(90deg, var(--mab-dore) 40%, transparent 40%); background-size:12px 1px; background-repeat:repeat-x; }
.mab-timeline-step{ text-align:center; padding-top:2rem; position:relative; }
.mab-timeline-step::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:9px; height:9px; border-radius:50%; background:var(--mab-dore); }
.mab-timeline-step .year{ font-family:var(--font-display); color:var(--mab-dore-clair); font-size:1.1rem; }
.mab-timeline-step h3{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin:.3rem 0 .5rem; }
.mab-timeline-step p{ font-size:.82rem; opacity:.75; }

/* ---- Founder / quote block ---- */
.mab-founder{
  display:grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap:3rem; align-items:center;
}
.mab-founder img{ width:100%; height:100%; object-fit:cover; border-radius:8px; box-shadow: var(--mab-shadow); }
.mab-founder blockquote{ font-family:var(--font-display); font-size:1.6rem; font-style:italic; line-height:1.4; margin:0 0 1.2rem; color:var(--mab-creme); }
.mab-founder .signature{ font-family:var(--font-display); font-style:italic; color:var(--mab-dore-clair); font-size:1.3rem; }
/* Empile uniquement sur vrai mobile — a partir de la tablette et au-dela,
   la photo reste a gauche et le texte a droite. */
@media (max-width:640px){ .mab-founder{ grid-template-columns:1fr; text-align:center; } .mab-founder img{ max-width:260px; margin:0 auto; } }

/* ---- Trust strip ---- */
.mab-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 3rem; padding:2.2rem 1.5rem;
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--mab-glass-border); border-bottom:1px solid var(--mab-glass-border);
}
.mab-trust-item{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; opacity:.85; }
.mab-trust-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--mab-dore); }

/* ---- Locked boxes teaser ---- */
.mab-locked-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.2rem; }
.mab-locked{
  border:1px dashed var(--mab-glass-border); border-radius:10px; padding:1.6rem 1rem; text-align:center; opacity:.8;
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mab-locked .n{ font-family:var(--font-display); color:var(--mab-dore-clair); font-size:1.4rem; }
.mab-locked h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; margin:.4rem 0 0; color:var(--mab-creme); }

/* ---- FAQ accordion ---- */
.mab-faq-item{ border-bottom:1px solid var(--mab-line); }
.mab-faq-item summary{ cursor:pointer; padding:1.3rem .2rem; font-family:var(--font-display); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.mab-faq-item summary::-webkit-details-marker{ display:none; }
.mab-faq-item summary::after{ content:"+"; color:var(--mab-dore); font-size:1.4rem; transition: transform .25s ease; }
.mab-faq-item[open] summary::after{ transform: rotate(45deg); }
.mab-faq-item p{ padding: 0 .2rem 1.3rem; opacity:.8; font-size:.92rem; }

/* ---- Newsletter banner ---- */
.mab-newsletter{ background: var(--mab-beige-sable); color: var(--mab-noir); text-align:center; padding:4rem 1.5rem; }
.mab-newsletter h2{ color: var(--mab-noir) !important; }
.mab-newsletter p{ color: var(--mab-brun-cacao); }
.mab-newsletter .button{ background-color: var(--mab-noir) !important; color: var(--mab-creme) !important; border-color: var(--mab-noir) !important; }
.mab-newsletter .button:hover{ background-color: var(--mab-brun-cacao) !important; }
.mab-newsletter-form{ max-width:460px; margin:0 auto; }
.mab-newsletter-form form{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-start; justify-content:center; }
.mab-newsletter-form p{ margin:0; flex:1 1 260px; }
.mab-newsletter-form label{ display:none; }
.mab-newsletter-form input[type="email"]{
  width:100%; padding:.9rem 1.1rem; border-radius:2px; border:1px solid var(--mab-brun-cacao);
  background:var(--mab-creme); font-family:var(--font-body); font-size:.9rem;
}
.mab-newsletter-form input[type="submit"]{ flex:0 0 auto; }
.mab-newsletter-form .wpcf7-response-output{ flex-basis:100%; text-align:center; font-size:.82rem; margin:.6rem 0 0; border-radius:4px; }

/* ---- WooCommerce product cards on shop/archive/shortcode grids ---- */
.woocommerce ul.products li.product{
  background: var(--mab-glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid var(--mab-glass-border); border-radius:10px; padding:1.4rem;
  box-shadow: inset 0 1px 0 var(--mab-glass-highlight);
  transition: transform .3s ease, border-color .3s ease;
}
.woocommerce ul.products li.product:hover{ transform: translateY(-4px); border-color: var(--mab-dore); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ color:var(--mab-creme); font-family:var(--font-display); }
.woocommerce ul.products li.product .price{ color: var(--mab-dore-clair) !important; font-weight:700; }
.woocommerce span.onsale{ background: var(--mab-dore) !important; color: var(--mab-noir) !important; }

/* ---- Footer sur mesure ---- */
.mab-footer{ max-width:1160px; margin:0 auto; padding:3.5rem 1.5rem 2rem; }
.mab-footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--mab-glass-border);
}
.mab-footer-logo{ max-height:64px; width:auto; margin-bottom:1rem; }
.mab-footer-brand p{ font-size:.85rem; opacity:.75; margin:0 0 .8rem; max-width:26ch; }
.mab-footer-social-note{ font-size:.72rem !important; opacity:.55 !important; }
.mab-footer-social-note span{ opacity:.8; }
.mab-footer-col h4{
  font-family: var(--font-body) !important; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--mab-dore-clair) !important; margin:0 0 1rem;
}
.mab-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.mab-footer-col a{ color: var(--mab-creme); opacity:.82; font-size:.86rem; }
.mab-footer-col a:hover{ opacity:1; color: var(--mab-dore-clair); }
.mab-footer-contact li{ font-size:.86rem; opacity:.82; }
.mab-soon{ font-size:.82rem; opacity:.45; font-style:italic; }
.mab-footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-top:1.8rem; font-size:.78rem; opacity:.65;
}
.mab-payment-badges{ display:flex; gap:.6rem; flex-wrap:wrap; }
.mab-pay-badge{
  border:1px solid var(--mab-glass-border); border-radius:99px; padding:.25rem .8rem; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em;
}
@media (max-width:820px){
  .mab-footer-grid{ grid-template-columns:1fr 1fr; }
  .mab-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .mab-footer-grid{ grid-template-columns:1fr; }
}

/* ---- Responsive base ---- */
@media (max-width: 780px){
  .mab-hero{ min-height:70vh; text-align:center; }
  .mab-hero-content{ margin:0 auto; }
  .mab-cta-row{ justify-content:center; }
  .mab-section{ padding:3.5rem 1.2rem; }
}