/* Sélecteur de couleur Trumsy (js/choix_couleur.js) — remplace l'ancien plugin ColorPicker */
.cc-carre{cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; border-radius:5px}
.cc-carre:hover{transform:scale(1.08); box-shadow:0 0 0 2px #fff, 0 0 0 4px #36b5ff}
.cc-carre:focus{outline:0; box-shadow:0 0 0 2px #fff, 0 0 0 4px #1f8fd6}
.cc-carre.cc-enregistrement{opacity:.55; animation:cc-pulse .8s ease-in-out infinite alternate}
@keyframes cc-pulse{from{opacity:.45}to{opacity:.9}}

.cc-fenetre{
	display:none; position:absolute; z-index:20000; width:268px; padding:12px;
	background:#fff; border:1px solid #dfe5ec; border-radius:10px;
	box-shadow:0 10px 30px rgba(31,45,58,.22), 0 2px 6px rgba(31,45,58,.10);
	font:13px/1.3 "Segoe UI", Roboto, Arial, sans-serif; color:#2c3e50;
	animation:cc-apparition .14s ease-out;
}
@keyframes cc-apparition{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.cc-titre{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:#17699e; margin-bottom:8px}
.cc-palette{display:grid; grid-template-columns:repeat(8, 1fr); gap:6px}
.cc-case{
	width:100%; aspect-ratio:1; min-height:24px; padding:0; border:1px solid rgba(0,0,0,.14); border-radius:6px;
	cursor:pointer; transition:transform .1s ease, box-shadow .1s ease;
}
.cc-case:hover{transform:scale(1.12)}
.cc-case:focus{outline:0; box-shadow:0 0 0 2px #fff, 0 0 0 4px #36b5ff}
.cc-case.cc-active{box-shadow:0 0 0 2px #fff, 0 0 0 4px #1f8fd6; transform:scale(1.08)}

.cc-perso{display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid #eef1f5}
.cc-natif{display:flex; align-items:center; gap:6px; margin:0; font-weight:normal; cursor:pointer; color:#1f8fd6; flex:1; white-space:nowrap}
.cc-natif span{font-size:12px}
.cc-input-natif{width:30px; height:26px; padding:0; border:1px solid #dfe5ec; border-radius:6px; background:none; cursor:pointer}
.cc-input-natif::-webkit-color-swatch-wrapper{padding:2px}
.cc-input-natif::-webkit-color-swatch{border:0; border-radius:4px}
.cc-diese{color:#8a99a8}
.cc-hex{
	width:76px; padding:4px 6px; border:1px solid #dfe5ec; border-radius:5px;
	font-family:Consolas, "Courier New", monospace; font-size:12.5px; text-transform:uppercase;
}
.cc-hex:focus{outline:0; border-color:#36b5ff; box-shadow:0 0 0 2px rgba(54,181,255,.18)}
.cc-hex.cc-invalide{border-color:#d0463b; box-shadow:0 0 0 2px rgba(208,70,59,.15)}

.cc-apercu{display:flex; margin-top:10px; height:30px; border-radius:6px; overflow:hidden; border:1px solid #dfe5ec}
.cc-avant{width:30%}
.cc-apres{flex:1; display:flex; align-items:center; justify-content:center; font-family:Consolas, "Courier New", monospace; font-size:12px; font-weight:600}

.cc-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.cc-actions button{border-radius:5px; padding:5px 14px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid transparent}
.cc-annuler{background:#fff; border-color:#dfe5ec !important; color:#5b6b7c}
.cc-annuler:hover{background:#f3f6f9}
.cc-appliquer{background:#1f8fd6; color:#fff}
.cc-appliquer:hover{background:#17699e}