@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.roboto-<uniquifier> {
   font-family:"Roboto", sans-serif;
   font-optical-sizing:auto;
   ont-weight:<weight>;
   ont-style:normal;
   font-variation-settings:
      "wdth" 100;
}

.montserrat-<uniquifier> {
   font-family:"Montserrat", sans-serif;
   font-optical-sizing:auto;
   font-weight:<weight>;
   font-style:normal;
}


/*
@font-face {
   font-family: "Roboto";
   src:  url("polices/Roboto/Roboto-Variable.woff") format("woff"),
         url("polices/Roboto/Roboto-Variable.ttf") format("truetype");
   font-weight: 100 900;
   font-stretch: 75% 125%;
   font-style: normal;
   font-display: swap;
}
*/

/*
@font-face {
   font-family: "Roboto";
   src:  url("polices/Roboto/Roboto-Italic.woff") format("woff"),
         url("polices/Roboto/Roboto-Italic.ttf") format("truetype");
   font-weight: 100 900;
   font-style: italic;
   font-display: swap;
}
*/

html, body {
   font-family:'Roboto', sans-serif;
   font-size:16px;
   line-height:22px;
   padding:0;
   margin:0;
   background-color:#f7f7f7;;
}

body.overflow {
	overflow:hidden;
}

img {
   display:block;
   max-width:100%;
   height:auto;
}

#principal {
   display:table;
   position:relative;
   width:100%;
   max-width:90%;
   height:auto;
   padding:30px;
   margin:60px auto 60px;
   background-color:#fff;
   border:1px solid #E3E3E3;
   clear:both;
}

label {
   display:block;
   width:100%;
   font-size:18px;
   font-weight:700;
   margin-top:20px;
   margin-bottom:5px;
}

input[type="text"] {
   display:block;
   font-family:'Roboto', sans-serif;
   font-size:16px;
   line-height:23px;
   padding:0 5px;
   box-sizing:border-box;
   border:1px solid #898989
}

input[type="radio"] {
   float:left;
   width:unset;
   margin-right:10px;
}

input[type="file"] {
   display:none;
}

textarea {
   font-family:'Roboto', sans-serif;
   width:100%;
   font-size:16px;
   line-height:23px;
   padding:0 5px;
   box-sizing:border-box;
   border:1px solid #898989;
   resize:vertical;
}

button,
input[type="submit"] {
   display:block;
   width:100%;
   max-width:165px;
   font-size:18px;
   font-weight:500;
   line-height:20px;
   color:#fff;
   padding:4px 35px;
   box-sizing:border-box;
   border:0;
   border-radius:6px;
   background-color:#7340a2;
   cursor:pointer;
   transition:0.06s;
   word-break:normal;
}

button:disabled {
	background-color:#E3E3E3;
}

button:disabled:hover {
	background-color:#E3E3E3;
}

button.joindre-documents {
   max-width:100%;
   width:100%;
   height:auto;
   text-align:center;
   font-weight:700;
   line-height:25px;
   color:#422c58;
   margin-bottom:20px;
   padding:4px 8px;
   border:2px solid #422c58;
   border-radius:8px;
   background-color:#fff;
   cursor:pointer;
}

button.joindre-documents:hover,
button.joindre-documents:focus {
   max-width:100%;
   width:100%;
   height:auto;
   text-align:center;
   line-height:25px;
   color:#422c58;
   margin-bottom:20px;
   padding:4px 8px;
   border:2px solid #422c58;
   border-radius:8px;
   background-color:#fff;
   cursor:pointer;
}

button[name="supprimer"] {
   max-width:120px;
   font-size:14px;
   padding:6px 10px;
   background-color:#7D787D;
}

button[name="supprimer"]:hover,
button[name="supprimer"]:focus {
   background-color:#5E5B5E;
}

button[name="supprimer"]:disabled,
button[name="supprimer"]:disabled {
   background-color:#E3E3E3;
}

button[name="supprimer"]:disabled:hover,
button[name="supprimer"]:disabled:focus {
   background-color:#E3E3E3;
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
   background-color:#4d2a6d;
   transition:0.06s;
}

[aria-description],
[aria-role],
[aria-heure] {
   position:relative;
}

[aria-description]:hover::after,
[aria-role]:hover::after,
[aria-heure]:hover::after {
   position:absolute;
   font-size:16px;
   font-weight:400;
   top:100%;
   left:0;
   background:#333;
   color:#fff;
   padding:5px 10px;
   border-radius:4px;
   white-space:nowrap;
   z-index:10;
}

[aria-description]:hover::after {
   content:attr(aria-description);
}

[aria-role]:hover::after {
   content:attr(aria-role);
}

[aria-heure]:hover::after {
   content:attr(aria-heure);
}

.bouton-p {
   height:27px;
}

.bouton-g {
   max-width:200px;
   width:100%;
   line-height:27px;
   padding:5px 30px 7px;
}

.bouton-pf {
    width:unset;
    max-width:unset;
    height:27px;
    background-color:#595459;
    white-space: nowrap;
}

.bouton-pf.focus {
   background-color:#000;
}

.bouton-pf:hover,
.bouton-pf:focus {
   background-color:#000;
}

input.modification {
   position:relative;
   top:0;
   left:-6px;
   width:100%;
   max-width:84%!important;
   padding:0 0 0 6px;
   line-height:26px;
   border:0!important;
   background-color:rgba(0, 0, 0, 0);
}

input.modification-categorie {
   position:relative;
   top:0;
   left:-6px;
   width:100%;
   max-width:75%!important;
   padding:0 0 0 6px;
   line-height:26px;
   border:0!important;
   background-color:rgba(0, 0, 0, 0);
}

.select-wrapper {
   position:relative;
}

.select-wrapper select {
   appearance:none;
   -webkit-appearance:none;
   -moz-appearance:none;
   width:100%;
   font-family:'Roboto', sans-serif;
   font-size:18px;
   line-height:26px;
   border:1px solid #898989;
   box-sizing:border-box;
   background-color:#fff;
}

.select-wrapper::after {
   content:"▾";
   position:absolute;
   right:12px;
   top:50%;
   transform:translateY(-50%);
   font-size:14px;
   pointer-events:none;
   color:#555;
}

ul {
   padding:0;
   margin:0;
}

ul li {
   list-style:none;
}

h2 {
   font-size:36px;
   color:#545454;
}

h3 {
   font-size:24px;
   font-weight:700;
   color:#422c58;
   margin-top:20px;
   margin-bottom:5px;
}

h4 {
   font-size:20px;
   font-weight:700;
   margin-bottom:8px;
}

.display {
   display:block;
}

.titre {
   width:100%;
   font-size:24px;
   font-weight:500;
   color:#422c58;
}

.titre-p {
   width:100%;
   font-size:20px;
   font-weight:500;
   color:#422c58;
}

.titre-margin {
   width:100%;
   margin-bottom:6px;
   font-size:18px;
   font-weight:500;
   color:#422c58;
}

.supprimer {
   display:block;
   position:relative;
   top:-1px;
   font-size:16px;
   font-weight:700;
   color:#9E0202;
   text-align:right;
   float:right;
   padding:0 6px;
   box-sizing:border-box;
   cursor:pointer;
}

.erreur {
   font-size:15px;
   color:#3ca0cb;
}

.erreur-submit {
   font-size:15px;
   text-align:center;
   margin-bottom:20px;
   color:#3ca0cb;
}

.erreur-label {
   position:absolute;
   display:block;
   font-size:17px;
   font-weight:500;
   color:#3ca0cb;
   top:34px;
   right:34px;
   width:unset;
}

.erreur-input-file {
   text-align:center;
}

.erreurs {
   display:block;
   width:100%;
   font-size:15px;
   font-style:italic;
   text-align:center;
   color:#3ca0cb;
   margin-top:20px;
}

.lien a {
   display:none;
   width:100%;
   font-size:15px;
   font-style:italic;
   color:#3ca0cb;
   margin-top:5px;
}

figure {
   position:relative;
   width:130px;
   height:auto;
   margin:0 0 20px;
   padding:10px 30px;
}

figure:hover,
figure.hover {
   background-color:#F7F7F7;
}

figure.focus {
   background-color:#E8E8E8;
}

figure::before {
   display:none;
   content:"";
   position:absolute;
   top:0; 
   left:0;
   width:100%; 
   height:100%;
   background-color:rgba(255,255,255,0.6);
   z-index:1;
}

figure.display::before {
   display:block;
}

figure div.image {
   max-width:130px;
   width:100%;
   height:130px;
   background-size:cover;
   background-position:center;
   background-repeat:no-repeat;
}

figcaption {
   font-weight:700;
   text-align:center;
   word-break:break-word;
   user-select:none;
}

.container {
   max-width:1800px;
   width:100%;
   padding:0 40px;
   margin:0 auto;
   box-sizing:border-box;
}

.row {
   display:flex;
   width:100%;
   flex-wrap:nowrap;
   box-sizing:border-box;
}

.row.wrap {
   flex-wrap:wrap;
}

.row-position {
   position:relative;
   display:flex;
   width:100%;
   flex-wrap:nowrap;
   box-sizing:border-box;
}

.col {
   width:100%;
   float:left;
}

.col-2 {
   max-width:50%;
   width:100%;
   float:left;
}

.col-2-gauche {
   max-width:50%;
   width:100%;
   padding-right:20px;
   box-sizing:border-box;
   float:left;
}

.col-2-droite {
   max-width:50%;
   width:100%;
   padding-left:20px;
   box-sizing:border-box;
   float:left;
}

.col-3 {
   max-width:33.333%;
   width:100%;
   float:left;
}

.col-3-gauche {
   max-width:33.333%;
   width:100%;
   padding-right:40px;
   box-sizing:border-box;
   float:left;
}

.col-3-droite {
   max-width:33.333%;
   width:100%;
   padding-left:40px;
   box-sizing:border-box;
   float:left;
}

.col-4 {
   max-width:25%;
   width:100%;
   float:left;
}

.col-4-gauche {
   max-width:25%;
   width:100%;
   padding-right:40px;
   box-sizing:border-box;
   float:left;
}

.col-4-droite {
   max-width:25%;
   width:100%;
   padding-left:40px;
   box-sizing:border-box;
   float:left;
}

.col-5 {
   max-width:20%;
   width:100%;
	padding:0 10px;
	box-sizing:border-box;
	float:left;
}

