/**
 * BT Med — design tokens.
 *
 * Source de vérité : DESIGN.md (Clinical Tech V2).
 * North Star : « La Salle de Démonstration » (alternance dark/light, accent unique #1E5BD9).
 *
 * Architecture :
 *  - :root         → palette Clinical Tech V2 canonique (navy / blue / cyan / cream)
 *                    + scale spacing/radius/easing
 *                    + alias rétrocompat pour les composants legacy (.btn-primary, --c-accent…)
 *  - [data-style="ariane"] → sur-cas magazine (Spectral italic, or champagne, ivoire)
 *                            scope strict aux pages /gamme-ariane/, /ariane/, /laser-ariane/
 *  - data-audience reste posé pour la sémantique (analytics, copy) mais NE SWAP PLUS l'accent.
 */

:root {
    /* ===========================================================
     * Clinical Tech V2 — palette canonique (cf. DESIGN.md §2)
     * =========================================================== */

    /* Navy (sombres, salle de démo) */
    --color-navy-deepest: #050E1F;
    --color-navy-deep:    #0B1936;
    --color-navy:         #142849;
    --color-navy-soft:    #1F365E;

    /* Blue (accent porteur unique) */
    --color-blue:          #1E5BD9;
    --color-blue-hover:    #1648B5;
    --color-blue-deep:     #0F3590;
    --color-blue-electric: #4D8FFF;
    --color-blue-glow:     #6BA5FF;

    /* Cyan tech (signal sur dark uniquement) */
    --color-cyan-tech: #00D9FF;

    /* Light (bureau du praticien) */
    --color-white:        #FFFFFF;
    --color-off-white:    #FAFBFC;
    --color-surface-soft: #FAFBFD;
    --color-cream:        #F4F7FB;
    --color-cream-deep:   #E5EBF3;

    /* Text */
    --color-text-primary:        #0B1936;
    --color-text-body:           #5A6B85;
    --color-text-muted:          #8A99B3;
    --color-text-on-dark:        #FFFFFF;
    --color-text-on-dark-muted:  #B8C4D9;
    --color-text-on-dark-subtle: #6B7A95;

    /* Border */
    --color-border-light:          rgba(11, 25, 54, 0.08);
    --color-border-medium:         rgba(11, 25, 54, 0.12);
    --color-border-on-dark:        rgba(255, 255, 255, 0.06);
    --color-border-on-dark-medium: rgba(255, 255, 255, 0.10);

    /* Signal */
    --color-signal-ok:    #0F8A6E;
    --color-signal-error: #C7213A;

    /* z-index scale — toujours référencer ces tokens. */
    --z-base:    0;
    --z-raised:  1;
    --z-pop:     2;
    --z-overlay: 3;
    --z-float:   5;
    --z-sticky:  40;
    --z-header:  50;
    --z-modal:   100;

    /* Fitzpatrick — phototypes I à VI (utilisé par .fitz-strip__dot--N). */
    --color-fitz-1: #f5d5b5;
    --color-fitz-2: #e8b591;
    --color-fitz-3: #c9966c;
    --color-fitz-4: #a06c43;
    --color-fitz-5: #6d4226;
    --color-fitz-6: #3a1f0f;

    /* Skin cross-section (illustration anatomique .tech__layer--*).
     * Utilisé uniquement par page-hub-sous-cat.css (vue épiderme/derme/hypoderme).
     * Distincts des phototypes Fitzpatrick : ce sont des couches anatomiques. */
    --color-skin-epi-top:    #f5d6c0;
    --color-skin-epi-bottom: #e8b896;
    --color-skin-derm-top:    #f0c4a0;
    --color-skin-derm-bottom: #d99a6e;
    --color-skin-hypo-top:    #faead7;
    --color-skin-hypo-bottom: #e8c8a8;
    --color-skin-label:      #6b3f24;
    --color-skin-label-deep: #5b2e15;
    --color-skin-hair:       #2b1a10;

    /* Alias sémantique : --color-blue-signature pointe vers --color-blue.
     * Utilisé par home.php (terminologie historique « blue signature »). */
    --color-blue-signature: #1E5BD9;

    /* ===========================================================
     * RGB triples (pour rgb(var(--rgb-X) / α) au lieu d'expanser
     * une rgba() hardcodée. Permet le thème light via flip d'un
     * seul token (--rgb-on-dark) au lieu de surcharger chaque
     * composant.
     *
     * Convention :
     *  - --rgb-on-dark : flippable (255 255 255 → 11 25 54 en light).
     *    Tout ce qui était texte/bordure/surface blanc sur sections
     *    sombres bascule en navy quand le fond devient clair.
     *  - --rgb-white : statique 255 255 255. Pour les éléments qui
     *    restent blancs dans les deux thèmes (texte sur chips navy
     *    persistants, ombres claires, etc.).
     *  - --rgb-navy / --rgb-blue / --rgb-blue-electric / --rgb-cyan :
     *    statiques. Servent aux alphas navy/blue tints qui gardent
     *    leur sens (chips, glows, focus rings) dans les deux thèmes.
     * =========================================================== */
    --rgb-on-dark:         255 255 255;
    --rgb-white:           255 255 255;
    --rgb-navy:             11  25  54;
    --rgb-navy-deepest:      5  14  31;
    --rgb-blue:             30  91 217;
    --rgb-blue-electric:    77 143 255;
    --rgb-cyan:              0 217 255;

    /* ===========================================================
     * Typography (familles globales — Clinical Tech V2)
     * Inter pour display + body, JetBrains Mono pour les eyebrows
     * techniques sur sections sombres uniquement.
     * Sur-cas Ariane (Spectral italic) géré dans le bloc data-style.
     * =========================================================== */
    --font-display: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    'JetBrains Mono', Menlo, Consolas, monospace;

    /* ===========================================================
     * Alias rétrocompat (composants legacy : .btn-primary, header,
     * footer, pages utilitaires, blog). Pointent vers le système
     * Clinical Tech V2 pour homogénéiser sans casser les classes
     * existantes. À retirer template par template au fil de la
     * migration éditoriale.
     * =========================================================== */

    --c-accent:        30  91 217;   /* alias --color-blue (RGB triple pour rgb(var(--c-accent) / α)) */
    --c-accent-2:      22  72 181;   /* alias --color-blue-hover */
    --c-surface:       250 251 252;  /* alias --color-off-white */
    --c-surface-paper: 244 247 251;  /* alias --color-cream */
    --c-surface-deep:    5  14  31;  /* alias --color-navy-deepest */
    --c-ink:            11  25  54;  /* alias --color-text-primary */
    --c-ink-quiet:      90 107 133;  /* alias --color-text-body */
    --c-filet:         220 226 235;  /* approx alpha 0.08 noir → solid pour bordures */
    --c-signal-ok:      15 138 110;
    --c-signal-err:    199  33  58;

    /* ===========================================================
     * Spacing scale (cf. DESIGN.md frontmatter)
     * =========================================================== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;
    --space-11: 128px;
    --space-12: 160px;
    --space-13: 200px;
    --space-14: 240px;

    --section-major:        clamp(96px, 11vw, 160px);
    --section-major-mobile: clamp(80px, 9vw, 128px);
    --section-default:      clamp(80px, 9vw, 144px);
    --section-default-mobile: clamp(64px, 7vw, 96px);
    --section-minor:        clamp(48px, 6vw, 80px);
    --section-minor-mobile: clamp(40px, 5vw, 64px);

    /* ===========================================================
     * Radius
     * =========================================================== */
    --radius-none: 0;
    --radius-sm:   6px;
    --radius-md:   8px;     /* canonique Clinical Tech V2 (ancien : 10px) */
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* ===========================================================
     * Shadows / glows (cf. DESIGN.md §4)
     * =========================================================== */
    --shadow-state:        0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
    --shadow-sm:           0 2px 8px rgba(11, 25, 54, 0.06);
    --shadow-md:           0 12px 32px rgba(11, 25, 54, 0.10);
    --shadow-lg:           0 20px 48px rgba(11, 25, 54, 0.12);
    --shadow-figure:       0 32px 48px -16px rgb(0 0 0 / 0.08);
    --shadow-blue-glow:    0 8px 24px rgba(30, 91, 217, 0.35);
    --shadow-deep-on-dark: 0 16px 48px rgba(0, 0, 0, 0.4);

    /* ===========================================================
     * Easing & durations (cf. DESIGN.md §1 Named Rules)
     * =========================================================== */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); /* alias legacy */

    --dur-state:  200ms;
    --dur-reveal: 400ms;

    /* ===========================================================
     * Container
     * =========================================================== */
    --wrap-max: 1240px;
    --wrap-pad: clamp(20px, 4vw, 32px);
    --container-px-mobile:  var(--space-4);
    --container-px-tablet:  var(--space-6);
    --container-px-desktop: var(--space-9);
}

