@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fa-regular-400.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fa-solid-900.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html,body {
    margin: 0;
    min-height: 100vh;
    overscroll-behavior-x: none;
}

body,body * {
    /* text-size-adjust: none !important; */
    /* -webkit-text-size-adjust: none !important; */
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
}

/*#page div.extpng, #page div.extjpg, #page div.extgif {
    z-index: -1 !important;
}*/
a, span, div, table, tr, td, form {
    position: relative;
}

p {
    text-align: justify;
}

input[type='submit'].showonchange {
    display: none;
}

input[type='submit'].showonchange.changed {
    display: block;
}

td[style*="border"] {
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

body:not([id="tinymce"]) {
    background-color: #e8edef;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    color: #000;
    display: flex;
    flex-flow: column;
}

body.minimalheader {
    background-color: #ffffff;
}

a {
    text-decoration: none;
}

select#mailselect {
    width: 100%;
}

select[name="creformacrspd"] {
    font-size: 10px;
    color: #e37326;
    margin-top: 5px;
    float: right;
    max-width: 50%;
}

option.mailmodele {
    background: #f7eaa9;
}

option.titremailjet {
    color: #f7eaa9;
    text-align: center;
    font-weight: bold;
}

span[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.html_ariane a {
    text-decoration: underline;
    font-size: 12px;
    color: #ffae24;
}

.html_ariane {
    margin-bottom: 30px;
}

/*dans gmail les paragraphes MsoNormal n'on pas de marge*/
.MsoNormal {
    margin: 0;
}

/*flex tables*/
#page table[class^="flex"]>tbody>tr {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#page table[class^="flex"]>tbody>tr>td {
    margin: 5px;
}

#page table.flex100>tbody>tr>td {
    flex-basis: 100px;
}

#page table.flex200>tbody>tr>td {
    flex-basis: 200px;
}

#page table.flex400>tbody>tr>td {
    flex-basis: 400px;
}

#page table.max2parligne>tbody>tr>td {
    min-width: 49%;
}

#page table.max3parligne>tbody>tr>td {
    min-width: 32%;
}

#page table.max4parligne>tbody>tr>td {
    min-width: 24%;
}

/*#page table.maxw300
{
    max-width:300px;
}
#page table.maxw400
{
    max-width:400px;
}
#page table.maxw600
{
    max-width:600px;
}
#page table.maxw800
{
    max-width:800px;
}*/
/*message page*/
div#messagepage {
    position: fixed;
    bottom: 100px;
    left: 0;
    width: 90%;
    background: linear-gradient(135deg, #ffad25, transparent);
    border-bottom: 5px solid #7f7f7f;
    padding: 10px 4vw;
    transform: translateX(-100%);
    transition: 1s all;
    z-index: 10;
    box-shadow: rgb(0 0 0 / 32%) 1px 6px 12px;
    opacity: 0;
}

div#messagepage.visible {
    transform: translateX(0);
    opacity: 1;
}

#messagepage #cheminpage>div {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

#messagepage #cheminpage>div.transparent {
    opacity: 0.3;
}

#messagepage #cheminpage>div + div {
    font-size: 28px;
    font-weight: normal;
}

#messagepage #cheminpage>div + div + div {
    font-size: 24px;
}

#messagepage #cheminpage>div + div + div + div {
    font-size: 20px;
}

/*programme*/
#programme {
    background: #fff;
    border-left: 1px solid #4aace8;
    z-index: 5;
    padding: 7px;
    box-sizing: border-box;
    overflow: hidden;
    transition: 0.5s all;
    line-height: 20px;
    max-width: 95%;
}

#programme:hover li {
    pointer-events: none;
}

#programme li.encours>details {
    display: block;
}

#programme li.encours>details>summary {
    background: #4aace8;
    color: #fff;
    border-bottom: 1px solid #fff;
}

#programme summary:first-letter {
    text-transform: uppercase;
}

.tree {
    --spacing: 16px;
    --radius: 7px;
    --marker-bg-default: #ddd;
    --marker-bg-haschild: #6b9abb;
    line-height: 2rem;
}

.tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
}

.tree ul li {
    border-left: 2px solid #ddd;
}

.tree ul li:last-child {
    border-color: transparent;
}

.tree ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    width: calc(var(--spacing) + 2px);
    height: calc(var(--spacing) + 1px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

.tree summary {
    display: block;
    cursor: pointer;
}

.tree summary::marker, .tree summary::-webkit-details-marker {
    display: none;
}

.tree summary:focus {
    outline: none;
}

.tree summary:focus-visible {
    outline: 1px dotted #000;
}

.tree li::after, .tree summary::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2 - var(--radius) + 2px);
    left: calc(var(--spacing) - var(--radius) - 2px);
    width: calc(2 * var(--radius));
    height: calc(2 * var(--radius));
    border-radius: 50%;
    background: var(--marker-bg-default);
}

.tree summary::before {
    content: "+";
    z-index: 1;
    background: var(--marker-bg-haschild);
    color: #fff;
    line-height: calc(2 * var(--radius));
    text-align: center;
}
.tree li.lu summary::before
{
    content: attr(data-check);
    color:#0d9c2c;
    background:#fff;
    box-shadow:#0d9c2c 0 0 0px 1px;
}

.tree details[open] > summary::before {
    content: "-";
}

/*filtre*/
.filtered {
    display: none !important;
}

/*recherche*/
span#recherche input {
    width: 100px;
    height: 22px;
    opacity: 0.5;
    border-color: #eee;
    transition: 0.2s all;
}

span#recherche input:hover {
    width: 200px;
    border-color: #ff9e19;
    opacity: 1;
}

span#recherche {
    flex-grow: 1;
    text-align: right;
    margin-bottom: 2px;
    float: right;
}

.flexline {
    display: flex;
}

/*chargement*/
div#chargement {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #fdfdfd;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    transition: 1s all;
    opacity: 0;
    pointer-events: none;
}

div#chargement.actif {
    pointer-events: all;
    opacity: 0.7;
    transition: 1s all;
}

div#chargement.top {
    height: 145px;
    top: -31px;
}

div#chargement.fin .lds-ring {
    display: none;
}

div#chargementtexte {
    font-weight: bold;
    font-size: 16px;
    color: #6b6b6b;
    width: 600px;
    max-width: 90%;
    height: 10px;
}

div#chargementtexte>div:not(:first-child) {
    opacity: 0.8;
}

#filterctn>input {
    width: 120px;
    height: 20px;
}

#clrfilter {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-5px,-50%);
    opacity: 0.5;
    cursor: pointer;
}

#clrfilter:before {
    content: "\f55a";
    font-family: 'FontAwesome';
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #f7990d;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #d20000 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    border-top-color: #00c4ff;
}

.lds-ring div:nth-child(2) {
    border-top-color: #ff7600;
}

.lds-ring div:nth-child(3) {
    border-top-color: #ff3b00;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*header*/
#header * {
    transition: top,opacity 0.3s,0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.49, 1.23);
}

video {
    max-width: 100%;
}

#page video {
    width: 100%;
    height: auto;
    max-height: 100%;
    pointer-events: all;
}

jodit-media {
    pointer-events: none;
}

.center {
    text-align: center;
    margin: auto;
}

.encadre {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 5px;
    margin-top: 10px;
}

/*document-manquant*/
div#document-manquant {
    text-align: center;
    width: 80%;
    margin: 100px auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    font-size: 16px;
    line-height: 22px;
}

/*popup video*/
div#popup-video-accueil>video {
    margin: auto;
    display: block;
}

div#popup-video-accueil div.htmlvideo {
    background: none;
}

div#popup-video-accueil::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid white;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    animation: fadeout 5s 2s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*header*/
#header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    background-color: #e7ecee;
    padding-bottom: 10px;
    /* box-shadow: inset hsl(0deg 0% 0% / 13%) 0px -3px 13px; */
    flex-shrink: 0;
    margin-top: 9px;
}

#header:after {
    /* content:""; */
    /* width:50px; */
}

#header #logo>span {
    background-image: url(/img/logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 100%;
    animation: funnyrotation 5s;
    animation-iteration-count: infinite;
    transform-origin: center;
    filter: drop-shadow(5px 10px 6px rgba(0,0,0,0.1));
    /* transform: translateY(12px) rotate(-85deg); */
    /* height: 200px; */
    /* width: 200px; */
    display: inline-block;
}

@keyframes funnyrotation {
    0%, 5% {
        transform: rotateZ(0);
    }

    7% {
        transform: rotateZ(-15deg);
    }

    9% {
        transform: rotateZ(10deg);
    }

    11% {
        transform: rotateZ(-10deg);
    }

    13% {
        transform: rotateZ(6deg);
    }

    15% {
        transform: rotateZ(-4deg);
    }

    17%, 100% {
        transform: rotateZ(0);
    }
}

#header>a,#header>div {
    display: flex;
    width: 151px;
    height: 100%;
    color: #fff;
    justify-content: center;
    align-items: flex-end;
    top: 0;
    font-size: 14px;
    white-space: nowrap;
    max-width: 14%;
    position: relative;
    z-index: 2;
}

/*header de premiere page*/
.body_>#header {
    height: 190px
}

.body_>#header>a {
    display: none;
}

.body_>#header>a#logo {
    display: block;
    position: absolute;
    top: 0;
    filter: drop-shadow(17px 23px 10px rgba(0,0,0,0.2));
    z-index: 1;
    width: 200px;
    height: 200px;
}

.body_>#header #logo>span {
    height: 200px;
    width: 200px;
    display: inline-block;
}

.html_form select[multiple][name="partenaire"] {
    height: 100px;
}

.body_>#header>a.profil {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 10px;
    opacity: 0.2;
}

.body_>#header>a.profil:hover {
    opacity: 1;
}

.body_>#header>a.profil:before {
    display: none;
}

.body_>#header>a.profil>span {
    top: 0;
}

/*liens externe*/
body[class^="body_"] a[target='_blank']:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f35d";
    width: 0;
    margin-left: 2px;
}

#adminuserlist a[target='_blank']:after {
    content: none;
}

#header a[target='_blank']:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f35d";
    width: 0;
    position: absolute;
    bottom: 20px;
    right: 14px;
    font-size: 14px;
}

.max100 {
    max-width: 100%;
}

.top-btn span {
    background-color: #aaa;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.1) 1px 4px 5px;
    top: 30px;
    opacity: 0;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-btn.loaded span {
    opacity: 1;
    top: -10px;
    position: relative;
}

#header>a:hover {
    top: -5%;
}

.top-btn:hover span {
    top: -20%;
}

.top-btn.cours span {
    background-color: #4aace8;
    transition-delay: 0.100s;
}

.top-btn.lexique span {
    background-color: #96d92f;
    transition-delay: 0.100s;
}

.top-btn.profil span {
    background-color: #fd385a;
    transition-delay: 0.175s;
}

.top-btn.resultat span {
    background-color: #fdd538;
    transition-delay: 0.250s;
}

.top-btn.statistiques span {
    background-color: #40e34e;
    transition-delay: 0.325s;
}

.top-btn.presse span {
    background-color: #f59225;
    transition-delay: 0.400s;
}

.top-btn#menu_ludique span {
    background-color: #7993f7;
    transition-delay: 0.475s;
}

.bouton {
    background-color: #aaa;
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 10px;
    border-radius: 50px;
    box-shadow: rgba(0,0,0,0.1) 1px 4px 5px;
    top: 60px;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #b1b1b1;
    color: #fff;
}

.bouton.standard {
    top: unset;
}

.bouton[disabled],button[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

.datedispo {
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgb(248 248 248 / 30%);
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
    z-index: 1;
}

.fluppercase {
    text-transform: capitalize;
    font-weight: bold;
}

#header>a:before, #header>div:before {
    font-family: FontAwesome;
    position: absolute;
    top: 27%;
    font-size: 30px;
    text-shadow: rgb(172 172 172) -1px 8px 6px;
    opacity: 0.9;
    /* -webkit-text-stroke: 1px #e1e1e1; */
    transition: text-shadow 0.5s;
}

body.body_ div#menu_ludique {
    display: none;
}

div#menu_ludique>div {
    position: absolute;
    /* top: 90px; */
    left: 50%;
    /* overflow: hidden; */
    height: 0;
    width: calc(30px + 3vw);
    background: #fff;
    border-radius: 50px;
    transform: translateX(-50%);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    width: 36px;
    height: 36px;
    /* border-radius: 0; */
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    top: 27%;
    transform: translate(-50%,-3px);
    border-radius: 5px;
    box-shadow: rgb(172 172 172) -1px 8px 8px;
}

div#menu_ludique:hover>div,div#menu_ludique.hightlighted>div {
    width: 50px;
    border-radius: 30px;
}

#header div#menu_ludique:not(:hover):not(.hightlighted)>div>a{
    width: 14px;
    height: 14px;
    margin: 0;
}

div#menu_ludique a:hover {
    top: -1%;
}

div#menu_ludique:hover > div, 
div#menu_ludique.hightlighted > div {
    animation: ouvertureMenu 0.3s;
    /* Ajout de la duree de l'animation */
    overflow: visible;
    height: 247px;
}

div#menu_ludique.hightlighted [href='/lesjeux']
{
    animation:gonfle 0.5s infinite;
}

@keyframes gonfle {
    0% {
            transform:scale(1.0);
    }
    50% {
        transform:scale(1.5);
    }

    100% {
        transform:scale(1.0);
    }
}
@keyframes ouvertureMenu {
    0% {
        height: 0;
        /* Taille de depart */
        overflow: hidden;
    }

    99% {
        height: 247px;
        overflow: hidden;
    }

    100% {
        height: 247px;
        /* Taille finale apres 1 seconde */
        overflow: visible;
    }
}

#header #menu_ludique a {
    text-align: center;
    width: 40px;
    height: 40px;
    margin: 10px 0px;
    display: block;
    overflow: visible;
    flex-shrink: 0;
}

#header #menu_ludique a>span {
    overflow: initial;
    box-shadow: none;
    top: 15px;
    padding: 0 5px;
    position: absolute;
    left: -8px;
    transform: translateX(-100%);
    white-space: nowrap;
    max-width: unset;
    z-index: 6;
    font-weight: bold;
    background: #fff;
    display: none;
}

#header #menu_ludique a:hover>span {
    display: inline-block;
}

#header #menu_ludique a:before {
    position: relative;
    font-size: 15px;
    color: #fff;
    text-shadow: none;
}

#header #menu_ludique a:after {
    content: "";
}

#header>a:hover:before, #header>div:hover:before {
    text-shadow: rgb(172 172 172) 0px 0px 2px;
    opacity: 1;
}

#header a.planning:before {
    content: "\f073";
}

#header a.cours:before {
    content: "\f549";
}

#header #menu_ludique:before {
    content: "\f5fd";
}

#header #menu_ludique a:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#header a.profil:before {
    content: "\f007";
}

#header a.resultat:before {
    content: "\f681";
}

#header a.statistiques:before {
    content: "\f201";
}

#header a.contact:before {
    content: "\f2b6";
}

#header a.lexique:before {
    background: url(/img/icons8-carnet-40.png);
}

#header a.presse:before {
    background: url(/img/icons8-journal-40.png);
}

#header a.podcast:before {
    background: url(/img/icons8-podcast-40.png);
}

#header a.jeux:before {
    background: url(/img/icons8-jeux-40.png);
}

div#filariane {
    background: #d5d5d5;
    padding: 2px 8px;
    color: #206d9d;
}

div#filariane a {
    color: #206d9d;
}

.top-btn.profil span#quitter {
    position: relative;
    right: 0;
    top: -20px;
    width: 15px;
    height: 15px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.top-btn.profil span#quitter:hover {
    background-color: #fff;
    border: 2px solid #fd385a;
    color: #fd385a;
}

div#alerte_sessioncv {
    background: #4aace8;
    padding: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

div#alerte_sessioncv a {
    color: #fff;
}

.html_button.cv_oral a {
    background: #edc500;
}

.html_button.cv_ecrit a {
    background: #898989;
}

.html_button.cv_session a {
    background: #ed8a00;
}

.html_button.cv_direct a {
    background: #3a3939;
}

.html_button.cv_ecrit:before, .html_button.cv_oral:before {
    content: attr(data-heure);
    display: inline-block;
    margin-right: 5px;
    background: #464646;
    color: #fff;
    padding: 0 3px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

/*exam classe virtuelle*/
div#examcv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

div#examcv iframe {
    border: none;
    flex-basis: 50%;
    flex-grow: 1;
    min-height: 430px;
    min-width: 250px;
}

.btnsignexam, .signexam {
    display: none;
}

/*gestion classe virtuelle*/
form#cv_form input {
    width: 50%;
}

form#cv_form div {
    display: flex;
    align-items: center;
}

form#cv_form div>div {
    flex-grow: 1;
}

div#copieetsujet {
    display: flex;
    height: calc(100% - 50px);
}