.col-5-gauche {
   max-width:20%;
   width:100%;
   padding-right:10px;
   box-sizing:border-box;
   float:left;
}

.col-5-droite {
   max-width:20%;
   width:100%;
   padding-left:10px;
   box-sizing:border-box;
   float:left;
}

.tableau .titre-colonne:last-child {
   border-right:0;
}

.tableau .titre-colonne {
   width:100%;
   line-height:32px;
   font-weight:700;
   text-align:center;
   color:#fff;
   border-right:1px solid #a7a7a7;
   box-sizing:border-box;
   background-color:#2c2c2c;
}

.tab {
   position:relative;
   line-height:26px;
   border-right:1px solid #a7a7a7;
   border-bottom:1px solid #a7a7a7;
   border-left:1px solid #a7a7a7;
   overflow:hidden;
	background-color:#f8f0ff;
   cursor:pointer;
}

.tab:hover,
.tab.focus {
   background-color:#e3d3f1;
}

.tab.click::before {
   position:absolute!important;
   background:rgba(0, 0, 0, 0.22)!important;
}

.ligne-separation-horizontale {
   width:100%;
   height:1px;
   margin:20px 0 34px;
   background:linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      #9E9E9E 12%,
      #9E9E9E 88%,
      rgba(0, 0, 0, 0)
   );
}

.crayon {
   display:block;
   position:relative;
   width:26px;
   height:26px;
   top:2px;
   right:20px;
   float:right;
   cursor:pointer;
}

.oeil {
   display:block;
   position:relative;
   width:26px;
   height:18px;
   top:4px;
   right:34px;
   float:right;
   cursor:pointer;
}

.oeil:focus {
	background-color:none;
}

.oeil img {
	margin-top:3px;
}

.oeil-ferme {
	top:3px;
}

.oeil-ferme img {
	margin-top:8px;
}

.crayon:focus {
   background-color:none;
}

#popup-supprimer,
#popup-joindre-documents {
   display:none;
   position:fixed;
   width:100%;
   max-width:320px;
   height:auto;
   text-align:center;
   top:33%;
   left:50%;
   transform:translate(-50%, -50%);
   padding:40px;
   box-sizing:border-box;
   border-radius:18px;
   box-shadow:2px 2px 20px #A8A8A8;
   background-color:#fff;
	word-break:break-all;
   z-index:15;
}

#popup-joindre-documents {
   max-width:480px;
}

#popup-supprimer.display,
#popup-joindre-documents.display {
   display:block;
}

#popup-supprimer .question {
   font-weight:400;
   margin-bottom:30px;
}

#popup-supprimer #article {
   font-weight:700;
   margin-bottom:15px;
}

#popup-supprimer .associations {
   font-weight:400;
	margin-top:30px;
	margin-bottom:30px;
}

#popup-supprimer .associations div {
   font-weight:700;
}

#popup-supprimer .associations div:first-of-type {
   margin-top:10px;
}

#popup-joindre-documents h3 {
   line-height:30px;
   color:#000;
   margin-top:0;
   margin-bottom:40px;
}

#popup-supprimer .question span,
#popup-joindre-documents .question span {
   font-weight:700;
}

#popup-supprimer .article,
#popup-supprimer .article {
   font-weight:700;
}

#popup-joindre-documents label,
#popup-joindre-documents button {
   display:block;
   width:100%;
   max-width:200px;
   margin:0;
   font-size:18px;
   font-weight:500;
   color:#fff;
   padding:8px 15px;
   box-sizing:border-box;
   border:0;
   border-radius:6px;
   background-color:#7340a2;
   cursor:pointer;
   transition:0.06s;
}

#popup-supprimer .note {
	margin-top:30px;
}

#popup-supprimer .note .span-note {
	font-weight:400;
}

#popup-supprimer button[name="oui"],
#popup-joindre-documents button {
   font-weight:500;
   padding:8px 15px;
   background-color:#8A0B0B;
}

#popup-supprimer button[name="oui"]:hover,
#popup-supprimer button[name="oui"]:focus,
#popup-joindre-documents button:hover,
#popup-joindre-documents button:focus {
   background-color:#660000;
}

#popup-joindre-documents label:hover,
#popup-joindre-documents label:focus {
   background-color:#4d2a6d;
   transition:0.06s;
}

#popup-supprimer button[name="non"] {
   font-weight:700;
   padding:8px 15px;
}

#popup-bibliotheque {
   display:none;
   position:fixed;
   width:100%;
   max-width:90%;
   margin-bottom:40px;
   padding:40px;
   box-sizing:border-box;
   top:50px;
   left:50%;
   transform:translateX(-50%);
   border-radius:18px;
   box-shadow:0 0 8px #919191;
   background-color:#fff;
   z-index:20;
}

#popup-bibliotheque.display {
   display:block;
}

#bibliotheque {
	user-select:none;
}

#popup-bibliotheque .colonnes,
#bibliotheque .colonnes {
   position:relative;
   width:100%;
}

#popup-bibliotheque .colonne-repertoires,
#bibliotheque .colonne-repertoires{
   max-width:240px;
   min-width:180px;
   width:100%;
   height:72vh;
   overflow-y:auto;
   overflow-x:hidden;
   cursor:pointer;
}

#popup-bibliotheque #documents,
#bibliotheque #documents{
   display:flex;
   width:100%;
   height:72vh;
	align-content:first baseline;
   overflow-y:auto;
   overflow-x:hidden;
   flex-wrap:wrap;
   padding-bottom:60px;
   padding-left:40px;
   box-sizing:border-box;
}

#popup-bibliotheque figure,
#bibliotheque figure {
   margin-top:0;
   max-height:196px;
}

#popup-bibliotheque figure .extension,
#bibliotheque figure .extension {
	font-size:15px;
   font-weight:400;
}

#popup-bibliotheque .titre,
#bibliotheque .titre {
   margin-bottom:20px;
}

#popup-bibliotheque .repertoire,
#bibliotheque .repertoire {
   display:flex;
   width:100%;
   flex-wrap:nowrap;
   padding:5px;
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;
}

#popup-bibliotheque .repertoire.selectionne,
#bibliotheque .repertoire.selectionne {
   background-color:#F2EDFF;
}

#popup-bibliotheque .repertoire:hover,
#bibliotheque .repertoire:hover {
   background-color:#F2F2F2;
}

#popup-bibliotheque .colonne-repertoires img,
#bibliotheque .colonne-repertoires img {
   margin-right:10px;
}

#popup-bibliotheque .checkbox,
#bibliotheque .checkbox {
   position:absolute;
   width:24px;
   height:24px;
   border:1px solid #444;
   top:114px;
   right:30px;
   background:#fff;
   cursor:pointer;
   transition:all 0.1s ease;
}

#popup-bibliotheque .checkbox.checked::after,
#bibliotheque .checkbox.checked::after {
   content:"";
   position:absolute;
   left:6px;
   top:1px;
   width:7px;
   height:14px;
   border:solid white;
   border-width:0 3px 3px 0;
   transform:rotate(45deg);
}

#popup-bibliotheque .checkbox.checked,
#bibliotheque .checkbox.checked {
   background:#7340a2;
}

#popup-bibliotheque .bouton-lier,
#bibliotheque .bouton-lier {
   position:absolute;
   width:100%;
   height:auto;
   bottom:0;
}

#popup-bibliotheque .bouton-lier button,
#bibliotheque .bouton-lier button {
   float:right;
   max-width:330px;
   padding:8px 15px;
}

#popup-supprimer .note {
	font-weight:700;
}

#bibliotheque #message {
	text-align:center;
	opacity:0;
	visibility:hidden;
	transition:0.2s;
}

#bibliotheque #message.visibility {
	opacity:1;
	visibility:visible;
}

#bibliotheque #message div:first-child {
	font-weight:700;
	line-height:26px;
	color:red;
	margin-bottom:8px;
}

#bibliotheque .colonne-options {
	max-width:15%;
	width:100%;
	padding-left:30px;
}

#bibliotheque .titre {
	font-size:20px;
	word-break:break-all;
}

#bibliotheque label {
	display:flex;
   justify-content:space-between;
   align-items:center;
	color:#E3E3E3;
}

#bibliotheque label img {
	opacity:0.28;
}

#bibliotheque label img.opacity {
	opacity:1;
	cursor:pointer;
}

#bibliotheque label.color {
	color:#000;
}

#bibliotheque input[name="titre"] {
	display:none;
	width:100%;
	border:0;
}

#bibliotheque input[name="titre"].display {
	display:block;
}

#bibliotheque button {
	width:100%;
	margin:8px auto;
}

#bibliotheque button:disabled {
	width:100%;
	margin:8px auto;
	cursor:default;
}

#bibliotheque button#coller {
	display:none;
}

#bibliotheque button#coller.display {
	display:block;
}

#bibliotheque figure.bccolor {
	background-color:#E8E1F7!important;
}

#bibliotheque #supprimer {
	position:absolute;
	margin:0;
	right:0;
	bottom:0;
}

#bibliotheque #supprimer:disabled {
	cursor:default;
}

.x {
   position:absolute;
   top:16px;
   right:30px;
   font-size:24px;
   font-weight:700;
   cursor:pointer;
}

#background-popup-supprimer,
#background-popup-joindre-documents,
#background-popup-bibliotheque {
   display:none;
   position:fixed;
   top:50%;
   left:0;
   transform:translateY(-50%);
   width:100%;
   height:100%;
   background-color:rgba(181,181,181,0.7);
   z-index:14;
}

#background-popup-bibliotheque {
   background-color:#bababa;
   z-index:19;
}

#background-popup-supprimer.display,
#background-popup-joindre-documents.display,
#background-popup-bibliotheque.display {
   display:block;
}

#fenetre,
#fenetre-options,
#fenetre-couleurs,
#fenetre-accessoire {
   display:none;
   position:absolute;
   opacity:0;
   width:0;
   max-width:1600px;
   height:0;
   top:60px;
   left:50%;
   transform:translateX(-50%);
   background-color:#fff;
   box-shadow:0 0 8px #cfcfcf;
   transition:0.2s;
   z-index:12;
}

#fenetre-accessoire {
   max-width:975px;
}

#fenetre-accessoire form {
   padding-bottom:40px;
}

#fenetre-accessoire #nom-accessoire {
    width:100%;
    font-size:24px;
    font-weight:500;
    margin-top:30px;
    margin-bottom:10px;
    color:#277596;
}

