/* ═══════════════════════════════════════════════════════════════════════
  CLINDOO - CSS GLOBAL RÉORGANISÉ ET NETTOYÉ
  Version : 3.0.0 | Date : 19 novembre 2025
  ═══════════════════════════════════════════════════════════════════════════
  
  📋 TABLE DES MATIÈRES
  
  1. VARIABLES CSS (~ligne 80)
  2. CARTE DE TÂCHE PRINCIPALE (~ligne 150)
  3. SIDE PANEL & ÉTAPES (~ligne 700)
  4. SÉLECTION D'IMAGES (~ligne 2100)
  5. PROGRESS BARS (~ligne 3600)
  6. HEADERS UNIFORMISÉS (~ligne 4650)
  7. RESPONSIVE & MOBILE (~ligne 4800)
  
  ═══════════════════════════════════════════════════════════════════════════
*/

/* ============================================================================
  CSS OPTIMISÉ COMPLET - FORMULAIRE CRÉATION TÂCHE CLINDOO
  Version consolidée et corrigée
  ============================================================================ */

/* ============================================================================
  VARIABLES CSS CLINDOO
  ============================================================================ */

:root {
 /* Couleurs principales */
 --color-primary-blue: #4A90E2;
 --color-green: #10B981;
 --color-orange: #FF8C42;
 --color-red: #ef4444;
 --color-yellow: #eab308;
 
 /* Couleurs catégories Clindoo */
 --clindoo-hygiene-primary: #4A90E2;
 --clindoo-hygiene-bg: #ebf5ff;
 --clindoo-apprentissage-primary: #10B981;
 --clindoo-apprentissage-bg: #ecfdf5;
 --clindoo-autonomie-primary: #FF8C42;
 --clindoo-autonomie-bg: #fff7ed;
 --clindoo-social-primary: #A855F7;
 --clindoo-social-bg: #faf5ff;
 
 /* Couleurs système */
 --color-success: #10B981;
 --color-warning: #f59e0b;
 --color-error: #ef4444;
 --color-info: #3b82f6;
 
 /* Couleurs texte */
 --text-primary: #1f2937;
 --text-secondary: #6b7280;
 --text-tertiary: #9ca3af;
 
 /* Couleurs bordures */
 --border-light: #e5e7eb;
 --border-medium: #d1d5db;
 --border-dark: #9ca3af;
 
 /* Couleurs backgrounds */
 --bg-primary: #ffffff;
 --bg-secondary: #f9fafb;
 --bg-tertiary: #f3f4f6;
 
 /* Espacements */
 --space-xs: 4px;
 --space-sm: 8px;
 --space-md: 16px;
 --space-lg: 24px;
 --space-xl: 32px;
 --space-2xl: 48px;
 
 /* Radius */
 --radius-sm: 6px;
 --radius-md: 8px;
 --radius-lg: 12px;
 --radius-xl: 16px;
 --radius-full: 9999px;
 
 /* Shadows */
 --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
 --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 
 /* Transitions */
 --transition-fast: all 0.2s ease;
 --transition-normal: all 0.3s ease;
 --transition-slow: all 0.5s ease;
 
 /* Typography */
 --font-xs: 12px;
 --font-sm: 13px;
 --font-base: 14px;
 --font-md: 16px;
 --font-lg: 18px;
 --font-xl: 20px;
 --font-2xl: 24px;
 
 /* Z-index */
 --z-dropdown: 1000;
 --z-sticky: 1020;
 --z-fixed: 1030;
 --z-modal-backdrop: 1040;
 --z-modal: 1050;
 --z-popover: 1060;
 --z-tooltip: 1070;
}

/* === BASE & RESET === */
/* ============================================================================
  CSS OPTIMISÉ COMPLET - FORMULAIRE CRÉATION Tà‚CHE CLINDOO
  Version consolidée et corrigée
  ============================================================================ */

/* === BASE & RESET === */

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* === CONTAINER & LAYOUT === */

.page-container {
 min-height: 100vh;
 background: #f3f4f6;
 padding: 24px;
}

.page-header {
 text-align: center;
 margin-bottom: 24px;
}

.page-title {
 font-size: 24px;
 font-weight: 700;
 color: #1f2937;
 margin-bottom: 8px;
}

.page-subtitle {
 font-size: 14px;
 color: #6b7280;
}

/* === CARTE PRINCIPALE === */

.clindoo-card {
 max-width: 768px;
 margin: 0 auto;
 background: white;
 border-radius: 12px;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 overflow: hidden;
}

.card-top-bar {
 height: 24px;
 background: #3b82f6;
}

.card-content {
 padding: 32px;
}

/* === HEADER : IMAGE + ÉTOILES === */

.card-header-section {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 margin-bottom: 24px;
}

.task-image-wrapper {
 position: relative !important;
 cursor: pointer;
 display: inline-block !important;
 width: 160px !important;
 height: 160px !important;
}

.task-image {
 width: 100% !important;
 height: 100% !important;
 background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
 border-radius: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 position: relative !important;
}

.task-image:hover {
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.task-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
/* Style spécifique pour les images placeholder */
.task-image img[src*="placeholder"] {
 width: 100% !important;
 height: 100% !important;
 object-fit: fill !important;
 /* Ou si l'image a du padding transparent : */
 transform: scale(1.1);
}
.task-image-placeholder {
 font-size: 64px;
 color: white;
 font-weight: 300;
}

.task-image-hover-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.6);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.2s ease;
 border-radius: 20px;
}

.task-image-wrapper:hover .task-image-hover-overlay {
 opacity: 1;
}

.task-image-hover-text {
 color: white;
 font-weight: 600;
 font-size: 16px;
}

