/* Outil · Colors (Couleurs) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ct- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : le cercle et sa ligne d'info, puis les réglages. Ordinateur : le cercle à gauche, les réglages à droite. */
.ct .outil-fixe { align-items: center; }

/* ---------- Le cercle ---------- */
.ct-zone { width: 100%; display: grid; place-items: center; }
.ct-roue { display: block; width: min(100%, 340px); height: auto; overflow: visible; }
@media (min-width: 960px) { .ct-roue { width: min(100%, 56vh, 480px); } }
.ct-roue { shape-rendering: geometricPrecision; }
.ct-secteur { cursor: pointer; outline: none; transition: opacity .4s var(--courbe); }
/* Entre deux couleurs : un trait sombre d'épaisseur constante (bords droits et parallèles) */
.ct-separations line { stroke: var(--noir); stroke-width: 5; stroke-linecap: butt; pointer-events: none; }
.ct-secteur.estompe { opacity: .14; }
.ct-secteur:focus-visible { stroke: var(--orange); stroke-width: 3; }
/* L'harmonie : un tracé fin dans le cercle, un point de couleur à chaque sommet, un repère sur chaque couleur de l'anneau */
.ct-trace { fill: rgba(242, 240, 235, .04); stroke: var(--papier); stroke-width: 1.5; stroke-linejoin: round; opacity: .85; }
.ct-sommet { stroke: var(--papier); stroke-width: 2; }
.ct-repere { fill: none; stroke: var(--papier); stroke-width: 2.5; pointer-events: none; }
.ct-repere.choisi { fill: var(--papier); stroke: var(--noir); stroke-width: 3; }
/* Chaudes / froides : deux arcs autour de l'anneau, une seule couleur chacun : orange pour la moitié chaude, bleu clair pour la froide */
[data-arcs] { opacity: 0; transition: opacity .4s var(--courbe); }
[data-arcs].visible { opacity: 1; }
.ct-arc { fill: none; stroke-width: 8; stroke-linecap: round; }
.ct-chaud { stroke: #f17c1e; }
.ct-froid { stroke: #8ec5f2; }

.ct-info { margin-top: 4px; }
.ct-palette-lien { align-self: center; }
.ct-palette-lien:hover { translate: none; }

/* ---------- Réglages ---------- */
.ct-texte { margin: var(--dans-groupe) 0 0; font-size: 13px; line-height: 1.55; color: var(--texte2); }
.ct-texte[hidden] { display: none; }
.ct-chaudes .ct-texte { margin-top: 2px; }

/* Les couleurs de l'harmonie : pastille, nom (et son niveau), puis les codes HEX et RVB à copier */
.ct-palette { display: flex; flex-direction: column; }
.ct-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet-doux); }
.ct-ligne:last-child { border-bottom: 0; }
.ct-pastille { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .12); }
.ct-ligne.choisie .ct-pastille { box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px var(--noir); }   /* anneau à l'intérieur : rien ne déborde de la colonne */
.ct-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 500 14px/1.3 var(--corps); }
.ct-nom i { font: var(--repere); letter-spacing: .1em; font-style: normal; color: var(--texte2); }
.ct-ligne .pastille { flex: none; }
/* Largeurs fixes : les codes s'alignent en colonnes, quelle que soit leur longueur (« 233 72 31 », « 107 42 139 ») */
.ct-hex { min-width: 98px; }
.ct-rvb { min-width: 124px; }
@media (max-width: 380px) { .ct-ligne { flex-wrap: wrap; } .ct-nom { flex-basis: calc(100% - 44px); } .ct-ligne .pastille:first-of-type { margin-left: 44px; } }