div#copieetsujet.r0 {
    flex-flow: row;
}

div#copieetsujet.r1 {
    flex-flow: column;
}

div#copieetsujet.r2 {
    flex-flow: row-reverse;
}

div#copieetsujet.r3 {
    flex-flow: column-reverse;
}

div#copieetsujet>div {
    display: flex;
    flex-flow: column;
}

div#copieetsujet>* {
    flex-basis: 50%;
}

div[name="copieexamen"] {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 200px;
    font-size: 16px;
    font-family: sans-serif;
}

div#sujetexamen>img {
    max-width: 100%;
}

div#sujetexamen {
    overflow-y: auto;
    border-right: 1px solid #4aace8;
    transition: 0.5s all;
}

div#copieexamen {
    transition: 0.5s all;
}

#copieetsujet.maxcopie div#sujetexamen {
    flex-basis: 25px;
    overflow: hidden;
    background: #4aace8;
}

#copieetsujet.maxcopie div#copieexamen {
    flex-basis: 100%;
}

div#previewcopie {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1240px;
    max-width: 90%;
    height: 100%;
    z-index: 1;
    background: #e7e7e7;
    border: 5px solid #00adff;
    overflow-y: auto;
    display: none;
    box-sizing: border-box;
}

div#previewcopie.visible {
    display: block;
}

div#previewcopie img {
    max-width: 100%;
    background: #fff;
    margin-bottom: 5px;
}

div#togglesujet,div#rotatelayout {
    width: 20px;
    height: 20px;
    background: #eee;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000;
    border-radius: 10px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
    cursor: pointer;
}

div#rotatelayout {
    top: 25px;
}

div#rotatelayout:after {
    font-family: FontAwesome;
    content: "\f2f1";
}

div#togglesujet:after {
    content: "<";
}

div#togglesujet.hide:after {
    content: ">";
}

/*admin user*/
.html_liste>* span.useractions {
    white-space: nowrap;
    align-items: center;
    display: inline-flex;
}

.icone:after {
    font: normal normal normal 14px/1 FontAwesome;
    opacity: 0.2;
    margin: 0 2px;
}

.icone.clone:after {
    content: "\f24d";
}

.icone.import:after {
    content: "\f56f";
}

.icone.connexion:after {
    content: "\f1e6";
}

.icone.suppr:after {
    content: "\f2ed";
}

.icone.restore:after {
    content: "\f829";
}

.icone.archiver:after {
    content: "\f1c6";
}

.icone.up:after {
    content: "\f077";
}

.icone.down:after {
    content: "\f078";
}

.icone.cours:after {
    content: "\f19d";
}

.icone.clone.cours:after, .icone.clone.suppr:after {
    color: #f00
}

.icone:after {
    padding: 0px 2px;
    margin: 0 2px;
}

.icone.questionnaire:after {
    border: 2px solid #4aace8;
    border-radius: 50%;
    color: #4aace8;
    content: "Q";
    font-weight: bold;
}

.icone.upgrade:after {
    color: #4aace8;
    content: "\f102";
    font-size: 16px;
}

.icone.lectureclone:after {
    color: #f30606;
    content: "\f48b";
    font-size: 16px;
}

.icone.document:after {
    border-top-left-radius: 5px;
    background: #666;
    color: #fff;
}

.icone.document.convocation:after {
    font-family: unset;
    content: "C";
}

.icone.document.suivi:after {
    font-family: unset;
    content: "S";
}

.icone.document.resultat:after {
    font-family: unset;
    content: "R";
}

.icone.document.temps:after {
    font-family: unset;
    content: "T";
}

.icone.document.attestation:after {
    font-family: unset;
    content: "A";
}

.icone.document.livret:after {
    font-family: unset;
    content: "L";
}

.icone.document.lreelles:after {
    font-family: unset;
    content: "lr";
}

.icone:hover:after {
    opacity: 1;
}

.userbutton[data-filter*="|DOCUMENTS|"] {
    background: #fbf1bf;
}

.userbutton {
    display: flex;
    position: relative;
}

.userbutton.classeur {
    background: #ffb52b;
}

.userbutton.classeur a {
    color: #fff;
}

.userbutton.classeur .up,.userbutton.classeur .down {
    display: none;
}

.userbutton.wip {
    background: #c5e1ee;
}

.userbutton.supprime {
    background: #fcdad7;
}

.userbutton.archive {
    background: #c3c6c8;
}

.userbutton.brouillon {
    background: #e3e5e7;
    opacity: 0.5;
}

.userbutton:after {
    font-size: 8px;
}

.userbutton.wip:after {
    content: "WIP";
}

.userbutton.supprime:after {
    content: "SUPPRIME";
}

.userbutton.archive:after {
    content: "ARCHIVE";
}

.userbutton.brouillon:after {
    content: "BROUILLON";
}

.coursuserbutton {
    display: flex;
    position: relative;
}

.userbutton.grandcompte {
    background: #c6e7fb;
}

.userbutton.archive {
    background: #e6e6e6;
}

.userbutton.demo {
    background: #fffbec;
}

.userbutton>a, .coursuserbutton>a {
    flex-grow: 1;
}

/*admin*/
div#adminmenu {
    background: #666;
    display: flex;
    justify-content: space-evenly;
    transition: 0.2s all;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    border-bottom: 1px solid #ffae25;
}

div#adminmenu a {
    color: #fff;
    padding: 5px;
    transition: 0.2s all;
    word-break: break-word;
}

div#adminmenu a:hover {
    background: #777;
}

div#adminmenu:hover {
    background: #555;
}

.userselect {
    height: 22px;
}

.html_form.userselect td {
    height: unset;
}

option[data-datefin]:not([data-datefin="0"]):not([data-datefin=""]) {
    background-color: #88c07b;
}

option[data-datefin="0"] {
    background-color: #fad276;
}

.userselect select, .coursselect select {
    padding: 0 !important;
    max-width: 150px;
    height: 22px;
    display: inline-block;
}

.coursselect select {
    max-width: unset;
}

.tox.tox-tinymce {
    min-height: 500px;
}

/*recherche admin*/
div#resultatsrecherche a {
    font-size: 12px;
    text-decoration: underline;
    margin-bottom: 4px;
    display: inline-block;
}

div#resultatsrecherche>div {
    position: relative;
    top: -10px;
    border: 1px solid #ffb52b;
    padding: 10px;
}

div#resultatsrecherche h3 {
    margin-bottom: 0;
    margin-top: 0;
}

/*espace client*/
a.signable {
    background: #13a6ec;
    color: #fff;
    padding: 0 5px;
    ;display: inline-block;
    border-radius: 15px;
    border: 1px solid #fff;
}

a.signable:hover {
    background: #f6ac28;
}

a.signable:before {
    content: "\f5b7";
    font-family: FontAwesome;
    margin-right: 5px;
}

a.signable.uploaddoc {
    background: #118ad9;
}

a.signable.uploaddoc:before {
    content: "\f093";
}

object#docsigniframe {
    width: 100%;
    height: 50vh;
    min-height: 400px;
}

div#docsignature {
    position: relative;
    max-width: 100%;
    margin: auto;
    margin-top: 11px;
    text-align: center;
    page-break-inside: avoid !important;
}

div#docsignature div[id^="canvasDiv"] {
    max-width: 100%;
    height: 250px;
    position: relative;
    text-align: center;
}

div#docsignature canvas {
    background: #fff;
    max-width: 95%;
    border: 3px solid #0195ff;
    margin: auto;
    border-radius: 4px;
}

div#docsignature h1 {
    margin-top: 0;
}

div#docsignature span {
    color: var(--btn-primary-bg);
}

div#docsignature button {
    background: #0195ff;
    border-style: none;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
}

a.signe:after {
    content: "SIGNE";
    background: #20a520;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 5px;
}

#formespaceclientinfoperso {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

#formespaceclientinfoperso > div {
    display: flex;
    flex-flow: column;
    width: 50%;
    min-width: 220px;
}

#formespaceclientinfoperso > div > div {
    display: flex;
    flex-wrap: wrap;
}

#formespaceclientinfoperso > div > div > div {
    flex-grow: 1;
    margin-left: 1vw;
    margin-right: 1vw;
    min-width: 97px;
    margin-top: 11px;
}

#formespaceclientinfoperso > div > div > input {
    margin-left: 1vw;
    margin-right: 1vw;
    width: 200px;
    margin-top: 5px;
    flex-grow: 1;
}

/*page*/
div#maincontent {
    width: 100%;
    flex-grow: 1;
    display: flex;
    box-sizing: border-box;
    flex-flow: row-reverse;
}

div#maincontent>div {
    background: #fff;
    margin: 1vw;
    padding: 2vw;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: rgb(0 0 0 / 4%) 3px 1px 10px;
}

div#maincontent>div#leftblock {
    flex-basis: 280px;
    margin-left: 0;
    display: flex;
    flex-flow: column;
}

div#maincontent>div#leftblock #page {
    flex-grow: 1;
}

div#leftblock img {
    transition: 1s;
}

div#leftblock.fadeimages img, div#leftblock.fadeimages .clock {
    opacity: 0.1;
}

div#maincontent>div#rightblock {
    flex-basis: 300px;
    flex-grow: 1;
    position: relative;
    max-width: 100%;
}

body.wip div#maincontent>div#rightblock {
    background: #fbe4b5;
}

/*administration*/
.userbutton.admin>a {
    font-weight: bold;
    color: #ea000e;
}

.userbutton.admin.inactive>a {
    font-weight: bold;
    color: #e49095;
}

.userbutton.partenaire>a {
    color: #4aace8;
}

.userbutton.demo>a {
    color: #999;
}

.userbutton.inactive>a {
    color: #999;
}

.userbutton[data-filter*="|utilisateur"]:after {
    content: "A RENSEIGNER";
    position: absolute;
    top: 50%;
    right: 0;
    background: #ea000e;
    color: #fff;
    border-radius: 10px;
    padding: 0 5px;
}

.userbutton.v1>a {
    opacity: 0.2;
}

.userbutton.v1>a:after {
    content: " v1";
}

.userbutton.online>a:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 7px;
    border: 1px solid #0ede32;
    background: radial-gradient(circle at center, #c3ffcd, #00ff08 80%, #04ff00 100%);
    box-shadow: #0f0 0 0 6px;
    display: inline-block;
    margin-right: 5px;
}

.cours .html_liste {
    width: 400px;
    flex-grow: 1;
}

.html_colonne.cours {
    flex-wrap: wrap;
}

/*administration cours utilisateur*/
.html_liste.groupescours [data-idc] {
    white-space: nowrap;
    display: flex;
}

.html_liste.groupescours [data-idc]>a {
    white-space: normal;
    flex-grow: 1;
}

.coursuserbutton.offcursus {
    opacity: 0.2;
    /* pointer-events: none; */
}

/*cours utilisateur*/
.html_liste.listecourscandidat,h3.infoconnexion {
    flex-basis: 100%;
}

/*suivi emails*/
.suiviemail .html_colonne div {
    padding: 0 5px;
}

.suiviemail .html_colonne :nth-child(1) {
    flex-basis: 50px;
    min-width: 85px;
}

.suiviemail .html_colonne :nth-child(2) {
    flex-basis: 50px;
    min-width: 100px;
    font-weight: bold;
}

.suiviemail .html_colonne :nth-child(3) {
    flex-basis: 200px;
}

div#mailpreview * {
    font-size: 12px !important;
    max-width: 100%;
    font-style: italic;
}

div#mailpreview {
    border: 2px solid #f59c24;
    padding: 32px;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

/*maintenance*/
div#maintenance {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 30px;
    width: 500px;
    margin: auto;
    top: 100px;
}

/*flash*/
#moduleflash {
    position: absolute;
    top: 163px;
    left: 100px;
    width: 800px;
    height: 560px;
    box-shadow: 1px 5px 20px rgba(0,0,0,0.5);
    background-image: url(swf.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #add9ff;
    margin: auto;
    margin-top: 50px;
    position: relative !important;
    left: 0;
    top: 0;
}

/*page coursuser*/
input[type="checkbox"] ~ .debutfinformation {
    display: none;
}

input[type="checkbox"]:checked ~ .debutfinformation {
    display: block;
}

/*login page*/
form#loginpageform {
    width: 311px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 40px 3vw;
    margin: 50px auto;
    max-width: 100%;
    box-sizing: border-box;
}

form#loginpageform input {
    width: 100%;
    border: 1px solid #ffad28;
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

form#loginpageform input[type="submit"] {
    padding: 6px;
    background: #4aace8;
    border: none;
    color: #fff;
}

/*footer*/
div#footer {
    background-color: #515963;
    height: 60px;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset rgba(0,0,0,0.2) 0px 3px 20px;
    flex-shrink: 0;
}

a.minibtn:after {
    font-family: "Font Awesome 5 Brands";
    font-size: 23px;
}

a.minibtn:hover {
    top: -2px;
}

body[class^="body_"] a.minibtn.facebook:after {
    content: "\f082";
    color: #87c0e9;
}

body[class^="body_"] a.minibtn.linkedin:after {
    content: "\f08c";
    color: #2ac0ed;
}

a.minibtn.jobs:after {
    width: 40px;
    height: 40px;
    background: url(/img/JOB.png);
    background-size: contain;
    z-index: 1;
}

a.minibtn.actualites:after {
    width: 40px;
    height: 40px;
    background: url(/img/ACTUALITE.png);
    background-size: contain;
    z-index: 1;
}

table {
    padding : 0px;
    border-spacing: 0px;
    border: 0;
    font-family: arial;
    font-size: 12px;
    border-collapse: collapse;
}

td {
    padding : 0px;
}

a {
    color: #555555;
}

body h1, body h2, body h3 {
    font-weight: normal;
    display: block;
    margin-top: 40px;
    margin-bottom: 20px;
}

body h1 {
    font-size: 21px;
    margin-top: 0;
    border-bottom: 1px solid #ececec;
    width: 100%;
}

body h2 {
    border-bottom: 1px solid #ececec;
    font-size: 17px;
    width: fit-content;
}

body h2.contenu {
    width: 100%;
}

#leftblock h2 {
    margin-top: 10px
}

body h3 {
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    width: fit-content;
}

#page, .note-editor {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

#page h1, .note-editor h1 {
    font-size: 22px;
    color: #4aace8;
    text-decoration: underline;
}

#page h2, .note-editor h2 {
    font-family: Arial;
    font-size: 20px;
    color: #FF6600;
    text-decoration: none;
}

#page h3, .note-editor h3 {
    font-family: Arial;
    font-size: 18px;
    color: #313131;
    text-decoration: none;
}

#page h4, .note-editor h4 {
    font-family: Arial;
    font-size: 16px;
    color: #313131;
    text-decoration: none;
}

/*preview template mailjet dans adminmail*/
div#mailjetpreview {
    transform: scale(0.5);
    transform-origin: top center;
    margin: auto;
    border: 6px solid #0077f1;
    position: relative;
    cursor: not-allowed;
}

div#mailjetpreview:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    display: block;
    content: "";
    opacity: 0;
}

div#mailjetpreview * {
    pointer-events: none;
}

/**/
button#deletevideo:after {
    content: "\f4e2";
    font-family: FontAwesome;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.signature {
    width: 330px;
    height: 170px;
    background: aliceblue;
    display: inline-block;
    border: 1px dashed #9cbfff;
}

input[name="signea"] {
    background: aliceblue;
    border: 1px dashed #9cbfff;
}

.signature.signe {
    background: none;
    border: none;
}

table.table2signatures {
    margin: auto;
}

table.table2signatures td {
    border: 1px solid #666;
    vertical-align: baseline;
    width: 50%;
    padding: 10px;
}

.texteaudio {
    max-width: 100%;
    width: 100%;
    font-size: 12px;
    font-style: italic;
}

.texteaudio::before {
    content: "Video translation";
    position: block;
    background: #59cbb1;
    color: #fff;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 12px;
}

body.fr .texteaudio {
    display: none;
}

body.fr[class*='displayalttext'] .texteaudio {
    display: block;
}

.jodit-wysiwyg .texteaudio {
    display: block !important;
    border: 1px dotted #59cbb1;
    color: #59cbb1;
    font-style: italic;
}

div[class*="html_"]>h2 {
    margin-top: 0;
}

.black {
    color: #333;
    text-shadow: none;
}

.orange {
    color: #f90;
    text-shadow: none;
}

.grey {
    color: #c1c0c0;
    text-shadow: none;
}

.rouge {
    color: #fd385a;
    text-shadow: none;
}

.bleu {
    color: #4aace8;
    text-shadow: none;
}

.bgbleu {
    background-color: #4aace8;
}