#fenetre-accessoire #fournisseur {
    margin-top:28px;
}

#fenetre-accessoire .col-3 {
    display:flex;
    justify-content:center;
}

#fenetre-accessoire .col-2-gauche,
#fenetre-accessoire .col-2-droite {
    margin-top:20px;
}

#fenetre-accessoire #accessoire-precedent {
    margin-right:10px;
}

#fenetre-accessoire #accessoire-precedent,
#fenetre-accessoire #accessoire-suivant {
    font-size:30px;
    font-weight:500;
    line-height:30px;
    color:#8F8F8F;
    width:unset;
    height:36px;
    padding:0 20px;
    margin-top:20px;
    background-color:#D4D4D4;
}

#fenetre-accessoire #accessoire-precedent:hover,
#fenetre-accessoire #accessoire-suivant:hover {
    color:#DEDEDE;
    background-color:#ABABAB;
}

#fenetre-accessoire .titre {
    font-size:20px;
    font-weight:500;
    margin-top:30px;
}

#fenetre-accessoire input[name="rechercher-accessoire"] {
    margin-top:16px;
}

#fenetre-accessoire .calendrier {
    display:block;
}

#fenetre-accessoire .jour:hover,
#fenetre-accessoire .jour:focus {
    color:#fff;
    background-color:#277596;
    transition:0.1s;
}

#fenetre-accessoire .disponibilite {
    display:flex;
    width:100%;
    margin-top:10px;
    justify-content:flex-end;
}

#fenetre-accessoire .disponibilite:first-of-type {
    margin-top:20px;
    max-width:170px;
    width:100%;
}

#fenetre-accessoire button[name="disponible"] {
    background-color:#277596;
    max-width:170px;
    width:100%;
}

#fenetre-accessoire button[name="indisponible"] {
    background-color:#B00000;
}

#fenetre-accessoire label {
    margin-top:13px;
    color:#422c58;
}

#fenetre-accessoire label#label-couts {
    text-align:right;
    margin-top:56px;
}

#fenetre-accessoire input {
    line-height: 29px;
    width:100%;
    border:1px solid #ccc;
}

#fenetre-accessoire input[name="couts"] {
    max-width:140px;
    float:right;
}

#fenetre-accessoire button[name="enregistrer"] {
   margin:30px auto 0;
}

#fenetre button[name="supprimer"] {
    display:none;
    position:absolute;
    top:23px;
    right:100px;
}

#fenetre button[name="supprimer"].display {
    display:block;
}

#fenetre-couleurs {
    top:40px;
    max-width:600px;
    box-shadow:0 0 30px #737373;
}

#fenetre .container
#fenetre-options .container,
#fenetre-couleurs .container {
   padding-bottom:40px;
}

#fenetre.display,
#fenetre-options.display,
#fenetre-couleurs.display,
#fenetre-accessoire.display {
   display:block;
}

#fenetre.ouvrir,
#fenetre-options.ouvrir,
#fenetre-couleurs.ouvrir,
#fenetre-accessoire.ouvrir {
   opacity:1;
   width:100%;
   height:auto;
   transition:0.2s;
}

#fenetre label {
   display:block;
   margin-top:10px;
   margin-bottom:2px;
   color:#422c58;
   user-select:none;
}

#fenetre input {
   line-height:26px;
   transition:0.06s;
}

#fenetre input[type="text"] {
   font-size:18px;
   width:100%;
}

#fenetre textarea {
   display:block;
   font-size:18px;
   line-height:30px;
   border:1px solid #898989;
   resize:none;
}

#fenetre input[name="nom"],
#fenetre input[name="agent_nom"]{
   max-width:49.5%;
   margin-left:1%;
   float:left;
}

#fenetre input[name="prenom"],
#fenetre input[name="agent_prenom"],
#fenetre input[name="rechercher"] {
   max-width:49.5%;
   float:left;
}

#fenetre #rechercher {
   display:none;
}

#fenetre textarea[name="adresse"] {
   height:94px;
   resize:none;
}

#fenetre .nom-complet {
   display:none;
}

#fenetre .nom-complet.display {
   display:block;
}

#fenetre #accessoires .rechercher,
#fenetre #roles .rechercher {
    margin-bottom:4px;
    width:280px;
}

#accessoires input[type="text"] {
   max-width:280px;
   width:100%;
   border:1px solid #BFBFBF;
}

#fenetre #accessoires .plus,
#fenetre #roles .plus {
    display:none;
    font-size:32px;
    font-weight:900;
    line-height:28px;
    color:#7340a2;
    margin-left:10px;
    cursor:pointer;
}

#fenetre #accessoires .plus.display,
#fenetre #roles .plus.display {
    display:block;
}

#fenetre .fenetre-contenant {
   display:block;
   position:relative;
   max-width:280px;
   width:100%;
   max-height:203px;
   height:auto;
   overflow-y:auto;
   border:1px solid #929292;
   box-sizing:border-box;
   float:left;
}

#fenetre .fenetre-contenant div {
   display:block;
   position:relative;
   padding:3px 12px;
   box-sizing:border-box;
   cursor:pointer;
   color:#474747;
   border-bottom:1px solid #a7a7a7;
   background-color:#f8f0ff;
}

#fenetre .fenetre-contenant div:last-of-type {
   border-bottom:0;
}

#fenetre .fenetre-contenant div:hover {
   color:#000;
   background-color:#a98cc2!important;
}

#fenetre .depot {
    width:100%;
    margin-left:15px;
}

#fenetre .tab-contenant:first-of-type {
   border-top:1px solid #cccccc;
}

#fenetre .tab-contenant {
   display:flex;
   position:relative;
   height:auto;
   border-right:1px solid #cccccc;
   border-bottom:1px solid #cccccc;
   border-left:1px solid #cccccc;
   clear:both;
}

#fenetre .tab-contenant:hover {
   background-color:#ffffe7;
}

#fenetre .depot-contenant {
   display:block;
   position:relative;
   max-width:88%;
   width:100%;
   padding:3px 12px;
   box-sizing:border-box;
   color:#474747;
   float:left;
}

#fenetre .lien-contenant {
   display:block;
   position:relative;
   max-width:12%;
   width:100%;
   padding:3px 12px;
   box-sizing:border-box;
   color:#474747;
   float:left;
}

#fenetre .liaison input {
   margin-top:7px;
}

#fenetre .x-boite {
   position:relative;
   max-width:5%;
   width:100%;
   padding:3px 12px;
   box-sizing:border-box;
   color:red;
   cursor:pointer;
}

#fenetre .liaison input {
    position:relative;
    right:20px;
}

#fenetre .scenes {
   max-height:244px;
   overflow-y:auto;
   padding:6px 10px;
   box-sizing:border-box;
   border:1px solid #929292;
   
}

#fenetre .scene {
   padding:4px;
   box-sizing:border-box;
   border-bottom:1px solid #cccccc;
}

#fenetre .scene:hover {
   background-color:#ffffe7;
}

#fenetre .scene:first-of-type {
   padding:0 4px 4px 4px;
   border-top:0;
}

#fenetre .scene:last-of-type {
   padding:4px 4px 0 4px;
   border-bottom:0;
}

#fenetre .scenes input {
   float:right;
}

#fenetre .joindre-documents {
   margin-top:30px;
}

#fenetre #afficher-fiche-secondaire h4 {
   display:none;
}

#fenetre #afficher-fiche-secondaire h4.display {
   display:block;
}

#fenetre #afficher-fiche-secondaire h3 {
   display:contents;
   cursor:pointer;
}

#fenetre #afficher-fiche-secondaire h3:hover,
#fenetre #afficher-fiche-secondaire h3:focus {
   color:rgba(66,44,88,0.7);
}

#fenetre #fiche-secondaire {
   display:none;
   overflow:hidden;
}

#fenetre #fiche-secondaire.overflow {
   overflow:unset;
}

#fenetre #fiche-secondaire.display {
   display:block;
}

#fenetre #fiche-secondaire .content {
   max-height:0;
   overflow:hidden;
   transition:max-height 0.35s ease;
}

#fenetre #fiche-secondaire .content.display {
   max-height:800px;
   transition:max-height 0.35s ease;
}

#fenetre #fiche-secondaire .content.overflow {
   overflow:unset;
}

#fenetre .noms-fichiers {
   word-break:break-all;
   margin-top:30px;
   color:#422c58;
}

#fenetre .noms-fichiers div {
   cursor:pointer;
}

#fenetre .boite-selections .marqueur {
   background-color:#a98cc2;
}

#fenetre input[type="submit"] {
   max-width:200px;
   line-height:27px;
   padding:5px 30px 7px;
   margin:40px auto;
}

#fenetre .erreur.prenom,
#fenetre .erreur.courriel {
   display:none;
   max-width:49.5%;
   width:100%;
}

#fenetre .erreur.nom {
   display:none;
   width:100%;
   margin-left:1%;
}

#fenetre .erreur.no {
   display:none;
   width:100%;
   margin-left:1%;
}

#fenetre .erreur.bas {
   margin-top:8px;
   text-align:center;
}

#fenetre .erreur.display {
   display:block;
}

#fenetre-couleurs .col-3-gauche {
    text-align:center;
    padding:0 10px 0 0;
}

#fenetre-couleurs .col-3 {
    text-align:center;
    padding:0 10px;
}

#fenetre-couleurs .col-3-droite {
    text-align:center;
    padding:0 0 0 10px;
}

#fenetre-couleurs .couleur {
    position:relative;
}

#fenetre-couleurs .couleur .color-popup {
    top:25px;
    left:70px;
}

#fenetre-couleurs .color-picker {
    margin:0!important;
}

#fenetre-couleurs .color-circle {
    margin:0 auto;
}

#fenetre-couleurs .prevalence {
    width:100%;
}

#fenetre-couleurs .prevalence label,
#fenetre-couleurs .prevalence span {
    float:left;
}

#fenetre-couleurs .prevalence input {
    margin-right:8px;
    margin-top:1px;
}

#fenetre-couleurs button[name="couleurs_defaut"] {
    max-width:255px;
    font-size:14px;
    margin-top:40px;
    padding:6px 10px;
    background-color:#7D787D;
}

#fenetre-couleurs button[name="couleurs_defaut"]:hover,
#fenetre-couleurs button[name="couleurs_defaut"]:focus {
   background-color:#5E5B5E;
}

