:root {
    /* input */
    --font-size-input: 1rem;
    --color-text-input: var(--color-primary);
    --font-weight-input: 400;
    --color-border-input: var(--color-CTA-primary);
    --color-bg-input: #ffffff;
    --shadow-input: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-input-focus: 0 0 0 2px rgba(0,120,212,0.15);
    /* INPUT taille */
    /* Sur mobile : 100% | Sur PC : se stabilise autour de 40rem */
    --input-width: 100%; /*clamp(300px, 80%, 45rem);*/
    --input-width-min: 240px;
    --input-width-max: 45rem;
    --input-height-normal: 3rem;
    --input-height-double: 6rem;
    --input-height-triple: 9rem;
    /* SWITCH */
    --switch-width: 75px;
    --switch-height: 42px;
    --switch-knob-size: 33px;
    /* label */
    --font-size-label: clamp(1.1rem, calc(3rem - 2vw), 2.2rem);
    --color-text-label: var(--color-primary);
    --font-weight-label: 600;
    /* RADIUS */
    --radius-input: 1.5rem;
    /* Container */
    --color-border-container-form: var(--color-CTA-secondary);
    /*******/
    /* AUTRE : VOIR contactForm / newslettersignup */
    --accent: #f07e26;
    --accent-ring: rgba(240,126,38,.25);
    --card-bg: #fff;
    --border: #f07e26;
    --text-muted: #8a8fa3;
}


/************************************/
/* Fichier CSS dédié aux Formulaire */
/************************************/

/* INPUT GENERIQUE */

input + label,
select + label,
textarea + label,
label + input,
label + select,
label + textarea {
    display: block;
}

input[type="date"],
select,
button {
    padding: 0.4rem 0.6rem;
}

/* compatibilité navigateur (type Safari) */
input[type="date"],
input[type="number"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}


input,
input[type="password"],
input[type="select"],
input[type="text"],
input[type="email"] {
    height: var(--input-height-normal);
    width: var(--input-width);
    max-width: var(--input-width-max);
    min-width: var(--input-width-min);
    box-sizing: border-box;
    padding: 0.75rem 0.5rem;
  /*  margin: 2rem auto;*/
    color: var(--color-primary) !important;
    font-size: var(--font-size-input);
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-input);
    background-color: var(--color-bg-input) !important;
    box-shadow: var(--shadow-input);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    /* recommandations WCAG : amélioration navigation clavier */
    input:focus,
    textarea:focus,
    select:focus {      
        border-color: var(--color-border-input);
        box-shadow: var(--shadow-input-focus);
    }


    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }



    /* Nécessaire pour les champs autofillable (évite la coloration systeme pour les champs prérempli) */

   /* input[type="password"].inputselect {
        background: var(--color-bg-input) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: none !important;
    }*/

/*    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-input) inset !important;
        box-shadow: 0 0 0px 1000px var(--color-bg-input) inset !important;
        -webkit-text-fill-color: var(--color-text-input) !important;
        transition: background-color 9999s ease-in-out 0s !important;
    }*/



textarea {
    height: var(--input-height-triple);
    max-height: var(--input-height-triple);
    min-height: var(--input-height-triple);
    width: var(--input-width);
    max-width: var(--input-width);
    min-width: var(--input-width);
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    color: var(--color-primary);
    font-size: var(--font-size-input);
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-input);
}



/************************************/

/* CLASS PERSO POUR INPUT */

.inputselect {
    height: var(--input-height-normal);
    width: var(--input-width);
    max-width: var(--input-width-max);
    min-width: var(--input-width-min);
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-primary) !important;
    font-size: var(--font-size-input);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-input);
}

.inputcheckbox {
    height: var(--input-height-normal);
    width: var(--input-height-normal);
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border-input);
    outline: none;
    border-radius: var(--radius-input);
}


.inputselect:-webkit-autofill,
.inputselect:-webkit-autofill:hover,
.inputselect:-webkit-autofill:focus {
    -webkit-box-shadow: #ffffff; /* Remplace la couleur de fond */
    transition: background-color 5000s ease-in-out 0s;
}

/*****************************************/
/* PERSO : INPUT checkbox : Button switch  */


/* Container du switch */
.switch {
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
}

    /* Masque le checkbox natif */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* Slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-warning);
    transition: 0.4s;
    border-radius: var(--radius-input);
}

    /* Bouton rond */
    .slider:before {
        position: absolute;
        content: "";
        height: var(--switch-knob-size);
        width: var(--switch-knob-size);
        left: 5px;
        bottom: 5px;
        background-color: var(--color-bg-input);
        transition: 0.4s;
        border-radius: var(--radius-input); /* 50%; */
    }

/* Quand activé */
.switch input:checked + .slider {
    background-color: var(--color-success); /* vert par défaut */
}

    .switch input:checked + .slider:before {
        transform: translateX(calc(var(--switch-width) - var(--switch-knob-size) - 10px));
    }

/* Optionnel : coins arrondis */
.slider.round {
    border-radius: var(--radius-input); /* 42px */
}

/****************************************/
/* FLOATTING LABEL */

/* ----------------------------------- */
/* 1. Configuration du conteneur */
/* ----------------------------------- */
.form-group-floating {
    display: block;
    width: 100%;
    /* Assurez-vous que le conteneur est légèrement plus large que l'input */
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 25px;
}
    

    /* ----------------------------------- */
    /* 2. Style de l'Input (Base) */
    /* ----------------------------------- */
    .form-group-floating .inputselect,
    .form-group-floating textarea {
        width: var(--input-width);
        /*padding: 15px 10px 5px 10px;*/ /* Ajustez le padding pour le label */
        border: 1px solid var(--color-border-input);
        border-radius: var(--radius-input);
        /*box-sizing: border-box;*/
        /* On s'assure que l'input ne dépasse pas malgré le padding du parent */
        max-width: calc(100% - 10px);
        /* Masquer le placeholder car le label prend sa place */
        /* Le 'opacity: 0;' est parfois plus compatible que 'color: transparent' */
        /* Assurez-vous que l'input a un placeholder, même un espace */
        /* input::placeholder { opacity: 0; } */

        caret-color: var(--color-primary);
        padding-left: 25px; /* Décale le curseur et le futur texte */
    }

    /* ----------------------------------- */
    /* 3. Style du Label (Positionnement initial) */
    /* ----------------------------------- */

    .form-group-floating .floating-label {
        position: absolute;
        /* Ajustement horizontal :  petit décalage pour ne pas coller au bord arrondi */
        /* Aligne le label sur le texte (compte tenu des 5px de border-left du label) */
        left: 20px; /* On l'éloigne un peu plus de la courbure de l'angle */
        /* Ajustement vertical : descend un peu pour qu'il soit à cheval sur la bordure supérieure. */
        top: -5px; /* Le label sera posé sur la bordure haute */
        transform: translateY(0) scale(0.85);
        font-size: 1.2rem;
        color: var(--color-text-label);
        background-color: var(--color-bg-input);
        /* On garde ces bordures invisibles qui créent l'espace dans la ligne */
        /* On élargit la "zone blanche" autour du texte pour que l'outline ne colle pas aux lettres */
        border-left: 8px solid var(--color-bg-input);
        border-right: 8px solid var(--color-bg-input);
        padding: 0;
        pointer-events: none;
        transition: transform 0.25s ease, color 0.2s ease, font-size 0.2s ease;
        z-index: 2; /* On s'assure qu'il passe au dessus de la bordure de l'input */
    }

    /* Ajustement spécifique au focus pour compenser l'épaisseur de l'outline */
    .form-group-floating .inputselect:focus + .floating-label,
    .form-group-floating textarea:focus + .floating-label {
        /* On descend le label d'un ou deux pixels au focus seulement */
        transform: translateY(-4px) scale(0.85);
    }


    /* ----------------------------------- */
    /* 4. Le Fait de Flotter (L'effet "Google/Microsoft") */
    /* ----------------------------------- */

    /* Le label flotte lorsque l'input est EN FOCUS OU LORSQU'IL CONTIENT DU TEXTE */

    /* Ciblage: Si l'input est EN FOCUS OU ( , le placeholder n'est PAS visible, donc il y a du texte ) */
    /*.form-group-floating .inputselect:focus + .floating-label,
    .form-group-floating .inputselect:not(:placeholder-shown) + .floating-label {
        color: var(--color-border-input);
        transform: translateY(-1.2rem) scale(0.85);
        font-size: 0.9rem;
    }*/




/*****************************************/

/* CONTAINER dediés pour FORM */

/* MAIN CONTAINER */
.container-form-add {
    width: 22%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 2rem;
    margin: 1rem auto;
}

.container-form-add-medium {
    width: 40%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 3rem;
    margin: 1rem auto;
}

.container-form-add-big {
    width: 80%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 4rem;
    margin: 1rem auto;
}

/* composant newsletter signup
    .container-form-add-big {*/
    /*background: var(--card-bg);*/
    /*border: 1px solid var(--border);*/
    /*border-radius: 14px;*/
    /*padding: clamp(1rem, 2vw, 1.5rem);*/
    /*box-shadow: 0 12px 30px rgba(235,123,12,.06);*/
    /*//animation: fadeSlide 0.8s ease forwards;*/
    /*animation-delay: 0.3s;*/
    /*margin: 0;*/
    /* margin-left:12rem;*/
/*}*/


/* CONTAINER INTERNES */
.form-group {
    width: 100%;
    min-width: 150px;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-actions {
    display: flex;
    align-items: center;
}




/* LABEL */
label {
    font-size: var(--font-size-label);
    color: var(--color-text-label);
    font-weight: var(--font-weight-label);
    font-family: var(--font-family-base);
}

.label-legende {
    font-size: var(--font-size-label);
    font-family: var(--font-family-base);
    margin: 0.3rem auto;
    color: grey;
}


/**********************************/
/* Class dédié modal addDoc */
/**********************************/
.form-modal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    font-size: 0.95rem;
}

.form-header {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.form-infos {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.text-muted {
    font-size: 0.85rem;
    color: #666;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}