/*
Theme Name:     Storefront Child — Madame's Home
Theme URI:      https://dev3.minderserv.fr/
Description:    Thème enfant Storefront pour Madame's Home — art de la table & art de recevoir, palette rose poudré, typo serif éditoriale.
Author:         Toni
Author URI:     https://dev3.minderserv.fr/
Template:       storefront
Version:        3.0.0
Requires at least: 6.4
Requires PHP:   8.2
License:        GNU General Public License v3 or later
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:    storefront-child
Tags:           e-commerce, two-columns, custom-colors, custom-menu, featured-images, full-width-template, footer-widgets, theme-options
*/

/* ============================================================
   DESIGN TOKENS — Madame's Home v3.0.0 (Phase 0 refonte)
   Toute valeur visuelle vit ici. Les modules CSS consomment uniquement
   les variables. Cf. _claude/PLAN-refonte-ui-ux-madameshome.md §3.
   ============================================================ */
:root {
    /* ---------- Couleurs primaires (rose poudré, signature MH) ---------- */
    --color-primary:        #C96A72;   /* Rose poudré — signature, CTA, accents */
    --color-primary-deep:   #A8525A;   /* Rose poudré assombri — hover, focus, body text accent (AA-safe sur crème) */
    --color-primary-soft:   #FFCBCC;   /* Rose pâle — hover, gradients, états doux */

    /* ---------- Neutres chauds ---------- */
    --color-cream:          #FAF6F2;   /* Crème chaud — fond global */
    --color-secondary:      #EFD8D3;   /* Beige rosé — sections alternées, footer */
    --color-beige-rose:     #EFD8D3;   /* Alias sémantique */
    --color-ink:            #1A1A1A;   /* Anthracite — texte principal (vs noir pur) */
    --color-text:           #1A1A1A;   /* Alias rétro-compat */
    --color-ink-soft:       #6A6A6A;   /* Gris — texte secondaire, captions */
    --color-text-muted:     #6A6A6A;   /* Alias rétro-compat */
    --color-rule:           #E5DDD6;   /* Filets, bordures cartes (warmer que gris froid) */
    --color-white:          #FFFFFF;

    /* ---------- Accents secondaires ---------- */
    --color-accent:         #C96A72;   /* Mappé sur primary (l'accent = signature MH) */
    --color-gold:           #C9A961;   /* Or chaud — micro-touches, ornements rares */
    --color-forest:         #5A6B48;   /* Vert sauge — badge "naturel" optionnel */

    /* ---------- Surfaces (élévation) ---------- */
    --color-surface-0:      var(--color-cream);
    --color-surface-1:      var(--color-white);
    --color-surface-2:      var(--color-beige-rose);
    --color-surface-overlay: rgba(26, 26, 26, 0.45);

    /* ---------- Sémantiques ---------- */
    --color-success:        #5A8B5F;
    --color-warning:        #C99654;
    --color-danger:         #B85454;
    --color-info:           var(--color-primary);

    /* ---------- Typographie ---------- */
    --font-heading:   'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
    --font-display:   'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
    --font-body:      'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script:    'Parisienne', 'Allura', cursive;
    --font-signature: 'Parisienne', 'Allura', cursive;
    --font-mono:      ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Échelle modulaire fluide (ratio 1.25) */
    --text-xs:    clamp(0.75rem,  0.71rem + 0.21vw, 0.81rem);
    --text-sm:    clamp(0.875rem, 0.83rem + 0.22vw, 0.94rem);
    --text-base:  clamp(1rem,     0.95rem + 0.25vw, 1.06rem);
    --text-lg:    clamp(1.125rem, 1.05rem + 0.36vw, 1.25rem);
    --text-xl:    clamp(1.4rem,   1.25rem + 0.75vw, 1.75rem);
    --text-2xl:   clamp(1.75rem,  1.4rem  + 1.75vw, 2.5rem);
    --text-3xl:   clamp(2.25rem,  1.6rem  + 3.25vw, 3.75rem);
    --text-hero:  clamp(2.75rem,  1.5rem  + 6.25vw, 5rem);

    /* Tracking */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.18em;

    /* Line-height */
    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* ---------- Spacing (8pt grid) ---------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;
    --space-section:        clamp(3rem, 6vw, 6rem);
    --space-section-large:  clamp(4rem, 10vw, 8rem);
    --space-section-desktop: 80px;   /* rétro-compat */
    --space-section-mobile:  40px;   /* rétro-compat */

    /* ---------- Container ---------- */
    --container-narrow: 720px;
    --container-base:   1200px;
    --container-wide:   1440px;
    --container-max:    1280px;     /* rétro-compat */
    --container-pad:    clamp(1rem, 3vw, 2rem);

    /* ---------- Radius ---------- */
    --radius-xs:   2px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 100px;
    --radius-full: 50%;
    --radius-ui:     10px;   /* rétro-compat — mappé sur md (vs 4px Yvonne) */
    --radius-circle: 50%;    /* rétro-compat */

    /* ---------- Ombres (teintées rose poudré, douces) ---------- */
    --shadow-xs:    0 1px 2px rgba(168, 82, 90, 0.04);
    --shadow-sm:    0 2px 8px rgba(168, 82, 90, 0.06);
    --shadow-md:    0 8px 24px -8px rgba(168, 82, 90, 0.12);
    --shadow-lg:    0 24px 48px -16px rgba(168, 82, 90, 0.18);
    --shadow-xl:    0 40px 80px -24px rgba(168, 82, 90, 0.22);
    --shadow-focus: 0 0 0 3px rgba(201, 106, 114, 0.28);

    /* ---------- Motion ---------- */
    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   160ms;
    --duration-base:   240ms;
    --duration-slow:   360ms;
    --duration-slower: 600ms;
    --transition-base: all 240ms cubic-bezier(0.22, 1, 0.36, 1);   /* rétro-compat */
}

