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

/* ============================================================
   DESIGN SYSTEM R1 — Coach Santé (issue #121)
   Réf : design-labo.html?v=1 — direction "Hiérarchie typo / Parchemin naturel"
   Palette : sable chaud, encre profonde, vert sauge.
   Assets partagés : tokens, composants expansion, courbe SVG, helpers couleur.
   Chargé par toutes les pages/onglets via <link rel="stylesheet">.
   ============================================================ */

/* ============================================================
   TOKENS R1
   Sable/encre/vert-sauge, typographie mixte (serif chiffres-clés),
   3 couleurs sémantiques vert/jaune/rouge.
   ============================================================ */
:root {
  /* Fond et surface */
  --sable:        #F4EFE6;   /* fond principal — parchemin chaud R1 */
  --sable-pale:   #FDFAF4;   /* surface carte */
  --encre:        #18180F;   /* texte principal */
  --encre-soft:   rgba(24,24,15,.52);
  --encre-faint:  rgba(24,24,15,.28);
  --encre-line:   rgba(24,24,15,.08);

  /* Vert sauge — couleur signature R1 */
  --vert-sauge:   #2E6B4F;
  --vert-sauge-bg: rgba(46,107,79,.08);

  /* Sémantique 3 couleurs (état du jour, pastilles) */
  --etat-vert:    #2E6B4F;
  --etat-vert-bg: rgba(46,107,79,.10);
  --etat-jaune:   #B47C18;
  --etat-jaune-bg: rgba(180,124,24,.10);
  --etat-rouge:   #B82C1B;
  --etat-rouge-bg: rgba(184,44,27,.10);

  /* Compatibilité alias (index.html existant) */
  --ink:        #20231f;
  --ink-soft:   #565a52;
  --ink-faint:  #8b9082;
  --cream:      #f4f1ea;
  --paper:      #fbfaf6;
  --line:       #e3ded2;
  --green:      #4f7a4a;
  --green-bg:   #e4eedf;
  --amber:      #c98a1e;
  --amber-bg:   #f6ecd4;
  --red:        #b5503f;
  --red-bg:     #f4ddd6;
  --accent:     #d9663f;
  --blue:       #4a6f86;
  --violet:     #6a5a86;
  --ink-grad:   linear-gradient(160deg, #2a2e26, #1a1d18);
  --r:    18px;
  --r-sm: 12px;
  --shadow:      0 1px 2px rgba(32,35,31,.04), 0 6px 18px rgba(32,35,31,.06);
  --shadow-lift: 0 2px 6px rgba(32,35,31,.06), 0 14px 36px rgba(32,35,31,.10);
  --tap:      46px;
  --tabbar-h: 70px;
}

/* ============================================================
   HELPERS COULEUR SÉMANTIQUE (3 états)
   Classes utilitaires : fond + texte pour vert/jaune/rouge/neutre.
   Utilisées par le front pour les pastilles, piliers, feux.
   ============================================================ */
.etat-vert  { color: var(--etat-vert);  background: var(--etat-vert-bg); }
.etat-jaune { color: var(--etat-jaune); background: var(--etat-jaune-bg); }
.etat-rouge { color: var(--etat-rouge); background: var(--etat-rouge-bg); }
.etat-neutre { color: var(--encre-faint); background: transparent; }

/* Modificateurs texte seul (sans fond) */
.txt-vert   { color: var(--etat-vert); }
.txt-jaune  { color: var(--etat-jaune); }
.txt-rouge  { color: var(--etat-rouge); }

/* ============================================================
   COMPOSANT REPLI → EXPANSION
   Structure HTML :
     <div class="expansion">
       <button class="expansion-declencheur" onclick="toggleExpansion(this.parentElement)">
         <span class="expansion-titre">...</span>
         <span class="expansion-chevron">▾</span>
       </button>
       <div class="expansion-corps">...</div>
     </div>
   La classe .ouvert est ajoutée/retirée par toggleExpansion() (shared.js).
   Transition max-height (pattern R1/Labo) — CSS-only, pas de JS de hauteur.
   ============================================================ */
.expansion {
  border-radius: 16px;
  border: 1px solid var(--encre-line);
  background: var(--sable-pale);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  margin-bottom: 10px;
}
.expansion:hover { border-color: rgba(46,107,79,.2); }

.expansion-declencheur {
  width: 100%; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  text-align: left; font-family: inherit;
}

.expansion-titre {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--encre);
}

.expansion-chevron {
  font-size: 11px; color: var(--encre-faint);
  transition: transform .22s ease; flex-shrink: 0;
}
.expansion.ouvert .expansion-chevron { transform: rotate(180deg); }

.expansion-corps {
  max-height: 0; overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}
