/* effet apparition */
main#index > section > .content,
main#index > section#contact  article{
    opacity:0;
    transition: opacity 1s;
}
main#index > section > .content.visible,
main#index > section#contact article.visible{
    opacity:1;

}



section#introduction {
    height: 500px;
}

section > .content > img#introductionLogo{
    width:100%;
}
















section#contact .content p{
    text-align: center;
    font-size: 1.5em;
}

section#contact .phone{
    text-align: center;
    font-size: 1.5em;
}


section#contact > #formulaire-carte{
    position:relative;
    display:flex;
    flex-wrap: wrap;
    gap:40px;
    margin:0 auto 40px auto;
    background: var(--section-background-2);
    padding:20px;
}

#formulaire-carte form{
    width:800px;

}

#formulaire-carte form input,
#formulaire-carte form textarea
{

    border: 1px solid lightgrey;
    background: #fff7e8;
    padding: 10px;
    margin: 0 0 20px 0;
    min-width: 220px;
}
#formulaire-carte form input{
    display: inline-block;
    width:200px;
    
}
#formulaire-carte form textarea{
    display: block;
    width: calc(100% - 24px);
    height: 264px;

}
#formulaire-carte iframe{
    width: 500px;
    height: 460px;
    border:1px solid lightgrey  ;

}
#formulaire-carte form button{
    float:right;
}