/* effets divers */

.list-checked {list-style: none; padding: 0; margin: 0;}
.list-checked li {position: relative; padding-left: 2.2em; margin:0.4em 0;}
.list-checked li::before {content: "\f26e"; font-family: "bootstrap-icons"; font-size: 2em; position: absolute; left: 0; top: -0.35em;}

.texte-decalage {position:relative; cursor: pointer; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);  }
.texte-decalage:hover {transform: translateX(20px);}

.outil_vignette {-webkit-transition: all 0.5s; transition: all 0.5s; opacity:0.9; cursor: pointer; border:1px solid gray;}
.outil_vignette:hover {opacity:1; transform: scale(1.15); opacity:1;}

.effet_bt_zoom {-webkit-transition: all 0.5s; transition: all 0.5s; opacity:0.9; cursor: pointer;}
.effet_bt_zoom:hover {opacity:1; transform: scale(1.2); opacity:1;}

.bouton_glow {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow; transition-property: box-shadow; cursor: pointer;}
.bouton_glow:hover, .hvr-glow:focus, .hvr-glow:active {box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);}

@-webkit-keyframes bouton_wobble {
  16.65% {-webkit-transform: translate(8px, -8px); transform: translate(8px, -8px);}
  33.3% {-webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px);}
  49.95% {-webkit-transform: translate(4px, -4px); transform: translate(4px, -4px);}
  66.6% {-webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px);}
  83.25% {-webkit-transform: translate(1px, -1px); transform: translate(1px, -1px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes bouton_wobble {
  16.65% {-webkit-transform: translate(8px, -8px); transform: translate(8px, -8px);}
  33.3% {-webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px);}
  49.95% {-webkit-transform: translate(4px, -4px); transform: translate(4px, -4px);}
  66.6% {-webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px);}
  83.25% {-webkit-transform: translate(1px, -1px); transform: translate(1px, -1px);}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
.bouton_wobble {display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.bouton_wobble:hover, .bouton_wobble:focus, .bouton_wobble:active {-webkit-animation-name: bouton_wobble; animation-name: bouton_wobble; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1;}

.stabilo {background-repeat: no-repeat; background-size: 100% 70%; background-position: 0 60%; padding: 1em 1.5em 0.5em 1.5em;}
.stabilo::before {content: "\F4FE"; font-family: "bootstrap-icons"; position: absolute; left: 20px; top: 2px;}
.texte-decalage.on .stabilo::before {content: "\F2EA"; font-family: "bootstrap-icons"; position: absolute; left: 20px; top: 2px;}
.stabilo-c1 {background-image: url('img/stabilo-c1.png'); color: #FFF;}
.stabilo-c2 {background-image: url('img/stabilo-c2.png'); color: #FFF;}
.stabilo-c3 {background-image: url('img/stabilo-c3.png'); color: #FFF;}
.stabilo-c4 {background-image: url('img/stabilo-c4.png'); color: #FFF;}
.stabilo-c5 {background-image: url('img/stabilo-c5.png'); color: #FFF;}
.stabilo-c6 {background-image: url('img/stabilo-c6.png'); color: #FFF;}
.stabilo-c7 {background-image: url('img/stabilo-c7.png'); color: #FFF;}

.images_espacees img {margin:0.5em;}

/* page_accueil_pragmappli */
#page_accueil_pragmappli {background: repeating-linear-gradient(90deg, #fae8d2 0%, #deb98e 100%); display: flex; flex-direction: column; min-height: 100vh;}
#page_accueil_pragmappli main {flex: 1;}
#page_accueil_pragmappli .accroche {color:#FFF; text-shadow: 4px 4px 6px rgba(0,0,0,1); font-size: clamp(1rem, 4vw, 2.2rem)}
#page_accueil_pragmappli h2 {font-size: clamp(0.8rem, 3.5vw, 1.5rem); margin-top:1em; white-space: nowrap;}
#page_accueil_pragmappli .pave_principal {max-width:600px; margin:auto;}
#page_accueil_pragmappli .pave_sous_h2 {background-color: #FCF1E4; border: 1px solid #F4CC9C; border-radius: 0 0 0.5em 0.5em; padding:0.5em 1em;}

/*
.pave_principal {max-width:500px; margin:auto; background:#FFF; border:1px solid #0E73BF; border-radius : 10px 10px 0 0; background-color:#FFF; -webkit-box-shadow: 2px 7px 7px 0px rgba(165,165,165,0.67); box-shadow: 2px 7px 7px 0px rgba(165,165,165,0.67);}
.pave_principal .pave_titre {display:flex; font-size:1.2em; height:36px; padding-bottom:3px; justify-content:center; align-items:center; background-color:#0E73BF; color:#FFF; font-weight:bold; border-radius : 10px 10px 0 0; color:#FFF;}
.pave_principal .pave_corps {padding:0.5em;}
*/

/* page_outils (en fait apps) */
#page_outils {background-color:#F8DFC0;}
#page_outils .info_intro {-webkit-box-shadow: 0px 5px 11px 0px #B4B4B4; box-shadow: 0px 5px 11px 0px #B4B4B4; background-color: #FDF6ED;  padding:1em; margin:1.5em 1em;}
#page_outils .cartes {margin-top:1em; margin-bottom:1em; display:flex; justify-content:center; gap:1em; flex-wrap:wrap;}
#nabvar_accueil_apps {-webkit-box-shadow: 0px 5px 11px 0px #B4B4B4; box-shadow: 0px 5px 11px 0px #B4B4B4; background-color:#FCF1E4;}
#nabvar_accueil_apps .logo_navbar {width:64px;}
#nabvar_accueil_apps h2 {font-size:1.8em; font-weight:bold; color: #0B3363;}
.outil_carte {width:260px; height:340px; background:#FFF; border-radius : 10px 10px 0 0; background-color:#FFF; -webkit-box-shadow: 2px 7px 7px 0px rgba(165,165,165,0.67); box-shadow: 2px 7px 7px 0px rgba(165,165,165,0.67);}
.outil_titre {display:flex; font-size:1.2em; height:36px; padding-bottom:3px; justify-content:center; align-items:center; color:#FFF; font-weight:bold; border-radius : 10px 10px 0 0;}
.outil_carte.tag_web {border:1px solid #0E73BF;}
.outil_carte.tag_pc {border:1px solid #586F76;}
.outil_carte.tag_web .outil_titre { background-color:#0E73BF;}
.outil_carte.tag_pc .outil_titre { background-color:#586F76;}
.outil_corps {padding:0.5em; text-align:center;}
.outil_vignette {height:128px; width: auto; max-width:100%;}
.outil_desc {height:110px; text-align:left; overflow: hidden; font-size:0.9em; margin-top:10px;}
.outil_badge {display:flex; justify-content:space-around; margin-top:5px;}

/* modales apps */
.modal-apps .modal-body h3 {background-color: #528FAE; color:#FFF; font-size:1.6em; padding: 0 0.5em 0.2em 0.5em; border-radius: 0.2em;}
.doigt_h4 h4 {color:#0E73BF; font-weight:bold; font-size:1.3em; margin:15px 0 10px 0;}
.doigt_h4 h4:before {content:url(img/icone_doigt_16.png)}
.modal-apps .modal-body h5 {margin:15px 0 8px 0; font-size: 1.1em; font-weight: bold; color: #586F76;}
.modal-apps .modal-header {background-color: #60A6D0;}
.modal-apps .modal-header h1 {color:#FFF;}
.modal-apps .modal-content {background-color: #F8DFC0;}
.modal-apps .intro {background-color: #D3E9ED; padding:0.8em; border: 1px solid #8DA2A4; border-radius: 0.5em; margin-bottom:1em;}
.modal-apps .ce_app {-webkit-box-shadow: 0px 5px 11px 0px #B4B4B4; box-shadow: 0px 5px 11px 0px #B4B4B4;}


/* Gestion du bouton de retour en haut de page */
#returnOnTop {background: url('img/return_on_top.png') no-repeat; bottom: 1%; cursor: pointer; display: none; filter: alpha(opacity = 50); height: 48px; opacity: 0.5; position: fixed; right: 1%; width: 48px;}
#returnOnTop:hover { filter: alpha(opacity = 100); opacity: 1;}

/* Gestion de l'impression  */
.impression_slt {display:none;} 
@media print {
  .no_imprim {display:none;}
  .container {max-width: 100%;}
  #returnOnTop {display:none!important;}
  .modal-apps .modal-body > div {-webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow:none!important; border:none!important;}
}

@media only screen and (max-width: 576px) {
  /*.nav-tabs {display: block;}*/
  .modal {position: fixed; top:0;}
  .modal .modal-fullscreen {position: fixed; top:0;}
  .responsive-mobile-only {max-width: 100%; height: auto;}
}