/* Sur-cas Ariane retiré : la gamme Ariane est désormais portée
 * par le système V3 unifié (Inter, blue signature). */

/* ===========================================================
 * Reset léger + base
 * =========================================================== */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-feature-settings: "kern" 1;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.65;
    color: var(--color-text-primary);
    background: var(--color-off-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
}

*, *::before, *::after { box-sizing: border-box; }

/* ===========================================================
 * Hiérarchie typographique (Clinical Tech V2)
 *
 * Inter 600 par défaut sur Hn (poids tranchés : 400 corps, 600 titres,
 * 700 H1 home et chiffres-spec uniquement).
 *
 * Spécificité bumpée à (0,0,0,2) pour battre le preflight Tailwind
 * (h1, h2, h3 { font-size: inherit; font-weight: inherit }).
 * =========================================================== */

body h1, body h2, body h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    text-wrap: balance;
    margin: 0;
}

body h1 {
    font-size: clamp(52px, 7.5vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}
body h2 {
    font-size: clamp(28px, 3vw, 44px);
}
body h3 {
    font-size: clamp(18px, 2.2vw, 32px);
    line-height: 1.1;
}

/* h4 = Eyebrow Label (Inter, UPPERCASE, 11px, weight 600). */
body h4 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}

p { margin: 0; }

