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

/* ============================================================
   BASE — reset, layout, topbar, section universelle, graphes
   Chargé en premier par index.html (coach/front/).
   Issue #134 — extrait de index.html (était inline <style>).
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }

html { min-height: 100%; }  /* issue #139 — height:100% bridait le scroll (contenu coupé) */

body {
  font-family: 'Spline Sans', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding: max(12px, env(safe-area-inset-top)) 0
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  background-image:
    radial-gradient(circle at 18% -5%, rgba(217,102,63,.06), transparent 42%),
    radial-gradient(circle at 90% 8%,  rgba(79,122,74,.05),  transparent 40%);
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- Topbar (id="titre" → devient le titre de scène dans la topbar) ---------- */
#titre {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244,241,234,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 11px 16px;
  font-family: 'Fraunces', serif;
  font-size: 17px; font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
#titre::before {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* ---------- Zone principale ---------- */
#ecran {
  padding: 16px 14px 0;
  max-width: 540px;
  margin: 0 auto;
}

/* ---------- Transition de changement d'onglet (LOT C / carrousel directionnel) ----------
   Glissé directionnel type carrousel : au changement d'onglet, l'écran SORTANT
   glisse hors champ d'un côté pendant que le nouvel écran ENTRE depuis le bord
   opposé (les deux en mouvement, pas un simple fondu). CSS pur, zéro lib,
   GPU-friendly (translate3d + opacity uniquement → compositing, pas de reflow,
   pas de jank mobile). Durée courte ~0.28s, easing doux.

   Direction : le JS (index.html::animerEcran) pose une variable --sens-sortie
   (+1 = le sortant part vers la GAUCHE, le nouveau vient de la DROITE ;
    -1 = le sortant part vers la DROITE, le nouveau vient de la GAUCHE).

   Mécanique : index.html clone l'écran courant dans un calque .ecran-sortant
   AVANT de re-rendre, l'anime en sortie, puis anime le vrai #ecran en entrée
   depuis le bord opposé. Le clone est inerte (overlay) et retiré en fin d'anim. */
@keyframes ecran-glisse-entree {
  from { opacity: 0.4; transform: translate3d(calc(var(--sens-sortie, 1) * 36px), 0, 0); }
  to   { opacity: 1;   transform: translate3d(0, 0, 0); }
}
@keyframes ecran-glisse-sortie {
  from { opacity: 1;   transform: translate3d(0, 0, 0); }
  to   { opacity: 0;   transform: translate3d(calc(var(--sens-sortie, 1) * -42px), 0, 0); }
}
#ecran.ecran-anim {
  animation: ecran-glisse-entree 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
/* Calque éphémère = copie de l'ancien écran qui glisse dehors. Positionné
   par-dessus #ecran (mêmes contraintes de largeur), inerte, retiré en fin. Son
   `top`/`width` exacts sont posés en inline par index.html (recouvrement pile
   sur #ecran), seules l'anim et les contraintes communes vivent ici. */
.ecran-sortant {
  position: absolute;
  left: 0; right: 0;
  padding: 16px 14px 0;
  max-width: 540px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  animation: ecran-glisse-sortie 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: opacity, transform;
}
/* body = ancre de positionnement du calque sortant + masque le débordement
   horizontal pendant le glissé (jamais de scroll latéral parasite). */
body { position: relative; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  #ecran.ecran-anim { animation: none; }
  .ecran-sortant { display: none; animation: none; }
}

/* ---------- Message d'erreur ---------- */
#erreur {
  color: var(--red);
  font-size: 0.88rem;
  padding: 12px 14px;
  background: var(--red-bg);
  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);
  border-radius: var(--r-sm);
  margin: 12px 14px 0;
  max-width: 540px;
}
#erreur[hidden] { display: none; }

/* ============================================================
   CARTES — bloc universel (remplace <section>)
   Les modules JS rendent des <section class="card ...">
   ============================================================ */
section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

section h2 {
  font-family: 'Spline Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section h2 .h2-sub {
  font-size: 10px;
  color: var(--ink-faint);
  opacity: .8;
  letter-spacing: .02em;
  text-transform: none;
  margin-left: .4rem;
}

/* ============================================================
   GRAPHES SVG génériques
   ============================================================ */
.chart { height: 130px; border-radius: var(--r-sm); background: var(--cream); position: relative; overflow: hidden; margin-top: 6px; display: block; width: 100%; }
.chart svg, svg.chart { width: 100%; height: 100%; display: block; }
.chart.tall { height: 160px; }

/* ============================================================
   SURCHARGES DE section{} — cartes R1
   (#254 : la surcharge `section.corps-card` a été retirée, morte depuis la
   suppression de l'onglet Corps #228 — plus aucune `.corps-card` émise.)
   ============================================================ */
section.etat-r1-card {
  padding-left: 22px;
}

/* ============================================================
   SQUELETTES DE CHARGEMENT (LOT B — chargement instantané)
   Placeholders gris animés (shimmer) affichés tant qu'on n'a JAMAIS reçu la
   donnée d'un jour. Calqués sur la silhouette des onglets (squelettes.js).
   ============================================================ */
.sk-wrap { padding: 14px 16px 80px; }
.sk-entete { margin-bottom: 14px; }
.sk-carte {
  background: var(--sable-pale);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.sk-liste { margin-top: 4px; }
.sk-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sable-pale);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

/* Bloc gris animé — dégradé qui balaie (shimmer) gauche→droite. */
.sk-bloc {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(100deg, #e7e1d4 30%, #f2ede3 50%, #e7e1d4 70%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk-e-titre { height: 26px; width: 52%; margin-bottom: 8px; }
.sk-e-sous  { height: 13px; width: 34%; }
.sk-l-titre { width: 42%; height: 16px; margin-bottom: 12px; }
.sk-l-plein { width: 100%; margin-bottom: 9px; }
.sk-l-court { width: 64%; }
.sk-l-puce  { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; }
.sk-courbe  {
  height: 96px;
  margin-top: 10px;
  border-radius: 12px;
  background: linear-gradient(100deg, #e7e1d4 30%, #f2ede3 50%, #e7e1d4 70%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk-ligne .sk-l-plein { margin-bottom: 0; }

@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Respect du « moins de mouvement » (accessibilité) : on fige l'animation. */
@media (prefers-reduced-motion: reduce) {
  .sk-bloc, .sk-courbe { animation: none; }
}