@color1: #1D3557;
@color2: #457B9D;
@color3: #A8DADC;
@color4: #E89633;
@color5: #E33D7F;

.rouge
{
    color:red;
}

.columns
{
    display: flex;
    justify-content: space-around;

    @media  screen and (max-width : 660px) 
    {
        flex-direction : column;    
    }
}

.page 
{
    padding-top : 74px;
    background: rgb(255,255,255);
    background: rgba(29,53,87,1);

    @media screen and(max-width : 1050px)
    {
        padding-top : 67px;
    }
    
    .page_description{
        width:64%;
        margin:auto;
        padding:1%;
        background-color:white;
        color:black;
        @media screen and(max-width : 1050px)
        {
        width: 100%;
        padding-right:5%;
        padding-left:5%;
        }
        p{
            top:0;
            width:100%;
            text-align: justify;
            flex-wrap: wrap;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }
    }
    
    .more, .less
        {
            
            
            text-decoration: underline;
            cursor : pointer;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

            
            
            

            &:hover
            {
                transition: color 0.5s;
                color: @color5;
            }
        }
        
        .show-more
        {
            display : none;
        }

        p
        {
            top:0;
            width:100%;
            text-align: justify;
            flex-wrap: wrap;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }       
        
        
        
    .page-content
    {
        margin-top:10%;
        width : 66%; 
        
        .more, .less
        {
            
            
            text-decoration: underline;
            cursor : pointer;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

            
            
            

            &:hover
            {
                transition: color 0.5s;
                color: @color5;
            }
        }
        
        .show-more
        {
            display : none;
        }

        p
        {
            top:0;
            width:100%;
            text-align: justify;
            flex-wrap: wrap;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }       
        
        .hd-contact
        {
            padding-top:10px;
            margin-bottom:2%;
            text-align:center;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }
        
        .hd-groupe
        {
            padding-top:10px;
            margin-bottom:2%;
            text-align: justify;
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
        }
        
        .page-content-left
        {
            flex : 1;
            display : flex;
            flex-direction: column;
            align-items: center;
        }

        .page-content-right
        {
            flex : 1;
        }

        margin:auto;
        height : 100%;
        background-color : white;     
        
        @media screen and(max-width : 800px)
        {
            width : 100%
        }

        .contact-text
        {
            font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
            margin-bottom:60px;
            text-align: center;

            a
            {
                text-decoration:none;
                color:@color5;
            }

            a:hover
            {
                text-decoration: underline;
                color:@color4;                
            }

            .adress
            {
                color:black;
            }
        }
        
        .maps-square{
            
            @media screen and(max-width : 660px)
            {
                display:none;
            }
            
        }
        
        .maps-square2{
            
            @media screen and(min-width : 660px)
            {
                display:none;
            }
            
        }

        .formulaire
        {
            width : 95%;
            background-color : white;
            margin : auto;

            .feedback
            {
                padding : 25px;
                font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
            }

            form 
            {
                font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                padding : 15px;
                overflow : auto;
                padding : 10px;
                text-align : center;

                .two-columns-form
                {
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;

                    .column
                    {
                        width : 50%;

                        input[type="text"]
                        {
                            width : 80%;
                        }
                        
                        input[type="mail"]
                        {
                            width : 80%;
                        }
                        
                        input[type="tel"]
                        {
                            width : 80%;
                        }
                    }
                }

                label
                {
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                }

                fieldset
                {
                    margin : 10px auto;
                    
                    legend
                    {
                        color : white;
                        background-color: @color1;
                        padding : 0 10px;
                        margin : auto;
                        border-radius:5px;
                        text-align:center;
                    }
                }

                select
                {
                    width : 50%;
                    margin : 10px 0;
                    border-radius: 4px;
                    border: 1px solid @color2;
                    height : 50px;
                    padding : 10px;
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

                    :required
                    {
                        border: 1px solid @color5;
                    }
                }

                .radiobuttons
                {
                    text-align: left;
                    margin : 10px auto;
                    width : 50%;
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

                    input[type=text]
                    {
                        margin-left : 10px;
                        width : 60%;
                    }

                    input[type="radio"], input[type="checkbox"]
                    {
                        margin-top : 15px;
                        margin-left : 15px;
                    }
                }

                input[type="text"], textarea, input[type="mail"], input[type="tel"]
                {
                    width : 90%;
                    margin : 10px 0;
                    border-radius: 4px;
                    border: 1px solid @color2;
                    height : 30px;
                    padding : 10px;
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

                    ::placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::-webkit-input-placeholder
                    {
                        font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                    }

                    :required
                    {
                        border: 1px solid @color5;
                    }
                }

                input[type="date"]{
                    
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                    
                }

                input[type=submit]
                {
                    background-color: @color1;
                    color : white;
                    width : 50%;
                    margin : 10px 0;
                    border: 1px solid @color1;
                    cursor : pointer;
                    height : 40px;
                    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;
                }

                input[type=submit]:hover
                {
                    background-color: @color2;
                }

                textarea
                {
                    height : 250px;
                    resize : none;
                }

                input:focus, textarea:focus
                {
                    border-color: @color4;
                }
            }
        }
    }
}

footer
{

    font-size: x-small;
    background-color: @color1;
    color : @color2;

    font-family: 'Roboto', Verdana, Geneva, Tahoma, sans-serif;

    .copyright
    {
        padding : 5px;
        margin-left : 10%;

        @media screen and (max-width:900px) 
        {
            margin : auto;
        }
    }

    .bottommenu
    {
        display : flex;

        @media screen and (max-width:900px) 
        {
            flex-direction: column;
            align-items: stretch;
            margin-left : 25px;
        }

        justify-content: space-around;
        padding : 30px 0;

        a{
            text-decoration:none;
            color:@color2;
         }
         
        a:hover{
            color:@color5;
        }
        
        h4
        {
            color : white;
            margin-bottom : 6px;
        }

        .spacebottom{
            margin-bottom:6px;
        }
        
        ul
        {
            list-style: none;
            margin-bottom : 15px;
        }
        
        .website
        {
            display : flex;

            img
            {
                width : 120px;

                @media screen and (max-width:500px)
                {
                    width : 40%;
                    margin-bottom : 15px;
                }

                object-fit : contain;
                margin : 0 10px;
            }
        }
    }
}