.vert {
    color: #00a8aa;
    text-shadow: none;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.note-editor, input[name="objet"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

.note-editable {
    min-height: 140px !important;
}

.note-editor div[class^="respbloc"] {
    margin: 1px;
    border: 1px #aaa;
    border-style: dashed;
    min-width: 20px;
    min-height: 20px;
}

#page .note-editable video {
    max-height: 40vh;
}

:not([class^="respbloc"])>div[class^="respbloc"] {
    display: flex;
    flex-wrap: wrap;
}

div[class^="respbloc"]>div[class^="respbloc"] {
    min-height: 20px;
    flex-basis: 200px;
    flex-grow: 1;
    max-width: 95vw;
}

div[class^="respbloc"]>div.respbloc200 {
    min-width: 200px;
}

div[class^="respbloc"]>div.respbloc300 {
    min-width: 300px;
}

div[class^="respbloc"]>div.respbloc400 {
    min-width: 400px;
}

div[class^="respbloc"]>div.respbloc500 {
    min-width: 500px;
}

#variablesmail {
    background: rgba(255,255,255,0.5);
    margin-top: 5px;
    border-radius: 3px;
    padding: 5px;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

#variablesmail>div {
    width: 50%;
}

.messageimportant {
    color: #f8740f;
    text-shadow: none;
    font-weight: bold;
}

/*adminemail*/
.blocoptions>div {
    display: flex;
    justify-content: space-around;
}

.blocoptions>div>div {
    display: flex;
    flex-flow: column;
    width: 30%;
    justify-content: inherit;
}

div>.blocoptions {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s all;
    transition-delay: 0.5s;
}

div:hover>.blocoptions {
    max-height: 500px;
}

/*-----------*/
.TGraph {
    margin: 0;
    padding: 0;
    position: absolute;
}

.TGraph li {
    border: 1px solid #555;
    background: #66f;
    border-bottom: none;
    bottom: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}

.TGraph2 {
    margin: 0;
    padding: 0;
    position: absolute;
}

.TGraph2 li {
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    border-bottom: none;
    bottom: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}

.courslist {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

.titregroupe {
    font-size: 10px;
    text-align: center;
    margin-bottom: 10px;
}

div#usercours_cursus {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    padding: 5px;
}

div#usercours_pdfs {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px
}

div#usercours_pdfs>div {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    padding: 5px;
    font-size: 10px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.03) 2px 3px 5px;
}

div#usercours_pdfs>div a {
    margin: 0 5px;
}

#usercours_pdfs.attestation {
    margin-bottom: 30px;
}

.listpdf span {
    display: block;
    margin: 10px 0;
}

.listpdf span.pdftogen:not(.message) {
    display: none;
}

.listpdf span.generationterminee, .listpdf span.generationencours {
    display: block!important;
    border-radius: 10px;
    padding: 1px 5px;
    color: #fff;
}

.listpdf span.generationterminee a {
    color: #fff;
}

.listpdf span.generationterminee {
    background: #62abda;
}

.listpdf span.generationterminee span {
    display: none;
}

.listpdf span.generationencours {
    background: #f1a627;
    overflow: hidden;
}

.listpdf span.generationencours .pourcentage {
    display: block;
    position: absolute;
    background: #62abda;
    left: 0;
    top: -10px;
    height: 100%;
    width: 0%;
}

.pdftogen:not(.generationterminee) a {
    display: none;
}

.generationencours:after {
    content: " ";
    display: block;
    background: white;
    opacity: 0.5;
    animation: borealisBar 2s linear infinite;
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    top: 0;
}

@keyframes borealisBar {
    0% {
        left: 0%;
        right: 100%;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        right: 0%;
        transform: translateX(0);
    }
}

.modulelist {
    font-size: 14px;
    font-weight: bold;
    padding-left: 100px;
    color: #666;
    text-shadow: none;
}

.sectionlist {
    font-size: 13px;
    padding-left: 150px;
    color: #666;
    text-shadow: none;
}

.partielist {
    font-size: 12px;
    padding-left: 200px;
    color: #666;
    text-shadow: none;
}

.pagelist {
    width: 100%;
    text-align: right;
    display: inline-block;
    color: #666;
    text-shadow: none;
    margin-top: 5px;
}

.modulelist, .sectionlist, .partielist, .pagelist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fieldreponse {
    width: 170px;
}

.fieldquestion {
    width: 100%;
}

.minigray {
    text-shadow: none;
    font-size: 8px;
    color: #666;
}

.userinfo {
    border: 1px #888 solid;
    background-color: rgba(0,0,0,0.1);
    padding: 10px;
}

.userinfotitrecours {
    position: relative;
    height: 25px;
    vertical-align: top;
}

.userinfotitrecours > div {
    font-weight: bold;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    color: #fff;
}

.userinfocours {
    border: 1px #888 solid;
    background-color: rgba(0,0,0,0.1);
    padding: 10px;
}

#usercours_demo {
    color: #f00;
}

.purplebutton {
    border: 1px solid #fff;
    display: inline-block;
    cursor: pointer;
    padding: 2px 8px;
    background: #4cbaff;
    box-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
    position: relative;
    color: #fff;
}

.purplebutton.red {
    background: #f44336;
}

.purplebutton:hover {
    top: -1px
}

.purplebutton:active {
    top: 2px
}

.boutonfichierperso {
    border: #fff 1px solid;
    padding: 5px;
    width: 220px;
    border-radius: 17px;
    background-color: rgba(255,255,255,0.3);
    box-shadow: rgba(0,0,0,0.2) 1px 3px 4px;
    margin-top: 10px;
}

.boutondocument {
    border: #fff 1px solid;
    padding: 5px;
    width: 220px;
    border-radius: 17px;
    background-color: rgba(255,255,255,0.3);
    box-shadow: rgba(0,0,0,0.2) 1px 3px 4px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

#adminuserlist {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 5px;
    display: flex;
    flex-flow: column;
    height: 983px;
    flex-wrap: wrap;
}

#adminuserlist>div {
    width: 194px;
    height: 20px;
}

.usercase .grandcompte {
    background: #ffa655;
    padding: 0 4px;
    border-radius: 6px;
}

div#legende-userlist {
    display: flex;
    align-items: center;
    justify-content: center;
}

div#legende-userlist>div {
    margin: 5px 8px;
}

.bigletter {
    font-size: 16px;
    font-weight: bold;
}

div#menu {
    margin: auto;
    position: relative;
    border: 1px solid #fff;
    width: 100%;
    max-width: calc(100% - 2.5vw);
    font-weight: 500;
    font-size: 18px;
    transition: 0.5s opacity;
}

div#menu.loading {
    opacity: 0;
}

.cours {
    border: 1px solid #eee;
    border-radius: 10px;
}

#menu .cours .titre {
    height: 65px;
    align-items: center;
    justify-content: center;
    display: flex;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}

button#retourmenu:after {
    content: "\f100";
    font-family: FontAwesome;
    font-size: 30px;
    color: #5e5e5e38;
    cursor: pointer;
    transition: 0.2s all;
}

button#retourmenu:hover:after {
    color: #ff9612;
    margin-right: 10px;
}

button#retourmenu {
    border: none;
    background: none;
}

div#previewcours {
    width: 360px;
    overflow: hidden;
}

div#cours {
    position: fixed;
    top: 1%;
    left: 1%;
    background: #fff;
    width: 98%;
    height: 98%;
    margin: auto;
    box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 4px;
    opacity: 0.98;
    transition: 0.2s all;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
}

#cours.magnified {
    zoom: 1.2; width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#cours.hidden {
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    opacity: 0;
}

#cours #page {
    margin: 0;
    position: relative;
    font-family: arial;
    line-height: 1;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    left: 0;
    transform-origin: top;
    max-width: 800px;
}

#cours #page.v2 {
    margin: 50px calc(25vw - 88px);
    min-height: calc(100% - 100px);
    line-height: 1;
    font-size: 17px;
    text-align: justify;
    box-sizing: border-box;
}

#cours #page [class*="elmanim_"] {
    transition: 1s all ease;
}

#cours #page [class*="elmanim_fadein"] {
    opacity: 0.1;
}

#cours #page [class*="elmanim_slidein"] {
    transform: translateX(200%);
    opacity: 0;
}

#cours #page [class*="elmanim_3dflip"] {
    transform-origin: left;
    transform: rotateX(10deg) rotateY(117deg);
    will-change: transform;
    backface-visibility: hidden;
    opacity: 0;
}

#cours #page [class*="elmanim_show"] {
    opacity: 1;
    transform: none;
}

#cours #page div[id^="img"] {
    text-align: justify;
    perspective: 760px;
}

/*image responsive*/
#page img[style="width: 25%;"] {
    min-width: 200px;
}

#page img[style="width: 50%;"] {
    min-width: 250px;
}

#page img[style="width: 100%;"] {
    min-width: 300px;
}

#page img {
    max-width: 100%;
    border-radius: 10px;
    margin: auto;
    display: block;
}

#page video {
    border-radius: 10px;
}

/*notes*/
div#maincontent>div#leftblock.slided {
    position: fixed;
    z-index: 3;
    box-shadow: rgb(0 0 0 / 10%) -4px 4px 9px;
    right: -7px;
    top: 90px;
    height: 100%;
    max-width: 370px;
    transform: translateX(100%);
    max-height: calc(100% - 120px);
    margin: 4px;
    /* margin-right: 0; */
    padding-right: 0;
    overflow: initial;
    background: #fff;
    transition: 0.3s all;
    transition-delay: 0.5s;
}

div#maincontent>div#leftblock.slided>div {
    display: flex;
    flex-flow: column-reverse;
    overflow: auto;
    padding-right: 5px;
}

div#maincontent>div#leftblock.slided:hover {
    transform: translateX(0%);
}

div#maincontent>div#leftblock #ongletnote,
div#maincontent>div#leftblock #ongletprogramme
{
    display:none;
}
div#maincontent>div#leftblock.slided #ongletnote,
div#maincontent>div#leftblock.slided #ongletprogramme
{
    background: #ffe97b;
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-90deg) translate(-100%,-100%);
    transform-origin: top left;
    text-transform: uppercase;
    font-size: 12px;
    z-index: 100;
    padding: 4px 5px;
    border-radius: 5px;
}

div#maincontent>div#leftblock.slided #ongletprogramme {
    background: #4aace8;
    top: 50px;
    /* left:0; */
}

div#game {
    position: fixed;
    top: -100%;
    left: calc(10% - 36px);
    width: calc(80% + 70px);
    height: 80%;
    background: #fff;
    z-index: 2;
    display: block;
    transition: 0.5s all;
    opacity: 0;
}

div#game.launch {
    top: 10%;
    opacity: 1;
}

div#game>div {
    position: absolute;
    right: 15px;
}

span#closegame:after {
    content: "\f057";
    font-family: 'FontAwesome';
    font-size: 21px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: 2px;
}

span#closegame:hover:after {
    color: #e4a11a;
}

iframe[src^="game"] {
    border: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #eea718;
    box-shadow: rgb(0 0 0 / 29%) 6px 19px 10px;
}

#leftblock #note {
    overflow: auto;
    min-width: 300px;
    min-height: 300px;
    max-width: 95%;
    background: #fffcdb;
    box-shadow: rgb(0 0 0 / 10%) 2px 3px 7px 0;
    padding: 5px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
}

#maincontent #menu {
    margin: 2.5vw auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#maincontent #menu.inside {
    flex-wrap: nowrap;
    flex-flow: column;
    align-items: center;
}

a.menuelm {
    color: #515962;
    background-color: #c0cbd2;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    display: inline-block;
    margin: 10px;
    box-shadow: rgba(0,0,0,0.1) -2px 10px 7px, inset rgba(255, 255, 255, 0.7) -1px 1px 1px;
    width: 430px;
    max-width: 72vw;
    border-bottom: 1px solid;
    text-transform: capitalize;
}

#menu .cours {
    /* margin: 30px 0; */
}

#menu a.menuelm {
    color: #f59225;
    font-size: 14px;
    background: none;
    box-shadow: none;
    border: none;
}

#menu .cours>a.menuelm {
    width: 300px;
}

#menu .cours>a.menuelm .infomenu {
    color: #2d2d2d;
    font-size: 18px;
}

#menu .cours>a.menuelm .infomenu:after {
    content: "\f101";
    font-family: FontAwesome;
    display: block;
    color: #ea000e;
    font-size: 30px;
    animation-name: littlebounces;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: linear;
}

#menu .cours:nth-child(3n+2)>a.menuelm .infomenu:after {
    animation-delay: 0.2s;
}

#menu .cours:nth-child(3n+0)>a.menuelm .infomenu:after {
    animation-delay: 0.4s;
}

#menu a.menuelm.questionnaire {
    background: #fbec9d;
    color: #0080e3;
    font-weight: bold;
}

#menu a.menuelm.questionnaire>span {
    font-weight: normal;
    font-size: 12px;
}

a.menuelm[data-maj]:after {
    content: attr(data-maj);
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    border: 2px solid #fff;
    display: block;
    background: #ff0000;
    color: #fff;
    position: absolute;
    right: calc(50% - 52px);
    top: 60px;
    box-shadow: rgb(0 0 0 / 50%) -1px 3px 9px;
    z-index: 1;
    font-size: 14px;
    transition: all 0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.2, 2.3);
}

a.menuelm[data-maj]:hover:after {
    top: 50px;
    transform: scale(1.2);
}

@keyframes littlebounces {
    0% {
        transform: translateY(0);
    }

    5% {
        transform: translateY(-3px);
    }

    10% {
        transform: translateY(-4px);
    }

    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-1px);
    }

    40% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

#menu>div:not(.cours) .canvasctn {
    transform: translateY(0);
    transition: 0.5s all;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 3px 0;
    border-radius: 5px;
}

#menu>div:hover:not(.cours) .canvasctn {
    transform: translateY(-3px);
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 9px 0;
}

#menu>div {
    animation-name: littleflash;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
}

#menu div:nth-child(5n+1) {
    animation-delay: 0.1s;
}

#menu div:nth-child(5n+2) {
    animation-delay: 0.2s;
}

#menu div:nth-child(5n+3) {
    animation-delay: 0.3s;
}

#menu div:nth-child(5n+4) {
    animation-delay: 0.4s;
}

#menu div:nth-child(5n+5) {
    animation-delay: 0.5s;
}

#menu div:nth-child(5n+6) {
    animation-delay: 0.6s;
}

#menu div:nth-child(5n+7) {
    animation-delay: 0.7s;
}

#menu div:nth-child(5n+8) {
    animation-delay: 0.8s;
}

#menu div:nth-child(5n+9) {
    animation-delay: 0.9s;
}

#menu div:nth-child(5n+10) {
    animation-delay: 1.0s;
}

@keyframes littleflash {
    0% {
        opacity: 1;
    }

    5% {
        opacity: 0.9;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.menuelm>.canvasctn>canvas {
    z-index: 1;
}

:not(.cours)>a.menuelm .canvasctn {
    background-position: center;
    background-size: cover;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    background-image: url(/img/fond-bloc.jpg);
    position: relative;
}

.bloc > a.menuelm .canvasctn {
    background-image: url(/img/fond-bloc.jpg);
}

.module > a.menuelm .canvasctn {
    background-image: url(/img/fond-module.jpg);
}

.sequence > a.menuelm .canvasctn {
    background-image: url(/img/fond-sequence.jpg);
}

.partie > a.menuelm .canvasctn {
    background-image: url(/img/fond-partie.jpg);
}

:not(.cours)>a.menuelm .canvasctn:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.4);
    z-index: 0;
}

.infocours {
    opacity: 0;
    position: absolute;
    right: 25px;
    bottom: 35px;
    color: #888;
    background: rgba(255,255,255,0.8);
    padding: 5px;
    border-radius: 5px;
    text-align: end;
    text-transform: none;
    transition: 1s all;
}

.cours .infocours {
    text-align: left;
    bottom: unset;
    top: 53px;
    right: 0;
    line-height: 15px;
    padding: 0;
}

.menuelm:hover .infocours {
    opacity: 0.5;
}

.menuelm:hover .infocours:hover {
    opacity: 1;
}

#menu>div, .submenu>div {
    position: relative;
}

.page a.menuelm.lu:after, a.menuelm.justelu:after {
    background: url('../img/checkmark.png');
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

a.menuelm.justelu:after {
    background: none;
    font: normal normal normal 18px/1 FontAwesome;
    content: "\f06e";
    color: #aaa;
    margin-right: 4px;
}

#maincontent a.menuelm.disabled, #maincontent a.menuelm.nondispo {
    opacity: 0.2;
    pointer-events: none;
}

div a.menuelm {
    border-bottom-color: #f59e00;
    background: linear-gradient(365deg, #ffffff, #f9fafb);
}

#menu .hidden {
    opacity: 0;
    transition: 0.5s all;
}

div.bloc a.menuelm {
    border-bottom-color: #39b175;
}

div.module a.menuelm {
    border-bottom-color: #3f6ba7;
}

div.sequence a.menuelm {
    border-bottom-color: #a663c7;
}

div.partie a.menuelm {
    border-bottom-color: #cc2b30;
}

