/* ============================================================
   ESTIMER.EU — P1-B Design Lock, Lot 1 (fondation partagée Home + Relevé).
   Verrouillé contre Figma (nodes 36:5 dark result module / 40:69 light relevé),
   confirmé fondateur. Contient UNIQUEMENT : tokens P1-B, @font-face communes
   (Inter/Schibsted Grotesk/JetBrains Mono), règles typographiques communes,
   le composant Signature Data, la bande de distribution interquartile, le
   composant source à 3 segments, leurs variantes clair/sombre, et les règles
   d'accessibilité partagées (focus, forced-colors, prefers-contrast,
   prefers-reduced-motion). Chargé par web/estimer.html ET web/releve.html.
   Aucun calcul ici : ces composants affichent des valeurs déjà calculées
   par web/estimer-engine.js (via estimer.app.js / releve.html), jamais
   recalculées dans ce fichier ni dans le JS qui le consomme.
   ============================================================ */

/* ---------- @font-face : Inter Variable (UI/labels/corps) ----------
   Déclaration UNIQUE partagée Home + Relevé — ne pas dupliquer ailleurs
   (web/estimer.css garde la sienne pour les pages non migrées de ce lot ;
   web/releve.html ne déclare plus la sienne, voir web/releve.html). */
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-variable-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-variable-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- @font-face : Schibsted Grotesk Medium only (chiffre de fourchette) ----------
   Auto-hébergée, SIL OFL 1.1 (voir web/fonts/OFL-SchibstedGrotesk.txt).
   Regular 400 retiré : aucun usage calculé (.pb-sigdata-range = weight 500). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibstedgrotesk-medium-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibstedgrotesk-medium-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- @font-face : JetBrains Mono (données/mono) ----------
   Auto-hébergée, SIL OFL 1.1 (voir web/fonts/OFL-JetBrainsMono.txt),
   subset latin + latin-extended, Regular + Medium uniquement. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrainsmono-regular-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrainsmono-regular-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrainsmono-medium-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrainsmono-medium-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---------- P1-B tokens (verrouillés, ne pas modifier hors décision fondateur) ---------- */
  /* Brand */
  --brand-primary:#3347D9;
  --brand-primary-hover:#2436C2;
  --brand-primary-active:#1E2EA4;
  --brand-primary-tint:#E5E7F5;
  --brand-on-dark:#939EEB;

  /* Data */
  --data-teal:#0E8FA3;
  --data-teal-text:#0B6E7E;
  --data-teal-light:#5FD2E3;
  --data-bar-faint:#DCEEF2;
  --data-bar-faint-dark:#1D2E42;

  /* Surfaces */
  --surface-canvas:#F3F6FA;
  --surface-raised:#FFFFFF;
  --surface-sunken:#E8EEF6;
  --result-dark:#101826;

  /* Text */
  --text-primary:#1A1F27;
  --text-secondary:#4C5563;
  --text-tertiary:#68727F;
  --text-on-dark:#E6EBF2;
  --text-on-dark-secondary:#9FB0C4;

  /* State */
  --state-positive:#0B7A44;
  --state-warning:#8A5A00;
  --state-error:#B3261E;
  --state-disabled-surface:#E8EEF6;
  --state-disabled-text:#5C6472;

  /* Border */
  --border-default:#D2DAE6;
  --border-control:#79839A;
  --border-focus:#3347D9;
  --border-on-dark:#25344A;

  /* Geometry */
  --radius-control:4px;
  --rail-width:3px;
  --radius-data:2px 2px 14px 2px;

  /* Familles de polices P1-B (usage interne à ce fichier, préfixées pb-) */
  --pb-font-headline:"Schibsted Grotesk","Inter Variable",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pb-font-ui:"Inter Variable",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pb-font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- règles typographiques communes ---------- */
.pb-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ============================================================
   COMPOSANT : Signature Data
   Rail 3px solide (teal clair/sombre), radius --radius-data (coin ouvert
   bas-droit), contenu = label -> fourchette -> médiane/prix m² -> séparateur
   -> distribution -> source -> fiabilité. Reçoit un résultat déjà calculé,
   ne calcule jamais rien lui-même.
   ============================================================ */