#background-fenetre,
#background-fenetre-options,
#background-fenetre-couleurs,
#background-fenetre-accessoire {
   display:none;
   position:fixed;
   opacity:0;
   width:0;
   height:0;
   top:50%;
   left:50%;
   transform:translateY(-50%);
   transform:translateX(-50%);
   background-color:#ececec;
   transition:0.2s;
   z-index:11;
}

#background-fenetre-couleurs {
   background-color:rgba(0,0,0,0.2);
}

#background-fenetre.display,
#background-fenetre-options.display,
#background-fenetre-couleurs.display,
#background-fenetre-accessoire.display {
   display:block;
}

#background-fenetre.ouvrir,
#background-fenetre-options.ouvrir,
#background-fenetre-couleurs.ouvrir,
#background-fenetre-accessoire.ouvrir {
   opacity:1;
   top:0;
   width:100%;
   height:100vh;
   transition:0.2s;
}

#boite-photo {
   display:none;
   position:fixed;
   top:0;
   opacity:0;
   width:100%;
   height:100vh;
   background-color:rgba(0,0,0,0.83);
   z-index:9999;
   transition:0.2s;
}

#boite-photo.display {
	display:flex;
}

#boite-photo.opacity {
	opacity:1;
}

#boite-photo .conteneur {
	position:relative;
	height:100%;
    left:50%;
    transform:translate(-50%);
}

#boite-photo img {
    max-width:100%;
	max-height:100%;
	padding:80px;
	box-sizing:border-box;
}

#boite-photo .x {
	color:#fff;
	padding:12px;
	box-sizing:border-box;
}

.champ-date {
   position:relative;
   display:inline-block;
}

.calendrier {
    display:block;
    width:403px;
    padding:12px;
    background:#fff;
    border:1px solid #ccc;
    z-index:99999;
}

.calendrier.visible {
   display:block;
}

.calendrier-entete {
   display:grid;
   grid-template-columns:40px 1fr 40px;
   align-items:center;
   margin-bottom:12px;
}

.calendrier-entete button {
	font-size:18px;
    width:40px;
    height:26px;
	padding:0;
    border:none;
    background:#000;
    cursor:pointer;
}

.calendrier-entete button:hover {
   background:#4F4F4F;
}

#mois-annee {
   text-align:center;
   font-weight:bold;
}

.jours-semaine,
.jours {
   display:grid;
   grid-template-columns:repeat(7, 1fr);
}

.jours-semaine {
   margin-bottom:5px;
}

.jours-semaine span {
   text-align:center;
   font-size:12px;
   font-weight:bold;
}

.jour {
   display:flex;
   align-items:center;
   justify-content:center;
   height:34px;
   cursor:pointer;
   border-radius:4px;
}

.jour:hover {
    background:#f8f0ff;
}

.jour.autre-mois {
    color:#aaa;
}

.jour.aujourd-hui {
    background-color:#F2EDFF;
}

.jour.aujourd-hui.selectionne {
    background-color:#277596;
    border:0;
    outline:none;
}

.jour.selectionne {
    background-color:#277596;
    color:#fff;
    border:0;
    outline:none;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Header
-------------------------------------------------------------
-----------------------------------------------------------*/

header {
   display:grid;
   position:fixed;
   top:0;
   width:100%;
   height:auto;
   background-color:#fff;
   align-items:center;
   z-index:11;
}

header nav {
   display:block;
   position:relative;
   height:80px;
   align-items:center;
}

header nav ul {
   margin:0;
   padding:0;
}

header nav ul li {
   display:block;
   list-style:none;
}

#navigation-pages {
   display:block;
   max-width:100%;
   width:100%;
   height:unset;
   background-color:#422c58;
}

#navigation-pages ul li {
   display:inline-block;
   font-size:15px;
   line-height:30px;
   margin-right:45px;
}

#navigation-pages ul li a {
   font-weight:700;
   color:#fff;
   text-decoration:none;
}

#navigation-pages ul li ul {
   display:block;
   margin-left:-12px;
   visibility:hidden;
   opacity:0;
   position:absolute;
   border-top:2px solid #fff;
   background-color:#595459;
}

#navigation-pages ul li ul li {
   display:block;
   width:100%;
   min-width:160px;
   margin:0;
}

#navigation-pages ul li ul li a {
   display:block;   
   color:#fff;
   padding-left:12px;
   box-sizing:border-box;
}

#navigation-pages ul li ul li a:hover,
#navigation-pages ul li ul li a:focus {
   background-color:#89828C;
}

#navigation-pages ul li ul li:last-child,
#navigation-pages ul li ul li:nth-last-child(2) {
   float:unset;
   margin:0;
}

#navigation-pages .menu-deroulant:hover > ul {
   visibility:visible;
   opacity:1;
}

#navigation-pages .droite-first {
   margin-right:0;
   float:right;
}

#navigation-pages .droite {
   float:right;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Stripboard
-------------------------------------------------------------
-----------------------------------------------------------*/

#stripboard #menu-haut {
   display:flex;
   position:fixed;
   top:30px;
   width:100%;
   height:60px;
   box-shadow:0 0 25px rgba(0,0,0,.25);
   background-color:#F2EBFA;
   transition:0.12s;
   z-index:9999;
}

#stripboard #menu-haut.top {
   top:0;
   transition:0.12s;
}

#stripboard #menu-haut.top2 {
   top:0;
}

#stripboard #menu-haut .menu-gauche,
#stripboard #menu-haut .menu-droite {
   display:inline-flex;
   height:60px;
   align-items:center;
   max-width:50%;
   width:100%;
}

#stripboard #menu-haut .menu-droite {
   margin-left:auto;
   width:fit-content;
}

#stripboard #menu-haut .menu-droite div:last-child {
   margin-right:0;
}

#stripboard #menu-haut .menu-droite div {
   margin:0 13px;
}

#stripboard #menu-haut .menu-droite div {
   padding:7px;
   box-sizing:border-box;
   cursor:pointer;
}

#stripboard #menu-haut .menu-droite div.focus {
   background-color:#BCAFC9;
}

#stripboard #menu-haut .bouton-drag[name="fin-du-tournage"] {
   margin-left:0;
}

#stripboard #menu-haut .separateur {
   width:2px;
   height:50%;
   margin:0 30px;
   background-color:#CEC5D9;
}

#stripboard #menu-haut #btnImporter {
   font-size:16px;
   line-height:18px;
    margin-right:15px;
}

#stripboard #menu-haut .bouton, 
#stripboard #menu-haut .bouton-drag {
   font-weight:700;
   letter-spacing:0.2px;
   color:#383838;
   padding:10px 14px;
   box-sizing:border-box;
   margin-left:30px;
   border-radius:3px;
   background-color:#DBD3ED;
   user-select:none;
   cursor:pointer;
}

#stripboard #menu-haut #elements-draggable {
   position:absolute;
   left:-9999px;
   visibility:hidden;
}

#stripboard #menu-haut .bouton:first-of-type {
   margin-left:0;
}

#stripboard .titre {
   max-width:50%;
   width:100%;
   margin-bottom:20px;
}

#stripboard .modele {
   position:relative;
   top:-10px;
   max-width:50%;
   width:100%;
}

#stripboard .modele label {
   position:relative;
   margin:0 12px 0;
   width:unset;
   height:30px;
   line-height:30px;
   color:#422c58;
   top:50%;
   transform:translateY(-50%);
   float:right;
}

#stripboard .modele input {
   position:relative;
   font-size:24px;
   line-height:26px;
   color:#422c58;
   max-width:300px;
   width:100%;
   top:50%;
   border:0;
   transform:translateY(-50%);
   float:right;
}

#stripboard .modele .bouton-menu {
   position:relative;
   top:50%;
   margin-left:12px;
   transform:translateY(-50%);
   float:right;
   cursor:pointer;
}

#stripboard #menu-haut #elements-draggable {
   visibility:hidden;
}

#stripboard #tableau {
   width:100%;
}

#stripboard .bande[name="fin-du-tournage"] {
   font-weight:700;
   text-transform:uppercase;
   border-bottom:unset;
}

#stripboard .bande[name="fin-du-tournage"] .texte {
   flex:1;
   text-align:center;
}

#stripboard #principal {
   margin-top:90px;
   border:0;
   border:1px solid #E3E3E3;
   background-color:#fff;
}

#stripboard #tableau .bande {
   display:flex;
   position:relative;
	margin-bottom:1px;
   text-align:center;
   justify-content:space-between;
   align-items:center;
   font-family:"Montserrat", sans-serif;
   width:100%;
   max-width:1728px;
   padding:15px 0;
   box-sizing:border-box;
   user-select:none;
   transition:transform .15s;
}

#stripboard #tableau .bande .no-scene,
#stripboard #tableau .bande .ie {
   max-width:4%;
   width:100%;
   text-transform:uppercase;
}

#stripboard #tableau .bande .menu-bouton,
#stripboard #tableau .bande .poignee {
   max-width:2%;
   width:100%;
}

#stripboard #tableau .bande .jn,
#stripboard #tableau .bande .page,
#stripboard #tableau .bande .roles { /* 15 */
   max-width:7.5%;
   width:100%;
   text-transform:capitalize;
}

#stripboard #tableau .bande .description {
   max-width:40%;
   width:100%;
   text-align:left;
}

#stripboard #tableau .bande .location {
   max-width:10%;
   width:100%;
   text-align:left;
}

#stripboard #tableau .bande .location a {
   color:#000;
}

#stripboard #tableau .poignee {
   cursor:grab;
   font-size:22px;
}

#stripboard #tableau .bande .menu-bouton {
   position:relative;
   cursor:pointer;
}

#stripboard .menu-modele {
   position:relative;
}

#stripboard .menu-scene {
   display:none;
   position:absolute;
   top:25px;
   left:45px;
   height:auto;
   border:1px solid #a7a7a7;
   box-shadow:3px 3px 12px rgba(0,0,0,.23);
   z-index:999;
}

#stripboard .menu-modele .menu {
   display:none;
   position:absolute;
   top:0;
   right:25px;
   max-width:200px;
   width:100%;
   height:auto;
   line-height:22px;
   border:1px solid #a7a7a7;
   box-shadow:3px 3px 12px rgba(0,0,0,.23);
   z-index:999;
}