#maincontent div a.menuelm.debloque {
    background: linear-gradient(45deg, #f9ce1d, #ffe900) !important;
}

#menu .submenu {
    transition: 0.2s;
    overflow: hidden;
    margin-top: 0px;
    margin-left: calc(7vw - 38px);
}

#menu .minimized {
    max-height: 0px !important;
    margin-top: -20px;
}

#maincontent .infobouton {
    font-size: 12px;
    color: #949494;
    position: relative;
    top: 9px;
}

#maincontent .infomsg {
    text-align: center;
    margin-top: 20px;
}

div#quiz {
    font-size: 18px;
    text-shadow: rgba(0,0,0,0.3) 1px 1px 2px;
    display: block;
    box-sizing: border-box;
    height: 560px;
    width: 100%;
    position: relative;
    min-height: 100%;
}

div#quizdiv {
    white-space: nowrap;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
}

div#quizdiv>div {
    width: 100%;
    height: 100%;
    display: flex;
    white-space: normal;
    position: absolute;
    top: 0;
    padding: 50px 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

#quiz input[type="submit"] {
    margin: auto;
    display: block;
}

#quiz form {
    height: 90%;
}

.quiz_reponses {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    max-height: 80%;
    align-items: flex-start;
}

.quiz_container {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

.quiz_reponse {
    display: inline-block;
    max-width: 50%;
    flex-shrink: 1;
    line-height: 26px;
    text-shadow: none;
}

.quiz_nextquestion, .valider_caspratique {
    background: #eee;
    padding: 5px 10px;
    border-radius: 30px;
    border: none;
    margin: 40px 0px 0px 50%;
    transition: 0.3s all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.37, 1.85);
    position: relative;
    left: -20px;
    cursor: pointer;
    color: #666;
    font-weight: bold;
    text-shadow: none;
}

.quiz_nextquestion:hover {
    left: 0px;
}

.quiz_question {
    background: #eee;
    padding: 1px 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-shadow: none;
}

.checktexteqcm {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    flex-basis: 25%;
}

div#listequestion {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
}

div#listequestion>div:after {
    content: "\f2ed";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 0;
    top: 0;
}

/*timer quiz*/
div#timer {
    position: fixed;
    bottom: 50px;
    right: 50px;
    font-size: 100px;
    font-family: system-ui;
    font-weight: bold;
}

/*admin quiz*/
.checktexteqcm>input[type="text"] {
    flex-grow: 1;
}

.checktexteqcm>input[type="checkbox"] {
    flex-shrink: 1;
    width: unset;
}

.adminreponsesqcm {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    justify-content: flex-start;
}

.bottommenu {
    margin: auto;
    text-align: left;
    position: fixed;
    z-index: 240;
    bottom: 0;
    right: 0;
    background: #f1a816;
    padding: 5px;
    border-radius: 5px;
    margin: 37px;
    box-shadow: rgb(0 0 0 / 21%) 3px 4px 9px;
}

#menuaudio {
    background: #5ba8eb;
}

div#infopage {
    /* position: absolute; */
    left: 8px;
    top: 5px;
    color: #ff900d;
    text-shadow: none;
    text-align: center;
}

#resultatquiz>div {
    border: none;
    background: #f3f3f3;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    box-shadow: rgba(0,0,0,0.1) -2px 10px 7px, inset rgba(255, 255, 255, 0.7) -1px 1px 1px;
    margin-top: 2px;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

#resultatquiz {
    width: 90%;
    /* height: 560px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 10px auto 10px auto;
}

#resultatquiz>div {
    padding: 10px;
    color: #646464;
    max-width: 100%;
}

#resultatquiz img {
    max-width: 100%;
}

#resultatquiz .resquizinfo {
    max-width: 400px;
    font-size: 12px;
    font-style: italic;
    margin-top: 10px;
    line-height: 17px;
    text-align: justify;
}

#resultatquiz .resquizinfo:before {
    font-family: FontAwesome;
    content: "\f05a";
    font-style: normal;
    font-size: 16px;
}

#resultatquiz .resquizinfo a {
    background: none;
    color: unset;
    text-decoration: underline;
}

.resultats span[style*="color"] {
    font-size: 14px;
    background: #e6e6e6;
    border-radius: 10px;
    display: inline-block;
    padding: 0 5px;
    padding-left: 0;
    margin-top: 6px;
    font-style: italic;
}

.resultats span[style*="color"]:before {
    content: "Votre resultat : ";
    color: #fff;
    background: #aaa;
    border-radius: 10px;
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    font-style: normal;
}

#quiz input[type="radio"], #quiz input[type="checkbox"] {
    width: 30px;
    height: 30px;
    position: relative;
    top: 8px;
    margin-right: 10px;
}

textarea.ta_texteatrous {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 300px;
}

div#texteatrous {
    padding: 10px;
    padding-bottom: 40px;
    background: rgb(232 232 232 / 50%);
    margin: 50px;
    font-family: monospace;
    border-bottom-right-radius: 30px;
    font-size: 14px;
    position: relative;
}

div#letexteatrous {
    margin-bottom: 50px;
    line-height: 19px;
}

/*table.tableauatrou tr:first-of-type td {
    font-weight: bold;
    background: #b7b7b7;
    color: #fff;
    border-color: #fff;
}*/
table.tableauatrou td {
    border: 1px solid #c5c5c5;
    padding: 7px;
}

div.tat_ctn {
    max-width: 100%;
    overflow-x: auto;
}

table.tableauatrou {
    border-collapse: collapse;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 8px;
}

div#bouchestrous {
    display: none;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
}

div#bouchestrous.floating {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    display: flex;
}

div#bouchestrous>.bouchetrou {
    margin: 10px;
    padding: 0 10px;
    cursor: pointer;
    color: #0068a5;
}

div#bouchestrous>.bouchetrou:hover, div#bouchestrous>.bouchetrou.dragging {
    background: #fff;
    border-radius: 20px;
}

div#bouchestrous>.bouchetrou.dragging {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

div#bouchestrous>.bouchetrou.overtrou {
    background: none;
}

div#bouchestrous>.bouchetrou.placed {
    display: none;
}

div#bouchestrous>.bouchetrou.placed:hover {
    background: #fff;
    /*opacity: unset;*/
}

div#titre_texteatrous {
    margin: 50px;
}

span.trou {
    color: #ff9517;
    cursor: pointer;
}

span.trou.draggingover {
    background: #fff;
    border-radius: 20px;
    opacity: 0.5;
}

/*trou dans tableau*/
td>span.trou {
    display: inline-block;
}

.bottommenu a {
    color: #ffffff;
    padding: 0;
    border-radius: 20px;
    margin-left: 0px;
    margin-right: 2px;
    position: relative;
}

.bottommenu a:after {
    font: normal normal normal 22px/1 FontAwesome;
    color: #fff;
    padding: 10px;
    /* top: 5px; */
    position: relative;
}

.bottommenu a.closebtn:after {
    content: "\f057";
}

.bottommenu a.magnifierbtn:after {
    content: "\f1e5";
}

.bottommenu a.prevbtn:after {
    content: "\f048";
}

.bottommenu a.nextbtn:after {
    content: "\f051";
}

.bottommenu a.audioprev:after {
    content: "\f049";
}

.bottommenu a.audiopause:after {
    content: "\f28b";
}

.bottommenu a.audionext:after {
    content: "\f050";
}

.bottommenu a.audiostop:after {
    content: "\f28d";
}

#cours a.menuelm.questionnaire {
    background-color: #ff8603;
}

#cours a.menuelm.idmodule {
    background-color: #429f9f;
}

#cours a.menuelm.idsection {
    background-color: #3f6c7b;
}

#cours a.menuelm.idpartie {
    background-color: #6a4268;
}

#cours a.menuelm.page {
    background-color: #992120;
}

a.audiolauncher {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    color: #fff;
    font-size: 20px;
    opacity: 0.4;
    transition: 0.5s all;
}

.menuelm:hover a.audiolauncher {
    opacity: 1;
}

a.audiolauncher:hover {
    color: #f59225;
}

a.audiolauncher:after {
    content: "\f58f";
    font-family: 'FontAwesome';
}

#cours .infobouton.questionnaire {
    color: #ff8603;
}

#cours .infobouton.idmodule {
    color: #429f9f;
}

#cours .infobouton.idsection {
    color: #3f6c7b;
}

#cours .infobouton.idpartie {
    color: #6a4268;
}

#cours .infobouton.page {
    color: #992120;
}

#cours .message {
    margin-left: 20px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    text-align: center;
}

/*cas pratique*/
form[name="formquiz"] {
    flex-grow: 1;
}

textarea.ta_cpenonce, textarea.ta_cpresolution {
    display: block;
    width: 100%;
    height: 200px;
}

#caspratique img {
    max-width: 100%;
    margin: auto;
    display: block;
}

div#caspratique>div {
    padding: 10px;
    background: rgba(255,255,255,0.5);
    margin: 4vw;
    font-family: monospace;
    border-bottom-right-radius: 30px;
    font-size: 14px;
    line-height: 15px;
}

div#caspratique textarea {
    width: 99%;
    height: 100%;
    min-height: 200px;
    margin-top: 5px;
    display: block;
}

.valider_caspratique {
    margin: 0 auto 51px auto !important;
    display: block;
}

#resultatquiz #resolution {
    margin: 10px;
    background: #a5dbae;
    padding: 5px;
}

#resultatquiz #reponsecandidat {
    font-style: italic;
    margin: 10px;
    background: #dedf9c;
    padding: 5px;
}

/*sub content*/
.subcontent {
    margin: auto;
    /* width: 800px; */
    max-width: 90%;
    position: relative;
}

/*profil*/
form[name="userform"]>div, #cours-fichier-profil {
    display: flex;
    flex-wrap: wrap;
}

form[name="userform"]>div>div, #cours-fichier-profil>div {
    flex-basis: 43%;
    flex-grow: 1;
    min-width: 200px;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 20px 10px;
}

form[name="userform"]>div>div>div, #cours-fichier-profil>div>div {
    display: inline-block;
}

form[name="userform"]>div>div>div>div, #cours-fichier-profil>div>div>div {
    margin-bottom: 5px;
}

.html_historiqueadmin {
    overflow-y: auto;
    max-height: 290px;
}

.blocprofil {
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #ffeed4;
    box-shadow: rgba(0, 0, 0, 0.02) 2px 2px 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    word-break: break-all;
    line-break: anywhere;
}

.blocprofil input {
    height: 29px;
    border-radius: 3px;
    border: 1px solid #a3dff1;
    padding: 5px;
    background: #fff8ef;
    display: inline-block;
}

.blocprofil input[readonly] {
    opacity: 0.5;
}

.blocprofil input[type=submit] {
    background: #4aace8;
    border-color: #afafaf;
    color: #fff;
}

.blocprofil>span:first-of-type {
    color: #ffa920;
    font-weight: bold;
    margin-bottom: 16px;
    display: inline-block;
}

/*page paiement*/

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fa-regular-400.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fa-solid-900.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html,body {
    margin: 0;
    min-height: 100vh;
    overscroll-behavior-x: none;
}

body,body * {
    /* text-size-adjust: none !important; */
    /* -webkit-text-size-adjust: none !important; */
    -moz-text-size-adjust: none !important;
    -ms-text-size-adjust: none !important;
}

/*#page div.extpng, #page div.extjpg, #page div.extgif {
    z-index: -1 !important;
}*/
a, span, div, table, tr, td, form {
    position: relative;
}

p {
    text-align: justify;
}

td[style*="border"] {
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

body:not([id="tinymce"]) {
    background-color: #e8edef;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    color: #000;
    display: flex;
    flex-flow: column;
}

body.minimalheader {
    background-color: #ffffff;
}

a {
    text-decoration: none;
}

select#mailselect {
    width: 100%;
}

select[name="creformacrspd"] {
    font-size: 10px;
    color: #e37326;
    margin-top: 5px;
    float: right;
    max-width: 50%;
}

option.mailmodele {
    background: #f7eaa9;
}

option.titremailjet {
    color: #f7eaa9;
    text-align: center;
    font-weight: bold;
}

span[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.html_ariane a {
    text-decoration: underline;
    font-size: 12px;
    color: #ffae24;
}

.html_ariane {
    margin-bottom: 30px;
}

/*dans gmail les paragraphes MsoNormal n'on pas de marge*/
.MsoNormal {
    margin: 0;
}

/*flex tables*/
#page table[class^="flex"]>tbody>tr {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#page table[class^="flex"]>tbody>tr>td {
    margin: 5px;
}

#page table.flex100>tbody>tr>td {
    flex-basis: 100px;
}

#page table.flex200>tbody>tr>td {
    flex-basis: 200px;
}

#page table.flex400>tbody>tr>td {
    flex-basis: 400px;
}

#page table.max2parligne>tbody>tr>td {
    min-width: 49%;
}

#page table.max3parligne>tbody>tr>td {
    min-width: 32%;
}

#page table.max4parligne>tbody>tr>td {
    min-width: 24%;
}

/*#page table.maxw300
{
    max-width:300px;
}
#page table.maxw400
{
    max-width:400px;
}
#page table.maxw600
{
    max-width:600px;
}
#page table.maxw800
{
    max-width:800px;
}*/
/*message page*/
div#messagepage {
    position: fixed;
    bottom: 100px;
    left: 0;
    width: 90%;
    background: linear-gradient(135deg, #ffad25, transparent);
    border-bottom: 5px solid #7f7f7f;
    padding: 10px 4vw;
    transform: translateX(-100%);
    transition: 1s all;
    z-index: 10;
    box-shadow: rgb(0 0 0 / 32%) 1px 6px 12px;
    opacity: 0;
}

div#messagepage.visible {
    transform: translateX(0);
    opacity: 1;
}

#messagepage #cheminpage>div {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

#messagepage #cheminpage>div.transparent {
    opacity: 0.3;
}

#messagepage #cheminpage>div + div {
    font-size: 28px;
    font-weight: normal;
}

#messagepage #cheminpage>div + div + div {
    font-size: 24px;
}

#messagepage #cheminpage>div + div + div + div {
    font-size: 20px;
}

/*programme*/
#programme {
    background: #fff;
    border-left: 1px solid #4aace8;
    z-index: 5;
    padding: 7px;
    box-sizing: border-box;
    overflow: hidden;
    transition: 0.5s all;
    line-height: 20px;
    max-width: 95%;
}

#programme:hover li {
    pointer-events: none;
}

#programme li.encours>details {
    display: block;
}

#programme li.encours>details>summary {
    background: #4aace8;
    color: #fff;
    border-bottom: 1px solid #fff;
}

#programme summary:first-letter {
    text-transform: uppercase;
}

.tree {
    --spacing: 16px;
    --radius: 7px;
    --marker-bg-default: #ddd;
    --marker-bg-haschild: #6b9abb;
    line-height: 2rem;
}

.tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
    background: #fafafa;
    border-radius: 5px;
1px:
    s;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

.tree ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
}

.tree ul li {
    border-left: 2px solid #ddd;
}

.tree ul li:last-child {
    border-color: transparent;
}

.tree ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -2);
    left: -2px;
    width: calc(var(--spacing) + 2px);
    height: calc(var(--spacing) + 1px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

.tree summary {
    display: block;
    cursor: pointer;
}

.tree summary::marker, .tree summary::-webkit-details-marker {
    display: none;
}

.tree summary:focus {
    outline: none;
}

.tree summary:focus-visible {
    outline: 1px dotted #000;
}

.tree li::after, .tree summary::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2 - var(--radius) + 2px);
    left: calc(var(--spacing) - var(--radius) - 2px);
    width: calc(2 * var(--radius));
    height: calc(2 * var(--radius));
    border-radius: 50%;
    background: var(--marker-bg-default);
}

.tree summary::before {
    content: "+";
    z-index: 1;
    background: var(--marker-bg-haschild);
    color: #fff;
    line-height: calc(2 * var(--radius));
    text-align: center;
}

.tree li.lu summary::before {
    content: attr(data-check);
    color: #0d9c2c;
    background: #fff;
    box-shadow: #0d9c2c 0 0 0px 1px;
}

.tree details[open] > summary::before {
    content: "-";
}

/*filtre*/
.filtered {
    display: none !important;
}

/*recherche*/
span#recherche input {
    width: 100px;
    height: 22px;
    opacity: 0.5;
    border-color: #eee;
    transition: 0.2s all;
}

span#recherche input:hover {
    width: 200px;
    border-color: #ff9e19;
    opacity: 1;
}

span#recherche {
    flex-grow: 1;
    text-align: right;
    margin-bottom: 2px;
    float: right;
}

.flexline {
    display: flex;
}

/*chargement*/
div#chargement {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: #fdfdfd;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    transition: 1s all;
    opacity: 0;
    pointer-events: none;
}

div#chargement.actif {
    pointer-events: all;
    opacity: 0.7;
    transition: 1s all;
}

