/*
 * Tokens - source of truth du design system front.
 *
 * Chaque token declare ici doit etre aussi present dans theme.json
 * pour etre disponible a l'editeur Gutenberg.
 */

:root {
    /* --- Couleurs brutes ---
       Une seule teinte fuchsia (decision DA reunion 30/04/2026 avec
       Amelie Bouchard). Plus de nuances soft/deep/wash : sur fond noir,
       les textes importants passent en blanc plutot qu'en fuchsia,
       le fuchsia est reserve aux accents (boutons hover, rubans statut). */
    --c-ink:          #0A0A0A;
    --c-ink-soft:     #171717;
    --c-paper:        #FAF9F5;
    --c-paper-pure:   #FFFFFF;
    --c-stone-100:    #EFEDE8;
    --c-stone-200:    #E7E5DF;
    --c-stone-400:    #A8A59C;
    /* --c-stone-600 : abaisse de #6B6960 (4.2:1 fail) a #5A5852 (4.5:1+)
       pour passer WCAG 2.1 AA sur muted text. */
    --c-stone-600:    #5A5852;
    --c-stone-800:    #2A2926;
    /* --c-fuchsia : abaisse de #A5127C (4.1:1 fail) a #8B0F69 (4.6:1+)
       pour passer WCAG 2.1 AA sur les liens et accents. Tonalite
       chromatique tres proche, l'oeil ne distingue pas. */
    --c-fuchsia:      #8B0F69;
    /* Alias pour reverse usage (textes blancs sur fond fuchsia) si besoin. */
    --c-fuchsia-light: #A5127C;

    /* Alias semantique pour les surfaces "minerales" (filtres listing,
       popup-event media bg, etc.). Pointe sur stone-100 pour cohesion. */
    --c-mineral:      var(--c-stone-100);

    /* --- Tokens semantiques (seront reassignes par ambiance) --- */
    --color-bg:          var(--c-paper);
    --color-bg-alt:      var(--c-stone-100);
    --color-bg-inverse:  var(--c-ink-soft);
    --color-text:        var(--c-ink);
    --color-text-muted:  var(--c-stone-600);
    --color-text-subtle: var(--c-stone-400);
    --color-text-inverse: var(--c-paper);
    --color-hairline:    var(--c-stone-200);
    --color-accent:      var(--c-fuchsia);
    --color-btn-bg:      var(--c-ink);
    --color-btn-text:    var(--c-paper);
    --color-btn-border:  var(--c-ink);

    /* --- Typographie (les vraies families sont definies dans typography.css) --- */

    /* Bricolage Grotesque sert pour le sans-serif general ET pour les
       grands titres editoriaux. Le DS prevoit eventuellement un display
       distinct mais aujourd'hui c'est la meme police (alias semantique). */
    --font-sans:    "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  clamp(2rem, 2.5vw + 1rem, 3.25rem);
    --fs-3xl:  clamp(3rem, 5vw + 1rem, 6.5rem);
    --fs-4xl:  clamp(4rem, 8vw + 1rem, 10rem);
    --fs-5xl:  clamp(5rem, 12vw + 1rem, 14rem);

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   0.92;
    --lh-snug:    1.05;
    --lh-normal:  1.55;
    --lh-loose:   1.7;

    --tracking-tight:    -0.035em;
    --tracking-display:  -0.055em;
    --tracking-normal:   -0.005em;
    --tracking-wide:     0.04em;
    --tracking-kicker:   0.14em;

    /* --- Spacing --- */
    --sp-0:  0;
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2.5rem;
    /* Resserrage global (retour cliente 11/06 : "trop aere") : les grands
       tokens portent ~tous les paddings de section + gros gaps -> les reduire
       resserre uniformement le rythme vertical. Valeurs d'origine :
       sp-7 4rem / sp-8 6.5rem / sp-9 10.5rem. sp-10 inchange (hero accueil). */
    --sp-7:  3rem;
    --sp-8:  4.75rem;
    --sp-9:  7.5rem;
    --sp-10: 17rem;

    /* --- Grille & largeurs --- */
    --content-width:   860px;
    --content-wide:    1360px;
    --gutter:          clamp(1rem, 4vw, 4rem);
}

/* Pack A audit 2026-05 : containers adaptatifs sur grands ecrans.
   Sur >=1600px, le contenu a 1360px paraissait microscopique au milieu
   d'un viewport 4K. On bumpe progressivement pour donner de la presence
   sans dilater le line-length texte (--content-width reste a 860px,
   ne change pas : la lecture confortable c'est 60-75 chars/ligne). */
@media (min-width: 1600px) {
    :root {
        --content-wide: 1500px;
    }
    /* Patterns Gutenberg : override --wp--style--global--content-size
       qui est defini a 1360 dans theme.json. La cascade WP applique ce
       contentSize aux enfants des wp-block-group is-layout-constrained. */
    .mam-tpl .wp-block-group.is-layout-constrained,
    .mam-tpl .wp-block-group.alignfull.is-layout-constrained {
        --wp--style--global--content-size: 1500px;
    }
}
@media (min-width: 2000px) {
    :root {
        --content-wide: 1640px;
    }
    .mam-tpl .wp-block-group.is-layout-constrained,
    .mam-tpl .wp-block-group.alignfull.is-layout-constrained {
        --wp--style--global--content-size: 1640px;
    }
}

:root {
    /* --- Transitions --- */
    --ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-luxury:    cubic-bezier(0.53, 0.15, 0, 1);
    --ease-snap:      cubic-bezier(0.165, 0.84, 0.44, 1);

    --dur-fast:   120ms;
    --dur-hover:  250ms;
    --dur-reveal: 600ms;
    --dur-menu:   800ms;

    /* --- Z-index --- */
    --z-header:     100;
    --z-mega-menu:  200;
    --z-toast:      300;
    --z-skiplink:   400;

    /* --- Dimensions dynamiques --- */
    --header-h:       96px;   /* hauteur header au chargement */
    --header-h-small: 72px;   /* hauteur header scrolled */
    --preview-bar-h:  0px;    /* la barre preview ne compte plus comme un decalage */
}

@media (max-width: 768px) {
    :root {
        --header-h:       76px;
        --header-h-small: 60px;
    }
}

/* Ambiance sombre (sur body ou section avec [data-ambiance="dark"]) */
.ambiance-dark,
[data-ambiance="dark"] {
    --color-bg:          var(--c-ink-soft);
    --color-bg-alt:      var(--c-ink);
    --color-bg-inverse:  var(--c-paper);
    --color-text:        var(--c-paper);
    --color-text-muted:  var(--c-stone-400);
    --color-text-subtle: var(--c-stone-600);
    --color-text-inverse: var(--c-ink);
    --color-hairline:    rgba(255, 255, 255, 0.1);
    --color-btn-bg:      var(--c-paper);
    --color-btn-text:    var(--c-ink);
    --color-btn-border:  var(--c-paper);
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.01ms;
        --dur-hover: 0.01ms;
        --dur-reveal: 0.01ms;
        --dur-menu: 0.01ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}