/*--Style d'une selection (maintien click gauche)--*/
::selection {
    background-color: #ffffff;
    color: #202124;
}

/*--Taille de la scrollbar--*/
::-webkit-scrollbar {
    width: 8px;
}

/*--Couleur d'arrière plan de la scrollbar--*/
::-webkit-scrollbar-track {
    background-color: #2a2b2f;
}

/*--Couleur et bord arrondi de la scrollbar (premier plan)--*/
::-webkit-scrollbar-thumb {
    background: #FFFFFF;
    border-radius: 10px;
}

/*--Taille minimale de la page html = 100% de la taille de l'écran--*/
html {
    min-height: 100vh;
}

/*--Style du body--*/
body {
    margin: 0px;
    min-height: 100vh;
    background-color: #202124;
    color: #ffffff;
    font-family: helvetica;
}

/*--Style pour écran inférieur à 480 pixels (écran smartphone)--*/
@media screen and (min-width: 0) {
    
    /*--Style du bouton basique--*/
    .button {
        display: block;
        color: #ffffff;
        text-decoration: none;
        max-width: 80%;
        padding: 10px 25px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        font-size: 15px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
    }

    /*--Survol du bouton basique--*/
    .button:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding: 15px 50px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Style du bouton basique alignable--*/
    .button_inline {
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        max-width: 300px;
        padding: 10px 25px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 15px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
        margin-bottom: 15px;
    }

    /*--Survol du bouton basique alignable--*/
    .button_inline:hover{
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Texte basique--*/
    .description {
        font-size: 18px;
        display: block;
    }

    /*--Texte basique avec un margin top--*/
    .txt1 {
        margin-top: 15px;
        font-size: 18px;
        display: block;
    }

    /*--Texte plus petit avec un margin top et bottom--*/
    .txt2 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 16px;
        display: block;
    }

    /*--Zone d'affichage basique--*/
    .affichage {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage plus grande--*/
    .affichage_big {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 90%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage pour les formulaires (plus petite)--*/
    .form {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Block d'affichage pour le logo principal--*/
    #a_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 80px;
        width: 190px;
        padding-top: 20px;
        margin-bottom: 20px;
        user-select: none;
    }

    /*--Logo principal--*/
    .logo {
        height: 80px;
        width: 190px;
    }

    /*--Logo principal dans la page affichage (fixe)--*/
    .logo2 {
        position: fixed;
        top: 50px;
        left: 450px;
        height: 20%;
        width: 20%;
    }

    /*--Block d'affichage pour le bouton deconnexion--*/
    #a_deconnexion {
        position: fixed;
        display: block;
        right: 0;
        top: 0;
        height: 50px;
        width: 50px;
        padding-top: 30px;
        margin-right: 20px;
        z-index: 1;
        user-select: none;
    }

    /*--Logo déconnexion--*/
    .logo_déconnexion {
        height: 30px;
        width: 30px;
        border-radius: 100px;
        padding: 10px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        opacity: 0.8;
    }

    /*--Survol du logo déconnexion--*/
    .logo_déconnexion:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Block d'affichage pour le logo retour--*/
    #a_retour {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
        width: 60px;
        margin-top: 15px;
        margin-bottom: 15px;
        
    }
    
    /*--Bouton retour avec logo--*/
    .logo_retour {
        height: 30px;
        width: 60px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du bouton retour--*/
    .logo_retour:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding-left: 5px;
        padding-right: 5px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Bouton PDF avec logo--*/
    .PDF {
        display: block;
        margin: auto;
        height: 10px;
        width: 50px;
        opacity: 0.8;
    }

    /*--Survol du bouton PDF--*/
    .PDF:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Texte du footer--*/
    .txtfoot {
        color: #ffffff;
        display: block;
        font-size: 12px;
    }

    /*--Taille du checkbox--*/
    .check {
        height: 15px;
        width: 15px;
    }

    /*--Style de la zone de saisie ou de sélection--*/
    .atxt {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 200px;
        padding: 12px 13px;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.30);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol de la zone de saisie--*/
    .atxt:hover {
        padding: 15px 18px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de saisie ou de sélection alignable--*/
    .atxt_inline {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 200px;
        padding: 15px 18px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 16px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        margin-bottom: 15px;
    }

    /*--Survol de la zone de saisie alignable--*/
    .atxt_inline:hover {
        padding: 15px 20px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection de la semaine--*/
    .select_week {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 110px;
        padding: 6px 10px;
        font-size: 9px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
            vertical-align: top;
    }

    /*--Survol de la zone de sélection de la semaine--*/
    .select_week:hover {
        padding: 6px 11px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection grande--*/
    .select_big {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 200px;
        padding: 10px 10px;
        margin-left: auto;
        margin-right: auto;
        font-size: 11px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Survol de la zone de sélection grande--*/
    .select_big:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style des tables--*/
    .table {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 8px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table td, .table th {
        border-width: 2px;
        border-style: solid;
        padding: 2px;
    }

    /*--Style des tables--*/
    .table_big {
        border-collapse: collapse;
        border-width: 0.5px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 8px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table_big td, .table_big th {
        border-width: 0.5px;
        border-style: solid;
        padding: 0.5px;
    }

    /*--Style du tableau de modif des établissements--*/
    .table_modif_etab {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 3.5px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules du tableau de modif des établissements--*/
    .table_modif_etab td, .table_modif_etab th {
        border-width: 2px;
        border-style: solid;
        padding: 2px;
    }

    /*--Style du bouton valider(caché par default)--*/
    #visible_button_js {
        visibility: hidden;
    }

    /*--Style du texte des conditions de mot de passe--*/
    .vérifatxt {
        font-size: 16px;
        display: block;
    }

    /*--Style des boutons actions--*/
    .act {
        text-decoration: none;
        font-size: 13px;
    }

    /*--Style des boutons actions--*/
    .act2 {
        text-decoration: none;
        font-size: 8px;
    }

    /*--Style du message email déjà utilisé--*/
    .red {
        color: red;
    }

    /*--Style du texte d'avertissement--*/
    #clignote  {
        animation-duration: .8s;
        animation-name: clignoter;
        animation-iteration-count: infinite;
        transition: none;
    }
    @keyframes clignoter {
    0%   { color: red; }
    40%   {color: #ffffff; }
    100% { color: red; }
    }

    /*--Style du texte mot de passe oublié--*/
    .mdp_oublié {
        color: #ffffff;
        text-decoration: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        user-select: none;
        transition: 0.5s;
    }

    /*--Survol du texte mot de passe oublié--*/
    .mdp_oublié:hover {
        color: #ffffff7c;
        text-decoration: underline;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer {
        cursor: pointer;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer2 {
        cursor: pointer;
        font-size: 16px;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell {
        cursor: cell;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell2 {
        cursor: cell;
        font-size: 16px;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 0.5px;
        color: #000000;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation2 {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 10px;
        color: #000000;
    }

    /*--Style du texte des horaires--*/
    .horaires {
        font-size: 8px;
    }

    /*--Style du switch--*/
    .switch {
        display: inline-block;
        background-color: #CCCCCC;
        height: 30px;
        width: 220px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch::before {
        content: "Attribution";
        color: #000000;
        font-size: 20px;
        background-color: #FFFFFF;
        height: 22px;
        width: 116px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_edt {
        visibility: hidden;
    }

    #check_edt:checked +.switch {
        background-color: #303030;
    }

    #check_edt:checked +.switch::before {
        left: 100px;
        content: "Edition";
    }

    /*--Style du switch--*/
    .switch_inscrip_connex {
        display: inline-block;
        background-color: #CCCCCC;
        height: 28px;
        width: 204px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch_inscrip_connex::before {
        content: "Connexion";
        color: #000000;
        font-size: 18px;
        background-color: #FFFFFF;
        height: 20px;
        width: 100px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_inscrip_connex {
        visibility: hidden;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex {
        background-color: #303030;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex::before {
        left: 100px;
        content: "Inscription";
    }

    /*--Block d'affichage pour les boutons left et right--*/
    #img_left_right {
        display: inline-block;
        height: 29px;
        width: 29px;
        margin-left: 6px;
        margin-right: 6px;
    }

    /*--Style du logo des boutons left et right--*/
    .logo_img_left_right {
        height: 15px;
        width: 15px;
        padding:4px;
        border-radius: 10px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol des boutons left et right--*/
    .logo_img_left_right:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du modal--*/
    #modal {
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: 70vw;
        max-height: 25vh;
        padding: 0;
        margin: auto;
        position: fixed;
        visibility: hidden;
        background-color: #202124;
        border: solid white;
        text-align: center;
    }

    /*--Style de la croix du modal--*/
    #mmodal {
        position: absolute;
        right: 0;
        font-size: 26px;
        font-weight: bold;
        color: #ffffff96;
    }

    /*--Survol de la croix du modal--*/  
    #mmodal:hover {
        color: #ffffff;
        cursor: pointer;
    }

    /*--Style du select du modal--*/
    #select_space {
        margin-top: 20px;
    }

    /*--Select gris si invalid--*/
    select:required:invalid {
        color: #999999;
    }

    /*--Option du select blanche--*/
    option {
        color: #ffffff;
    }

    /*--Style de l'affichage tv--*/
    .affichage_tv {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 95%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Style de la date dans les affichage tv--*/
    .date_affichage {
        display: block;
        margin-top: 30px;
        font-size: 30px;
        text-decoration: underline;
    }

    /*--Style de la date dans les affichage autre--*/
    .date_affichage2 {
        display: inline-block;
        font-size: 14px;
        margin-left: 4px;
        margin-right: 4px;
        vertical-align: middle;
    }

    /*--Couleur des cours non--*/
    .v_non {
        color: orange;
        user-select: none;
    }

    /*--Couleur des cours non--*/
    .v_oui {
        color: greenyellow;
        user-select: none;
    }

    /*--Style de l'affichage de l'emploi du temps sur la tv--*/
    .affichage_edt {
        display: inline-block;
        vertical-align: top;
        width: 45%;
    }

    /*--Style de l'affichage de la map sur la tv--*/
    .affichage_map {
        display: inline-block;
        width: 45%;
    }

    /*--Style de la map--*/
    .map {
        height: 90%;
        width: 90%;
    }

    /*--Style du footer dans l'affichage tv--*/
    .footer_affichage {
        position: fixed;
        display: inline-block;
        bottom: 50px;
        right: 30px;
        width: 45%;
    }

    /*--Style de la range pour les membres de l'administration--*/
    .mega_range {
        width: 100%;
    }

    /*--Style des mots de passe et identifiants caché--*/
    .unvisible {
        color: #202124;
        border: solid #ffffff;
    }

    /*--Survol des mots de passe et identifiants caché--*/
    .unvisible:hover {
        color: #ffffff;
    }

    /*--Block d'affichage pour le bouton profil--*/
    #profil {
        display: inline-block;
        height: 65px;
        width: 65px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton profil--*/
    .logo_profil {
        height: 30px;
        width: 30px;
        padding:15px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton profil--*/
    .logo_profil:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du textarea--*/
    .textarea {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 150px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol du textarea--*/
    .textarea:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Block d'affichage pour le bouton liste prof--*/
    #liste_prof {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Block d'affichage pour le bouton liste prof--*/
    #liste_prof_etab {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton liste prof--*/
    .logo_liste_prof {
        height: 50px;
        width: 150px;
        padding: 5px 10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton liste prof--*/
    .logo_liste_prof:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Logo des lycées--*/
    .logo_lycée {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        margin-right: 10px;
        user-select: none;
    }

    /*--Style du texte de cours--*/
    .cours {
        font-size: 14px;
    }

    /*--Style du texte du tableau d'ajout de classes--*/
    .txt_ajout_classes {
        font-size: 13px;
    }

    .mail {
        font-size: 18px;
        color: lime;
        text-decoration: lime underline ;
    }

    .txtfoot_version {
        color: #ffffffa9;
        display: block;
        font-size: 10px;
    }
}

/*--Style pour écran entre 1024 pixels et 480 pixels (écran tablette)--*/
@media screen and (min-width: 481px) {

    /*--Style du bouton basique--*/
    .button {
        display: block;
        color: #ffffff;
        text-decoration: none;
        max-width: 336px;
        padding: 12px 28px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        font-size: 18px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
    }

    /*--Survol du bouton basique--*/
    .button:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding: 15px 50px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Style du bouton basique alignable--*/
    .button_inline {
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        max-width: 300px;
        padding: 12px 28px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 18px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
        margin-bottom: 15px;
    }

    /*--Survol du bouton basique alignable--*/
    .button_inline:hover{
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Texte basique--*/
    .description {
        font-size: 20px;
        display: block;
    }

    /*--Texte basique avec un margin top--*/
    .txt1 {
        margin-top: 15px;
        font-size: 20px;
        display: block;
    }

    /*--Texte plus petit avec un margin top et bottom--*/
    .txt2 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 18px;
        display: block;
    }

    /*--Zone d'affichage basique--*/
    .affichage {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage plus grande--*/
    .affichage_big {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 90%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage pour les formulaires (plus petite)--*/
    .form {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Block d'affichage pour le logo principal--*/
    #a_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 100px;
        width: 211.25px;
        padding-top: 20px;
        margin-bottom: 30px;
        user-select: none;
    }

    /*--Logo principal--*/
    .logo {
        height: 100px;
        width: 211.25px;
    }

    /*--Logo principal dans la page affichage (fixe)--*/
    .logo2 {
        position: fixed;
        top: 50px;
        left: 450px;
        height: 20%;
        width: 20%;
    }

    /*--Block d'affichage pour le bouton deconnexion--*/
    #a_deconnexion {
        position: fixed;
        display: block;
        right: 0;
        top: 0;
        height: 70px;
        width: 70px;
        padding-top: 30px;
        margin-right: 40px;
        z-index: 1;
        user-select: none;
    }

    /*--Logo déconnexion--*/
    .logo_déconnexion {
        height: 50px;
        width: 50px;
        border-radius: 100px;
        padding: 10px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        opacity: 0.8;
    }

    /*--Survol du logo déconnexion--*/
    .logo_déconnexion:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Block d'affichage pour le logo retour--*/
    #a_retour {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 50px;
        width: 120px;
        margin-top: 15px;
        margin-bottom: 15px;
        
    }
    
    /*--Bouton retour avec logo--*/
    .logo_retour {
        height: 50px;
        width: 120px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du bouton retour--*/
    .logo_retour:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding-left: 5px;
        padding-right: 5px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Bouton PDF avec logo--*/
    .PDF {
        display: block;
        margin: auto;
        height: 20px;
        width: 70px;
        opacity: 0.8;
    }

    /*--Survol du bouton PDF--*/
    .PDF:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Texte du footer--*/
    .txtfoot {
        color: #ffffff;
        display: block;
        font-size: 12px;
    }

    /*--Taille du checkbox--*/
    .check {
        height: 15px;
        width: 15px;
    }

    /*--Style de la zone de saisie ou de sélection--*/
    .atxt {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 250px;
        padding: 15px 25px;
        margin-left: auto;
        margin-right: auto;
        font-size: 18px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.30);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol de la zone de saisie--*/
    .atxt:hover {
        padding: 15px 30px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de saisie ou de sélection alignable--*/
    .atxt_inline {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 200px;
        padding: 15px 25px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 18px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        margin-bottom: 15px;
    }

    /*--Survol de la zone de saisie alignable--*/
    .atxt_inline:hover {
        padding: 15px 30px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection de la semaine--*/
    .select_week {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 130px;
        padding: 15px 18px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 12px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
            vertical-align: top;
    }

    /*--Survol de la zone de sélection de la semaine--*/
    .select_week:hover {
        padding: 15px 19px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection grande--*/
    .select_big {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 325px;
        padding: 15px 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Survol de la zone de sélection grande--*/
    .select_big:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style des tables--*/
    .table {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 10px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table td, .table th {
        border-width: 2px;
        border-style: solid;
        padding: 5px;
    }

    /*--Style des tables--*/
    .table_big {
        border-collapse: collapse;
        border-width: 1px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 16px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table_big td, .table_big th {
        border-width: 1px;
        border-style: solid;
        padding: 0.5px;
    }

    /*--Style du tableau de modif des établissements--*/
    .table_modif_etab {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 5.5px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules du tableau de modif des établissements--*/
    .table_modif_etab td, .table_modif_etab th {
        border-width: 2px;
        border-style: solid;
        padding: 2px;
    }

    /*--Style du bouton valider(caché par default)--*/
    #visible_button_js {
        visibility: hidden;
    }

    /*--Style du texte des conditions de mot de passe--*/
    .vérifatxt {
        font-size: 18px;
        display: block;
    }

    /*--Style des boutons actions--*/
    .act {
        text-decoration: none;
        font-size: 16px;
    }

    /*--Style des boutons actions--*/
    .act2 {
        text-decoration: none;
        font-size: 14px;
    }

    /*--Style du message email déjà utilisé--*/
    .red {
        color: red;
    }

    /*--Style du texte d'avertissement--*/
    #clignote  {
        animation-duration: .8s;
        animation-name: clignoter;
        animation-iteration-count: infinite;
        transition: none;
    }
    @keyframes clignoter {
    0%   { color: red; }
    40%   {color: #ffffff; }
    100% { color: red; }
    }

    /*--Style du texte mot de passe oublié--*/
    .mdp_oublié {
        color: #ffffff;
        text-decoration: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        user-select: none;
        transition: 0.5s;
    }

    /*--Survol du texte mot de passe oublié--*/
    .mdp_oublié:hover {
        color: #ffffff7c;
        text-decoration: underline;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer {
        cursor: pointer;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer2 {
        cursor: pointer;
        font-size: 16px;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell {
        cursor: cell;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell2 {
        cursor: cell;
        font-size: 16px;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 1.5px;
        color: #000000;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation2 {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 12px;
        color: #000000;
    }

    /*--Style du texte des horaires--*/
    .horaires {
        font-size: 12px;
    }

    /*--Style du switch--*/
    .switch {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch::before {
        content: "Attribution";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_edt {
        visibility: hidden;
    }

    #check_edt:checked +.switch {
        background-color: #303030;
    }

    #check_edt:checked +.switch::before {
        left: 100px;
        content: "Edition";
    }

    /*--Style du switch--*/
    .switch_inscrip_connex {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch_inscrip_connex::before {
        content: "Connexion";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_inscrip_connex {
        visibility: hidden;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex {
        background-color: #303030;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex::before {
        left: 100px;
        content: "Inscription";
    }

    /*--Block d'affichage pour les boutons left et right--*/
    #img_left_right {
        display: inline-block;
        height: 55px;
        width: 55px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /*--Style du logo des boutons left et right--*/
    .logo_img_left_right {
        height: 30px;
        width: 30px;
        padding:10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol des boutons left et right--*/
    .logo_img_left_right:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du modal--*/
    #modal {
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: 60vw;
        max-height: 30vh;
        padding: 0;
        margin: auto;
        position: fixed;
        visibility: hidden;
        background-color: #202124;
        border: solid white;
        text-align: center;
    }

    /*--Style de la croix du modal--*/
    #mmodal {
        position: absolute;
        right: 0;
        font-size: 28px;
        font-weight: bold;
        color: #ffffff96;
    }

    /*--Survol de la croix du modal--*/  
    #mmodal:hover {
        color: #ffffff;
        cursor: pointer;
    }

    /*--Style du select du modal--*/
    #select_space {
        margin-top: 20px;
    }

    /*--Select gris si invalid--*/
    select:required:invalid {
        color: #999999;
    }

    /*--Option du select blanche--*/
    option {
        color: #ffffff;
    }

    /*--Style de l'affichage tv--*/
    .affichage_tv {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 95%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Style de la date dans les affichage tv--*/
    .date_affichage {
        display: block;
        margin-top: 30px;
        font-size: 30px;
        text-decoration: underline;
    }

    /*--Style de la date dans les affichage autre--*/
    .date_affichage2 {
        display: inline-block;
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /*--Couleur des cours non--*/
    .v_non {
        color: orange;
        user-select: none;
    }

    /*--Couleur des cours non--*/
    .v_oui {
        color: greenyellow;
        user-select: none;
    }

    /*--Style de l'affichage de l'emploi du temps sur la tv--*/
    .affichage_edt {
        display: inline-block;
        vertical-align: top;
        width: 45%;
    }

    /*--Style de l'affichage de la map sur la tv--*/
    .affichage_map {
        display: inline-block;
        width: 45%;
    }

    /*--Style de la map--*/
    .map {
        height: 90%;
        width: 90%;
    }

    /*--Style du footer dans l'affichage tv--*/
    .footer_affichage {
        position: fixed;
        display: inline-block;
        bottom: 50px;
        right: 30px;
        width: 45%;
    }

    /*--Style de la range pour les membres de l'administration--*/
    .mega_range {
        width: 100%;
    }

    /*--Style des mots de passe et identifiants caché--*/
    .unvisible {
        color: #202124;
        border: solid #ffffff;
    }

    /*--Survol des mots de passe et identifiants caché--*/
    .unvisible:hover {
        color: #ffffff;
    }

    /*--Block d'affichage pour le bouton profil--*/
    #profil {
        display: inline-block;
        height: 65px;
        width: 65px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton profil--*/
    .logo_profil {
        height: 30px;
        width: 30px;
        padding:15px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton profil--*/
    .logo_profil:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du textarea--*/
    .textarea {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 270px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 19px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol du textarea--*/
    .textarea:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Block d'affichage pour le bouton liste prof--*/
    #liste_prof {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 20px;
        margin-bottom: 15px;
    }

     /*--Block d'affichage pour le bouton liste prof--*/
     #liste_prof_etab {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton liste prof--*/
    .logo_liste_prof {
        height: 50px;
        width: 150px;
        padding: 5px 10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton liste prof--*/
    .logo_liste_prof:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Logo des lycées--*/
    .logo_lycée {
        width: 70px;
        height: 70px;
        margin-left: 15px;
        margin-right: 15px;
        user-select: none;
    }

    /*--Style du texte de cours--*/
    .cours {
        font-size: 16px;
    }

    /*--Style du texte du tableau d'ajout de classes--*/
    .txt_ajout_classes {
        font-size: 16px;
    }

    .mail {
        font-size: 20px;
        color: lime;
        text-decoration: lime underline ;
    }

    .txtfoot_version {
        color: #ffffffa9;
        display: block;
        font-size: 10px;
    }
}

/*--Style pour écran entre 1600 pixels et 1024 pixels (écran ordinateur portable)--*/
@media screen and (min-width: 1025px){

    /*--Style du bouton basique--*/
    .button {
        display: block;
        color: #ffffff;
        text-decoration: none;
        max-width: 335px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        font-size: 22px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
    }

    /*--Survol du bouton basique--*/
    .button:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding: 15px 50px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Style du bouton basique alignable--*/
    .button_inline {
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        max-width: 300px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 22px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
        margin-bottom: 15px;
    }

    /*--Survol du bouton basique alignable--*/
    .button_inline:hover{
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Texte basique--*/
    .description {
        font-size: 24px;
        display: block;
    }

    /*--Texte basique avec un margin top--*/
    .txt1 {
        margin-top: 15px;
        font-size: 24px;
        display: block;
    }

    /*--Texte plus petit avec un margin top et bottom--*/
    .txt2 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 20px;
        display: block;
    }

    /*--Zone d'affichage basique--*/
    .affichage {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage plus grande--*/
    .affichage_big {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 90%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage pour les formulaires (plus petite)--*/
    .form {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 50%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Block d'affichage pour le logo principal--*/
    #a_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 100px;
        width: 211.25px;
        padding-top: 20px;
        margin-bottom: 50px;
        user-select: none;
    }

    /*--Logo principal--*/
    .logo {
        height: 100px;
        width: 211.25px;
    }

    /*--Logo principal dans la page affichage (fixe)--*/
    .logo2 {
        position: fixed;
        top: 50px;
        left: 450px;
        height: 20%;
        width: 20%;
    }

    /*--Block d'affichage pour le bouton deconnexion--*/
    #a_deconnexion {
        position: fixed;
        display: block;
        right: 0;
        top: 0;
        height: 90px;
        width: 90px;
        padding-top: 30px;
        margin-right: 40px;
        z-index: 1;
        user-select: none;
    }

    /*--Logo déconnexion--*/
    .logo_déconnexion {
        height: 70px;
        width: 70px;
        border-radius: 100px;
        padding: 10px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        opacity: 0.8;
    }

    /*--Survol du logo déconnexion--*/
    .logo_déconnexion:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Block d'affichage pour le logo retour--*/
    #a_retour {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 70px;
        width: 150px;
        margin-top: 15px;
        margin-bottom: 15px;
        
    }
    
    /*--Bouton retour avec logo--*/
    .logo_retour {
        height: 70px;
        width: 150px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du bouton retour--*/
    .logo_retour:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding-left: 5px;
        padding-right: 5px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Bouton PDF avec logo--*/
    .PDF {
        display: block;
        margin: auto;
        height: 35px;
        width: 90px;
        opacity: 0.8;
    }

    /*--Survol du bouton PDF--*/
    .PDF:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Texte du footer--*/
    .txtfoot {
        color: #ffffff;
        display: block;
        font-size: 15px;
    }

    /*--Taille du checkbox--*/
    .check {
        height: 15px;
        width: 15px;
    }

    /*--Style de la zone de saisie ou de sélection--*/
    .atxt {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 300px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 20px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.30);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol de la zone de saisie--*/
    .atxt:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de saisie ou de sélection alignable--*/
    .atxt_inline {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 300px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 20px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        margin-bottom: 15px;
    }

    /*--Survol de la zone de saisie alignable--*/
    .atxt_inline:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection de la semaine--*/
    .select_week {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 250px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 18px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
            vertical-align: top;
    }

    /*--Survol de la zone de sélection de la semaine--*/
    .select_week:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection grande--*/
    .select_big {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 450px;
        padding: 15px 25px;
        margin-left: auto;
        margin-right: auto;
        font-size: 15px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Survol de la zone de sélection grande--*/
    .select_big:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style des tables--*/
    .table {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 14px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table td, .table th {
        border-width: 2px;
        border-style: solid;
        padding: 5px;
    }

    /*--Style des tables--*/
    .table_big {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 16px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table_big td, .table_big th {
        border-width: 2px;
        border-style: solid;
        padding: 0.5px;
    }

    /*--Style du tableau de modif des établissements--*/
    .table_modif_etab {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 12px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules du tableau de modif des établissements--*/
    .table_modif_etab td, .table_modif_etab th {
        border-width: 2px;
        border-style: solid;
        padding: 3px;
    }

    /*--Style du bouton valider(caché par default)--*/
    #visible_button_js {
        visibility: hidden;
    }

    /*--Style du texte des conditions de mot de passe--*/
    .vérifatxt {
        font-size: 20px;
        display: block;
    }

    /*--Style des boutons actions--*/
    .act {
        text-decoration: none;
        font-size: 18px;
    }

    /*--Style des boutons actions--*/
    .act2 {
        text-decoration: none;
        font-size: 16px;
    }

    /*--Style du message email déjà utilisé--*/
    .red {
        color: red;
    }

    /*--Style du texte d'avertissement--*/
    #clignote  {
        animation-duration: .8s;
        animation-name: clignoter;
        animation-iteration-count: infinite;
        transition: none;
    }
    @keyframes clignoter {
    0%   { color: red; }
    40%   {color: #ffffff; }
    100% { color: red; }
    }

    /*--Style du texte mot de passe oublié--*/
    .mdp_oublié {
        color: #ffffff;
        text-decoration: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        user-select: none;
        transition: 0.5s;
    }

    /*--Survol du texte mot de passe oublié--*/
    .mdp_oublié:hover {
        color: #ffffff7c;
        text-decoration: underline;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer {
        cursor: pointer;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer2 {
        cursor: pointer;
        font-size: 16px;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell {
        cursor: cell;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell2 {
        cursor: cell;
        font-size: 16px;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 4px;
        color: #000000;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation2 {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 14px;
        color: #000000;
    }

    /*--Style du texte des horaires--*/
    .horaires {
        font-size: 16px;
    }

    /*--Style du switch--*/
    .switch {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch::before {
        content: "Attribution";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_edt {
        visibility: hidden;
    }

    #check_edt:checked +.switch {
        background-color: #303030;
    }

    #check_edt:checked +.switch::before {
        left: 100px;
        content: "Edition";
    }

    /*--Style du switch--*/
    .switch_inscrip_connex {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch_inscrip_connex::before {
        content: "Connexion";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_inscrip_connex {
        visibility: hidden;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex {
        background-color: #303030;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex::before {
        left: 100px;
        content: "Inscription";
    }

    /*--Block d'affichage pour les boutons left et right--*/
    #img_left_right {
        display: inline-block;
        height: 55px;
        width: 55px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /*--Style du logo des boutons left et right--*/
    .logo_img_left_right {
        height: 30px;
        width: 30px;
        padding:10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol des boutons left et right--*/
    .logo_img_left_right:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du modal--*/
    #modal {
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: 60vw;
        max-height: 30vh;
        padding: 0;
        margin: auto;
        position: fixed;
        visibility: hidden;
        background-color: #202124;
        border: solid white;
        text-align: center;
    }

    /*--Style de la croix du modal--*/
    #mmodal {
        position: absolute;
        right: 0;
        font-size: 28px;
        font-weight: bold;
        color: #ffffff96;
    }

    /*--Survol de la croix du modal--*/  
    #mmodal:hover {
        color: #ffffff;
        cursor: pointer;
    }

    /*--Style du select du modal--*/
    #select_space {
        margin-top: 20px;
    }

    /*--Select gris si invalid--*/
    select:required:invalid {
        color: #999999;
    }

    /*--Option du select blanche--*/
    option {
        color: #ffffff;
    }

    /*--Style de l'affichage tv--*/
    .affichage_tv {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 95%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Style de la date dans les affichage tv--*/
    .date_affichage {
        display: block;
        margin-top: 30px;
        font-size: 30px;
        text-decoration: underline;
    }

    /*--Style de la date dans les affichage autre--*/
    .date_affichage2 {
        display: inline-block;
        font-size: 25px;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /*--Couleur des cours non--*/
    .v_non {
        color: orange;
        user-select: none;
    }

    /*--Couleur des cours non--*/
    .v_oui {
        color: greenyellow;
        user-select: none;
    }

    /*--Style de l'affichage de l'emploi du temps sur la tv--*/
    .affichage_edt {
        display: inline-block;
        vertical-align: top;
        width: 45%;
    }

    /*--Style de l'affichage de la map sur la tv--*/
    .affichage_map {
        display: inline-block;
        width: 45%;
    }

    /*--Style de la map--*/
    .map {
        height: 90%;
        width: 90%;
    }

    /*--Style du footer dans l'affichage tv--*/
    .footer_affichage {
        position: fixed;
        display: inline-block;
        bottom: 50px;
        right: 30px;
        width: 45%;
    }

    /*--Style de la range pour les membres de l'administration--*/
    .mega_range {
        width: 100%;
    }

    /*--Style des mots de passe et identifiants caché--*/
    .unvisible {
        color: #202124;
        border: solid #ffffff;
    }

    /*--Survol des mots de passe et identifiants caché--*/
    .unvisible:hover {
        color: #ffffff;
    }

    /*--Block d'affichage pour le bouton profil--*/
    #profil {
        display: inline-block;
        height: 65px;
        width: 65px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton profil--*/
    .logo_profil {
        height: 30px;
        width: 30px;
        padding:15px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton profil--*/
    .logo_profil:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du textarea--*/
    .textarea {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 350px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol du textarea--*/
    .textarea:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Block d'affichage pour le bouton liste prof--*/
    #liste_prof {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 30px;
        margin-bottom: 15px;
    }

     /*--Block d'affichage pour le bouton liste prof--*/
     #liste_prof_etab {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton liste prof--*/
    .logo_liste_prof {
        height: 50px;
        width: 150px;
        padding: 5px 10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton liste prof--*/
    .logo_liste_prof:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Logo des lycées--*/
    .logo_lycée {
        width: 80px;
        height: 80px;
        margin-left: 20px;
        margin-right: 20px;
        user-select: none;
    }

    /*--Style du texte de cours--*/
    .cours {
        font-size: 18px;
    }

    /*--Style du texte du tableau d'ajout de classes--*/
    .txt_ajout_classes {
        font-size: 18px;
    }

    .mail {
        font-size: 24px;
        color: lime;
        text-decoration: lime underline ;
    }

    .txtfoot_version {
        color: #ffffffa9;
        display: block;
        font-size: 10px;
    }
}

/*--Style pour écran supérieur à 1600 pixels (écran ordinateur fixe)--*/
@media screen and (min-width: 1601px) {

    /*--Style du bouton basique--*/
    .button {
        display: block;
        color: #ffffff;
        text-decoration: none;
        max-width: 30%;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        font-size: 22px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
    }

    /*--Survol du bouton basique--*/
    .button:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding: 15px 50px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Style du bouton basique alignable--*/
    .button_inline {
        display: inline-block;
        color: #ffffff;
        text-decoration: none;
        max-width: 300px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 22px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        cursor: pointer;
        margin-bottom: 15px;
    }

    /*--Survol du bouton basique alignable--*/
    .button_inline:hover{
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
    }

    /*--Texte basique--*/
    .description {
        font-size: 28px;
        display: block;
    }

    /*--Texte basique avec un margin top--*/
    .txt1 {
        margin-top: 15px;
        font-size: 28px;
        display: block;
    }

    /*--Texte plus petit avec un margin top et bottom--*/
    .txt2 {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 22px;
        display: block;
    }

    /*--Zone d'affichage basique--*/
    .affichage {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 70%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage plus grande--*/
    .affichage_big {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 90%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Zone d'affichage pour les formulaires (plus petite)--*/
    .form {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 40%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Block d'affichage pour le logo principal--*/
    #a_logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 100px;
        width: 211.25px;
        padding-top: 20px;
        margin-bottom: 80px;
        user-select: none;
    }

    /*--Logo principal--*/
    .logo {
        height: 100px;
        width: 211.25px;
    }

    /*--Logo principal dans la page affichage (fixe)--*/
    .logo2 {
        position: fixed;
        top: 50px;
        left: 450px;
        height: 20%;
        width: 20%;
    }

    /*--Block d'affichage pour le bouton deconnexion--*/
    #a_deconnexion {
        position: fixed;
        display: block;
        right: 0;
        top: 0;
        height: 90px;
        width: 90px;
        padding-top: 30px;
        margin-right: 40px;
        z-index: 1;
        user-select: none;
    }

    /*--Logo déconnexion--*/
    .logo_déconnexion {
        height: 70px;
        width: 70px;
        border-radius: 100px;
        padding: 10px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        opacity: 0.8;
    }

    /*--Survol du logo déconnexion--*/
    .logo_déconnexion:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Block d'affichage pour le logo retour--*/
    #a_retour {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 90px;
        width: 200px;
        margin-top: 15px;
        margin-bottom: 15px;
        
    }
    
    /*--Bouton retour avec logo--*/
    .logo_retour {
        height: 90px;
        width: 200px;
        border-radius: 6px;
        user-select: none;
        border: solid rgb(255, 255, 255,0.1);
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du bouton retour--*/
    .logo_retour:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        padding-left: 5px;
        padding-right: 5px;
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Bouton PDF avec logo--*/
    .PDF {
        display: block;
        margin: auto;
        height: 50px;
        width: 120px;
        opacity: 0.8;
    }

    /*--Survol du bouton PDF--*/
    .PDF:hover {
        opacity: 1;
        cursor: pointer;
    }

    /*--Texte du footer--*/
    .txtfoot {
        color: #ffffff;
        display: block;
        font-size: 18px;
    }

    /*--Taille du checkbox--*/
    .check {
        height: 15px;
        width: 15px;
    }

    /*--Style de la zone de saisie ou de sélection--*/
    .atxt {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 300px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.30);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol de la zone de saisie--*/
    .atxt:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de saisie ou de sélection alignable--*/
    .atxt_inline {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 300px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        margin-bottom: 15px;
    }

    /*--Survol de la zone de saisie alignable--*/
    .atxt_inline:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection de la semaine--*/
    .select_week {
        display: inline-block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 300px;
        padding: 15px 32px;
        margin-left: 2%;
        margin-right: 2%;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
            vertical-align: top;
    }

    /*--Survol de la zone de sélection de la semaine--*/
    .select_week:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style de la zone de sélection grande--*/
    .select_big {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 600px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Survol de la zone de sélection grande--*/
    .select_big:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Style des tables--*/
    .table {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 20px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table td, .table th {
        border-width: 2px;
        border-style: solid;
        padding: 5px;
    }

    /*--Style des tables--*/
    .table_big {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 20px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules des tables--*/
    .table_big td, .table_big th {
        border-width: 2px;
        border-style: solid;
        padding: 0.5px;
    }

    /*--Style du tableau de modif des établissements--*/
    .table_modif_etab {
        border-collapse: collapse;
        border-width: 2px;
        border-style: solid;
        color: #ffffff;
        margin: auto;
        font-size: 20px;
        font-family: helvetica;
        box-shadow: 11px 11px 22px #161719,
        -11px -11px 22px #2a2b2f;
    }

    /*--Style des cellules du tableau de modif des établissements--*/
    .table_modif_etab td, .table_modif_etab th {
        border-width: 2px;
        border-style: solid;
        padding: 5px;
    }

    /*--Style du bouton valider(caché par default)--*/
    #visible_button_js {
        visibility: hidden;
    }

    /*--Style du texte des conditions de mot de passe--*/
    .vérifatxt {
        font-size: 22px;
        display: block;
    }

    /*--Style des boutons actions--*/
    .act {
        text-decoration: none;
        font-size: 20px;
    }

    /*--Style des boutons actions--*/
    .act2 {
        text-decoration: none;
        font-size: 20px;
    }

    /*--Style du message email déjà utilisé--*/
    .red {
        color: red;
    }

    /*--Style du texte d'avertissement--*/
    #clignote  {
        animation-duration: .8s;
        animation-name: clignoter;
        animation-iteration-count: infinite;
        transition: none;
    }
    @keyframes clignoter {
    0%   { color: red; }
    40%   {color: #ffffff; }
    100% { color: red; }
    }

    /*--Style du texte mot de passe oublié--*/
    .mdp_oublié {
        color: #ffffff;
        text-decoration: none;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        user-select: none;
        transition: 0.5s;
    }

    /*--Survol du texte mot de passe oublié--*/
    .mdp_oublié:hover {
        color: #ffffff7c;
        text-decoration: underline;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer {
        cursor: pointer;
    }

    /*--Style de cellule avec curseur pointer--*/
    .pointer2 {
        cursor: pointer;
        font-size: 16px;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell {
        cursor: cell;
    }

    /*--Style de cellule avec curseur cell--*/
    .cell2 {
        cursor: cell;
        font-size: 16px;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 10px;
        color: #000000;
    }

    /*--Style de cellule tournée à 90°--*/
    .rotation2 {
        writing-mode:vertical-rl;
        rotate: -180deg;
        font-size: 16px;
        color: #000000;
    }

    /*--Style du texte des horaires--*/
    .horaires {
        font-size: 18px;
    }

    /*--Style du switch--*/
    .switch {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch::before {
        content: "Attribution";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_edt {
        visibility: hidden;
    }

    #check_edt:checked +.switch {
        background-color: #303030;
    }

    #check_edt:checked +.switch::before {
        left: 100px;
        content: "Edition";
    }

    /*--Style du switch--*/
    .switch_inscrip_connex {
        display: inline-block;
        background-color: #CCCCCC;
        height: 38px;
        width: 260px;
        border-radius: 100px;
        position: relative;
        cursor: pointer;
        transition: background-color 0.25s;
    }

    .switch_inscrip_connex::before {
        content: "Connexion";
        color: #000000;
        font-size: 25px;
        background-color: #FFFFFF;
        height: 30px;
        width: 156px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-radius: 100px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
        transition: left 0.5s;
    }

    #check_inscrip_connex {
        visibility: hidden;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex {
        background-color: #303030;
    }

    #check_inscrip_connex:checked +.switch_inscrip_connex::before {
        left: 100px;
        content: "Inscription";
    }

    /*--Block d'affichage pour les boutons left et right--*/
    #img_left_right {
        display: inline-block;
        height: 65px;
        width: 65px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /*--Style du logo des boutons left et right--*/
    .logo_img_left_right {
        height: 40px;
        width: 40px;
        padding:10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol des boutons left et right--*/
    .logo_img_left_right:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du modal--*/
    #modal {
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-width: 60vw;
        max-height: 30vh;
        padding: 0;
        margin: auto;
        position: fixed;
        visibility: hidden;
        background-color: #202124;
        border: solid white;
        text-align: center;
    }

    /*--Style de la croix du modal--*/
    #mmodal {
        position: absolute;
        right: 0;
        font-size: 28px;
        font-weight: bold;
        color: #ffffff96;
    }

    /*--Survol de la croix du modal--*/  
    #mmodal:hover {
        color: #ffffff;
        cursor: pointer;
    }

    /*--Style du select du modal--*/
    #select_space {
        margin-top: 20px;
    }

    /*--Select gris si invalid--*/
    select:required:invalid {
        color: #999999;
    }

    /*--Option du select blanche--*/
    option {
        color: #ffffff;
    }

    /*--Style de l'affichage tv--*/
    .affichage_tv {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        width: 95%;
        text-align: center;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
    }

    /*--Style de la date dans les affichage tv--*/
    .date_affichage {
        display: block;
        margin-top: 30px;
        font-size: 30px;
        text-decoration: underline;
    }

    /*--Style de la date dans les affichage autre--*/
    .date_affichage2 {
        display: inline-block;
        font-size: 30px;
        margin-left: 10px;
        margin-right: 10px;
        vertical-align: middle;
    }

    /*--Couleur des cours non--*/
    .v_non {
        color: orange;
        user-select: none;
    }

    /*--Couleur des cours non--*/
    .v_oui {
        color: greenyellow;
        user-select: none;
    }

    /*--Style de l'affichage de l'emploi du temps sur la tv--*/
    .affichage_edt {
        display: inline-block;
        vertical-align: top;
        width: 45%;
    }

    /*--Style de l'affichage de la map sur la tv--*/
    .affichage_map {
        display: inline-block;
        width: 45%;
    }

    /*--Style de la map--*/
    .map {
        height: 90%;
        width: 90%;
    }

    /*--Style du footer dans l'affichage tv--*/
    .footer_affichage {
        position: fixed;
        display: inline-block;
        bottom: 50px;
        right: 30px;
        width: 45%;
    }

    /*--Style de la range pour les membres de l'administration--*/
    .mega_range {
        width: 100%;
    }

    /*--Style des mots de passe et identifiants caché--*/
    .unvisible {
        color: #202124;
        border: solid #ffffff;
    }

    /*--Survol des mots de passe et identifiants caché--*/
    .unvisible:hover {
        color: #ffffff;
    }

    /*--Block d'affichage pour le bouton profil--*/
    #profil {
        display: inline-block;
        height: 75px;
        width: 75px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton profil--*/
    .logo_profil {
        height: 40px;
        width: 40px;
        padding:15px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton profil--*/
    .logo_profil:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Style du textarea--*/
    .textarea {
        display: block;
        background-color: #202124;
        color: #ffffff;
        text-decoration: none;
        width: 440px;
        padding: 15px 32px;
        margin-left: auto;
        margin-right: auto;
        font-size: 22px;
        border-radius: 4px;
        user-select: none;
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-bottom: solid rgba(255, 255, 255, 0.30);
        border-right: solid rgba(255, 255, 255, 0.3);
        border-left: solid rgba(0, 0, 0, 0.5);
        border-top: solid rgba(0, 0, 0, 0.5);
        transition: 0.5s;
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        resize: none;
    }

    /*--Survol du textarea--*/
    .textarea:hover {
        padding: 15px 40px;
        box-shadow: 25px 25px 35px #161719,
            -25px -25px 35px #2a2b2f;
    }

    /*--Block d'affichage pour le bouton liste prof--*/
    #liste_prof {
        display: inline-block;
        height: 75px;
        width: 205px;
        margin-left: 10px;
        margin-right: 40px;
        margin-bottom: 15px;
    }

     /*--Block d'affichage pour le bouton liste prof--*/
     #liste_prof_etab {
        display: inline-block;
        height: 65px;
        width: 190px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
    }

    /*--Style du logo du bouton liste prof--*/
    .logo_liste_prof {
        height: 60px;
        width: 180px;
        padding: 5px 10px;
        border-radius: 20px;
        border: solid rgb(255, 255, 255,0.1);
        box-shadow: 11px 11px 22px #161719,
            -11px -11px 22px #2a2b2f;
        background-color: #202124;
        cursor: pointer;
        vertical-align: middle;
        user-select: none;
        transition: 0.5s;
        background: linear-gradient(145deg, rgb(34, 35, 39), #1d1e20);
        box-shadow:  11px 11px 22px #161719,
                -11px -11px 22px #2a2b2f;
        opacity: 0.8;
    }

    /*--Survol du logo du bouton liste prof--*/
    .logo_liste_prof:hover {
        background: linear-gradient(145deg, rgb(45, 46, 50), rgb(29, 30, 32));
        box-shadow:  20px 20px 30px #161719,
                -20px -20px 30px #2a2b2f;
        opacity: 1;
    }

    /*--Logo des lycées--*/
    .logo_lycée {
        width: 100px;
        height: 100px;
        margin-left: 20px;
        margin-right: 20px;
        user-select: none;
    }

    /*--Style du texte de cours--*/
    .cours {
        font-size: 22px;
    }

    /*--Style du texte du tableau d'ajout de classes--*/
    .txt_ajout_classes {
        font-size: 20px;
    }

    /*--Style du texte du mail--*/
    .mail {
        font-size: 28px;
        color: lime;
        text-decoration: lime underline ;
    }

    .txtfoot_version {
        color: #ffffffa9;
        display: block;
        font-size: 10px;
    }
}