/* ============================================================
   HEADER — HANGING LOGO
   Le logo déborde visuellement sous le header sans augmenter sa
   hauteur de barre. Deux porteurs selon le viewport :
     - Desktop (≥1025px) : logo CENTRÉ dans le menu (.sfc-menu__logo,
       cf. assets/css/header.css). Le brand de gauche est masqué.
     - Tablette/mobile (≤1024px) : nav repliée → le brand
       (.sfc-header__brand) porte le logo, centré.
   ============================================================ */

.sfc-header {
    overflow: visible;
}

/* Desktop : le brand de gauche disparaît au profit du logo dans le menu. */
@media (min-width: 1025px) {
    .sfc-header .sfc-header__brand {
        display: none;
    }
}

/* Tablette : burger visible, brand recentré et suspendu. */
@media (max-width: 1024px) {
    .sfc-header .sfc-header__brand {
        position: relative;
        min-width: 100px;
        height: 60px;
        align-self: center;
    }
    .sfc-header__brand .custom-logo-link {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 110;
        display: block;
        line-height: 0;
    }
    .sfc-header__brand .custom-logo-link img.custom-logo {
        max-height: none;
        height: 110px;
        width: auto;
        display: block;
    }
}

/* Mobile : retour au flux normal, taille raisonnable, pas de débordement. */
@media (max-width: 640px) {
    .sfc-header .sfc-header__brand {
        min-width: 0;
        height: auto;
    }
    .sfc-header__brand .custom-logo-link {
        position: static;
        transform: none;
    }
    .sfc-header__brand .custom-logo-link img.custom-logo {
        height: 56px;
    }
}

/* ============================================================
   HEADER — Compensation du débordement du logo
   Sur toutes les pages SAUF la home (qui a son hero plein-écran
   absorbant l'overlap), on pousse le 1er bloc sous le header pour
   que la zone occupée par le logo qui déborde reste « propre ».
   ============================================================ */

body:not(.home) #content,
body:not(.home) .site-content,
body:not(.home) .woocommerce-notices-wrapper {
    padding-top: 90px;
}

@media (max-width: 1024px) {
    body:not(.home) #content,
    body:not(.home) .site-content,
    body:not(.home) .woocommerce-notices-wrapper {
        padding-top: 30px;
    }
}

@media (max-width: 640px) {
    body:not(.home) #content,
    body:not(.home) .site-content,
    body:not(.home) .woocommerce-notices-wrapper {
        padding-top: 0;
    }
}