/* Composants partagés.
   Le hover standard est appliqué partout via .card et .filter-chip.
*/

/* — Card navy translucide — */
.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  /* Flou du fond pour isoler la card de la skyline derrière. */
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition:
    transform var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
  overflow: hidden;
}

.card::before {
  /* Liseré accent en haut, allumé au hover. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-3px);
  background: var(--card-bg-hover);
  border-color: var(--accent);
}
.card:hover::before { opacity: 0.7; }

/* Icônes oscillantes au hover de la card (impératif : inline-block). */
.card .icon { display: inline-block; transition: transform var(--t-med) var(--ease-out); }
.card:hover .icon { animation: icon-wobble 0.9s var(--ease-out); }

@keyframes icon-wobble {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* — Stat card (chiffre + libellé) — */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat__value {
  font-family: var(--font-serif);
  /* Réduit vs les totems Hero pour tenir sur une ligne dans les cards. */
  font-size: clamp(1.9rem, 1.4vw + 1.1rem, 2.6rem);
  line-height: 1.05;
  /* Le chiffre prend la couleur du dispositif actif (rose pour « Tous »). */
  color: var(--accent);
  transition: color var(--t-med) var(--ease-out);
}

/* En-tête de card : icône d'accent + sur-titre. */
.stat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.stat__icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--accent);
  transition: color var(--t-med) var(--ease-out);
}
.stat__icon svg { width: 26px; height: 26px; }

.stat__sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* — Boutons — */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 28px;
  background: var(--pop);
  color: var(--navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast),
    box-shadow var(--t-med) var(--ease-out);
  box-shadow: 0 6px 24px rgba(248, 193, 217, 0.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 32px rgba(248, 193, 217, 0.32);
}
.btn-primary__arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease-out);
}
.btn-primary:hover .btn-primary__arrow { transform: translateX(3px); }

/* Mobile : pleine largeur, une seule ligne, taille ajustée pour iPhone. */
@media (max-width: 560px) {
  .btn-primary {
    width: 100%;
    padding: 16px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

/* — Valeur de card avec suffixe (ex. "71 % achètent seuls") — */
.stat__value__suffix {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: 0;
}

/* — Distribution en barres horizontales (réutilisé dans dépliements) — */
/* Le grid porte les 3 colonnes et les rows sont en `display: contents` :
   les libellés s'alignent sur tout le bloc tout en s'adaptant à leur longueur
   (« T1 » et « Moins de 30 ans » n'ont pas besoin de la même gouttière). */
.distrib {
  display: grid;
  grid-template-columns: max-content minmax(40px, 1fr) max-content;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.distrib__row {
  display: contents;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-on-navy);
}
.distrib__label {
  /* Intitulé en Roboto (sans), la valeur reste en Space Mono. */
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.distrib__track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.distrib__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width var(--t-med) var(--ease-out);
}
.distrib__value { text-align: right; color: var(--text-muted); }

/* — Barre de comparaison (valeur vs référence) — */
.cmp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--card-border);
}
.cmp-row:last-child { border-bottom: 0; }

.cmp-row__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cmp-row__bars { display: grid; gap: 4px; }
.cmp-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cmp-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.cmp-bar--value .cmp-bar__fill { background: var(--accent); }
.cmp-bar--ref   .cmp-bar__fill { background: var(--text-muted); opacity: 0.45; }

.cmp-row__values {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-on-navy);
}

.cmp-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 BAROMÈTRE — briques partagées (components/ui.js)
   ══════════════════════════════════════════════════════════════════════════ */

/* Unité accolée à une grande valeur (« 43 ans »). */
.stat__unit {
  font-family: var(--font-sans);
  font-size: 0.42em;
  color: var(--text-muted);
  margin-left: 0.25em;
  letter-spacing: 0.02em;
}

/* Pied de card : lecture complémentaire, plus discrète que .stat__sub. */
.stat__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ligne dominante d'une distribution : la valeur passe à l'accent. */
.distrib__row[data-strong="true"] .distrib__value {
  color: var(--accent);
  font-weight: 700;
}

/* — Barre partagée maison / appartement —
   Axe « type de bien » : couleurs propres, indépendantes de l'accent dispositif
   (un mix maison/appartement n'est pas une quantité du dispositif). */
.splitbar { display: grid; gap: var(--space-3); }
.splitbar__track {
  display: flex;
  height: 30px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.splitbar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--navy);
  transition: width var(--t-med) var(--ease-out);
}
.splitbar__seg--a { background: var(--maison); }
.splitbar__seg--b { background: var(--appartement); }

.splitbar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.splitbar__key { display: inline-flex; align-items: center; gap: 6px; }
.splitbar__key b { color: var(--text-on-navy); font-family: var(--font-mono); font-weight: 400; }
.splitbar__key::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.splitbar__key--a::before { background: var(--maison); }
.splitbar__key--b::before { background: var(--appartement); }

/* — Jauge circulaire (part dominante d'une card) — */
.donut {
  position: relative;
  width: 132px;
  margin: var(--space-2) auto 0;
}
.donut svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.donut__bg { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 9; }
.donut__fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dasharray var(--t-slow) var(--ease-out);
}
.donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.donut__value {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--text-on-navy);
}
.donut__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* — Bandeau de lecture éditoriale (phrase reprise du baromètre) — */
.insight {
  position: relative;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.insight__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-on-navy);
}
/* Superlatif du dispositif (« Le plus accessible ») — repris du baromètre. */
.insight__badge {
  flex: 0 0 auto;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.insight__mark {
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}