/* Le style partagé du site — lot 0 de deploy/PLAN_IDENTITE.md (23/09/2026).
   Chargé AVANT le bloc <style> de chaque page : index, admin, apropos, dossier, conditions,
   confidentialite. Les couleurs, les polices, les rayons et l'ombre vivent ICI, et nulle part
   ailleurs ; une page ne garde que ce qui lui est propre. Le 22/09, éclaircir un gris avait
   demandé cinq modifications : c'est désormais une seule ligne.
   Ne pas y mettre les couleurs de la CARTE ni du DPE : ce sont des couleurs de données, écrites
   dans carte.js, et elles ne suivent pas l'habillage.

   Lot 0 bis (23/09) : l'identité D, « Franc, sans le côté portail », choisie par Jean sur les
   maquettes (PLAN_IDENTITE.md § 8 bis) — fond blanc, indigo, Schibsted Grotesk, chiffres forts ;
   les pilules pour les seules étiquettes, des angles de 8 px pour les boutons et les champs.
   Tous les couples texte/fond ci-dessous ont été mesurés à 4,5 : 1 au moins (le plus juste :
   l'ocre sur son fond doux, 4,6 : 1). Toute nouvelle couleur de texte se mesure avant d'entrer. */

/* Une seule famille, servie par le site (pas d'appel à Google) ; si elle manque ou tarde, la
   police du système prend le relais sans bloquer l'affichage. Licence : fonts/OFL.txt. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
}

:root {
  /* fonds et encre */
  --ground:#f6f6f9; --surface:#fff; --surface-2:#f0f0f5;
  --ink:#0d0d14; --ink-mid:#2e2e3b; --ink-soft:#474756; --ink-faint:#5e5e6d;
  --gris:#e8e8ef;  /* fond des étiquettes neutres (« plus en vente ») */
  --line:#e6e6ee; --line-strong:#cfcfdb;
  /* texte posé sur un aplat (accent, encre, vert) */
  --on-fill:#fff;

  /* l'accent : liens, boutons, onglet actif — un indigo, qu'aucun vert de la carte ne rappelle */
  --accent:#3633c4; --accent-soft:#ecebfb; --accent-pale:#f7f7fd; --accent-line:#c9c8f0;
  --accent-ink:#2a279c; --accent-light:#b9b8ff;

  /* « sous sa valeur » : la pépite */
  --pepite:#12764a; --pepite-soft:#dff3e8; --pepite-pale:#f4fbf7; --pepite-line:#b3dfc6;
  --pepite-ink:#0d5a37; --pepite-light:#9ee6bd;

  /* « au-dessus » et « à vérifier » */
  --surcote:#b3461f; --surcote-soft:#fbe7df; --surcote-line:#f0c4b1; --surcote-ink:#772a10;
  --erreur:#b3461f; --danger:#a13a19;

  /* l'encadré qui répond (« Ce que vaut ce bien », l'opportunité d'un quartier) */
  --oppo-bg:var(--accent-soft); --oppo-line:var(--accent-soft); --oppo-titre:var(--accent);

  /* le doute, le verrou du payant, les brouillons : l'ambre */
  --doute:#f7ecc8; --doute-ink:#6f510b;
  --brouillon-line:#e3cf8f; --brouillon-ink:#5c4410;

  /* l'étoile des favoris */
  --etoile:#935f06; --etoile-soft:#fcf1dc; --etoile-line:#e6cc95; --etoile-ink:#6f4604;

  /* la jauge du mot de passe, cran du milieu */
  --jauge-moyen:#d9a21b;

  /* polices : les titres et les grands chiffres sont appuyés et resserrés */
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --titre-poids:800; --titre-interlettre:-.025em;
  /* les chiffres : NATURELS. En chiffres alignés (tabular-nums), Schibsted Grotesk donne aussi à
     la virgule et au point la largeur d'un chiffre — « 1 , 30 M€ », « 6 , 69 % ». Seul le tableau
     des ventes voisines, qui n'a que des entiers, garde les chiffres alignés, écrit en dur. */
  --chiffres:normal;

  /* formes : des angles pour ce qu'on actionne, un peu plus de rondeur pour ce qui contient ;
     les pilules (100px) restent aux étiquettes */
  --r-ctl:8px; --r-carte:12px; --r-panneau:14px;

  /* l'ombre des éléments posés sur la carte */
  --shadow:0 1px 2px rgba(13,13,20,.08), 0 8px 24px rgba(13,13,20,.10);
}
*{box-sizing:border-box;}

/* La fenêtre : celle des comptes sur la carte (compte.js, #modale) et le composant Modale des écrans
   React (front/src/lib/Modale.tsx) — un seul habillage pour les deux (lot 2 de PLAN_FRONT_REACT.md).
   Déplacé d'index.html, identique au pixel près sur la carte (le titre visait #m-corps h2) ; ajoutés
   pour l'administration, dont les boutons ont leur propre style : le padding nul de la croix, le texte
   blanc du bouton danger, et .m-actions. Les champs des formulaires de compte restent dans index.html. */
.modale{position:fixed;inset:0;background:rgba(25,33,43,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;overflow-y:auto;}
.modale[hidden]{display:none;}
.m-boite{position:relative;background:var(--surface);border-radius:14px;box-shadow:0 10px 40px rgba(25,33,43,.3);width:100%;max-width:420px;padding:1.3rem 1.3rem 1.2rem;box-sizing:border-box;}
.m-boite.large{max-width:560px;}
.m-x{position:absolute;top:10px;right:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:100px;width:30px;height:30px;padding:0;font-size:1rem;line-height:1;cursor:pointer;}
.m-boite h2{margin:0 2rem .2rem 0;font-size:1.2rem;}
.m-sous,.m-texte{margin:0 0 .8rem;font-size:.86rem;color:var(--ink-soft);}
.m-texte{color:var(--ink);font-size:.92rem;}
.m-prim{border:0;background:var(--accent);color:var(--on-fill);border-radius:var(--r-ctl);padding:.65rem .9rem;font:inherit;font-weight:600;cursor:pointer;margin-top:.3rem;}
.m-prim:disabled{opacity:.6;cursor:wait;}
.m-prim.danger{background:var(--danger);color:var(--on-fill);}
.m-note{margin:.3rem 0 0;font-size:.74rem;color:var(--ink-faint);}
.m-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}
/* le lien qui est un bouton (« Annuler », « Se déconnecter ») */
button.lien{border:0;background:none;padding:0;font:inherit;font-size:.82rem;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
button.lien.danger{color:var(--danger);}
a.lien{text-decoration:underline;text-underline-offset:2px;}