@import url ('https://fonts.googleapis.com/css2? family = Roboto & display = swap');

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {

    margin: 0;

    padding: 0;

    border: 0;

    font: inherit;

    vertical-align: baseline;

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block

}

body {

    line-height: 1

}

blockquote, q {

    quotes: none

}

blockquote:after, blockquote:before, q:after, q:before {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

button {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

}

html {

    background-image: url("images/bg.png");

}

body {

    width: 925px;

    margin: 10px auto;

    font-size: 1em;

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

    color: #000;

}

.spacer{

    clear: both

}

.center{

    text-align: center;

}

.important{

    font-weight: 700;

}

a {

    color: #3d5cf5;

    text-decoration: none;

    transition: color .2s ease-in-out;

}

a:hover {

    color: #142D9F

}



/*------*/

/* Logo */

/*------*/

#logo {

    position: relative;

    width: 527px;

    margin: 5px auto;

}

#logo img {

    width: 527px;

}

/*--------*/

/* Cadres */

/*--------*/

#cadre{

    background-color: #D6EBB5;

    margin: 10px auto;

    border-radius: 10px;

    position: relative;

    margin: 10px auto;

    padding: 5px;

}

#cadre .top{

    margin:10px;

    height:50px;

    vertical-align:middle;

    line-height: 50px;

}

#cadre .icone{

    display: inline-block;

    width: 40px;

}

#cadre .icone img{

    width: 40px;

    height:40px;

    vertical-align:middle;

    line-height: 40px;

}

.description, .contact, .facebook {

    background-color: #E0957E !important;

}





/*:::Titres:::*/

h1, h2, h3{

    display: inline-block;

    height:40px;

    vertical-align:middle;

    line-height: 40px;

    font-weight: bold;

    margin:10px;

}

h1, h2{

    font-size: 1.5em

}

h3{



    display: block;

    font-size: 1.1em

}

/*:::Paragraphes:::*/

p {

    line-height: 22px;

    margin: 15px;

    text-align: justify;

}

ul{

    margin-top: -10px;

    margin-left: 15px;

    list-style: disc;

}

li{

    margin-left: 25px;

}



/*--------------------------------*/

/* Mise en page adresses postales */

/*--------------------------------*/

#repertoire{

    text-align: center;

}

#adresse_postale{

    display: inline-block;

    text-align: left;

    width: 200px;

    margin: 10px;

}

#adresse_postale .ligne_adresse{

    display: block;

    margin-bottom: 5px;

}

#adresse_postale .batiment{

    font-weight: bold;

}

/*--------------------------*/

/* Mise en page membre mail */

/*--------------------------*/

#repertoire{

    text-align: center;

}

#membre_mail{

    display: inline-block;

    text-align: left;

    width: 400px;

    margin: 10px;

}

#membre_mail .ligne, #membre_mail .nom, #membre_mail .fonction{

    height:20px;

    vertical-align:middle;

    line-height: 20px;

    margin-bottom: 5px;

}

#membre_mail .icone_contact{

    display: inline-block;

    width: 20px;

    margin-right: 10px;

}

#membre_mail .icone_contact img{

    width: 20px;

    height:20px;

    vertical-align:middle;

    line-height: 20px;

}

#membre_mail .intitule{

    display: inline-block;

    height:20px;

    vertical-align:middle;

    line-height: 20px;

}

#membre_mail .nom{

    font-weight: bold;

}

#membre_mail .fonction{

    color: #7D280D;

}

#membre_mail .at{

    display:none;

}

/*------------*/

/* Responsive */

/*------------*/

@media screen and (max-width:1020px) { 

    body {

        width: 100%

    }

    #logo {

        width: 90%;

        margin: 0 auto;

    }

    #logo img{

        width: 90%;

        margin: 0 auto;

    }

}

@media (max-width:800px) {

    #membre_mail{

        display: block;

        width: unset;

        margin: 0 5px 20px 5px;

    }

}

@media (max-width:600px) {

    h1, h2{

        font-size: 1.2em;

        display: block;

        height:unset;

        vertical-align:unset;

        line-height: unset;

    }

    #cadre .top{

        margin:10px;

        height:unset;

        vertical-align:unset;

        line-height:unset;

        text-align: center;

    }

    #cadre .icone{

        display: block;

        width: 30px;

        margin: 0 auto;

    }

    #cadre .icone img{

        width: 30px;

        height: 30px;

        vertical-align:unset;

        line-height: unset;

    }

}

@media (max-width:400px) {

    #membre_mail .icone_contact{

        display: none;

    }

    #membre_mail .ligne, #membre_mail .nom{

        height:unset;

        vertical-align:unset;

        line-height: unset;

    }

    #membre_mail .intitule{

        height:unset;

        vertical-align:unset;

        line-height: unset;

    }

}