footer{
    padding: 10px;
    position:relative;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    scroll-margin-top: auto;background-color: white;
    grid-row: 3 / span 3;
    display: grid;
    grid-template-columns: 50% 30% 20%;
    border-width: bolder;
    border-style:none;
    box-sizing: border-box;
}

.colonneFooter{
    display: grid;
    padding: 10px 20px;
}

.colonneFooter > h2{
    color: black;
}

#principes{
    text-align: left;
    text-decoration: underline;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    padding: 0;
}

.contact{
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    color: rgb(12, 14, 14);
}

#pdirecteur{
    text-align: justify;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    color: rgb(15, 14, 14);

}

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

    footer{
        padding: 10px;
        position:relative;
        bottom: 0; left: 0; right: 0;
        width: 100%;
        scroll-margin-top: auto;background-color: white;
        grid-row: 3 / span 3;
        display: block;
        border-width: bolder;
        border-style:none;
        
    }
    .colonneFooter{
        display: block;
        padding: 10px 20px;
    }

}