/* StreetHome Investissement — Design system partagé (lot 20.2)
   ================================================================
   Ce fichier est la première étape d'une migration progressive : une page
   à la fois (voir le lot 20.2, dashboard.php en premier). Il ne contient
   QUE des règles vérifiées identiques (ou décomposées en base commune +
   override local) dans le code existant — jamais une valeur inventée.

   Méthode : chaque bloc ci-dessous a été extrait par recherche exhaustive
   dans les 16 fichiers du module (grep sur chaque sélecteur), pas par
   estimation. Quand une propriété divergeait d'un fichier à l'autre
   (padding, taille, marge...), elle reste dans le CSS local de la page —
   seule la partie réellement identique partout est centralisée ici. Les
   divergences trouvées sont documentées en commentaire à chaque bloc
   concerné, et récapitulées dans le rapport du lot 20.2.

   Ordre de chargement attendu : <link href="assets/style-commun.css"> AVANT
   le <style> local de la page, pour que les overrides locaux (mêmes
   sélecteurs, propriétés différentes) gagnent naturellement par ordre
   d'apparition — aucun !important nécessaire nulle part dans ce fichier.
   Ne jamais inverser cet ordre : le <style> local est volontairement chargé
   après pour permettre ces overrides à spécificité égale.

   Deux sources CSS partagées (lot 20.3) : CE fichier contient les composants
   généraux (.panel, .chip, .bouton, badges...) et les variables. La
   navigation/structure globale (.shell, .sidebar, .content) vit exclusivement
   dans pm_invest_css_navigation() (navigation.php) — voir le commentaire en
   tête de ce fichier pour le détail. Cette fonction consomme les variables
   définies ci-dessous, d'où l'obligation de charger ce fichier en premier.
   ================================================================ */

/* ---------- Variables : union de tous les tokens observés (14 fichiers,
   4 variantes selon les besoins de chaque page — celle-ci est le
   sur-ensemble complet, aucune valeur ne diffère d'un fichier à l'autre
   pour un même token, donc aucun risque à tout regrouper ici). ---------- */