/* Badge étoiles */
.star-badge {
 display: flex;
 align-items: center;
 gap: 8px;
 background: linear-gradient(135deg, #fef3c7 0%, #fde047 100%);
 padding: 12px 20px;
 border-radius: 12px;
 box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
}

.star-icon {
 color: #eab308;
 font-size: 20px;
}

.star-select {
 border: none;
 background: transparent;
 font-weight: 700;
 font-size: 16px;
 color: #92400e;
 cursor: pointer;
 outline: none;
}

/* === TITRE DE LA Tà‚CHE === */

.task-title-section {
 margin-bottom: 24px;
}

.task-title-input {
 width: 100%;
 font-size: 24px;
 font-weight: 700;
 color: #1f2937;
 text-align: center;
 border: 2px solid #e5e7eb !important;
 border-radius: 12px !important;
 outline: none;
 padding: 12px 20px !important;
 transition: all 0.3s ease;
 background: white !important;
}

.task-title-input:hover {
 border-color: #d1d5db !important;
}

.task-title-input:focus {
 border-color: #3b82f6 !important;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.task-title-input::placeholder {
 color: #9ca3af;
 font-weight: 400;
 font-size: 20px;
}
/* Titre de la tâche affiché (après validation) */
.task-title-display {
 width: 100%;
 font-size: 24px;
 font-weight: 700;
 color: #1f2937;
 text-align: center;
 padding: 12px 20px;
 margin: 0;
 cursor: pointer;
 transition: all 0.2s ease;
 border-radius: 12px;
}

.task-title-display:hover {
 background: #f9fafb;
 color: #3b82f6;
}

/* Responsive mobile */
@media (max-width: 768px) {
 .task-title-display {
  font-size: 20px;
  padding: 10px 16px;
 }
}
/* === RÉSUMÉ (ÉTAPES, DURÉE, FRÉQUENCE) === */

.task-summary {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 32px;
 margin-bottom: 24px;
 font-size: 14px;
 color: #3b82f6;
}

.summary-item {
 display: flex;
 align-items: center;
 gap: 8px;
}

.summary-icon {
 width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.summary-icon i {
 font-size: 18px;
}

.summary-value {
 font-weight: 600;
}

.summary-select {
 font-weight: 600;
 background: transparent;
 border: none;
 outline: none;
 cursor: pointer;
 color: #3b82f6;
 padding: 4px 8px;
 border-radius: 6px;
 transition: all 0.2s ease;
}

.summary-select:hover {
 background: #eff6ff;
}

.summary-select:focus {
 background: #dbeafe;
}

/* === SECTION ÉTAPES - REPEATER JETFORMBUILDER === */

.steps-section {
 background: #f9fafb;
 border-radius: 8px;
 padding: 24px;
 margin-bottom: 24px;
}

.steps-list {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

/* Style du repeater JetFormBuilder déplacé dans la carte */
.steps-in-card {
 width: 100%;
 margin: 0;
 padding: 0;
}

.steps-in-card .jet-form-builder-repeater {
 background: transparent;
 border: none;
 padding: 0;
 margin: 0;
}

/* Chaque ligne d'étape */
.steps-in-card .jet-form-builder-repeater__row {
 background: white;
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 16px;
 margin-left: 40px;
 transition: all 0.2s ease;
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.steps-in-card .jet-form-builder-repeater__row:hover {
 border-color: #3b82f6;
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
 transform: translateY(-2px);
}

/* Numéro de l'étape */
.steps-in-card .jet-form-builder-repeater__rows {
 counter-reset: step-counter;
}

.steps-in-card .jet-form-builder-repeater__row::before {
 content: counter(step-counter);
 counter-increment: step-counter;
 position: absolute;
 top: 20px;
 left: -40px;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
 color: white;
 border-radius: 50%;
 font-weight: 700;
 font-size: 14px;
 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Champs du formulaire */
.steps-in-card .jet-form-builder__field {
 margin-bottom: 0;
}

.steps-in-card .jet-form-builder__label {
 font-weight: 600;
 color: #1f2937;
 margin-bottom: 8px;
 font-size: 14px;
 display: block;
}

.steps-in-card input[type="text"],
.steps-in-card input[type="number"],
.steps-in-card textarea,
.steps-in-card select {
 width: 100%;
 padding: 12px 16px;
 border: 2px solid #e5e7eb;
 border-radius: 8px;
 font-size: 14px;
 font-family: inherit;
 transition: all 0.2s ease;
 background: white;
}

.steps-in-card input:focus,
.steps-in-card textarea:focus,
.steps-in-card select:focus {
 border-color: #3b82f6;
 outline: none;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.steps-in-card textarea {
 min-height: 80px;
 resize: vertical;
}

/* === BOUTONS DU REPEATER === */

/* Bouton Ajouter une étape - Style Clindoo Bleu */
.steps-in-card .jet-form-builder-repeater__new,
.steps-section .jet-form-builder-repeater__new,
button.jet-form-builder-repeater__new {
 background: linear-gradient(135deg, #4A90E2 0%, #3A7BD5 100%) !important;
 color: white !important;
 border: 2px solid transparent !important;
 padding: 16px 32px !important;
 border-radius: 12px !important;
 cursor: pointer !important;
 font-weight: 600 !important;
 font-size: 15px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 10px !important;
 width: 100% !important;
 margin-top: 16px !important;
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
 transition: all 0.2s ease !important;
 min-height: 48px !important;
}

.steps-in-card .jet-form-builder-repeater__new:hover,
.steps-section .jet-form-builder-repeater__new:hover {
 background: linear-gradient(135deg, #3A7BD5 0%, #2E6BC6 100%) !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 16px rgba(74, 144, 226, 0.35) !important;
}

.jet-form-builder-repeater__new svg,
.jet-form-builder-repeater__new i {
 width: 16px !important;
 height: 16px !important;
 color: white !important;
 fill: white !important;
}

/* Bouton Supprimer - Style Rouge */
.steps-in-card .jet-form-builder-repeater__remove,
.steps-in-card button[data-action="remove-row"] {
 background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
 color: white !important;
 border: none !important;
 padding: 10px 20px !important;
 border-radius: 8px !important;
 cursor: pointer !important;
 font-weight: 600 !important;
 font-size: 14px !important;
 display: flex !important;
 align-items: center !important;
 gap: 6px !important;
 width: auto !important;
 margin-top: 12px !important;
 transition: all 0.2s ease !important;
}

.steps-in-card .jet-form-builder-repeater__remove:hover {
 background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
 transform: translateY(-1px) !important;
 box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* === SOUS-CATÉGORIES DES ÉTAPES (dans le repeater) === */

.steps-in-card .step-subcategory-section,
.jet-form-builder-repeater__row .step-subcategory-section {
 margin: 12px 0 !important;
 padding: 16px !important;
 background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
 border: 2px solid #4A90E2 !important;
 border-radius: 10px !important;
 display: block !important;
}

.steps-in-card .step-subcategory-grid {
 display: grid !important;
 grid-template-columns: repeat(3, 110px) !important;
 gap: 12px !important;
 justify-content: center !important;
 margin-top: 12px !important;
}

.steps-in-card .step-subcategory-btn {
 background: white !important;
 border: 2px solid #e2e8f0 !important;
 border-radius: 10px !important;
 padding: 14px 10px !important;
 cursor: pointer !important;
 transition: all 0.25s ease !important;
 text-align: center !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 gap: 8px !important;
 box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
 width: 110px !important;
 min-height: 90px !important;
}

.steps-in-card .step-subcategory-btn:hover {
 border-color: #4A90E2 !important;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15) !important;
}

.steps-in-card .step-subcategory-btn.active {
 border-color: #4A90E2 !important;
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%) !important;
 color: white !important;
 box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
}

.steps-in-card .step-subcategory-btn .icon {
 font-size: 28px !important;
 color: #4A90E2 !important;
 transition: all 0.25s !important;
}

.steps-in-card .step-subcategory-btn.active .icon {
 color: white !important;
 transform: scale(1.1) !important;
}

.steps-in-card .step-subcategory-btn .label {
 font-size: 11px !important;
 font-weight: 600 !important;
 color: #1a202c !important;
 line-height: 1.2 !important;
}

.steps-in-card .step-subcategory-btn.active .label {
 color: white !important;
}
/* ============================================================================
   🎨 ICÔNES FONT AWESOME SOUS-CATÉGORIES ÉTAPES
   ============================================================================ */

/* Styles de base pour les icônes FA dans les boutons étapes */
.steps-in-card .step-subcategory-btn i {
    display: block !important;
    width: 100% !important;
    font-size: 28px !important;
}

/* Couleurs par thématique pour les étapes */
/* Quotidien à la maison (bleu) */
.step-subcategory-btn[data-subcategory-id="dents"] i,
.step-subcategory-btn[data-subcategory-id="mains"] i,
.step-subcategory-btn[data-subcategory-id="douche"] i,
.step-subcategory-btn[data-subcategory-id="toilettes-pipi"] i,
.step-subcategory-btn[data-subcategory-id="cheveux"] i,
.step-subcategory-btn[data-subcategory-id="serviette-douche"] i,
.step-subcategory-btn[data-subcategory-id="serviette-mains"] i {
    color: #4A90E2 !important;
}

/* Prendre soin de soi (vert) */
.step-subcategory-btn[data-subcategory-id="moucher"] i,
.step-subcategory-btn[data-subcategory-id="toilettes-selles"] i,
.step-subcategory-btn[data-subcategory-id="creme"] i,
.step-subcategory-btn[data-subcategory-id="ongles"] i,
.step-subcategory-btn[data-subcategory-id="deodorant"] i,
.step-subcategory-btn[data-subcategory-id="peau"] i,
.step-subcategory-btn[data-subcategory-id="menstruelle"] i,
.step-subcategory-btn[data-subcategory-id="raser"] i {
    color: #10B981 !important;
}

/* Santé & Rendez-vous (rouge) */
.step-subcategory-btn[data-subcategory-id="medicament-quotidien"] i,
.step-subcategory-btn[data-subcategory-id="medicament-ponctuel"] i,
.step-subcategory-btn[data-subcategory-id="temperature"] i,
.step-subcategory-btn[data-subcategory-id="pansement"] i,
.step-subcategory-btn[data-subcategory-id="plaie"] i,
.step-subcategory-btn[data-subcategory-id="inhalateur"] i,
.step-subcategory-btn[data-subcategory-id="gouttes"] i,
.step-subcategory-btn[data-subcategory-id="docteur"] i,
.step-subcategory-btn[data-subcategory-id="dentiste"] i,
.step-subcategory-btn[data-subcategory-id="ophtalmo"] i,
.step-subcategory-btn[data-subcategory-id="orl"] i,
.step-subcategory-btn[data-subcategory-id="kine"] i,
.step-subcategory-btn[data-subcategory-id="orthophoniste"] i,
.step-subcategory-btn[data-subcategory-id="vaccin"] i,
.step-subcategory-btn[data-subcategory-id="prise-sang"] i,
.step-subcategory-btn[data-subcategory-id="radio"] i {
    color: #EF4444 !important;
}

/* État actif : icône blanche */
.steps-in-card .step-subcategory-btn.active i {
    color: white !important;
}
/* === BOUTON SOUMETTRE === */

.submit-section {
 display: flex;
 justify-content: center;
 margin-top: 32px;
}

.submit-button {
 position: relative;
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 border: none;
 padding: 16px 48px;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
 transition: all 0.3s ease;
 overflow: hidden;
}

.submit-button:hover {
 background: linear-gradient(135deg, #059669 0%, #047857 100%);
 transform: translateY(-2px);
 box-shadow: 0 15px 20px -3px rgba(16, 185, 129, 0.4);
}

.submit-button:active {
 transform: translateY(0);
}

.submit-button:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}
/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  BOUTON "ENREGISTRER LA TÂCHE" - STYLE JETFORMBUILDER (VERSION CORRIGÉE)
  Version : 1.1.0
  Date : 4 novembre 2025
  Corrections : Centrage du bouton + Texte blanc quand désactivé
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Conteneur pour centrer le bouton */
.submit-section,
.clindoo-submit-btn-container {
 display: flex;
 justify-content: center;
 margin-top: 24px;
}

/* Bouton principal - Style JetFormBuilder */
.clindoo-submit-btn.jet-form-builder__action-button {
 /* Layout */
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 
 /* Dimensions */
 padding: 12px 24px;
 min-height: 48px;
 
 /* Typographie */
 font-family: inherit;
 font-size: 16px;
 font-weight: 600;
 line-height: 1.5;
 text-align: center;
 text-decoration: none;
 
 /* Couleurs - Thème Clindoo */
 color: #ffffff;
 background-color: #4A90E2;
 border: 2px solid #4A90E2;
 
 /* Bordures */
 border-radius: 8px;
 
 /* Curseur */
 cursor: pointer;
 
 /* Transitions */
 transition: all 0.3s ease;
 
 /* Suppression styles par défaut */
 outline: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 
 /* ✅ CORRECTION : Centrage alternatif si pas de conteneur */
 margin: 24px auto 0 auto;
width: fit-content;
}

/* Hover */
.clindoo-submit-btn.jet-form-builder__action-button:hover:not(:disabled) {
 background-color: #3A7BC8;
 border-color: #3A7BC8;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

/* Active (clic) */
.clindoo-submit-btn.jet-form-builder__action-button:active:not(:disabled) {
 transform: translateY(0);
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

/* Focus (accessibilité) */
.clindoo-submit-btn.jet-form-builder__action-button:focus:not(:disabled) {
 outline: 3px solid rgba(74, 144, 226, 0.3);
 outline-offset: 2px;
}

/* ✅ État désactivé - TEXTE BLANC */
.clindoo-submit-btn.jet-form-builder__action-button:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 background-color: #7BB3F0; /* Bleu clair désactivé (au lieu de gris) */
 border-color: #7BB3F0;
 color: #ffffff; /* ✅ TEXTE BLANC (au lieu de gris) */
 transform: none;
 box-shadow: none;
}

.clindoo-submit-btn.jet-form-builder__action-button:disabled:hover {
 background-color: #7BB3F0;
 border-color: #7BB3F0;
 color: #ffffff; /* ✅ TEXTE BLANC même au hover */
 transform: none;
 box-shadow: none;
}

/* Icône SVG - couleur héritée du texte */
.clindoo-submit-btn .svg-inline--fa {
 width: 1em;
 height: 1em;
 vertical-align: -0.125em;
 fill: currentColor; /* Hérite la couleur du texte (blanc) */
 flex-shrink: 0;
}

.clindoo-submit-btn .fa-w-16 {
 width: 1em;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
 .clindoo-submit-btn.jet-form-builder__action-button {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
 }
}

/* Compatibilité avec les styles JetFormBuilder existants */
.jet-form-builder__submit.clindoo-submit-btn {
 background-color: #4A90E2 !important;
 border-color: #4A90E2 !important;
}

.jet-form-builder__submit.clindoo-submit-btn:hover:not(:disabled) {
 background-color: #3A7BC8 !important;
 border-color: #3A7BC8 !important;
}

/* ✅ IMPORTANT : Forcer le texte blanc quand désactivé */
.jet-form-builder__submit.clindoo-submit-btn:disabled {
 background-color: #7BB3F0 !important;
 border-color: #7BB3F0 !important;
 color: #ffffff !important;
}
/* === POPUP SÉLECTION D'IMAGES (cachée par défaut) === */

.clindoo-image-popup-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: -1;
 opacity: 0;
 transition: all 0.3s ease;
 padding: 24px;
}

.clindoo-image-popup-overlay.active {
 background: rgba(0, 0, 0, 0.5);
 z-index: 9999;
 opacity: 1;
}

.clindoo-image-popup {
 background: white;
 border-radius: 16px;
 width: 100%;
 max-width: 600px;
 max-height: 80vh;
 display: flex;
 flex-direction: column;
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 transform: scale(0.9);
 opacity: 0;
 transition: all 0.3s ease;
}

.clindoo-image-popup-overlay.active .clindoo-image-popup {
 transform: scale(1);
 opacity: 1;
}

/* Header popup */
.clindoo-popup-header {
 padding: 24px 24px 16px;
 border-bottom: 1px solid #e5e7eb;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-shrink: 0;
}

.clindoo-popup-title {
 font-size: 20px;
 font-weight: 700;
 color: #1f2937;
 display: flex;
 align-items: center;
 gap: 8px;
}



/* === ICɝNES FONT AWESOME POPUP === */

/* Icône dans le titre de la popup */
.clindoo-popup-title-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 background: #ffffff; /* Fond blanc */
 border-radius: 8px;
 color: #4A90E2; /* Icône bleue sur fond blanc */
 font-size: 16px;
 flex-shrink: 0;
}

.clindoo-popup-title-icon i {
 display: block;
 line-height: 1;
}

/* Section "À propos des types" */
.clindoo-popup-options-info {
 background: #f0f9ff;
 border: 1px solid #bfdbfe;
 border-radius: 12px;
 padding: 16px;
 margin-top: 16px;
 font-size: 13px;
 line-height: 1.6;
 color: #1e3a8a;
}

.clindoo-popup-options-info strong {
 display: block;
 margin-bottom: 4px;
 color: #1e40af;
}

.clindoo-popup-options-info strong:first-child {
 margin-bottom: 12px;
 font-size: 14px;
}

.clindoo-popup-options-info i {
 margin-right: 6px;
 font-size: 13px;
 color: #4A90E2;
}

/* === FIN ICɝNES FONT AWESOME POPUP === */

/* Corps popup */
.clindoo-popup-body {
 padding: 24px;
 overflow-y: auto;
 flex: 1;
 min-height: 0;
}

/* Étapes popup */
.clindoo-popup-step {
 display: none;
}

.clindoo-popup-step.active {
 display: block;
 animation: slideLeft 0.3s ease;
}

.clindoo-popup-description {
 font-size: 15px;
 color: #4b5563;
 margin-bottom: 20px;
 line-height: 1.5;
}


/* Champs popup */
.clindoo-popup-field-group {
 margin-bottom: 24px;
}

.clindoo-popup-field-label {
 font-size: 15px;
 font-weight: 600;
 color: #1f2937;
 margin-bottom: 8px;
 display: block;
}
.clindoo-popup-options-info {
 background: #f9fafb;
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 padding: 16px;
 margin-top: 16px;
 font-size: 14px;
 line-height: 1.6;
 color: #374151;
}

/* Titre principal "À propos des types" */
.clindoo-popup-options-info strong:first-child {
 display: block;
 margin-bottom: 12px;
 font-size: 13px;
 font-weight: 700;
 color: #1f2937;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

/* Sous-titres des types */
.clindoo-popup-options-info strong {
 font-weight: 600;
 color: #374151;
}
.clindoo-popup-select-wrapper {
 position: relative;
}

.clindoo-popup-select {
 width: 100%;
 padding: 12px 40px 12px 16px;
 font-size: 16px;
 color: #1f2937;
 background: white;
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 outline: none;
 cursor: pointer;
 appearance: none;
 transition: all 0.2s ease;
}

.clindoo-popup-select:hover {
 border-color: #d1d5db;
}

.clindoo-popup-select:focus {
 border-color: #3b82f6;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.clindoo-popup-select-icon {
 position: absolute;
 right: 16px;
 top: 50%;
 transform: translateY(-50%);
 pointer-events: none;
 color: #6b7280;
 font-size: 12px;
}

/* Sous-catégories dans popup */
.clindoo-popup-subcategories {
 display: flex;
 justify-content: center;
 margin-top: 16px;
}

.clindoo-popup-subcategories .subcategory-grid {
 display: grid;
 grid-template-columns: repeat(3, 120px);
 gap: 16px;
 justify-content: center;
 width: 100%;
}

.clindoo-popup-subcategories .subcategory-btn {
 width: 100%;
 max-width: 120px;
 margin: 0 auto;
}

.clindoo-popup-subcategories .subcategory-btn .icon {
 font-size: 40px;
}

.clindoo-popup-subcategories .subcategory-btn .label {
 font-size: 12px;
 line-height: 1.2;
}

/* Footer popup */
.clindoo-popup-footer {
 padding: 16px 24px;
 border-top: 1px solid #e5e7eb;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
 flex-shrink: 0;
}

.clindoo-popup-footer-left {
 margin-right: auto;
}

.clindoo-popup-previous,
.clindoo-popup-continue {
 padding: 10px 24px;
 border-radius: 10px;
 font-weight: 600;
 font-size: 14px;
 cursor: pointer;
 transition: all 0.2s ease;
}

.clindoo-popup-previous {
 border: 2px solid #e5e7eb;
 background: white;
 color: #6b7280;
}

.clindoo-popup-previous:hover {
 border-color: #d1d5db;
 background: #f9fafb;
}

.clindoo-popup-continue {
 border: none;
 background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
 color: white;
}

.clindoo-popup-continue:hover {
 background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.clindoo-popup-continue:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
 .card-content {
  padding: 24px;
 }
 
 .card-header-section {
  flex-direction: column;
  align-items: center;
  gap: 16px;
 }
 
 .task-image {
  width: 140px;
  height: 140px;
 }
 
 .task-summary {
  flex-wrap: wrap;
  gap: 16px;
 }
 
 .steps-in-card .jet-form-builder-repeater__row {
  padding: 16px;
  margin-left: 32px;
 }
 
 .steps-in-card .jet-form-builder-repeater__row::before {
  left: -32px;
  width: 28px;
  height: 28px;
  font-size: 12px;
 }
 
 .steps-in-card .step-subcategory-grid {
  grid-template-columns: repeat(3, 100px) !important;
  gap: 10px !important;
 }
 
 .steps-in-card .step-subcategory-btn {
  width: 100px !important;
  min-height: 85px !important;
 }
 
 .clindoo-popup-subcategories .subcategory-grid {
  grid-template-columns: repeat(3, 110px);
  gap: 12px;
 }
 
 .clindoo-image-popup-overlay.active {
  padding: 16px;
 }
}

@media (max-width: 640px) {
 .page-container {
  padding: 16px;
 }
 
 .clindoo-popup-body {
  padding: 20px;
 }
 
 .clindoo-popup-header,
 .clindoo-popup-footer {
  padding: 16px 20px;
 }
}

@media (max-width: 400px) {
 .steps-in-card .step-subcategory-grid,
 .clindoo-popup-subcategories .subcategory-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 10px !important;
 }
}

/* === ANIMATIONS === */

@keyframes slideInFromLeft {
 from {
  opacity: 0;
  transform: translateX(-20px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}

.steps-in-card .jet-form-builder-repeater__row {
 animation: slideInFromLeft 0.3s ease-out;
}

@keyframes slideLeft {
 from {
  opacity: 0;
  transform: translateX(10px);
 }
 to {
  opacity: 1;
  transform: translateX(0);
 }
}

@keyframes slideUp {
 from {
  opacity: 0;
  transform: translateY(20px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}
/* ============================================================================
  PATCH CSS - STYLES MANQUANTS POUR LA POPUP ET LES BOUTONS
  ============================================================================
  
  à€ AJOUTER à€ LA FIN de ton <style> existant
  
  ============================================================================ */

/* === BOUTONS SOUS-CATÉGORIES - STYLE CLINDOO (BASE) === */

.subcategory-btn {
 background: white;
 border: 2px solid #e2e8f0;
 border-radius: 12px;
 padding: 16px 12px;
 cursor: pointer;
 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 position: relative;
 overflow: hidden;
}

.subcategory-btn::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(74, 144, 226, 0) 0%, rgba(123, 179, 240, 0) 100%);
 transition: all 0.25s;
 opacity: 0;
}

.subcategory-btn:hover {
 border-color: #4A90E2;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 transform: translateY(-4px) scale(1.05);
 box-shadow: 0 8px 20px rgba(74, 144, 226, 0.2);
}

.subcategory-btn:hover::before {
 opacity: 1;
}

.subcategory-btn.active {
 border-color: #4A90E2;
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
 color: white;
 box-shadow: 0 8px 24px rgba(74, 144, 226, 0.35);
 transform: translateY(-2px);
}

.subcategory-btn .icon {
 font-size: 36px;
 color: #4A90E2;
 transition: all 0.25s;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.subcategory-btn:hover .icon {
 transform: scale(1.1);
 color: #2563eb;
}

.subcategory-btn.active .icon {
 color: white;
 transform: scale(1.15);
 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.subcategory-btn .label {
 font-size: 11px;
 font-weight: 600;
 color: #1a202c;
 line-height: 1.2;
 text-align: center;
 max-width: 100%;
 word-wrap: break-word;
}

.subcategory-btn:hover .label {
 color: #2563eb;
}

.subcategory-btn.active .label {
 color: white;
 font-weight: 700;
}

/* === BOUTONS DE LA POPUP - STYLE CLINDOO === */

/* Boutons Footer Popup */
.clindoo-popup-button {
 flex: 1;
 padding: 14px 28px;
 font-size: 16px;
 font-weight: 600;
 border-radius: 12px;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 position: relative;
 overflow: hidden;
 border: none;
}

.clindoo-popup-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition: left 0.6s;
}

.clindoo-popup-button:hover::before {
 left: 100%;
}

/* Bouton Annuler - VERSION FORCÉE */
.clindoo-popup-button-cancel {
 background: #FFE8D9 !important;
 background: linear-gradient(135deg, #FFF4ED 0%, #FFE8D9 100%) !important;
 color: #FF8C42 !important;
 border: 2px solid #FFD4B8 !important;
 font-weight: 600 !important;
}

.clindoo-popup-button-cancel::before {
 display: none !important;
}

.clindoo-popup-button-cancel:hover {
 background: #FFD4B8 !important;
 background: linear-gradient(135deg, #FFE8D9 0%, #FFD4B8 100%) !important;
 color: #F97316 !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3) !important;
}

/* Bouton Confirmer / Continuer */
.clindoo-popup-button-confirm,
.clindoo-popup-continue {
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%) !important;
 color: white !important;
 border: none !important;
}

.clindoo-popup-button-confirm:hover,
.clindoo-popup-continue:hover {
 background: linear-gradient(135deg, #3A7BD5 0%, #6AA2E0 100%) !important;
 transform: translateY(-3px) !important;
 box-shadow: 0 8px 24px rgba(74, 144, 226, 0.4) !important;
}

.clindoo-popup-button-confirm:active,
.clindoo-popup-continue:active {
 transform: translateY(-1px) !important;
}

.clindoo-popup-button-confirm:disabled,
.clindoo-popup-continue:disabled {
 background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%) !important;
 color: #f3f4f6 !important;
 cursor: not-allowed !important;
 transform: none !important;
 box-shadow: none !important;
}

/* Bouton Précédent */
.clindoo-popup-previous {
 background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
 border: 2px solid #e5e7eb !important;
 color: #6b7280 !important;
}

.clindoo-popup-previous:hover {
 background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
 border-color: #d1d5db !important;
 color: #374151 !important;
 transform: translateY(-2px) !important;
}

/* === BOUTON "OUVRIR LA GALERIE" === */

.clindoo-popup-gallery-button,
.open-gallery-button,
button[onclick*="openGallery"],
button[onclick*="gallerie"] {
 width: 100%;
 padding: 16px 24px;
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
 color: white;
 border: none;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3);
 position: relative;
 overflow: hidden;
}

.clindoo-popup-gallery-button::before,
.open-gallery-button::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
 transition: left 0.6s;
}

.clindoo-popup-gallery-button:hover::before,
.open-gallery-button:hover::before {
 left: 100%;
}

.clindoo-popup-gallery-button:hover,
.open-gallery-button:hover {
 background: linear-gradient(135deg, #3A7BD5 0%, #6AA2E0 100%);
 transform: translateY(-3px);
 box-shadow: 0 8px 24px rgba(74, 144, 226, 0.45);
}

.clindoo-popup-gallery-button:active,
.open-gallery-button:active {
 transform: translateY(-1px);
}

.clindoo-popup-gallery-button i,
.open-gallery-button i {
 font-size: 20px;
}

/* === STYLES COMPLÉMENTAIRES POPUP === */

/* S'assurer que les footers de popup ont le bon style */
.clindoo-popup-footer {
 padding: 20px 24px !important;
 display: flex !important;
 gap: 12px !important;
 border-top: 2px solid #f3f4f6 !important;
 background: #fafbfc !important;
}

/* Étapes de la popup */
.clindoo-popup-step-indicator {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 margin-bottom: 20px;
}

.clindoo-popup-step-dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #d1d5db;
 transition: all 0.3s;
}

.clindoo-popup-step-dot.active {
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
 width: 32px;
 border-radius: 5px;
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}
.clindoo-popup-step-dot.active {
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
 width: 32px;
 border-radius: 5px;
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* ============================================================================
  MASQUER LE BOUTON "AJOUTER UNE ÉTAPE" INTERNE DU REPEATER
  Le bouton principal bleu à  l'extérieur suffit
  ============================================================================ */

/* Masquer le bouton d'ajout natif de JetFormBuilder dans le side panel */
/* Masquer le bouton d'ajout UNIQUEMENT quand une étape a la classe is-expanded */
#clindooStepsPanel .jet-form-builder-repeater:has(.is-expanded) .jet-form-builder-repeater__actions {
  display: none !important;
}

#clindooStepsPanel .jet-form-builder-repeater:has(.is-expanded) > .jet-form-builder-repeater__add {
  display: none !important;
}
/* === NOTIFICATIONS D'ENREGISTREMENT === */

.clindoo-steps-notification {
 position: fixed;
 top: 20px;
 right: 20px;
 background: white;
 padding: 16px 20px;
 border-radius: 8px;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 z-index: 10000;
 transform: translateX(400px);
 opacity: 0;
 transition: all 0.3s ease;
 max-width: 400px;
}

.clindoo-steps-notification.show {
 transform: translateX(0);
 opacity: 1;
}

.clindoo-steps-notification-content {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 14px;
 font-weight: 500;
 color: #1f2937;
}

.clindoo-steps-notification-success {
 border-left: 4px solid #10b981;
}

.clindoo-steps-notification-success i {
 color: #10b981;
 font-size: 20px;
}

.clindoo-steps-notification-error {
 border-left: 4px solid #ef4444;
}

.clindoo-steps-notification-error i {
 color: #ef4444;
 font-size: 20px;
}

.clindoo-steps-notification-info {
 border-left: 4px solid #3b82f6;
}

.clindoo-steps-notification-info i {
 color: #3b82f6;
 font-size: 20px;
}
/* ============================================================================
  1️âģ BOUTON "AJOUTER UNE ÉTAPE" DU REPEATER
  Masqué uniquement quand une étape est en cours d'édition
  ============================================================================ */

/* Masquer le bouton quand une étape a la classe is-expanded */
#clindooStepsPanel .jet-form-builder-repeater:has(.is-expanded) .jet-form-builder-repeater__actions,
#clindooStepsPanel .jet-form-builder-repeater:has(.is-expanded) > .jet-form-builder-repeater__add,
#clindooStepsPanel .jet-form-builder-repeater:has(.is-expanded) button[type="button"].add-item {
  display: none !important;
}

/* Si le bouton est un sibling aprà¨s une étape ouverte */
#clindooStepsPanel .jet-form-builder-repeater__row.is-expanded ~ .jet-form-builder-repeater__actions {
  display: none !important;
}

/* ============================================================================
  2️âģ BOUTON "ENREGISTRER" DU FOOTER
  Visible uniquement quand une étape est en cours d'édition
  ============================================================================ */

/* Par défaut : masquer le bouton "Enregistrer" */
#clindooStepsPanel .panel-footer-btn-save {
  display: none;
}

/* Afficher le bouton uniquement quand une étape est ouverte (classe is-expanded) */
#clindooStepsPanel:has(.jet-form-builder-repeater__row.is-expanded) .panel-footer-btn-save {
  display: flex !important;
}

/* ============================================================================
  3️âģ AJUSTEMENT DU FOOTER
  Centrer le bouton Annuler quand Enregistrer est masqué
  ============================================================================ */

/* Quand le bouton Enregistrer est masqué, centrer le bouton Annuler */
#clindooStepsPanel .panel-footer {
  justify-content: center;
}

/* Quand une étape est ouverte, remettre les boutons de chaque côté */
#clindooStepsPanel:has(.jet-form-builder-repeater__row.is-expanded) .panel-footer {
  justify-content: space-between;
}

/* === 4️âģ TRANSITIONS FLUIDES (OPTIONNEL) === */

#clindooStepsPanel .panel-footer-btn-save {
  transition: all 0.3s ease;
}

#clindooStepsPanel .panel-footer {
  transition: justify-content 0.3s ease;
}

