/*
 * ============================================================
 *  MOAYEHAIR — Design System Storefront
 *  Salon de coiffure RAW HAIR & Human Hair — Abidjan
 *  Ambiance : mature, élégante, boutique haut de gamme
 * ============================================================
 *  Chargé par : shop.blade.php (layout Ecommerce), welcome.blade.php,
 *  maintenance.blade.php, client/login.blade.php.
 *  Contient les tokens (palette/typo/ombres) + les classes de
 *  composants réutilisables. Chaque page garde un <style> propre
 *  pour ses règles spécifiques, qui consomment ces variables/classes.
 * ============================================================
 */

:root {
  /* ── Palette (alignée sur moayehair.shop en production) ── */
  --mh-pink:        #d32958;
  --mh-pink-dark:   #a8203f;
  --mh-pink-light:  #e84a74;
  --mh-pink-pale:   #fbeef1;
  --mh-gold:        #C9A96E;
  --mh-gold-dark:   #AD8A4E;
  --mh-gold-pale:   #F6EFE1;
  --mh-noir:        #020202;
  --mh-noir-warm:   #0e0908;
  --mh-dark:        #1a1a1a;
  --mh-cream:       #faf8f5;
  --mh-cream2:      #f3efe9;
  --mh-text:        #1a1a1a;
  --mh-muted:       #888888;
  --mh-muted-dark:  #4a4a4a;
  --mh-border:      #e8e2dc;
  --mh-white:       #FFFFFF;

  /* ── Typographie ── */
  --font-display: 'Playfair Display', serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  /* Rétro-compatibilité : anciens noms de tokens utilisés par les pages
     existantes (shop.blade.php / welcome.blade.php) — mêmes noms, nouvelles
     valeurs, pour re-thémer sans devoir renommer toutes les occurrences. */
  --rose:       var(--mh-pink);
  --rose-dk:    var(--mh-pink-dark);
  --rose-lt:    var(--mh-pink-light);
  --rose-pale:  var(--mh-pink-pale);
  --teal:       var(--mh-gold);
  --teal-dk:    var(--mh-gold-dark);
  --teal-lt:    var(--mh-gold);
  --teal-pale:  var(--mh-gold-pale);
  --yellow:     var(--mh-gold);
  --yellow-dk:  var(--mh-gold-dark);
  --yellow-pale:var(--mh-gold-pale);
  --dark:       var(--mh-dark);
  --noir:       var(--mh-noir);
  --text:       var(--mh-text);
  --muted:      var(--mh-muted);
  --border:     var(--mh-border);
  --bg:         var(--mh-cream);
  --white:      var(--mh-white);

  /* ── Forme (rayons resserrés, esprit boutique haut de gamme) ── */
  --r:      6px;
  --r-sm:   4px;
  --r-lg:   10px;

  /* ── Ombres (chaudes, sobres) ── */
  --sh-card:  0 4px 20px rgba(26,26,26,.06);
  --sh-lg:    0 16px 48px rgba(26,26,26,.12);
  --sh-rose:  0 8px 28px rgba(211,41,88,.18);
  --sh-teal:  0 8px 28px rgba(201,169,110,.20);
  --sh-gold:  0 8px 28px rgba(201,169,110,.20);

  /* ── Typographie ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', sans-serif;
}

/* ============================================================
   IMPORTS TYPO (à défaut d'un <link> déjà présent sur la page)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,500;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================
   TITRES DE SECTION — utilisé sur toutes les pages publiques
============================================================ */
.mh-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mh-gold-dark);
  margin-bottom:10px;
}
.mh-eyebrow::before,.mh-eyebrow::after{content:'';width:20px;height:1px;background:var(--mh-gold)}

.mh-title{
  font-family:var(--font-display);font-weight:700;color:var(--mh-dark);
  line-height:1.2;letter-spacing:-.01em;
}
.mh-title em{font-style:italic;color:var(--mh-pink);font-weight:600}

.mh-section-head{text-align:center;max-width:640px;margin:0 auto 44px}
.mh-section-head .mh-title{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:12px}
.mh-section-sub{font-family:var(--font-body);color:var(--mh-muted);font-size:.95rem;line-height:1.7}

