/* Mise en forme générale */
body {
    font-family: "Roboto", sans-serif;
    -webkit-text-size-adjust: 100%;
    font-weight: 400;
}

h1,
h2 {
    margin: 0.2vw;
}

h1 {
    text-align: center;
    margin-top: 1.5vw;
    margin-bottom: 1.3vw;
    font-size: 3.5vw;
}

div.page>aside {
    float: left;
    width: 20%;
}

div.page>div.content {
    margin-left: 20%;
    margin-right: 1em;
}

html.horaire {
    height: 98%;
    margin: 0;
    overflow: hidden;
}

body.horaire,
.page {
    height: 100%;
}

.content {
    height: 85%;
    margin-bottom: 0vw;
}

figcaption>h2 {
    font-size: 1.6vw;
    text-transform: uppercase;
    text-align: left;
    margin-top: 1vw;
}

figcaption>p {
    margin-top: 0.6vw;
    margin-bottom: 0vw;
}

figcaption>p,
address {
    font-size: 1.3vw;
    font-style: normal;
}

figure {
    margin-left: 1.5vw;
    margin-right: 0.2vw;
}

figure>a>img {
    height: 21vw;
    filter: sepia(0%) hue-rotate(-8deg) saturate(100%);
}

/* Mise en forme du menu */
ul#menu {
    padding-top: 1em;
    list-style: none;
}

#menu>li>a {
    font-size: 2.8vw;
    display: block;
    width: 50vw;
    padding: 1.1vw 1.6vw;
    margin: 2vw;
    border: 0.3vw black solid;
    text-decoration: none;
    color: rgb(20%, 20%, 40%);
    border-radius: 5px;
    transition: all 0.3s ease
}

#menu>li>a:hover {
    background-color: rgb(20%, 20%, 40%);
    color: white;
    transform: translateX(2px) translateY(1px);
}

/* Mise en forme des outils */
div.outils {
    margin-top: 5vw;
    margin-left: 3vw;
}

div.outils>h2 {
    margin: 2vw;
    display: block;
    border-bottom: 0.3vw black solid;
}

div.outils>ul>li {
    margin: 1.2vw;
}

div.outils>ul>li>p {
    margin: 0.3vw 0vw;
}

img.compatibilite {
    position: relative;
    top: 0.3em;
}


/* Mise en forme de mon horaire */
.cours,
.sansRV,
.surRV,
.variable {
    color: white;
    font-size: 1.3vw;
}

.cours {
    background-color: rgb(42, 141, 191);
}

.surRV {
    background-color: rgb(10%, 25%, 10%);
}

.variable {
    background: repeating-linear-gradient(135deg, rgb(10%, 25%, 10%), rgb(22%, 44%, 22%) 3.5%);
}

.sansRV {
    background-color: rgb(20%, 40%, 20%);
}

col#heures {
    width: 8%;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    height: 95%;
}

th {
    font-size: 1.2vw;
}

thead th {
    text-align: center;
}

th {
    text-align: right;
    font-size: 1.2vw;
    padding-right: 0.6vw;
}

tr {
    height: 8% !important;
}

td {
    width: 19%;
    min-height: 36px;
    max-height: 8% !important;
    text-align: center;
    padding: 0px;
    border: 0.2vw solid black;
}

td>h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.8vw;
    text-transform: uppercase;
    padding: 0px;
    margin: 0px 0.2vw;
    font-weight: 700;
}

td>h2>.retour {
    display: none !important;
}

td>p {
    font-size: 1.1vw;
    margin: 0px;
    margin-top: 0.3vw
}

.note {
    font-size: 0.98vw;
    text-align: right;
    margin-left: 10%;
}

.mobile {
    display: none;
}

.logo {
    height: 2.5em;
    margin-top: .5em;
    margin-right: .6em;
}

td>h2>.emoji {
    /*pour ajouter un outline blanc (simulé) autour de l'emoji*/
    text-shadow: 1px 1px 0px white,
        -1px 1px 0px white,
        1px -1px 0px white,
        -1px -1px 0px white,
        0 1px 0px white,
        1px 0 0px white,
        0 -1px 0px white,
        -1px 0 0px white;
}

@media screen and (max-width: 1200px) {
    .logo .index {
        height: 2em;
    }

    td>h2>.retour {
        zzz-display: inline !important;
    }

    body.horaire table h2 {
        font-size: 1.8em;
    }

    body.horaire table td>p {
        font-size: 1em;
    }
}

