/* =========================================
   SLATE TOOLS — palette de stylo + gomme + tout effacer
   Composant partagé par bank.html, ardoise_libre.html, ardoise_intelligente.html
   Nécessite les variables --burgundy, --gold, --gold-light, --white déjà
   définies dans le :root de la page hôte (charte Dar Al-Kalimah).
   ========================================= */
.pen-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pen-color-palette { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.pen-color-swatch { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.pen-color-swatch:hover { transform: scale(1.18); }
.pen-color-swatch.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--gold), 0 1px 3px rgba(0,0,0,0.18); animation: swatch-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes swatch-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.pen-tools { display: flex; align-items: center; gap: 8px; }
.pen-tool-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gold-light); background: var(--white); color: var(--burgundy); font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.pen-tool-btn:hover { border-color: var(--gold); box-shadow: 0 4px 15px rgba(93, 24, 40, 0.08); }
.pen-tool-btn.active-eraser { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }

@media (max-width: 600px) {
    .pen-toolbar { gap: 10px; }
    .pen-color-palette { gap: 7px; }
    .pen-color-swatch { width: 21px; height: 21px; min-width: 21px; }
    .pen-tool-btn { width: 32px; height: 32px; font-size: 0.85rem; }
}