div#chargement.top {
    height: 145px;
    top: -31px;
}

div#chargement.fin .lds-ring {
    display: none;
}

div#chargementtexte {
    font-weight: bold;
    font-size: 16px;
    color: #6b6b6b;
    width: 600px;
    max-width: 90%;
    height: 10px;
}

div#chargementtexte>div:not(:first-child) {
    opacity: 0.8;
}

#filterctn>input {
    width: 120px;
    height: 20px;
}

#clrfilter {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-5px,-50%);
    opacity: 0.5;
    cursor: pointer;
}

#clrfilter:before {
    content: "\f55a";
    font-family: 'FontAwesome';
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #f7990d;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #d20000 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    border-top-color: #00c4ff;
}

.lds-ring div:nth-child(2) {
    border-top-color: #ff7600;
}

.lds-ring div:nth-child(3) {
    border-top-color: #ff3b00;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*header*/
#header * {
    transition: top,opacity 0.3s,0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.49, 1.23);
}

video {
    max-width: 100%;
}

#page video {
    max-width: 100%;
    height: auto;
    width: 832px;
    max-height: 100%;
    pointer-events: all;
}

jodit-media {
    pointer-events: none;
}

.center {
    text-align: center;
    margin: auto;
}

.encadre {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 5px;
    margin-top: 10px;
}

/*document-manquant*/
div#document-manquant {
    text-align: center;
    width: 80%;
    margin: 100px auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    font-size: 16px;
    line-height: 22px;
}

/*popup video*/
div#popup-video-accueil>video {
    margin: auto;
    display: block;
}

div#popup-video-accueil div.htmlvideo {
    background: none;
}

div#popup-video-accueil::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 60px solid white;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    animation: fadeout 5s 2s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*header*/
#header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    background-color: #e7ecee;
    padding-bottom: 10px;
    /* box-shadow: inset hsl(0deg 0% 0% / 13%) 0px -3px 13px; */
    flex-shrink: 0;
    margin-top: 9px;
}

#header:after {
    /* content:""; */
    /* width:50px; */
}

#header #logo>span {
    background-image: url(/img/logo.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 100%;
    animation: funnyrotation 5s;
    animation-iteration-count: infinite;
    transform-origin: center;
    filter: drop-shadow(5px 10px 6px rgba(0,0,0,0.1));
    /* transform: translateY(12px) rotate(-85deg); */
    /* height: 200px; */
    /* width: 200px; */
    display: inline-block;
}

@keyframes funnyrotation {
    0%, 5% {
        transform: rotateZ(0);
    }

    7% {
        transform: rotateZ(-15deg);
    }

    9% {
        transform: rotateZ(10deg);
    }

    11% {
        transform: rotateZ(-10deg);
    }

    13% {
        transform: rotateZ(6deg);
    }

    15% {
        transform: rotateZ(-4deg);
    }

    17%, 100% {
        transform: rotateZ(0);
    }
}

#header>a,#header>div {
    display: flex;
    width: 151px;
    height: 100%;
    color: #fff;
    justify-content: center;
    align-items: flex-end;
    top: 0;
    font-size: 14px;
    white-space: nowrap;
    max-width: 14%;
    position: relative;
    z-index: 2;
}

/*header de premiere page*/
.body_>#header {
    height: 190px
}

.body_>#header>a {
    display: none;
}

.body_>#header>a#logo {
    display: block;
    position: absolute;
    top: 0;
    filter: drop-shadow(17px 23px 10px rgba(0,0,0,0.2));
    z-index: 1;
    width: 200px;
    height: 200px;
}

.body_>#header #logo>span {
    height: 200px;
    width: 200px;
    display: inline-block;
}

.body_>#header>a.profil {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 10px;
    opacity: 0.2;
}

.body_>#header>a.profil:hover {
    opacity: 1;
}

.body_>#header>a.profil:before {
    display: none;
}

.body_>#header>a.profil>span {
    top: 0;
}

/*liens externe*/
body[class^="body_"] a[target='_blank']:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f35d";
    width: 0;
    margin-left: 2px;
}

#adminuserlist a[target='_blank']:after {
    content: none;
}

#header a[target='_blank']:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f35d";
    width: 0;
    position: absolute;
    bottom: 20px;
    right: 14px;
    font-size: 14px;
}

.max100 {
    max-width: 100%;
}

.top-btn span {
    background-color: #aaa;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.1) 1px 4px 5px;
    top: 30px;
    opacity: 0;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-btn.loaded span {
    opacity: 1;
    top: -10px;
    position: relative;
}

#header>a:hover {
    top: -5%;
}

.top-btn:hover span {
    top: -20%;
}

.top-btn.cours span {
    background-color: #4aace8;
    transition-delay: 0.100s;
}

.top-btn.lexique span {
    background-color: #96d92f;
    transition-delay: 0.100s;
}

.top-btn.profil span {
    background-color: #fd385a;
    transition-delay: 0.175s;
}

.top-btn.resultat span {
    background-color: #fdd538;
    transition-delay: 0.250s;
}

.top-btn.statistiques span {
    background-color: #40e34e;
    transition-delay: 0.325s;
}

.top-btn.presse span {
    background-color: #f59225;
    transition-delay: 0.400s;
}

.top-btn#menu_ludique span {
    background-color: #7993f7;
    transition-delay: 0.475s;
}

.bouton {
    background-color: #aaa;
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px 10px;
    border-radius: 50px;
    box-shadow: rgba(0,0,0,0.1) 1px 4px 5px;
    top: 60px;
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #b1b1b1;
    color: #fff;
}

.bouton.standard {
    top: unset;
}

.bouton[disabled],button[disabled] {
    opacity: 0.2;
    pointer-events: none;
}

.datedispo {
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgb(248 248 248 / 30%);
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
    z-index: 1;
}

.fluppercase {
    text-transform: capitalize;
    font-weight: bold;
}

#header>a:before, #header>div:before {
    font-family: FontAwesome;
    position: absolute;
    top: 27%;
    font-size: 30px;
    text-shadow: rgb(172 172 172) -1px 8px 6px;
    opacity: 0.9;
    /* -webkit-text-stroke: 1px #e1e1e1; */
    transition: text-shadow 0.5s;
}

body.body_ div#menu_ludique {
    display: none;
}

div#menu_ludique>div {
    position: absolute;
    /* top: 90px; */
    left: 50%;
    /* overflow: hidden; */
    height: 0;
    width: calc(30px + 3vw);
    background: #fff;
    border-radius: 50px;
    transform: translateX(-50%);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    width: 36px;
    height: 36px;
    /* border-radius: 0; */
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    top: 27%;
    transform: translate(-50%,-3px);
    border-radius: 5px;
    box-shadow: rgb(172 172 172) -1px 8px 8px;
}

div#menu_ludique:hover>div,div#menu_ludique.hightlighted>div {
    width: 50px;
    border-radius: 30px;
}

#header div#menu_ludique:not(:hover):not(.hightlighted)>div>a {
    width: 14px;
    height: 14px;
    margin: 0;
}

div#menu_ludique a:hover {
    top: -1%;
}

div#menu_ludique:hover > div, div#menu_ludique.hightlighted > div {
    animation: ouvertureMenu 0.3s;
    /* Ajout de la duree de l'animation */
    overflow: visible;
    height: 247px;
}

div#menu_ludique.hightlighted [href='/lesjeux'] {
    animation: gonfle 0.5s infinite;
}

@keyframes gonfle {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1.0);
    }
}

@keyframes ouvertureMenu {
    0% {
        height: 0;
        /* Taille de depart */
        overflow: hidden;
    }

    99% {
        height: 247px;
        overflow: hidden;
    }

    100% {
        height: 247px;
        /* Taille finale apres 1 seconde */
        overflow: visible;
    }
}

#header #menu_ludique a {
    text-align: center;
    width: 40px;
    height: 40px;
    margin: 10px 0px;
    display: block;
    overflow: visible;
    flex-shrink: 0;
}

#header #menu_ludique a>span {
    overflow: initial;
    box-shadow: none;
    top: 15px;
    padding: 0 5px;
    position: absolute;
    left: -8px;
    transform: translateX(-100%);
    white-space: nowrap;
    max-width: unset;
    z-index: 6;
    font-weight: bold;
    background: #fff;
    display: none;
}

#header #menu_ludique a:hover>span {
    display: inline-block;
}

#header #menu_ludique a:before {
    position: relative;
    font-size: 15px;
    color: #fff;
    text-shadow: none;
}

#header #menu_ludique a:after {
    content: "";
}

#header>a:hover:before, #header>div:hover:before {
    text-shadow: rgb(172 172 172) 0px 0px 2px;
    opacity: 1;
}

#header a.planning:before {
    content: "\f073";
}

#header a.cours:before {
    content: "\f549";
}

#header #menu_ludique:before {
    content: "\f5fd";
}

#header #menu_ludique a:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#header a.profil:before {
    content: "\f007";
}

#header a.resultat:before {
    content: "\f681";
}

#header a.statistiques:before {
    content: "\f201";
}

#header a.contact:before {
    content: "\f2b6";
}

#header a.lexique:before {
    background: url(/img/icons8-carnet-40.png);
}

#header a.presse:before {
    background: url(/img/icons8-journal-40.png);
}

#header a.podcast:before {
    background: url(/img/icons8-podcast-40.png);
}

#header a.jeux:before {
    background: url(/img/icons8-jeux-40.png);
}

div#filariane {
    background: #d5d5d5;
    padding: 2px 8px;
    color: #206d9d;
}

div#filariane a {
    color: #206d9d;
}

.top-btn.profil span#quitter {
    position: relative;
    right: 0;
    top: -20px;
    width: 15px;
    height: 15px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    font-size: 10px;
}

.top-btn.profil span#quitter:hover {
    background-color: #fff;
    border: 2px solid #fd385a;
    color: #fd385a;
}

div#alerte_sessioncv {
    background: #4aace8;
    padding: 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

div#alerte_sessioncv a {
    color: #fff;
}

.html_button.cv_oral a {
    background: #edc500;
}

.html_button.cv_ecrit a {
    background: #898989;
}

.html_button.cv_session a {
    background: #ed8a00;
}

.html_button.cv_direct a {
    background: #3a3939;
}

.html_button.cv_ecrit:before, .html_button.cv_oral:before {
    content: attr(data-heure);
    display: inline-block;
    margin-right: 5px;
    background: #464646;
    color: #fff;
    padding: 0 3px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

/*exam classe virtuelle*/
div#examcv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

div#examcv iframe {
    border: none;
    flex-basis: 50%;
    flex-grow: 1;
    min-height: 430px;
    min-width: 250px;
}

.btnsignexam, .signexam {
    display: none;
}

/*gestion classe virtuelle*/
form#cv_form input {
    width: 50%;
}

form#cv_form div {
    display: flex;
    align-items: center;
}

form#cv_form div>div {
    flex-grow: 1;
}

div#copieetsujet {
    display: flex;
    height: calc(100% - 50px);
}

div#copieetsujet.r0 {
    flex-flow: row;
}

div#copieetsujet.r1 {
    flex-flow: column;
}

div#copieetsujet.r2 {
    flex-flow: row-reverse;
}

div#copieetsujet.r3 {
    flex-flow: column-reverse;
}

div#copieetsujet>div {
    display: flex;
    flex-flow: column;
}

div#copieetsujet>* {
    flex-basis: 50%;
}

div[name="copieexamen"] {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 200px;
    font-size: 16px;
    font-family: sans-serif;
}

div#sujetexamen>img {
    max-width: 100%;
}

div#sujetexamen {
    overflow-y: auto;
    border-right: 1px solid #4aace8;
    transition: 0.5s all;
}

div#copieexamen {
    transition: 0.5s all;
}

#copieetsujet.maxcopie div#sujetexamen {
    flex-basis: 25px;
    overflow: hidden;
    background: #4aace8;
}

#copieetsujet.maxcopie div#copieexamen {
    flex-basis: 100%;
}

div#previewcopie {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1240px;
    max-width: 90%;
    height: 100%;
    z-index: 1;
    background: #e7e7e7;
    border: 5px solid #00adff;
    overflow-y: auto;
    display: none;
    box-sizing: border-box;
}

div#previewcopie.visible {
    display: block;
}

div#previewcopie img {
    max-width: 100%;
    background: #fff;
    margin-bottom: 5px;
}

div#togglesujet,div#rotatelayout {
    width: 20px;
    height: 20px;
    background: #eee;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #000;
    border-radius: 10px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
    cursor: pointer;
}

div#rotatelayout {
    top: 25px;
}

div#rotatelayout:after {
    font-family: FontAwesome;
    content: "\f2f1";
}

div#togglesujet:after {
    content: "<";
}

div#togglesujet.hide:after {
    content: ">";
}

/*admin user*/
.html_liste>* span.useractions {
    white-space: nowrap;
    align-items: center;
    display: inline-flex;
}

.icone:after {
    font: normal normal normal 14px/1 FontAwesome;
    opacity: 0.2;
    margin: 0 2px;
}

.icone.clone:after {
    content: "\f24d";
}

.icone.import:after {
    content: "\f56f";
}

.icone.connexion:after {
    content: "\f1e6";
}

.icone.suppr:after {
    content: "\f2ed";
}

.icone.restore:after {
    content: "\f829";
}

.icone.archiver:after {
    content: "\f1c6";
}

.icone.up:after {
    content: "\f077";
}

.icone.down:after {
    content: "\f078";
}

.icone.cours:after {
    content: "\f19d";
}

.icone.clone.cours:after, .icone.clone.suppr:after {
    color: #f00
}

.icone:after {
    padding: 0px 2px;
    margin: 0 2px;
}

.icone.questionnaire:after {
    border: 2px solid #4aace8;
    border-radius: 50%;
    color: #4aace8;
    content: "Q";
    font-weight: bold;
}

.icone.upgrade:after {
    color: #4aace8;
    content: "\f102";
    font-size: 16px;
}

.icone.lectureclone:after {
    color: #f30606;
    content: "\f48b";
    font-size: 16px;
}

.icone.document:after {
    border-top-left-radius: 5px;
    background: #666;
    color: #fff;
}

.icone.document.convocation:after {
    font-family: unset;
    content: "C";
}

.icone.document.suivi:after {
    font-family: unset;
    content: "S";
}

.icone.document.resultat:after {
    font-family: unset;
    content: "R";
}

.icone.document.temps:after {
    font-family: unset;
    content: "T";
}

.icone.document.attestation:after {
    font-family: unset;
    content: "A";
}

.icone.document.livret:after {
    font-family: unset;
    content: "L";
}

.icone.document.lreelles:after {
    font-family: unset;
    content: "lr";
}

.icone:hover:after {
    opacity: 1;
}

.userbutton[data-filter*="|DOCUMENTS|"] {
    background: #fbf1bf;
}

.userbutton {
    display: flex;
    position: relative;
}

.userbutton.classeur {
    background: #ffb52b;
}

.userbutton.classeur a {
    color: #fff;
}

.userbutton.classeur .up,.userbutton.classeur .down {
    display: none;
}

.userbutton.wip {
    background: #c5e1ee;
}

.userbutton.supprime {
    background: #fcdad7;
}

.userbutton.archive {
    background: #c3c6c8;
}

.userbutton.brouillon {
    background: #e3e5e7;
    opacity: 0.5;
}

.userbutton:after {
    font-size: 8px;
}

.userbutton.wip:after {
    content: "WIP";
}

.userbutton.supprime:after {
    content: "SUPPRIME";
}

.userbutton.archive:after {
    content: "ARCHIVE";
}

.userbutton.brouillon:after {
    content: "BROUILLON";
}

.coursuserbutton {
    display: flex;
    position: relative;
}

.userbutton.grandcompte {
    background: #c6e7fb;
}

.userbutton.archive {
    background: #e6e6e6;
}

.userbutton.demo {
    background: #fffbec;
}

.userbutton>a, .coursuserbutton>a {
    flex-grow: 1;
}

/*admin*/
div#adminmenu {
    background: #666;
    display: flex;
    justify-content: space-evenly;
    transition: 0.2s all;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    border-bottom: 1px solid #ffae25;
}

div#adminmenu a {
    color: #fff;
    padding: 5px;
    transition: 0.2s all;
    word-break: break-word;
}

div#adminmenu a:hover {
    background: #777;
}

div#adminmenu:hover {
    background: #555;
}

.userselect {
    height: 22px;
}

.html_form.userselect td {
    height: unset;
}

option[data-datefin]:not([data-datefin="0"]):not([data-datefin=""]) {
    background-color: #88c07b;
}

option[data-datefin="0"] {
    background-color: #fad276;
}

.userselect select, .coursselect select {
    padding: 0 !important;
    max-width: 150px;
    height: 22px;
    display: inline-block;
}

.coursselect select {
    max-width: unset;
}

.tox.tox-tinymce {
    min-height: 500px;
}