/* Pour afficher un texte de plus grande taille sur cellulaire */
@media screen and (max-width: 650px) {
    div.page>div.content {
        margin-left: 30%;
    }

    body h1 {
        margin: 1.3em;
        font-size: 1em
    }

    body.normal div.page>div.content h2 {
        font-size: 1.0em;
    }

    body.normal div.page>div.content {
        margin-left: 0%;
        margin-right: 0.1em;
        font-size: 0.9em;
    }

    body.normal div.page>aside {
        float: none;
        width: 100%;
    }

    body.normal figcaption>h2 {
        text-align: right;
        font-size: 0.5em;
        margin-top: 0;
        width: 100%;
    }

    body.normal figure {
        margin: .2em 0em;
        position: absolute;
        top: 0px;
        width: 100%;
    }

    figure>a>img {
        height: 45vw;
        /* Sur la page index */
    }

    body.normal figure img {
        height: 4em;
        /* Sur les autres pages */
    }

    body.normal figure figcaption {
        position: absolute;
        top: 0em;
        right: .2em;
        width: 20%;
        margin: 0em .5em;
        height: 85%;
        display: flex;
        align-items: center;
    }

    body.normal figure figcaption>h2 {
        vertical-align: middle;
        text-align: right;
        font-size: 0.6em;
    }

    .desktop {
        display: none;
    }

    body div.page>aside {
        width: 40%;
    }

    figcaption>h2 {
        font-size: 3.5vw;
        margin-top: 1vw;
        margin-right: -.5em;
    }

    figcaption>p {
        margin-top: 0.6vw;
        margin-bottom: 0vw;
    }

    figcaption>p,
    address {
        font-size: 3.2vw;
        font-style: normal;
    }

    figure {
        margin-left: .2vw;
    }

    ul#menu {
        margin: 0em;
    }

    div.page>div.content {
        margin-top: 2em;
        margin-right: .2em;
    }

    ul#menu>li>a {
        font-size: 4.5vw;
        display: block;
        width: 90%;
    }

    /* Mise en forme de mon horaire */
    body.horaire table {
        margin-top: 2em;
    }

    col#heures {
        width: 6.5%;
    }

    body.horaire table td {
        font-size: .9em;
    }

    body.horaire table td>p {
        font-size: 0.9em;
    }

    body.horaire table td:is(.sansRV, .variable, .surRV) {
        font-size: 0.9em;
    }

    body.horaire div.page>div.content table td>h2 {
        font-size: 1.8em;
        margin-bottom: .2em;
    }

    body.horaire table tr th,
    table th:nth-child(1) {
        font-size: 0.65em;
    }

    body.horaire .note {
        font-size: 0.7em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    body.horaire .note span {
        display: none;
    }

    body {
        margin: .2em;
    }

    body.horaire table td span {
        display: none;
    }

    td>h2>.retour {
        display: inline !important;
    }

    html.horaire {
        overflow: auto;
    }
}

/* Pour afficher un texte de plus grande taille sur petit cellulaire */
@media screen and (max-width: 450px) {
    body.normal.horaire {
        margin: 0.1em;
    }

    body h1 {
        margin: 1.7em;
        font-size: 1em;
    }

    body.normal figure figcaption>h2 {
        margin-top: 12%;
        letter-spacing: -0.2px;
        font-size: .7em;
    }

    col#heures {
        width: 5%;
    }

    body.horaire table td {
        font-size: .8em;
    }

    body.horaire div.page>div.content table td>h2 {
        font-size: 1.5em;
        margin-bottom: .4em;
        letter-spacing: -.1px;
    }

    body.horaire table>tbody>tr>td.cours>h2.reduit {
        /*pour correction de l'affichage sur iOS*/
        font-size: .9em;
    }

    body.horaire table tr th span {
        font-size: .8em;
        font-weight: 400;
    }

    body.horaire table tr th {
        vertical-align: top;
        font-size: .7em;
        line-height: .85em;
        padding-top: .25em;
    }

    body.horaire table tr th span:before {
        content: '\A';
    }

}

@media print {
    body {
        margin-top: 4%;
        height: 94%;
    }

    .logo {
        display: none;
    }

    a {
        text-decoration: none;
    }

    body.horaire table td>p {
        font-size: 1.1em;
    }

    body.horaire div.page>div.content table td>h2 {
        font-size: 1.6em;
        margin-bottom: .2em;
    }
    figure>a>img {
        filter: sepia(0%) hue-rotate(-20deg) saturate(80%);
    }
    
    .variable {
        background: repeating-linear-gradient(135deg, rgb(10%, 25%, 10%), rgb(68, 114, 68) 3.5%);
    }
}