/* 
/* === RESPONSIVE === */

@media (max-width: 768px) {
 .subcategory-btn {
  padding: 14px 10px;
 }
 
 .subcategory-btn .icon {
  font-size: 32px;
 }
 
 .subcategory-btn .label {
  font-size: 10px;
 }
 
 .clindoo-popup-button {
  padding: 12px 20px;
  font-size: 14px;
 }
}

@media (max-width: 400px) {
 .subcategory-btn {
  padding: 12px 8px;
 }
 
 .subcategory-btn .icon {
  font-size: 28px;
 }
}
* ============================================================================
  FIX - EMPÊCHER LA PRÉSÉLECTION VISUELLE DE LA PREMIÈRE SOUS-CATÉGORIE
  ============================================================================
  
  PARTIE 1 : CSS à  ajouter
  PARTIE 2 : JavaScript à  ajouter
  
  ============================================================================ */

/* === PARTIE 1 : CSS === */

/* Annuler tout style de premier élément qui pourrait àªtre appliqué */
.subcategory-btn:first-child,
.clindoo-popup-subcategories .subcategory-btn:first-child,
.step-subcategory-btn:first-child {
 border-color: #e2e8f0 !important;
 background: white !important;
 color: inherit !important;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
 transform: none !important;
}

.subcategory-btn:first-child .icon,
.clindoo-popup-subcategories .subcategory-btn:first-child .icon,
.step-subcategory-btn:first-child .icon {
 color: #4A90E2 !important;
 transform: none !important;
}

.subcategory-btn:first-child .label,
.clindoo-popup-subcategories .subcategory-btn:first-child .label,
.step-subcategory-btn:first-child .label {
 color: #1a202c !important;
}

/* Seuls les éléments avec .active doivent avoir le style bleu */
.subcategory-btn:first-child.active,
.clindoo-popup-subcategories .subcategory-btn:first-child.active,
.step-subcategory-btn:first-child.active {
 border-color: #4A90E2 !important;
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%) !important;
 color: white !important;
 box-shadow: 0 8px 24px rgba(74, 144, 226, 0.35) !important;
 transform: translateY(-2px) !important;
}

.subcategory-btn:first-child.active .icon,
.clindoo-popup-subcategories .subcategory-btn:first-child.active .icon,
.step-subcategory-btn:first-child.active .icon {
 color: white !important;
 transform: scale(1.15) !important;
}

.subcategory-btn:first-child.active .label,
.clindoo-popup-subcategories .subcategory-btn:first-child.active .label,
.step-subcategory-btn:first-child.active .label {
 color: white !important;
}

/* S'assurer qu'aucun bouton n'a le style actif sans la classe .active */
.subcategory-btn:not(.active),
.step-subcategory-btn:not(.active) {
 border-color: #e2e8f0 !important;
 background: white !important;
}

.subcategory-btn:not(.active) .icon,
.step-subcategory-btn:not(.active) .icon {
 color: #4A90E2 !important;
}

.subcategory-btn:not(.active) .label,
.step-subcategory-btn:not(.active) .label {
 color: #1a202c !important;
}
/* === BOUTON FIXE "AJOUTER UNE ÉTAPE" DANS LA CARTE === */

.clindoo-add-step-button {
 background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
 color: white !important;
 border: none !important;
 padding: 14px 28px !important;
 border-radius: 10px !important;
 font-weight: 600 !important;
 font-size: 16px !important;
 cursor: pointer !important;
 transition: all 0.3s ease !important;
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 10px !important;
 margin-top: 20px !important;
 width: 100% !important;
 justify-content: center !important;
}

.clindoo-add-step-button:hover:not(:disabled) {
 transform: translateY(-2px) !important;
 box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

.clindoo-add-step-button:active {
 transform: translateY(0);
}
/* 🆕 État désactivé - Pas de hover ni d'interaction */
.clindoo-add-step-button:disabled,
.clindoo-add-step-button[disabled] {
 cursor: not-allowed !important;
 opacity: 0.5 !important;
}
.clindoo-add-step-button i,
.clindoo-add-step-button svg {
 font-size: 18px !important;
 width: 18px !important;
 height: 18px !important;
 color: white !important;
 fill: currentColor !important;
}

/* === POPUP ÉTAPES === */

.clindoo-steps-popup {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(5px);
 z-index: 999999;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 20px;
}

.clindoo-steps-popup.active {
 display: flex;
}

.clindoo-steps-popup-content {
 background: white;
 border-radius: 20px;
 max-width: 900px;
 width: 100%;
 max-height: 85vh;
 overflow: visible;       /* ← CHANGÉ : était overflow-y: auto */
 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 position: relative;
 padding: 0;           /* ← CHANGÉ : était 40px */
 animation: slideIn 0.3s ease-out;
 display: flex;          /* ← AJOUTÉ */
 flex-direction: column;     /* ← AJOUTÉ */
}

@keyframes slideIn {
 from {
  opacity: 0;
  transform: translateY(-30px);
 }
 to {
  opacity: 1;
  transform: translateY(0);
 }
}

.clindoo-steps-popup-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0;        /* ← CHANGÉ */
 padding: 40px 40px 20px 40px;  /* ← AJOUTÉ : restaure le padding */
 border-bottom: 2px solid #e5e7eb;
 flex-shrink: 0;         /* ← AJOUTÉ */
}

.clindoo-steps-popup-title {
 font-size: 28px;
 font-weight: 700;
 color: #1f2937;
 display: flex;
 align-items: center;
 gap: 12px;
}

.clindoo-steps-popup-title i {
 color: #3b82f6;
 font-size: 32px;
}

.clindoo-steps-popup-close {
 background: #f3f4f6;
 border: none;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
 font-size: 24px;
 color: #6b7280;
}

.clindoo-steps-popup-close:hover {
 background: #e5e7eb;
 color: #1f2937;
 transform: rotate(90deg);
}

.clindoo-steps-popup-body {
 margin-bottom: 0;        /* ← CHANGÉ */
 flex: 1;             /* ← AJOUTÉ : prend l'espace disponible */
 overflow-y: auto;        /* ← AJOUTÉ : le scroll est ICI maintenant */
 overflow-x: hidden;       /* ← AJOUTÉ */
 padding: 20px 40px;       /* ← AJOUTÉ : restaure le padding */
}

/* Footer de la popup */
.clindoo-steps-popup-footer {
 display: flex;
 justify-content: flex-end;
 gap: 12px;
 padding-top: 20px;
 border-top: 2px solid #e5e7eb;
}

.clindoo-popup-btn {
 padding: 12px 24px;
 border-radius: 8px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 border: none;
 font-size: 15px;
}

.clindoo-popup-btn-cancel {
 background: #f3f4f6;
 color: #6b7280;
}

.clindoo-popup-btn-cancel:hover {
 background: #e5e7eb;
 color: #1f2937;
}

.clindoo-popup-btn-save {
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.clindoo-popup-btn-save:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Styles du repeater dans la popup */
.clindoo-steps-popup .jet-form-builder-repeater {
 background: transparent;
 border: none;
 padding: 0;
 margin: 0;
}

.clindoo-steps-popup .jet-form-builder-repeater__row {
 background: #f9fafb;
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 16px;
 transition: all 0.2s ease;
}

.clindoo-steps-popup .jet-form-builder-repeater__row:hover {
 border-color: #3b82f6;
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.clindoo-steps-popup .jet-form-builder-repeater__new,
.clindoo-steps-popup .jet-form-builder-repeater__add {
 background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
 color: white !important;
 border: none !important;
 padding: 12px 24px !important;
 border-radius: 8px !important;
 font-weight: 600 !important;
 cursor: pointer !important;
 transition: all 0.2s ease !important;
 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
 display: inline-flex !important;
 align-items: center !important;
 gap: 8px !important;
 margin-top: 16px !important;
}

.clindoo-steps-popup .jet-form-builder-repeater__new:hover,
.clindoo-steps-popup .jet-form-builder-repeater__add:hover {
 transform: translateY(-2px) !important;
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}
/* === APERà‡U DES ÉTAPES DANS LA CARTE === */

.steps-preview {
 width: 100%;
}

.steps-preview-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 32px 20px;
 text-align: center;
 color: #6b7280;
}

.steps-preview-icon {
 font-size: 48px;
 color: #d1d5db;
 margin-bottom: 16px;
}

.steps-preview-text strong {
 display: block;
 font-size: 16px;
 color: #374151;
 margin-bottom: 8px;
}

.steps-preview-text p {
 font-size: 14px;
 color: #9ca3af;
 margin: 0;
}

/* Header de l'aperà§u */
.steps-preview-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 12px 16px;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
 border-radius: 8px;
 margin-bottom: 12px;
 font-weight: 600;
 color: #0369a1;
}

.steps-preview-header i {
 font-size: 18px;
}

/* Liste des étapes */
.steps-preview-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.step-preview-item {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px;
 background: white;
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 transition: all 0.2s ease;
}

.step-preview-item:hover {
 border-color: #3b82f6;
 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.step-preview-number {
 flex-shrink: 0;
 width: 28px;
 height: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
 color: white;
 border-radius: 50%;
 font-weight: 700;
 font-size: 14px;
}

.step-preview-content {
 flex: 1;
 display: flex;
 align-items: center;
 gap: 12px;
}

.step-preview-title {
 flex: 1;
 font-size: 14px;
 font-weight: 500;
 color: #1f2937;
 line-height: 1.4;
}

.step-preview-image {
 flex-shrink: 0;
 width: 40px;
 height: 40px;
 border-radius: 6px;
 overflow: hidden;
 border: 2px solid #e5e7eb;
}

.step-preview-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
/* Responsive */
@media (max-width: 768px) {
 .clindoo-steps-popup-content {
  padding: 24px;
  max-height: 90vh;
 }
 
 .clindoo-steps-popup-title {
  font-size: 22px;
 }
 
 .clindoo-steps-popup-footer {
  flex-direction: column;
 }
 
 .clindoo-popup-btn {
  width: 100%;
 }
}

/* ============================================================================
  SIDE PANEL CSS (PHASE 1)
  Styles pour le panneau latéral qui glisse depuis la droite
  ============================================================================ */

/* Icônes Font Awesome - Ajustements pour le side panel */
.panel-close-btn i {
 font-size: 18px;
}

.add-step-btn i {
 font-size: 18px;
}

.panel-footer-btn i {
 font-size: 16px;
}

.empty-state-icon i {
 font-size: 48px;
 color: #cbd5e1;
}

/* Overlay (fond semi-transparent) */
.clindoo-panel-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 9998;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
}

.clindoo-panel-overlay.active {
 opacity: 1;
 pointer-events: auto;
}

/* Side Panel principal */
.clindoo-side-panel {
 position: fixed;
 top: 0;
 right: 0;
 width: 500px;
 max-width: 90vw;
 height: 100vh;
 background: white;
 z-index: 9999;
 display: flex;
 flex-direction: column;
 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
 transform: translateX(100%);
 transition: transform 0.3s ease;
}

.clindoo-side-panel.active {
 transform: translateX(0);
}

/* Header du panel */
.panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 24px;
 background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
 color: white;
 flex-shrink: 0;
}

.panel-title {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 18px;
 font-weight: 600;
}

.panel-icon {
 font-size: 24px;
}

.panel-close-btn {
 width: 36px;
 height: 36px;
 background: rgba(255, 255, 255, 0.2);
 border: none;
 border-radius: 8px;
 color: white;
 font-size: 20px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
}

.panel-close-btn:hover {
 background: rgba(255, 255, 255, 0.3);
}

/* Body du panel (scrollable) */
.panel-body {
 flex: 1;
 overflow-y: auto;
 padding: 24px;
}

/* Liste des étapes dans le panel */
.steps-list-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 16px;
 padding-bottom: 12px;
 border-bottom: 2px solid #e5e7eb;
}

.steps-list-header h3 {
 font-size: 16px;
 font-weight: 600;
 color: #1f2937;
}

.steps-count {
 font-size: 14px;
 font-weight: 600;
 color: #3b82f6;
 background: #eff6ff;
 padding: 4px 12px;
 border-radius: 12px;
}

/* Bouton ajouter une étape */
.add-step-btn {
 width: 100%;
 padding: 14px;
 background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 color: white;
 border: none;
 border-radius: 10px;
 font-weight: 600;
 font-size: 15px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: all 0.2s ease;
 margin-top: 16px;
}

.add-step-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Footer du panel */
.panel-footer {
 position: sticky;       /* ← AJOUTÉ : sticky en bas */
 bottom: 0;           /* ← AJOUTÉ */
 z-index: 100;         /* ← AJOUTÉ */
 display: flex;
 gap: 12px;
 padding: 20px 24px;
 border-top: 1px solid #e5e7eb;
 background: #f9fafb;
 flex-shrink: 0;
 box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); /* ← AJOUTÉ : ombre en haut */
}

.panel-footer-btn {
 flex: 1;
 padding: 14px;
 border: none;
 border-radius: 10px;
 font-weight: 600;
 font-size: 15px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: all 0.2s ease;
}

/* ============================================================================
  BOUTON RETOUR/ANNULER - STYLES DIFFÉRENCIÉS
   ============================================================================ */

/* Style par défaut (Retour) - Neutre gris */
.panel-footer-btn-cancel {
 background: #f3f4f6;
 color: #6b7280;
 transition: all 0.3s ease;
}

.panel-footer-btn-cancel:hover {
 background: #e5e7eb;
 color: #4b5563;
}

/* Style mode Annuler - Accentué orange */
.panel-footer-btn-cancel.is-cancel-mode {
 background: #FFF4ED;
 color: #FF8C42;
 border: 2px solid #FFD4B8;
}

.panel-footer-btn-cancel.is-cancel-mode:hover {
 background: #FFE8D9;
 color: #F97316;
 border-color: #FF8C42;
 transform: translateY(-1px);
 box-shadow: 0 2px 6px rgba(255, 140, 66, 0.2);
}

.panel-footer-btn-cancel.is-cancel-mode i {
 animation: shake 0.5s ease-in-out;
}

/* Animation subtile pour l'icône en mode Annuler */
@keyframes shake {
 0%, 100% { transform: rotate(0deg); }
 25% { transform: rotate(-5deg); }
 75% { transform: rotate(5deg); }
}
/* ============================================================================
  SURCHARGE DES ÉTATS FOCUS/HOVER POUR ÉVITER LE CSS GÉNÉRAL
   ============================================================================ */

/* Mode Retour - États focus et hover sécurisés */
.panel-footer-btn-cancel:focus {
 background: #e5e7eb !important;
 color: #4b5563 !important;
 outline: none;
}

.panel-footer-btn-cancel:active {
 background: #d1d5db !important;
 color: #374151 !important;
}

/* Mode Annuler - États focus et hover sécurisés */
.panel-footer-btn-cancel.is-cancel-mode:focus {
 background: #FFE8D9 !important;
 color: #F97316 !important;
 border-color: #FF8C42 !important;
 outline: none;
}

.panel-footer-btn-cancel.is-cancel-mode:active {
 background: #FFD4B8 !important;
 color: #EA580C !important;
 border-color: #FF8C42 !important;
}

.panel-footer-btn-save {
 background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
 color: white;
}

.panel-footer-btn-save:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* États vides */
.panel-body .empty-state {
 padding: 60px 20px;
}

.panel-body .empty-state-icon {
 font-size: 64px;
}

/* Responsive */
@media (max-width: 768px) {
 .clindoo-side-panel {
  width: 100%;
  max-width: 100%;
 }
 
 .panel-body {
  padding: 16px;
 }
 
 .panel-footer {
  padding: 16px;
  gap: 10px;
 }
 
 .panel-footer-btn {
  padding: 12px;
  font-size: 14px;
 }
}
/* === PATCH - Masquer sous-catégories vides ou pour image personnalisée === */

/* Masquer les sous-catégories si elles n'ont pas de boutons */
.step-subcategory-section:not(.show),
.step-subcategory-section:empty,
.step-subcategory-grid:empty {
  display: none !important;
}

/* Masquer les sous-catégories si la grille n'a aucun bouton */
.step-subcategory-section:has(.step-subcategory-grid:empty) {
  display: none !important;
}

/* S'assurer que seules les sections avec la classe .show sont visibles */
.step-subcategory-section {
  display: none !important;
}

.step-subcategory-section.show {
  display: block !important;
}

/* Masquer si dans un repeater item qui a custom_step_clindoo sélectionné */
.jet-form-builder-repeater__row:has([name*="type_media"][value="custom_step_clindoo"]) .step-subcategory-section {
  display: none !important;
}
/* === EMPTY STATE - SIDE PANEL ÉTAPES === */

.empty-state-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  text-align: center;
  min-height: 400px;
  animation: fadeInUp 0.6s ease-out;
}

/* Masquer l'empty state quand il y a des étapes */
.empty-state-steps.hidden {
  display: none;
}

/* Icône principale */
.empty-state-icon {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
  animation: pulse 2s ease-in-out infinite;
  color: #4A90E2 !important; /* ✅ CLEF : color pour le SVG */
}

/* Cibler directement le SVG */
.empty-state-icon svg,
.empty-state-icon .svg-inline--fa {
  width: 56px !important;
  height: 56px !important;
  color: #4A90E2 !important;
  fill: #4A90E2 !important;
}

/* Cibler le path du SVG */
.empty-state-icon svg path,
.empty-state-icon .svg-inline--fa path {
  fill: #4A90E2 !important;
}

/* Si Font Awesome a généré un <i> à  la place */
.empty-state-icon i,
.empty-state-icon .fas,
.empty-state-icon .fa {
  font-size: 56px !important;
  color: #4A90E2 !important;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.25);
  }
}

/* Contenu texte */
.empty-state-content {
  margin-bottom: 32px;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.empty-state-text {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  max-width: 400px;
}

/* Features (petites icônes) */
.empty-state-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  align-items: flex-start;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #475569;
}

.feature-icon {
  color: #10b981;
  font-size: 16px;
}

/* Bouton CTA */
.empty-state-cta {
  width: 100%;
  max-width: 320px;
}