#stripboard .menu-scene ul li,
#stripboard .menu-modele .menu ul li {
   display:block;
   position:relative;
   top:unset;
   font-family:"Roboto", sans-serif;
   text-align:left;
   font-weight:700;
   padding:7px 12px;
   box-sizing:border-box;
   min-width:170px;
   width:100%;
   cursor:pointer;
   color:#474747;
   background-color:#f8f0ff;
   word-break:normal;
}

#stripboard .menu-scene ul li:hover,
#stripboard .menu-scene ul li:focus,
#stripboard .menu-modele .menu ul li:hover,
#stripboard .menu-modele .menu ul li:focus {
   color:#000;
   background-color:#a98cc2;
}

#stripboard .menu-scene div,
#stripboard .menu-modele .menu div {
   font-family:"Roboto", sans-serif;
   text-align:right;
   font-weight:700;
   padding:0 8px;
   box-sizing:border-box;
   background-color:#E8E1F5;
   cursor:default;
}

#stripboard .menu-scene div span,
#stripboard .menu-modele .menu div span {
   position:relative;
   top:-2px;
   right:-6px;
   font-family:"Roboto", sans-serif;
   text-align:right;
   font-weight:700;
   cursor:pointer;
   padding:6px;
}

#stripboard .menu-scene div span:hover,
#stripboard .menu-modele .menu div span:hover,
#stripboard .menu-scene div span:focus,
#stripboard .menu-modele .menu div span:focus {
   color:#3ca0cb;
}

#stripboard #tableau .menu-scene.display,
#stripboard .menu-modele .menu.display {
   display:block;
}

#stripboard .drag {
   position:fixed!important;
   z-index:999;
   pointer-events:none;
   opacity:.70;
   box-shadow:0 10px 25px rgba(0,0,0,.25);
   transform:scale(1.02);
}

#stripboard #tableau .roles .role,
#scenes #tableau .roles .role {
   display:flex;
   justify-content:center;
   align-items:center;
   font-weight:700;
   width:26px;
   height:26px;
   margin:0 3px;
   border-radius:50%;
   background-color:rgba(0,0,0,0.15);
   float:left;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Scènes
-------------------------------------------------------------
-----------------------------------------------------------*/

#scenes .justify {
	align-items:center;
	justify-content:space-between;
}

#scenes .menu-haut {
	align-items:center;
}

#scenes .menu-haut .titre {
	align-self:baseline;
}


#scenes #selection-categorie {
    margin-bottom:8px;
}

#scenes #selection-categorie button {
    padding:4px 30px;
    margin-right:6px;
}

#scenes #selection-categorie button,
#scenes #selection-categorie .couleur {
    float:left;
}

#scenes .categorie-couleur {
    display:flex;
    align-items:center;
}

#scenes .color-picker {
    display:flex;
    align-items:center;
    margin-left:4px;
    margin-right:13px;
}

#scenes .color-popup {
    top:90px;
}

#scenes button[name="options"] {
    align-self:end;
	margin-right:60px;
}

#scenes button[name="couleurs"] {
    align-self:end;
	margin-right:20px;
}

#scenes button[name="ajouter"] {
    position:relative;
    top:6px;
    align-self:end;
}

#scenes #classement {
	max-width:440px;
}

#scenes #selection {
	margin-top:33px;
	margin-left:auto;
}

#scenes #selection label {
	display:contents;
	font-weight:300;
}

#scenes #selection input[type="checkbox"] {
	margin-right:16px;
}

#scenes #selection input[type="checkbox"]:last-of-type {
	margin-right:0;
}

#scenes .tableau-titres {
	text-align:center;
	font-weight:700;
	line-height:32px;
	color:#fff;
	margin-top:12px;
	margin-bottom:1px;
	background-color:#2c2c2c;
}

#scenes .tableau-titres .row {
	padding:0;
}

#scenes .tableau-titres div {
	text-align:center!important;
	padding:0 12px;
	box-sizing:border-box;
	width:100%;
	border-right:1px solid #fff;
}

#scenes .tableau-titres div:last-of-type {
	border-right:0;
}

#scenes #tableau {
   margin-top:0;
}

#scenes #classement button {
   margin-right:6px;
}

#scenes #tableau .bande {
    display:flex;
    position:relative;
	margin-bottom:1px;
    text-align:center;
    align-items:center;
    font-family:"Montserrat", sans-serif;
    width:100%;
    max-width:1728px;
    padding:10px 0;
    box-sizing:border-box;
    user-select:none;
    transition:transform .15s;
    cursor:pointer
}

#scenes #tableau .bande div[data-colonneb] {
    position:relative;
}

#scenes #tableau .bande div[data-colonneb]::after {
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:var(--after-height, 100%);
    background-color:rgba(0,0,0,0.08);
}

#scenes #tableau .bande div[data-colonneb]:last-of-type::after {
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:var(--after-height, 100%);
    background-color:rgba(0,0,0,0);
}

#scenes .scenes-tableau div {
	text-align:center;
	width:100%;
	padding:0 12px;
	box-sizing:border-box;
}

#scenes .tableau-titres .no-scene,
#scenes .scenes-tableau .no-scene {
	width:5.97%;
}

#scenes .tableau-titres .ie,
#scenes .scenes-tableau .ie {
	width:3.32%;
}

#scenes .scenes-tableau .titre {
	font-size:17px;
	font-weight:700;
	text-align:left;
	color:#000;
	padding:0;
	margin-bottom:3px;
}

#scenes .tableau-titres .description,
#scenes .scenes-tableau .description {
	width:26.55%
}

#scenes .scenes-tableau .description {
	font-size:14px;
	text-align:left;
	line-height:18px;
}

#scenes .tableau-titres .jn,
#scenes .scenes-tableau .jn {
	width:5.53%;
}

#scenes .tableau-titres .roles,
#scenes .scenes-tableau .roles {
	width:11.06%
}

#scenes .tableau-titres .accessoires,
#scenes .scenes-tableau .accessoires {
	width:9.96%
}

#scenes .tableau-titres .vehicules,
#scenes .scenes-tableau .vehicules {
	width:8.86%
}

#scenes .tableau-titres .location,
#scenes .scenes-tableau .location {
	text-align:left;
	width:13.27%;
}

#scenes .scenes-tableau .location a {
	color:#000;
}

#scenes .tableau-titres .chrono,
#scenes .scenes-tableau .chrono {
	width:6.64%;
}

#scenes .tableau-titres .sequence,
#scenes .scenes-tableau .sequence {
	width:4.42%;
}

#scenes .tableau-titres .page,
#scenes .scenes-tableau .page {
	width:4.42%;
}

#scenes .tableau-titres .temps-estime,
#scenes .scenes-tableau .temps-estime {
	width:8.85%;
}

#scenes .tableau-titres .no-scene.display,
#scenes .tableau-titres .ie.display,
#scenes .tableau-titres .description.display,
#scenes .tableau-titres .jn.display,
#scenes .tableau-titres .roles.display,
#scenes .tableau-titres .lieu.display,
#scenes .tableau-titres .location.display,
#scenes .tableau-titres .accessoires.display,
#scenes .tableau-titres .vehicules.display,
#scenes .tableau-titres .chrono.display,
#scenes .tableau-titres .sequence.display,
#scenes .tableau-titres .page.display,
#scenes .tableau-titres .temps-estime.display,
#scenes #tableau .no-scene.display,
#scenes #tableau .ie.display,
#scenes #tableau .description.display,
#scenes #tableau .jn.display,
#scenes #tableau .roles.display,
#scenes #tableau .lieu.display,
#scenes #tableau .location.display,
#scenes #tableau .accessoires.display,
#scenes #tableau .vehicules.display,
#scenes #tableau .chrono.display,
#scenes #tableau .sequence.display,
#scenes #tableau .page.display,
#scenes #tableau .temps-estime.display{
	display:none;
}

#scenes #fenetre input[name="no_scene"] {
	max-width:100px;
}

#scenes #fenetre .int-ext,
#scenes #fenetre .jour-nuit {
	display:flex;
	align-items:center;
	margin-top:12px;
}

#scenes #fenetre .int-ext .span-radio,
#scenes #fenetre .jour-nuit .span-radio {
	user-select:none;
    padding-left:4px;
}

#scenes #fenetre input[type="radio"] {
	margin:0 0 2px 15px;
}

#scenes #fenetre input[type="radio"]:first-child {
	margin:0 4px 2px 0;
}

#scenes #fenetre .col-commentaires {
	max-width:100%;
	width:100%;
}

#scenes #fenetre textarea[name="description"] {
	margin-top:10px;
}

#scenes #fenetre .col-chrono {
	padding:0 10px 0 0;
}

#scenes #fenetre .chrono {
	display:flex;
	align-items:center;
}

#scenes #fenetre .chrono .champ-date {
	margin-right:5px;
	max-width:50%;
}

#scenes #fenetre .chrono input[name="chrono_jour"] {
	cursor:pointer;
}

#scenes #fenetre .chrono input[name="chrono_heure"] {
	max-width:50%;
}

#scenes #fenetre .sequence,
#scenes #fenetre .page {
	max-width:130px;
}

#scenes #fenetre .temps-estime {
	max-width:150px;
}

#scenes #fenetre .unite {
	max-width:60px;
}

#scenes #fenetre .ligne-separation-horizontale {
	margin-top:34px;
}

#scenes #fenetre .col-3,
#scenes #fenetre .option {
	display:block;
}

#scenes #fenetre .option {
    font-size:20px;
    line-height:28px;
    color:#422c58;
    width:100%;
    clear:both;
}

#scenes #fenetre .option .plus {
	font-weight:700;
    margin-left:4px;
    padding:0 7px;
    box-sizing:border-box;
    cursor:pointer;
}

#scenes #fenetre .option input[type="text"] {
    margin-bottom:5px;
    margin-left:40px;
    max-width:70%;
    float:left;
}

#scenes #fenetre .option .supprimer {
    margin-bottom:5px;
    float:left;
}

#scenes #fenetre-options .titre,
#scenes #fenetre-couleurs .titre {
	margin-top:33px;
	margin-bottom:12px;
}

#scenes #fenetre-options button[name="ajouter"] {
    top:0;
}

#scenes #fenetre-options input[type="text"] {
   max-width:250px;
   border:1px solid #BFBFBF;
}

#scenes #fenetre-options .option input[type="text"] {
   max-width:360px;
   width:100%;
}

