/* règles génériques */

form .sur-menu {
    position: relative;
}

form .sur-menu.ouvert {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

form .sous-menu {

    width: 100%;
    position: absolute;
    z-index: 100;

    top: 100%;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    box-sizing: border-box;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: stretch;

    background-color: white;
    box-shadow: 0 5px 6px #00000029;
}

form .sur-menu:not(.ouvert) .sous-menu {
    display: none;
}

form .faux-select,
form select {
    padding: 0 2rem;

    cursor: pointer;
}

form select {
    border: none;
}

form .faux-select.désactivé {
    pointer-events: none;
}

form .faux-select > .sélection {
    display: flex;
    flex-direction: row;

    flex-grow: 2;

    justify-content: space-between;

    user-select: none;
}

form .faux-select.désactivé .sélection {
    /*justify-content: center;*/
}

form .faux-select.désactivé .sélection::after {
    content: '';
}

form .faux-select > .sélection::after {
    content: url('../img/ico-chevron.svg');
}

form .faux-select.ouvert > .sélection::after {
    transform: rotate(180deg);
}

form .faux-select .sous-menu {
    z-index: 1000;

    padding-bottom: 0.75rem;

}

form .faux-select .sous-menu > p {
    padding: 0.5rem 3rem;

    white-space: nowrap;
}

form .faux-select .sous-menu p.sélectionné,
form .faux-select .sous-menu > p:hover {
    background-color: #E9E9E9;
}

form input:invalid ~ label::after,
form textarea:invalid ~ label::after
{
    content: 'champ invalide';

    margin-left: 10px;
    color: #de1717;
}




form input:focus {
    outline-color: transparent;
}

form input::placeholder,
form textarea::placeholder {
    color: transparent;
}

form .champ-std {
    height: fit-content;

    align-self: center;

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

form .champ-std > * {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

form .champ-std > label {
    z-index: 10;
    pointer-events: none;

    white-space: nowrap;
}

form .champ-std input[type="text"]:not(:placeholder-shown) ~ label,
form .champ-std input[type="text"]:focus ~ label,
form .champ-std input[type="email"]:not(:placeholder-shown) ~ label,
form .champ-std input[type="email"]:focus ~ label,
form .champ-std textarea:not(:placeholder-shown) ~ label,
form .champ-std textarea:focus ~ label
{
    font-size: 0.75rem;
    transform: translateY(-55%);
}

form [data-valeur="tous"],
form [value="tous"] {
    font-style: italic;
}

form .champ-std > label,
form .faux-select .sélection p,
form select {
    font-size: 1.25rem;
}

form .faux-select .sélection p {
    white-space: nowrap;
}

form .champ-std > label,
form .faux-select .sélection p.désactivé {
    font-style: italic;
    /*opacity: 0.5;*/

    color: #7e7e7e;
}

form input, form textarea {
    border: none;
    padding: 0;

    font-size: 1.25rem;

    min-width: 0;
}

form select[readonly] {
    pointer-events: none;
    appearance: none;
}

/* remplacement des faux select par les vrais select */
@media screen and (max-width: 34.375rem) {
    #corps form > .faux-select {
        display: none;
    }

    /* ෴ */
    #corps#corps form > select {
        display: inherit;
    }

}