
.paiement_container {

    display: grid;
    grid-column-gap: 20px;
    @include media_max(phone){
        grid-column-gap: unset;
    }
    grid-template-columns: 1fr 2fr 1fr;
    @include media_max(phone){
        grid-template-columns: minmax(5px, 300px) minmax(277px, 600px) minmax(10px, 300px);
    }
    @include media_minmax(phone,desktop){
        grid-template-columns: minmax(10px, 300px) minmax(300px, 600px) minmax(10px, 300px);
    }
    grid-template-areas: ". paiement .";

    .paiement {
        grid-area: paiement;
        border: 2px solid $color_rouge;
        display: grid;
        grid-column-gap: 20px;
        grid-row-gap: 15px;
        @include media_max(phone){
            grid-column-gap: unset;
        }
        grid-template-columns: 1fr 3fr 4fr;
        @include media_max(phone){
            grid-template-columns: 10px 4fr 3fr;
        }
        @include media_minmax(phone,desktop){
            grid-template-columns: 0px 3fr 4fr;
        }
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
        grid-template-areas: 
            "paiement_titre paiement_titre paiement_titre"
            ". montant_cotisation_label montant_cotisation_euros_box"
            ". montant_don_label montant_don_euros_box"
            ". . don"
            ". montant_total_label montant_total_euros_box"
            ". paiement_mode ."
            ". paiement_mode_choix paiement_mode_choix_nocb"
            ". paiement_cb paiement_cb"
            ". paiement_nocb_form paiement_nocb_form";

        @include media_max(phone){
            grid-template-areas: 
                "paiement_titre paiement_titre paiement_titre"
                ". montant_cotisation_label montant_cotisation_euros_box"
                ". montant_don_label montant_don_euros_box"
                ". don don"
                ". montant_total_label montant_total_euros_box"
                ". paiement_mode ."
                ". paiement_mode_choix paiement_mode_choix_nocb"
                ". paiement_cb paiement_cb"
                ". paiement_nocb_form paiement_nocb_form";
        }
        @include media_minmax(phone,desktop){
            grid-template-areas: 
                "paiement_titre paiement_titre paiement_titre"
                ". montant_cotisation_label montant_cotisation_euros_box"
                ". montant_don_label montant_don_euros_box"
                ". don don"
                ". montant_total_label montant_total_euros_box"
                ". paiement_mode ."
                ". paiement_mode_choix paiement_mode_choix_nocb"
                ". paiement_cb paiement_cb"
                ". paiement_nocb_form paiement_nocb_form";
        }
        
        .paiement_titre {
            grid-area: paiement_titre;
            margin-bottom: 30px;
            padding-bottom: 5px;
            padding-top: 5px;
            background-color: $color_rouge;
            color: $color_blanc;
            text-align: center;
        }
        .montant_cotisation_label {
            grid-area: montant_cotisation_label;
            align-self: center;
            color: $color_gris_clair;
            @include media_max(phone){
                font-size: 15px;
            }
            @include media_minmax(phone,desktop){
                font-size: 15px;
            }
        }
        .montant_cotisation_euros_box {
            grid-area: montant_cotisation_euros_box;
        }
        .input_text_don {
            label {
                font-size: 14px;
                @include media_max(phone){
                    font-size: 13px;
                }
                @include media_minmax(phone,desktop){
                    font-size: 13px;
                }
            }
            input,input[type=text],input[type=tel],input[type=date], select {
                min-height: 22px;
                font-size: 14px;
                @include media_max(phone){
                    font-size: 15px;
                }
                @include media_minmax(phone,desktop){
                    font-size: 15px;
                }
                @include media_max(phone){
                    font-size: 15px;
                }
                color: $color_noir_clair;
                &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active, &:-webkit-autofill:focus-visible, &:-webkit-autofill:focus-within, &:-webkit-autofill:visited, &:target {
                    -webkit-text-fill-color: $color_noir_clair;
                }
                &::placeholder {
                    font-family: cabin_italic;
                    font-size: 12px;
                    color: $color_gris_clair;
                }
            }
        }

        .don {
            grid-area: don;
            margin-top: 22px;
            margin-right: 15px;
        }
        .montant_don_label {
            grid-area: montant_don_label;
            align-self: center;
            color: $color_gris_clair;
        }
        .montant_don_euros_box {
            grid-area: montant_don_euros_box;
        }
        .montant_total_label {
            grid-area: montant_total_label;
            align-self: center;
        }
        .montant_total_euros_box {
            grid-area: montant_total_euros_box;
        }
        .paiement_mode {
            grid-area: paiement_mode;
            margin-top: 40px;
        }
        .paiement_mode_choix {
            grid-area: paiement_mode_choix;
        }
        .paiement_mode_choix_nocb {
            grid-area: paiement_mode_choix_nocb;
        }
        #paiement_cb {
            grid-area: paiement_cb;
        }
        .paiement_nocb {
            grid-area: paiement_cb;
        }
        .paiement_nocb_choix {
            display: flex;
        }
        .paiement_nocb_choix_cheque {
            margin-left: 20px;
        }
    
        .open_modal_don {
            display: grid;
            margin-top: 6px;
            margin-bottom: 45px;
            text-decoration: underline;
            font-size: 12px;
            p {
                &:hover {
                    cursor: pointer;
                }
            }
        }
    
        .montant_cotisation_euros {
            display: inline-block;
            padding-top: 8px;
            padding-bottom: 6px;
            padding-left: 10px;
            padding-right: 8px;
            @include media_max(phone){
                font-size: 15px;
            }
            @include media_minmax(phone,desktop){
                font-size: 15px;
            }
        }
    
        .montant_total_label {
            color: $color_rouge;
        }
        .montant_total_euros {
            display: inline-block;
            padding-top: 8px;
            padding-bottom: 6px;
            padding-left: 10px;
            padding-right: 8px;
            color: $color_rouge;
        }
    
        .paiement_nocb_form {
            grid-area: paiement_nocb_form;
            margin-bottom: 25px;
            font-size: 13px;
            .paiement_description {
                margin-bottom: 3px;
                font-family: montserrat_light;
            }
        }
        .paiement_nocb_infos {
            display: grid;
            grid-template-rows: auto auto auto auto;
            grid-row-gap: 25px;
            .nom_banque {
                margin-top: 15px;
            }
        }
        .euro_label {
            padding-left: 8px;
            color: $color_gris_clair;
        }
        
    
    
    }

}