#scenes #fenetre-options button {
   max-width:150px;
   margin-left:16px;
}

#scenes #fenetre-options .col-3 {
    padding:0 20px;
	box-sizing:border-box;
}

#scenes #fenetre-options .c-1 {
    padding:0 20px 0 0;
	box-sizing:border-box;
}

#scenes #fenetre-options .c-3 {
    padding:0 0 0 20px;
	box-sizing:border-box;
}

#scenes #fenetre .options,
#scenes #fenetre-options .options {
	display:table;
	margin:40px 0;
	width:100%;
}

#scenes #fenetre-options .erreur {
    margin:3px 0 0 6px;
	visibility:hidden;
    opacity:0;
    transition:0.2s;
}

#scenes #fenetre-options .erreur.visibility {
	visibility:visible;
    opacity:1;
    transition:0.2s;
}

#scenes #fenetre-options .option {
    line-height:26px;
	height:27px;
	width:auto;
    padding-left:6px;
    box-sizing:border-box;
    border-bottom:1px solid #DEDEDE;
    cursor:pointer;
}

#scenes #fenetre-options .option .nom {
    width:100%;
}

#scenes #fenetre-options .option:first-of-type {
    border-top:1px solid #DEDEDE;
}

#scenes #fenetre-options .option.marqueur-p {
    background-color:#f8f0ff;
}

#scenes #fenetre-options .marqueur-existant {
    background-color:#FFF5B3!important;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Connexion
-------------------------------------------------------------
-----------------------------------------------------------*/

#connexion form {
   display:block;
   max-width:320px;
   width:100%;
   margin:0 auto;
}

#connexion input {
   width:100%;
   line-height:26px;
}

#connexion input[type="submit"] {
   max-width:100%;
   margin-top:20px;
   margin-bottom:20px;
}

#connexion a {
   font-size:13px;
   max-width:100%;
}

#connexion .erreur {
   font-size:13px;
   max-width:100%;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Accessoires
-------------------------------------------------------------
-----------------------------------------------------------*/

#accessoires #categories.fixed {
   position:fixed;
   max-width:489.583px;
   width:100%;
}

#accessoires #associations.fixed {
   position:fixed;
   max-width:622.383px;
   width:100%;
}

#accessoires .titre {
   margin-bottom:12px;
}

#accessoires button {
   max-width:150px;
   margin-left:16px;
}

#accessoires .erreur {
	height:22px;
	margin:3px 0 0 6px;
	opacity:0;
	visibility:hidden;
}

#accessoires .erreur.visibility {
	opacity:1;
	visibility:visible;
	transition:0.2s;
}

#accessoires .col-max-width {
	max-width:28.333%;
}

#accessoires .contenant {
   margin-top:30px;
}

#accessoires .contenant .accessoire,
#accessoires .contenant .categorie,
#accessoires .contenant .role {
   line-height:26px;
	height:27px;
	width:auto;
   padding-left:6px;
   box-sizing:border-box;
   border-bottom:1px solid #DEDEDE;
   cursor:pointer;
}

#accessoires .contenant .accessoire input {
   float:left;
	max-width:420px!important;
}

#accessoires .contenant .categorie input {
   float:left;
	max-width:340px!important;
}

#accessoires .contenant .categorie {
   cursor:unset;
}

#accessoires .contenant .accessoire:first-child,
#accessoires .contenant .categorie:first-child,
#accessoires .contenant .role:first-child {
   border-top:1px solid #DEDEDE;
}

#accessoires .contenant div:hover,
#accessoires .contenant div:focus {
   background-color:#F2EDFF;
}

#accessoires .marqueur,
#roles .marqueur {
   background-color:#a98cc2!important;
}

#accessoires .marqueur span,
#roles .marqueur span {
   background-color:none!important;
}

#accessoires .marqueur-p,
#roles .marqueur-p {
   background-color:#F2EDFF;
}

#accessoires .marqueur-existant,
#roles .marqueur-existant {
   background-color:#FFF5B3!important;
}

#accessoires #categories .contenant .span-checkbox {
   display:block;
   position:relative;
   width:22px;
   height:22px;
   margin-right:10px;
   float:left;
}

#accessoires #categories .span-checkbox input {
   display:none;
   position:relative;
   top:2px;
}

#accessoires #categories .span-checkbox input.display {
   display:block;
}

#accessoires #associations .ordre {
   font-size:18px;
   font-weight:700;
}

#accessoires #associations .ordre button {
   max-width:unset;
   width:auto;
   font-size:16px;
   line-height:24px;
   margin:5px 15px 0 0;
   padding:0 20px 1px;
   float:left;
}

#accessoires #associations #decocher-liaison {
   margin:5px 0 0 0;
   float:right;
	background-color:#7340a2;
}

#accessoires #associations #lier-dur {
   font-size:16px;
   font-weight:700;
   float:right;
}

#accessoires #associations .contenant {
   margin-top:28px;
   clear:both;
}

#accessoires #associations .span-radio {
   display:block;
   position:relative;
   width:22px;
   height:22px;
   margin-right:10px;
   float:left;
}

#accessoires #associations .span-radio input {
   display:none;
   position:relative;
   top:2px;
}

#accessoires #associations .span-radio input.display {
   display:block;
}

#accessoires #associations .role {
   position:relative;
   font-weight:700;
   z-index:1;
}

#accessoires #associations .role-contenant {
   display:inline-block;
   max-width:92%;
   width:100%;
}

#accessoires #associations .role .nom {
   font-weight:400;
}

#accessoires #associations .role .div-dur {
   display:inline-block;
   max-width:5%;
   width:100%;
   height:22px;
   margin-right:10px;
}

#accessoires #associations .role .div-dur input {
   display:none;
   position:relative;
   top:2px;
   margin-right:0;
   float:right;
}

#accessoires #associations .role .div-dur input.display {
   display:block;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Personnel, Rôles
-------------------------------------------------------------
-----------------------------------------------------------*/

#personnel .col-special-gauche,
#roles .col-special-gauche,
#horaire .col-special-gauche ,
#depouillement .col-special-gauche {
   max-width:66.666%;
}

#personnel .col-special-droite,
#roles .col-special-droite,
#horaire .col-special-droite,
#depouillement .col-special-droite {
   max-width:33.333%;
}

#personnel #categorie-type {
   margin-top:20px;
}

#personnel #classement,
#roles #classement,
#horaire #classement {
   margin-top:8px;
}

#personnel #selection-categorie button,
#personnel #classement button,
#roles #classement button,
#horaire #classement button {
   margin-right:6px;
}

#personnel .categorie-couleur {
   display:flex;
}

#personnel .couleur-personnel .color-circle {
   position:relative;
   top:4px;
   margin-right:12px;
}

#personnel .tableau,
#roles .tableau,
#horaire .tableau {
   margin-top:12px;
}

#personnel .tab::before,
#roles .tab::before,
#horaire .tab::before {
   content:"";
   position:relative;
   inset:0;
   background:rgba(0, 0, 0, 0);
}

#personnel .tab:hover::before,
#roles .tab:hover::before,
#horaire .tab:hover::before {
   position:absolute;
   background:rgba(0, 0, 0, 0.22);
}

#personnel .tab div,
#roles .tab div,
#horaire .tab div {
   width:100%;
   padding:0 10px;
   border-right:1px solid #a7a7a7;
   box-sizing:border-box;
}

#personnel .tab div:last-child,
#roles .tab div:last-child,
#horaire .tab div:last-child {
   border-right:0;
}

#personnel .colonne-1 {
   max-width:220px;
   box-sizing:content-box;
}

#personnel .colonne-2,
#personnel .colonne-3,
#personnel .colonne-4 {
   max-width:200px;
}

#personnel #fiche,
#bibliotheque #fiche,
#roles #fiche {
   display:none;
   word-break:break-word;
   top:30px;
   transition:1s;
}

#personnel #fiche.fixed,
#bibliotheque #fiche.fixed,
#roles #fiche.fixed {
   max-width:556px;
   width:100%;
   position:fixed;
   top:60px;
   transition:0.75s;
}

#personnel #fiche.display,
#bibliotheque #fiche.display,
#roles #fiche.display {
   display:block;
}

#personnel #fiche .row:first-of-type,
#roles #fiche .row:first-of-type {
   display:table;
}

#personnel #fiche button[name="modifier"],
#roles #fiche button[name="modifier"] {
   margin-bottom:18px;
   float:right;
}

#personnel #fiche .supprimer,
#roles #fiche .supprimer {
   width:100%;
   top:unset;
   margin-top:40px;
   padding:unset;
   cursor:unset;
}

#personnel #fiche .supprimer button[name="supprimer"],
#roles #fiche .supprimer button[name="supprimer"] {
   float:right;
}

#personnel #fiche .supprimer .x,
#roles #fiche .supprimer .x {
   position:relative;
   top:1px;
   right:unset;
   margin-left:10px;
}

#personnel #fiche .erreur,
#roles #fiche .erreur {
   font-style:italic;
   text-decoration:none;
   color:#3ca0cb;
}

#personnel label,
#roles label {
   color:#422c58;
}

#personnel .televerser .col-2-droite,
#roles .televerser .col-2-droite {
   max-width:66.666%;
}

#personnel .documents .galerie,
#roles .documents .galerie {
   display:grid;
   width:100%;
   max-width:606px;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap:10px;
}

#personnel .documents a,
#roles .documents a {
   cursor:pointer;
}

#personnel .documents a .contenu,
#roles .documents a .contenu {
   display:block;
   width:100%;
   aspect-ratio: 1 / 1;
   background-size:cover;
   background-position:center;
   background-repeat:no-repeat;
   border-radius:6px;
}

#personnel .documents a,
#roles .documents a {
   position:relative;
   text-decoration:none;
   max-height:100px;
   max-width:100px;
}

#personnel .documents a .titre,
#roles .documents a .titre {
   position:relative;
   display:none;
   opacity:0;
   max-height:100px;
   top:-103px;
   font-size:13px;
   font-weight:700;
   line-height:16px;
   text-align:center;
   word-break:break-word;
   padding:10px 12px;
   box-sizing:border-box;
   background-color:rgba(255,255,255,0.8);
   transition:0.2s;
}

#personnel .documents a .titre.display,
#roles .documents a .titre.display {
   display:block;
}

#personnel .documents a .titre.opacity,
#roles .documents a .titre.opacity {
   opacity:1;
}