:root {
  --navy: #1A2B3C;
  --navy-deep: #041627;
  --gold: #C5A059;
  --gold-dark: #a9863f;
  --ink: #111c2c;
  --muted: #44474c;
  --error: #ba1a1a;
  --succes: #1a7a3c;
  --warning: #9a6b0c;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* Body des pages applicatives (tableau de bord, fiches, listes...) — cette
   règle exacte est identique dans 14 fichiers sur 16 (vérifié par
   comparaison octet à octet). index.php (page de connexion) et
   rapport.php (export imprimable) ont un body volontairement différent
   (mise en page centrée / fond blanc pour impression) — ils gardent leur
   propre règle body en local, chargée après ce fichier, qui la remplace
   naturellement. */
body { font-family: 'Inter', -apple-system, sans-serif; background: #f3f1ec; color: var(--ink); margin: 0; }

/* ---------- Composants communs ---------- */

/* .panel — base identique partout (fond blanc, coins arrondis, ombre).
   CONFLIT DÉTECTÉ : padding varie (18/20/22px), margin-bottom varie
   (absent/18/20px), max-width varie énormément (560/620/700px/absent)
   selon les pages. Ces trois propriétés restent donc définies localement
   dans chaque page tant qu'elles divergent — les regrouper ici changerait
   le rendu visuel de certaines pages, ce qui est interdit par ce lot. */
.panel { background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(14,31,51,.05); }

/* .panel h2, .panel h3 — titre de panneau (RC1 phase 3). CONFLIT DÉTECTÉ : le tag varie (h2 sur 6 pages,
   h3 sur dashboard.php uniquement), font-size varie énormément (15-20px), margin-bottom varie (6-14px),
   et surtout color:var(--navy) est présent sur 6 pages mais ABSENT sur dashboard.php — son .panel h3
   garde la couleur de texte par défaut du body (choix visuel différent, pas une divergence accidentelle
   à harmoniser). color reste donc local partout, jamais centralisé ici. */
.panel h2, .panel h3 { font-family: 'Playfair Display', serif; font-weight: 700; }

/* .chip — base identique. CONFLIT DÉTECTÉ : font-size varie (11px sur 2
   fichiers, 11.5px sur 4), padding varie une fois (3px 10px au lieu de
   2px 8px) — laissés en local. */
.chip { display: inline-block; border-radius: 8px; font-weight: 600; background: #eef1f8; color: var(--navy); }

/* ---------- Button Design System (lot 20.4, complété en RC1 phase 1) ----------
   .bouton/.bouton-fantome/.bouton-icone (générations précédentes) ont été entièrement remplacées par
   .btn/.btn-primary/.btn-secondary/.btn-icon sur toutes les pages — supprimées (code mort).
   .btn ne contient QUE les propriétés de forme/comportement réellement communes (jamais de couleur —
   les couleurs vivent dans les variantes .btn-primary/.btn-secondary/.btn-danger). Sizing (height,
   padding, border-radius, font-size) reste local à chaque page migrée, comme pour .panel/.chip : ces
   valeurs divergent réellement d'une page à l'autre (28-40px de hauteur selon les pages). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
  border: none;
  user-select: none;
}
/* outline volontairement absent de .btn : testé en local (lot 20.4), même "outline: inherit" supprime
   l'anneau de focus clavier par défaut du navigateur (une règle auteur bat toujours la règle UA du
   focus-visible, même avec une valeur en apparence neutre). Ne rien déclarer est le seul moyen de
   préserver exactement le comportement de focus actuel — aucune règle de focus spécifique au bouton
   n'existe ailleurs dans le projet à reprendre à la place. */

/* .btn-primary — bouton doré principal, reprend exactement les valeurs de `button`/`button:hover`
   (identiques dans les 7 fichiers qui les définissent). Aucune règle de focus spécifique trouvée dans le
   projet pour ce bouton — non inventée. */
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); }

/* .btn-secondary — reprend exactement `button.secondaire` (identique dans analyse-ville.php, dossier.php,
   fiche.php). */
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid #d8dce3; }
.btn-secondary:hover { background: #faf9f6; }

/* .btn-danger — reprend exactement `button.danger` (fiche.php, seul usage actuel — variante réelle,
   pas anticipée). */
.btn-danger { background: #fff; color: var(--error); border: 1px solid var(--error); }
.btn-danger:hover { background: #fff5f5; }

/* .btn-icon — reprend les couleurs/espacement de `.bouton-icone` (navigation.php, seul usage actuel —
   variante réelle, pas anticipée). display vient déjà de .btn. */
.btn-icon { background: none; color: #fff; padding: 6px; }

/* .btn-small : non créée dans ce lot. Aucune page n'a deux tailles de bouton coexistantes — chaque page a
   choisi UNE taille pour son bouton (34/36/40px), ce qui est une divergence par page (déjà gérée en
   local, comme .panel), pas une variante "compacte" distincte à généraliser. Voir rapport du lot 20.4. */

/* .resultat — ligne libellé/valeur avec séparateur. Base identique.
   CONFLIT DÉTECTÉ : padding vertical varie (8/10px), font-size varie
   (13.5/14px) — laissés en local. */
.resultat { display: flex; justify-content: space-between; border-bottom: 1px solid #f2f2f2; }
.resultat:last-child { border-bottom: none; }
.resultat .val { font-weight: 700; }

/* .avert — encart d'avertissement jaune pâle. Base identique.
   CONFLIT DÉTECTÉ : margin-top varie (4/6/20px), padding varie (10px
   12px/14px), border-radius varie une fois (8px au lieu de 10px), un
   fichier ajoute un max-width — laissés en local. */
.avert { color: var(--muted); background: #fff8e6; }

/* .alert — bannière de confirmation/erreur en haut de page. NON CENTRALISÉ
   dans cette étape : divergence trop importante entre fichiers (max-width
   560 à 1180px, margin auto ou non, padding et font-size différents à
   chaque fois) — aucune base commune solide à extraire sans risquer un
   changement visuel. À revoir une fois plusieurs pages migrées et le vrai
   dénominateur commun mieux identifié. */

/* .badge-tier — pastille de verdict (très bon/bon/moyen/risque/faible).
   Identique dans les 2 fichiers qui l'utilisent aujourd'hui (fiche.php,
   intelligence.php) — centralisé tel quel, aucune divergence. */
.badge-tier { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 700; color: #fff; }
.badge-tier.tres-bon { background: var(--succes); }
.badge-tier.bon { background: #2f9e52; }
.badge-tier.moyen { background: #b8860b; }
.badge-tier.risque { background: #c96a1a; }
.badge-tier.faible { background: var(--error); }

/* .score-badge — pastille circulaire du score /100. CONFLIT DÉTECTÉ : taille
   64px/26px sur un fichier, 58px/23px sur l'autre — la forme et les
   couleurs sont centralisées, la taille reste locale à chaque page. */
.score-badge { flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; color: #fff; }
.score-badge.score-bon { background: var(--succes); }
.score-badge.score-moyen { background: #b8860b; }
.score-badge.score-faible { background: var(--error); }

/* .badge — badge générique (priorité/état, dossier.php). Un seul fichier
   l'utilise aujourd'hui, aucune divergence possible — centralisé par
   anticipation des futures pages qui en auront besoin (pipeline, tâches). */
.badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.badge.alerte { background: #fdecea; color: var(--error); }
.badge.haute { background: #fdecea; color: var(--error); }
.badge.moyenne { background: #fdf3e3; color: #8a5a00; }
.badge.basse { background: #eef1f8; color: var(--navy); }
.badge.fait { background: #e8f4ec; color: var(--succes); }
.badge.retard { background: #fdecea; color: var(--error); }

/* .risque-badge — carte de risque (sismique, argiles, radon...). Un seul
   fichier l'utilise aujourd'hui (fiche.php) — centralisé par anticipation. */
.risque-badge { border-radius: 10px; padding: 12px; border: 1px solid #eee; }
.risque-badge .pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.risque-badge.vert .pastille { background: var(--succes); }
.risque-badge.orange .pastille { background: #c96a1a; }
.risque-badge.rouge .pastille { background: var(--error); }
.risque-badge.gris .pastille { background: #b7b7b7; }
.risque-badge .label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.risque-badge .texte { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* .timeline — liste d'événements horodatés. Base identique. CONFLIT
   DÉTECTÉ : dossier.php ajoute max-height + overflow-y (liste scrollable),
   fiche.php n'en a pas — laissé en local. */
.timeline { list-style: none; margin: 0; padding: 0; }

/* .etat-vide — état vide illustré (aucune donnée). Base et paragraphe
   identiques. CONFLIT DÉTECTÉ mineur : le titre h2 fait 20px sur un
   fichier, 21px sur les autres — laissé en local. */
.etat-vide { background: #fff; border: 1px dashed #d8dce3; border-radius: 10px; padding: 46px 30px; text-align: center; }
.etat-vide p { font-size: 14px; color: var(--muted); max-width: 46ch; margin: 0 auto 20px; }
.etat-vide .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }

/* .vide — texte d'état vide simple (pas de donnée disponible dans un
   panneau). Identique dans 3 fichiers sur 4 — centralisé. Le 4e usage
   (mise en page centrée avec padding) reste local, c'est un traitement
   visuel différent sous le même nom de classe, pas une simple variante. */
.vide { color: var(--muted); font-size: 13px; }

/* ---------- Table Design System (RC1 phase 2) ----------
   .table-donnees — tableau de données standard (liste avec en-têtes en majuscules), identique sur les 4
   pages qui l'utilisent (analyse-ville, masse, rapports, opportunites). CONFLIT DÉTECTÉ : font-size table
   varie (13.5/14px), padding th/td varie (9/10px), font-size th varie (11.5/12px), min-width présent sur
   2 pages sur 4 — laissés en local, comme .panel/.chip.
   tr:hover td (fond survol au survol de ligne) n'est PAS centralisé : présent sur masse/rapports/
   opportunites, absent sur analyse-ville.php sans justification documentée dans le code (probable oubli
   d'origine, mais corriger silencieusement une incohérence préexistante est hors périmètre de ce lot) —
   reste donc local à chaque page exactement comme avant, jamais ajouté à analyse-ville.php.
   Classe dédiée (jamais de sélecteur `table`/`th`/`td` nu) car comparateur.php (matrice de comparaison),
   intelligence.php (table compacte "manquantes") et fiche.php (tables éditables en formulaire, tout en
   style inline) ont des tableaux structurellement différents — un sélecteur nu les affecterait par
   erreur alors qu'ils ne partagent aucune propriété avec ce composant. Volontairement non touchés. */
.table-donnees { width: 100%; border-collapse: collapse; }
.table-donnees th { text-align: left; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #eee; }
.table-donnees td { border-bottom: 1px solid #f2f2f2; }

/* ---------- Form Design System (RC1 phase 4) ----------
   .champ — champ de saisie texte standard (input texte/nombre/date/mot de passe/url, select, textarea).
   Volontairement une CLASSE DÉDIÉE ajoutée explicitement sur chaque champ concerné, jamais un sélecteur
   nu `input`/`select`/`textarea` : le projet compte 70 `<input type="hidden">`, 9 cases à cocher, 4
   champs fichier et 1 curseur (range) qui ne doivent jamais recevoir ce style. Un sélecteur nu les
   affecterait tous par erreur (plusieurs pages ont par exemple des cases à cocher dans un `<table>` qui
   auraient hérité d'un style de champ texte). CONFLIT DÉTECTÉ : border-radius vaut 6px sur dossier.php
   (cohérent avec son thème général plus compact) contre 8px partout ailleurs — laissé local. font-family
   n'est pas centralisée : présente sur la plupart des pages mais absente sur .champ-cle de parametres.php
   sans que ce soit documenté comme un choix — pas ajoutée pour ne pas changer ce champ précis. */
.champ { border: 1px solid #d8dce3; border-radius: 8px; }

/* ---------- Non centralisé volontairement ----------
   - .carte : nom de classe réutilisé pour DEUX composants visuellement
     différents (carte de connexion 380px vs carte de résultat DVF avec
     ombre légère) — les regrouper créerait un vrai risque de collision.
   Ce point est repris dans le rapport du lot 20.2 comme conflit à
   surveiller lors des prochaines migrations. */