body{
            margin: 10px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Archivo', sans-serif;
            text-align: center;
        }

        form {
            max-width: 500px;
            margin: 0 auto;
            min-height: 400px;
            text-align: center;
        }        

        .hidden {
            display: none;
        }

        .hidden2 {
            display: flex;
            justify-content: space-between;
            align-items: center;            
            flex-direction: column;

        }

        .inputBox {
            position: relative;
            margin-bottom: 12px;
        }

        .inputBox input {
            width: 100%;
            padding: 4px;
            border: 1px solid #D9D9D9;
            background: #fff !important;
            border-radius: 8px;
            outline: none;
            color: #023047;
            font-size: 18px;
            transition: 0.5s;
            text-align: left;
            padding-left: 10px;
        }

        .inputBox input:valid, 
        .inputBox input:focus {
            border: 1px solid #495CA7;
            background: #ffffff;
        }

        .error {
            color: red;
            margin-top: 5px;
            position: relative;
            top: 10px;
            font-size: 16px;
            display: block;
        }

        .button-container {
            display: flex;
        }

        button {
            border: 1px solid;
            border-color: #D9D9D9;
            margin-left: 10px;
            margin-right: 10px;
            color: #000;
            background-color: transparent;
            width: 190px;
            border-radius: 50px;
            background: linear-gradient(to right, #ffffff, #15F5BA, #07FFA6) !important;
            color: #023047;
            padding: 8px;
            cursor: pointer;
            margin: 0px;
            font-size: 18px;
            transition: transform 0.38s ease;
        }
        .blue{
            background: linear-gradient(to right, #495CA7, #3A3852) !important;
            color: #ffffff;
        }
        

        #button1 {
            border: 1px solid;
            border-color: #D9D9D9;
            margin-left: 10px;
            margin-right: 10px;
            color: #000;
            background-color: transparent;
            width: 190px;
            border-radius: 50px;
            background: linear-gradient(to right, #ffffff, #ffffff, #ffffff) !important;
            color: #023047;
            padding: 8px;
            cursor: pointer;
            margin: 0px;
            font-size: 18px;
            transition: transform 0.38s ease;
        }

        .produit{
            display: block;
            margin-top: 4px;
            margin-bottom: 4px;
            margin-left: 20px;
            margin-right: 20px;
            font-size: 16px;

        }
        .productOption,
        .residenceOption {
            color: #3A3852;
            position: relative;
            display: block;
            margin: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .residenceOption {
            padding: 23px;
            color: #3A3852;
        }

        .productOption span,
        .residenceOption span {
            filter: blur(0px);
            border-radius: 8px;
            transform: scale(1);
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .productOption::before,
        .residenceOption::before {            
            border: 1px solid #D9D9D9;
            border-radius: 8px;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(255, 255, 255);
            transition: background 0.3s ease;
        }

        .productOption.selected::before{
            background: #495CA7;
            border-radius: 8px;
        }

        .residenceOption.selected::before {
            background: #07FFA6;
            border-radius: 8px;
        }

        .residenceOption.selected span {
            color: #495CA7;
            transform: scale(1.02);
        }
        .productOption.selected span {
            color: #ffffff;
            transform: scale(1.02);
        }  
        
        .heade{
            font-size: 20px;
            color: #023047;
            background-color: #ffffff00;
            width: 100%;
            padding: 20px;
            margin-bottom: 30px;
            font-weight: bold;
        }

    .page {
        border-radius: 14px;
        padding: 50px 10px 30px;
        border: 0px solid;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre douce */
    }

    button img {
        vertical-align: middle;
        margin-right: 8px;
        margin-bottom: 6px;
    }

    .centered-container {
        z-index: -1;
        display: flex;
        justify-content: center;    
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #page1, #page2, #page3, #page4, #pageThanks {
        margin-top: 200px;
    }

    .imagethinks {
        margin: 10px;
        vertical-align: middle;
    }


    .container {
        margin-top: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .inputRow {
        display: flex;
        gap: 20px;
    }

    .inputBox {
        flex: 1;
    }
    .label1 {
        color: #495CA7;
        font-size: 20px;
        display: flex;
        margin-bottom: 2px;
    }