* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-drag: none
}

/*===== Accueil Gestion =====*/

.divNav {
    flex: 1;
    text-align: center
}

.spanNav {
    width: 100px;
    padding: 5px 15px;
    border: 1px solid black;
    background-color: yellow;
    cursor: pointer
}

html, body {overscroll-behavior: none;}

body {
    background-color: #ddffdd;
    overflow: scroll;
    user-select: none
}

.paragraphe {
    margin-top: 20px
}

#titre {
    flex: 1;
    text-align: center;
    font-size: 180%;
    font-weight: 900
}

#cont_princ {
    width: 100%;
    margin-top: 30px
}

/*===== Exercice ====*/
#divExo {
    border: 1px solid black;
    background-color: #ffeeaa;
    margin: 20px 0px
}

.affExo {
    border: 1px solid black;
    background-color: #ff99dd;
    margin: 5px;
    padding: 5px;
}

/*===== Capacite =====*/
#divCapacite {
    border: 1px solid black;
    background-color: #eeffaa;
    margin: 20px 0px
}

.affCapa {
    border: 1px solid black;
    background-color: #ffdd99;
    margin: 5px;
    padding: 5px;
}

/*====== QCM ========*/
.qcm_img_pdf {
    cursor: pointer
}

/*========= Affichage pdf =========*/
#affPdf {
    background-color: yellow;
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    min-height: 200px;
    max-width: 800px;
    margin: auto;
    text-align: center;
    font-size: 150%;
    font-weighth: 900;
    line-height: 200%
}

/*======== Internet =========*/
.case {
    background-color: #aa5555;
    opacity: 0.5;
    cursor: pointer
}

#diagMessage {
    display: none;
    position: fixed;
    width: 400px;
    padding: 15px 20px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #ffff99;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: 10000;
    cursor: pointer;
    font-size: 140%
}

#gridForm {
    display: grid;
    grid-template-columns: 5em 17em 5em auto;
    grid-gap: 5px 10px;
    grid-auto-rows: minmax(1em, auto);
    ;
    vertical-align: middle
}

#dgridForm * {
    align-self: stretch;
    vertical-align: middle;
    display: inline;
    place-self: center stretch;
}

#grid11 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    text-align: right
}

#grid12 {
    grid-column: 2;
    grid-row: 1
}

#grid21 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    text-align: right
}

#grid22 {
    grid-column: 2;
    grid-row: 2
}

#grid31 {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    text-align: right
}

#grid32 {
    grid-column: 2;
    grid-row: 3
}

#grid40 {
    grid-column: 3;
    grid-row: 1 / 4;
    vertical-align: middle;
    display: grid
}

#gridTitle {
    font-size: 200%;
    font-weight: 900;
    grid-column: 4;
    grid-row: 1 / 4;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    display: grid;
    align-items: center
}


.s60{background-size:220px 300px ! important;background:url(sprite-1749638044.webp);display:inline-block;width:60px;height:60px}
.s60.s_a {background-position:-0px -0px}
.s60.s_b {background-position:-0px -60px}
.s60.s_c {background-position:-0px -120px}
.s60.s_d {background-position:-0px -180px}
.s60.s_e {background-position:-0px -240px}
.s60.s_f {background-position:-60px -0px}
.s60.s_g {background-position:-120px -0px}


.s45{background-size:165px 225px ! important;background:url(sprite-1749638044.webp);display:inline-block;width:45px;height:45px}
.s45.s_a {background-position:-0px -0px}
.s45.s_b {background-position:-0px -45px}
.s45.s_c {background-position:-0px -90px}
.s45.s_d {background-position:-0px -135px}
.s45.s_e {background-position:-0px -180px}
.s45.s_f {background-position:-45px -0px}
.s45.s_g {background-position:-90px -0px}


.s30{background-size:110px 150px ! important;background:url(sprite-1749638044.webp);display:inline-block;width:30px;height:30px}
.s30.s_a {background-position:-0px -0px}
.s30.s_b {background-position:-0px -30px}
.s30.s_c {background-position:-0px -60px}
.s30.s_d {background-position:-0px -90px}
.s30.s_e {background-position:-0px -120px}
.s30.s_f {background-position:-30px -0px}
.s30.s_g {background-position:-60px -0px}


.s20{background-size:73px 100px ! important;background:url(sprite-1749638044.webp);display:inline-block;width:20px;height:20px}
.s20.s_a {background-position:-0px -0px}
.s20.s_b {background-position:-0px -20px}
.s20.s_c {background-position:-0px -40px}
.s20.s_d {background-position:-0px -60px}
.s20.s_e {background-position:-0px -80px}
.s20.s_f {background-position:-20px -0px}
.s20.s_g {background-position:-40px -0px}

#eval_fiche_photo_nav {display:flex;align-items: center;margin:3px 0px}
#eval_fiche_photo_nav > :nth-child(1) {margin-left:20px}
#eval_fiche_photo_nav > :nth-child(2) {flex:1;text-align:center}
#eval_fiche_photo_nav > :nth-child(n+3) {margin-right:20px}