/* biome-ignore-all lint/style/noExcessiveLinesPerFile: modules front historiques gardes sans decoupage opportuniste. */
/* biome-ignore-all lint/style/noHexColors: palette historique comparee par tests et contrats front. */

/* ============================================================
   ÉTAT DU JOUR — Reskin R1 (#124)
   Réf : design-labo.html?v=1 — « Hiérarchie typo / Parchemin naturel »
   Carte stripe latérale, mot-clé Fraunces grand format (#229 — Cormorant Garamond retiré),
   composantes 3-colonnes, phrase coach, courbe de tendance lissée.
   Issue #134 — extrait de index.html (était inline <style>).
   ============================================================ */

/* Carte R1 — fond sable pâle, stripe latérale 3px colorée */
.etat-card {
  background: var(--sable-pale, #FDFAF4);
  border-radius: 16px;
  border: 1px solid var(--encre-line, rgba(24,24,15,.07));
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
}
.etat-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.etat-card.go  .etat-stripe { background: var(--etat-vert,  #2E6B4F); }
.etat-card.warn .etat-stripe { background: var(--etat-jaune, #B47C18); }
.etat-card.stop .etat-stripe { background: var(--etat-rouge, #B82C1B); }

.etat-inner { padding: 18px 18px 0 22px; }

/* Surtout : supra-libellé (date / score) */
.etat-sup {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28)); margin-bottom: 6px;
}

/* Mot-clé grand format Fraunces — différenciateur visuel R1 (#229 : Cormorant Garamond retiré) */
.etat-headline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.etat-word {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 52px; font-weight: 700; line-height: .9; letter-spacing: -.02em;
}
.etat-card.go   .etat-word { color: var(--etat-vert,  #2E6B4F); }
.etat-card.warn .etat-word { color: var(--etat-jaune, #B47C18); }
.etat-card.stop .etat-word { color: var(--etat-rouge, #B82C1B); }

/* Point pulsant (animation RPM calme) */
.etat-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-bottom: 4px;
  animation: etatpulse 2.4s ease-in-out infinite;
}
.etat-card.go   .etat-dot { background: var(--etat-vert,  #2E6B4F); }
.etat-card.warn .etat-dot { background: var(--etat-jaune, #B47C18); }
.etat-card.stop .etat-dot { background: var(--etat-rouge, #B82C1B); }
@keyframes etatpulse { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============================================================
   BADGE DE FRAÎCHEUR SYNC + BOUTON SYNCHRONISER (#276)
   Réutilise les tokens sémantiques du design system (etat-vert/jaune/rouge).
   Front zéro calcul : couleur/libellé viennent du contrat (derive/sync).
   ============================================================ */
.sync-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
/* Badge : pastille + texte (message serveur + « il y a Xh ») */
.sync-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-sm, 12px);
  background: var(--sable-pale, #FDFAF4);
  border: 1px solid var(--encre-line, rgba(24,24,15,.08));
  min-width: 0;
}
.sync-badge-dot {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--encre-faint, rgba(24,24,15,.28));
}
.sync-badge-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sync-badge-msg {
  font-size: 12px; font-weight: 600; color: var(--encre, #18180F);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync-badge-age { font-size: 11px; color: var(--encre-soft, rgba(24,24,15,.52)); }
/* Couleur de la pastille par état serveur (tokens sémantiques) */
.sync-badge-green .sync-badge-dot  { background: var(--etat-vert,  #2E6B4F); }
.sync-badge-orange .sync-badge-dot { background: var(--etat-jaune, #B47C18); }
.sync-badge-red .sync-badge-dot    { background: var(--etat-rouge, #B82C1B); }
.sync-badge-grey .sync-badge-dot   { background: var(--encre-faint, rgba(24,24,15,.28)); }
/* Sync en cours : pastille moutarde qui pulse (badge animé du PRD #276) */
.sync-badge--en-cours .sync-badge-dot {
  background: var(--etat-jaune, #B47C18);
  animation: syncpulse 1s ease-in-out infinite;
}
@keyframes syncpulse { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce) {
  .sync-badge--en-cours .sync-badge-dot { animation: none; }
}
/* Bouton Synchroniser — pilule discrète, design system (vert sauge signature) */
.sync-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--vert-sauge, #2E6B4F);
  background: var(--vert-sauge-bg, rgba(46,107,79,.08));
  color: var(--vert-sauge, #2E6B4F);
  font-family: 'Spline Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
  min-height: var(--tap, 46px);
}
.sync-btn:active { background: rgba(46,107,79,.16); }
.sync-btn[disabled] { opacity: .5; cursor: default; }
.sync-btn-ico { font-size: 14px; display: inline-block; }
.sync-btn[disabled] .sync-btn-ico { animation: syncspin 1s linear infinite; }
.sync-btn-txt { white-space: nowrap; }
@keyframes syncspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sync-btn[disabled] .sync-btn-ico { animation: none; }
}

/* Phrase coach — texte discret juste sous le titre */
.etat-phrase {
  font-size: 13px; color: var(--encre-soft, rgba(24,24,15,.52));
  line-height: 1.65; margin-bottom: 16px; font-style: normal;
}

/* Alerte garde-fou VFC (parité feature — rouge, encadré) */
.etat-garde-fou {
  margin-top: 6px; margin-bottom: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--etat-rouge, #B82C1B);
  background: var(--etat-rouge-bg, rgba(184,44,27,.10));
  border: 1px solid rgba(184,44,27,.22);
  border-radius: var(--r-sm, 12px); padding: 7px 10px;
}

/* Carte courbe de tendance R1 (#124) */
.courbe-tendance.chart-card {
  background: var(--sable-pale, #FDFAF4);
  border-radius: 16px;
  border: 1px solid var(--encre-line, rgba(24,24,15,.07));
  padding: 16px; margin-bottom: 10px;
}
.chart-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.chart-hd .title {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28));
}
.chart-hd .val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 700;
}

/* SVG courbe — wrapper + svg inline (#124, #208) */
.courbe-svg-wrap { width: 100%; overflow: hidden; }
.courbe-svg-wrap svg,
.courbe-svg { display: block; width: 100%; height: auto; }
/* Composant courbe partagé #208 — svgCourbeAxes (axe Y + repères + échelle adaptative) */
.courbe-axes-svg { display: block; width: 100%; height: auto; overflow: visible; }
.axe-repere { pointer-events: none; }

/* Cercle feu R1 (#127) — contient soit l'icône emoji soit le score global */
.etat-r1-card .etat-feu {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.etat-feu.feu-green  { background: rgba(46,107,79,.12); }
.etat-feu.feu-orange { background: rgba(180,124,24,.12); }
.etat-feu.feu-red    { background: rgba(184,44,27,.12); }
.etat-feu.feu-grey   { background: rgba(24,24,15,.06); }

/* Score global à l'intérieur du cercle feu (#127) */
.etat-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.etat-card.go   .etat-score { color: var(--etat-vert,  #2E6B4F); }
.etat-card.warn .etat-score { color: var(--etat-jaune, #B47C18); }
.etat-card.stop .etat-score { color: var(--etat-rouge, #B82C1B); }
.etat-card      .etat-score { color: var(--encre, #18180F); }

/* ============================================================
   TABLEAU PRÉVU / RÉALISÉ — Ligne du jour (#169, #180)
   Réf visuelle : Labo C-v2 (deux colonnes symétriques côte à côte)
   Thème parchemin naturel — cohérent avec les autres onglets.
   ============================================================ */

.ligne-du-jour.tableau-jour {
  background: var(--sable-pale, #FDFAF4);
  border-radius: 16px;
  border: 1px solid var(--encre-line, rgba(24,24,15,.07));
  padding: 16px;
  margin-bottom: 10px;
}
.ligne-du-jour h2 {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28));
  margin-bottom: 12px;
}

/* Deux colonnes côte à côte — même largeur (#180 réf C-v2) */
.ldj-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Colonne commune : fond légèrement différencié selon Prévu/Réalisé */
.ldj-col {
  background: rgba(24,24,15,.03);
  border-radius: 12px;
  border: 1px solid var(--encre-line, rgba(24,24,15,.07));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* #205 : ldj-col-realise toujours neutre (bord gris comme Prévu).
   La couleur de l'activité n'est plus sur la boîte — seulement sur la valeur (ldj-cal). */
.ldj-col-prevu  { border-left: 3px solid var(--encre-faint, rgba(24,24,15,.18)); }
.ldj-col-realise { border-left: 3px solid var(--encre-faint, rgba(24,24,15,.18)); }

/* Titre de colonne : « Prévu » / « Réalisé » */
.ldj-col-titre {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28));
  margin-bottom: 4px;
}

/* Zone entraînement dans la colonne */
.ldj-col-ent { flex: 1; }

/* Séance prévue */
.ldj-seance-prevu { margin-bottom: 4px; }
.ldj-seance-titre {
  font-size: 13px; font-weight: 600; color: var(--encre, #18180F);
  font-family: 'Spline Sans', sans-serif;
  line-height: 1.3; margin-bottom: 4px;
}

/* Séance réalisée */
.ldj-seance-realise { margin-bottom: 4px; }
.ldj-fait {
  font-size: 13px; font-weight: 600; color: var(--encre, #18180F);
  font-family: 'Spline Sans', sans-serif;
  line-height: 1.3; margin-bottom: 4px;
}
/* #208 / fix surlignage : l'activité réalisée = couleur de POLICE, jamais de fond.
   Les utilitaires .c-vert/.c-jaune/.c-rouge posent un `background` (pastilles,
   coach-tab.css) — on le neutralise ici, comme déjà fait pour .ldj-cal. */
.ldj-fait.c-vert,
.ldj-fait.c-jaune,
.ldj-fait.c-rouge,
.ldj-fait.c-neutre { background: transparent; }
.ldj-fait.c-vert   { color: var(--etat-vert,  #2E6B4F); }
.ldj-fait.c-jaune  { color: var(--etat-jaune, #B47C18); }
.ldj-fait.c-rouge  { color: var(--etat-rouge, #B82C1B); }
.ldj-fait.c-neutre { color: var(--encre-soft, rgba(24,24,15,.6)); }

/* Messages texte pour repos / vide / manquant / pas de plan */
.ldj-repos, .ldj-vide, .ldj-manquant, .ldj-noplan {
  font-size: 12px; color: var(--encre-faint, rgba(24,24,15,.35));
  font-family: 'Spline Sans', sans-serif;
  font-style: italic;
}

/* Zone nutrition dans la colonne */
.ldj-col-nut { border-top: 1px solid var(--encre-line, rgba(24,24,15,.07)); padding-top: 8px; }
.ldj-nut-label {
  font-size: 9px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.28)); margin-bottom: 4px;
}

/* Calories — affichage prioritaire */
.ldj-cal {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700; line-height: 1; color: var(--encre, #18180F);
  margin-bottom: 2px;
}
.ldj-col-nut.c-vert .ldj-cal { color: var(--etat-vert, #2E6B4F); }
.ldj-col-nut.c-jaune .ldj-cal { color: var(--etat-jaune, #B47C18); }
.ldj-col-nut.c-rouge .ldj-cal { color: var(--etat-rouge, #B82C1B); }
/* #236 : réalisé nutrition = chiffre COLORÉ, SANS fond surligné. Les classes
   utilitaires .c-vert/.c-jaune/.c-rouge portent un `background` ailleurs (pastilles
   coach-tab.css) — on neutralise ce surlignage ici : seule la couleur de TEXTE
   s'applique aux calories. */
.ldj-cal.c-vert,
.ldj-cal.c-jaune,
.ldj-cal.c-rouge,
.ldj-cal.c-neutre { background: transparent; }
.ldj-cal.c-vert  { color: var(--etat-vert,  #2E6B4F); }
.ldj-cal.c-jaune { color: var(--etat-jaune, #B47C18); }
.ldj-cal.c-rouge { color: var(--etat-rouge, #B82C1B); }

/* Macros compacts sous les calories */
.ldj-macros {
  display: block;
  font-size: 10px; color: var(--encre-faint, rgba(24,24,15,.42));
  font-family: 'Spline Sans', sans-serif;
  line-height: 1.4;
}

/* ── Zones FC dans le tableau Prévu/Réalisé (#180) ── */

/* Badges de zones cibles (colonne Prévu) */
.ldj-zones-cibles {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}

/* Badge zone (chrono + tableau) */
.zone-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700;
  font-family: 'Spline Sans', sans-serif;
  background: rgba(24,24,15,.05);
  border-radius: 6px;
  padding: 2px 5px;
}
.zone-min {
  font-size: 10px; font-weight: 500;
  color: var(--encre-soft, rgba(24,24,15,.52));
}

/* Zones réalisées (colonne Réalisé) — style tableau avec barre colorée */
.ldj-zones-realise {
  display: flex; flex-direction: column; gap: 3px; margin-top: 4px;
}
.ldj-zone-ligne {
  display: grid;
  grid-template-columns: 4px auto 1fr;
  align-items: center;
  gap: 5px;
}
.ldj-zone-barre {
  width: 4px; height: 14px; border-radius: 2px; flex-shrink: 0;
}
.ldj-zone-nom {
  font-size: 11px; font-weight: 700;
  font-family: 'Spline Sans', sans-serif;
  min-width: 22px;
}
.ldj-zone-min {
  font-size: 11px; color: var(--encre, #18180F);
  font-family: 'Spline Sans', sans-serif;
}
.ldj-zone-min-u {
  font-size: 10px; color: var(--encre-faint, rgba(24,24,15,.40));
}

/* ============================================================
   NAVIGATION MULTI-JOURS (#226)
   Barre ← date → en haut de l'onglet Jour.
   ============================================================ */

.jour-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--sable-pale, #FDFAF4);
  border-radius: 12px;
  border: 1px solid var(--encre-line, rgba(24,24,15,.07));
}
.jour-nav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 4px 8px;
  color: var(--encre, #18180F); border-radius: 8px;
}
.jour-nav-btn:active { background: rgba(24,24,15,.08); }
.jour-nav-date {
  font-family: 'Spline Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--encre-soft, rgba(24,24,15,.52));
  letter-spacing: .02em; flex: 1; text-align: center;
}

/* ============================================================
   3 CASES RICHES — État du jour, DANS la carte (proto #8 #226, réf A1 #236)
   VFC nocturne / Stamina / ACWR — chacune colorée par SON palier (data-pal).
   Réimplémentation fidèle de la scène A variante A1 (LABO-NOTES-231).
   ============================================================ */

.etat-cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px;
}
/* Couleur d'accent (--ac) portée par le palier de CHAQUE case (front zéro calcul :
   data-pal vient du contrat). Repli neutre si palier absent. */
.etat-case { --ac: var(--encre, #18180F); }
.etat-case[data-pal="vert"]  { --ac: var(--etat-vert,  #2E6B4F); }
.etat-case[data-pal="jaune"] { --ac: var(--etat-jaune, #B47C18); }
.etat-case[data-pal="rouge"] { --ac: var(--etat-rouge, #B82C1B); }
.etat-case[data-pal="neutre"]{ --ac: var(--encre-soft, rgba(24,24,15,.55)); }

.etat-case {
  background: var(--sable-pale, #F5F0E6);
  border-radius: var(--r-sm, 12px);
  border-top: 2px solid var(--ac);
  padding: 11px 10px;
  display: flex; flex-direction: column;
}
/* Titre : hauteur RÉSERVÉE (min-height) pour aligner les chiffres entre cases. */
.etat-case-titre {
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-faint, rgba(24,24,15,.4));
  line-height: 1.2; min-height: 21px; margin-bottom: 6px;
}
/* Valeur principale — Fraunces, colorée par le palier de la case. */
.etat-case-v1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--ac);
  font-variant-numeric: tabular-nums;
}
.etat-case-u {
  font-family: 'Spline Sans', sans-serif;
  font-size: 11px; font-weight: 600;
}
.etat-case-v2 {
  font-size: 10px; font-weight: 600; margin-top: 3px;
  color: var(--ac);
  font-family: 'Spline Sans', sans-serif;
}
.etat-case-sous {
  font-size: 9px; color: var(--encre-faint, rgba(24,24,15,.35)); margin-top: 2px;
}

/* ============================================================
   ANIMATIONS ONGLET JOUR (#298, PRD #294) — habillage, zéro calcul.
   Réf visuelle figée : Labo écran « Anim » (la-breathe-* / la-drop-in) — style
   PORTÉ ici proprement, scopé aux composants Jour (pas de copie du proto jetable).

   PRINCIPE (cohérent socle #295) : tout n'anime QUE sous un conteneur `.coach-anim`
   (posé par rendreJour). L'écran réécrivant son DOM à chaque arrivée d'onglet, les
   éléments sont recréés → les keyframes repartent de zéro (REJEU à chaque visite).
   La courbe de score 7j (tracé + pop du point) est gérée par le socle (shared.css).
   ============================================================ */

/* — (b) Feu d'état qui RESPIRE en continu (réf la-breathe-*) ————————————
   Boucle infinie tant que l'écran est affiché. Intensité MODULÉE par la couleur
   d'état du contrat (front zéro calcul : la couleur vient du serveur) : vert =
   souffle lent et doux, orange = médian, rouge = plus rapide et appuyé. Gris =
   état indéterminé → pas de respiration (rien à célébrer/alerter). */
.coach-anim .etat-feu-respire.feu-green {
  animation: etat-feu-respire-green 2.6s ease-in-out infinite;
}
.coach-anim .etat-feu-respire.feu-orange {
  animation: etat-feu-respire-orange 2.0s ease-in-out infinite;
}
.coach-anim .etat-feu-respire.feu-red {
  animation: etat-feu-respire-red 1.4s ease-in-out infinite;
}
@keyframes etat-feu-respire-green {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(46,107,79,.40); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(46,107,79,0); }
}
@keyframes etat-feu-respire-orange {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(180,124,24,.48); }
  50%      { transform: scale(1.11); box-shadow: 0 0 0 11px rgba(180,124,24,0); }
}
@keyframes etat-feu-respire-red {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(184,44,27,.55); }
  50%      { transform: scale(1.14); box-shadow: 0 0 0 12px rgba(184,44,27,0); }
}

/* — (c) Chronologie qui se DÉROULE (réf la-drop-in) ———————————————————
   Chaque carte tombe du haut, en séquence décalée (--chrono-delay = index × pas,
   posé par jour.js). État de départ : invisible, légèrement remontée. */
.coach-anim .jour-chronologie .chrono-event {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  animation: jour-chrono-drop .5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--chrono-delay, 0s);
}
@keyframes jour-chrono-drop {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* — Garde-fou DUR : « réduire les animations » ————————————————————————
   Coupe toute keyframe ET force l'état final visible (feu fixe à sa taille
   normale, chronologie pleinement visible et en place). Le tracé/point de la
   courbe sont déjà neutralisés par le socle (shared.css). Prouvé en headless. */
@media (prefers-reduced-motion: reduce) {
  .coach-anim .etat-feu-respire.feu-green,
  .coach-anim .etat-feu-respire.feu-orange,
  .coach-anim .etat-feu-respire.feu-red {
    animation: none;
    transform: none;
    box-shadow: none;
  }
  .coach-anim .jour-chronologie .chrono-event {
    animation: none;
    opacity: 1;
    transform: none;
  }
}