/* ============================================================
   ANIMA — Outil Radar pédagogique
   ------------------------------------------------------------
   Deux couches sur les mêmes axes : « dispositif » (ce que l'équipe met en
   place) en contour neutre, « effet » (ce que les jeunes en font) en accent
   plein. L'écart entre les deux EST le diagnostic — la lecture est donc
   portée par la SUPERPOSITION, pas par une couleur de statut.
   Mobile-first (saisie du soir sur téléphone). Tokens de styles.css,
   aucune valeur hex en dur.
   ============================================================ */

.radar-wrap{display:flex; flex-direction:column; gap:var(--sp-5)}

/* ---------- Barre de contexte : jour + référentiel ---------- */
.radar-ctx{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.radar-ctx-lbl{color:var(--text-3); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em}
.radar-jour{display:flex; align-items:center; gap:var(--sp-1)}
.radar-jour-val{font-family:var(--font-mono); font-size:1.05rem; font-weight:600; color:var(--text); min-width:3.2em; text-align:center}
.radar-ctx-note{color:var(--text-3); font-size:.78rem; line-height:1.5; flex-basis:100%}
.radar-ctx-grille{color:var(--text-3); font-size:.74rem; line-height:1.4; flex-basis:100%; margin:calc(var(--sp-2) * -1) 0 0; font-family:var(--font-mono)}

/* ---------- La toile ---------- */
.radar-toile{display:flex; flex-direction:column; align-items:center; gap:var(--sp-3)}
.radar-svg{width:100%; max-width:420px; height:auto}
.radar-grille{fill:none; stroke:var(--line); stroke-width:1}
.radar-grille-out{fill:none; stroke:var(--line-2); stroke-width:1}
.radar-rayon{stroke:var(--line); stroke-width:1}
.radar-axe-lbl{fill:var(--text-2); font-size:11px; font-weight:600}
.radar-axe-lbl.is-alerte{fill:var(--accent)}

/* Dispositif — contour, pas de plein : c'est une structure, pas une matière. */
.radar-poly-dispositif{fill:none; stroke:var(--text-2); stroke-width:1.5; stroke-dasharray:4 3}
.radar-pt-dispositif{fill:var(--text-2)}
/* Effet — plein ambre : c'est ce qui vit. */
.radar-poly-effet{fill:var(--accent-bg); stroke:var(--accent); stroke-width:2}
.radar-pt-effet{fill:var(--accent)}

/* ---------- Légende ---------- */
.radar-leg{display:flex; gap:var(--sp-4); flex-wrap:wrap; justify-content:center}
.radar-leg-item{display:flex; align-items:baseline; gap:var(--sp-1); font-size:.8rem; color:var(--text-2)}
.radar-leg-key{width:20px; height:0; border-top-width:2px; border-top-style:solid; display:inline-block; transform:translateY(-3px)}
.radar-leg-key.k-dispositif{border-top-color:var(--text-2); border-top-style:dashed}
.radar-leg-key.k-effet{border-top-color:var(--accent)}
.radar-leg-sous{color:var(--text-3)}

/* ---------- Lecture par axe ---------- */
.radar-lect{display:flex; flex-direction:column; gap:var(--sp-2)}
.radar-lect-row{display:grid; grid-template-columns:1fr auto; gap:var(--sp-1) var(--sp-3); padding:var(--sp-3); border:1px solid var(--line); border-radius:10px}
.radar-lect-row.is-declaratif{border-color:var(--accent-glow); background:var(--accent-bg)}
.radar-lect-axe{font-weight:600; color:var(--text); font-size:.92rem}
.radar-lect-code{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); white-space:nowrap; align-self:center}
.radar-lect-row.is-declaratif .radar-lect-code{color:var(--accent)}
.radar-lect-barres{grid-column:1 / -1; display:flex; flex-direction:column; gap:2px; font-family:var(--font-mono); font-size:.8rem}
.radar-lect-barre{display:flex; gap:var(--sp-2); align-items:baseline; color:var(--text-2)}
.radar-lect-barre .b{letter-spacing:-1px}
.radar-lect-barre.b-effet .b{color:var(--accent)}
.radar-lect-barre .n{color:var(--text-3); font-size:.74rem}
.radar-lect-quoi{grid-column:1 / -1; color:var(--text-2); font-size:.82rem; line-height:1.5; margin:0}

/* ---------- Relevé du soir ---------- */
.radar-releve{display:flex; flex-direction:column; gap:var(--sp-3)}
.radar-h{font-size:.96rem; font-weight:600; color:var(--text); margin:0}
.radar-hint{color:var(--text-3); font-size:.8rem; line-height:1.5; margin:0}
.radar-axe-bloc{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.radar-axe-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); width:100%;
  padding:var(--sp-3); background:none; border:0; cursor:pointer; text-align:left; color:var(--text); font:inherit}
.radar-axe-head:hover{background:var(--survol-fond)}
.radar-axe-nom{font-weight:600; font-size:.9rem}
.radar-axe-meta{color:var(--text-3); font-size:.76rem; font-family:var(--font-mono)}
.radar-axe-body{display:none; flex-direction:column; gap:var(--sp-1); padding:0 var(--sp-3) var(--sp-3)}
.radar-axe-bloc.is-open .radar-axe-body{display:flex}

.radar-oo{color:var(--text-3); font-size:.76rem; margin:var(--sp-2) 0 2px; line-height:1.4}
.radar-crit{display:grid; grid-template-columns:1fr auto; gap:var(--sp-2); align-items:center;
  padding:var(--sp-2) 0; border-top:1px solid var(--line)}
.radar-crit.is-attente{opacity:.45}
.radar-crit-txt{font-size:.84rem; line-height:1.45; color:var(--text)}
.radar-crit-tag{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3)}
.radar-crit-tag.t-effet{color:var(--accent)}
.radar-crit-ctrl{display:flex; align-items:center; gap:var(--sp-1)}
.radar-step{width:32px; height:32px; padding:0; font-size:1rem; line-height:1; flex:0 0 auto}
.radar-crit-val{font-family:var(--font-mono); font-size:.86rem; color:var(--text); min-width:4.2em; text-align:center}
.radar-crit-val.is-plein{color:var(--ok)}
.radar-chk{width:22px; height:22px; cursor:pointer; accent-color:var(--accent)}

/* ---------- Historique des relevés ---------- */
.radar-hist{display:flex; flex-direction:column; gap:var(--sp-2)}
.radar-hist-row{display:flex; align-items:center; gap:var(--sp-3); font-family:var(--font-mono); font-size:.8rem; color:var(--text-2)}
.radar-hist-jour{font-weight:600; color:var(--text); min-width:3.5em}
.radar-hist-vide{color:var(--text-3); font-size:.82rem; line-height:1.5}
.radar-cmp{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}

/* ---------- Actions (en BAS, cf. convention) ---------- */
.radar-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; padding-top:var(--sp-2); border-top:1px solid var(--line)}

@media (min-width:720px){
  .radar-svg{max-width:460px}
  .radar-lect{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
}