*, *::before, *::after {box-sizing: border-box;}
body {background-color: #000; padding-top:50px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529;}
#haut {position:fixed; height:48px; margin:0; top:0; left:0; font-size:26px; background-color: #CCCCFF; text-align: center; padding:0px; width: 100%; font-family: "Comic Sans MS", "Comic Sans", cursive; overflow: hidden; color: white; text-shadow: black 0.1em 0.1em 0.2em; -webkit-text-shadow: black 0.1em 0.1em 0.2em; -moz-text-shadow: black 0.1em 0.1em 0.2em; box-shadow: 0px 3px 3px 0px #656565; -webkit-box-shadow: 0px 3px 3px 0px #656565; -moz-box-shadow: 0px 3px 3px 0px #656565;}
#zone_ligne_colonne {display: grid; grid-column-gap: 10px; grid-row-gap: 10px; margin:0 auto;}
#zone_ligne_colonne > div {background:#fff; margin:0; padding:0; font-size: 0px; position:relative;}
#zone_ligne_colonne > div > .limage, .ladiapo {width: 100%; height: auto; border:none;}
.leson {position:absolute; top:5px; right:5px;}
.effet_bouton {cursor:pointer; transition: all 0.5s;}
.effet_bouton:hover {filter: brightness(0.8); transform: scale(0.9);}
.bts_gauche {position:absolute; top:5px; left:5px; width:130px; height:32px;}
.bts_droite {position:absolute; top:5px; right:5px; width:130px; height:32px;}
.bt_agrandir, .bt_reduire, .bt_configurer {float:right; margin-left:10px;}
.bt_aff_ligne, .bt_aff_diapo, .bt_home {float:left; margin-right:10px;}
.bt_aff_ligne.on, .bt_aff_diapo.on {border-bottom:solid red 5px;}
.pave {padding: 0.5em; border-radius: 0.25rem;}
.coul1 {background-color: #F7EEC6;}
.coul2 {background-color: #E6E6FF;}
.coul3 {background-color: #C6C6F7;}

.btn {display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5;}
.btn:hover {color: #212529; text-decoration: none;}
.btn:focus, .btn.focus {outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.btn-primary {color: #fff; background-color: #007bff; border-color: #007bff;}
.btn-primary:hover {color: #fff; background-color: #0069d9; border-color: #0062cc;}
.btn-primary:focus, .btn-primary.focus {color: #fff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);}
.btn-success {color: #fff; background-color: #28a745; border-color: #28a745;}
.btn-success:hover {color: #fff; background-color: #218838; border-color: #1e7e34;}
.btn-success:focus, .btn-success.focus {color: #fff; background-color: #218838; border-color: #1e7e34; box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);}

#zone_diapo {display: flex; justify-content: center; align-items: center; height: calc(100vh - 68px); position:relative;}
#pave_diapo {margin:auto; position:relative;}
.bt_nav {position:absolute; cursor:pointer; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;}
.bt_nav:hover {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);}
#zone_config {display: flex;}
#zone_config > div {padding: 0.5em;}
#zone_config > div > div {background-color: #FFF; border-radius: 10px; padding:0.5em;}
#zone_config ol {margin-bottom:30px;}
#zone_config ol li, #infos ul li {margin-bottom:7px;}
#zone_config ul {padding-left:30px;}
#zone_config h3 {color:#7D7346; font-weight: 600; text-align: center; font-size: 20px; padding:0; margin:0 0 1em 0;}
#zone_config input[type=text] {background-color: #E6E6FF; padding:0.5em; border-radius: 4px;}
#ctn_champs_form > div {margin-bottom:1em;}
label.label {font-weight:600; color:blue;}
@media (min-width: 768px) {
    #zone_config > div {width: 50%; float:left;}
}

.cacher {display:none;}
.montrer {display:block;}
.ladiapo {position:absolute; left:0; top:0; width: 100%; height: 100%; border:none;}
.fondu-on {-webkit-animation : fondu-on 1s; animation : fondu-on 1s;}
@-webkit-keyframes fondu-on {
    0% {opacity:0.2; width:0%; height:0%;}
    100% {opacity:1; width:100%; height:100%;}
}
@keyframes fondu-on {
    0% {opacity:0.2; width:0%; height:0%;}
    100% {opacity:1; width:100%; height:100%;}
}