/*
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("webfonts/fa-regular-400.eot");
  src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
 */
  
body {font-family:Arial, sans-serif;color:#333333;font-size:14px;line-height:2em;background-image:url('bg_subtle_dots_v2.png');padding:10px;padding-left:50px;margin:0;}
body#home{padding-left:10px;}
div.seclight {display:flex;margin:0 auto;width:100%;max-width:1200px;}
div.secfull {display:block;margin:0 auto;width:100%;max-width:1920px;}
section {width:100%;padding:20px;box-sizing: border-box;background-color: #ffffff;}
footer {clear:both;display:block;text-align:center;padding:20px 10px;}
a {color:#4e88a5;text-decoration:none;}
a:hover {text-decoration:underline;}

h1, h2, h3, h4, hr {clear:both;}
h1 {font-size:40px;text-align:center;}
h2 {font-size:34px;font-weight:normal;margin:15px 0;}
h3 {font-size:28px;font-weight:normal;text-align: left;margin:10px 0;padding-left: 10px;border-left: 5px solid #333;border-bottom:1px dotted #333;}
h4 {font-size:24px;font-weight:normal;text-align: left;padding-left: 10px;border-left: 5px solid #333;border-bottom:1px dotted #333;}
h5 {font-size:20px;font-weight:bold;}
.aligncenter {text-align:center;}
.alignleft {text-align:left;}
.alignright {text-align:right;}
.inlineblock {display:inline-block;}
.inline {display:inline;}
.center{margin:0 auto;float:none;}
ul, ol {padding-left:15px;margin-left:20px;}
li {margin-bottom:5px;}
.underline {text-decoration:underline;}

/* IMAGES */

img {display: block;margin: 0 auto;max-width: 100%;}
figure{width:40%;float:right;}
.p20{width:20%;}
.p30{width:30%;}
.p50{width:50%;}
.p60{width:60%;}
.p80{width:80%;}
.p100{width:100%;float:none;margin:0 auto;}
.pauto{width:auto;float:none;margin:0 auto;}
figcaption{font-style:italic;text-align:center;line-height:1.2em;padding-top:5px;}

.zoomable {cursor: zoom-in;}

#image-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
}

#image-overlay.active {
    display: flex;
}

#image-overlay img {
    max-width: 95vw;
    max-height: 95vh;
}


/* SECTIONS */
aside {width:250px;}
aside + section {flex: 1;}
article {padding-top:30px;}
@media (max-width:1200px){
aside + section, aside, header, #sec_nav aside + section, #sec_nav aside {float:none;padding:5px;width:100%;}
img {max-width: 100%;height:auto;}
}
.cols {display: flex;gap: 20px;}
.col1 { flex: 1; }
.col2 { flex: 2; }
.col3 { flex: 3; }
.col4 { flex: 4; }

/* PANNEAUX ONGLETS */
.tab-panel {display: none;}
.tab-panel.active {display: block;}
.tabs ul {display: flex;gap: 1em;list-style: none;padding: 0;margin: 0;}
.tabs li {cursor: pointer;padding: .5em 1em;}
.tabs li.active {border-bottom: 2px solid currentColor;font-weight: bold;}
.tab-panel {display: none;}
.tab-panel.active {display: block;}

/* THEMES COULEURS */
.cintro,.ctheme1,.ctheme2,.ctheme3,.ctheme4,.ctheme5,.ctheme6,.ctheme7 {display:inline-block;border-radius:5px;padding:3px 6px;color:#fff;}
.cintro {background:#a7755d;}
.ctheme1 {background:#f94646;}
.ctheme2 {background:#ff9800;}
.ctheme3 {background:#ddbc16;}
.ctheme4 {background:#7fb73e;}
.ctheme5 {background:#5dddc0;}
.ctheme6 {background:#489aef;}
.ctheme7 {background:#a14dd3;}

/* BOUTON RETOUR HAUT */
#totop {display:none;cursor:pointer;background-color:#333333;width:50px;height:50px;border-radius:3px;position:fixed;z-index:99;bottom:20px;right:20px;opacity:0.5;background-image:url('arrow_top_white.png');}
#totop:hover {opacity:1;}

/* LIENS ET BOUTONS */
a.btnbleu {display: inline-block;margin: 2px;padding: 5px 10px;margin: 10px;border: 1px solid #03a9f4;background-color: #03a9f4;color: #fff;line-height: 30px;font-size: 14px;}
a.btnbleu:hover {background-color:#fff;color:#03a9f4;text-decoration:none;}
.cadretp a {display:block;border:1px solid #4e88a5;padding:20px;text-align:center;color:#4e88a5;text-decoration:none;font-size:20px;transition:all 0.2s ease;}
.cadretp a:hover {color:#ffffff;background:#4e88a5;}

.dl_btn_cours {margin:5px;}
.dl_btn_cours li {list-style-type:none;display:inline-block;margin:2px;}
.dl_btn_cours li a {display:block;padding:5px 10px 5px 35px;margin:2px;border-radius:3px;background:#4e88a5;color:#fff;line-height: 30px;font-size: 14px;background-image:url('icone_dl.png');background-position:7px 7px;background-repeat:no-repeat;}
.dl_btn_cours li a:hover {text-decoration:none;background-color:#00bcd4;}

/* NAVIGATION */
#infoco {width:100%;padding:0;line-height:40px;text-align:right;background-color:#444444;color:#ffffff;z-index:9;}
#infoco a {color:#69b4f0;display:block;padding:0 10px;}
#infoco a:hover {text-decoration:none;color:#fff;background:#69b4f0;}
#infoco a.navlogout {background:#d22c20;color:#fff;}
#infoco a.navlogout:hover {background:#c00000;}
#welcome {display:inline-block;margin:0 10px;}

@media (max-width:768px){
body {padding-top: 0px;}
#infoco {position:relative;}
}

/* CADRES */
.cadrerouge,.cadreorange,.cadrebleu,.cadrevert {padding:20px;margin-bottom:10px;}
.cadrerouge h4,.cadreorange h4,.cadrebleu h4,.cadrevert h4 {margin-top:0;}
.cadrerouge {border:1px solid #d22c20;color:#d22c20;}
.cadreorange {border:1px solid #ff9800;color:#ff9800;}
.cadrebleu {border:1px solid #03a9f4;color:#03a9f4;}
.cadrevert {border:1px solid #8bc34a;color:#8bc34a;}

.cadrefdrouge, .cadrefdorange, .cadrefdbleu, .cadrefdvert {padding:10px;border-radius:5px;}
.cadrefdrouge {background:#ffcccc;}
.cadrefdorange {background:#f3d0ac;}
.cadrefdbleu {background:#c3e2fb;}
.cadrefdvert {background:#d5f5af;}

.crouge {color:#d22c20;}
.corange{color:#ff9800;}
.cbleu {color:#03a9f4;}
.cvert{color:#8bc34a;}

.stabilorouge, .stabiloorange, .stabilobleu, .stabilovert {display:inline-block;border-radius:3px;padding: 0 5px;background:#f5f5f5;}
.stabilorouge {background:#ffcccc;color:#d22c20;}
.stabiloorange {background:#f3d0ac;color:#af6800;}
.stabilobleu {background:#c3e2fb;color:#0b80b5;}
.stabilovert {background:#d5f5af;color:#5b7f32;}

.codebloc {position:relative;}
.langage {position: absolute;top: 0;right: 0;padding:0 10px;border:1px solid #ccc;border-radius:0 5px 0 15px;}

pre {padding:10px;border-radius:5px;border:none;background:#f5f5f5;border:1px solid #ccc;font-family: "Courier New", Menlo,Monaco,Consolas, monospace;}

/* VIDEOS */
.video {width: 100%;max-width: 800px;aspect-ratio: 16 / 9;margin:0 auto;}
.video iframe {width: 100%;height: 100%;border: 0;}
.video a.videolink {display:none;}
.videoprint {display:none;font-style:italic;}

/* TABLEAU */
table {border-collapse: collapse;margin-left:40px;}
thead {font-weight:bold;}
table,th,td {border: 1px solid #000;}
td {padding:5px 10px;}


/* FORMULAIRES */
fieldset {border:none;}
input[type="text"], input[type="password"], input[type="submit"], textarea, .bouton, button, input[type="submit"], .disabledinput, textarea {cursor: pointer;border-radius: 3px;padding: 5px;line-height: 20px;border: 1px solid #cccccc;margin-top:4px;}
textarea {resize: vertical;width:100%;padding-right:20px;box-sizing: border-box;height:140px;}
label {display:block;}
.disabledinput {cursor:not-allowed;background:#f7f7f7;}
.labelin {display:inline-block;width:100px;padding-right:10px;line-height:32px;text-align:right;font-weight:bold;}
.labelin250 {display:inline-block;width:250px;padding-right:10px;line-height:32px;text-align:right;font-weight:bold;}
@media (max-width:680px){ .labelin, .labelin250 {width:100%;text-align:left;}}
.bouton, input[type="submit"] {transition:0.2s ease all;}
.bouton:hover, button:hover, input[type="submit"]:hover {background-color:#333333;color:#ffffff;text-decoration:none;}
#form_login fieldset {width:400px;margin:0 auto;text-align:center;}
@media (max-width:400px){ #form_login {width:100%;}}
#print-tab {display:block;padding-left:30px;margin:20px auto;}
#print-tab::before{content: "🖨️";position:absolute;margin-left:-25px;}

.print-textarea,
.print-input {
    display: none;
	color: #0057b8;
	font-weight:bold;
	line-height:1.2em;
}

/* QUESTIONS */
ul.questionnaire, ul.manip {list-style: none;margin-left:0;padding-left: 30px;clear:both;}
ul.questionnaire li, ul.manip li {position:relative;}
ul.questionnaire > li::before {content: "✍️ ";position:absolute;margin-left:-25px;}
ul.manip > li::before {content: "💻 ";position:absolute;margin-left:-25px;}
ul.questionnaire li form, ul.manip li form {position:relative;padding-right:20px;}
ul.questionnaire li input[type="text"], ul.manip li input[type="text"] {width:100%;box-sizing: border-box;border-radius: 3px 0 0 3px;}
ul.questionnaire input[type="submit"], ul.manip input[type="submit"] {position:absolute;width:20px;right:0;border-radius: 0 3px 3px 0;}
ul.questionnaire ul, ul.manip ul {list-style: disc;padding-left:15px;}


/* WIFI */
#network-status {
    padding: 10px 15px;
    border-radius: 6px;
    margin: 10px;
    font-weight: bold;
}

#network-status.online {
    background: #d4edda;
    color: #155724;
}

#network-status.offline {
    background: #f8d7da;
    color: #721c24;
}

.bifrost-only,
.ecole-only,
.reseau-autorise-only {
    display: none;
}

body.reseau-bifrost .bifrost-only {
    display: block;
}

body.reseau-ecole .ecole-only {
    display: block;
}

body.reseau-bifrost .reseau-autorise-only,
body.reseau-ecole .reseau-autorise-only {
    display: block;
}


@media print {

    body * {
        visibility: hidden;
    }

    section,
    section * {
        visibility: visible;
    }

    section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .tab-panel {
        display: none !important;
    }

    .tab-panel.active {
        display: block !important;
    }

    .tabs,
    #print-tab,aside,
    input[type="submit"],#totop {
        display: none !important;
    }

    .disabledinput {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        color: #0057b8 !important;
        font-weight: bold;
        font-family: inherit;
        font-size: inherit;
        resize: none;
        overflow: visible;
    }

	textarea,
    input[type="text"],
    input[type="submit"] {
        display: none !important;
    }

    .print-textarea,
    .print-input {
        display: block;
        color: #0057b8;
        font-weight: bold;
        white-space: pre-wrap;
        margin: 0.5em 0;
    }
	
	.video {display:none !important;}
	.videoprint {display:block !important;}
}


















/* ACCUEIL */
.cours-art{display:block;position:relative;padding:10px;padding-right:200px;margin-bottom:20px;border-radius:5px;border:1px solid #d0d0d0;box-shadow: rgb(208, 208, 208) 0px 0px 5px;overflow: hidden;transition-property: box-shadow;transition-duration: 0.5s;color:#000;}
.cours-art:hover{box-shadow: rgb(67, 67, 67) 0px 0px 10px;}
.cours-art img {position:absolute;right:0;bottom:0;width:180px;}
.cours-art h3 {margin:10px 0;}
.cours-art, .cours-art p, .cours-art h2, .cours-art h3, .cours-art h4, .cours-art:hover, .cours-art:hover p, .cours-art:hover h2, .cours-art:hover h3, .cours-art:hover h4 {text-decoration:none;}
.cours-art span {border-radius:5px;padding:3px 6px;background:#495;color:#fff;}

@media (max-width:1200px){
.cours-art{padding-right:10px;}
.cours-art img {display:none;}
}

/* PAGE COURS */
.objectifs {text-align:left;margin-top:40px;}
.objectifs strong {font-size:1.4em;}
.objectifs em {font-size:0.8em;color:#777;}
.objectifs table {border-collapse: collapse;width:100%;}
.objectifs td {border:1px solid #ccc;padding:10px;}
.objectifs th {padding:15px 10px;}
.objectifs tbody tr:nth-child(odd) {background:#dce6ed;}
.objectifs tbody tr:nth-child(even) {background:#eceff1;}
.objectifs thead tr {background:#444;color:#fff;}
.iconebo {display: inline;border:none;vertical-align:bottom;}

/* DOCUMENTS */
.uldocs {text-align:left;list-style-type:none;}
.uldocs li:nth-child(odd) {background:#dce6ed;}
.uldocs li:nth-child(even) {background:#eceff1;}
.uldocs li a {display:block;padding:10px 15px;font-size: 1.2em;}
.uldocs li:hover {background:#69b4f0 !important;}
.uldocs li a:hover {text-decoration:none;color:#fff;}

/* COMPTE */
#tabprofplanrespdiv .resp33 {width:33%;padding:0 1%;box-sizing:border-box;display:inline-block;vertical-align:top;}

.tabprofplanresp {width:100%;border-spacing : 6px;border-collapse : separate;}
.tabprofplanrespmin {width:100%;border-spacing : 3px;border-collapse : separate;}
.tabprofplanresp .planplace {background: #6c8d97;text-align: center;padding:4px 2px;border-radius: 3px;}
.tabprofplanresp .placeloc {background:#8db600;}
.tabprofplanresp .placedisabled {background:#d0d4d7 !important;opacity: 0.4;}

#user_ci {width:100%;min-height:150px;}
#changemdp input[type="password"] {width:300px;max-width:100%;}