article p,
.prose p {
    max-width: 65ch;
    text-wrap: pretty;
    color: var(--color-text-body);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Sur-cas Ariane : titres en Spectral italic + couleur encre legacy. */
body[data-style="ariane"] h1,
body[data-style="ariane"] h2,
body[data-style="ariane"] h3 {
    font-family: Spectral, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgb(var(--c-accent));
}

/* ===========================================================
 * Container principal
 * =========================================================== */

.wrap {
    max-width: var(--wrap-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
}

/* ===========================================================
 * Eyebrow (label section UPPERCASE) — composant CSS canonique.
 * Inter 11px weight 600 letter-spacing 0.16em. Toujours en <p>,
 * jamais en <a> ni en Hn (cf. cahier 6).
 *
 * Variantes :
 *  - .eyebrow            → light, couleur text-muted
 *  - .eyebrow--on-dark   → dark, couleur text-on-dark-subtle
 *  - .eyebrow--mono      → JetBrains Mono cyan (sur dark uniquement)
 * =========================================================== */

.eyebrow {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.eyebrow--on-dark {
    color: var(--color-text-on-dark-subtle);
}

.eyebrow--accent {
    color: var(--color-blue);
}

.eyebrow--accent-strong {
    color: var(--color-blue-electric);
}

.eyebrow--mono {
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--color-cyan-tech);
    gap: 12px;
}

.eyebrow--mono::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--color-cyan-tech);
    flex-shrink: 0;
}

/* ===========================================================
 * Boutons (CTAs canoniques Clinical Tech V2)
 *
 * Forme pill (9999px) sur tout le système.
 * Sous-cas [data-style="ariane"] : retour à radius-md (8px) +
 * accent encre legacy.
 *
 * Règle Sentence-Case : pas d'UPPERCASE sur un CTA.
 * =========================================================== */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition:
        background-color var(--dur-state) var(--ease-out),
        border-color    var(--dur-state) var(--ease-out),
        color           var(--dur-state) var(--ease-out),
        transform       150ms             var(--ease-out),
        box-shadow      var(--dur-state) var(--ease-out);
}

.btn-primary {
    background: var(--color-blue);
    color: #FFFFFF;
    padding: 12px 22px;
    border: 0;
}

.btn-primary:hover {
    background: var(--color-blue-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-blue-glow);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    padding: 11px 21px;
    border: 1px solid var(--color-border-medium);
}

.btn-secondary:hover {
    background: var(--color-cream);
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* Variante on-dark : bouton ghost pour heros sombres. */
.btn-ghost-on-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #FFFFFF;
    padding: 13px 31px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    transition: background-color var(--dur-state) var(--ease-out);
}

.btn-ghost-on-dark:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Sur-cas Ariane : retour à radius-md + accent encre legacy. */
[data-style="ariane"] .btn-primary {
    background: rgb(var(--c-accent));
    border-radius: var(--radius-md);
}

[data-style="ariane"] .btn-primary:hover {
    background: rgb(var(--c-accent-2));
}

[data-style="ariane"] .btn-secondary {
    border-radius: var(--radius-md);
    color: rgb(var(--c-accent));
}

[data-style="ariane"] .btn-secondary:hover {
    border-color: rgb(var(--c-accent));
    color: rgb(var(--c-accent));
}

/* ===========================================================
 * Focus visible accessible (Clinical Tech V2 = bleu signature)
 * =========================================================== */

*:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

[data-style="ariane"] *:focus-visible {
    outline-color: rgb(var(--c-accent));
}

/* ===========================================================
 * Touch targets mobile (WCAG 2.5.8 AA, 44×44 viseur AAA)
 * =========================================================== */

@media (max-width: 768px) {
    footer nav a,
    footer ul li a,
    nav[aria-label="Fil d'Ariane"] a,
    nav[aria-label*="catégorie" i] a,
    nav[aria-label*="Sommaire" i] a {
        min-height: 44px;
        padding-block: 0.375rem;
        display: inline-flex;
        align-items: center;
    }
}

/* ===========================================================
 * Reduced motion
 * =========================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================================
 * Reveal de section (signature, IntersectionObserver côté JS)
 * Désactivé sous prefers-reduced-motion via la règle ci-dessus.
 * =========================================================== */

.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity   var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Mega menu (sous-nav header) → assets/css/header.css. */