#personnel .agents .agent,
#roles .agents .agent {
	margin-bottom:15px;
}

#personnel .agents .nom,
#roles .agents .nom {
	font-weight:700;
}

#roles .agents .contenant {
	margin-top:10px;
   overflow-y:scroll;
   height:auto;
	max-height:70vh;
   opacity:1;
}

#roles .agents .note {
   position:relative;
   font-size:14px;
   line-height:18px;
   padding:10px 20px 10px 20px;
   box-sizing:border-box;
   border:1px solid #EDEBEB;
   border-bottom:0;
   background-color:#F7F7F7;
}

#roles .agents .note:hover {
   background-color:#F2EDFF;
}

#roles #fiche .agents .note .supprimer {
   position:absolute;
   top:0;
   right:5px;
	margin:0;
	cursor:pointer;
}

#roles .agents .erreur {
	display:none;
   margin-top:4px;
}

#roles .agents .erreur {
	display:block;
   margin-top:4px;
}

#roles .agents .note .nom {
	font-weight:700;
	color:#3ca0cb;
   max-width:50%;
   width:100%;
	float:left;
}

#roles .agents .note .date {
	position:relative;
	font-weight:700;
	text-align:right;
   max-width:50%;
   width:100%;
	float:left;
}

#roles .agents .contenu {
   margin-top:4px;
   margin-bottom:3px;
   font-size:15px;
   line-height:20px;
   word-break:break-all; 
}

#personnel #fenetre #fiche-secondaire .col-3-gauche:first-of-type,
#roles #fenetre #fiche-secondaire .col-3-gauche:first-of-type {
   position:relative;
}

#personnel #fenetre .erreur-input-files,
#roles #fenetre .erreur-input-files,
#bibliotheque .erreur-input-files {
   display:none;
   text-align:center;
}

#personnel #fenetre .erreur-input-files.display,
#roles #fenetre .erreur-input-files.display {
   display:block;
}

#fenetre .rechercher-accessoires {
   max-width:240px;
   width:100%;
   margin-right:8px;
}

#fenetre .rechercher-accessoires input {
   margin:5px 0 10px;
}

#roles #fenetre .plus.display {
   display:block;
}

#personnel #fenetre .boite-selections {
   display:none;
   position:absolute;
   top:62px;
   left:0;
   max-width:231px;
   width:100%;
   max-height:136px;
   height:auto;
   border:1px solid #595459;
   box-sizing:border-box;
   background-color:#f8f0ff;
   overflow:auto;
   z-index:999;
}

#personnel #fenetre .boite-selections.display,
#roles #fenetre .boite-selections.display {
   display:block;
}

#personnel #fenetre .boite-selections div,
#roles #fenetre .boite-selections div {
   line-height:26px;
   padding:0 6px;
   border-bottom:1px solid #ABABAB;
   box-sizing:border-box;
   cursor:pointer
}

#personnel #fenetre .boite-selections div:last-of-type,
#roles #fenetre .boite-selections div:last-of-type {
   border-bottom:0;
}

#personnel #fenetre .boite-selections div:hover,
#personnel #fenetre .boite-selections div:focus,
#roles #fenetre .boite-selections div:hover,
#roles #fenetre .boite-selections div:focus {
   background-color:#a98cc2;
}

#personnel #fenetre .bouton-p,
#roles #fenetre .bouton-p {
   display:none;
   max-width:125px;
   margin-left:20px;
   float:left;
}

#personnel #fenetre .bouton-p.display,
#roles #fenetre .bouton-p.display {
   display:block;
}

#personnel #fenetre .role,
#roles #fenetre .role {
   display:none;
}

#personnel #fenetre .role.display,
#roles #fenetre .role.display {
   display:block;
}

#personnel #fenetre input[name="no_role"],
#roles #fenetre input[name="no_role"] {
   max-width:120px;
}

#personnel #fenetre .joindre {
   margin-top:-35px;
}

/* -- Rôles --*/

#roles .colonne-1 {
   max-width:120px;
}

#roles .no-scenes .valeur {
   font-size:17px;
   font-weight:700;
   cursor:default;
}

#roles #fenetre .menu-personnel {
   display:none;
   position:absolute;
   margin-top:-20px;
   opacity:0;
   transition:0.3s;
}

#roles #fenetre .modification {
   display:none;
   position:absolute;
   margin-top:-60px;
   opacity:0;
   transition:0.3s;
}

#roles #fenetre .modification.display {
   display:block;
   transition:0.3s;
}

#roles #fenetre .modification.opacity {
   opacity:1;
   transition:0.3s;
}

#roles #fenetre .modification .erreur {
   font-size:20px;
   color:#7340a2;
}

#roles #fenetre .modification .bouton-p {
   display:block;
   margin-top:6px;
   margin-left:0;
}

#roles #fenetre .modification b {
   color:#000;
}

#roles #fenetre .menu-personnel.display {
   display:block;
   transition:0.3s;
}

#roles #fenetre .menu-personnel.opacity {
   opacity:1;
   transition:0.3s;
}

#roles #fenetre .boite-selections {
    display:none;
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    max-width:250px;
    max-height:136px;
    height:auto;
    border:1px solid #595459;
    box-sizing:border-box;
    background-color:#f8f0ff;
    overflow:auto;
    z-index:999;
}

#roles #fenetre #fiche-secondaire .boite-selections {
    top:61px;
    max-width:231px;
}

#roles #fenetre #agents-actuels {
   display:none;
   margin-bottom:10px;
}

#roles #fenetre #agents-actuels {
   display:none;
	margin-bottom:20px;
}

#roles #fenetre #agents-actuels .row {
	margin-bottom:10px;
	line-height:27px;
}

#roles #fenetre #agents-actuels.display {
   display:block;
}

#roles #fenetre #agents-actuels .nom {
    font-weight:700;
    color:#0083B5;
	width:100%;
    max-width:250px;
}

#roles #fenetre #agents-actuels .nom:last-of-type {
    margin-bottom:30px;
}

#roles #fenetre #agents-actuels .nom a {
    cursor:pointer;
}

#roles #fenetre #agents-actuels button {
	font-size:16px;
	margin-left:0;
    margin-right:12px;
	padding:4px 24px;
}

#roles #fenetre .fiche-agent {
    text-decoration:none;
    font-weight:400;
    color:#000;
    margin-bottom:5px;
    white-space:pre;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Horaire
-------------------------------------------------------------
-----------------------------------------------------------*/

#horaire .row:first-of-type {
    position:relative;
}

#horaire .titre {
    display:inline-block;
    width:unset;
}

#horaire #date-horaire {
    display:block;
    font-size:17px;
    font-weight:700;
    text-align:right;
    line-height:29px;
    color:#3ca0cb;
    margin-top:-3px;
    margin-left:auto;
    border:0;
    cursor:pointer;
}

#horaire svg {
    margin-top:-3px;
    margin-left:5px;
    cursor:pointer;
}

#horaire #calendrier {
    display:none;
    position:absolute;
    top:27px;
    right:0;
}

#horaire #calendrier.display {
    display:block;
}

#horaire #classement {
    margin-top:17px;
}

#horaire .dates {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-left:auto;
    margin-top:-63px;
}

#horaire .dates > div {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

#horaire .dates span {
    font-size:17px;
    font-weight:700;
    line-height:28px;
    width:173px;
    margin-right:8px;
    white-space:nowrap;
}

#horaire .dates input {
    width:80px;
    max-width:80px;
    font-size:20px;
    line-height:26px;
    box-sizing:border-box;
    border:1px solid #BFBFBF;
}

#horaire .dates input:first-of-type {
    margin-right:24px;
}

#horaire input::placeholder {
    color:#B5B5B5;
}

#horaire input:disabled::placeholder {
    color:#E8E8E8;
}

#horaire .tableau {
    margin-top:11px;
}

#horaire #fiche {
    max-width:300px;
    width:100%;
    margin-left:auto;
}

#horaire #fiche span.vip {
    display:block;
    font-size:17px;
    font-weight:700;
    margin-right:4px;
    width:unset;
    line-height:unset;
    box-sizing:unset;
}

#horaire #fiche input[name="vip"] {
    max-width:unset;
    width:unset;
    line-height:unset;
}

#horaire #fiche .nom {
    display:block;
    height:22px;
    margin-bottom:20px;
}

#horaire #fiche label,
#horaire #fiche select,
#horaire #fiche input {
    width:100%;
}

#horaire #fiche label.duree {
    margin-top:8px;
}

#horaire #fiche select {
    font-size:16px;
    line-height:26px;
    border:1px solid #BFBFBF;
}

#horaire #fiche input {
    max-width:200px;
    line-height:26px;
    box-sizing:border-box;
    border:1px solid #BFBFBF;
}

#horaire #fiche input.duree {
    max-width:80px;
    font-size:20px;
    line-height:26px;
    border:1px solid #BFBFBF;
}

#horaire #fiche input:disabled {
    border:1px solid #E8E8E8;
}

#horaire #fiche button {
    margin-top:30px;
}

#horaire #fiche-generee {
    margin-top:30px;
}

#horaire .horaire-generee {
    max-width:1730px;
}

#horaire .horaire-generee div {
    display:block;
    width:20px;
    height:20px;
    text-align:center;
    border:1px solid #BFBFBF;
    user-select:none;
    background-color:red;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Dépouillement
-------------------------------------------------------------
-----------------------------------------------------------*/

#depouillement .titre-p {
    margin-top:30px;
    margin-bottom:10px;
}

#depouillement .scene {
    display:block;
    width:100%;
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
    border-top:1px solid #BFBFBF;
}

#depouillement .scene .col-special-droite {
    font-weight:700;
    align-content:end;
    border-left:1px solid #BFBFBF;
}

#depouillement .no-scene {
    font-size:18px;
    font-weight:700;
}

#depouillement .no-scene span {
    font-size:16px;
    font-weight:400;
    line-height:18px;
}

#depouillement .alinea {
    font-size:16px;
    margin-top:7px;
    margin-left:30px;
}

#depouillement .titre-alinea {
    margin-top:4px;
    font-size:18px;
    font-weight:700;
    text-decoration:underline;
}

#depouillement .titre-alinea:first-child {
    margin-top:0;
}

#depouillement .comediens {
    margin-left:30px;
}

#depouillement .nom-complet {
    font-weight:700;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Aside #menu-lateral
-------------------------------------------------------------
-----------------------------------------------------------*/