.expansion.ouvert .expansion-corps {
  max-height: 800px;
  border-top: 1px solid var(--encre-line);
}
.expansion-corps-inner { padding: 16px 16px 18px; }

/* ============================================================
   COMPOSANT COURBE SVG LISSÉE
   Les courbes SVG sont générées par svgCourbeAxes()/svgAvecCible().
   Ce bloc CSS positionne le conteneur dans une carte.
   ============================================================ */
.courbe-svg {
  display: block; width: 100%; overflow: visible;
  margin-top: 6px;
}
.courbe-svg-wrap {
  width: 100%; overflow: hidden;
}

/* ============================================================
   STUBS ONGLETS (coach, profil)
   Affichage minimal pendant que le contenu est en construction.
   ============================================================ */
.stub-onglet {
  padding: 48px 20px; text-align: center;
  color: var(--encre-faint);
  font-size: 13px; line-height: 1.7;
}
.stub-onglet .stub-ico { font-size: 32px; display: block; margin-bottom: 12px; }
.stub-onglet .stub-titre {
  font-size: 17px; font-weight: 600; color: var(--encre);
  margin-bottom: 6px;
  /* Titre de section : Fraunces pour les chiffres-clés (R1), Inter/Spline pour les libellés */
  font-family: 'Fraunces', Georgia, serif;
}

/* ============================================================
   COMPOSITION CORPORELLE — liste de lignes (profil/profil.js)
   (#254 : le reskin « ONGLET CORPS » #127 — .corps-card, .corps-stripe*,
   .corps-meta, .corps-chiffre*, .corps-tendance*, .corps-taille-* — a été
   retiré, code mort depuis la suppression de l'onglet Corps #228. Seules les
   classes .corps-compo-* restent : encore consommées par profil/profil.js.)
   ============================================================ */
.corps-compo-ligne {
  display: flex; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--encre-line);
}
.corps-compo-ligne:last-child { border-bottom: none; }
.corps-compo-lbl { color: var(--encre-soft); font-size: 14px; }
.corps-compo-val {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700; color: var(--encre);
}

/* ============================================================
   CHRONOLOGIE DU JOUR + RESSENTIS — reskin R1 (#127)
   Événements en cartes légères, heure en Cormorant.
   ============================================================ */

/* Conteneur chronologie */
.chrono-liste { display: flex; flex-direction: column; gap: 6px; }

/* Carte événement R1 */
.chrono-card {
  display: grid;
  grid-template-columns: 3.4rem 2rem 1fr auto;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: 10px 12px;
  background: var(--sable-pale);
  border: 1px solid var(--encre-line);
  border-radius: 12px;
}

/* Heure R1 — Fraunces, chiffre-clé (#229 : Cormorant Garamond retiré, police vedette homogène) */
.chrono-heure-r1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--encre-faint);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Icône type */
.chrono-icone { font-size: 16px; text-align: center; }

/* Label événement */
.chrono-label { color: var(--encre); font-size: 13.5px; font-weight: 500; }

/* #257 : activité réalisée colorée par son palier serveur — couleur de POLICE
   sur le label, background transparent (jamais surlignée), comme les calories. */
.chrono-label.c-vert,
.chrono-label.c-jaune,
.chrono-label.c-rouge,
.chrono-label.c-neutre { background: transparent; font-weight: 600; }
.chrono-label.c-vert  { color: var(--etat-vert); }
.chrono-label.c-jaune { color: var(--etat-jaune); }
.chrono-label.c-rouge { color: var(--etat-rouge); }
.chrono-label.c-neutre { color: var(--encre-soft); }

