/*
Theme Name:     Storefront Child — Amélie Lash
Theme URI:      https://amelielash.fr/
Description:    Thème enfant Storefront pour Amélie Lash — extensions de cils, soins du regard et formations. Esthétique éditoriale « Pocket Blush » — blanc, pêche & orange, Playfair Display italique / Pinyon Script.
Author:         Toni
Author URI:     https://amelielash.fr/
Template:       storefront
Version:        2.3.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
*/

:root {
    /* ===== Palette « Pocket Blush » — alignée sur les tokens --al-* ===== */
    --color-primary: #222222;       /* Charcoal — anchor sombre, sections dark, titres */
    --color-secondary: #C8A080;     /* Sable profond — éléments secondaires, lignes */
    --color-cream: #F8E8D8;         /* Pêche clair — fonds de sections douces */
    --color-accent: #BC4F00;        /* Orange CTA — boutons, liens (WCAG AA 4.93:1) */
    --color-forest: #F76309;        /* Orange vif — accents (mesuré sur l'image de référence) */
    --color-gold: #F76309;          /* Orange vif — accents décoratifs (eyebrows, soulignés) */
    --color-text: #222222;          /* Texte principal */
    --color-text-muted: #5D5D5D;    /* Slate — texte secondaire */
    --color-white: #FFFFFF;         /* Blanc — fond global */

    /* Alias sémantiques (alignés DA --al-*) */
    --color-text-main: #222222;
    --color-bg-white: #FFFFFF;
    --color-bg-latte: #F8E8D8;
    --color-accent-peach: #F0D8C0;
    --color-cta-orange: #BC4F00;
    --color-border-taupe: #C8A080;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-script: 'Pinyon Script', 'Allura', cursive;
    --font-signature: 'Pinyon Script', cursive;

    --radius-ui: 4px;
    --radius-circle: 50%;

    --transition-base: all 300ms ease-in-out;

    --space-section-desktop: 110px;
    --space-section-mobile: 56px;

    --container-max: 1280px;
}

/* ============================================================
   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/nav.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;
    }
}

/* =========================================================
   Amélie Lash — Design tokens
   Ajouté le 2026-05-24 — voir projetlash.md pour la spécification
   ========================================================= */
:root {
    /* Couleurs principales */
    --al-charcoal: #222222;
    --al-orange: #F76309;
    --al-white: #FFFFFF;

    /* Déclinaisons */
    --al-charcoal-soft: #3A3A3A;
    --al-slate: #5D5D5D;
    --al-sand: #F0D8C0;
    --al-sand-deep: #C8A080;
    --al-orange-light: #F89850;
    --al-orange-dark: #BC4F00;
    --al-cream: #F8E8D8;

    /* Statuts */
    --al-success: #3F8F5B;
    --al-warning: #D9A441;
    --al-error:   #C0392B;
    --al-info:    #4A6FA5;

    /* Typographies */
    --al-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --al-font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Échelle typographique */
    --al-fs-h1: 3.5rem;
    --al-fs-h2: 2.5rem;
    --al-fs-h3: 1.75rem;
    --al-fs-h4: 1.25rem;
    --al-fs-body: 1rem;
    --al-fs-small: 0.875rem;
    --al-fs-eyebrow: 0.875rem;

    /* Letter-spacing */
    --al-ls-tight: -0.01em;
    --al-ls-normal: 0;
    --al-ls-wide: 0.08em;
    --al-ls-eyebrow: 0.25em;
}

/* --- Application globale --- */
body.amelielash,
body {
    font-family: var(--al-font-body);
    color: var(--al-charcoal);
    background-color: var(--al-white);
}

h1, h2, h3,
.site-title,
.entry-title,
.page-title,
.widget-title,
.product_title {
    font-family: var(--al-font-display);
    color: var(--al-charcoal);
    font-weight: 500;
    letter-spacing: var(--al-ls-tight);
}

/* DA « Pocket Blush » : les H2 reprennent l'italique Didone de l'image (« Oh What? ») */
h2,
.sfc-formations__section-title,
.sfc-section-header h2 {
    font-style: italic;
}

/* … sauf les noms de produits en boucle (lisibilité e-commerce) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-style: normal;
}

h4, h5, h6 {
    font-family: var(--al-font-body);
    font-weight: 600;
    color: var(--al-charcoal);
}

/* Liens : défaut = orange CTA (AA sur blanc), hover = orange vif (éclaircissement DA) */
a {
    color: var(--al-orange-dark);
    transition: color 0.2s ease;
}
a:hover,
a:focus {
    color: var(--al-orange);
}

/* Utilitaire « eyebrow » à la LASH */
/* Eyebrow orange pêche « sakura » (cf. sous-titre « Sakura Blossom » de l'image) */
.al-eyebrow {
    font-family: var(--al-font-body);
    font-weight: 400;
    font-size: var(--al-fs-eyebrow);
    letter-spacing: var(--al-ls-eyebrow);
    text-transform: uppercase;
    color: var(--al-orange-light);
}

/* --- Boutons Storefront / WooCommerce (WCAG AA) --- */
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--al-orange-dark);
    color: var(--al-white);
    font-family: var(--al-font-body);
    font-weight: 500;
    letter-spacing: var(--al-ls-wide);
    text-transform: uppercase;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--al-orange);
    color: var(--al-white);
}

/* Bouton alt (Storefront secondary) — orange doux façon bouton « More » de l'image */
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--al-orange-light);
    color: var(--al-charcoal);
}
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--al-orange);
    color: var(--al-white);
}

/* --- Storefront : en-tête / pied de page --- */
.site-header {
    background-color: var(--al-white);
    color: var(--al-charcoal);
}
.site-header a,
.site-header .site-title a {
    color: var(--al-charcoal);
}
.site-header a:hover {
    color: var(--al-orange-dark);
}

/* Footer clair « Pocket Blush » : pêche, texte charcoal, accents orange */
.site-footer {
    background-color: var(--al-cream);
    color: var(--al-charcoal);
}
.site-footer a {
    color: var(--al-orange-dark);
}
.site-footer a:hover {
    color: var(--al-orange);
}
.site-footer .widget-title {
    color: var(--al-charcoal);
}

/* --- Prix WooCommerce --- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--al-orange-dark);
    font-family: var(--al-font-body);
    font-weight: 600;
}

/* --- Form fields focus --- */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--al-orange);
    outline-offset: 2px;
}