/* --- Style global du Formulaire --- */
.form-container {
    max-width: 600px; /* Évite que le formulaire soit trop large et difficile à lire */
    margin: 30px auto; /* Centre le formulaire dans la page */
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    font-family: 'Roboto', sans-serif;
}
/* ==========================================================================
   FORMULAIRE GLOBAL & CONTENEUR
   ========================================================================== */



/* --- Titre du formulaire --- */
.form-container h2 {
    color: var(--color-text-dark);
    font-size: 24px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 12px;
}

/* ==========================================================================
   STRUCTURE DES CHAMPS & GRILLE
   ========================================================================== */

/* --- Groupes de champs simples --- */
.form-group {
    display: flex;
    flex-direction: column; /* Aligne le label au-dessus de l'input */
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Permet de mettre 2 champs sur la même ligne (ex: Date + Heure) --- */
.form-row-grid {
    display: flex;
    flex-direction: column;
    gap: 0; /* Le décalage est géré naturellement par le margin-bottom du .form-group */
    width: 100%;
}

/* --- Labels --- */
.form-group label {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-dark);
    margin-bottom: 6px;
}

/* ==========================================================================
   INPUTS, TEXTAREAS, SELECTS & SPECIFIQUE (DATE/TIME)
   ========================================================================== */

/* --- Base commune pour tous les types d'entrées --- */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container input[type="number"],
.form-container input[type="tel"],
.form-container input[type="phone"],
.form-container input[type="date"],
.form-container input[type="time"],
.form-container textarea,
.form-container select {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text-dark);
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-sizing: border-box; /* Évite les bugs de largeur avec le padding */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

/* --- États Focus (Quand on clique dans un champ) --- */
.form-container input:focus,
.form-container textarea:focus,
.form-container select:focus {
    border-color: var(--color-border-hover);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.15); /* Utilise la couleur de survol avec de la transparence */
}

/* --- Ajustement spécifique pour les textareas --- */
.form-container textarea {
    min-height: 120px;
    resize: vertical; /* Permet à l'utilisateur de l'agrandir uniquement vers le bas */
}

/* --- Ajustements spécifiques pour les Menus Déroulants (Select) --- */
.form-container select {
    cursor: pointer;
    padding-right: 40px; /* Fait de la place pour la flèche personnalisée */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Flèche épurée en SVG encodée en base64 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.form-container select::-ms-expand {
    display: none; /* Masque la flèche par défaut sur les vieux navigateurs IE */
}

/* Style des balises options à l'intérieur du select */
.form-container select option {
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background-color: #ffffff;
    color: var(--color-text-dark);
}

/* Style pour l'option par défaut désactivée (sert de placeholder) */
.form-container select option:disabled {
    color: var(--color-text-muted);
    font-style: italic;
}

/* --- Ajustements spécifiques pour les formats Date & Time --- */
.form-container input[type="date"],
.form-container input[type="time"] {
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

/* Customisation des icônes natives (Calendrier / Horloge) pour Chrome, Safari, Edge */
.form-container input[type="date"]::-webkit-calendar-picker-indicator,
.form-container input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(30%) sepia(10%) saturate(1200%) hue-rotate(180deg) brightness(95%); /* Teinte l'icône pour s'accorder au texte */
    padding: 2px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.form-container input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form-container input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--color-primary); /* Léger fond gris au survol de l'icône */
}

/* ==========================================================================
   ETATS SPECIFIQUES & VALIDATION
   ========================================================================== */

/* --- Champs en lecture seule (.view-only-text et p) --- */
.form-group p,
.form-group .view-only-text {
    margin: 0;
    padding: 10px 14px;
    background-color: var(--color-primary); /* Fond gris clair pour montrer que c'est bloqué */
    color: var(--color-text-muted);
    border-radius: 6px;
    font-size: 15px;
    border: 1px dashed var(--color-border); /* Style visuel différent d'un input classique */
    box-sizing: border-box;
}
.price-range {
    display: flex;       /* Aligne l'input et le span horizontalement */
    align-items: center; /* Centre verticalement le texte et l'input */
    gap: 5px;            /* Crée un petit espace de 5px entre l'input et le € */
}
/* --- Messages d'erreur de validation --- */
.errorInput {
    font-size: 13px;
    color: #ef4444; /* Un rouge vif pour les erreurs */
    margin-top: 5px;
    min-height: 18px; /* Évite que le formulaire "saute" quand l'erreur apparaît */
}

