/* SentinElles — tokens du site.
 *
 * Source de vérité de la palette : mobile/src/theme.ts (ADR 0095, relevés
 * Pantone du rebrand 2026-07). Le site s'aligne sur l'app ; ne jamais
 * corriger un écart ici sans le corriger là-bas, sinon les deux repartent.
 * Voir docs/charte-graphique-web.md et ADR 0150.
 *
 * Les alias en fin de fichier existent pour les pages écrites avant ce
 * fichier (--purple-d, --purple-l, --warm, --muted, --border) : les deux
 * familles de noms désignent désormais la même couleur.
 */
:root {
    /* Marque — identiques à mobile/src/theme.ts */
    --bg: #E1F0E5; /* Pantone 9540 C — fond général (app: bg.primary) */
    --purple: #8246AF; /* Pantone 2587 C — CTA, liens, logotype (brand.base) */
    --purple-deep: #5E3280; /* hover, texte violet foncé (brand.dark) */
    --purple-light: #A87BC9; /* brand.light de l'app — la trame claire de la marque */
    --purple-pale: #E9DDF3; /* encarts, états sélectionnés (brand.highlight) */
    --accent: #8F1A95; /* Pantone 2070 C — accent iconographique (brand.accent) */
    --ink: #221D2A; /* texte principal (text.primary) */
    --ink-soft: #4B4454; /* texte secondaire (text.secondary) */

    /* Surfaces propres au site — pas d'équivalent dans l'app */
    --bg-warm: #F5F1E7; /* fond de section features */
    --cream: #FBF9F3; /* cartes et surfaces claires */
    --dark: #221D2A; /* sections sombres (stats, confiance, footer) */
    --taupe: #D7D2CB; /* Pantone Warm Gray 1 C — bordures, piliers */
    --taupe-deep: #CCC6BD; /* repères secondaires */
    --line: rgba(34, 29, 42, .14); /* séparateurs — --ink à 14 % */
    --white: #FFFFFF;

    /* Accents fonctionnels */
    --teal: #028090; /* coches et encarts de la politique de confidentialité */
    --error: #E24B4A; /* validation de formulaire — voir la charte § Rouge */
    --error-border: rgba(226, 75, 74, .6);

    /* Sur fond sombre (--dark) et sur violet plein — valeurs d'origine du
     * site, conservées telles quelles : ce sont des contrastes réglés à
     * l'œil, et l'app n'a pas de sections sombres équivalentes. Le seul
     * rapprochement possible serait --on-dark-brand vers brand.light
     * (#A87BC9) : à trancher avec une designer, pas par calcul. */
    --on-dark-brand: #C9A8DA; /* eyebrow, labels violets sur fond sombre */
    --on-dark-ink: #C9C6CF; /* texte secondaire sur fond sombre */
    --on-dark-ink-soft: #8B8894; /* texte tertiaire */
    --on-dark-footer: #B7B4C0; /* texte du footer */
    --on-purple-ink: #EBDCF0; /* texte sur aplat --purple */

    --radius: 18px;

    /* Alias historiques */
    --purple-d: var(--purple-deep);
    --purple-l: var(--purple-pale);
    --warm: var(--purple);
    --muted: var(--ink-soft);
    --border: var(--taupe);
}

/* ---------------------------------------------------------------------------
 * La marque — le tressage, à gauche du logotype (#813).
 *
 * Dessinée en SVG inline plutôt qu'en <img> : une requête de moins, et surtout
 * elle se recolore par variable là où le fond change — le pied de page passe le
 * logotype en clair, la marque suit sans second fichier.
 *
 * Géométrie : onze rectangles arrondis sur une grille 100×100, la même que
 * `mobile/scripts/generate-icons.py` (#806) et que `simbolo-principal.svg` du
 * kit. Trois barres verticales (`warp`), trois horizontales par-dessus
 * (`weft`), puis cinq carrés qui remettent la trame au-dessus : c'est cette
 * alternance qui se lit comme un tissage.
 *
 * Règle de couleur : `weft` est toujours la teinte la plus affirmée, `warp` la
 * plus douce — comme « Sentin » et « Elles » dans le mot. Ne pas inverser.
 * ------------------------------------------------------------------------- */
/* Surtout PAS de flex ici : « Sentin » et <span>Elles</span> deviendraient deux
 * items, un `gap` couperait le mot en deux, et le crénage entre le « n » et le
 * « E » sauterait à la frontière des boîtes. La marque est un inline-block dans
 * le flux de texte, le mot reste d'un seul tenant. */
/* Le logotype ne se replie jamais : la marque et le mot tiennent sur une ligne
 * ou débordent, mais ne se séparent pas. `flex: none` parce que dans l'en-tête
 * il est un item flex, que la barre de navigation rétrécirait volontiers. */
.logotype {
    white-space: nowrap;
    flex: none;
}

.logomark {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-inline-end: .4em;
    /* Descend la boîte sous la ligne de base pour centrer la marque sur la
     * bande des capitales — s'aligner sur la ligne de base la ferait flotter
     * bien au-dessus du mot. Valeur vérifiée au navigateur contre les
     * métriques réelles de Fraunces (cap-height .727em). Ne pas la régler à
     * l'œil sur une capture. */
    vertical-align: -.21em;
    --mark-warp: var(--purple-light);
    --mark-weft: var(--purple);
}

.logomark .warp { fill: var(--mark-warp); }
.logomark .weft { fill: var(--mark-weft); }

/* Fond sombre : la marque suit le texte du pied de page — clair devant,
 * violet pâle derrière. */
.foot-top .logomark {
    --mark-warp: var(--on-dark-brand);
    --mark-weft: var(--white);
}