.empty-state-btn {
  width: 100%;
  padding: 16px 32px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.empty-state-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.empty-state-btn:active {
  transform: translateY(0);
}

.empty-state-btn i {
  font-size: 20px;
}

/* Animation d'entrée */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 600px) {
  .empty-state-steps {
    padding: 32px 20px;
    min-height: 350px;
  }
  
  .empty-state-icon {
    width: 100px;
    height: 100px;
  }
  
  .empty-state-icon i {
    font-size: 48px;
  }
  
  .empty-state-title {
    font-size: 20px;
  }
  
  .empty-state-text {
    font-size: 14px;
  }
  
  .empty-state-btn {
    padding: 14px 24px;
    font-size: 15px;
  }
}
/* === VUE COMPACTE DES ÉTAPES === */

.steps-compact-view {
  background: white;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  padding: 16px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.steps-compact-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f3f4f6;
}

.steps-compact-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #1f2937;
}

.steps-compact-title i {
  color: #4A90E2;
  font-size: 18px;
}

.steps-compact-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
  color: white;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  padding: 0 8px;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.steps-compact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Scrollbar */
.steps-compact-list::-webkit-scrollbar {
  width: 6px;
}

.steps-compact-list::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.steps-compact-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.steps-compact-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* État vide */
.steps-compact-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.steps-compact-empty-icon {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.steps-compact-empty-text {
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

/* Item d'étape compact */
.step-compact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.step-compact-item:hover {
  background: #f3f4f6;
  border-color: #4A90E2;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
  transform: translateX(2px);
}

/* État actif (étape en cours d'édition) */
.step-compact-item.active {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(123, 179, 240, 0.05) 100%);
  border-color: #4A90E2;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

.step-compact-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
  border-radius: 10px 0 0 10px;
}

/* Numéro de l'étape */
.step-compact-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

/* Image miniature */
.step-compact-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  border: 2px solid #e5e7eb;
}

.step-compact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-compact-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #9ca3af;
  font-size: 20px;
}

/* Contenu texte */
.step-compact-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-compact-title {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-compact-description {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icône "Modifier" */
.step-compact-edit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #4A90E2;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.step-compact-item:hover .step-compact-edit-icon {
  opacity: 1;
}

.step-compact-item.active .step-compact-edit-icon {
  background: #10B981;
  opacity: 1;
}

.step-compact-item.active .step-compact-edit-icon i::before {
  content: '\f00c'; /* Icône check */
}
/* ============================================================================
  ICà”NE SUPPRESSION (TRASH) - DERNIÈRE ÉTAPE UNIQUEMENT
  à€ ajouter aprà¨s la section .step-compact-edit-icon (ligne ~2698)
  ============================================================================ */

/* Container des actions (édition + suppression) */
.step-compact-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Icône suppression */
.step-compact-delete-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #EF4444;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.step-compact-delete-icon:hover {
  background: #DC2626;
  transform: scale(1.05);
}

.step-compact-delete-icon:active {
  transform: scale(0.95);
}

/* Desktop - Apparition au survol */
@media (min-width: 769px) {
  .step-compact-item:hover .step-compact-delete-icon {
    opacity: 1;
  }
}

/* Mobile - Toujours visible + Taille optimisée tactile */
@media (max-width: 768px) {
  .step-compact-edit-icon,
  .step-compact-delete-icon {
    opacity: 1 !important;
    width: 36px;
    height: 36px;
  }
  
  .step-compact-actions {
    gap: 6px;
  }
}
/* Animation d'apparition */
@keyframes slideInCompact {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-compact-item {
  animation: slideInCompact 0.3s ease-out;
}


/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  🔄 DRAG & DROP - STYLES OPTIMISÉS
  Version améliorée avec meilleur feedback visuel
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Poignée de drag - Plus visible et attrayante */
.step-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  color: #64748B; /* ← Plus foncé qu'avant */
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-right: 8px;
  border-radius: 8px;
  position: relative;
}

/* Points de la poignée (effet grip) */
.step-drag-handle::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 20px;
  background-image: 
    radial-gradient(circle, currentColor 1.5px, transparent 1.5px),
    radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 4px 6px;
  background-position: 0 0, 0 3px;
  background-repeat: repeat-y;
  opacity: 0.5;
}

.step-drag-handle:hover {
  color: #4A90E2;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(123, 179, 240, 0.05) 100%);
  transform: scale(1.05);
}

.step-drag-handle:hover::before {
  opacity: 1;
}

.step-drag-handle:active {
  cursor: grabbing;
  background: rgba(74, 144, 226, 0.15);
}

.step-drag-handle i {
  font-size: 18px;
  pointer-events: none;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  ÉTATS SORTABLE PENDANT LE DRAG
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Élément fantôme (position originale) */
.sortable-ghost {
  opacity: 0.3 !important;
  background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%) !important;
  border: 2px dashed #4A90E2 !important;
  transform: scale(0.98);
}

.sortable-ghost .step-compact-number,
.sortable-ghost .step-compact-image,
.sortable-ghost .step-compact-content,
.sortable-ghost .step-compact-actions {
  opacity: 0.4;
}

/* Élément sélectionné (au début du drag) */
.sortable-chosen {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.12) 0%, rgba(123, 179, 240, 0.08) 100%) !important;
  border-color: #4A90E2 !important;
  box-shadow: 
    0 8px 24px rgba(74, 144, 226, 0.25),
    0 0 0 3px rgba(74, 144, 226, 0.15) !important;
  transform: scale(1.03) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sortable-chosen .step-drag-handle {
  color: #4A90E2;
  background: rgba(74, 144, 226, 0.15);
}

/* Élément en cours de déplacement */
.sortable-drag {
  opacity: 1 !important;
  cursor: grabbing !important;
  background: white !important;
  border: 2px solid #4A90E2 !important;
  box-shadow: 
    0 12px 32px rgba(74, 144, 226, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.05) rotate(2deg) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999 !important;
}