/*recherche admin*/
div#resultatsrecherche a {
    font-size: 12px;
    text-decoration: underline;
    margin-bottom: 4px;
    display: inline-block;
}

div#resultatsrecherche>div {
    position: relative;
    top: -10px;
    border: 1px solid #ffb52b;
    padding: 10px;
}

div#resultatsrecherche h3 {
    margin-bottom: 0;
    margin-top: 0;
}

/*espace client*/
a.signable {
    background: #13a6ec;
    color: #fff;
    padding: 0 5px;
    ;display: inline-block;
    border-radius: 15px;
    border: 1px solid #fff;
}

a.signable:hover {
    background: #f6ac28;
}

a.signable:before {
    content: "\f5b7";
    font-family: FontAwesome;
    margin-right: 5px;
}

a.signable.uploaddoc {
    background: #118ad9;
}

a.signable.uploaddoc:before {
    content: "\f093";
}

object#docsigniframe {
    width: 100%;
    height: 50vh;
    min-height: 400px;
}

div#docsignature {
    position: relative;
    max-width: 100%;
    margin: auto;
    margin-top: 11px;
    text-align: center;
    page-break-inside: avoid !important;
}

div#docsignature div[id^="canvasDiv"] {
    max-width: 100%;
    height: 250px;
    position: relative;
    text-align: center;
}

div#docsignature canvas {
    background: #fff;
    max-width: 95%;
    border: 3px solid #0195ff;
    margin: auto;
    border-radius: 4px;
}

div#docsignature h1 {
    margin-top: 0;
}

div#docsignature span {
    color: var(--btn-primary-bg);
}

div#docsignature button {
    background: #0195ff;
    border-style: none;
    color: #ffffff;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
}

a.signe:after {
    content: "SIGNE";
    background: #20a520;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 5px;
}

#formespaceclientinfoperso {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

#formespaceclientinfoperso > div {
    display: flex;
    flex-flow: column;
    width: 50%;
    min-width: 220px;
}

#formespaceclientinfoperso > div > div {
    display: flex;
    flex-wrap: wrap;
}

#formespaceclientinfoperso > div > div > div {
    flex-grow: 1;
    margin-left: 1vw;
    margin-right: 1vw;
    min-width: 97px;
    margin-top: 11px;
}

#formespaceclientinfoperso > div > div > input {
    margin-left: 1vw;
    margin-right: 1vw;
    width: 200px;
    margin-top: 5px;
    flex-grow: 1;
}

/*page*/
div#maincontent {
    width: 100%;
    flex-grow: 1;
    display: flex;
    box-sizing: border-box;
    flex-flow: row-reverse;
}

div#maincontent>div {
    background: #fff;
    margin: 1vw;
    padding: 2vw;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: rgb(0 0 0 / 4%) 3px 1px 10px;
}

div#maincontent>div#leftblock {
    flex-basis: 280px;
    margin-left: 0;
    display: flex;
    flex-flow: column;
}

div#maincontent>div#leftblock #page {
    flex-grow: 1;
}

div#leftblock img {
    transition: 1s;
}

div#leftblock.fadeimages img, div#leftblock.fadeimages .clock {
    opacity: 0.1;
}

div#maincontent>div#rightblock {
    flex-basis: 300px;
    flex-grow: 1;
    position: relative;
    max-width: calc(100% - 280px);
}

body.wip div#maincontent>div#rightblock {
    background: #fbe4b5;
}

/*administration*/
.userbutton.admin>a {
    font-weight: bold;
    color: #ea000e;
}

.userbutton.admin.inactive>a {
    font-weight: bold;
    color: #e49095;
}

.userbutton.partenaire>a {
    color: #4aace8;
}

.userbutton.demo>a {
    color: #999;
}

.userbutton.inactive>a {
    color: #999;
}

.userbutton[data-filter*="|utilisateur"]:after {
    content: "A RENSEIGNER";
    position: absolute;
    top: 50%;
    right: 0;
    background: #ea000e;
    color: #fff;
    border-radius: 10px;
    padding: 0 5px;
}

.userbutton.v1>a {
    opacity: 0.2;
}

.userbutton.v1>a:after {
    content: " v1";
}

.userbutton.online>a:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 7px;
    border: 1px solid #0ede32;
    background: radial-gradient(circle at center, #c3ffcd, #00ff08 80%, #04ff00 100%);
    box-shadow: #0f0 0 0 6px;
    display: inline-block;
    margin-right: 5px;
}

.cours .html_liste {
    width: 400px;
    flex-grow: 1;
}

.html_colonne.cours {
    flex-wrap: wrap;
}

/*administration cours utilisateur*/
.html_liste.groupescours [data-idc] {
    white-space: nowrap;
    display: flex;
}

.html_liste.groupescours [data-idc]>a {
    white-space: normal;
    flex-grow: 1;
}

.coursuserbutton.offcursus {
    opacity: 0.2;
    /* pointer-events: none; */
}

/*cours utilisateur*/
.html_liste.listecourscandidat,h3.infoconnexion {
    flex-basis: 100%;
}

/*suivi emails*/
.suiviemail .html_colonne div {
    padding: 0 5px;
}

.suiviemail .html_colonne :nth-child(1) {
    flex-basis: 50px;
    min-width: 85px;
}

.suiviemail .html_colonne :nth-child(2) {
    flex-basis: 50px;
    min-width: 100px;
    font-weight: bold;
}

.suiviemail .html_colonne :nth-child(3) {
    flex-basis: 200px;
}

div#mailpreview * {
    font-size: 12px !important;
    max-width: 100%;
    font-style: italic;
}

div#mailpreview {
    border: 2px solid #f59c24;
    padding: 32px;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
}

/*maintenance*/
div#maintenance {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 30px;
    width: 500px;
    margin: auto;
    top: 100px;
}

/*flash*/
#moduleflash {
    position: absolute;
    top: 163px;
    left: 100px;
    width: 800px;
    height: 560px;
    box-shadow: 1px 5px 20px rgba(0,0,0,0.5);
    background-image: url(swf.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #add9ff;
    margin: auto;
    margin-top: 50px;
    position: relative !important;
    left: 0;
    top: 0;
}

/*page coursuser*/
input[type="checkbox"] ~ .debutfinformation {
    display: none;
}

input[type="checkbox"]:checked ~ .debutfinformation {
    display: block;
}

/*login page*/
form#loginpageform {
    width: 311px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 40px 3vw;
    margin: 50px auto;
    max-width: 100%;
    box-sizing: border-box;
}

form#loginpageform input {
    width: 100%;
    border: 1px solid #ffad28;
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

form#loginpageform input[type="submit"] {
    padding: 6px;
    background: #4aace8;
    border: none;
    color: #fff;
}

/*footer*/
div#footer {
    background-color: #515963;
    height: 60px;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset rgba(0,0,0,0.2) 0px 3px 20px;
    flex-shrink: 0;
}

a.minibtn:after {
    font-family: "Font Awesome 5 Brands";
    font-size: 23px;
}

a.minibtn:hover {
    top: -2px;
}

body[class^="body_"] a.minibtn.facebook:after {
    content: "\f082";
    color: #87c0e9;
}

body[class^="body_"] a.minibtn.linkedin:after {
    content: "\f08c";
    color: #2ac0ed;
}

a.minibtn.jobs:after {
    width: 40px;
    height: 40px;
    background: url(/img/JOB.png);
    background-size: contain;
    z-index: 1;
}

a.minibtn.actualites:after {
    width: 40px;
    height: 40px;
    background: url(/img/ACTUALITE.png);
    background-size: contain;
    z-index: 1;
}

table {
    padding : 0px;
    border-spacing: 0px;
    border: 0;
    font-family: arial;
    font-size: 12px;
    border-collapse: collapse;
}

td {
    padding : 0px;
}

a {
    color: #555555;
}

body h1, body h2, body h3 {
    font-weight: normal;
    display: block;
    margin-top: 40px;
    margin-bottom: 20px;
}

body h1 {
    font-size: 21px;
    margin-top: 0;
    border-bottom: 1px solid #ececec;
    width: 100%;
}

body h2 {
    border-bottom: 1px solid #ececec;
    font-size: 17px;
    width: fit-content;
}

body h2.contenu {
    width: 100%;
}

#leftblock h2 {
    margin-top: 10px
}

body h3 {
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    width: fit-content;
}

#page, .note-editor {
    font-family: Arial, Verdana, Helvetica, sans-serif;
}

#page h1, .note-editor h1 {
    font-size: 22px;
    color: #4aace8;
    text-decoration: underline;
}

#page h2, .note-editor h2 {
    font-family: Arial;
    font-size: 20px;
    color: #FF6600;
    text-decoration: none;
}

#page h3, .note-editor h3 {
    font-family: Arial;
    font-size: 18px;
    color: #313131;
    text-decoration: none;
}

#page h4, .note-editor h4 {
    font-family: Arial;
    font-size: 16px;
    color: #313131;
    text-decoration: none;
}

/*preview template mailjet dans adminmail*/
div#mailjetpreview {
    transform: scale(0.5);
    transform-origin: top center;
    margin: auto;
    border: 6px solid #0077f1;
    position: relative;
    cursor: not-allowed;
}

div#mailjetpreview:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    display: block;
    content: "";
    opacity: 0;
}

div#mailjetpreview * {
    pointer-events: none;
}

/**/
button#deletevideo:after {
    content: "\f4e2";
    font-family: FontAwesome;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.signature {
    width: 330px;
    height: 170px;
    background: aliceblue;
    display: inline-block;
    border: 1px dashed #9cbfff;
}

input[name="signea"] {
    background: aliceblue;
    border: 1px dashed #9cbfff;
}

.signature.signe {
    background: none;
    border: none;
}

table.table2signatures {
    margin: auto;
}

table.table2signatures td {
    border: 1px solid #666;
    vertical-align: baseline;
    width: 50%;
    padding: 10px;
}

.texteaudio {
    max-width: 100%;
    width: 100%;
    font-size: 12px;
    font-style: italic;
    border: 1px solid #59cbb1;
    padding: 5px;
    border-radius: 10px;
}

.texteaudio * {
    color: #59cbb1 !important;
}

.texteaudio::before {
    content: "Video translation";
    position: block;
    background: #59cbb1;
    color: #fff;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 12px;
}

body.fr .texteaudio {
    display: none;
}

body.fr[class*='displayalttext'] .texteaudio,
body.fr .diff-container .texteaudio{
    display: block;
}

.jodit-wysiwyg .texteaudio,
.diff-container .texteaudio {
    display: block !important;
    border: 1px dotted #59cbb1;
    color: #59cbb1;
    font-style: italic;
}

div[class*="html_"]>h2 {
    margin-top: 0;
}

.black {
    color: #333;
    text-shadow: none;
}

.orange {
    color: #f90;
    text-shadow: none;
}

.grey {
    color: #c1c0c0;
    text-shadow: none;
}

.rouge {
    color: #fd385a;
    text-shadow: none;
}

.bleu {
    color: #4aace8;
    text-shadow: none;
}

.bgbleu {
    background-color: #4aace8;
}

.vert {
    color: #00a8aa;
    text-shadow: none;
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

.note-editor, input[name="objet"] {
    width: 100% !important;
    box-sizing: border-box !important;
}

.note-editable {
    min-height: 140px !important;
}

.note-editor div[class^="respbloc"] {
    margin: 1px;
    border: 1px #aaa;
    border-style: dashed;
    min-width: 20px;
    min-height: 20px;
}

#page .note-editable video {
    max-height: 40vh;
}

:not([class^="respbloc"])>div[class^="respbloc"] {
    display: flex;
    flex-wrap: wrap;
}

div[class^="respbloc"]>div[class^="respbloc"] {
    min-height: 20px;
    flex-basis: 200px;
    flex-grow: 1;
    max-width: 95vw;
}

div[class^="respbloc"]>div.respbloc200 {
    min-width: 200px;
}

div[class^="respbloc"]>div.respbloc300 {
    min-width: 300px;
}

div[class^="respbloc"]>div.respbloc400 {
    min-width: 400px;
}

div[class^="respbloc"]>div.respbloc500 {
    min-width: 500px;
}

#variablesmail {
    background: rgba(255,255,255,0.5);
    margin-top: 5px;
    border-radius: 3px;
    padding: 5px;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

#variablesmail>div {
    width: 50%;
}

.messageimportant {
    color: #f8740f;
    text-shadow: none;
    font-weight: bold;
}

/*adminemail*/
.blocoptions>div {
    display: flex;
    justify-content: space-around;
}

.blocoptions>div>div {
    display: flex;
    flex-flow: column;
    width: 30%;
    justify-content: inherit;
}

div>.blocoptions {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s all;
    transition-delay: 0.5s;
}

div:hover>.blocoptions {
    max-height: 500px;
}

/*-----------*/
.TGraph {
    margin: 0;
    padding: 0;
    position: absolute;
}

.TGraph li {
    border: 1px solid #555;
    background: #66f;
    border-bottom: none;
    bottom: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}

.TGraph2 {
    margin: 0;
    padding: 0;
    position: absolute;
}

.TGraph2 li {
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    border-bottom: none;
    bottom: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
}

.courslist {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

.titregroupe {
    font-size: 10px;
    text-align: center;
    margin-bottom: 10px;
}

div#usercours_cursus {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    padding: 5px;
}

div#usercours_pdfs {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px
}

div#usercours_pdfs>div {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    padding: 5px;
    font-size: 10px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.03) 2px 3px 5px;
}

div#usercours_pdfs>div a {
    margin: 0 5px;
}

#usercours_pdfs.attestation {
    margin-bottom: 30px;
}

.listpdf span {
    display: block;
    margin: 10px 0;
}

.listpdf span.pdftogen:not(.message) {
    display: none;
}

.listpdf span.generationterminee, .listpdf span.generationencours {
    display: block!important;
    border-radius: 10px;
    padding: 1px 5px;
    color: #fff;
}

.listpdf span.generationterminee a {
    color: #fff;
}

.listpdf span.generationterminee {
    background: #62abda;
}

.listpdf span.generationterminee span {
    display: none;
}

.listpdf span.generationencours {
    background: #f1a627;
    overflow: hidden;
}

.listpdf span.generationencours .pourcentage {
    display: block;
    position: absolute;
    background: #62abda;
    left: 0;
    top: -10px;
    height: 100%;
    width: 0%;
}

.pdftogen:not(.generationterminee) a {
    display: none;
}

.generationencours:after {
    content: " ";
    display: block;
    background: white;
    opacity: 0.5;
    animation: borealisBar 2s linear infinite;
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    top: 0;
}

@keyframes borealisBar {
    0% {
        left: 0%;
        right: 100%;
        transform: translateX(-100%);
    }

    100% {
        left: 100%;
        right: 0%;
        transform: translateX(0);
    }
}

.modulelist {
    font-size: 14px;
    font-weight: bold;
    padding-left: 100px;
    color: #666;
    text-shadow: none;
}

.sectionlist {
    font-size: 13px;
    padding-left: 150px;
    color: #666;
    text-shadow: none;
}

.partielist {
    font-size: 12px;
    padding-left: 200px;
    color: #666;
    text-shadow: none;
}

.pagelist {
    width: 100%;
    text-align: right;
    display: inline-block;
    color: #666;
    text-shadow: none;
    margin-top: 5px;
}

.modulelist, .sectionlist, .partielist, .pagelist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fieldreponse {
    width: 170px;
}

.fieldquestion {
    width: 100%;
}

.minigray {
    text-shadow: none;
    font-size: 8px;
    color: #666;
}

.userinfo {
    border: 1px #888 solid;
    background-color: rgba(0,0,0,0.1);
    padding: 10px;
}

.userinfotitrecours {
    position: relative;
    height: 25px;
    vertical-align: top;
}

.userinfotitrecours > div {
    font-weight: bold;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    color: #fff;
}

.userinfocours {
    border: 1px #888 solid;
    background-color: rgba(0,0,0,0.1);
    padding: 10px;
}

#usercours_demo {
    color: #f00;
}

.purplebutton {
    border: 1px solid #fff;
    display: inline-block;
    cursor: pointer;
    padding: 2px 8px;
    background: #4cbaff;
    box-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
    position: relative;
    color: #fff;
}

.purplebutton.red {
    background: #f44336;
}

.purplebutton:hover {
    top: -1px
}

.purplebutton:active {
    top: 2px
}

.boutonfichierperso {
    border: #fff 1px solid;
    padding: 5px;
    width: 220px;
    border-radius: 17px;
    background-color: rgba(255,255,255,0.3);
    box-shadow: rgba(0,0,0,0.2) 1px 3px 4px;
    margin-top: 10px;
}

.boutondocument {
    border: #fff 1px solid;
    padding: 5px;
    width: 220px;
    border-radius: 17px;
    background-color: rgba(255,255,255,0.3);
    box-shadow: rgba(0,0,0,0.2) 1px 3px 4px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

#adminuserlist {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 5px;
    display: flex;
    flex-flow: column;
    height: 983px;
    flex-wrap: wrap;
}