#menu-lateral {
   display:block;
   position:fixed;
   top:0;
   right:0;
   width:30px;
   height:100vh;
   background-color:#fff;
   box-shadow:-2px 0 18px #CCC;
   z-index:8;
   transition:0.3s ease;
   cursor:pointer;
}

#menu-lateral .container {
   margin-top:60px;
   padding:0 20px 0 50px;
   opacity:0;
   transition:0.1s;
}

#menu-lateral .container button {
   margin:10px 0 0 0;
}

#menu-lateral .container.opacity {
   opacity:1;
   transition:1.2s;
}

#menu-lateral.ouvert {
   width:400px;
	box-shadow:unset;
   transition:0.3s ease;
   cursor:unset;
}

#menu-lateral.ouvert #fleche {
   display:none;
}

#menu-lateral #barre-fermeture {
   display:block;
   position:absolute;
   top:0;
   left:0;
   width:30px;
   height:100vh;
   background-color:#fff;
   cursor:pointer;
   z-index:9;
}

#menu-lateral #barre-fermeture:hover,
#menu-lateral #barre-fermeture:focus {
   background-color:#F2EDFF;
}

#menu-lateral.ouvert #barre-fermeture {
   background-color:#242424!important;
	color:#fff;
	transition:0.5s ease;
}

#menu-lateral #barre-fermeture.bc-color {
   background-color:#F2EDFF;
}

#menu-lateral #menu-lateral-titre {
   position:relative;
   top:50%;
   left:-135px;
   width:300px;
   font-size:15px;
   text-align:center;
   text-transform:uppercase;
   letter-spacing:0.2em;
   line-height:30px;
   color:#4D4D4D;
   transform:translateY(-50%) rotate(90deg);
   z-index:8;
   transition:0.3s;
   cursor:pointer;
}

#menu-lateral.ouvert #menu-lateral-titre {
   color:#fff;
	transition:0.5s ease;
}

#menu-lateral:hover > #fleche,
#menu-lateral:focus > #fleche {
   border-right:15px solid #F2EDFF;
}

#menu-lateral #fleche {
   position:absolute;
   width:0;
   height:0;
   top:50%;
   right:30px;
   transform:translateY(-50%);
   border-top:10px solid transparent;
   border-bottom:10px solid transparent;
   border-right:15px solid #fff;
   cursor:pointer;
}

#menu-lateral #notes {
   position:relative;
   top:-10px;
}

#menu-lateral .titre {
  margin-bottom: 12px;
}

#menu-lateral #notes textarea {
   height:71px;
}

#menu-lateral #notes button {
   height:25px;
}

#menu-lateral .contenant {
	margin-top:10px;
   overflow-y:scroll;
   height:auto;
	max-height:70vh;
   opacity:1;
}

#menu-lateral .note {
   position:relative;
   font-size:14px;
   line-height:18px;
   padding:10px 15px 10px 15px;
   box-sizing:border-box;
   border:1px solid #EDEBEB;
   border-bottom:0;
   background-color:#F7F7F7;
}

#menu-lateral .note:hover {
   background-color:#F2EDFF;
}

#menu-lateral .note .supprimer {
   position:absolute;
   top:0;
   right:2px;
}

#menu-lateral .erreur {
	display:none;
   margin-top:4px;
}

#menu-lateral .erreur {
	display:block;
   margin-top:4px;
}

#menu-lateral .note .nom {
	font-weight:700;
	color:#3ca0cb;
   max-width:60%;
   width:100%;
}

#menu-lateral .note .date {
	position:relative;
	right:10px;
	font-weight:700;
	text-align:right;
   max-width:40%;
   width:100%;
}

#menu-lateral .contenu {
   margin-top:4px;
   margin-bottom:3px;
   font-size:15px;
   line-height:20px;
   word-break:break-all; 
}

#menu-lateral .notifications {
   display:flex;
   position:relative;
   top:36px;
   left:4px;
   width:22px;
   height:22px;
   font-size:12px;
   font-weight:bold;
   color:#000;
   border-radius:50%;
   align-items:center;
   justify-content:center;
   background:#BDBDBD;
   visibility:hidden;
}

#menu-lateral .notifications.visible {
   visibility:visible;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Sélectionneur de couleurs
-------------------------------------------------------------
-----------------------------------------------------------*/

.color-circle {
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid #8C8C8C;
    cursor:pointer;
}

.color-popup {
    display:none;
    position:absolute;
    background:white;
    border:1px solid #ddd;
    padding:10px;
    box-sizing:border-box;
    width:220px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    z-index:9999;
}


.color-popup[aria-open="true"] {
    display: block;
}

.cp-satval {
   width:180px;
   height:120px;
   position:relative;
   cursor:crosshair;
   background:red;
}

.cp-satval::before {
   content:"";
   position:absolute;
   inset:0;
   background:linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.cp-satval::after {
   content:"";
   position:absolute;
   inset:0;
   background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.cp-hue {
   width:20px;
   height:120px;
   margin-left:5px;
   background:linear-gradient(
      to top,
      red, yellow, lime, cyan, blue, magenta, red
   );
   cursor:crosshair;
}

.cp-wrapper {
   display:flex;
   flex-direction:row;
}

.cp-cursor {
   width:10px;
   height:10px;
   border:2px solid #fff;
   border-radius:50%;
   position:absolute;
   pointer-events:none;
}

.cp-hex {
   margin-top:8px;
   width:100%;
   padding:6px;
   box-sizing:border-box;
   border:1px solid #ccc;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Footer
-------------------------------------------------------------
-----------------------------------------------------------*/

footer {
   display:block;
   position:fixed;
   max-width:210px;
   width:100%;
   height:unset;
   padding:6px 15px 7px;
   bottom:30px;
   right:40px;
   border-radius:20px;
   box-shadow:4px 4px 10px #CCCCCC;
   background-color:#fff;
   transition:0.3s;
}

footer.menu-lateral {
   right:400px;
}

.statut {
   max-width:66.66%;
   width:100%;
   float:left;
}

.statut div {
   cursor:pointer
}

.boite-aux-lettres {
   max-width:33.33%;
   width:100%;
   float:left;
}

.boite-aux-lettres img {
   position:relative;
   top:1px;
   float:right;
}

.footer-container {
   cursor:pointer;
   transition:02s;
}

.statut-1 {
   display:inline-block;
   position:relative;
   top:1px;
   width:12px;
   height:12px;
   margin-left:5px;
   border-radius:50%;
   background-color:#00D656;
}

.statut-2 {
   display:inline-block;
   position:relative;
   top:1px;
   width:12px;
   height:12px;
   margin-left:5px;
   border-radius:50%;
   background-color:#F59827;
}
.statut-3 {
   display:inline-block;
   position:relative;
   top:1px;
   width:12px;
   height:12px;
   margin-left:5px;
   border-radius:50%;
   background-color:#B80000;
}

.definir-statut {
   display:none;
   opacity:0;
}

.definir-statut .titre {
   margin:16px 0 5px 0;
   font-size:16px;
   color:#000;
}

.statut-class {
   line-height:30px;
   cursor:pointer;
}

.boite-aux-lettres {
   cursor:pointer;
}

footer .erreur {
   position:absolute;
   display:none;
   opacity:0;
   top:39%;
   left:50%;
   width:100%;
   max-width:400px;
   font-size:22px;
   font-weight:700;
   text-align:center;
   padding:12px 30px;
   transform:translate(-50%);
   background-color:#fff;
   border-radius:20px;
   box-shadow:3px 3px 15px #CFCFCF;
   transition:0.4s;
}

footer .messagerie {
   display:none;
   height:auto;
}

footer .utilisateurs {
   max-width:33.33%;
   width:100%;
   float:left;
}

footer .messages {
   max-width:66.66%;
   width:100%;
   max-height:315px;
   overflow-y:scroll;
}

footer .messagerie {
   margin-top:10px;
   transition:0.06s;
}

footer .messagerie .message {
   width:100%;
   padding:6px 10px;
   box-sizing:border-box;
   cursor:pointer;
   float:left;
   border-bottom:1px solid #E3E3E3;
   background-color:#F7F7F7;
   transition:0.06s;
}

footer .messagerie .message:hover,
footer .messagerie .message:focus {
   background-color:#DADFE0;
}

footer .messagerie .message:last-of-type {
   border-bottom:0;
}

footer .messagerie .expediteur{
   max-width:66.66%;
   width:100%;
   font-weight:700;
   float:left;
}

footer .messagerie .date{
   max-width:33.33%;
   width:100%;
   font-weight:700;
   color:#0080BD;
   text-align:right;
   float:left;
}

footer .messagerie .non-lu {
   background-color:#DAEEF7!important;
}

footer .messagerie .non-lu:hover {
   background-color:#D3E1E3!important;
}

footer .messagerie input[type="text"] {
   position:absolute;
   display:none;
   opacity:0;
   bottom:15px;
   line-height:30px;
   width:100%;
   max-width:800px;
   padding:0 12px;
   box-sizing:border-box;
   border-radius:20px;
   border:1px solid #DBDBDB;
   transition:0.2s;
}

footer img[title="Envoyer le message"] {
   position:absolute;
   right:20px;
   bottom:17px;
   cursor:pointer;
   z-index:10;
}

footer .utilisateurs .row {
   transition:0.06s;
}

footer .utilisateurs .row:hover,
footer .utilisateurs .row:focus {
   background-color:#F7F7F7;
}

footer .utilisateurs .util {
   width:100%;
   max-width:220px;
   padding:0 20px;
   box-sizing:border-box;
   float:left;
}

footer .utilisateurs .checkbox {
   width:100%;
   max-width:40px;
   text-align:right;
   float:left;
}

footer .utilisateurs .checkbox input {
   margin-top:8px;
   float:right;
}

footer .coordonnees {
   display:none;
}

footer .lecture {
   display:none;
   opacity:0;
   max-width:66.66%;
   width:100%;
   height:315px;
   overflow-y:scroll;
   transition:0.06s;
}

footer #retour {
   position:absolute;
   display:none;
   opacity:0;
   bottom:58px;
   left:16px;
   cursor:pointer;
   z-index:10;
   transition:0.2s;
}

footer #notice {
   margin:5px 0;
   width:100%;
   max-width:66.66%;
   font-size:14px;
   font-style:italic;
   text-align:right;
   color:#3ca0cb;
}