.sortable-drag .step-drag-handle {
  color: #4A90E2;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  INDICATEUR DE ZONE DE DROP
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Animation de l'espace entre les items pendant le drag */
.step-compact-item {
  position: relative;
  transition: margin 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ligne indicatrice de position de drop */
.step-compact-list.sortable-drag-active .step-compact-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #4A90E2 20%, 
    #4A90E2 80%, 
    transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Active la ligne sur l'item avant la zone de drop */
.step-compact-list.sortable-drag-active .step-compact-item.sortable-ghost::after {
  opacity: 1;
  top: -8px;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  ANIMATIONS DE RÉORGANISATION
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Animation fluide lors du réordonnancement */
@keyframes dragMove {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.sortable-fallback {
  animation: dragMove 0.3s ease-in-out;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  MOBILE - OPTIMISATIONS TACTILES
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

@media (max-width: 768px) {
  /* Zone de touch plus grande */
  .step-drag-handle {
    width: 44px;
    margin-right: 6px;
  }
  
  .step-drag-handle i {
    font-size: 20px;
  }
  
  /* Feedback plus visible sur mobile */
  .sortable-chosen {
    transform: scale(1.04) !important;
    box-shadow: 
      0 12px 28px rgba(74, 144, 226, 0.3),
      0 0 0 4px rgba(74, 144, 226, 0.2) !important;
  }
  
  .sortable-drag {
    transform: scale(1.06) rotate(3deg) !important;
    box-shadow: 
      0 16px 36px rgba(74, 144, 226, 0.35),
      0 6px 20px rgba(0, 0, 0, 0.2) !important;
  }
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  ACCESSIBILITÉ - INDICATION POUR LECTEURS D'ÉCRAN
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

.step-drag-handle[aria-grabbed="true"] {
  background: rgba(74, 144, 226, 0.15);
}

/* Indicateur visuel focus pour navigation au clavier */
.step-drag-handle:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  AMÉLIORATION DU STEP-COMPACT-ITEM PENDANT LE DRAG
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Transition plus fluide pour les items */
.step-compact-item {
  transition: 
    all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s ease,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Amélioration du hover pour plus de contraste */
.step-compact-item:not(.sortable-chosen):not(.sortable-drag):hover {
  background: #F8FAFC;
  border-color: #7BB3F0;
  box-shadow: 
    0 6px 16px rgba(74, 144, 226, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateX(4px);
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  MICRO-ANIMATIONS POUR AMÉLIORER L'UX
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Pulse subtil sur la poignée pour indiquer qu'elle est draggable */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.step-compact-item:hover .step-drag-handle::before {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* Animation de "drop réussi" */
@keyframes dropSuccess {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.step-compact-item.drop-success {
  animation: dropSuccess 0.4s ease-out;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  CURSEURS PERSONNALISÉS
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Curseur grab amélioré */
.step-drag-handle {
  cursor: grab;
  cursor: -webkit-grab;
}

.step-drag-handle:active,
.sortable-drag .step-drag-handle,
.sortable-chosen .step-drag-handle {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  PERFORMANCE - GPU ACCELERATION
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

.sortable-chosen,
.sortable-drag,
.sortable-ghost {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* === MASQUER LE REPEATER PAR DÉFAUT (ACCORDÉON) === */

/* Masquer tous les rows du repeater par défaut */
.jet-form-builder-repeater__row {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transition: all 0.3s ease;
}

/* Afficher le row quand il est actif (en cours d'édition) */
.jet-form-builder-repeater__row.is-expanded {
  max-height: 2000px;
  opacity: 1;
  margin: 16px 0 !important;
  padding: 20px !important;
  border: 2px solid #4A90E2 !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15) !important;
}

/* Header du row en mode édition */
.jet-form-builder-repeater__row.is-expanded::before {
  content: '✏️ Édition en cours';
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4A90E2;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
  .steps-compact-list {
    max-height: 300px;
  }
  
  .step-compact-item {
    padding: 10px;
  }
  
  .step-compact-number {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .step-compact-image {
    width: 40px;
    height: 40px;
  }
}

/* Masquer la vue compacte quand aucune étape */
.steps-compact-view.hidden {
  display: none;
}

/* ============================================================================
  🆕 PANEL & REPEATER ÉLARGIS - VERSION OPTIMISÉE
  Consolidation des sections précédentes sans redondances
  ============================================================================ */

/* ============================================================================
  PANEL LATÉRAL ÉLARGI
  ============================================================================ */

.clindoo-side-panel {
  width: 800px !important;
  max-width: 90vw !important;
}

@media (min-width: 1400px) {
  .clindoo-side-panel {
    width: 900px !important;
  }
}

@media (max-width: 768px) {
  .clindoo-side-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================================
  REPEATER - CONTAINERS & STRUCTURE
  ============================================================================ */

/* Container principal du repeater */
.jet-form-builder-repeater,
.jet-form-builder-repeater__items {
  width: 100% !important;
  max-width: 100% !important;
}

/* Row du repeater (parent de tous les champs d'une étape) */
.jet-form-builder-repeater__row,
.jet-form-builder-repeater__row.is-expanded {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Row en mode édition (ouvert) - Style visuel amélioré */
.jet-form-builder-repeater__row.is-expanded {
  max-height: 2000px;
  opacity: 1;
  margin: 16px 0 !important;
  padding: 24px !important;
  border: 2px solid #4A90E2 !important;
  border-radius: 12px !important;
  background: #f9fafb !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15) !important;
}

/* Header du row en mode édition */
.jet-form-builder-repeater__row.is-expanded::before {
  content: '✏️ Édition en cours';
  display: block;
  width: 100% !important;
  font-size: 13px;
  font-weight: 600;
  color: #4A90E2;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #e5e7eb;
}

/* ============================================================================
  CHAMPS DU FORMULAIRE - LARGEUR FORCÉE
  ============================================================================ */

/* Row interne JetFormBuilder */
.jet-form-builder-repeater__row .jet-form-builder-row,
.jet-form-builder-repeater__row.is-expanded .jet-form-builder-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Wrapper de champ (contient label + input) */
.jet-form-builder-repeater__row .jet-form-builder__field-wrap,
.jet-form-builder-repeater__row.is-expanded .jet-form-builder__field-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Champs JetFormBuilder génériques */
.jet-form-builder-repeater__row .jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded .jet-form-builder__field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
}

/* ============================================================================
  INPUTS, TEXTAREAS, SELECTS - STYLE COMPLET
  ============================================================================ */

/* Force TOUS les inputs/textareas/selects à  100% */
.jet-form-builder-repeater__row input[type="text"],
.jet-form-builder-repeater__row input[type="number"],
.jet-form-builder-repeater__row input[type="url"],
.jet-form-builder-repeater__row input[type="email"],
.jet-form-builder-repeater__row input.jet-form-builder__field,
.jet-form-builder-repeater__row textarea,
.jet-form-builder-repeater__row textarea.jet-form-builder__field,
.jet-form-builder-repeater__row select,
.jet-form-builder-repeater__row select.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded input[type="text"],
.jet-form-builder-repeater__row.is-expanded input[type="number"],
.jet-form-builder-repeater__row.is-expanded input[type="url"],
.jet-form-builder-repeater__row.is-expanded input[type="email"],
.jet-form-builder-repeater__row.is-expanded input.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded textarea,
.jet-form-builder-repeater__row.is-expanded textarea.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded select,
.jet-form-builder-repeater__row.is-expanded select.jet-form-builder__field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Style visuel des inputs en mode édition (meilleure version) */
.jet-form-builder-repeater__row.is-expanded input.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded input[type="text"],
.jet-form-builder-repeater__row.is-expanded input[type="number"],
.jet-form-builder-repeater__row.is-expanded input[type="url"],
.jet-form-builder-repeater__row.is-expanded input[type="email"],
.jet-form-builder-repeater__row.is-expanded textarea.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded textarea,
.jet-form-builder-repeater__row.is-expanded select.jet-form-builder__field,
.jet-form-builder-repeater__row.is-expanded select {
  padding: 12px 16px !important;
  font-size: 15px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: white !important;
  transition: all 0.2s ease !important;
}

/* Focus state */
.jet-form-builder-repeater__row.is-expanded input:focus,
.jet-form-builder-repeater__row.is-expanded input.jet-form-builder__field:focus,
.jet-form-builder-repeater__row.is-expanded textarea:focus,
.jet-form-builder-repeater__row.is-expanded textarea.jet-form-builder__field:focus,
.jet-form-builder-repeater__row.is-expanded select:focus,
.jet-form-builder-repeater__row.is-expanded select.jet-form-builder__field:focus {
  border-color: #4A90E2 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
}

/* Textarea plus haute (meilleure version) */
.jet-form-builder-repeater__row.is-expanded textarea,
.jet-form-builder-repeater__row.is-expanded textarea.jet-form-builder__field {
  min-height: 120px !important;
}

/* ============================================================================
  LABELS
  ============================================================================ */

.jet-form-builder-repeater__row .jet-form-builder__label,
.jet-form-builder-repeater__row.is-expanded .jet-form-builder__label {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.jet-form-builder-repeater__row.is-expanded .jet-form-builder__label-text {
  font-weight: 600 !important;
  color: #1f2937 !important;
  font-size: 14px !important;
}

/* ============================================================================
  GRILLE DE SOUS-CATÉGORIES
  ============================================================================ */

.jet-form-builder-repeater__row.is-expanded .step-subcategory-grid,
.jet-form-builder-repeater__row.is-expanded .subcategory-grid {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
}

/* ============================================================================
  ANNULATION DES FLEX & LARGEURS LIMITÉES
  ============================================================================ */

/* Annule tous les flex qui pourraient limiter */
.jet-form-builder-repeater__row > *,
.jet-form-builder-repeater__row.is-expanded > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* ============================================================================
  RESPONSIVE
  ============================================================================ */

/* Desktop */
@media (min-width: 1200px) {
  .jet-form-builder-repeater__row.is-expanded {
    padding: 32px !important;
  }
  
  .jet-form-builder-repeater__row.is-expanded::before {
    font-size: 14px;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .jet-form-builder-repeater__row.is-expanded {
    padding: 16px !important;
    margin: 12px 0 !important;
  }
  
  .jet-form-builder-repeater__row.is-expanded::before {
    font-size: 12px;
    margin-bottom: 12px !important;
  }
  
  .jet-form-builder-repeater__row.is-expanded .step-subcategory-grid,
  .jet-form-builder-repeater__row.is-expanded .subcategory-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
  }
}
/* ════════════════════════════════════════════════════════════════
  ICà”NES D'ALERTE DANS TITRES
  ════════════════════════════════════════════════════════════════ */

.step-compact-title .fa-exclamation-triangle {
 color: #FF8C42; /* Orange Clindoo */
 margin-right: 6px;
 font-size: 0.9em;
}

.step-preview-title .fa-exclamation-triangle {
 color: #FF8C42; /* Orange Clindoo */
 margin-right: 6px;
 font-size: 0.9em;
}
/* === FIN PANEL & REPEATER ÉLARGIS === */
/* ===== RESPONSIVE MOBILE - 768px et moins ===== */
@media (max-width: 768px) {
  
  /* === BOUTON "GÉRER LES ÉTAPES" === */
  .clindoo-add-step-button,
  #clindooAddStepBtn {
    padding: 12px 20px !important;
    font-size: 14px !important;
    margin-top: 16px !important;
    gap: 8px !important;
  }
  
  .clindoo-add-step-button svg,
  #clindooAddStepBtn svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* === TASK SUMMARY - POLICE PLUS GRANDE === */
  .task-summary {
    gap: 10px !important;
    font-size: 14px !important; /* ← Augmenté de 12px à 14px */
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .summary-item {
    gap: 5px !important;
    min-width: auto !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .summary-icon {
    width: 18px !important; /* ← Augmenté de 16px à 18px */
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  
  .summary-icon i,
  .summary-icon svg {
    font-size: 16px !important; /* ← Augmenté de 14px à 16px */
  }
  
  /* === SELECT FRÉQUENCE - POLICE PLUS GRANDE === */
  .task-summary .summary-item select.summary-select,
  .task-summary select.summary-select,
  select.summary-select {
    max-width: 115px !important; /* ← Augmenté de 110px à 115px */
    min-width: auto !important;
    width: auto !important;
    font-size: 14px !important; /* ← Augmenté de 12px à 14px */
    font-family: inherit !important;
    padding: 5px 8px !important; /* ← Augmenté */
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background-color: white !important;
    flex-shrink: 1 !important;
    line-height: 1.2 !important;
    height: auto !important;
  }
  
  /* Texte dans les options */
  .task-summary .summary-item select.summary-select option,
  select.summary-select option {
    font-size: 14px !important; /* ← Augmenté de 12px à 14px */
  }
  
  /* Valeurs dans le summary */
  .summary-value {
    font-weight: 600 !important;
    font-size: 14px !important; /* ← Augmenté de 13px à 14px */
  }
}

/* ===== RESPONSIVE MOBILE - 480px et moins ===== */
@media (max-width: 480px) {
  
  /* === BOUTON "GÉRER LES ÉTAPES" === */
  .clindoo-add-step-button,
  #clindooAddStepBtn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin-top: 12px !important;
    gap: 6px !important;
    width: 100% !important;
  }
  
  .clindoo-add-step-button svg,
  #clindooAddStepBtn svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* === TASK SUMMARY - POLICE PLUS GRANDE === */
  .task-summary {
    gap: 8px !important;
    font-size: 13px !important; /* ← Augmenté de 11px à 13px */
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  
  .summary-item {
    gap: 4px !important;
    flex: 0 1 auto !important;
  }
  
  .summary-icon {
    width: 16px !important; /* ← Augmenté de 14px à 16px */
    height: 16px !important;
  }
  
  .summary-icon i,
  .summary-icon svg {
    font-size: 14px !important; /* ← Augmenté de 12px à 14px */
  }
  
  /* === SELECT FRÉQUENCE - POLICE PLUS GRANDE === */
  .task-summary .summary-item select.summary-select,
  .task-summary select.summary-select,
  select.summary-select {
    max-width: 100px !important; /* ← Augmenté de 90px à 100px */
    font-size: 13px !important; /* ← Augmenté de 11px à 13px */
    padding: 4px 6px !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
  }
  
  .task-summary .summary-item select.summary-select option,
  select.summary-select option {
    font-size: 13px !important; /* ← Augmenté de 11px à 13px */
  }
  
  /* Valeurs */
  .summary-value {
    font-size: 13px !important; /* ← Augmenté de 12px à 13px */
  }
}

/* ===== RESPONSIVE TRÈS PETIT ÉCRAN - 360px et moins ===== */
@media (max-width: 360px) {
  
  .task-summary {
    gap: 6px !important;
    font-size: 12px !important; /* ← Augmenté de 10px à 12px */
  }
  
  .summary-item {
    gap: 3px !important;
  }
  
  .summary-icon {
    width: 14px !important; /* ← Augmenté de 12px à 14px */
    height: 14px !important;
  }
  
  .summary-icon i,
  .summary-icon svg {
    font-size: 13px !important; /* ← Augmenté de 11px à 13px */
  }
  
  .task-summary .summary-item select.summary-select,
  .task-summary select.summary-select,
  select.summary-select {
    max-width: 88px !important; /* ← Augmenté de 80px à 88px */
    font-size: 12px !important; /* ← Augmenté de 10px à 12px */
    padding: 3px 4px !important;
  }
  
  .task-summary .summary-item select.summary-select option,
  select.summary-select option {
    font-size: 12px !important; /* ← Augmenté de 10px à 12px */
  }
  
  .summary-value {
    font-size: 12px !important; /* ← Augmenté de 11px à 12px */
  }
}

/* ============================================================================
  SECTION DE SÉCURITÉ - CENTRAGE FORCÉ DU BOUTON CLOSE
  Cette section utilise !important pour garantir que le centrage fonctionne
  même si d'autres styles tentent de l'écraser
  ============================================================================ */

/* Force absolue du centrage - À garder en dernier */
button.clindoo-popup-close {
 padding: 0 !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 line-height: 1 !important;
}

button.clindoo-popup-close i,
button.clindoo-popup-close .fas {
 margin: 0 !important;
 padding: 0 !important;
 line-height: 1 !important;
 display: block !important;
 text-align: center !important;
}
/* ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â
  SYSTÈME DE THÉMATIQUES ET SOUS-CATÉGORIES
  Ajouté le 13 novembre 2025
  Pour la sélection d'images par thématiques (Quotidien, Prendre soin, Santé)
  Réutilisable pour TÂCHE et ÉTAPES
  ═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â═Â */

/* Section thématiques */
.thematic-section {
  margin: var(--clindoo-space-lg) 0;
  padding: var(--clindoo-space-lg);
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: var(--clindoo-border-medium) solid #bae6fd;
  border-radius: var(--clindoo-radius-lg);
  animation: fadeInUp var(--clindoo-duration-base) var(--clindoo-ease-out);
}

.thematic-header {
  text-align: center;
  margin-bottom: var(--clindoo-space-lg);
}

.thematic-header h3 {
  margin: 0 0 var(--clindoo-space-sm) 0;
  font-size: var(--clindoo-font-lg);
  font-weight: var(--clindoo-font-semibold);
  color: #0c4a6e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clindoo-space-sm);
}

.thematic-header p {
  margin: 0;
  font-size: var(--clindoo-font-sm);
  color: var(--clindoo-text-secondary);
}

/* Grille des cartes thématiques */
.thematic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--clindoo-space-lg);
  margin-top: var(--clindoo-space-lg);
}

/* Carte thématique individuelle */
.thematic-card {
  background: var(--clindoo-bg-primary);
  border: var(--clindoo-border-medium) solid var(--clindoo-border-light);
  border-radius: var(--clindoo-radius-lg);
  padding: var(--clindoo-space-xl) var(--clindoo-space-lg);
  text-align: center;
  cursor: pointer;
  transition: var(--clindoo-transition-base);
  box-shadow: var(--clindoo-shadow-sm);
}

.thematic-card:hover {
  border-color: var(--clindoo-hygiene-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(74, 144, 226, 0.3);
}

.thematic-card.selected {
  border-color: var(--clindoo-success);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.thematic-icon {
  font-size: 48px;
  margin-bottom: var(--clindoo-space-md);
  line-height: 1;
}

.thematic-title {
  font-size: var(--clindoo-font-base);
  font-weight: var(--clindoo-font-semibold);
  color: var(--clindoo-text-primary);
  margin-bottom: var(--clindoo-space-sm);
}

.thematic-description {
  font-size: var(--clindoo-font-xs);
  color: var(--clindoo-text-secondary);
  margin-bottom: var(--clindoo-space-md);
  line-height: var(--clindoo-line-height-normal);
}

.thematic-count {
  font-size: var(--clindoo-font-xs);
  color: var(--clindoo-hygiene-primary);
  font-weight: var(--clindoo-font-medium);
  background: var(--clindoo-hygiene-bg);
  padding: 4px var(--clindoo-space-md);
  border-radius: var(--clindoo-radius-lg);
  display: inline-block;
}
/* ============================================================================
   🎨 ICÔNES FONT AWESOME THÉMATIQUES
   ============================================================================ */

/* Icônes : taille, display et transition */
.thematic-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.thematic-icon i {
  display: block;
  width: 100%;
}

/* Couleurs par thématique */
.thematic-card[data-thematic="home"] .thematic-icon {
  color: #4A90E2; /* Bleu - Quotidien */
}

.thematic-card[data-thematic="care"] .thematic-icon {
  color: #10B981; /* Vert - Prendre soin */
}

.thematic-card[data-thematic="health"] .thematic-icon {
  color: #EF4444; /* Rouge - Santé */
}

.thematic-card[data-thematic="other"] .thematic-icon {
  color: #6B7280; /* Gris - Autres */
}

/* Animation hover sur l'icône */
.thematic-card:hover .thematic-icon {
  transform: scale(1.15) rotate(5deg);
}

/* État sélectionné : icône plus visible */
.thematic-card.selected .thematic-icon {
  transform: scale(1.05);
}
/* Section sous-catégories */
.subcategory-section {
  margin: var(--clindoo-space-lg) 0;
  padding: var(--clindoo-space-lg);
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: var(--clindoo-border-medium) solid #fde047;
  border-radius: var(--clindoo-radius-lg);
  display: none;
  animation: fadeInUp var(--clindoo-duration-base) var(--clindoo-ease-out);
}

.subcategory-section.show {
  display: block;
}

.subcategory-header {
  text-align: center;
  margin-bottom: var(--clindoo-space-lg);
}

.subcategory-header h3 {
  margin: 0 0 var(--clindoo-space-sm) 0;
  font-size: var(--clindoo-font-lg);
  font-weight: var(--clindoo-font-semibold);
  color: #713f12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--clindoo-space-sm);
}

.subcategory-header p {
  margin: 0;
  font-size: var(--clindoo-font-sm);
  color: var(--clindoo-text-secondary);
}

/* Grille des boutons sous-catégories */
.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--clindoo-space-md);
}

/* Bouton sous-catégorie */
.subcategory-button {
  background: var(--clindoo-bg-primary);
  border: var(--clindoo-border-medium) solid var(--clindoo-border-light);
  border-radius: var(--clindoo-radius-md);
  padding: var(--clindoo-space-lg) var(--clindoo-space-md);
  text-align: center;
  cursor: pointer;
  transition: var(--clindoo-transition-fast);
  box-shadow: var(--clindoo-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--clindoo-space-sm);
  align-items: center;
}

.subcategory-button:hover {
  border-color: var(--clindoo-autonomie-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 140, 66, 0.3);
}

.subcategory-button.selected {
  border-color: var(--clindoo-success);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}



.subcategory-label {
  font-size: var(--clindoo-font-sm);
  font-weight: var(--clindoo-font-medium);
  color: var(--clindoo-text-primary);
  line-height: var(--clindoo-line-height-tight);
}
/* ============================================================================
   🎨 ICÔNES FONT AWESOME SOUS-CATÉGORIES
   ============================================================================ */

/* Icônes : taille, display et transition */
.subcategory-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.subcategory-icon  {
    display: block;
    width: 100%;
    font-size: 32px;
}

/* Couleurs par thématique */
/* Quotidien à la maison (bleu) */
.subcategory-button[data-subcategory-id="dents"] .subcategory-icon,
.subcategory-button[data-subcategory-id="mains"] .subcategory-icon,
.subcategory-button[data-subcategory-id="douche"] .subcategory-icon,
.subcategory-button[data-subcategory-id="toilettes-pipi"] .subcategory-icon,
.subcategory-button[data-subcategory-id="cheveux"] .subcategory-icon,
.subcategory-button[data-subcategory-id="serviette-douche"] .subcategory-icon,
.subcategory-button[data-subcategory-id="serviette-mains"] .subcategory-icon {
    color: #4A90E2; /* Bleu */
}

/* Prendre soin de soi (vert) */
.subcategory-button[data-subcategory-id="moucher"] .subcategory-icon,
.subcategory-button[data-subcategory-id="toilettes-selles"] .subcategory-icon,
.subcategory-button[data-subcategory-id="creme"] .subcategory-icon,
.subcategory-button[data-subcategory-id="ongles"] .subcategory-icon,
.subcategory-button[data-subcategory-id="deodorant"] .subcategory-icon,
.subcategory-button[data-subcategory-id="peau"] .subcategory-icon,
.subcategory-button[data-subcategory-id="menstruelle"] .subcategory-icon,
.subcategory-button[data-subcategory-id="raser"] .subcategory-icon {
    color: #10B981; /* Vert */
}

/* Santé & Rendez-vous (rouge) */
.subcategory-button[data-subcategory-id="medicament-quotidien"] .subcategory-icon,
.subcategory-button[data-subcategory-id="medicament-ponctuel"] .subcategory-icon,
.subcategory-button[data-subcategory-id="temperature"] .subcategory-icon,
.subcategory-button[data-subcategory-id="pansement"] .subcategory-icon,
.subcategory-button[data-subcategory-id="plaie"] .subcategory-icon,
.subcategory-button[data-subcategory-id="inhalateur"] .subcategory-icon,
.subcategory-button[data-subcategory-id="gouttes"] .subcategory-icon,
.subcategory-button[data-subcategory-id="docteur"] .subcategory-icon,
.subcategory-button[data-subcategory-id="dentiste"] .subcategory-icon,
.subcategory-button[data-subcategory-id="ophtalmo"] .subcategory-icon,
.subcategory-button[data-subcategory-id="orl"] .subcategory-icon,
.subcategory-button[data-subcategory-id="kine"] .subcategory-icon,
.subcategory-button[data-subcategory-id="orthophoniste"] .subcategory-icon,
.subcategory-button[data-subcategory-id="vaccin"] .subcategory-icon,
.subcategory-button[data-subcategory-id="prise-sang"] .subcategory-icon,
.subcategory-button[data-subcategory-id="radio"] .subcategory-icon {
    color: #EF4444; /* Rouge */
}

/* Animation hover sur l'icône */
.subcategory-button:hover .subcategory-icon {
    transform: scale(1.15) rotate(5deg);
}

/* État sélectionné : icône plus visible */
.subcategory-button.selected .subcategory-icon {
    transform: scale(1.05);
}
/* Bouton retour dans les sous-catégories */
.subcategory-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 12px;
  background: white;
  border: 2px solid var(--clindoo-border-medium);
  border-radius: var(--clindoo-radius-md);
  color: var(--clindoo-text-secondary);
  font-size: var(--clindoo-font-sm);
  font-weight: var(--clindoo-font-medium);
  cursor: pointer;
  transition: var(--clindoo-transition-fast);
  font-family: var(--clindoo-font-family);
}

.subcategory-back-btn:hover {
  background: var(--clindoo-hygiene-bg);
  border-color: var(--clindoo-hygiene-primary);
  color: var(--clindoo-hygiene-primary);
  transform: translateX(-2px);
}

.subcategory-back-btn:active {
  transform: translateX(-2px) scale(0.98);
}

.subcategory-back-btn i {
  font-size: 14px;
}
/* ============================================================================
   🎨 ICÔNES TYPES D'ILLUSTRATION
   ============================================================================ */

/* Taille et animation des icônes */
.type-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.type-icon i {
    display: block;
    width: 100%;
    font-size: 36px; /* Taille des icônes de type */
}

/* Couleurs par type */
.type-card[data-type="picto_task_clindoo"] .type-icon,
.type-card[data-type="picto_step_clindoo"] .type-icon {
    color: #4A90E2; /* Bleu - Picto */
}

.type-card[data-type="icon_task_clindoo"] .type-icon,
.type-card[data-type="icon_step_clindoo"] .type-icon {
    color: #10B981; /* Vert - Icône */
}

.type-card[data-type="custom_task_clindoo"] .type-icon,
.type-card[data-type="custom_step_clindoo"] .type-icon {
    color: #FF8C42; /* Orange - Personnalisé */
}

/* Animation hover */
.type-card:hover .type-icon {
    transform: scale(1.15) rotate(5deg);
}

/* État sélectionné */
.type-card.selected .type-icon {
    transform: scale(1.05);
}
/* Responsive mobile */
@media (max-width: 768px) {
  .subcategory-back-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: var(--clindoo-font-xs);
  }
}
/* Responsive pour les thématiques */
@media (max-width: 768px) {
  .thematic-grid {
    grid-template-columns: 1fr;
    gap: var(--clindoo-space-md);
  }
  
  .thematic-card {
    padding: var(--clindoo-space-lg) var(--clindoo-space-lg);
  }
  
  .thematic-icon {
    font-size: 40px;
  }
  
  .subcategory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--clindoo-space-sm);
  }
  
  .subcategory-button {
    padding: var(--clindoo-space-md) var(--clindoo-space-sm);
  }
  
  .subcategory-icon {
    font-size: 28px;
  }
  
  .subcategory-label {
    font-size: var(--clindoo-font-xs);
  }
}
/* ============================================================================
  POPUP SÉLECTION IMAGES - OPTIMISATIONS UX
  Ajouté le [DATE]
  ============================================================================ */

/* --------------------------------------------------------------------------
  1. CARTES TYPE D'ILLUSTRATION
  -------------------------------------------------------------------------- */

.clindoo-popup-type-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}

.clindoo-type-card {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Taille fixe pour cohérence - 3 cartes côte à côte */
  width: 120px;
  min-width: 100px;
  flex: 0 0 auto;
  /* Forcer l'empilement vertical du contenu */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.clindoo-type-card:hover {
 border-color: var(--color-primary-blue);
 background: #f0f9ff;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.clindoo-type-card[data-type="picto_task_clindoo"]:hover {
 border-color: var(--color-primary-blue);
 background: #ebf5ff;
}

.clindoo-type-card[data-type="icon_task_clindoo"]:hover {
 border-color: var(--color-green);
 background: #ecfdf5;
}

.clindoo-type-card[data-type="custom_task_clindoo"]:hover {
 border-color: var(--color-orange);
 background: #fff7ed;
}
/* Icône - taille réduite et centrée */
.clindoo-type-card .type-card-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
}

/* Titre - compact */
.clindoo-type-card .type-card-title {
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
  line-height: 1.2;
  margin: 0;
}

/* Description - très compacte */
.clindoo-type-card .type-card-description {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
  margin: 0;
}

/* ===== RESPONSIVE - Petits écrans (popup étroit) ===== */
@media (max-width: 400px) {
  .clindoo-popup-type-cards {
    gap: 8px;
  }
  
  .clindoo-type-card {
    width: 95px;
    min-width: 85px;
    padding: 12px 8px;
  }
  
  .clindoo-type-card .type-card-icon {
    font-size: 26px;
  }
  
  .clindoo-type-card .type-card-title {
    font-size: 12px;
  }
  
  .clindoo-type-card .type-card-description {
    font-size: 10px;
  }
}
/* États sélectionnés des cartes de type - Couleurs par type */
.clindoo-type-card {
 position: relative; /* Nécessaire pour les badges ::after */
}

/* Variante PICTOGRAMME - Bleu */
.clindoo-type-card[data-type="picto_task_clindoo"].selected {
 border-color: #3b82f6 !important;
 background: #ebf5ff !important;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
 transform: translateY(-2px);
}

.clindoo-type-card[data-type="picto_task_clindoo"].selected::after {
 content: '✓';
 position: absolute;
 top: 12px;
 right: 12px;
 background: #3b82f6;
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 font-weight: bold;
 border: 2px solid white;
 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Variante ICÔNE - Vert */
.clindoo-type-card[data-type="icon_task_clindoo"].selected {
 border-color: #10B981 !important;
 background: #ecfdf5 !important;
 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
 transform: translateY(-2px);
}

.clindoo-type-card[data-type="icon_task_clindoo"].selected::after {
 content: '✓';
 position: absolute;
 top: 12px;
 right: 12px;
 background: #10B981;
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 font-weight: bold;
 border: 2px solid white;
 box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Variante IMAGE PERSONNALISÉE - Orange */
.clindoo-type-card[data-type="custom_task_clindoo"].selected {
 border-color: #FF8C42 !important;
 background: #fff7ed !important;
 box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2) !important;
 transform: translateY(-2px);
}

.clindoo-type-card[data-type="custom_task_clindoo"].selected::after {
 content: '✓';
 position: absolute;
 top: 12px;
 right: 12px;
 background: #FF8C42;
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 font-weight: bold;
 border: 2px solid white;
 box-shadow: 0 2px 8px rgba(255, 140, 66, 0.3);
}

.type-card-icon {
 font-size: 48px;
 margin-bottom: 12px;
 line-height: 1;
}

.type-card-title {
 font-weight: 600;
 font-size: 16px;
 color: #1f2937;
 margin-bottom: 8px;
}

.type-card-description {
 font-size: 13px;
 color: #6b7280;
 line-height: 1.4;
}
/* Styles Font Awesome pour icônes de la popup */
.type-card-icon i {
    display: block;
    width: 100%;
    font-size: 36px;
}

/* Couleurs des icônes par type dans la popup */
.clindoo-type-card[data-type="picto_task_clindoo"] .type-card-icon,
.clindoo-type-card[data-type="picto_step_clindoo"] .type-card-icon {
    color: #4A90E2; /* Bleu - Picto */
}

.clindoo-type-card[data-type="icon_task_clindoo"] .type-card-icon,
.clindoo-type-card[data-type="icon_step_clindoo"] .type-card-icon {
    color: #10B981; /* Vert - Icône */
}

.clindoo-type-card[data-type="custom_task_clindoo"] .type-card-icon,
.clindoo-type-card[data-type="custom_step_clindoo"] .type-card-icon {
    color: #FF8C42; /* Orange - Personnalisé */
}

/* Animation hover sur l'icône */
.clindoo-type-card:hover .type-card-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* --------------------------------------------------------------------------
  2. BARRE DE PROGRESSION
  -------------------------------------------------------------------------- */

.clindoo-popup-progress {
 padding: 20px 32px 16px;
 background: #f9fafb;
 border-bottom: 1px solid #e5e7eb;
}

.progress-steps {
 display: flex;
 justify-content: space-between;
 margin-bottom: 12px;
 position: relative;
}

.progress-steps::before {
 content: '';
 position: absolute;
 top: 16px;
 left: 10%;
 right: 10%;
 height: 2px;
 background: #e5e7eb;
 z-index: 0;
}

.progress-step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 position: relative;
 z-index: 1;
 flex: 1;
}

.progress-step-circle {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: white;
 border: 2px solid #e5e7eb;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 font-size: 14px;
 color: #9ca3af;
 transition: all 0.3s ease;
}

.progress-step.active .progress-step-circle {
 background: var(--color-primary-blue);
 border-color: var(--color-primary-blue);
 color: white;
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
 transform: scale(1.1);
}

.progress-step.completed .progress-step-circle {
 background: var(--color-green);
 border-color: var(--color-green);
 color: white;
}

.progress-step-label {
 font-size: 11px;
 color: #9ca3af;
 font-weight: 500;
 text-align: center;
 transition: all 0.3s ease;
}

.progress-step.active .progress-step-label {
 color: var(--color-primary-blue);
 font-weight: 600;
}

.progress-step.completed .progress-step-label {
 color: var(--color-green);
}

.progress-bar-container {
 width: 100%;
 height: 4px;
 background: #e5e7eb;
 border-radius: 2px;
 overflow: hidden;
}

.progress-bar {
 height: 100%;
 background: linear-gradient(90deg, var(--color-primary-blue) 0%, var(--color-green) 100%);
 border-radius: 2px;
 transition: width 0.4s ease;
 width: 0%;
}

/* --------------------------------------------------------------------------
  3. FEEDBACK VISUEL SÉLECTION
  -------------------------------------------------------------------------- */

.thematic-card.selecting {
 transform: scale(1.05);
 border-color: var(--color-green) !important;
 background: #ecfdf5;
 box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.subcategory-button.selecting {
 transform: scale(1.05);
 border-color: var(--color-green) !important;
 background: #ecfdf5;
 box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.clindoo-type-card.selecting {
 transform: translateY(-4px) scale(1.02);
 border-color: var(--color-green) !important;
 background: #ecfdf5;
 box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
}

/* --------------------------------------------------------------------------
  BOUTONS POPUP - RETOUR ET FERMER (VERSION COMPLÈTE)
  -------------------------------------------------------------------------- */

/* === BOUTON RETOUR (←) === */
.clindoo-popup-back {
 min-width: 44px;
 height: 44px;
 background: #ffffff;
 border: 2px solid #e5e7eb;
 border-radius: 10px;
 color: #6b7280;
 font-size: 20px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
 font-weight: 600;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 padding: 0;
 margin: 0;
 flex-shrink: 0;
 line-height: 1;
}

.clindoo-popup-back:hover {
 background: #f3f4f6;
 border-color: #4A90E2;
 color: #4A90E2;
 transform: translateX(-2px);
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

.clindoo-popup-back:active {
 transform: translateX(-2px) scale(0.95);
}

/* === BOUTON FERMER (É”) === */
.clindoo-popup-close {
 min-width: 44px;
 height: 44px;
 background: #ffffff;
 border: 2px solid #e5e7eb;
 border-radius: 10px;
 color: #6b7280;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s ease;
 padding: 0;
 margin: 0;
 flex-shrink: 0;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.clindoo-popup-close:hover {
 background: #fef2f2;
 border-color: #ef4444;
 color: #ef4444;
 transform: scale(1.05);
 box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.clindoo-popup-close:active {
 transform: scale(0.95);
}

/* Icône SVG dans le bouton fermer */
.clindoo-popup-close svg {
 width: 18px;
 height: 18px;
 transition: transform 0.2s ease;
}

.clindoo-popup-close:hover svg {
 transform: rotate(90deg);
}

/* Support des icônes Font Awesome */
.clindoo-popup-close i,
.clindoo-popup-close .fas,
.clindoo-popup-close .fa {
 font-size: 16px;
 line-height: 1;
 display: block;
 margin: 0;
 padding: 0;
 width: 16px;
 height: 16px;
 text-align: center;
 transition: transform 0.2s ease;
}

.clindoo-popup-close:hover i,
.clindoo-popup-close:hover .fas,
.clindoo-popup-close:hover .fa {
 transform: rotate(90deg);
}

/* Responsive mobile */
@media (max-width: 768px) {
 .clindoo-popup-back,
 .clindoo-popup-close {
  min-width: 40px;
  height: 40px;
 }
 
 .clindoo-popup-back {
  font-size: 18px;
 }
 
 .clindoo-popup-close svg {
  width: 16px;
  height: 16px;
 }
 
 .clindoo-popup-close i,
 .clindoo-popup-close .fas,
 .clindoo-popup-close .fa {
  font-size: 14px;
 }
}
/* ═══════════════════════════════════════════════════════════════════════
  CARTES DE TYPE POUR LES ÉTAPES (optimisation UX)
  Ajouté le 18 novembre 2025
    ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   CONTAINER PRINCIPAL - SECTION CARTES DE TYPE
   ═══════════════════════════════════════════════════════════════════════ */

/* Layout principal de la section */
.step-type-cards-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Header de la section type */
.step-type-cards-section .step-type-cards-header {
  flex-shrink: 0 !important;
  width: 100% !important;
}

/* Grille des cartes dans la section */
.step-type-cards-section .step-type-cards-grid {
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Section principale des cartes de type étapes */
.clindoo-step-type-cards {
 margin: 16px 0;
 padding: 20px;
 background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
 border: 1px solid #e2e8f0;
 border-radius: 12px;
}

/* Grille des cartes */
.step-type-cards-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
}

/* Carte individuelle */
.clindoo-step-type-card {
 background: white;
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 padding: 20px 12px;
 text-align: center;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
}

.clindoo-step-type-card:hover {
 border-color: var(--clindoo-hygiene-primary);
 background: #f0f9ff;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

/* Couleurs spécifiques par type */
.clindoo-step-type-card[data-type="picto_step_clindoo"]:hover {
 border-color: var(--clindoo-hygiene-primary);
 background: #ebf5ff;
}

.clindoo-step-type-card[data-type="icon_step_clindoo"]:hover {
 border-color: var(--clindoo-success);
 background: #ecfdf5;
}

.clindoo-step-type-card[data-type="custom_step_clindoo"]:hover {
 border-color: var(--clindoo-autonomie-primary);
 background: #fff7ed;
}

/* Feedback visuel sélection avec animation */
.clindoo-step-type-card.selecting {
 transform: translateY(-4px) scale(1.02);
 border-color: var(--clindoo-success) !important;
 background: #ecfdf5;
 box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3);
 animation: cardPulse 0.4s ease;
}

@keyframes cardPulse {
 0% { transform: translateY(-4px) scale(1); }
 50% { transform: translateY(-4px) scale(1.05); }
 100% { transform: translateY(-4px) scale(1.02); }
}

/* Carte sélectionnée (état permanent) */
.clindoo-step-type-card.selected {
 border-color: var(--clindoo-success);
 background: #ecfdf5;
 box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.clindoo-step-type-card.selected::after {
    content: '\2713'; /* ✓ en unicode - LE PLUS SÛR */
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--clindoo-success);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

/* Éléments de la carte */
.clindoo-step-type-card .type-card-icon {
 font-size: 40px;
 margin-bottom: 10px;
 line-height: 1;
}

.clindoo-step-type-card .type-card-title {
 font-weight: 600;
 font-size: 14px;
 color: #1f2937;
 margin-bottom: 6px;
}

.clindoo-step-type-card .type-card-description {
 font-size: 12px;
 color: #6b7280;
 line-height: 1.4;
}
/* ============================================================================
   🎨 ICÔNES FONT AWESOME TYPES ÉTAPES
   ============================================================================ */

/* Styles Font Awesome pour icônes de types étapes */
.clindoo-step-type-card .type-card-icon i {
    display: block;
    width: 100%;
    font-size: 36px;
}

/* Couleurs des icônes par type dans les étapes */
.clindoo-step-type-card[data-type="picto_step_clindoo"] .type-card-icon {
    color: #4A90E2; /* Bleu - Picto */
}

.clindoo-step-type-card[data-type="icon_step_clindoo"] .type-card-icon {
    color: #10B981; /* Vert - Icône */
}

.clindoo-step-type-card[data-type="custom_step_clindoo"] .type-card-icon {
    color: #FF8C42; /* Orange - Personnalisé */
}

/* Animation hover sur l'icône */
.clindoo-step-type-card:hover .type-card-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Responsive mobile */
@media (max-width: 768px) {
 .step-type-cards-grid {
  grid-template-columns: 1fr;
  gap: 10px;
 }
 
 .clindoo-step-type-card {
  padding: 16px 12px;
 }
 
 .clindoo-step-type-card .type-card-icon {
  font-size: 36px;
 }
 
 .clindoo-step-type-card .type-card-title {
  font-size: 13px;
 }
 
 .clindoo-step-type-card .type-card-description {
  font-size: 11px;
 }
}

/* Tablette */
@media (min-width: 769px) and (max-width: 1024px) {
 .step-type-cards-grid {
  gap: 10px;
 }
 
 .clindoo-step-type-card {
  padding: 18px 12px;
 }
}
/* ═══════════════════════════════════════════════════════════════════════
  CORRECTION : Sous-catégories étapes - Style identique aux tâches
  Remplace les styles précédents
    ═══════════════════════════════════════════════════════════════════════ */

/* Boutons sous-catégories pour étapes - Style identique aux tâches */
.step-subcategory-section .subcategory-button {
 background: white;
 border: 2px solid #e2e8f0;
 border-radius: 12px;
 padding: 16px 12px !important;
 cursor: pointer;
 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 text-align: center;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 gap: 8px !important;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 position: relative;
 overflow: hidden;
 min-height: auto !important;
 width: 100% !important; /* ✨ CHANGÉ : 100% au lieu de auto */
 font-family: inherit;
}


.step-subcategory-section .subcategory-button::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(74, 144, 226, 0) 0%, rgba(123, 179, 240, 0) 100%);
 transition: all 0.25s;
 opacity: 0;
}

.step-subcategory-section .subcategory-button:hover {
 border-color: #4A90E2 !important;
 background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
 transform: translateY(-4px) scale(1.05) !important;
 box-shadow: 0 8px 20px rgba(74, 144, 226, 0.2) !important;
}

.step-subcategory-section .subcategory-button:hover::before {
 opacity: 1;
}

.step-subcategory-section .subcategory-button.active,
.step-subcategory-section .subcategory-button.selecting,
.step-subcategory-section .subcategory-button.selected {
 border-color: #4A90E2 !important;
 background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%) !important;
 color: white !important;
 box-shadow: 0 8px 24px rgba(74, 144, 226, 0.35) !important;
 transform: translateY(-2px) !important;
}

.step-subcategory-section .subcategory-button .icon {
 font-size: 36px;
 color: #4A90E2;
 transition: all 0.25s;
}

.step-subcategory-section .subcategory-button.active .icon,
.step-subcategory-section .subcategory-button.selecting .icon,
.step-subcategory-section .subcategory-button.selected .icon {
 color: white !important;
 transform: scale(1.15);
}

.step-subcategory-section .subcategory-button .label {
 font-size: 12px;
 font-weight: 600;
 color: #1a202c;
 line-height: 1.2;
 transition: all 0.25s;
}

.step-subcategory-section .subcategory-button.active .label,
.step-subcategory-section .subcategory-button.selecting .label,
.step-subcategory-section .subcategory-button.selected .label {
 color: white !important;
}

/* Grille responsive */
.step-subcategory-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* ✨ CHANGÉ : 130px au lieu de 110px */
 gap: 16px; /* ✨ CHANGÉ : 16px au lieu de 12px */
 /* ✨ ENLEVÉ : justify-items: center; */
}

@media (max-width: 768px) {
 .step-subcategory-grid {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
 }
 
 .step-subcategory-section .subcategory-button {
  padding: 14px 10px !important;
 }
 
 .step-subcategory-section .subcategory-button .icon {
  font-size: 32px;
 }
 
 .step-subcategory-section .subcategory-button .label {
  font-size: 11px;
 }
}
.step-thematic-section .thematic-header {
  display: flex;
  flex-direction: column; /* ✅ GARDER column pour titre + sous-titre */
  align-items: center; /* ✨ AJOUTÉ - Centre le contenu */
  justify-content: center; /* ✨ AJOUTÉ */
  gap: 8px;
  position: relative; /* ✨ AJOUTÉ - Important pour le bouton en absolute */
  text-align: center; /* ✨ AJOUTÉ */
}

.step-thematic-section .thematic-header button.clindoo-popup-back {
  /* align-self: flex-start; ❌ COMMENTER */
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
/* Boutons retour dans les sections étapes */
.step-subcategory-header,
.step-selector-header,
.step-thematics-header {
  display: flex;
  flex-direction: column; /* ✨ AJOUTÉ - Empiler titre + sous-titre */
  align-items: center;
  justify-content: center;
  gap: 8px; /* ✨ CHANGÉ : 8px comme les thématiques */
  margin-bottom: 12px;
  position: relative;
  text-align: center;
  padding: 24px 32px 20px; /* ✨ AJOUTÉ - Même padding que thématiques */
  background: #f9fafb; /* ✨ AJOUTÉ - Même fond que thématiques */
  border-bottom: 1px solid #e5e7eb; /* ✨ AJOUTÉ - Même bordure que thématiques */
}

.step-subcategory-header button.clindoo-popup-back,
.step-selector-header button.clindoo-popup-back,
.step-thematics-header button.clindoo-popup-back {
  flex-shrink: 0;
  position: absolute !important; /* ✨ AJOUTÉ - Sort du flux */
  left: 20px !important; /* ✨ AJOUTÉ - Positionné à gauche */
  top: 50% !important; /* ✨ AJOUTÉ - Centré verticalement */
  transform: translateY(-50%) !important; /* ✨ AJOUTÉ - Centrage vertical parfait */
}

.step-selector-header {
  flex-wrap: wrap;
  position: relative !important; /* ✨ Forcer */
  justify-content: center !important; /* ✨ Forcer */
}
/* ═══════════════════════════════════════════════════════════════════════
  CORRECTION : Centrage du bouton retour dans les sections étapes
    ═══════════════════════════════════════════════════════════════════════ */

/* Forcer le centrage parfait de la flèche */
.step-thematic-section .clindoo-popup-back,
.step-subcategory-section .clindoo-popup-back,
.step-image-selector .clindoo-popup-back {
  min-width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.step-thematic-section .clindoo-popup-back:hover,
.step-subcategory-section .clindoo-popup-back:hover,
.step-image-selector .clindoo-popup-back:hover {
  background: #f3f4f6;
  border-color: #4A90E2;
  color: #4A90E2;
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

.step-thematic-section .clindoo-popup-back:active,
.step-subcategory-section .clindoo-popup-back:active,
.step-image-selector .clindoo-popup-back:active {
  transform: translateX(-2px) scale(0.95);
}
/* ═══════════════════════════════════════════════════════════════════════
  MASQUER le bouton de suppression natif JetFormBuilder dans les étapes
  On utilise notre propre système de suppression personnalisé
    ═══════════════════════════════════════════════════════════════════════ */

/* Masquer le bouton × natif dans le repeater des étapes */
.jet-form-builder-repeater__remove {
  display: none !important;
}

/* Alternative plus spécifique si besoin (au cas où ça affecte d'autres repeaters) */
.jet-form-builder__field[data-name="etapes_task"] .jet-form-builder-repeater__remove,
[data-field-name*="etapes"] .jet-form-builder-repeater__remove {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
  BOUTON DE SUPPRESSION D'IMAGE DE TÂCHE - Version épurée et élégante
    ═══════════════════════════════════════════════════════════════════════ */

/* Container de l'image */
.task-image-wrapper {
  position: relative;
  display: inline-block;
}

/* Masquer l'overlay "Changer" quand une vraie image est présente */
/*.task-image-wrapper[data-is-default="false"]:hover .task-image-hover-overlay {
  display: none !important;
}*/

/* Bouton trash - Style épuré */
.task-image-delete {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #ef4444 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.7) !important;
  transition: all 0.2s ease !important;
  z-index: 50 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Afficher au hover */
.task-image-wrapper[data-is-default="false"]:hover .task-image-delete {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
}

/* Hover du bouton */
.task-image-delete:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Clic */
.task-image-delete:active {
  transform: scale(0.95);
}

/* Icône centrée */
.task-image-delete i {
  pointer-events: none;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Masquer sur placeholder */
.task-image-wrapper[data-is-default="true"] .task-image-delete {
  display: none !important;
}
/* Placeholder SVG pour image de tâche */
.task-image-placeholder-svg {
  width: 100% !important;
  height: 100% !important;
  transition: all 0.3s ease;
  display: block;
}

.task-image-wrapper:hover .task-image-placeholder-svg {
  transform: scale(1.05);
  opacity: 0.9;
}
/* ═══════════════════════════════════════════════════════════════════════
  PROGRESS BAR POUR LES ÉTAPES (style identique aux tâches)
  À ajouter à la fin de CSS_Global.css
  ═══════════════════════════════════════════════════════════════════════ */

.clindoo-step-progress {
 padding: 20px 32px 16px;
 background: #f9fafb;
 border-bottom: 1px solid #e5e7eb;
 margin: 0 0 16px 0;
}

.clindoo-step-progress .progress-steps {
 display: flex;
 justify-content: space-between;
 margin-bottom: 12px;
 position: relative;
}

.clindoo-step-progress .progress-steps::before {
 content: '';
 position: absolute;
 top: 16px;
 left: 10%;
 right: 10%;
 height: 2px;
 background: #e5e7eb;
 z-index: 0;
}

.clindoo-step-progress .progress-step {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 position: relative;
 z-index: 1;
 flex: 1;
}

.clindoo-step-progress .progress-step-circle {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: white;
 border: 2px solid #e5e7eb;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 font-size: 14px;
 color: #9ca3af;
 transition: all 0.3s ease;
}

.clindoo-step-progress .progress-step.active .progress-step-circle {
 background: var(--color-primary-blue, #4A90E2);
 border-color: var(--color-primary-blue, #4A90E2);
 color: white;
 box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
 transform: scale(1.1);
}

.clindoo-step-progress .progress-step.completed .progress-step-circle {
 background: var(--color-green, #10B981);
 border-color: var(--color-green, #10B981);
 color: white;
}

.clindoo-step-progress .progress-step-label {
 font-size: 11px;
 color: #9ca3af;
 font-weight: 500;
 text-align: center;
 transition: all 0.3s ease;
}

.clindoo-step-progress .progress-step.active .progress-step-label {
 color: var(--color-primary-blue, #4A90E2);
 font-weight: 600;
}

.clindoo-step-progress .progress-step.completed .progress-step-label {
 color: var(--color-green, #10B981);
}

.clindoo-step-progress .progress-bar-container {
 width: 100%;
 height: 4px;
 background: #e5e7eb;
 border-radius: 2px;
 overflow: hidden;
}

.clindoo-step-progress .progress-bar {
 height: 100%;
 background: linear-gradient(90deg, var(--color-primary-blue, #4A90E2) 0%, var(--color-green, #10B981) 100%);
 border-radius: 2px;
 transition: width 0.4s ease;
 width: 0%;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
 .clindoo-step-progress {
  padding: 16px 20px 12px;
 }
 
 .clindoo-step-progress .progress-step-circle {
  width: 28px;
  height: 28px;
  font-size: 12px;
 }
 
 .clindoo-step-progress .progress-step-label {
  font-size: 10px;
 }
}
/* ═══════════════════════════════════════════════════════════════════════
  HEADERS UNIFORMISÉS - Style identique pour tous les titres
  ═══════════════════════════════════════════════════════════════════════ */

/* Style de base pour tous les headers de sélection */
.step-type-cards-header,
.step-thematics-header,
.step-subcategory-header,
.clindoo-popup-header,
.step-selector-title,
[data-step-selector] > div:first-child {
  padding: 24px 32px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  text-align: center;
}

.step-type-cards-header h4,
.step-thematics-header h4,
.step-subcategory-header h4,
.clindoo-popup-header h4,.step-selector-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 24px !important; 
  font-weight: 700!important; 
  color: #0c4a6e !important; 
  margin: 0 0 8px 0!important; 
}

.step-type-cards-header p,
.step-thematics-header p,
.step-subcategory-header p,
.clindoo-popup-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

/* Icônes des headers */
.step-type-cards-header i,
.step-thematics-header i,
.step-subcategory-header i,
.clindoo-popup-header i,.step-selector-title i {
  font-size: 24px;
  color: #4A90E2;
}

/* SVG icons */
.step-type-cards-header svg,
.step-thematics-header svg,
.step-subcategory-header svg,
.clindoo-popup-header svg,.step-selector-title svg {
  width: 24px;
  height: 24px;
  color: #4A90E2;
}
/* ═══════════════════════════════════════════════════════════════════════
   VERSION 5.0 - CORRECTIONS SPÉCIFIQUES
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1️⃣ HEADERS UNIFORMISÉS - Tous les titres de sections
   ─────────────────────────────────────────────────────────────────────── */

/* Conteneur header unifié pour toutes les sections */
.step-type-cards-header,
.step-thematics-header, 
.step-subcategory-header,
.clindoo-popup-header,
.step-selector-title,
.clindoo-image-popup-header,
[data-step-selector] > div:first-child {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 32px 20px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    text-align: center !important;
    gap: 8px !important;
}

/* Titres centrés */
.step-type-cards-header h4,
.step-thematics-header h4,
.step-subcategory-header h4,
.clindoo-popup-header h4,
.step-selector-title,
.clindoo-image-popup-header h4 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0c4a6e !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
}

/* Sous-titres */
.step-type-cards-header p,
.step-thematics-header p,
.step-subcategory-header p,
.clindoo-popup-header p,
.clindoo-image-popup-header p {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* Icônes des headers */
.step-type-cards-header i,
.step-thematics-header i,
.step-subcategory-header i,
.clindoo-popup-header i,
.step-selector-title i,
.clindoo-image-popup-header i {
    font-size: 24px !important;
    color: #4A90E2 !important;
}

.step-type-cards-header svg,
.step-thematics-header svg,
.step-subcategory-header svg,
.clindoo-popup-header svg,
.step-selector-title svg,
.clindoo-image-popup-header svg {
    width: 24px !important;
    height: 24px !important;
    color: #4A90E2 !important;
}

/* Boutons retour - Position absolute à gauche */
.step-type-cards-header .clindoo-popup-back,
.step-thematics-header .clindoo-popup-back,
.step-subcategory-header .clindoo-popup-back,
.step-selector-header .clindoo-popup-back,
.clindoo-image-popup-header .clindoo-popup-back {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   2️⃣ RESPONSIVE MOBILE - Cartes de type empilées verticalement
   ─────────────────────────────────────────────────────────────────────── */

/* TÂCHES - Cartes de type dans la popup */
@media (max-width: 768px) {
    .clindoo-popup-type-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .clindoo-type-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        min-height: 120px !important;
    }
    
    .clindoo-type-card .type-card-icon {
        font-size: 42px !important;
        margin-bottom: 10px !important;
    }
    
    .clindoo-type-card .type-card-title {
        font-size: 16px !important;
    }
    
    .clindoo-type-card .type-card-description {
        font-size: 13px !important;
    }
}

/* ÉTAPES - Cartes de type dans le side panel */
@media (max-width: 768px) {
    .step-type-cards-grid,
    .clindoo-step-type-cards .step-type-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    /* Responsive pour step-type-cards-section */
.step-type-cards-section .step-type-cards-grid {
  padding: 16px !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.step-type-cards-section .step-type-cards-header {
  padding: 20px 16px 16px !important;
}

.step-type-cards-section .clindoo-popup-back {
  left: 12px !important;
  font-size: 20px !important;
  width: 36px !important;
  height: 36px !important;
}
    .clindoo-step-type-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        min-height: 120px !important;
    }
    
    .clindoo-step-type-card .type-card-icon {
        font-size: 42px !important;
        margin-bottom: 10px !important;
    }
    
    .clindoo-step-type-card .type-card-title {
        font-size: 16px !important;
    }
    
    .clindoo-step-type-card .type-card-description {
        font-size: 13px !important;
    }
}

/* Touch-friendly - Zones de clic plus grandes */
@media (max-width: 768px) {
    .clindoo-type-card,
    .clindoo-step-type-card {
        min-height: 100px !important;
        touch-action: manipulation !important;
    }
    
    /* Éviter les débordements */
    .clindoo-popup-type-cards,
    .step-type-cards-grid {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Mobile très petit (360px et moins) */
@media (max-width: 360px) {
    .clindoo-type-card,
    .clindoo-step-type-card {
        padding: 16px 12px !important;
        min-height: 90px !important;
    }
    
    .clindoo-type-card .type-card-icon,
    .clindoo-step-type-card .type-card-icon {
        font-size: 36px !important;
    }
    
    .clindoo-type-card .type-card-title,
    .clindoo-step-type-card .type-card-title {
        font-size: 14px !important;
    }
    
    .clindoo-type-card .type-card-description,
    .clindoo-step-type-card .type-card-description {
        font-size: 12px !important;
    }
}

/* Headers responsive */
@media (max-width: 768px) {
    .step-type-cards-header,
    .step-thematics-header,
    .step-subcategory-header,
    .clindoo-popup-header,
    .clindoo-image-popup-header {
        padding: 20px 24px 16px !important;
    }
    
    .step-type-cards-header h4,
    .step-thematics-header h4,
    .step-subcategory-header h4,
    .clindoo-popup-header h4,
    .clindoo-image-popup-header h4,
    .step-selector-title {
        font-size: 20px !important;
        gap: 10px !important;
    }
    
    .step-type-cards-header p,
    .step-thematics-header p,
    .step-subcategory-header p,
    .clindoo-popup-header p,
    .clindoo-image-popup-header p {
        font-size: 13px !important;
    }
    
    .step-type-cards-header .clindoo-popup-back,
    .step-thematics-header .clindoo-popup-back,
    .step-subcategory-header .clindoo-popup-back,
    .clindoo-image-popup-header .clindoo-popup-back {
        left: 16px !important;
        min-width: 40px !important;
        height: 40px !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PATCH v5.2 - TITRE VRAIMENT CENTRÉ (position absolute)
   Date : 21 novembre 2025
   
   Problème : Avec flex, le titre n'est pas visuellement centré
   Solution : Titre en position absolute centré, boutons en flex
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   HEADER POPUP - Layout corrigé avec titre centré absolu
   ───────────────────────────────────────────────────────────────────────── */

/* Container principal - Position relative pour le titre absolute */
.clindoo-image-popup .clindoo-popup-header,
.clindoo-popup-header {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    min-height: 80px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BOUTON RETOUR (gauche) - Flex normal
   ───────────────────────────────────────────────────────────────────────── */

.clindoo-popup-header .clindoo-popup-back {
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    min-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    color: #6b7280 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.clindoo-popup-header .clindoo-popup-back:hover {
    background: #f3f4f6 !important;
    border-color: #4A90E2 !important;
    color: #4A90E2 !important;
    transform: translateX(-2px) !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   TITRE (centre) - Position absolute pour centrage parfait
   ───────────────────────────────────────────────────────────────────────── */

.clindoo-popup-header .clindoo-popup-title,
.clindoo-popup-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    max-width: calc(100% - 120px) !important; /* Espace pour les boutons */
}

/* Icône du titre */
.clindoo-popup-title i,
.clindoo-popup-title svg,
.clindoo-popup-title .clindoo-popup-title-icon {
    font-size: 24px !important;
    color: #4A90E2 !important;
    flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BOUTON FERMER (droite) - Flex normal
   ───────────────────────────────────────────────────────────────────────── */

.clindoo-popup-header .clindoo-popup-close,
.clindoo-popup-close {
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    margin-right: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.clindoo-popup-close:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
}

/* Icône × */
.clindoo-popup-close i,
.clindoo-popup-close svg,
.clindoo-popup-close .fas,
.clindoo-popup-close .fa {
    font-size: 16px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 16px !important;
    height: 16px !important;
    text-align: center !important;
    transition: transform 0.2s ease !important;
}

.clindoo-popup-close:hover i,
.clindoo-popup-close:hover svg,
.clindoo-popup-close:hover .fas,
.clindoo-popup-close:hover .fa {
    transform: rotate(90deg) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE MOBILE
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .clindoo-popup-header {
        padding: 20px 16px !important;
        min-height: 70px !important;
    }
    
    .clindoo-popup-header .clindoo-popup-back,
    .clindoo-popup-header .clindoo-popup-close {
        min-width: 40px !important;
        height: 40px !important;
    }
    
    .clindoo-popup-title {
        font-size: 18px !important;
        gap: 10px !important;
        max-width: calc(100% - 100px) !important;
    }
    
    .clindoo-popup-title i,
    .clindoo-popup-title svg {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .clindoo-popup-header {
        padding: 16px 12px !important;
        min-height: 64px !important;
    }
    
    .clindoo-popup-header .clindoo-popup-back,
    .clindoo-popup-header .clindoo-popup-close {
        min-width: 36px !important;
        height: 36px !important;
    }
    
    .clindoo-popup-title {
        font-size: 16px !important;
        gap: 8px !important;
        max-width: calc(100% - 88px) !important;
    }
    
    .clindoo-popup-title i,
    .clindoo-popup-title svg {
        font-size: 18px !important;
    }
    
    .clindoo-popup-close i,
    .clindoo-popup-close svg {
        font-size: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   SÉCURITÉ - Annulation des règles précédentes
   ───────────────────────────────────────────────────────────────────────── */

/* Forcer le comportement voulu */
.clindoo-image-popup-header .clindoo-popup-back {
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.clindoo-image-popup-header .clindoo-popup-back:hover {
    transform: translateX(-2px) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PATCH v5.3 - MASQUER LA FLÈCHE DE RETOUR SUR LA PREMIÈRE ÉTAPE
   Date : 21 novembre 2025
   
   Problème : Bouton retour visible même sur "Type d'illustration"
   Solution : Masquer le bouton retour quand on est à l'étape 1
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   MASQUER LE BOUTON RETOUR SUR LA PREMIÈRE ÉTAPE
   ───────────────────────────────────────────────────────────────────────── */

/* Option 1 : Si tu ajoutes une classe .first-step au header */
.clindoo-popup-header.first-step .clindoo-popup-back,
.first-step .clindoo-popup-back {
    display: none !important;
}

/* Option 2 : Si tu utilises un attribut data-step="1" */
.clindoo-popup-header[data-step="1"] .clindoo-popup-back,
[data-step="1"] .clindoo-popup-back {
    display: none !important;
}

/* Option 3 : Si la progress bar indique l'étape 1 active */
.clindoo-popup-progress:has(.progress-step:first-child.active) ~ * .clindoo-popup-back {
    display: none !important;
}

/* Option 4 : Si seule l'étape Type est visible */
.clindoo-popup-step[data-step="type"].active ~ .clindoo-popup-footer .clindoo-popup-back {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   AJUSTEMENT DU HEADER QUAND PAS DE BOUTON RETOUR
   ───────────────────────────────────────────────────────────────────────── */

/* Le titre reste centré même sans bouton retour */
.clindoo-popup-header.first-step .clindoo-popup-title,
.clindoo-popup-header[data-step="1"] .clindoo-popup-title,
[data-step="1"] .clindoo-popup-title {
    /* Le centrage absolu fonctionne toujours parfaitement */
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE ALTERNATIF : BOUTON RETOUR DÉSACTIVÉ (au lieu de masqué)
   Si tu préfères afficher le bouton grisé au lieu de le masquer
   ───────────────────────────────────────────────────────────────────────── */

/*
.clindoo-popup-header.first-step .clindoo-popup-back,
.clindoo-popup-header[data-step="1"] .clindoo-popup-back {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
*/

/* ─────────────────────────────────────────────────────────────────────────
   SOLUTION JAVASCRIPT (à ajouter dans ton code JS)
   ───────────────────────────────────────────────────────────────────────── */

/*
// Ajouter cette logique dans ton JavaScript de navigation

function updateBackButton(currentStep) {
    const header = document.querySelector('.clindoo-popup-header');
    const backButton = document.querySelector('.clindoo-popup-back');
    
    if (currentStep === 1 || currentStep === 'type') {
        // Première étape : masquer le bouton
        header.classList.add('first-step');
        // ou
        header.setAttribute('data-step', '1');
    } else {
        // Autres étapes : afficher le bouton
        header.classList.remove('first-step');
        // ou
        header.setAttribute('data-step', currentStep);
    }
}

// Appeler lors du changement d'étape
updateBackButton(currentStepNumber);
*/

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE - Le comportement reste le même sur mobile
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .clindoo-popup-header.first-step .clindoo-popup-back,
    .clindoo-popup-header[data-step="1"] .clindoo-popup-back {
        display: none !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PATCH v5.4 - CORRECTION FLÈCHE RETOUR MOBILE (SIDE PANEL ÉTAPES)
   Date : 21 novembre 2025
   
   Problème : Flèche de retour en position absolute se superpose au contenu sur mobile
   Solution : Layout flex normal sur mobile, absolute seulement sur desktop
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   HEADERS DES SECTIONS ÉTAPES (side panel)
   ───────────────────────────────────────────────────────────────────────── */

/* Desktop - Layout avec position absolute (comme avant) */
@media (min-width: 769px) {
    .step-thematic-section .thematic-header,
    .step-subcategory-header,
    .step-selector-header,
    .step-thematics-header,
    .step-type-cards-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        position: relative !important;
        text-align: center !important;
        padding: 24px 32px 20px !important;
        background: #f9fafb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Bouton retour en position absolute sur desktop */
    .step-thematic-section .thematic-header .clindoo-popup-back,
    .step-subcategory-header .clindoo-popup-back,
    .step-selector-header .clindoo-popup-back,
    .step-thematics-header .clindoo-popup-back,
    .step-type-cards-header .clindoo-popup-back {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE - Layout flex horizontal (flèche + titre côte à côte)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    /* Headers - Layout flex horizontal */
    .step-thematic-section .thematic-header,
    .step-subcategory-header,
    .step-selector-header,
    .step-thematics-header,
    .step-type-cards-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        position: relative !important;
        padding: 16px 20px !important;
        background: #f9fafb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Bouton retour - Position relative (dans le flux) */
    .step-thematic-section .thematic-header .clindoo-popup-back,
    .step-subcategory-header .clindoo-popup-back,
    .step-selector-header .clindoo-popup-back,
    .step-thematics-header .clindoo-popup-back,
    .step-type-cards-header .clindoo-popup-back {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex-shrink: 0 !important;
        min-width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Titre - Aligné à gauche */
    .step-thematic-section .thematic-header h4,
    .step-subcategory-header h4,
    .step-selector-header h4,
    .step-thematics-header h4,
    .step-type-cards-header h4 {
        flex: 1 !important;
        text-align: left !important;
        font-size: 18px !important;
        margin: 0 !important;
    }
    
    /* Sous-titre - En dessous du titre */
    .step-thematic-section .thematic-header p,
    .step-subcategory-header p,
    .step-selector-header p,
    .step-thematics-header p,
    .step-type-cards-header p {
        display: none !important; /* Masquer sur mobile pour gagner de la place */
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE TRÈS PETIT (≤ 480px) - Layout encore plus compact
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .step-thematic-section .thematic-header,
    .step-subcategory-header,
    .step-selector-header,
    .step-thematics-header,
    .step-type-cards-header {
        padding: 12px 16px !important;
        gap: 10px !important;
    }
    
    .step-thematic-section .thematic-header .clindoo-popup-back,
    .step-subcategory-header .clindoo-popup-back,
    .step-selector-header .clindoo-popup-back,
    .step-thematics-header .clindoo-popup-back,
    .step-type-cards-header .clindoo-popup-back {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    
    .step-thematic-section .thematic-header h4,
    .step-subcategory-header h4,
    .step-selector-header h4,
    .step-thematics-header h4,
    .step-type-cards-header h4 {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE DU BOUTON RETOUR (commun à toutes les tailles)
   ───────────────────────────────────────────────────────────────────────── */

.step-thematic-section .clindoo-popup-back,
.step-subcategory-section .clindoo-popup-back,
.step-type-cards-section .clindoo-popup-back {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.step-thematic-section .clindoo-popup-back:hover,
.step-subcategory-section .clindoo-popup-back:hover,
.step-type-cards-section .clindoo-popup-back:hover {
    background: #f3f4f6 !important;
    border-color: #4A90E2 !important;
    color: #4A90E2 !important;
    transform: translateX(-2px) !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   SÉCURITÉ - Annuler les règles conflictuelles de la v5.3
   ───────────────────────────────────────────────────────────────────────── */

/* Sur mobile, annuler les positions absolute des versions précédentes */
@media (max-width: 768px) {
    .step-subcategory-header button.clindoo-popup-back,
    .step-selector-header button.clindoo-popup-back,
    .step-thematics-header button.clindoo-popup-back {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    
    .step-thematic-section .thematic-header button.clindoo-popup-back {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PATCH v5.6 - CORRECTIFS CIBLÉS (sans casser ce qui marche)
   Date : 21 novembre 2025
   
   Ce patch corrige UNIQUEMENT :
   1. Galerie : bouton à gauche (desktop et mobile)
   2. Galerie : icône + texte alignés
   3. Hover : pas de déplacement vertical
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   FIX 1 : GALERIE - Bouton retour à gauche (absolute)
   ───────────────────────────────────────────────────────────────────────── */

/* Container galerie */
.step-selector-header {
    position: relative !important;
    overflow: visible !important;
}

/* Desktop et Mobile - Bouton à gauche en absolute */
.step-selector-header button.clindoo-popup-back,
.step-selector-header > button.clindoo-popup-back {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
}

@media (max-width: 768px) {
    .step-selector-header button.clindoo-popup-back,
    .step-selector-header > button.clindoo-popup-back {
        left: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 2 : GALERIE - Icône et texte sur la même ligne
   ───────────────────────────────────────────────────────────────────────── */

/* Titre de la galerie - Icône et texte sur la même ligne */
.step-selector-title,
.step-selector-header .step-selector-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* L'icône SVG/Font Awesome */
.step-selector-title svg,
.step-selector-title i,
.step-selector-title .svg-inline--fa {
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Le texte */
.step-selector-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0c4a6e !important;
    text-align: center !important;
}

/* Mobile - Plus petit */
@media (max-width: 768px) {
    .step-selector-title {
        font-size: 18px !important;
        gap: 6px !important;
    }
    
    .step-selector-title svg,
    .step-selector-title i {
        font-size: 20px !important;
        width: 20px !important;
        height: 20px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIX 3 : HOVER - Pas de déplacement vertical pour boutons absolute
   ───────────────────────────────────────────────────────────────────────── */

.step-subcategory-header .clindoo-popup-back:hover,
.step-selector-header .clindoo-popup-back:hover,
.step-thematics-header .clindoo-popup-back:hover,
.step-type-cards-header .clindoo-popup-back:hover {
    transform: translateY(-50%) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   BADGE D'HÉRITAGE - Affiche la thématique/catégorie héritée de la tâche
   ═══════════════════════════════════════════════════════════════════════ */

.step-inheritance-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 16px 0 12px 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #0ea5e9;
    border-radius: 8px;
    font-size: 13px;
}

.inheritance-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.inheritance-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inheritance-label {
    font-size: 11px;
    font-weight: 500;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inheritance-value {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #0c4a6e;
    font-weight: 600;
}

.inheritance-thematic {
    color: #0369a1;
}

.inheritance-separator {
    color: #94a3b8;
    margin: 0 4px;
}

.inheritance-subcategory {
    color: #475569;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .step-inheritance-badge {
        padding: 10px 12px;
        margin: 12px 0 10px 0;
        font-size: 12px;
    }
    
    .inheritance-icon {
        font-size: 16px;
    }
    
    .inheritance-label {
        font-size: 10px;
    }
    
    .inheritance-value {
        font-size: 12px;
        flex-wrap: wrap;
    }
}
/* ============================================================================
   🔒 POPUP BLOCAGE MODIFICATION IMAGE
   ============================================================================ */

.clindoo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    backdrop-filter: blur(4px);
}

.clindoo-blocked-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clindoo-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.clindoo-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.clindoo-modal-content {
    padding: 24px;
    color: #4b5563;
    line-height: 1.6;
}

.clindoo-modal-content p {
    margin: 0 0 16px 0;
}

.clindoo-modal-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.clindoo-modal-content li {
    margin: 8px 0;
}

.clindoo-modal-content .info-message {
    background: #dbeafe;
    border-left: 4px solid #3b82f6;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0 0 0;
    font-size: 14px;
}

.clindoo-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.clindoo-btn-primary {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.clindoo-btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* ============================================================================
   IMAGES DANS LA GALERIE - Couleurs par type
   ============================================================================ */

/* Style de base des images */
.image-option {
 position: relative;
 aspect-ratio: 1/1;
 border: 2px solid #e2e8f0;
 border-radius: 10px;
 overflow: visible !important;
 cursor: pointer;
 transition: all 0.2s ease;
 background: white;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.image-option img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 8px;
 overflow: hidden;
}

.image-option:hover {
 border-color: #4A90E2;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
}

/* TYPE PICTOGRAMME - Bleu */
.image-option.selected[data-type="picto"],
.image-option.selected[data-task-type="picto_task_clindoo"] {
 border-color: #3b82f6 !important;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important;
 transform: translateY(-1px);
}

.image-option.selected[data-type="picto"]::after,
.image-option.selected[data-task-type="picto_task_clindoo"]::after {
 content: '✓';
 position: absolute;
 top: -8px;
 right: -8px;
 width: 28px;
 height: 28px;
 background: #3b82f6;
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 16px;
 box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
 border: 3px solid white;
 z-index: 10;
}

/* TYPE ICÔNE - Vert */
.image-option.selected[data-type="icon"],
.image-option.selected[data-task-type="icon_task_clindoo"] {
 border-color: #10B981 !important;
 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
 transform: translateY(-1px);
}

.image-option.selected[data-type="icon"]::after,
.image-option.selected[data-task-type="icon_task_clindoo"]::after {
 content: '✓';
 position: absolute;
 top: -8px;
 right: -8px;
 width: 28px;
 height: 28px;
 background: #10B981;
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 16px;
 box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
 border: 3px solid white;
 z-index: 10;
}

/* TYPE IMAGE PERSONNALISÉE - Orange */
.image-option.selected[data-type="custom"],
.image-option.selected[data-task-type="custom_task_clindoo"] {
 border-color: #FF8C42 !important;
 box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.3) !important;
 transform: translateY(-1px);
}

.image-option.selected[data-type="custom"]::after,
.image-option.selected[data-task-type="custom_task_clindoo"]::after {
 content: '✓';
 position: absolute;
 top: -8px;
 right: -8px;
 width: 28px;
 height: 28px;
 background: #FF8C42;
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 16px;
 box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4);
 border: 3px solid white;
 z-index: 10;
}

/* FALLBACK : Si pas d'attribut data-type, utiliser le vert par défaut */
.image-option.selected:not([data-type]):not([data-task-type]) {
 border-color: #10B981 !important;
 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
 transform: translateY(-1px);
}

.image-option.selected:not([data-type]):not([data-task-type])::after {
 content: '✓';
 position: absolute;
 top: -8px;
 right: -8px;
 width: 28px;
 height: 28px;
 background: #10B981;
 color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 16px;
 box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
 border: 3px solid white;
 z-index: 10;
}

.images-grid,
#taskImagesGrid {
 padding: 12px !important;
}
/* ============================================================================
   COULEURS DIFFÉRENCIÉES PAR TYPE POUR LES ÉTAPES
   À ajouter au fichier CSS_Global.css
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. NUMÉROS D'ÉTAPES - Couleurs selon le type
   -------------------------------------------------------------------------- */

/* PICTOGRAMME - Bleu */
.step-compact-item[data-step-type="picto_step_clindoo"] .step-compact-number {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* ICÔNE - Vert */
.step-compact-item[data-step-type="icon_step_clindoo"] .step-compact-number {
    background: linear-gradient(135deg, #10B981 0%, #34d399 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* IMAGE PERSONNALISÉE - Orange */
.step-compact-item[data-step-type="custom_step_clindoo"] .step-compact-number {
    background: linear-gradient(135deg, #FF8C42 0%, #ff9f5e 100%);
    box-shadow: 0 2px 6px rgba(255, 140, 66, 0.3);
}

/* --------------------------------------------------------------------------
   2. MINIATURES D'IMAGES - Bordures colorées + Badge ✓
   -------------------------------------------------------------------------- */

/* Position relative pour le badge */
.step-compact-image {
    position: relative;
    overflow: visible !important; /* Important pour que le badge ne soit pas coupé */
}

/* Badge ✓ sur les miniatures d'images */
.step-compact-image::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #4A90E2; /* Bleu par défaut */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid white;
    z-index: 10;
}

/* PICTOGRAMME - Bordure et badge bleu */
.step-compact-item[data-step-type="picto_step_clindoo"] .step-compact-image {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.step-compact-item[data-step-type="picto_step_clindoo"] .step-compact-image::after {
    background: #3b82f6;
}

/* ICÔNE - Bordure et badge vert */
.step-compact-item[data-step-type="icon_step_clindoo"] .step-compact-image {
    border: 2px solid #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.step-compact-item[data-step-type="icon_step_clindoo"] .step-compact-image::after {
    background: #10B981;
}

/* IMAGE PERSONNALISÉE - Bordure et badge orange */
.step-compact-item[data-step-type="custom_step_clindoo"] .step-compact-image {
    border: 2px solid #FF8C42;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.15);
}

.step-compact-item[data-step-type="custom_step_clindoo"] .step-compact-image::after {
    background: #FF8C42;
}

/* --------------------------------------------------------------------------
   3. ÉTAT HOVER - Renforcement des couleurs
   -------------------------------------------------------------------------- */

.step-compact-item[data-step-type="picto_step_clindoo"]:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.step-compact-item[data-step-type="icon_step_clindoo"]:hover {
    border-color: #10B981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.step-compact-item[data-step-type="custom_step_clindoo"]:hover {
    border-color: #FF8C42;
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.2);
}

/* --------------------------------------------------------------------------
   4. ÉTAT ACTIF (étape en cours d'édition)
   -------------------------------------------------------------------------- */

.step-compact-item[data-step-type="picto_step_clindoo"].active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.05) 100%);
    border-color: #3b82f6;
}

.step-compact-item[data-step-type="picto_step_clindoo"].active::before {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.step-compact-item[data-step-type="icon_step_clindoo"].active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.05) 100%);
    border-color: #10B981;
}

.step-compact-item[data-step-type="icon_step_clindoo"].active::before {
    background: linear-gradient(135deg, #10B981 0%, #34d399 100%);
}

.step-compact-item[data-step-type="custom_step_clindoo"].active {
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.1) 0%, rgba(255, 159, 94, 0.05) 100%);
    border-color: #FF8C42;
}

.step-compact-item[data-step-type="custom_step_clindoo"].active::before {
    background: linear-gradient(135deg, #FF8C42 0%, #ff9f5e 100%);
}

/* --------------------------------------------------------------------------
   5. FALLBACK - Si pas d'attribut data-step-type
   -------------------------------------------------------------------------- */

/* Si aucun type n'est défini, utiliser le bleu par défaut (comportement actuel) */
.step-compact-item:not([data-step-type]) .step-compact-number {
    background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.step-compact-item:not([data-step-type]) .step-compact-image {
    border: 2px solid #e5e7eb;
}

.step-compact-item:not([data-step-type]) .step-compact-image::after {
    background: #4A90E2;
}
/* Double icône pour certaines catégories */
.clindoo-dual-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.clindoo-dual-icon i:first-child {
    font-size: 0.9em;
    opacity: 0.7;
}

.clindoo-dual-icon i:last-child {
    font-size: 1em;
}

/* Pour les cartes de sous-catégories */
.subcategory-icon .clindoo-dual-icon i {
    display: inline-block;
}
/* ============================================================================
   CSS DASHBOARD CLINDOO - AMÉLIORATIONS V2
   ============================================================================
   Version corrigée pour le shortcode [clindoo_my_limits] existant
   À ajouter à ton CSS_Global.css
   ============================================================================ */

/* ============================================================================
   1. CONTENEUR PRINCIPAL
   ============================================================================ */

/* Fond de la page dashboard */
body.page-template-default,
.elementor-page {
    background: #F9FAFB !important;
}

/* Container principal avec max-width */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ============================================================================
   2. AMÉLIORATION WIDGET PMPRO (Infos utilisateur)
   ============================================================================ */

/* Badge "Formule Professionnelle" - Amélioration */
.pmpro_account-membership-levelname,
.membership-badge {
    background: linear-gradient(135deg, #374151 0%, #1F2937 100%) !important;
    color: white !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* Icône du badge */
.membership-badge::before {
    content: "⭐";
    font-size: 24px;
}

/* Section bienvenue - Style amélioré */
.pmpro_account-profile,
.welcome-section {
    background: white !important;
    padding: 25px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    margin-bottom: 25px !important;
}

/* Titre "Bienvenue" */
.pmpro_account-profile h2,
.welcome-title {
    color: #4A90E2 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

/* Infos utilisateur */
.pmpro_account-profile p {
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

/* Labels (Nom d'utilisateur, E-mail) */
.pmpro_account-profile strong {
    color: #1F2937 !important;
    font-weight: 600 !important;
}

/* ============================================================================
   3. AMÉLIORATION BOUTONS ACTIONS PMPRO
   ============================================================================ */

/* Container des boutons */
.pmpro_account-profile-action-links,
.action-buttons {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
}

/* Tous les boutons - Style uniforme */
.pmpro_account-profile-action-links a,
.pmpro_btn,
.action-button {
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    cursor: pointer !important;
}

/* Bouton primaire (bleu) */
.pmpro_btn-primary,
.action-button.primary {
    background: linear-gradient(135deg, #4A90E2, #357ABD) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
}

.pmpro_btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4) !important;
}

/* Bouton secondaire (gris) */
.pmpro_btn-secondary,
.action-button.secondary {
    background: #F3F4F6 !important;
    color: #4A90E2 !important;
    border: 2px solid #E5E7EB !important;
}

.pmpro_btn-secondary:hover {
    background: #E5E7EB !important;
    border-color: #4A90E2 !important;
}

/* Bouton déconnexion (rouge) */
.pmpro_btn-danger,
.action-button.danger {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.pmpro_btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}


/* ============================================================================
   5. AMÉLIORATION SHORTCODE [clindoo_my_limits]
   ============================================================================ */

/* Amélioration du container des cartes limites */
.clindoo-limits-inline {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}

/* Cartes limites - Amélioration design */
.clindoo-limit-inline-item {
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    transition: all 0.3s ease !important;
    flex: 1 1 auto !important;
    min-width: 280px !important;
    max-width: 450px !important;
}

/* Effet hover sur les cartes */
.clindoo-limit-inline-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(74, 144, 226, 0.15) !important;
    border-color: #CBD5E1 !important;
}

/* Icône - Amélioration taille et style */
.clindoo-limit-inline-icon {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #4A90E2, #7BB3F0) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
}

.clindoo-limit-inline-icon i,
.clindoo-limit-inline-icon svg {
    color: #FFFFFF !important;
    font-size: 28px !important;
}

/* Label (ENFANTS / TÂCHES) */
.clindoo-limit-inline-label {
    color: #6B7280 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Valeur principale (0 créé(s)) */
.clindoo-limit-inline-value {
    color: #1F2937 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
}

/* Badge Illimité/Limité */
.clindoo-limit-inline-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
}

/* Badge illimité (vert) */
.clindoo-limit-inline-badge.unlimited {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0) !important;
    color: #065F46 !important;
}

/* Badge limité (bleu) */
.clindoo-limit-inline-badge.limited {
    background: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important;
    color: #1D4ED8 !important;
}

.clindoo-limit-inline-badge i {
    font-size: 14px !important;
}

/* ============================================================================
   6. RESPONSIVE MOBILE
   ============================================================================ */

@media (max-width: 768px) {
    /* Container principal */
    .dashboard-container {
        padding: 15px !important;
    }
    
    /* Widget PMPro */
    .pmpro_account-profile {
        padding: 20px !important;
    }
    
    .pmpro_account-profile h2 {
        font-size: 20px !important;
    }
    
    /* Boutons en colonne sur mobile */
    .pmpro_account-profile-action-links,
    .action-buttons {
        flex-direction: column !important;
    }
    
    .pmpro_account-profile-action-links a,
    .action-button {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Header "Tableau de bord" */
    .elementor-widget-heading h2 {
        padding: 15px 20px !important;
        font-size: 20px !important;
    }
    
    /* Cartes limites empilées */
    .clindoo-limits-inline {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .clindoo-limit-inline-item {
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px !important;
    }
    
    /* Icône plus petite sur mobile */
    .clindoo-limit-inline-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .clindoo-limit-inline-icon i,
    .clindoo-limit-inline-icon svg {
        font-size: 24px !important;
    }
    
    /* Valeur plus petite */
    .clindoo-limit-inline-value {
        font-size: 28px !important;
    }
}

/* ============================================================================
   7. ANIMATIONS & TRANSITIONS
   ============================================================================ */

/* Animation au chargement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pmpro_account-profile,
.clindoo-limit-inline-item {
    animation: fadeInUp 0.6s ease-out !important;
}

/* Délais pour effet cascade */
.clindoo-limit-inline-item:nth-child(1) {
    animation-delay: 0.1s !important;
}

.clindoo-limit-inline-item:nth-child(2) {
    animation-delay: 0.2s !important;
}

/* Effet pulse sur l'icône au hover */
.clindoo-limit-inline-item:hover .clindoo-limit-inline-icon {
    animation: pulse 0.6s ease-in-out !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ============================================================================
   8. AJOUTS OPTIONNELS - Boutons d'action sur les cartes
   ============================================================================ */

/* Si tu veux ajouter des boutons d'action sur tes cartes limites plus tard */
.clindoo-limit-action-btn {
    width: 100% !important;
    margin-top: 15px !important;
    padding: 12px !important;
    background: #F3F4F6 !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #4A90E2 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.clindoo-limit-action-btn:hover {
    background: #4A90E2 !important;
    color: white !important;
    transform: translateY(-2px) !important;
}
/* Bordure carte tâche Clindoo */
.clindoo-card {
    border: 1px solid #E5E7EB;
    border-top: 4px solid #E5E7EB;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.clindoo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ============================================================================
   FIN DES STYLES
   ============================================================================ */