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

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

.fond{
    background-color: #e8e8e8;
    user-select: none;
}

.separateurmenu{
    align-items: center;
    border-bottom-style: solid;
    border-color: #bbb;
    padding-top: 1em;
    padding-bottom: 2em;
}

.titre{
    font-family: 'Courier';
    font-weight: bold;
    text-align: center;
    color: black;
}

.bouton{
    position: relative;
    text-align: center;
    font-family: 'Courier';
    font-weight: 1000;
    color: #00aff1;
    text-decoration: none;
    display: inline-block;
    margin: 2px;
}

.boutonin{
    position: relative;
    text-align: center;
    font-family: 'Courier';
    font-weight: 1000;
    color: white;
    text-decoration: none;
    display: inline-block;
    background-color: black;
    border-radius: 20px;
    margin: 2px;
}

.texte{
    display: flex;
    position: relative;
    width: 100%;
    color: black;
    font-family: 'Quick';
}

.courier{
    font-family: 'Courier';
}

.quick{
    font-family: 'Quick';
}

.t-30{
    font-size: 0.7em;
}

.t20{
    font-size: 1.2em;
}

.t30{
    font-size: 1.3em;
}

.t40{
    font-size: 1.4em;
}

.t50{
    font-size: 1.5em;
}

.bleu{
    color: #00aff1;
}

.gris{
    color: gray;
}

.gras{
    font-weight: bold;
}

.sousligne{
    text-decoration: underline;
}

.fb{
    position: block;
    text-align: center;
}

.legal{
    text-align: right;
    color: #bbb;
    font-style: italic;
}

.gauche{
    text-align: left;
}

.droite{
    text-align: right;
}

.fdroite{
    float: right;
}

.noselect{
    user-select: none;
}



@media screen and (orientation: landscape) {

    .separateurmenu{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        display: flex;
        justify-content: center;
    }
    
    .logo{
        width: 18em;
        float: center;
    }

    .titre{
        font-size: 1.5em;
    }

    .bouton{
        font-size: 1.5em;
        padding: 5px;
        padding-top: 8px;
        padding-left: 1em;
        padding-right: 1em;
    }

    .bouton:hover{
        background-color: black;
        border-radius: 20px;
    }
     
    .boutonin{
        font-size: 1.5em;
        padding: 5px;
        padding-top: 8px;
        padding-left: 1em;
        padding-right: 1em;
    }

    .infocontact{
        width: 49.8%;
        font-size: x-large;
        margin-bottom: 3px;
    }

    .sujetcontact{
        width: 100%;
        font-size: x-large;
        margin-bottom: 3px;
    }

    .msgcontact{
        width: 100%;
        font-size: x-large;
        margin-bottom: 3px;
        height: 150px;
        resize: none;
    }

    .btncontact{
        width: 25%;
        font-family: 'Quick';
        font-size: 1em;
        padding-top: 0.5%;
        float: right;
    }

    .texte{
        font-size: 1.5em;
        justify-content: center;
    }

    .largeur{
        width: 70%;
    }

    .carte{
        display: block;
        margin: auto;
        border-radius: 50%;
        height: 80%;
    }

    .fb2{
        width: 30%;
    }

    .largeur1{
        width: 60%;
    }

    .largeur2{
        width: 50%;
    }

    .largeur3{
        width: 40%;
    }

    .pointeur{
        cursor: pointer;
    }

    .depannage:hover{
        background-color: white;
        border-radius: 20px;
        padding-top: 5px;
        padding-right: 6px;
        filter: invert(1);
    }

    .usb{
        height: 18px;
        width: auto;
    }

    .curseur{
        height: 20px;
        width: auto;
        transform: translate(-8px, 6px);
    }
    
    .aero{
        height: 2ca00px;
        width: auto;
    }

}



@media screen and (orientation: portrait) {

    .separateurmenu{
        margin-left: 10px;
        margin-right: 10px;
        justify-content: left;
        padding-top: 1px;
    }

    .logo{
        width: 70%;
        float: left;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    .titre{
        font-size: 1.2em;
    }

    .bouton{
        font-size: 1.35em;
        width: 45%;
        padding: 3px;
        margin-bottom: 0.3em;
    }
     
    .boutonin{
        font-size: 1.35em;
        width: 45%;
        padding: 3px;
        margin-bottom: 0.3em;
        padding-top: 6px;
    }

    .infocontact{
        width: 49.8%;
        font-size: x-large;
        margin-bottom: 3px;
        font-family: 'Quick';
    }

    .sujetcontact{
        width: 100%;
        font-size: x-large;
        margin-bottom: 3px;
        font-family: 'Quick';
    }

    .msgcontact{
        width: 100%;
        font-size: x-large;
        margin-bottom: 3px;
        height: 150px;
        resize: none;
        font-family: 'Quick';
    }

    .btncontact{
        width: 100%;
        font-family: 'Quick';
        font-size: 1.5em;
        padding-top: 0.5%;
    }

    .texte{
        font-size: 1em;
    }

    .largeur{
        width: 100%;
    }

    .largeur1{
        width: 100%;
    }

    .largeur2{
        width: 100%;
    }

    .largeur3{
        width: 100%;
    }

    .carte{
        width: 100%;
        border-radius: 50%;
    }

    .fb2{
        width: 100%;
    }

    .usb{
        height: 12px;
        width: auto;
    }
    
    .curseur{
        height: 18px;
        width: auto;
        transform: translate(-5px, 7px);
    }

    .centre{
        justify-content: center;
    }

}