.pb-sigdata{
  position:relative;
  border-radius:var(--radius-data);
  padding:20px 22px 22px calc(22px + var(--rail-width));
}
/* ---------- contexte sombre : notes secondaires héritées (h-src/h-confidence-tag) restent
   lisibles -- ces classes viennent de web/estimer.css (contexte clair par défaut) et doivent
   être réaccordées ici pour le module sombre, sans dupliquer leurs règles de mise en page. */
.pb-sigdata--dark .h-src{ color:var(--text-on-dark-secondary); }
.pb-sigdata--dark .h-src b{ color:var(--text-on-dark); }
.pb-sigdata--dark .h-src a{ color:var(--data-teal-light); border-bottom-color:var(--border-on-dark); }
.pb-sigdata--dark .h-confidence-tag{ background:var(--border-on-dark); color:var(--text-on-dark); }
.pb-sigdata::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:var(--rail-width);
  background:var(--data-teal);
}
.pb-sigdata--light{ background:var(--surface-raised); color:var(--text-primary); }
.pb-sigdata--light::before{ background:var(--data-teal); }
.pb-sigdata--dark{ background:var(--result-dark); color:var(--text-on-dark); }
.pb-sigdata--dark::before{ background:var(--data-teal-light); }

.pb-sigdata-label{
  font-family:var(--pb-font-ui); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-tertiary);
}
.pb-sigdata--dark .pb-sigdata-label{ color:var(--text-on-dark-secondary); }

.pb-sigdata-range{
  font-family:var(--pb-font-headline); font-weight:500;
  font-size:clamp(1.9rem, 4.6vw, 2.85rem);
  line-height:1.05; letter-spacing:-.01em;
  margin-top:6px;
}
.pb-sigdata-range .pb-sep{ margin:0 .18em; color:var(--text-tertiary); font-weight:400; }
.pb-sigdata--dark .pb-sigdata-range .pb-sep{ color:var(--text-on-dark-secondary); }
.pb-sigdata-range .pb-cur{ font-family:var(--pb-font-ui); font-weight:500; font-size:.5em; margin-left:.15em; }

.pb-sigdata-median{
  font-family:var(--pb-font-mono); font-size:.92rem;
  color:var(--text-secondary); margin-top:8px;
  display:flex; flex-wrap:wrap; gap:.4ch 1.2ch; align-items:baseline;
}
.pb-sigdata--dark .pb-sigdata-median{ color:var(--text-on-dark-secondary); }
.pb-sigdata-median b{ color:var(--text-primary); font-weight:600; }
.pb-sigdata--dark .pb-sigdata-median b{ color:var(--text-on-dark); }

.pb-sigdata-sep{
  margin:16px 0; border:0; border-top:1px solid var(--border-default);
}
.pb-sigdata--dark .pb-sigdata-sep{ border-top-color:var(--border-on-dark); }

/* ============================================================
   COMPOSANT : bande de distribution interquartile
   UNIQUEMENT axe + bande p25-p75 + marqueur médian (carré) + libellés +
   effectif. Jamais d'histogramme, jamais de barres interpolées, jamais de
   marqueur "position du bien" dans ce lot. Omis ENTIÈREMENT si p25/p75/vol
   indisponibles pour la commune (aucun placeholder décoratif).
   ============================================================ */
.pb-dist{ margin-top:2px; }
.pb-dist-track{
  position:relative; height:6px; border-radius:999px;
  background:var(--data-bar-faint); margin-top:10px;
}
.pb-sigdata--dark .pb-dist-track{ background:var(--data-bar-faint-dark); }
.pb-dist-band{
  position:absolute; top:0; bottom:0; left:0; right:0;
  border-radius:999px; background:var(--data-teal);
}
.pb-sigdata--dark .pb-dist-band{ background:var(--data-teal-light); }
.pb-dist-median{
  position:absolute; top:50%; width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(0deg);
  background:var(--surface-raised); border:2px solid var(--data-teal-text);
}
.pb-sigdata--dark .pb-dist-median{ background:var(--result-dark); border-color:var(--data-teal-light); }
.pb-dist-labels{
  display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--pb-font-mono); font-size:.72rem; color:var(--text-tertiary);
}
.pb-sigdata--dark .pb-dist-labels{ color:var(--text-on-dark-secondary); }
.pb-dist-effectif{
  /* .75rem (12px = 9pt) : aligné sur l'échelle typographique à 7 valeurs verrouillée du relevé
     (tests-e2e/typography.spec.js) -- ne pas introduire de taille intermédiaire hors échelle. */
  margin-top:6px; font-family:var(--pb-font-mono); font-size:.75rem;
  color:var(--text-secondary);
}
.pb-sigdata--dark .pb-dist-effectif{ color:var(--text-on-dark-secondary); }
/* Équivalent texte accessible : lisible par lecteur d'écran, visuellement
   masqué (pas display:none — reste dans l'arbre d'accessibilité). */
