/* ==========================================
   STYLES PERSONNALISÉS - I2AJM v2.1
   ========================================== */

html { scroll-behavior: smooth; }

.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #008751; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #006039; }

/* Édition de texte enrichi */
[contenteditable]:focus {
  outline: 2px solid #FCD116;
  background: rgba(252, 209, 22, 0.08);
  border-radius: 4px;
  padding: 2px 4px;
}
[contenteditable]:hover {
  cursor: text;
  background: rgba(0, 135, 81, 0.04);
}

/* Poignée de redimensionnement */
.resize-handle { cursor: ns-resize; transition: background 0.2s; }
.resize-handle:hover { background: rgba(252, 209, 22, 0.5); }

/* Contrôles admin */
.item-controls {
  position: absolute; top: -10px; right: -10px;
  background: white; border: 1px solid #e5e7eb;
  border-radius: 6px; padding: 4px; display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 40;
}
.group\/item:hover .item-controls { display: flex; gap: 4px; }

/* Modales (Pop-ups) */
.modal-overlay {
  animation: fadeIn 0.3s ease-out forwards;
  backdrop-filter: blur(4px);
}
.modal-content {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Barre d'outils de sélection (Pipette) */
.floating-toolbar {
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Base Responsive */
@media (max-width: 480px) { .hero-buttons { flex-direction: column; } }
@media (max-width: 639px) { body.cms-open { overflow: hidden; } }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
@media (max-width: 767px) { .container { padding-left: 1rem; padding-right: 1rem; } }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }