/* Charte graphique v2 (2026-07-15) — palette, typographie, espacement.
   Voir developpement site/charte_graphique_chatbot_victimes_v2_2026-07-15.md */

/* Polices auto-hébergées (site/fonts/, licence SIL OFL — voir site/fonts/LICENSE.txt).
   Volontairement PAS chargées depuis fonts.googleapis.com/fonts.gstatic.com : ce site a
   une fonctionnalité "Effacer mes traces" pour des utilisateurs potentiellement en
   danger, et une requête vers un CDN tiers à chaque visite exposerait leur IP — même
   logique que le choix de ne pas utiliser Google Fonts ailleurs sur le site. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/public-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/zilla-slab-600.woff2') format('woff2');
}

:root {
  /* Couleurs de marque */
  --couleur-nuit:      #2C3E42; /* Nuit douce — ancrage, header, footer, titres, liens tertiaires */
  --couleur-sauge:      #7C9885; /* Sauge — secondaire, hover, boutons secondaires */
  --couleur-ambre:      #B8804A; /* Ambre — accent CTA, action principale UNIQUEMENT, jamais en décoration */
  --couleur-brume:      #F1F0EB; /* Brume — fond principal */
  --couleur-encre:      #24302F; /* Encre — texte principal */
  --couleur-poussiere:  #E4CFC5; /* Poussière rose — highlight rare, jamais d'alerte */

  /* Dérivées fonctionnelles (charte) */
  --couleur-nuit-hover:       #243336;
  --couleur-ambre-hover:      #A06F3F;
  --couleur-sauge-hover:      #6B8574;
  --couleur-texte-secondaire: #5A6663;
  --couleur-bordure:          #D7D4CB;

  /* Réservé — jamais pour l'identité de marque : bandeau urgence uniquement */
  --couleur-urgence:    #B23A2E;
  --couleur-urgence-texte: #FFFFFF;

  /* Dérivées non spécifiées par la charte, ajoutées pour les besoins du site existant */
  --couleur-surface:       #FFFFFF; /* fond des cartes/bulles, se détache de --couleur-brume */
  --couleur-encadre-bg:        #FFF3E0; /* fond des encadrés ⚠️ signal fort — jamais --couleur-poussiere (réservée hors alerte) */
  --couleur-encadre-bordure:   #C4711A;

  /* Typographie — Zilla Slab et Public Sans auto-hébergées (@font-face ci-dessus).
     Repli sur Roboto Slab/Source Sans/système si les .woff2 ne chargent pas. */
  --font-titre: 'Zilla Slab', 'Roboto Slab', Georgia, serif;
  --font-corps: 'Public Sans', 'Source Sans 3', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-legal: 'Source Sans 3', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-base: var(--font-corps); /* alias historique, conservé pour compat */

  --font-size-h1: 2rem;       /* 32px, jusqu'à 36px sur grand écran — voir media query */
  --font-size-h2: 1.5rem;     /* 24px */
  --font-size-h3: 1.1875rem;  /* 19px */
  --font-size-base: 1rem;     /* 16px, corps */
  --font-size-small: 0.875rem;/* 14px, caption/bulle */
  --font-size-large: var(--font-size-h3); /* alias historique (screen-title) */
  --line-height-body: 1.6; /* minimum — lecture sous stress */

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  --espace-section: 2.5rem;      /* entre blocs de contenu (corps / encadré / bulle / choix / renvois) */
  --espace-paragraphe: 1.25rem;  /* entre paragraphes d'un même bloc */
  --marge-nav-sous-titre: 2rem;  /* sous le sous-titre d'intro, avant le menu */
  /* Décision finale charte v12 §7 : header et contenu centrés INDÉPENDAMMENT, chacun sa
     propre largeur max — revient sur le gutter partagé (v10) dont le rendu large écran
     était disproportionné (grand vide à droite). Header/footer : 1040px (contient toute
     la nav) ; contenu (#app) : 640px (lisibilité). Pas le même bord gauche par construction
     — assumé, voir commentaires sur .site-header-row / #app dans layout.css. */
  --marge-laterale-max: 120px;
  --largeur-contenu-max: 640px;  /* charte v8 §7 — colonne de contenu narratif, #app */
  --largeur-header-max: 1040px;  /* charte v12 §7 — bande header/footer, plus large que le contenu */
  --espace-label-groupe: 0.75rem; /* label de groupe (ex. "Vous êtes le parent :") → 1er élément du groupe */
  --espace-entre-groupes: 2rem;   /* fin d'un groupe → label du groupe suivant */

  /* Radius / ombres douces */
  --radius: 0.75rem;
  --shadow-card: 0 1px 3px rgba(36, 48, 47, 0.08);

  /* Cible tactile minimale */
  --tap-target: 44px;

  /* Alias historiques → nouvelle palette (évite une réécriture simultanée de tous les
     sélecteurs ; les nouveaux styles doivent utiliser les variables --couleur-*
     directement, ces alias sont là pour la transition). */
  --color-bg: var(--couleur-brume);
  --color-surface: var(--couleur-surface);
  --color-text: var(--couleur-encre);
  --color-text-muted: var(--couleur-texte-secondaire);
  --color-border: var(--couleur-bordure);
  --color-primary: var(--couleur-nuit);
  --color-primary-dark: var(--couleur-nuit);
  --color-urgence-bg: var(--couleur-urgence);
  --color-urgence-text: var(--couleur-urgence-texte);
  --color-warning-bg: var(--couleur-encadre-bg);
  --color-warning-border: var(--couleur-encadre-bordure);
  --color-clear-bg: var(--couleur-nuit);
  --color-clear-text: var(--couleur-brume);
}

body {
  background: var(--couleur-brume);
  color: var(--couleur-encre);
  font-family: var(--font-corps);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

h1, h2, h3, .screen-title { font-family: var(--font-titre); }