/* ==========================================================================
   BOUTONS DE SOUMISSION
   ========================================================================== */

/* --- Bouton de soumission principal --- */
.btn-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    color: #ffffff;
    background-color: var(--color-secondary); /* Ton rose/rouge */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: 100%; /* Le bouton prend toute la largeur sur mobile par défaut */
    box-sizing: border-box;
}

.btn-submit:hover {
    filter: brightness(0.92); /* Assombrit légèrement la couleur au survol */
}

.btn-submit:active {
    transform: scale(0.98); /* Léger effet d'enfoncement au clic */
}
/* --- Bouton secondaire dans le formulaire (Ouverture Modale) --- */
.form-container .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start; /* Empêche le bouton de s'étirer sur toute la largeur */
    
    /* Typo et espacement plus discrets que le submit */
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    
    /* Style épuré : Fond transparent + Bordure */
    background-color: transparent;
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* --- État Hover (Survol) --- */
.form-container .btn-secondary:hover {
    background-color: rgba(240, 114, 118, 0.05); /* Léger voile de ta couleur secondaire */
    border-color: var(--color-secondary); /* Devient rose/rouge au survol */
    color: var(--color-secondary);
}

/* --- État Active (Clic) --- */
.form-container .btn-secondary:active {
    transform: scale(0.98); /* Petit effet d'enfoncement fluide */
}
/* ==========================================================================
   RESPONSIVE (Tablettes, ordinateurs et écrans larges)
   ========================================================================== */

@media (min-width: 480px) {
    /* Gestion de l'affichage côte à côte des champs sur une ligne */
    .form-row-grid {
        flex-direction: row;
        gap: 16px; /* Écart parfait entre les deux champs */
    }
    
    .form-row-grid .form-group {
        flex: 1; /* Distribue l'espace équitablement (50% / 50%) */
    }

    /* Ajustement du bouton de soumission */
    .btn-submit {
        width: 100%; /* Reprend sa taille de contenu sur grand écran */
        align-self: flex-start; /* S'aligne proprement à gauche */
    }
}

.form-container {
    overflow: visible;
}
.choose-patron {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

/* Le select prend toute la place */
.choose-patron .select-wrapper {
    flex: 1;
}

/* Evite que TomSelect déborde */
.choose-patron .ts-wrapper {
    width: 100%;
}

/* Container bouton */
.choose-patron .btn-add-container {
    display: flex;
}

/* Bouton */
.choose-patron .btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    white-space: nowrap;

    border-radius: 6px;

    background-color: var(--color-secondary);
    color: white;
    height: 44px;
    text-decoration: none;

    font-size: 14px;

    transition: 0.2s;
}
.option-with-color, 
.item-with-color {
    display: flex !important;
    align-items: center !important;
    gap: 10px; /* Espace entre le carré de couleur et le texte */
    width: 100%;
}

/* Le carré de couleur */
.color-dot {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px; /* Coins légèrement arrondis pour un aspect plus moderne */
    flex-shrink: 0; /* Empêche le carré de se déformer si le texte est très long */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* Petite bordure intérieure discrète pour les couleurs très claires */
}
.choose-patron .btn-add:hover {
    filter: brightness(0.92);
}
/* 1. On force la disparition absolue du select natif pour éviter les conflits avec le CSS global */
select.tomselected {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* 2. On s'assure que le placeholder de TomSelect est bien coloré (et pas invisible/blanc) */
.ts-wrapper .ts-control input::placeholder {
    color: #94a3b8 !important; /* Un gris neutre visible, ou var(--color-text-muted) */
    opacity: 1 !important;
}

/* Support pour les anciens navigateurs */
.ts-wrapper .ts-control input:-ms-input-placeholder {
    color: #94a3b8 !important;
}
.ts-wrapper .ts-control input::-ms-input-placeholder {
    color: #94a3b8 !important;
}