.pb-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   COMPOSANT : source à 3 segments (DVF · période · effectif)
   Chaque segment est cliquable/focusable indépendamment, cible 44px min
   sur mobile. Jamais de lien vide/mort : effectif redevient du texte brut
   si aucune cible réelle n'est disponible.
   ============================================================ */
.pb-source{
  /* .75rem (12px = 9pt) : même contrainte d'échelle typographique que .pb-dist-effectif ci-dessus. */
  margin-top:14px; display:flex; flex-wrap:wrap; gap:2px 0;
  font-family:var(--pb-font-mono); font-size:.75rem;
}
.pb-source-seg{
  display:inline-flex; align-items:center; min-height:32px; padding:4px 10px 4px 0;
  color:var(--text-secondary); text-decoration:none; border-bottom:1px solid transparent;
  gap:.4ch;
}
.pb-sigdata--dark .pb-source-seg{ color:var(--text-on-dark-secondary); }
a.pb-source-seg{ cursor:pointer; }
a.pb-source-seg:hover{ color:var(--data-teal-text); border-bottom-color:var(--data-teal); }
.pb-sigdata--dark a.pb-source-seg:hover{ color:var(--data-teal-light); border-bottom-color:var(--data-teal-light); }
.pb-source-seg:not(:last-child)::after{
  content:"·"; margin-left:1ch; color:var(--text-tertiary);
}
.pb-sigdata--dark .pb-source-seg:not(:last-child)::after{ color:var(--text-on-dark-secondary); }
@media (max-width:640px){
  .pb-source-seg{ min-height:44px; min-width:44px; }
}

/* ---------- fiabilité (marqueur carré/losange + texte) ----------
   Le marqueur est un ::before (contenu généré CSS) : le texte de ce bloc est
   remplacé par innerHTML côté JS (estimer.app.js#setConfidence) sans jamais
   effacer le marqueur, qui n'est pas un enfant du DOM. */
.pb-reliability{
  position:relative; margin-top:12px; padding-left:16px;
  font-family:var(--pb-font-ui); font-size:.82rem; color:var(--text-secondary);
}
.pb-sigdata--dark .pb-reliability{ color:var(--text-on-dark-secondary); }
.pb-reliability::before{
  content:""; position:absolute; left:0; top:.3em;
  width:8px; height:8px;
  background:var(--data-teal); transform:rotate(45deg);
}
.pb-sigdata--dark .pb-reliability::before{ background:var(--data-teal-light); }

/* ============================================================
   Focus / accessibilité partagés
   ============================================================ */
.pb-sigdata a:focus-visible,
.pb-source-seg:focus-visible{
  outline:2px solid var(--border-focus); outline-offset:2px; border-radius:2px;
}
.pb-sigdata--dark a:focus-visible,
.pb-sigdata--dark .pb-source-seg:focus-visible{
  outline-color:var(--brand-on-dark);
}

@media (prefers-reduced-motion:reduce){
  .pb-sigdata, .pb-dist-band, .pb-dist-median{ transition:none !important; animation:none !important; }
}

@media (prefers-contrast:more){
  .pb-sigdata--light{ border:1px solid var(--text-primary); }
  .pb-sigdata--dark{ border:1px solid var(--text-on-dark); }
  .pb-dist-track{ border:1px solid currentColor; }
  .pb-source-seg{ text-decoration:underline; }
}

@media (forced-colors:active){
  .pb-sigdata--light,
  .pb-sigdata--dark{ background:Canvas; color:CanvasText; border:1px solid CanvasText; }
  .pb-sigdata::before{ background:CanvasText; }
  .pb-dist-track{ background:Canvas; border:1px solid CanvasText; }
  .pb-dist-band{ background:CanvasText; }
  .pb-dist-median{ background:Canvas; border-color:CanvasText; }
  .pb-source-seg{ color:LinkText; }
  .pb-reliability-mark{ background:CanvasText; }
  .pb-sigdata a:focus-visible,
  .pb-source-seg:focus-visible{ outline-color:Highlight; }
}