:root {
    --color-yellow: #CEAF6E;
    --color-blue: #191C54;
    --color-saumon: #EAD9DD;
    --color-grey: #DADADA;
}

.navbar {
	background-color: rgba(255, 255, 255, 0);
	background-image: linear-gradient(131deg, #79122c 0%, #191c54 100%);
}

body {

    font-family: 'Montserrat', sans-serif;



    .container-mockup {

        /* height: 250px; */
        /* height: calc(100% - 100px); */
        color: white;
        /* margin: 3rem 3rem 3rem 3rem; */

        background: linear-gradient(240deg,
                #30264F 0%,
                #3A1F4B 10%,
                #431946 20%,
                #4C1442 30%,
                #55103D 40%,
                #5E0C38 50%,
                #670933 60%,
                #6F062E 70%,
                #77032A 80%,
                #7A0127 90%,
                #78122C 100%);

        .epibag-header {

            margin: 2.5rem 0 2.5rem 0;

            .epibag-title {

                font-size: 30px;
                /* padding: 2rem 0 2rem 3rem; */
                padding-left: 3rem;
            }

            .epibag-comment {

                font-size: small;
                text-align: end;
                padding-right: 3rem;
            }
        }

        @media (max-width: 767.98px) {
            .epibag-header {

                flex-direction: row;

                /* .epibag-title {
                    
                    
                } */

                .epibag-comment {

                    text-align: start;
                    padding-right: 0;
                }
            }
        }

        .intitule {

            background: white;
            text-align: center;
            padding: 1rem 1rem 1rem 1rem;

            .intitule-txt-1 {

                color: var(--color-yellow);
                font-size: clamp(15px, 3vw, 30px);
            }

            .intitule-txt-2 {

                color: black;
                font-size: clamp(10px, 1.5vw, 20px);
            }
        }

        .name-title {

            margin: 1rem 0 1rem 0;
            font-size: clamp(22.5px, 6vw, 45px);
            text-align: center;
        }

        .mockup-overlap {

            .mockup-img {

                transform: translateY(15%);
                z-index: 2;
            }
        }

    }

    .container-infos {

        background: white;
        
        .div-info-title {

            .info-title {

                display: inline-block;
                color: white;
                background-color: #78122C;
                border-color: #78122C;
                border-radius: 9999px;
                padding: 0.5em 1em;
                font-size: clamp(12px, 2.3vw, 30px);
            }
        }

        .info-sub-title {

            display: inline-block;
            color: #0590D4;
            font-size: clamp(8px, 1.4vw, 17px);
            padding: 1em 1em;

        }

        .div-info-prix {

            color: var(--color-blue);
            text-align: center;

            .row-info-price {

                margin-left: 8px;
                margin-right: 8px;                
            }
            
            .prix-ht {

                color: white;
                background: var(--color-yellow);
                border-radius: 20px;
                text-wrap: nowrap;
            }

            .min-price {

                background: var(--color-saumon);
                border-radius: 20px;
            }

            .row-price {

                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.5rem;
                margin: 0.5rem 0.5rem 1rem 0.5rem;                
            }

            .color-saumon {

                background: var(--color-saumon);
            }

            .color-grey {

                background: var(--color-grey);
            }

        }

    }


    .custom-tooltip {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: rgba(220, 53, 70, 0.8);
        color: white;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 0.875rem;
        white-space: nowrap;
        z-index: 1000;
    }

    .custom-tooltip-block {
        display: block;
    }

    .iti {
        width: 100%;
    }

    input.is-invalid:hover~.custom-tooltip {
        display: block;
    }

    #a_phone.is-invalid:hover~.custom-tooltip {
        display: block;
    }

    select~.custom-tooltip {
        margin-left: 20px;
        margin-top: -5px;
    }

    select.is-invalid:hover~.custom-tooltip {
        display: block;
    }

    .div-facturation~.custom-tooltip {
        margin-left: 12px;
    }

    .div-facturation.is-invalid:hover~.custom-tooltip {
        display: block;
    }

    textarea.is-invalid:hover~.custom-tooltip {
        display: block;
    }

    /* POINT 1 A 4 */
    .container_4_points {

        background: linear-gradient(to bottom, #30264F 0%, #78122C 100%);

        .ligne {

            background: rgba(0, 0, 0, 0);
            color: white;
            position: relative;
            overflow: visible;

            .ligne_nbr {

                width: 60px;
                height: 60px;
                color: var(--color-yellow);
                background-color: white;
                border-radius: 50%;
                font-size: 32.5px;
                font-weight: bold;
                margin-top: -5px;
                margin-bottom: -5px;

                display: flex;
                justify-content: center;
                align-items: center;
            }

            .ligne_data {

                text-align: center;

                .div_data {

                    color: var(--color-yellow);
                    font-weight: bold;
                    background-color: white;
                    border-radius: 9999px;
                    padding: 5px 20px;
                    display: inline-block;
                    min-width: 110px;
                    width: 100%;

                    .div_isInvalidIcon {

                        display: none;
                    }

                    select.no-border {
                        background-color: #eef0ff;
                        border: none;
                        border-radius: 4px;
                        padding: 0.4px 8px;
                        width: 100%;
                        font-weight: bold;
                        color: #291943;
                    }

                    /* Forcer l'aspect de l'état invalide */
                    select.no-border.is-invalid {
                        border: 1px solid #dc3545 !important;
                        outline: none;
                        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%20width='12'%20height='12'%20fill='none'%20stroke='%23dc3545'%3E%3Ccircle%20cx='6'%20cy='6'%20r='4.5'/%3E%3Cpath%20stroke-linejoin='round'%20d='M5.8%203.6h.4L6%206.5z'/%3E%3Ccircle%20cx='6'%20cy='8.2'%20r='.6'%20fill='%23dc3545'%20stroke='none'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right 1em center;
                        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
                    }

                    select.no-border.is-invalid:focus {
                        border: 1px solid #dc3545 !important;
                        /* Option : plus opaque sur focus */
                        box-shadow: 0 0 0 3.75px rgba(220, 53, 69, 0.3);
                        outline: none;
                        /* Empêche l’anneau bleu du navigateur */
                    }

                    select.no-border.is-invalid:not(:focus) {
                        transition: box-shadow 0.1s ease;
                        /* Transition progressive */
                        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
                        /* box-shadow à 0 lorsqu'on perd le focus */
                    }
                }
            }

            @media (max-width: 767.98px) {
                .ligne_data {

                    padding: 0.5rem 0;

                    .div_data {

                        width: fit-content;

                        select.no-border {

                            min-height: 24px;
                        }

                        select.no-border.is-invalid {

                            background-image: none;
                        }

                        .div_isInvalidIcon {

                            margin-right: -18px;
                        }
                    }
                }
            }

            .div_white {
                background: white;
                height: 1.5rem;
            }
        }

        .point_2 {
            flex-direction: row;

            .txt_yellow {

                color: var(--color-yellow);
                font-weight: bold;
            }
        }

        @media (max-width: 767.98px) {
            .point_2 {
                flex-direction: column;
            }
        }

        .txt_yellow {

            color: var(--color-yellow);
            font-weight: bold;
        }

        input {
            background-color: #eef0ff;
            padding: 4px 8px;
            width: 100%;
            font-weight: bold;
            color: #291943;
        }

        input::placeholder {
            text-align: center;
        }
    }

    /* FACTURATION LIVRAISON */
    .container_4 {

        .div_point4 {

            .col_point4 {

                .txt_point4 {

                    color: var(--color-yellow);
                    font-weight: bold;
                    font-size: large;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                input {
                    background-color: #eef0ff;
                    padding: 4px 8px;
                    width: 100%;
                    font-weight: bold;
                    color: #291943;
                }

                input::placeholder {
                    text-align: center;
                }

                input:checked {

                    background-color: #0d6efd;
                }

                .inputcheck {

                    margin: 0;
                    padding: 4.8px 0px 4.8px 24px;
                }

                .readonly-style {

                    background-color: #e9ecef;
                    /* pointer-events: none; */
                }

                textarea {

                    resize: none;
                    height: 75.2px;
                    background-color: #eef0ff;
                    font-weight: bold;
                    color: #291943;
                    font-size: small;
                }

                textarea::placeholder {

                    text-align: right;
                    font-size: small;
                }
            }
        }

        @media (max-width: 767.98px) {
            .div_point4 {

                flex-direction: column;
            }
        }
    }

    .txt_contact {

        color: #191C54;

        .right_border {

            border-right: 2px dotted black;
        }

        @media (max-width: 767.98px) {
            .right_border {

                border-right: none;
                margin-bottom: 1rem;
            }
        }
    }
}