/* PALETTE — selecteur de couleur
 *
 * Tranche 13 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
.timeline-card.is-constate { border-left: 2px solid color-mix(in srgb, var(--accent-text) 55%, transparent); }

/* Rattacher un cours à une ligne déjà enregistrée : la commande vit dans la cellule du nom,
   là où se lit le titre concerné, et non dans une colonne d'actions séparée. */
.ligne-cours-actions { margin-top: 0.25rem; }
.ligne-suivre-zone { position: relative; margin-top: 0.3rem; }
.ligne-suivre-input { width: 100%; min-width: 12rem; }

/* Panneau de choix de couleur d'une part de camembert : ancré sous le curseur, au-dessus de
   tout le reste. Il porte le bouton « Enregistrer » que la palette du système ne peut pas
   offrir. */
.palette-couleur {
  position: fixed; z-index: 1100; min-width: 12.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-input);
  background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Indispensable : `display: flex` ci-dessus l'emporte sur le `display: none` que le
   navigateur applique à [hidden], et le panneau ne se refermait donc JAMAIS — il restait
   posé sur le camembert dont il masquait les icônes (constaté le 2026-08-24). */
.palette-couleur[hidden] { display: none; }

.palette-couleur-pastilles { display: flex; gap: 0.3rem; }
.palette-couleur-pastille {
  width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); cursor: pointer;
}
.palette-couleur-pastille:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.palette-couleur-ligne { display: flex; align-items: center; gap: 0.5rem; }

/* Le carré de couleurs : deux dégradés superposés, et rien d'autre. La teinte arrive par la
   variable `--teinte`, posée en JavaScript — aucune image, aucun canvas, aucune couleur à
   relire pixel par pixel. `touch-action: none` laisse le geste au carré plutôt qu'au
   défilement de la page. */
.palette-couleur-nappe {
  position: relative; width: 100%; height: 6.5rem; cursor: crosshair; touch-action: none;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, hsl(var(--teinte, 0) 100% 50%));
}
.palette-couleur-viseur {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.palette-couleur-teinte {
  width: 100%; height: 0.8rem; margin: 0; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: linear-gradient(to right,
    #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.palette-couleur-teinte::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 1.1rem;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 2px; cursor: pointer;
}
.palette-couleur-teinte::-moz-range-thumb {
  width: 10px; height: 1.1rem;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 2px; cursor: pointer;
}

.palette-couleur-code {
  flex: 1; min-width: 0; font-family: inherit; font-size: 0.78rem; text-transform: lowercase;
}
.palette-couleur-hint { font-size: 0.72rem; color: var(--muted); }
.palette-couleur-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }