:root {
    /* input */
    --font-size-input: 1rem;
    --color-text-input: grey;
    --font-weight-input: 400;
    --color-border-input: var(--color-primary); /* #6200ee; */
    --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 */
    --input-width: 100%;
    --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: black; /*var(--color-primary);*/ /* #009adf; */

    --font-weight-label: 600;
    /* RADIUS */
    --radius-input: 1.5rem;
    /* Container */
    --color-border-container-form: var(--color-accent-light);
}


/************************************/
/* 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);
    box-sizing: border-box;
    padding: 0.5rem 0.5rem;
    margin-top: 0.25rem;
    color: var(--color-text-input);
    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 rgba(98, 0, 238, 0.4);
        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-double);
    max-height: var(--input-height-double);
    min-height: var(--input-height-double);
    width: var(--input-width);
    max-width: var(--input-width);
    min-width: var(--input-width);
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-text-input);
    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);
    box-sizing: border-box;
    margin-top: 0.25rem;
    padding: 0.2rem 0.5rem;
    color: var(--color-text-input);
    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);
}


/************************************/
/* PERSO : INPUT password + bouton */

/* le wrapper du bouton */
.password-wrapper {
    position: absolute;
    right: 0.5rem;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none; /* IMPORTANT : le wrapper lui-même ne capture pas les clics */
}

/* le bouton reste cliquable mais hors du flux pour le label */
.password-toggle-btn {
    pointer-events: all; /* le bouton reste cliquable */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .password-toggle-btn img {
        height: 1rem;
        width: 1rem;
    }

    .password-toggle-btn:focus {
        outline: none;
    }

/*****************************************/
/* 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 {
    position: relative;
    /* Exemple de marge/padding autour */
    margin-bottom: 10px;
    padding-top: 10px; /* Espace pour le label flottant */
}
    

    /* ----------------------------------- */
    /* 2. Style de l'Input (Base) */
    /* ----------------------------------- */
    .form-group-floating .inputselect {
        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;
        /* 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; } */
    }


    /* ----------------------------------- */
    /* 3. Style du Label (Positionnement initial) */
    /* ----------------------------------- */
    .form-group-floating .floating-label {
        position: absolute;
        left: 25px;
        top: 0;
        transform: translateY(0) scale(0.85);
        font-size: 1.2rem;
        color: var(--color-text-label);
        background-color: var(--color-bg-input);
        border-left: 5px solid var(--color-bg-input);
        border-right: 5px solid var(--color-bg-input);
        padding: 0;
        pointer-events: none;
        transition: transform 0.25s ease, color 0.2s ease, font-size 0.2s ease;
    }



    /* ----------------------------------- */
    /* 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: 100%;
    height: auto;
    border: 2px solid var(--color-border-container-form);
    border-radius: var(--radius-input);
    padding: 4rem;
    margin: 1rem auto;
}

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

.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;
}