/* dessin/dessin.css */
/* Dessin : outils (minuteur de croquis, cercle chromatique). Prefixe dessin-. Commandes : composants communs (.btn,
   .btn-matiere, .choix, .consent, .champ : public/css/outils.css). Encre de la matiere : --m (bleu), --m-texte,
   --m-doux. Dans un cours, l'outil est une feuille ; sur une page d'outils, la section en est deja une (pas de
   feuille dans la feuille). */
.dessin-outil{
  container-type:inline-size;
  box-sizing:border-box;max-width:760px;margin:var(--s4) 0;padding:var(--s4) 0 0;
  background:none;color:var(--ink);border:0;border-top:2px solid var(--ink);border-radius:0;box-shadow:none;
  font:var(--t-corps)/1.5 var(--body);
}
:is(.section-pleine-corps,.outil-seul) > .dessin-outil{max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none}
.dessin-outil *,.dessin-outil *::before,.dessin-outil *::after{box-sizing:border-box}
.dessin-outil [hidden]{display:none!important}
.dessin-outil p{margin:0}
.dessin-aide,.dessin-legende,.dessin-astuce,.dessin-expl,.dessin-veille{max-width:var(--mesure);color:var(--muted);font-size:var(--t-petit)}
.dessin-astuce{display:flex;gap:var(--s3);margin-top:var(--s3);color:var(--ink)}
.dessin-astuce::before{content:"";flex:none;width:10px;height:10px;margin-top:.5em;border-radius:2px;background:var(--m)}
.dessin-sous-titre{margin:0 0 var(--s2);font:700 var(--t-titre-3)/1.2 var(--display);color:var(--ink)}
.dessin-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- rangees de boutons ---------- */
.dessin-boutons{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.dessin-centre{justify-content:center}
.dessin-select{min-width:0}

/* ---------- minuteur : reglages ---------- */
.dessin-reglages{display:grid;gap:var(--s4)}
.dessin-libre{padding:var(--s3);border:1.5px dashed var(--champ-bord);border-radius:var(--r-bloc)}
.dessin-series{display:grid;gap:var(--s3)}
.dessin-serie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.dessin-pas{display:inline-flex;align-items:center;gap:var(--s2)}
.dessin-nb{min-width:2ch;text-align:center;font:800 var(--t-titre-3)/1 var(--display);font-variant-numeric:tabular-nums}
.dessin-resume{font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- minuteur : seance (les chiffres en grand, comme sur une affiche) ---------- */
.dessin-seance{padding:var(--s4) var(--s3);border-radius:var(--r-bloc);background:var(--surface-2);text-align:center}
.dessin-pose-n{font-size:var(--t-corps);font-weight:600;color:var(--m-texte)}
.dessin-chiffres{margin:var(--s1) 0;font-family:var(--display);font-weight:800;font-stretch:var(--large-titre);line-height:1;font-size:clamp(64px,21cqi,168px);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.dessin-fin-proche .dessin-chiffres{color:var(--bad)}
.dessin-en-pause .dessin-chiffres{opacity:.45}
.dessin-barre{height:10px;margin:var(--s2) auto var(--s3);max-width:520px;border-radius:var(--r-petit);background:var(--surface);overflow:hidden}
.dessin-barre i{display:block;height:100%;width:100%;background:var(--m);transform:scaleX(0);transform-origin:left center;transition:transform .2s linear}
.dessin-ensuite{color:var(--muted);font-size:var(--t-petit)}
.dessin-veille{margin-top:var(--s3)}
/* Changement de pose : le fond s'allume au moment du son (une fois, 300 ms) */
.dessin-flash{animation:dessin-flash 300ms var(--courbe-sortie)}
@keyframes dessin-flash{0%{background:var(--selection)}100%{background:var(--surface-2)}}
@media (prefers-reduced-motion: reduce){.dessin-barre i{transition:none}}
.dessin-seance:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:var(--s5);border:0;border-radius:0}
.dessin-seance:fullscreen .dessin-chiffres{font-size:min(34vw,58vh)}
.dessin-seance:fullscreen .dessin-pose-n{font-size:var(--t-titre-3)}
.dessin-seance:-webkit-full-screen{display:flex;flex-direction:column;justify-content:center;padding:var(--s5);border:0;border-radius:0;width:100%;height:100%}
.dessin-seance:-webkit-full-screen .dessin-chiffres{font-size:min(34vw,58vh)}
.dessin-bilan{padding:var(--s4) var(--s3);border-radius:var(--r-bloc);background:var(--m-doux)}
.dessin-bilan-titre{margin-bottom:var(--s1);font:800 var(--t-titre-3)/1.2 var(--display)}

/* ---------- cercle chromatique (dessin) ---------- */
.dessin-onglets{margin-bottom:var(--s4)}
.dessin-onglet{display:grid;gap:var(--s4)}
.dessin-cercle-zone{display:grid;gap:var(--s4);align-items:start}
@container (min-width:600px){.dessin-cercle-zone{grid-template-columns:minmax(260px,1fr) 1fr}}
.dessin-cercle-col{display:grid;gap:var(--s3);align-content:start}
.dessin-cercle{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;touch-action:manipulation}
.dessin-cercle-fond{fill:var(--bg);stroke:var(--line)}
.dessin-part{cursor:pointer;transition:opacity var(--d-court) var(--courbe-sortie)}
.dessin-part path{stroke:var(--surface);stroke-width:2}
.dessin-part:focus{outline:none}
.dessin-part:focus-visible{outline:var(--focus-epaisseur) solid var(--focus);outline-offset:2px}
.dessin-part:focus-visible path{stroke:var(--ink);stroke-width:5;stroke-dasharray:7 4}
.dessin-choisi path{stroke:var(--ink);stroke-width:4}
.dessin-pale{opacity:.25}
.dessin-limite{opacity:.6}
.dessin-trait{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dessin-repere{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.dessin-repere-choisi{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.dessin-titre-couleur{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.dessin-grosse{flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--bord)}
.dessin-nom{font:800 var(--t-titre-2)/1.1 var(--display);font-stretch:var(--large-titre)}
.dessin-fiche{display:grid;gap:var(--s2)}
.dessin-ligne{padding-top:var(--s2);border-top:1px solid var(--line)}
.dessin-ligne-titre{font-weight:700;margin-bottom:var(--s1)}
.dessin-rangee{display:flex;flex-wrap:wrap;gap:var(--s2)}
/* Pastille de couleur : la pastille commune, une pastille d'encre devant le nom */
.dessin-pastille{justify-content:flex-start;padding-left:6px}
.dessin-rond-couleur{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--bord)}
.dessin-bloc{padding-top:var(--s1)}
.dessin-echelle{display:flex;height:52px;border-radius:var(--r-bloc);overflow:hidden;border:1px solid var(--bord)}
.dessin-marche{flex:1}
.dessin-marche-pure{flex:1.4;box-shadow:inset 0 0 0 3px var(--surface)}
.dessin-bouts{display:flex;justify-content:space-between;margin-top:var(--s1);color:var(--muted);font-size:var(--t-legende)}

/* ---------- melange ---------- */
.dessin-melange{display:grid;gap:var(--s4)}
.dessin-resultat{padding:var(--s4) var(--s3);border-radius:var(--r-bloc);background:var(--surface-2)}
.dessin-equation{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--s1) var(--s3)}
.dessin-terme{display:flex;flex-direction:column;align-items:center;gap:var(--s1);max-width:92px;text-align:center;font-size:var(--t-legende);font-weight:600}
.dessin-rond-grand{width:64px;height:64px;border-radius:50%;border:2px solid var(--bord)}
.dessin-signe{align-self:center;margin-top:-18px;color:var(--muted);font:800 var(--t-titre-2)/1 var(--display)}
.dessin-phrase{margin-top:var(--s3);text-align:center;font-weight:700;font-size:var(--t-grand)}
.dessin-resultat .dessin-expl{margin:var(--s2) auto 0;text-align:center}
@media (max-width:420px){.dessin-rond-grand{width:52px;height:52px}}