/* biome-ignore-all lint/style/noHexColors: palette historique comparee par tests et contrats front. */

/* ============================================================
   ONGLET TENDANCES (#137) — design system R1 (thème coach)
   Port du bloc labo du dashboard, habillé au thème coach.
   Palette : tokens shared.css (--sable, --encre, --vert-sauge, --etat-*).
   ============================================================ */

/* ── Titre de section ──────────────────────────────────────────────────── */
.tend-titre {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--encre, #18180F);
  margin: 0 0 16px;
  padding-top: 8px;
}

/* ── Sélecteur d'échelle ────────────────────────────────────────────────── */
.tend-selecteur {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tend-sel-btn {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: var(--r-sm, 12px);
  border: 1px solid var(--encre-line, rgba(24,24,15,.08));
  background: var(--sable-pale, #FDFAF4);
  font-family: 'Spline Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--encre-soft, rgba(24,24,15,.52));
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-align: center;
  min-height: var(--tap, 46px);
}

.tend-sel-btn.actif {
  background: var(--vert-sauge-bg, rgba(46,107,79,.08));
  color: var(--vert-sauge, #2E6B4F);
  border-color: var(--vert-sauge, #2E6B4F);
  font-weight: 700;
}

/* ── Accélérateurs / Freins (top3 / flop3) — #266 ───────────────────────────
   Les deux groupes sont EMPILÉS en pleine largeur (réparation #266 : posés côte à
   côte, ils compressaient/tronquaient les labels longs sur mobile). À l'intérieur,
   les items (accélérateurs/freins) sont disposés 2 PAR LIGNE (grille .tend-tf-items). */
.tend-topflop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.tend-tf-groupe {
  background: var(--sable-pale, #FDFAF4);
  border: 1px solid var(--encre-line, rgba(24,24,15,.08));
  border-radius: var(--r, 18px);
  padding: 14px;
  box-shadow: var(--shadow);
}

/* Grille des items : 2 par ligne (#266). Items calés EN HAUT de leur cellule
   (#300) : sans ça, un libellé qui wrappe sur deux lignes étire sa rangée et
   son voisin court flotte centré dans le vide (« éparpillé »). */
.tend-tf-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
  align-items: start;
}

.tend-tf-titre {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tend-tf-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--encre-line, rgba(24,24,15,.08));
  /* Cellule de grille : autorise le rétrécissement sous la taille intrinsèque
     (#302). Sans ça, `min-width:auto` (défaut des items grid) laisse un libellé
     long + delta DÉBORDER de la colonne `1fr` → la 2e colonne sortait du cadre
     de la carte sur écran étroit (« accélérateurs affichés bizarrement »). */
  min-width: 0;
}
.tend-tf-item:last-child { border-bottom: none; }

/* Pastille ronde colorée portant la flèche (#300) : largeur = hauteur, bord
   circulaire, fond coloré (vert = accélérateur, rouge = frein). */
.tend-tf-pastille {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  margin-top: 1px;
}
.tend-pastille-vert  { background: var(--etat-vert,  #2E6B4F); color: #fff; }
.tend-pastille-rouge { background: var(--etat-rouge, #B82C1B); color: #fff; }

.tend-tf-label {
  flex: 1;
  /* Le libellé absorbe le rétrécissement de la cellule : il wrappe (y compris
     en coupant un mot trop long) au lieu de pousser le delta hors du cadre. */
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 500;
  color: var(--encre, #18180F);
  font-family: 'Spline Sans', sans-serif;
}

.tend-tf-delta {
  /* Le delta garde sa taille (jamais tronqué) ; c'est le libellé qui plie. */
  flex: 0 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
}

/* ── Fenêtre de dates ───────────────────────────────────────────────────── */
.tend-meta-fenetre {
  font-size: 9px;
  color: var(--encre-faint, rgba(24,24,15,.28));
  text-align: center;
  margin-bottom: 16px;
  font-family: 'Spline Sans', sans-serif;
}

/* ── Domaines ───────────────────────────────────────────────────────────── */
.tend-domaine {
  margin-bottom: 18px;
}

.tend-domaine-titre {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28));
  padding: 14px 0 8px;
  border-top: 1px solid var(--encre-line, rgba(24,24,15,.08));
}

/* ── Grille de métriques ────────────────────────────────────────────────── */
.tend-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ── Carte métrique individuelle ────────────────────────────────────────── */
.tend-metrique {
  background: var(--sable-pale, #FDFAF4);
  border-radius: var(--r-sm, 12px);
  border: 1px solid var(--encre-line, rgba(24,24,15,.08));
  padding: 12px;
  box-shadow: var(--shadow);
}

.tend-m-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-soft, rgba(24,24,15,.52));
  margin-bottom: 6px;
  font-family: 'Spline Sans', sans-serif;
}

.tend-m-unit {
  font-size: 10px;
  font-weight: 400;
  color: var(--encre-faint, rgba(24,24,15,.28));
  font-family: 'Spline Sans', sans-serif;
}

/* ── Carte métrique en JAUGE À AIGUILLE (#252, layout 3 colonnes #303) ────────
   Compteur demi-cercle (zones colorées + aiguille) EN HAUT, puis empilés et
   CENTRÉS dessous : libellé, valeur (+unité) et delta %. Les cartes se rangent
   3 PAR LIGNE. Jauge compacte pour tenir à largeur mobile (~390px) sans déformer
   le demi-cadran rond (le SVG garde viewBox + preserveAspectRatio="xMidYMid meet").
   Police vedette = Fraunces (invariant cross-écran #243). Couleurs = palier serveur. */
.tend-grille:has(.tend-metrique-jauge) {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tend-metrique-jauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  /* La cellule de grille peut rétrécir sous sa largeur intrinsèque (3 col à 390px) :
     sans min-width:0, un libellé long pousserait la colonne hors cadre. */
  min-width: 0;
}

/* Jauge : demi-cadran rond, mis à l'échelle dans la largeur de la cellule. Le SVG
   (viewBox 120×70, preserveAspectRatio="xMidYMid meet") reste rond à toute taille. */
.tend-jauge-svg-wrap {
  width: 100%;
  max-width: 104px;
}
.tend-jauge-svg-wrap .jauge-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Corps empilé + centré sous la jauge. */
.tend-jauge-corps {
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* Aiguille + arcs de la jauge */
.jauge-arc-vert  { fill: var(--etat-vert,  #2E6B4F); }
.jauge-arc-jaune { fill: var(--etat-jaune, #B47C18); }
.jauge-arc-rouge { fill: var(--etat-rouge, #B82C1B); }
.jauge-arc-neutre { fill: var(--encre-line, rgba(24,24,15,.12)); }

.jauge-aiguille {
  stroke: var(--encre, #18180F);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.jauge-pivot { fill: var(--encre, #18180F); }

/* Libellé de la métrique sous la jauge : compact, centré, peut wrapper (#303). */
.tend-metrique-jauge .tend-m-label {
  margin-bottom: 1px;
  font-size: 8px;
  letter-spacing: .08em;
  text-align: center;
  /* Libellé long → wrappe au lieu de pousser la cellule hors cadre (3 col, 390px). */
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/* Ligne valeur + unité — centrée sous le libellé (#303). */
.tend-jauge-ligne {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-top: 1px;
}

/* Chiffre vedette de la carte jauge — POLICE FRAUNCES (invariant #243). Compacté
   pour le layout 3 colonnes (#303) ; reste lisible et dominant dans la carte. */
.tend-jauge-valeur {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}
.tend-jauge-delta {
  font-family: 'Spline Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}

/* ── Couleurs sémantiques tendances ─────────────────────────────────────── */
.tend-vert  { color: var(--etat-vert,  #2E6B4F); }
.tend-jaune { color: var(--etat-jaune, #B47C18); }
.tend-rouge { color: var(--etat-rouge, #B82C1B); }
.tend-neutre { color: var(--encre-faint, rgba(24,24,15,.28)); }

/* ── Section vide / attente ─────────────────────────────────────────────── */
.tend-vide,
.tend-section {
  padding: 0 4px;
}

.tend-attente {
  color: var(--encre-faint, rgba(24,24,15,.28));
  font-size: 14px;
  text-align: center;
  padding: 32px 0;
  font-family: 'Spline Sans', sans-serif;
}

/* ── Contenu dynamique ──────────────────────────────────────────────────── */
.tend-contenu {
  /* padding de bas de page (tabbar) */
  padding-bottom: calc(var(--tabbar-h, 70px) + env(safe-area-inset-bottom) + 16px);
}