/* ============================================================
   BOUTONS
============================================================ */
.mh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:13px 28px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;transition:all .25s ease;white-space:nowrap;
}
.mh-btn-primary{background:var(--mh-dark);color:#fff}
.mh-btn-primary:hover{background:var(--mh-pink);color:#fff;box-shadow:var(--sh-rose);transform:translateY(-1px)}
.mh-btn-pink{background:var(--mh-pink);color:#fff}
.mh-btn-pink:hover{background:var(--mh-pink-dark);box-shadow:var(--sh-rose);transform:translateY(-1px)}
.mh-btn-outline{background:transparent;border-color:var(--mh-dark);color:var(--mh-dark)}
.mh-btn-outline:hover{background:var(--mh-dark);color:#fff}
.mh-btn-gold{background:var(--mh-gold);color:#fff}
.mh-btn-gold:hover{background:var(--mh-gold-dark);box-shadow:var(--sh-gold)}
.mh-btn-ghost{background:transparent;border-color:var(--mh-border);color:var(--mh-text)}
.mh-btn-ghost:hover{border-color:var(--mh-dark);color:var(--mh-dark)}
.mh-btn-sm{padding:9px 18px;font-size:.72rem}
.mh-btn-lg{padding:16px 36px;font-size:.88rem}
.mh-btn-block{width:100%}
.mh-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* ============================================================
   CARTES
============================================================ */
.mh-card{
  background:var(--mh-white);border:1px solid var(--mh-border);
  border-radius:var(--r);box-shadow:var(--sh-card);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.mh-card:hover{box-shadow:var(--sh-lg);border-color:var(--mh-gold)}

.mh-product-card{position:relative;overflow:hidden}
.mh-product-card .mh-product-img{aspect-ratio:3/4;background:var(--mh-cream);overflow:hidden}
.mh-product-card .mh-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mh-product-card:hover .mh-product-img img{transform:scale(1.05)}

/* ============================================================
   BADGES
============================================================ */
.mh-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;line-height:1;
}
.mh-badge-gold{background:var(--mh-gold-pale);color:var(--mh-gold-dark)}
.mh-badge-pink{background:var(--mh-pink-pale);color:var(--mh-pink)}
.mh-badge-dark{background:var(--mh-dark);color:#fff}
.mh-badge-outline{background:transparent;border:1px solid var(--mh-border);color:var(--mh-muted)}

/* ============================================================
   FORMULAIRES
============================================================ */
.mh-field label{
  display:block;font-family:var(--font-body);font-size:.78rem;font-weight:600;
  color:var(--mh-text);margin-bottom:6px;letter-spacing:.02em;
}
.mh-input,.mh-select,.mh-textarea{
  width:100%;padding:12px 16px;border:1.5px solid var(--mh-border);
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:.9rem;
  color:var(--mh-text);background:var(--mh-white);
  transition:border-color .2s,box-shadow .2s;outline:none;
}
.mh-input:focus,.mh-select:focus,.mh-textarea:focus{
  border-color:var(--mh-pink);box-shadow:0 0 0 3px var(--mh-pink-pale);
}
.mh-input::placeholder{color:#b8a99f}

/* ============================================================
   NAV PILL / STEPPER
============================================================ */
.mh-stepper{display:flex;align-items:center;gap:0;justify-content:center}
.mh-step{display:flex;align-items:center;gap:10px}
.mh-step-circle{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;font-size:.8rem;
  border:1.5px solid var(--mh-border);color:var(--mh-muted);background:var(--mh-white);
  transition:all .25s;
}
.mh-step.done .mh-step-circle{background:var(--mh-gold);border-color:var(--mh-gold);color:#fff}
.mh-step.active .mh-step-circle{background:var(--mh-dark);border-color:var(--mh-dark);color:#fff}
.mh-step-label{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--mh-muted)}
.mh-step.active .mh-step-label,.mh-step.done .mh-step-label{color:var(--mh-dark)}
.mh-step-line{width:48px;height:1px;background:var(--mh-border);margin:0 10px}
.mh-step-line.done{background:var(--mh-gold)}

/* ============================================================
   DIVIDERS / ORNEMENTS
============================================================ */
.mh-divider{width:60px;height:2px;background:var(--mh-gold);margin:0 auto;border-radius:2px}
.mh-divider-lg{width:80px}

/* ============================================================
   UTILITAIRES
============================================================ */
.mh-serif{font-family:var(--font-display)}
.mh-text-gold{color:var(--mh-gold-dark)}
.mh-text-pink{color:var(--mh-pink)}
.mh-text-muted{color:var(--mh-muted)}