/* Charte graphique partagée — polices et éléments repris du modèle de
   référence (hero-avant-apres-v2, Yannick, 23/08/2026) : Archivo pour le
   texte courant, Syne 900 pour les grands titres, JetBrains Mono déjà en
   place pour les eyebrows/labels/chiffres.

   Chargé après le <style> propre à chaque page — les sélecteurs ci-dessous
   sont volontairement un peu plus spécifiques (body h1, html body) pour
   gagner la cascade sur les règles h1/body déjà déclarées dans chaque
   page, sans avoir à toucher 40 fichiers pour ce réglage de fond.

   Le chargement de la police est fait par chaque page elle-même (preconnect
   + <link rel="stylesheet"> dans le <head>, avant nav.css/theme.css) plutôt
   que par un @import ici — retiré le 13/09/2026 : un @import CSS bloque le
   rendu en série (attend tout le CSS parent avant même de démarrer la
   requête de police), alors qu'un <link> démarre en parallèle. */

html body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

body h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.02;
  /* Filet de sécurité (26/08/2026) : plusieurs pages fixent une taille de
     police en px pour le grand titre sans la faire varier avec la largeur
     d'écran (au lieu d'un clamp() fluide). Sur mobile portrait, un mot long
     ("blesser.", "s'effondrer.") peut alors dépasser sa colonne — et comme
     le hero a souvent overflow:hidden (pour cacher un mot en filigrane de
     fond), ce dépassement devient invisible et non scrollable au lieu de
     passer à la ligne. overflow-wrap force le retour à la ligne en dernier
     recours, même si la taille de police n'est pas fluide. */
  overflow-wrap: break-word;
}

/* Mots d'accent dans un titre — mêmes classes que le modèle de référence. */
.g { color: #C9A84C; }
.r { color: #E8313A; }

/* Tous les champs de saisie encadrés or, comme contact.html (26/08/2026).
   !important nécessaire : chaque page définit son propre input{border:...}
   à une spécificité variable — impossible à battre proprement sans réécrire
   40 pages, donc override volontaire et ciblé ici. */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea {
  border: 1px solid #C9A84C !important;
}
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
select:focus, textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,.35) !important;
}

/* Lisibilité : les textes secondaires en gris trop sombre (#555/#666/#777)
   utilisés comme description sur beaucoup de pages du nouveau modèle
   ressortent mal sur fond quasi noir — on les remonte d'un cran.

   Point unique de réglage (26/08/2026) : toute nouvelle classe de texte
   "faible contraste" doit être ajoutée à la liste ci-dessous plutôt que
   patchée page par page, pour pouvoir tout ajuster d'un coup à l'avenir. */
.feature-desc, .gain-desc, .legit-desc, .step-desc, .principe-desc, .explain-desc,
.cs-desc, .plan-desc, .accomp-desc, .offre-sub, .hero-stat .desc, .stat-card .desc,
.problem-sub, .pain-text, .eli-text, .field-help, .bio-sub2, .page-sub2,
.temo-text, .quote-text, .filter-label, .field label, .src, .zone-desc, .zone-unit,
.result-label, .result-unit, .timeline-phase, .cta-text p, .section-label,
.eligibility-title, .cta-tag, .rc-label {
  color: #b0b0b0 !important;
}
[style*="color:#666"], [style*="color: #666"] { color: #999 !important; }
[style*="color:#777"], [style*="color: #777"] { color: #a8a8a8 !important; }
[style*="color:#555"], [style*="color: #555"] { color: #949494 !important; }

/* Anciennes pages (pas encore reconstruites) : elles définissent toutes
   leurs propres --muted/--faint dans un :root local, avant ce fichier.
   Comme theme.css est chargé après, cette redéfinition gagne la cascade et
   éclaircit d'un coup tous les textes qui utilisent var(--muted)/var(--faint)
   sur ces pages, sans avoir à toucher chaque fichier un par un. */
:root {
  --muted: #bbbbbb;
  --faint: #8f8f8f;
  --grey: #bbbbbb;
  --grey-2: #8f8f8f;
}

/* Pied de page canonique (28/08/2026) — même bloc partout, y compris le lien
   "Engagements France". Chaque page fournit juste le HTML (voir CHARTE-GRAPHIQUE.md
   §7bis) ; ce fichier gère tout le style, comme pour la nav, pour ne pas avoir
   à recopier ce CSS dans 40 fichiers. */
footer{border-top:1px solid #111 !important;padding:28px 48px !important;display:flex !important;justify-content:space-between !important;align-items:center !important;flex-wrap:wrap;gap:16px;background:transparent !important;color:inherit;margin-top:0 !important;text-align:left !important}
.footer-brand{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#666 !important}
.footer-links{display:flex;flex-wrap:wrap;gap:20px}
.footer-links a{font-size:12px;color:#666 !important;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#aaa !important}
@media(max-width:640px){
  footer{flex-direction:column;gap:12px;padding:24px 20px !important;text-align:center !important}
}
