/* ==========================================================================
   webroot/css/man-tokens.css — Code couleur de Martinique A Nu (oct. 2026, v2)

   Direction : une interface SOBRE qui s'efface derrière le contenu.
   Les photos de l'île portent la couleur ; l'interface est neutre,
   avec UNE couleur d'action (vert forêt) pour liens, boutons et focus.
   La famille de la page n'apparaît qu'en un trait, sous le bandeau.

   Mode sombre : préparé (data-theme="dark"), activé plus tard — voir plus bas.

   Règle d'or : dans les autres CSS, on écrit var(--man-link), jamais #144d47.

   Contrastes vérifiés (WCAG AA, texte ≥ 4.5:1) :
   clair  — texte 16:1 · gris 6.4:1 · forêt 9.6:1 · familles ≥ 6:1
   sombre — texte 15:1 · gris 8.2:1 · liens 9.7:1 · familles ≥ 7.6:1
   ========================================================================== */

:root {
    color-scheme: light;

    /* ── Neutres ── */
    --man-bg:          #ffffff;
    --man-surface:     #ffffff;   /* article, cartes */
    --man-surface-2:   #f6f6f4;   /* colonne de droite, encadrés */
    --man-border:      #e6e6e2;
    --man-text:        #1f1f1d;
    --man-text-muted:  #5f5f5a;

    /* ── Action : une seule couleur ── */
    --man-link:        #144d47;   /* vert forêt */
    --man-link-hover:  #0e3632;
    --man-focus:       #144d47;
    --man-btn-bg:      #144d47;
    --man-btn-bg-hover:#0e3632;
    --man-btn-text:    #ffffff;

    /* ── Familles : un trait sous le bandeau, rien de plus ── */
    --man-terre:       #7a4a1e;   /* personnalités */
    --man-feuille:     #2f6b3a;   /* nature */
    --man-lagon:       #0b5c6b;   /* mer, rivières */
    --man-balisier:    #b03a1a;   /* culture */
    --man-hibiscus:    #a3213a;   /* histoire */
    --man-pierre:      #5f5f5a;   /* infos pratiques */

    /* ── États (sens universel) ── */
    --man-danger:      #b42318;
    --man-attention:   #8a5a00;
    --man-succes:      #2f6b3a;

    --man-radius:      8px;

    /* Compatibilité : tout le CSS existant qui utilise --vert-default suit */
    --vert-default:    var(--man-link);
}

/* ── Mode sombre : PRÊT, mais pas encore automatique ──
   Tant que style.css et custom.css contiennent des couleurs écrites en dur
   (fonds blancs, textes noirs), un mode sombre automatique donnerait des blocs
   blancs sur fond noir, ou du texte noir sur fond noir. On l'active seulement
   pour tester, avec <html data-theme="dark">. Quand tout le CSS utilisera les
   variables, on le rendra automatique (prefers-color-scheme). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --man-bg:          #131615;
    --man-surface:     #1b1f1d;
    --man-surface-2:   #181b1a;
    --man-border:      #2c322f;
    --man-text:        #e9ebe7;
    --man-text-muted:  #a9b0ab;
    --man-link:        #7fcbb8;
    --man-link-hover:  #a6dccf;
    --man-focus:       #7fcbb8;
    --man-btn-bg:      #7fcbb8;
    --man-btn-bg-hover:#a6dccf;
    --man-btn-text:    #0f2a25;
    --man-terre:       #d9a571;
    --man-feuille:     #8cc79a;
    --man-lagon:       #7cc5d3;
    --man-balisier:    #f0937a;
    --man-hibiscus:    #ef8fa3;
    --man-pierre:      #a9b0ab;
    --man-danger:      #f28b82;
    --man-attention:   #e0b45c;
    --man-succes:      #8cc79a;
}

/* ── Couleur de la page (FamilyHelper écrit <body data-famille="…">) ── */
body                           { --man-accent: var(--man-link); }
[data-famille="personnalites"] { --man-accent: var(--man-terre); }
[data-famille="nature"]        { --man-accent: var(--man-feuille); }
[data-famille="mer"]           { --man-accent: var(--man-lagon); }
[data-famille="culture"]       { --man-accent: var(--man-balisier); }
[data-famille="histoire"]      { --man-accent: var(--man-hibiscus); }
[data-famille="pratique"]      { --man-accent: var(--man-pierre); }

/* ==========================================================================
   BASE ACCESSIBLE — commune à tout le site
   ========================================================================== */
body {
    background: var(--man-bg);
    color: var(--man-text);
}

/* Le seul endroit où la famille se voit : un trait sous le bandeau */
.jumbotron-arrow {
    border-bottom: 3px solid var(--man-accent);
}

/* Focus clavier identique partout, visible au clavier seulement (RGAA 10.7) */
:focus-visible {
    outline: 3px solid var(--man-focus);
    outline-offset: 2px;
}

/* Liens dans les textes : soulignés, la couleur seule ne suffit pas (RGAA 10.6) */
.man-article-content a,
.perso-intro a {
    color: var(--man-link);
    text-decoration: underline;
    text-underline-offset: .15em;
}
.man-article-content a:hover,
.perso-intro a:hover {
    color: var(--man-link-hover);
    text-decoration-thickness: 2px;
}

/* Réduire les animations si le visiteur l'a demandé (RGAA 13.8) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mode « contraste élevé » de Windows : les traits restent visibles */
@media (forced-colors: active) {
    .jumbotron-arrow { border-bottom-color: CanvasText; }
}