@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc; /* Gris clair pour le fond */
        }
        
        .rtl {
            direction: rtl;
            text-align: right;
        }
        
        .phase-header {
            cursor: pointer;
            transition: background-color 0.3s ease; /* Transition pour le survol */
        }
        
        .phase-header:hover {
            background-color: #e2e8f0; /* Gris plus foncé au survol */
        }
        
        .phase-content {
            max-height: 0;
            overflow: hidden;
            padding-left: 1rem; /* Horizontal padding from p-4 */
            padding-right: 1rem; /* Horizontal padding from p-4 */
            /* Vertical padding (top/bottom) will be 0 by default and animated */
            transition: max-height 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease;
        }
        
        .phase-content.active {
            max-height: 5000px; /* Hauteur suffisante pour le contenu développé */
            padding-top: 1rem; /* Vertical padding from p-4 */
            padding-bottom: 1rem; /* Vertical padding from p-4 */
        }
        
        .locked {
            pointer-events: none; /* Désactive les clics */
            opacity: 0.7; /* Réduit l'opacité pour indiquer le verrouillage */
        }
        
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
        
        textarea {
            resize: vertical; /* Permet le redimensionnement vertical des zones de texte */
            min-height: 60px;
        }
        
        .flag-icon {
            width: 1.5em;
            height: 1.5em;
            margin-right: 0.5em; /* Marge à droite pour l'icône de drapeau */
        }