body {
    background-color: #322b38;
    margin: 0px;
    padding: 0px;
    font-family: arial;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.tac {
    text-align: center;
}

.spacer {
    clear: both;
}

.flexCentre {
    display: flex;
    justify-content: center;
} 



#toto {
    background-image: url(font/nighttravelerital.ttf)
}

@font-face {
    font-family: titre;
    src: url("font/square.ttf");
}

@font-face {
    font-family: metropolis;
    src: url("font/Metropolis-Light.otf");
}

@font-face {
    font-family: tudor;
    src: url("font/tudor.otf");
}

@font-face {
    font-family: night;
    src: url("font/nighttravelerital.ttf");
}


#pageContainer {
    background-color: #d3d3d3;
    border-radius: 0em 0em 4em 4em;
}

.zonePadde {
    padding: 1em;
}



.paragraphe {
    font-family: metropolis;
    color: #343434;
    line-height: 1.5em;
}

.important {
    font-weight: bold;
}

.listeInfo {
    font-family: tudor;
    color: #144040;
    font-size: 1.1em;
    padding: 1em 2.5em;
    font-weight: bold;
    letter-spacing: 0.15em;
    box-shadow: 0px 0px 25px #b7b7b7;
    border-radius: 1em;
    margin-bottom: 10px;
}

.listeInfoLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0.5em 0em;
    background-color: rgba(0, 0, 0, 0.06);
    padding: 0.5em;
    border-radius: 1em;
    border: solid 1px rgba(0, 0, 0, 0.12);
}

.listeInfoLine img{ 
    margin-right: 10px;
}

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

.btUi {
    display: block;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    background-color: #279f9f;
    color: aliceblue;
    margin: 4px;
    cursor: pointer;
}

.label {
    margin: 1em;
}

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

.externalLink {
    font-family: titre;
    display: block;
    font-size: 1.5em;
    /*width: 20%;*/
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    background-color: #279f9f;
    color: aliceblue;
    margin: 4px;
}

.externalLink:hover {
    background-color: #1a806c;
}

#footer {
    height: 4em;
}


@media (min-width: 641px) {
    #pageContainer {
        max-width: 1200px;
        margin: 0px auto;
        box-shadow: 0px 0px 40px rgb(0, 0, 0);
        border: solid 1px #555555;
    }
    
    .titre1 {
        font-family: titre;
        font-weight: normal;
        color: rgba(52, 52, 52, 0.54);
        padding-left: 10%;
        font-size: 2.5em;
    }
    
    .paragraphe {
        width: 80%;
        margin: 0px auto;
        margin-bottom: 2em;
    }
    
    #logoSmall {
        display: none;
    }
    
    #logoBig {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 100;
    }

    /*-------------------- ui ------------------*/
    
    .uiLine {
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

@media (max-width: 640px) {
    .paragraphe {
        font-weight: bold;
    }
    
    .listeInfo {
        /*font-weight: bold;   
        letter-spacing: 0em;*/
    }
    
    .titre1 {
        font-family: titre;
        font-weight: normal;
        color: #343434;
    }
    
    #logoBig {
        display: none;
    }
    
    #logoSmall {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 100;
    }
}