/* Actions ressenti — boutons R1 compacts */
.chrono-actions { display: flex; gap: 4px; }
.chrono-editer, .chrono-supprimer {
  background: var(--sable);
  border: 1px solid var(--encre-line);
  border-radius: 8px; cursor: pointer;
  font-family: 'Spline Sans', system-ui, sans-serif;
  width: 32px; height: 32px; font-size: 13px;
  color: var(--encre-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.chrono-supprimer:active { background: var(--etat-rouge-bg); color: var(--etat-rouge); }
.chrono-vide { color: var(--encre-faint); font-size: 14px; padding: 12px 0; }

/* ============================================================
   ÉTAT DU JOUR — carte R1 (#127)
   Bande latérale sémantique, cohérence visuelle R1.
   ============================================================ */
.etat-r1-card {
  position: relative;
  overflow: hidden;
  padding-left: 22px; /* décalage pour la bande */
}

/* Bandes latérales état du jour */
.etat-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.etat-stripe-vert   { background: var(--etat-vert); }
.etat-stripe-jaune  { background: var(--etat-jaune); }
.etat-stripe-rouge  { background: var(--etat-rouge); }
.etat-stripe-neutre { background: var(--encre-faint); }

/* ============================================================
   BOUTON RETOUR JOUR — Profil & Labo (#168)
   Positionné en haut de chaque onglet sans tabbar pour revenir à Jour.
   ============================================================ */
.profil-header,
.labo-header {
  margin-bottom: 16px;
}
.btn-retour-jour {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.5rem 1rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-soft); font-family: 'Spline Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  min-height: 38px; cursor: pointer;
  box-shadow: var(--shadow);
}
.btn-retour-jour:active { background: var(--cream); }

/* ============================================================
   SOCLE ANIMATION PARTAGÉ (#295 / PRD #294)
   Pattern réutilisable par les onglets pour animer courbes & jauge SANS
   recopier les keyframes. Réf visuelle figée : Labo écran « Anim » (classes
   la-*) — style porté ici proprement, scopé au composant partagé.

   PRINCIPE (rétro-compatible) :
   - `svgCourbeAxes(pts, {anim:true})` et `svgJaugeAiguille({anim:true})` injectent
     UNIQUEMENT le câblage (classe + variable CSS). Le SVG dessine l'ÉTAT FINAL.
   - Les animations ne jouent QUE sous un conteneur portant `.coach-anim` (posé par
     l'écran). Hors `.coach-anim` (ou si l'écran n'active pas), le SVG reste à son
     état final visible : zéro régression d'affichage.
   - REJEU : l'écran retire `.coach-anim`, force un reflow, la repose → les anims
     CSS repartent de zéro (cf. PRD : rejeu à chaque arrivée d'onglet).
   - REDUCED-MOTION : coupe toute anim ET force l'état final (sinon un élément à
     dashoffset/scale 0 resterait invisible). Garde-fou DUR, testé en headless.
   ============================================================ */

/* — Tracé progressif de courbe (gauche → droite) — réf la-draw —————————— */
.coach-anim .courbe-trace {
  stroke-dasharray: var(--trace-len);
  stroke-dashoffset: var(--trace-len);
  /* --trace-delay (#296, défaut 0s) : décale le tracé d'une courbe par rapport aux
     autres quand plusieurs courbes coexistent (« léger décalage », PRD #294). Var
     absente → 0s, comportement #295 inchangé. Posée par l'écran sur le conteneur. */
  animation: coach-trace-draw 1.4s cubic-bezier(.65, 0, .35, 1) forwards;
  animation-delay: var(--trace-delay, 0s);
}
@keyframes coach-trace-draw { to { stroke-dashoffset: 0; } }

/* — Pop du point du jour à l'arrivée du tracé — réf la-pop ————————————— */
.coach-anim .courbe-point-jour {
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  animation: coach-point-pop .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
  /* Le pop suit le tracé : 1.35s de base + le décalage propre de la courbe (#296). */
  animation-delay: calc(1.35s + var(--trace-delay, 0s));
}
@keyframes coach-point-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* — Aiguille de jauge qui balaye jusqu'à sa cible — réf la-needle ———————— */
/* L'aiguille est dessinée à sa position finale ; on l'anime depuis un angle de
   départ (--aiguille-from, fourni par le socle JS) jusqu'à 0. */
.coach-anim .anim-aiguille {
  /* `transform-box: view-box` EXPLICITE (#303) : sans lui, le `transform-origin`
     en px posé inline (centre du compteur, ex. 60px 62px) sur ce <g> SVG est
     interprété dans un référentiel non-viewBox par WebKit/iOS (et les Chromium
     plus anciens) → l'aiguille pivote autour d'un faux point, l'anim paraît ne
     PAS jouer (seul écran à jauge : Tendances ; jamais vue animer sur le tél).
     Les courbes (stroke-dashoffset) n'ont pas ce souci, d'où l'asymétrie. */
  transform-box: view-box;
  animation: coach-aiguille-balaye 1.2s cubic-bezier(.34, 1.4, .5, 1) forwards;
}
@keyframes coach-aiguille-balaye {
  from { transform: rotate(var(--aiguille-from)); }
  to   { transform: rotate(0deg); }
}

/* — Garde-fou DUR : réglage système « réduire les animations » —————————
   Coupe les keyframes ET force l'état final visible (tracé complet, point à
   l'échelle 1, aiguille à sa cible). Réutilisé tel quel par tous les lots. */
@media (prefers-reduced-motion: reduce) {
  .coach-anim .courbe-trace,
  .coach-anim .courbe-point-jour,
  .coach-anim .anim-aiguille {
    animation: none;
  }
  .coach-anim .courbe-trace { stroke-dashoffset: 0; }
  .coach-anim .courbe-point-jour { transform: scale(1); }
  .coach-anim .anim-aiguille { transform: rotate(0deg); }
}