#adminuserlist>div {
    width: 194px;
    height: 20px;
}

.usercase .grandcompte {
    background: #ffa655;
    padding: 0 4px;
    border-radius: 6px;
}

div#legende-userlist {
    display: flex;
    align-items: center;
    justify-content: center;
}

div#legende-userlist>div {
    margin: 5px 8px;
}

.bigletter {
    font-size: 16px;
    font-weight: bold;
}

div#menu {
    margin: auto;
    position: relative;
    border: 1px solid #fff;
    width: 100%;
    max-width: calc(100% - 2.5vw);
    font-weight: 500;
    font-size: 18px;
    transition: 0.5s opacity;
}

div#menu.loading {
    opacity: 0;
}

button#retourmenu:after {
    content: "\f100";
    font-family: FontAwesome;
    font-size: 30px;
    color: #5e5e5e38;
    cursor: pointer;
    transition: 0.2s all;
}

button#retourmenu:hover:after {
    color: #ff9612;
    margin-right: 10px;
}

button#retourmenu {
    border: none;
    background: none;
}

div#previewcours {
    width: 360px;
    overflow: hidden;
}

div#cours {
    position: fixed;
    top: 1%;
    left: 1%;
    background: #fff;
    width: 98%;
    height: 98%;
    margin: auto;
    box-sizing: border-box;
    border: 1px solid #888;
    border-radius: 4px;
    opacity: 0.98;
    transition: 0.2s all;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
}

#cours.magnified {
    zoom: 1.2; width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#cours.hidden {
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    opacity: 0;
}

#cours #page {
    margin: 0;
    position: relative;
    font-family: arial;
    line-height: 1;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    left: 0;
    transform-origin: top;
    max-width: 800px;
}

#cours #page.v2 {
    margin: 50px calc(25vw - 88px);
    min-height: calc(100% - 100px);
    line-height: 1;
    font-size: 17px;
    text-align: justify;
    box-sizing: border-box;
}

#cours #page [class*="elmanim_"] {
    transition: 1s all ease;
}

#cours #page [class*="elmanim_fadein"] {
    opacity: 0.1;
}

#cours #page [class*="elmanim_slidein"] {
    transform: translateX(200%);
    opacity: 0;
}

#cours #page [class*="elmanim_3dflip"] {
    transform-origin: left;
    transform: rotateX(10deg) rotateY(117deg);
    will-change: transform;
    backface-visibility: hidden;
    opacity: 0;
}

#cours #page [class*="elmanim_show"] {
    opacity: 1;
    transform: none;
}

#cours #page div[id^="img"] {
    text-align: justify;
    perspective: 760px;
}

/*image responsive*/
#page img[style="width: 25%;"] {
    min-width: 200px;
}

#page img[style="width: 50%;"] {
    min-width: 250px;
}

#page img[style="width: 100%;"] {
    min-width: 300px;
}

#page img {
    max-width: 100%;
    border-radius: 10px;
    margin: auto;
    display: block;
}
#page a>img
{
    display:inline-block !important;
}

#page video {
    border-radius: 10px;
}

/*notes*/
div#maincontent>div#leftblock.slided {
    position: fixed;
    z-index: 3;
    box-shadow: rgb(0 0 0 / 10%) -4px 4px 9px;
    right: -7px;
    top: 90px;
    height: 100%;
    max-width: 370px;
    transform: translateX(100%);
    max-height: calc(100% - 120px);
    margin: 4px;
    /* margin-right: 0; */
    padding-right: 0;
    overflow: initial;
    background: #fff;
    transition: 0.3s all;
    transition-delay: 0.5s;
}

div#maincontent>div#leftblock.slided>div {
    display: flex;
    flex-flow: column-reverse;
    overflow: auto;
    padding-right: 5px;
}

div#maincontent>div#leftblock.slided:hover {
    transform: translateX(0%);
}

div#maincontent>div#leftblock #ongletnote, div#maincontent>div#leftblock #ongletprogramme {
    display: none;
}

div#maincontent>div#leftblock.slided #ongletnote, div#maincontent>div#leftblock.slided #ongletprogramme {
    background: #ffe97b;
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-90deg) translate(-100%,-100%);
    transform-origin: top left;
    text-transform: uppercase;
    font-size: 12px;
    z-index: 100;
    padding: 4px 5px;
    border-radius: 5px;
}

div#maincontent>div#leftblock.slided #ongletprogramme {
    background: #4aace8;
    top: 50px;
    /* left:0; */
}

div#game {
    position: fixed;
    top: -100%;
    left: calc(10% - 36px);
    width: calc(80% + 70px);
    height: 80%;
    background: #fff;
    z-index: 2;
    display: block;
    transition: 0.5s all;
    opacity: 0;
}

div#game.launch {
    top: 10%;
    opacity: 1;
}

div#game>div {
    position: absolute;
    right: 15px;
}

span#closegame:after {
    content: "\f057";
    font-family: 'FontAwesome';
    font-size: 21px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: 2px;
}

span#closegame:hover:after {
    color: #e4a11a;
}

iframe[src^="game"] {
    border: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #eea718;
    box-shadow: rgb(0 0 0 / 29%) 6px 19px 10px;
}

#leftblock #note {
    overflow: auto;
    min-width: 300px;
    min-height: 300px;
    max-width: 95%;
    background: #fffcdb;
    box-shadow: rgb(0 0 0 / 10%) 2px 3px 7px 0;
    padding: 5px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
}

#maincontent #menu {
    margin: 2.5vw auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: normal;
    gap: 10px;
}

#maincontent #menu.inside {
    flex-wrap: nowrap;
    flex-flow: column;
    align-items: center;
}

a.menuelm {
    color: #515962;
    background-color: #c0cbd2;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    display: inline-block;
    margin: 10px;
    box-shadow: rgba(0,0,0,0.1) -2px 10px 7px, inset rgba(255, 255, 255, 0.7) -1px 1px 1px;
    width: 430px;
    max-width: 72vw;
    border-bottom: 1px solid;
    text-transform: capitalize;
}

#menu .cours {
    /* margin: 30px 0; */
}

#menu a.menuelm {
    color: #1c5279;
    font-size: 14px;
    font-style: italic;
    background: none;
    box-shadow: none;
    border: none;
}

#menu .cours>a.menuelm {
    width: 300px;
}

#menu .cours>a.menuelm .infomenu {
    color: #2d2d2d;
    font-size: 10px;
    font-style: normal;
    margin-top: 10px;
    border-radius: 35px;
    /* border: 1px solid #eee; */
}

#menu .cours>a.menuelm .infomenu:after {
    content: "\f101";
    font-family: FontAwesome;
    display: block;
    color: #ea000e;
    font-size: 30px;
    animation-name: littlebounces;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: linear;
}

#menu .cours:nth-child(3n+2)>a.menuelm .infomenu:after {
    animation-delay: 0.2s;
}

#menu .cours:nth-child(3n+0)>a.menuelm .infomenu:after {
    animation-delay: 0.4s;
}

#menu a.menuelm.questionnaire {
    background: #fbec9d;
    color: #0080e3;
    font-weight: bold;
}

#menu a.menuelm.questionnaire>span {
    font-weight: normal;
    font-size: 12px;
}

a.menuelm[data-maj]:after {
    content: attr(data-maj);
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    border: 2px solid #fff;
    display: block;
    background: #ff0000;
    color: #fff;
    position: absolute;
    right: calc(50% - 52px);
    top: 60px;
    box-shadow: rgb(0 0 0 / 50%) -1px 3px 9px;
    z-index: 1;
    font-size: 14px;
    transition: all 0.3s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.2, 2.3);
}

a.menuelm[data-maj]:hover:after {
    top: 50px;
    transform: scale(1.2);
}

@keyframes littlebounces {
    0% {
        transform: translateY(0);
    }

    5% {
        transform: translateY(-3px);
    }

    10% {
        transform: translateY(-4px);
    }

    20% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-1px);
    }

    40% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

#menu>div:not(.cours) .canvasctn {
    transform: translateY(0);
    transition: 0.5s all;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 3px 0;
    border-radius: 5px;
}

#menu>div:hover:not(.cours) .canvasctn {
    transform: translateY(-3px);
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 9px 0;
}

#menu>div {
    animation-name: littleflash;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
}

#menu div:nth-child(5n+1) {
    animation-delay: 0.1s;
}

#menu div:nth-child(5n+2) {
    animation-delay: 0.2s;
}

#menu div:nth-child(5n+3) {
    animation-delay: 0.3s;
}

#menu div:nth-child(5n+4) {
    animation-delay: 0.4s;
}

#menu div:nth-child(5n+5) {
    animation-delay: 0.5s;
}

#menu div:nth-child(5n+6) {
    animation-delay: 0.6s;
}

#menu div:nth-child(5n+7) {
    animation-delay: 0.7s;
}

#menu div:nth-child(5n+8) {
    animation-delay: 0.8s;
}

#menu div:nth-child(5n+9) {
    animation-delay: 0.9s;
}

#menu div:nth-child(5n+10) {
    animation-delay: 1.0s;
}

@keyframes littleflash {
    0% {
        opacity: 1;
    }

    5% {
        opacity: 0.9;
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.menuelm>.canvasctn>canvas {
    z-index: 1;
}

:not(.cours)>a.menuelm .canvasctn {
    background-position: center;
    background-size: cover;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    background-image: url(/img/fond-bloc.jpg);
    position: relative;
}

.bloc > a.menuelm .canvasctn {
    background-image: url(/img/fond-bloc.jpg);
}

.module > a.menuelm .canvasctn {
    background-image: url(/img/fond-module.jpg);
}

.sequence > a.menuelm .canvasctn {
    background-image: url(/img/fond-sequence.jpg);
}

.partie > a.menuelm .canvasctn {
    background-image: url(/img/fond-partie.jpg);
}

:not(.cours)>a.menuelm .canvasctn:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.4);
    z-index: 0;
}

.infocours {
    opacity: 0;
    position: absolute;
    right: 25px;
    bottom: 35px;
    color: #888;
    background: rgba(255,255,255,0.8);
    padding: 5px;
    border-radius: 5px;
    text-align: end;
    text-transform: none;
    transition: 1s all;
}

.cours .infocours {
    text-align: left;
    bottom: unset;
    top: 53px;
    right: 0;
    line-height: 15px;
    padding: 0;
}

.menuelm:hover .infocours {
    opacity: 0.5;
}

.menuelm:hover .infocours:hover {
    opacity: 1;
}

#menu>div, .submenu>div {
    position: relative;
}

.page a.menuelm.lu:after, a.menuelm.justelu:after {
    background: url('../img/checkmark.png');
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

a.menuelm.justelu:after {
    background: none;
    font: normal normal normal 18px/1 FontAwesome;
    content: "\f06e";
    color: #aaa;
    margin-right: 4px;
}

#maincontent a.menuelm.disabled, #maincontent a.menuelm.nondispo {
    opacity: 0.2;
    pointer-events: none;
}

div a.menuelm {
    border-bottom-color: #f59e00;
    background: linear-gradient(365deg, #ffffff, #f9fafb);
}

#menu .hidden {
    opacity: 0;
    transition: 0.5s all;
}

div.bloc a.menuelm {
    border-bottom-color: #39b175;
}

div.module a.menuelm {
    border-bottom-color: #3f6ba7;
}

div.sequence a.menuelm {
    border-bottom-color: #a663c7;
}

div.partie a.menuelm {
    border-bottom-color: #cc2b30;
}

#maincontent div a.menuelm.debloque {
    background: linear-gradient(45deg, #f9ce1d, #ffe900) !important;
}

#menu .submenu {
    transition: 0.2s;
    overflow: hidden;
    margin-top: 0px;
    margin-left: calc(7vw - 38px);
}

#menu .minimized {
    max-height: 0px !important;
    margin-top: -20px;
}

#maincontent .infobouton {
    font-size: 12px;
    color: #949494;
    position: relative;
    top: 9px;
}

#maincontent .infomsg {
    text-align: center;
    margin-top: 20px;
}

div#quiz {
    font-size: 18px;
    text-shadow: rgba(0,0,0,0.3) 1px 1px 2px;
    display: block;
    box-sizing: border-box;
    height: 560px;
    width: 100%;
    position: relative;
    min-height: 100%;
}

div#quizdiv {
    white-space: nowrap;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all;
}

div#quizdiv>div {
    width: 100%;
    height: 100%;
    display: flex;
    white-space: normal;
    position: absolute;
    top: 0;
    padding: 50px 10px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

#quiz input[type="submit"] {
    margin: auto;
    display: block;
}

#quiz form {
    height: 90%;
}

.quiz_reponses {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    max-height: 80%;
    align-items: flex-start;
}

.quiz_container {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}

.quiz_reponse {
    display: inline-block;
    max-width: 50%;
    flex-shrink: 1;
    line-height: 26px;
    text-shadow: none;
}

.quiz_nextquestion, .valider_caspratique {
    background: #eee;
    padding: 5px 10px;
    border-radius: 30px;
    border: none;
    margin: 40px 0px 0px 50%;
    transition: 0.3s all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.37, 1.85);
    position: relative;
    left: -20px;
    cursor: pointer;
    color: #666;
    font-weight: bold;
    text-shadow: none;
}

.quiz_nextquestion:hover {
    left: 0px;
}

.quiz_question {
    background: #eee;
    padding: 1px 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-shadow: none;
}

.checktexteqcm {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    flex-basis: 25%;
}

div#listequestion {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
}

div#listequestion>div:after {
    content: "\f2ed";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 0;
    top: 0;
}

/*timer quiz*/
div#timer {
    position: fixed;
    bottom: 50px;
    right: 50px;
    font-size: 100px;
    font-family: system-ui;
    font-weight: bold;
}

/*admin quiz*/
.checktexteqcm>input[type="text"] {
    flex-grow: 1;
}

.checktexteqcm>input[type="checkbox"] {
    flex-shrink: 1;
    width: unset;
}

.adminreponsesqcm {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    justify-content: flex-start;
}

.bottommenu {
    margin: auto;
    text-align: left;
    position: fixed;
    z-index: 240;
    bottom: 0;
    right: 0;
    background: #f1a816;
    padding: 5px;
    border-radius: 5px;
    margin: 37px;
    box-shadow: rgb(0 0 0 / 21%) 3px 4px 9px;
}

#menuaudio {
    background: #5ba8eb;
}

div#infopage {
    /* position: absolute; */
    left: 8px;
    top: 5px;
    color: #ff900d;
    text-shadow: none;
    text-align: center;
}

#resultatquiz>div {
    border: none;
    background: #f3f3f3;
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    box-shadow: rgba(0,0,0,0.1) -2px 10px 7px, inset rgba(255, 255, 255, 0.7) -1px 1px 1px;
    margin-top: 2px;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

#resultatquiz {
    width: 90%;
    /* height: 560px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 10px auto 10px auto;
}

#resultatquiz>div {
    padding: 10px;
    color: #646464;
    max-width: 100%;
}

#resultatquiz img {
    max-width: 100%;
}

#resultatquiz .resquizinfo {
    max-width: 400px;
    font-size: 12px;
    font-style: italic;
    margin-top: 10px;
    line-height: 17px;
    text-align: justify;
}

#resultatquiz .resquizinfo:before {
    font-family: FontAwesome;
    content: "\f05a";
    font-style: normal;
    font-size: 16px;
}

#resultatquiz .resquizinfo a {
    background: none;
    color: unset;
    text-decoration: underline;
}

.resultats span[style*="color"] {
    font-size: 14px;
    background: #e6e6e6;
    border-radius: 10px;
    display: inline-block;
    padding: 0 5px;
    padding-left: 0;
    margin-top: 6px;
    font-style: italic;
}

.resultats span[style*="color"]:before {
    content: "Votre resultat : ";
    color: #fff;
    background: #aaa;
    border-radius: 10px;
    display: inline-block;
    margin-right: 5px;
    padding: 0 5px;
    font-style: normal;
}

#quiz input[type="radio"], #quiz input[type="checkbox"] {
    width: 30px;
    height: 30px;
    position: relative;
    top: 8px;
    margin-right: 10px;
}

textarea.ta_texteatrous {
    display: block;
    margin-bottom: 20px;
    width: 100%;
    height: 300px;
}

div#texteatrous {
    padding: 10px;
    padding-bottom: 40px;
    background: rgb(232 232 232 / 50%);
    margin: 50px;
    font-family: monospace;
    border-bottom-right-radius: 30px;
    font-size: 14px;
    position: relative;
}

div#letexteatrous {
    margin-bottom: 50px;
    line-height: 19px;
}

/*table.tableauatrou tr:first-of-type td {
    font-weight: bold;
    background: #b7b7b7;
    color: #fff;
    border-color: #fff;
}*/
table.tableauatrou td {
    border: 1px solid #c5c5c5;
    padding: 7px;
}

