@media (max-width: 1400px) {

    #resultats {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 1201px) {

    #filtres {
        display: block !important;
    }

    #fermer,
    #btn-filtres {
        display: none;
    }
}

@media (max-width: 1200px) {

    #btn-filtres {
        display: inline-block;
        margin-bottom: 32px;
    }

    #filtres {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 220;
        width: 100%;
        height: 100%;
        background: rgba(0, 60, 84, .95);
        color: #fff;
        overflow: scroll;
    }

    #filtres #label-formation {
        color: var(--bleu0);
    }

    .scroll-criteres {
        flex: 1;
        background: var(--bleu4);
        scrollbar-color: var(--gris) #fff;
    }

    #filtres .check input:checked~span {
        background: var(--gris);
        border-color: var(--gris);
    }

    #filtres a,
    #filtres .normal {
        color: var(--ciel) !important;
        /* opacity: .8; */
    }

    #fermer {
        display: block;
        padding: 10px;
        background: none;
        border: 0;
        -webkit-appearance: none;
        position: absolute;
        z-index: 230;
        top: 8px;
        right: 8px;
    }

    #fermer span {
        display: block;
        background: #fff;
        height: 5px;
        width: 36px;
        transform-origin: 4px 5px;
        transform: rotate(45deg);
    }

    #fermer span:last-child {
        margin-top: 16px;
        transform-origin: 4px 0;
        transform: rotate(-45deg);
    }
}

@media (min-width: 1001px) {

    #menu {
        display: block !important;
    }

    #burger {
        display: none;
    }
}

@media (max-width: 1000px) {

    header {
        display: flex;
        height: 60px;
        padding: 5px 76px 5px 5px;
        background: #fff;
        box-shadow: 0 0 16px rgba(10,60,80,.2);
        position: relative;
        z-index: 30;
    }

    header .logo {
        width: 155px;
        min-width: 155px;
        height: 50px;
        margin-right: 16px;
    }

    #pousse {
        flex: 1;
    }

    #compte {
        display: flex;
        align-items: center;
        text-align: right;
        line-height: 1em;
    }

    #burger {
        display: block;
        padding: 0 10px;
        background: none;
        border: 0;
        -webkit-appearance: none;
        position: absolute;
        z-index: 50;
        top: 8px;
        right: 8px;
    }

    #burger span {
        display: block;
        background: var(--bleu4);
        height: 5px;
        width: 36px;
        margin: 7px 0;
        transition: transform .3s, width .3s;
    }

    #burger span:first-child {
        transform-origin: 4px 5px;
    }

    #burger span:last-child {
        transform-origin: 4px 0;
    }

    .croix {
        position: fixed !important;
    }

    .croix span {
        background: #fff !important;
    }

    .croix span:first-child {
        transform: rotate(45deg) scaleX(1.15);
    }

    .croix span:nth-child(2) {
        transform: scaleX(0);
    }

    .croix span:last-child {
        transform: rotate(-45deg) scaleX(1.15);
    }

    #menu {
        display: none;
        /* display: flex; */
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100% !important;
        z-index: 40;
        background: rgba(0, 60, 84, .95);
        overflow: scroll;
    }

    #menu nav {
        position: static;
        width: 100%;
    }

    #menu .logo,
    #menu .messages {
        display: none;
    }

    #menu .bonjour {
        color: #fff;
        opacity: .5;
    }

    #menu a {
        color: #fff;
        padding: 7px 0;
    }

    #menu .petit {
        padding: 6px 0;
    }

    #mentions,
    #mentions a {
        color: #fff;
    }

    .flou {
        filter: blur(2px);
    }

    #charge {
        left: 0;
    }

    #charge:after {
        margin-left: calc(50vw - 60px);
    }

    .signaler {
        top: 115px;
    }

    .barre-enregistrer {
        left: 0;
    }

    .tableau {
        width: calc(100vw - 128px);
    }

    .info {
        left: auto;
        right: 28px;
    }
}

@media (max-width: 700px) {

    #contenu {
        padding-left: 32px;
        padding-right: 32px;
        text-align: left;
    }

    .signaler {
        position: static;
        display: block;
        margin-bottom: 30px;
    }

    .barre-enregistrer {
        padding-left: 32px;
        padding-right: 32px;
    }

    .tableau {
        width: calc(100vw - 64px);
    }
}

@media (max-width: 500px) {

    body {
        font-size: 1.03em;
    }

    #contenu,
    #resultats,
    .barre-enregistrer {
        padding-left: 16px;
        padding-right: 16px;
        text-align: left;
    }

    #contenu {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .signaler {
        top: 91px;
        right: 16px;
    }

    #photo-nom #profil {
        transform: scale(.75);
        transform-origin: 0 0;
        margin: 0 -25px -15px 0;
    }

    #photo-nom .icone {
        width: 40px;
        height: 40px;
        top: 90px;
    }

    #photo-nom .icone img {
        transform: scale(1);
    }

    #photo-nom h1 {
        padding-top: 0px !important;
        margin-bottom: 5px;
    }

    .tableau {
        width: calc(100vw - 32px);
    }

    .boite {
        padding: 20px 16px 0;
    }

    .barre-enregistrer button,
    .barre-enregistrer a {
        padding: 8px;
    }

    h1 {
        font-size: 2.2em;
        margin-bottom: 20px;
    }

    h1 .verifie {
        width: 28px;
        height: 28px;
        margin-right: 5px;
    }

    .resultat h2 {
        font-size: 1.1em;
    }

    .resultat .et {
        font-size: .9em;
        padding: 3px 14px 5px;
    }

    .message {
        width: 92%;
    }

    .moi {
        margin-left: 8%;
    }

    #retour {
        bottom: 6px;
    }
}

@media (max-width: 350px) {

    .resultat .profil {
        transform-origin: 0 0;
        transform: scale(.8);
        margin-right: 0;
    }

    .resultat h2 {
        font-size: 1.0em;
    }

    #precedent {
        display: inline-block;
        width: 200px !important;
        line-height: 1.1em;
        text-indent: -14px;
        padding-left: 14px;
    }

    .liste-profil {
        flex-wrap: wrap;
    }

    .liste-profil > * {
        min-width: 100%;
    }

    .liste-profil .profil {
        margin-bottom: 10px;
    }
}

@media (max-height: 700px) and (min-width: 800px) {

    #menu a {
        padding: 4px 0;
    }
}

@media only print {

    #contenu {
        font-size: .9em;
        padding: 0;
    }

    h1 {
        font-size: 2em;
    }

    header {
        box-shadow: none;
    }

    #burger,
    .signaler,
    #compte,
    #precedent,
    #imprimer,
    .boite-passe {
        display: none;
    }
}