.zone_ppn.ppn_mode_edition {min-height: 1500px;}
.ppn_journee {display: flex; width: fit-content; flex-direction: column; outline: 1px solid grey; max-width: 220px; background-color: #FFF;}
.ppn_horaire {padding: 0 5px 5px 5px; line-height: 1; display: flex;}
.ppn_mode_lecture .ppn_cacher_horaires .ppn_horaire {display:none;}
.ppn_mode_edition .ppn_cacher_horaires .ppn_horaire {opacity:0.5}
.ppn_mode_edition .ppn_journee {max-width: 280px;}
.ppn_entete {text-align: center;}
.ppn_gestion_plannings {max-width: 500px; margin: auto; border: 1px solid grey; border-radius: 5px; padding: 5px;}
.ppn_tablo_plannings .bi {font-size: 1.2em; color:blue; cursor: pointer;}
.ppn_tablo_plannings .bi:hover {opacity:0.5;}
.ppn_tablo_plannings td {vertical-align: middle;}
.ppn_tablo_plannings td:nth-child(1) {cursor: pointer;}
.ppn_tablo_plannings td:nth-child(1):hover {color: blue;}
.ppn_tablo_plannings td:nth-child(2), .ppn_tablo_plannings td:nth-child(3), .ppn_tablo_plannings td:nth-child(4) {width: 24px;}
.ppn_nom_et_heure {display: flex; flex-direction: column; /* 2 lignes */ gap: 5px; width: 300px;}
.ppn_validation_planning {display: flex; align-items: stretch; /* même hauteur pour les colonnes */ gap: 10px; margin: auto; width: fit-content; border: 1px solid grey; border-radius: 5px; padding: 5px;}
.ppn_valider_planning {height: 100%; /* prend toute la hauteur   border: 1px blue; border-radius: 5px; padding: 5px;*/}
#ppn_saisie_nom_planning {font-weight: bold;}
#ppn_lesjournees {display: flex; gap:10px; align-items: flex-start; justify-content:center; flex-wrap: nowrap;}
.ppn_pave_nom_journee {text-align: center;}
.ppn_nom_journee {font-weight: bold; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.ppn_nom_journee[contenteditable] {color:blue; background-color: #FFF; cursor: pointer;}
#ppn_titre_planning_impression .ppn_ladate {font-size: 0.8em; font-style: italic;}
.ppn_mode_lecture .ppn_creneau_cache {display:none!important;}
.ppn_journee_cache {display:none!important;}
.ppn_gestion_plannings mark {border-radius: .2rem; padding: 0 .1rem; background: yellow;}
.ppn_pave_premiere_ouverture {cursor: pointer;}
.ppn_plages {display: flex; flex-direction: column; padding: 5px;}
.ppn_creneau {display:flex; gap:5px;}
.ppn_activite {position: relative; padding: 0 5px 5px 5px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; text-align: center; min-width: 80px;}
.ppn_activite {border-left: 1px solid grey; border-right: 1px solid grey; border-bottom: 1px solid grey;}
.ppn_activite.ppn_bordure_masquee, .ppn_activite.ppn_pm_vide {border-left: 0px solid; border-right: 0px solid; border-bottom: 0px solid;}
.ppn_premier_creneau .ppn_activite, .ppn_premier_creneau_am .ppn_activite {border-top: 1px solid grey;}
.ppn_mode_edition .ppn_activite:hover {opacity:0.6;}
.ppn_bt_ajouter_creneau, .ppn_bt_supprimer_creneau, .ppn_icone {cursor: pointer; margin-bottom:3px;}
.ppn_resize_handle {position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; border: 1px solid #000; background: #0d6efd; cursor: se-resize; cursor: se-resize; touch-action: none;/* IMPORTANT pour le tactile */}
.ppn_etiquettes_activite {display: flex; flex-wrap: wrap;}
.ppn_etiquettes_activite > div {position: relative; border-radius: 5px; border: 1px solid grey;  margin:5px; padding:2px 5px; min-width: 60px; -webkit-transition: all 0.5s; transition: all 0.5s; opacity:0.8; cursor: pointer; text-align: center;}
.ppn_etiquettes_activite > div:hover {opacity:1; transform: scale(1.05);}
.ppn_etiquettes_activite > div > img {position:absolute; top:-8px; right:-8px; -webkit-transition: all 0.5s; transition: all 0.5s; cursor: pointer;}
.ppn_etiquettes_activite > div > img:hover {transform: scale(1.2);}
.ppn_pastilles_couleur {display: flex; flex-wrap: wrap;}
.ppn_pastilles_nom_journee {display: flex; flex-wrap: wrap; justify-content: center; gap:4px; margin: 2px 4px 4px 4px;}
.ppn_pastilles_nom_journee > div {width: 16px; height: 16px; border: 1px solid #000; border-radius: 50%;}
.ppn_pastilles_nom_journee > div.on {border: 1px solid #FFF;}
.gras {font-weight: bold;}

/* taille */
.bt_ppn_taille {font-size:130%; color:red; -webkit-transition: all 0.5s; transition: all 0.5s; opacity:0.5; cursor: pointer;}
.bt_ppn_taille:hover {opacity:1;}
.ppn_mode_lecture .t50 {transform-origin: top center; scale:0.5}
.ppn_mode_lecture .t60 {transform-origin: top center; scale:0.6}
.ppn_mode_lecture .t70 {transform-origin: top center; scale:0.7}
.ppn_mode_lecture .t80 {transform-origin: top center; scale:0.8}
.ppn_mode_lecture .t90 {transform-origin: top center; scale:0.9}
.ppn_mode_lecture .t100 {transform-origin: top center; scale:1}
.ppn_mode_lecture .t110 {transform-origin: top center; scale:1.1}
.ppn_mode_lecture .t120 {transform-origin: top center; scale:1.2}
.ppn_mode_lecture .t130 {transform-origin: top center; scale:1.3}
.ppn_mode_lecture .t140 {transform-origin: top center; scale:1.4}
.ppn_mode_lecture .t150 {transform-origin: top center; scale:1.5}
.ppn_mode_lecture .t160 {transform-origin: top center; scale:1.6}
.ppn_mode_lecture .t170 {transform-origin: top center; scale:1.7}
.ppn_mode_lecture .t180 {transform-origin: top center; scale:1.8}
.ppn_mode_lecture .t190 {transform-origin: top center; scale:1.9}
.ppn_mode_lecture .t200 {transform-origin: top center; scale:2}

/* doc */
#ppn_documentation h3 {background:#B3D4F3; cursor:pointer; margin:10px 0 10px 0; padding:0 0 5px 30px}
#ppn_documentation h3:hover {background:#88BCEC;}
#ppn_documentation h4 {color:#6C48B4; font-weight:bold; font-size:18px; margin:15px 0 10px 0;}
#ppn_documentation h4:before {content:url(img/icone_doigt_16.png)}
#ppn_documentation p {padding:0; margin:0 0 5px 0;}
.plier_deplier_suivant {position:relative; cursor: pointer;}
.plier_deplier_suivant::before {content: "\F4FE"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 2px;}
.plier_deplier_suivant.on::before {content: "\F2EA";}
.ce_app {-webkit-box-shadow: 0px 5px 11px 0px #B4B4B4; box-shadow: 0px 5px 11px 0px #B4B4B4;}

/* Couleurs */
.c_red {background-color: red; color:#FFF;}
.c_deepPink {background-color: deepPink; color:#FFF;}
.c_orange {background-color: orange; color:#000;}
.c_yellow {background-color: yellow; color:#000;}
.c_purple {background-color: purple; color:#FFF;}
.c_green {background-color: green; color:#FFF;}
.c_blue {background-color: blue; color:#FFF;}
.c_brown {background-color: brown; color:#FFF;}
.c_white {background-color: white; color:#000;}
.c_gray {background-color: gray; color:#FFF;}
.c_black {background-color: black; color:#FFF;}
.c_transparent {background-color: transparent; color:#000;}
.c_rosepastel {background-color: #FFD1DC; color:#000;}
.c_bleupastel {background-color: #AEC6FF; color:#000;}
.c_vertpastel {background-color: #BFE3C0; color:#000;}
.c_jaunepastel {background-color: #FFF1A8; color:#000;}
.c_mauvepastel {background-color: #DCC6F8; color:#000;}
.c_orangepastel {background-color: #FFBCB3; color:#000;}
.c_pechepastel {background-color: #FFD7BA; color:#000;}
/*.c_point {background: url("img/img_point.png") repeat scroll 0 0;}*/
.c_point {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGUlEQVR42mP4//8/AzpmwCvIAGYSoxIZAwANL0i4XSwsowAAAABJRU5ErkJggg==) repeat scroll 0 0;}

.coul_etiq {width: 24px; height: 24px; border: 1px solid grey; border-radius: 50%; display: inline-block;}

.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);}

/* 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!important;}
  #returnOnTop {display:none!important;}
  .container {max-width: 100%;}
  .impression_slt {display:block;}
  body {background-color: #FFF!important;}
}