div.tat_ctn {
    max-width: 100%;
    overflow-x: auto;
}

table.tableauatrou {
    border-collapse: collapse;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 8px;
}

div#bouchestrous {
    display: none;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
}

div#bouchestrous.floating {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.9);
    border-radius: 5px;
    display: flex;
}

div#bouchestrous>.bouchetrou {
    margin: 10px;
    padding: 0 10px;
    cursor: pointer;
    color: #0068a5;
}

div#bouchestrous>.bouchetrou:hover, div#bouchestrous>.bouchetrou.dragging {
    background: #fff;
    border-radius: 20px;
}

div#bouchestrous>.bouchetrou.dragging {
    position: absolute;
    z-index: 100;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

div#bouchestrous>.bouchetrou.overtrou {
    background: none;
}

div#bouchestrous>.bouchetrou.placed {
    display: none;
}

div#bouchestrous>.bouchetrou.placed:hover {
    background: #fff;
    /*opacity: unset;*/
}

div#titre_texteatrous {
    margin: 50px;
}

span.trou {
    color: #ff9517;
    cursor: pointer;
}

span.trou.draggingover {
    background: #fff;
    border-radius: 20px;
    opacity: 0.5;
}

/*trou dans tableau*/
td>span.trou {
    display: inline-block;
}

.bottommenu a {
    color: #ffffff;
    padding: 0;
    border-radius: 20px;
    margin-left: 0px;
    margin-right: 2px;
    position: relative;
}

.bottommenu a:after {
    font: normal normal normal 22px/1 FontAwesome;
    color: #fff;
    padding: 10px;
    /* top: 5px; */
    position: relative;
}

.bottommenu a.closebtn:after {
    content: "\f057";
}

.bottommenu a.magnifierbtn:after {
    content: "\f1e5";
}

.bottommenu a.prevbtn:after {
    content: "\f048";
}

.bottommenu a.nextbtn:after {
    content: "\f051";
}

.bottommenu a.audioprev:after {
    content: "\f049";
}

.bottommenu a.audiopause:after {
    content: "\f28b";
}

.bottommenu a.audionext:after {
    content: "\f050";
}

.bottommenu a.audiostop:after {
    content: "\f28d";
}

#cours a.menuelm.questionnaire {
    background-color: #ff8603;
}

#cours a.menuelm.idmodule {
    background-color: #429f9f;
}

#cours a.menuelm.idsection {
    background-color: #3f6c7b;
}

#cours a.menuelm.idpartie {
    background-color: #6a4268;
}

#cours a.menuelm.page {
    background-color: #992120;
}

a.audiolauncher {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    color: #fff;
    font-size: 20px;
    opacity: 0.4;
    transition: 0.5s all;
}

.menuelm:hover a.audiolauncher {
    opacity: 1;
}

a.audiolauncher:hover {
    color: #f59225;
}

a.audiolauncher:after {
    content: "\f58f";
    font-family: 'FontAwesome';
}

#cours .infobouton.questionnaire {
    color: #ff8603;
}

#cours .infobouton.idmodule {
    color: #429f9f;
}

#cours .infobouton.idsection {
    color: #3f6c7b;
}

#cours .infobouton.idpartie {
    color: #6a4268;
}

#cours .infobouton.page {
    color: #992120;
}

#cours .message {
    margin-left: 20px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    text-align: center;
}

/*cas pratique*/
form[name="formquiz"] {
    flex-grow: 1;
}

textarea.ta_cpenonce, textarea.ta_cpresolution {
    display: block;
    width: 100%;
    height: 200px;
}

#caspratique img {
    max-width: 100%;
    margin: auto;
    display: block;
}

div#caspratique>div {
    padding: 10px;
    background: rgba(255,255,255,0.5);
    margin: 4vw;
    font-family: monospace;
    border-bottom-right-radius: 30px;
    font-size: 14px;
    line-height: 15px;
}

div#caspratique textarea {
    width: 99%;
    height: 100%;
    min-height: 200px;
    margin-top: 5px;
    display: block;
}

.valider_caspratique {
    margin: 0 auto 51px auto !important;
    display: block;
}

#resultatquiz #resolution {
    margin: 10px;
    background: #a5dbae;
    padding: 5px;
}

#resultatquiz #reponsecandidat {
    font-style: italic;
    margin: 10px;
    background: #dedf9c;
    padding: 5px;
}

/*sub content*/
.subcontent {
    margin: auto;
    /* width: 800px; */
    max-width: 90%;
    position: relative;
}

/*profil*/
form[name="userform"]>div, #cours-fichier-profil {
    display: flex;
    flex-wrap: wrap;
}

form[name="userform"]>div>div, #cours-fichier-profil>div {
    flex-basis: 43%;
    flex-grow: 1;
    min-width: 200px;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 20px 10px;
}

form[name="userform"]>div>div>div, #cours-fichier-profil>div>div {
    display: inline-block;
}

form[name="userform"]>div>div>div>div, #cours-fichier-profil>div>div>div {
    margin-bottom: 5px;
}

.html_historiqueadmin {
    overflow-y: auto;
    max-height: 290px;
}

.blocprofil {
    background: rgba(255,255,255,0.8);
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #ffeed4;
    box-shadow: rgba(0, 0, 0, 0.02) 2px 2px 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    word-break: break-all;
    line-break: anywhere;
}

.blocprofil input {
    height: 29px;
    border-radius: 3px;
    border: 1px solid #a3dff1;
    padding: 5px;
    background: #fff8ef;
    display: inline-block;
}

.blocprofil input[readonly] {
    opacity: 0.5;
}

.blocprofil input[type=submit] {
    background: #4aace8;
    border-color: #afafaf;
    color: #fff;
}

.blocprofil>span:first-of-type {
    color: #ffa920;
    font-weight: bold;
    margin-bottom: 16px;
    display: inline-block;
}

input[name=payerpp] ,input[name=payer] {
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #059de1;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: rgb(0 0 0 / 28%) 2px 4px 4px;
    cursor:pointer;
}

#btn_paiement input[name=payerpp] {
    background-image: url(/img/paypal4x.png);
    width: 127px;
    height: 52px;
}

#btn_paiement input[name=payer] {
    background-image: url(/img/logo-banque-populaire.png);
    width: 153px;
    height: 52px;
}

#btn_paiement {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/*page resultat utilisateur*/
.resultats div {
    margin-left: 30px;
    margin-top: 10px;
}

.resultats>div {
    font-size: 17px;
    margin-bottom: 40px;
    overflow: hidden;
}

.resultats>div.selectable:not(.selected) {
    height: 19px;
    margin-bottom: 6px;
}

.resultats.html_liste>div.selected {
    background: linear-gradient( 215deg , #fcfcfd, #fefefe);
    color: unset;
}

.resultats.salarie>div {
    height: unset;
    margin-bottom: -3px;
    font-size: 14px;
    box-shadow: hsl(202deg 100% 4% / 6%) 0px 2px 5px, inset hsl(202deg 72% 74%) 0px 1px 0px 0px;
}

.resultats>div>div {
    font-size: 16px;
}

.resultats>div>div>div {
    font-size: 14px;
}

.resultats>div>div>div>div {
    font-size: 13px;
}

.resultats>div>div>div>div>div {
    font-size: 12px;
}

a[href*='resultats?'] {
    background: #ff9828;
    color: #fff;
    padding: 0 4px;
    border-radius: 9px;
}

.questionevaluation:first-line {
    font-weight: bold;
}

.reponsesevaluation {
    color: #0e9d0e;
}

/*details reponses utilisateur*/
.resultats div.resultat_blocquestion {
    margin: 10px;
}

.resultats div.resultat_blocquestion div {
    margin: 10px 0;
}

.resultat_blocquestion {
    background: #f3f3f3;
    border-radius: 5px;
    padding: 10px;
}

.resultat_titrebonnesreponses {
    font-weight: bold;
}

.resultat_bonnesreponses {
    margin-top: 10px;
    display: none;
}

.caspratique .resultat_infojustefaux, .texteatrous .resultat_infojustefaux {
    display: none
}

.resultat_blocquestion.faux .resultat_infojustefaux {
    color: #f00;
}

.resultat_blocquestion.juste .resultat_infojustefaux {
    color: #0e9d0e;
}

.resultat_reponse:before {
    content: "\25CB";
    margin-right: 5px;
}

.resultat_reponse[checked]:before, .resultat_bonnereponse:before {
    content: "\25CF";
    margin-right: 5px;
}

.responsesvisibles .resultat_blocquestion:not(.juste) .resultat_bonnesreponses {
    display: block;
}

.resultat_reponse {
    font-style: italic;
}

.resultat_question+div {
    margin-top: 10px;
}

.caspratique #resultat_resumectn {
    display: none;
}

.resultats div#resultat_resumectn>div {
    margin: 7px 0;
}

.resultats div#resultat_resumectn {
    /* position: fixed; */
    /* right: 10px; */
    /* bottom: 60px; */
    background: #f3f3f3;
    /* z-index: 10; */
    /* width: 260px; */
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ff9828;
    box-shadow: rgb(0 0 0 / 17%) 4px 9px 13px;
    opacity: 0.9;
    text-align: center;
}

.resultats div#resultat_resume {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div#resultat_resume>.resultat_qresume {
    margin: 3px;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

div#resultat_resume>.resultat_qresume>div {
    margin: 0;
    height: 14px;
    width: 20px;
    text-align: center;
}

div#resultat_resume>.resultat_qresume.faux>div:last-child {
    background: #f00;
}

div#resultat_resume>.resultat_qresume.juste>div:last-child {
    background: #0e9d0e;
}

.highlighted {
    border: 2px solid #4aace8;
    background: #fff;
}

/*feuille suivi*/
.lignesuivi {
    display: flex;
    max-width: 100%;
}

.lignesuivi select {
    max-width: 50%;
}

#formsuivi form>div:first-of-type .uptriangle {
    pointer-events: none;
    visibility: hidden;
}

#formsuivi form>div:last-of-type .downtriangle {
    pointer-events: none;
    visibility: hidden;
}

/*editorjs*/
.image-tool__caption {
    display: none;
}

/*user/admin switch*/
div#modeswitch {
    display: flex;
    align-items: center;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10;
}

#modeswitch .titre {
    margin-right: 5px;
    color: #d9dada;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 29px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(15px);
}

div#fs_logo {
    width: 100px;
}

/*quiz satisfaction*/
.quiz_reponses .satisfaction-slider:before
{
    display:none;
}
.quiz_reponses .satisfaction-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80%; /* Largeur du slider */
    height: 15px; /* Hauteur du slider */
    background: #d3d3d3; /* Couleur de fond grise */
    outline: none;
    opacity: 0.7;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
    border-radius: 12.5px; /* Coins arrondis */
    margin:auto;
    margin-top: 0;
}

.quiz_reponses .satisfaction-slider:hover {
    opacity: 1;
}

.quiz_reponses .satisfaction-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; /* Largeur du curseur */
    height: 30px; /* Hauteur du curseur */
    background: #4CAF50; /* Couleur verte */
    cursor: pointer;
    border-radius: 50%; /* Curseur rond */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre légère */
}

.quiz_reponses .satisfaction-slider::-moz-range-thumb {
    width: 35px;
    height: 35px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


.quiz_reponses .slider-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 23px auto 0; /* Augmentation de la marge supérieure */
    font-size: 14px; /* Légère augmentation de la taille de la police */
}

.quiz_reponses .slider-labels span {
    width: 20%;
    text-align: center;
}

/*chat*/
a#chat {
    position: fixed;
    right: 0;
    bottom: 20px;
    background: #0095ff;
    width: 70px;
    height: 30px;
    z-index: 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 18px;
    border-bottom-right-radius: 0;
    transition: 0.5s all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.08, 1.56);
}

a#chat.hightlighted {
    border: 3px solid #fff!important;
    animation: shine 0.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes shine {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

a#chat:hover:not(:active) {
    /* bottom:22px; */
    transform: translateY(-2px) scale(1.5);
    transform-origin: bottom right;
}

a#chat:before {
    font-family: FontAwesome;
    font-size: 20px;
    content: "\f086";
    margin-right: 5px;
}


/*page resultat utilisateur*/
.resultats div {
    margin-left: 30px;
    margin-top: 10px;
}

.resultats>div {
    font-size: 17px;
    margin-bottom: 40px;
    overflow: hidden;
}

.resultats>div.selectable:not(.selected) {
    height: 19px;
    margin-bottom: 6px;
}

.resultats.html_liste>div.selected {
    background: linear-gradient( 215deg , #fcfcfd, #fefefe);
    color: unset;
}

.resultats.salarie>div {
    height: unset;
    margin-bottom: -3px;
    font-size: 14px;
    box-shadow: hsl(202deg 100% 4% / 6%) 0px 2px 5px, inset hsl(202deg 72% 74%) 0px 1px 0px 0px;
}

.resultats>div>div {
    font-size: 16px;
}

.resultats>div>div>div {
    font-size: 14px;
}

.resultats>div>div>div>div {
    font-size: 13px;
}

.resultats>div>div>div>div>div {
    font-size: 12px;
}

a[href*='resultats?'] {
    background: #ff9828;
    color: #fff;
    padding: 0 4px;
    border-radius: 9px;
}

.questionevaluation:first-line {
    font-weight: bold;
}

.reponsesevaluation {
    color: #0e9d0e;
}

/*details reponses utilisateur*/
.resultats div.resultat_blocquestion {
    margin: 10px;
}

.resultats div.resultat_blocquestion div {
    margin: 10px 0;
}

.resultat_blocquestion {
    background: #f3f3f3;
    border-radius: 5px;
    padding: 10px;
}

.resultat_titrebonnesreponses {
    font-weight: bold;
}

.resultat_bonnesreponses {
    margin-top: 10px;
    display: none;
}

.caspratique .resultat_infojustefaux, .texteatrous .resultat_infojustefaux {
    display: none
}

.resultat_blocquestion.faux .resultat_infojustefaux {
    color: #f00;
}

.resultat_blocquestion.juste .resultat_infojustefaux {
    color: #0e9d0e;
}

.resultat_reponse:before {
    content: "\25CB";
    margin-right: 5px;
}

.resultat_reponse[checked]:before, .resultat_bonnereponse:before {
    content: "\25CF";
    margin-right: 5px;
}

.responsesvisibles .resultat_blocquestion:not(.juste) .resultat_bonnesreponses {
    display: block;
}

.resultat_reponse {
    font-style: italic;
}

.resultat_question+div {
    margin-top: 10px;
}

.caspratique #resultat_resumectn {
    display: none;
}

.resultats div#resultat_resumectn>div {
    margin: 7px 0;
}

.resultats div#resultat_resumectn {
    /* position: fixed; */
    /* right: 10px; */
    /* bottom: 60px; */
    background: #f3f3f3;
    /* z-index: 10; */
    /* width: 260px; */
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ff9828;
    box-shadow: rgb(0 0 0 / 17%) 4px 9px 13px;
    opacity: 0.9;
    text-align: center;
}

.resultats div#resultat_resume {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div#resultat_resume>.resultat_qresume {
    margin: 3px;
    border: 1px solid #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

div#resultat_resume>.resultat_qresume>div {
    margin: 0;
    height: 14px;
    width: 20px;
    text-align: center;
}

div#resultat_resume>.resultat_qresume.faux>div:last-child {
    background: #f00;
}

div#resultat_resume>.resultat_qresume.juste>div:last-child {
    background: #0e9d0e;
}

.highlighted {
    border: 2px solid #4aace8;
    background: #fff;
}

/*feuille suivi*/
.lignesuivi {
    display: flex;
    max-width: 100%;
}

.lignesuivi select {
    max-width: 50%;
}

#formsuivi form>div:first-of-type .uptriangle {
    pointer-events: none;
    visibility: hidden;
}

#formsuivi form>div:last-of-type .downtriangle {
    pointer-events: none;
    visibility: hidden;
}

/*editorjs*/
.image-tool__caption {
    display: none;
}

/*user/admin switch*/
div#modeswitch {
    display: flex;
    align-items: center;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 10;
}

#modeswitch .titre {
    margin-right: 5px;
    color: #d9dada;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 29px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(15px);
}

div#fs_logo {
    width: 100px;
}

/*chat*/
a#chat {
    position: fixed;
    right: 0;
    bottom: 20px;
    background: #0095ff;
    width: 70px;
    height: 30px;
    z-index: 1;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 18px;
    border-bottom-right-radius: 0;
    transition: 0.5s all;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.08, 1.56);
}

a#chat.hightlighted {
    border: 3px solid #fff!important;
    animation: shine 0.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes shine {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

a#chat:hover:not(:active) {
    /* bottom:22px; */
    transform: translateY(-2px) scale(1.5);
    transform-origin: bottom right;
}

a#chat:before {
    font-family: FontAwesome;
    font-size: 20px;
    content: "\f086";
    margin-right: 5px;
}