@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
   --navTransition:0.05s;
   --menuTransition:0.2s;
   --menuTransition2:0.3s;
   --boutonTransition:0.06s;
   --glisserDeposerTransition:0.2s;
   --tableauFontSize:16px;
   --fblocFontSize:16px;
   --fblocLineHeight:20px;
   --maxWidthTableau:100%;
   --borderDashed:3px dashed #cacaca;
}

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

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

main {
   display:block;
   position:relative;
   height:auto;
   margin-top:160px;
   margin-bottom:70px;
}

form {
   width:100%;
}

label {
   font-size:18px;
   font-weight:700;
   display:block;
   margin-top:12px;
   margin-bottom:6px;
}

input {
   display:block;
   font-family:'Roboto', sans-serif;
   font-size:16px;
   line-height:23px;
   padding:0 5px;
   box-sizing:border-box;
}

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

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

.input-file {
   display:inline-block;
   width:100%;
   height:auto;
   text-align:center;
   line-height:25px;
   margin-bottom:20px;
   padding:4px 8px;
   border:2px solid #422c58;
   border-radius:8px;
   background-color:#fff;
   cursor:pointer;
}

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

button,
input[type="submit"] {
   display:block;
   font-size:18px;
   font-weight:500;
   color:#fff;
   padding:8px 35px 10px;
   border:0;
   border-radius:6px;
   background-color:#7340a2;
   cursor:pointer;
   transition:var(--boutonTransition);
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
   background-color:#4d2a6d;
   transition:var(--boutonTransition);
}

button[name="sauvegarder"] {
   background-color:#3b363d;
}

button[name="sauvegarder"]:hover,
button[name="sauvegarder"]:focus {
   background-color:#252525;
}

ul {
   padding:0;
   margin:0;
}

ul li {
   list-style:none;
}

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

h3 {
   font-size:28px;
   color:#545454;
   margin:10px 0 20px;
}

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

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

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

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

.separation {
   display:block;
   width:100%;
   height:1px;
   margin:20px 0;
   background-color:#929292;;
}

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

.row textarea {
   display:none;
}

.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:20px;
   box-sizing:border-box;
   float:left;
}

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

.content {
   padding:60px;
   box-sizing:border-box;
}

.description-titre-scene {
   font-weight:500;
   text-transform:uppercase;
}

.description-titre-scene::after {
   content:"\A";
   white-space:pre;
}

.tableau {
   max-width:var(--maxWidthTableau);
   width:100%;
   border-collapse:collapse;
}

.tableau, th {
   border:1px solid #000;
}

.tableau th {
   color:#fff;
   background-color:#313131;
}

.tableau td {
   position:relative;
   padding:0;
   border:1px solid #000;
   cursor:text;
   outline:none;
}

.tableau td:focus {
   outline:none;
}

.tableau td div[contenteditable="true"]:focus {
   outline:none;
}

.tableau td.actif {
   box-shadow:0 0 4px 2.4px #85d2ed;
   transition:0.05s;
}

.tableau .row {
   position:relative;
}

.tableau .texte {
   display:flex;
   width:100%;
   padding:2px 4px;
   box-sizing:border-box;
   align-items:center;
}

.tableau .bold {
   font-weight:700!important;
}

.tableau .italic {
   font-style:italic!important;
}

.tableau .underline {
   text-decoration:underline!important;
}

.tableau .text b {
   display:contents;
}

.tableau .text p:first-of-type {
   margin-top:0;
   margin-bottom:0;
}

.tableau .text p:last-of-type {
   margin-bottom:0;
}

.bordure-tr {
   display:block;
   position:absolute;
   top:0;
   left:-13px;
   width:10px;
   background-color:#000;
   cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='24'><rect x='0' y='10' width='4' height='4' fill='black'/><polygon points='4,7 8,12 4,17' fill='black'/></svg>") 2 12, auto;
   opacity:0;
}

.span-invisible {
   color:#fff;
   caret-color:#000;
}

div[contenteditable="true"]:focus {
   outline:none;
}

.focus {
   outline:2px solid #268ab8;
}

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

/*-----------------------------------------------------------
-------------------------------------------------------------
Scènes & Bandes
-------------------------------------------------------------
-----------------------------------------------------------*/

#main-scenes {
   position:absolute;
   top:0;
   margin:30px 0 0;
   width:100%;
   height:100vh;
   background-color:#f7f7f7;
}

#main-scenes form {
   display:block;
   position:relative;
   width:100%;
   max-width:1390px;
   padding:40px;
   margin:30px auto 0;
   background-color:#fff;
   user-select:none;
}

#main-scenes .menu {
   display:inline-block;
   height:auto;
   margin-bottom:40px;
   float:right;
}

#main-scenes button[name="ajouter_scenes"] {
   max-width:260px;
   float:right;
}

#main-scenes img {
   display:block;
   margin-top:7px;
   margin-right:20px;
   float:right;
   cursor:pointer;
}

.tableau-bandes {
   width:100%;
   max-width:1398px;
   user-select:none;
}

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

.haut-tableau div {
   display:block;
   width:100%;
   font-size:16px;
   font-weight:500;
   line-height:30px;
   text-align:center;
   border-top:1px solid #717171;
   border-right:1px solid #717171;
   border-bottom:1px solid #717171;
   box-sizing:border-box;
   background-color:#c4c4c4;
}

.haut-tableau div:first-of-type {
   border-left:1px solid #717171;
}

.tableau-bandes .haut-tableau .description {
   text-align:center;
   line-height:30px;
   font-weight:500;
}

.tableau-bandes .roles {
   max-width:150px;
   padding:0 10px;
}

.bande {
   display:flex;
   width:100%;
   flex-wrap:nowrap;
   font-weight:500;
   box-sizing:border-box;
   cursor:pointer;
}

.bande div {
   display:grid;
   width:100%;
   height:60px;
   align-items:center;
   text-align:center;
   padding:0 10px;
   box-sizing:border-box;
   border-right:1px solid #717171;
   border-bottom:1px solid #717171;
}

.bande div:first-of-type {
   border-left:1px solid #717171;
}

.bande textarea {
   display:none;
   width:100%;
   float:left;
}

.bande .roles-parent {
   max-width:150px;
   padding:0;
}

.bande .roles {
   display:flex;
   border:0!important;
}

span[data-role] {
   position:relative;
   cursor:pointer;
}

span[data-role]:hover::after {
   position:absolute;
   content:attr(data-role);
   top:100%;
   left:0;
   background:#000;
   color:#fff;
   padding:4px 8px;
   font-size:12px;
   white-space:nowrap;
   border-radius:4px;
   margin-top:5px;
   z-index:100;
}

.tableau-bandes .no_scene {
   max-width:60px;
}

.tableau-bandes .no_scene span {
   cursor:pointer;
}

.tableau-bandes .no_scene span:hover {
   color:#5d5d5d;
   transition:var(--menuTransition2);
}

.tableau-bandes .ie {
   max-width:80px;
}

.tableau-bandes .jn {
   max-width:120px;
}

.tableau-bandes .description {
   max-width:500px;
   font-weight:400;
   text-align:left;
   line-height:15px;
}

.tableau-bandes .chrono {
   max-width:120px;
}

.tableau-bandes .page {
   max-width:80px;
}

.tableau-bandes .vehicules,
.tableau-bandes .accessoires {
   max-width:150px;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Personnel, Accessoire & véhicules
-------------------------------------------------------------
-----------------------------------------------------------*/

main[id="personnel"] {
   position:absolute;
   width:100%;
   height:100%;
   margin:30px auto 0;
   background-color:#f5f5f5;
}

.rechercher {
   width:100%;
}

input[name="rechercher-accessoires"],
input[name="rechercher-vehicules"] {
   max-width:240px;
   width:100%;
   font-size:16px!important;
   line-height:20px!important;
   padding:3px 12px;
   box-sizing:border-box;
   border:1px solid #c2c2c2!important;
}

#personnel form {
   display:table;
   position:relative;
   width:100%;
   max-width:90%;
   height:auto;
   padding:30px;
   margin:30px auto 0;
   background-color:#fff;
   clear:both;
}

#personnel button[name="ajouter_comedien"] {
   max-width:240px;
   width:100%;
   line-height:27px;
   padding:5px 30px 7px;
}

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

#fiche-comedien {

}

#fiche-comedien span:not(span[data-role]) {
   font-style:italic;
   font-size:15px;
   color:#3ca0cb;
}

#comediens .tab div {
   padding:3px 12px;
   box-sizing:border-box;
   cursor:pointer;
}

#comediens .titre-colonne {
   width:100%;
   line-height:32px;
   font-weight:500;
   text-align:center;
   color:#fff;
   background-color:#2c2c2c;
}

#comediens .titre-colonne-2,
#comediens .titre-colonne-3 {
   max-width:46%;
   border-bottom:1px solid #a7a7a7;
   border-left:1px solid #a7a7a7;
   border-right:1px solid #a7a7a7;
   box-sizing:border-box;
}

#comediens .titre-colonne-3 {
   border-left:0;
}

#comediens .titre-colonne-1 {
   max-width:8%;
   border-bottom:1px solid #a7a7a7;
   box-sizing:border-box;
}

#comediens .id-acteur {
   width:100%;
   max-width:8%;
   text-align:center;
   border-bottom:1px solid #a7a7a7;
   border-left:1px solid #a7a7a7;
   box-sizing:border-box;
}

#comediens .role {
   width:100%;
   max-width:46%;
   border-bottom:1px solid #a7a7a7;
   border-left:1px solid #a7a7a7;
   box-sizing:border-box;
}

#comediens .nom {
   width:100%;
   max-width:46%;
   border-right:1px solid #a7a7a7;
   border-bottom:1px solid #a7a7a7;
   border-left:1px solid #a7a7a7;
   box-sizing:border-box;
}

#comediens .col-2-droite .fenetre {
   position:relative;
   width:100%;
   opacity:1;
   top:unset;
   left:unset;
   height:auto;
   transform:unset;
   background-color:unset;
   box-shadow:none;
   transition:none;
   z-index:unset;
}

#comediens .col-2-droite label {
   color:#422c58;
}

#comediens .col-2-droite label:first-of-type {
   margin-top:0;
}

#comediens .col-2-droite label:first-of-type {
   margin-top:0;
}

#comediens #accessoires-associes,
#comediens #vehicules-associes {
   margin-top:20px;
}

#comediens #accessoires-associes .tab-contenant,
#comediens #vehicules-associes .tab-contenant {
   border-right:0;
   border-left:0;
   padding-left:0;
}

#comediens #accessoires-associes div,
#comediens #vehicules-associes div {
   padding-left:12px;
   box-sizing:border-box;
}

#comediens #accessoires-associes span,
#comediens #vehicules-associes span {
   font-size:13px;
   font-style:normal;
   color:#000;
   padding-right:12px;
   box-sizing:border-box;
   float:right;
}

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

.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-contenant div:last-of-type {
   border-bottom:0;
}

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

.boite-contenant {
   max-width:400px;
   width:100%;
   margin-top:10px;
   padding-left:30px;
   box-sizing:content-box;
   float:left;
}

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

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

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

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

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

.x-boite {
   display:block;
   position:relative;
   max-width:7%;
   width:100%;
   padding:3px 12px;
   box-sizing:border-box;
   color:red;
   cursor:pointer;
   float:left;
}

#titre-checkbox {
   margin-top:-26px;
   margin-left:263px;
   font-weight:500;
   text-align:center;
   color:#422c58;
}

#personnel #accessoires .titre,
#personnel #vehicules .titre {
   padding-bottom:40px;
   box-sizing:border-box;
}

#personnel #accessoires .rechercher input,
#personnel #vehicules .rechercher input {
   float:left;
}

#personnel #accessoires .rechercher input[name="rechercher-accessoires"],
#personnel #vehicules .rechercher input[name="rechercher-vehicules"] {
   max-width:300px;
}

#personnel #accessoires .rechercher input[type="submit"],
#personnel #vehicules .rechercher input[type="submit"] {
   margin-left:20px;
   padding:3px 35px;
   font-size:16px;
   line-height:20px;
}

#personnel #accessoires .rechercher input[type="submit"]:,
#personnel #vehicules .rechercher input[type="submit"] {
   margin-left:20px;
   padding:3px 35px;
   font-size:15px;
   line-height:20px;
}

#personnel #accessoires .fenetre-contenant,
#personnel #vehicules .fenetre-contenant {
   max-width:300px;
}

#personnel #accessoires .fenetre-contenant input[type="checkbox"],
#personnel #vehicules .fenetre-contenant input[type="checkbox"] {
   margin-right:12px;
   float:left;
}

#personnel #accessoires .lien,
#personnel #vehicules .lien {
   margin-top:40px;
}

#personnel #accessoires .lien a,
#personnel #vehicules .lien a {
   display:block;
   text-decoration:none;
}

.accordeon {
   overflow:hidden;
   box-sizing:border-box;
   margin-top:10px;
   max-height:0;
   transition:max-height 0.2s ease;
   background-color:#F1EDF5;
}

.accordeon .notes {
   margin-top:10px;
   padding:8px 10px;
   border:1px solid rgb(204, 204, 204);
   background-color:#ffffe7;
}

.accordeon .notes .administrateur {
   font-style:normal!important;
   color:#000!important;
}

.accordeon .notes .note {
   margin-bottom:10px;
}

.accordeon .notes .note:last-of-type {
   margin-bottom:0;
}

.accordeon .notes .note:not(:first-of-type)::before {
   display:inline-block;
   content:"";
   height:1px;
   width:100%;
   margin-bottom:10px;
   background-color:#ccc;
}

.accordeon .date {
   width:unset;
   font-weight:500;
   color:#C26E17;
   margin-bottom:10px;
   float:left;
}

.accordeon .contenu {
   display:block;
   clear:both;
}

#personnel .galerie {
   display:grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   max-width:calc(4 * 187px + 4 * 1rem);
   grid-gap:16px;
   padding:16px;
   background-color:#F0F0F0;
}

#personnel .galerie a {
   text-decoration:none;
}

#personnel .galerie .image {
   position:relative;
   height:120px;
   background-size:cover;
   background-position:center;
   background-repeat:no-repeat;
   border:1px solid #a7a7a7;
   transition:0.2s;
}

#personnel .galerie .image:hover {
   background-color:rgba(0,0,0,0.5);
   background-blend-mode:color;
   transition:0.2s;
}

#personnel .galerie .image:hover > .titre {
   opacity:1;
   visibility:visible;
   transition:0.2s;
}

#personnel .galerie .titre {
   display:block;
   position:relative;
   width:88%;
   padding:12px 20px;
   box-sizing:border-box;
   margin:0 auto;
   top:50%;
   transform:translateY(-50%);
   font-size:14px;
   line-height:18px;
   text-align:center;
   color:#000!important;
   word-wrap:break-word;
   border-radius:20px;
   visibility:hidden;
   opacity:0;
   background-color:rgba(255,255,255,0.9);
}

.recipient-recherche {
   position:relative;
   top:-1px;
   left:0;
   width:100%;
   max-width:49.5%;
   height:auto;
   max-height:0;
   font-size:16px;
   height:30px;
   color:#000;
   padding:3px 12px;
   border:1px solid #929292;
   box-sizing:border-box;
   overflow:hidden;
   opacity:0;
   visibility:hidden;
   background-color:#f8f0ff;
   cursor:pointer;
   transition:var(--menuTransition);
   z-index:12;
}

.recipient-recherche:hover {
   background-color:rgb(169, 140, 194)!important;
}

button[name="effacer_agent"] {
   display:none;
   max-width:123px!important;
   margin:0 0 0 1%!important;
   padding:6px 35px 5px;
   float:left;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Paramètres
-------------------------------------------------------------
-----------------------------------------------------------*/

main[id="parametres"] {
   position:absolute;
   width:100%;
   height:100%;
   margin:30px auto 0;
   background-color:#f5f5f5;
}

#parametres form {
   display:table;
   position:relative;
   width:100%;
   max-width:90%;
   height:auto;
   padding:30px;
   margin:30px auto 0;
   background-color:#fff;
   clear:both;
}

#parametres label {
   display:block;
   margin-top:20px;
   margin-bottom:6px;
   color:#422c58;
   user-select:none;
}

.encadre-info {
   max-width:360px;
   padding:9px 12px;
   margin-top:10px;
   margin-bottom:12px;
   box-sizing:border-box;
   font-size:15px;
   line-height:17px;
   border:1px solid #DEDEDE;
   background-color:#ffffe7;
}

#parametres input[type="radio"] {
   margin-left:24px;
   float:left;
}

#parametres input[type="radio"]:first-of-type {
   margin-left:0;
}

#parametres span {
   float:left;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Index
-------------------------------------------------------------
-----------------------------------------------------------*/

#index .col-2:first-of-type {
   height:100vh;
   background-color:#422c58;
}

#index .col-2:last-of-type {
   position:relative;
   display:table;
}

#index button {
   position:absolute;
   top:43%;
   left:50%;
   transform:translateX(-50%);
}

#index button[name="se_connecter"] {
   max-width:190px;
   max-height:43px;
}

#index button[name="s_inscrire"] {
   max-width:190px;
   max-height:43px;
   margin-top:80px;
   background-color:#000;
   transition:var(--boutonTransition);
}

#index button[name="s_inscrire"]:hover,
#index button[name="s_inscrire"]:focus {
   background-color:#494949;
   transition:var(--boutonTransition);
}

.inscription-1 {
   display:block;
   transition:var(--menuTransition);
}

.inscription-2 {
   display:none;
   opacity:0;
   transition:var(--menuTransition);
}

#index form {
   padding-top:20px;
}

#index input {
   max-width:300px;
   width:100%;
   font-size:18px;
   line-height:30px;
}

#index .inscription-1 button,
#index .inscription-2 button {
   position:relative;
   top:unset;
   left:unset;
   transform:unset;
   margin-top:40px;
}

#form-activation h3 {
   text-align:center;
}

#form-activation input {
   font-size:20px;
   line-height:40px;
   max-width:84px;
   margin:0 auto;
}

#form-activation button {
   position:relative;
   top:unset;
   left:unset;
   transform:unset;
   margin:20px auto 0;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
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;
}

header .ligne {
   display:block;
   position:absolute;
   top:11px;
   width:100%;
   height:1px;
   background-color:#9e9e9e;
}

nav button[name="sauvegarder"] {
   float:right;
   padding:11px 43px 13px;
}

.titre-menu {
   display:flex;
   align-items:center;
}

.titre-nav-tableau {
   text-align:center;
   padding:0 10px;
   margin-top:1px;
   margin-bottom:7px;
   font-weight:700;
}

.nav-bloc {
   display:grid;
   font-size:13px;
   align-items:center;
}

.nav-bloc div {
   margin-bottom:1.5px;
}

.nav-bloc button {
   display:block;
   width:30px;
   height:30px;
   color:#000;
   padding:0;
   border-radius:0;
   background-color:#eee;
}

.nav-bloc button:hover {
   background-color:#d7d7d7;
   transition:var(--boutonTransition);
}

input[name="hauteur_colonne"],
input[name="largeur_colonne"],
input[name="taille_police"],
input[name="hauteur_ligne"],
input[name="largeur_tableau"] {
   width:70px;
}

.nav-separation {
   width:12px;
}

.nav-separation-mince {
   width:8px;
}

#bouton-background-color,
#bouton-texte-color {
   cursor:pointer;
}

#bouton-background-color input,
#bouton-texte-color input {
   background:url("images/background-color.png");
   height:30px;
   width:30px;
   border:0;
   outline:none;
   color:rgba(255,255,255,0);
   cursor:pointer;
}

.clr-field button {
   top:unset!important;
   bottom:-20px!important;
   height:10px!important;
   border-radius:0!important;
}

#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:last-child {
   float:right;
}

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

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

#navigation-pages ul li ul {
   display:block;
   visibility:hidden;
   opacity:0;
   position:absolute;
   margin-left:-20px;
   background-color:#61526f;
   transition:var(--menuTransition);
}

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

#navigation-pages ul li ul li a {
   display:block;
   font-weight:500;
   color:#fff;
   padding:3px 20px;
   transition:var(--navTransition);
}

#navigation-pages ul li ul li a:hover,
#navigation-pages ul li ul li a:focus {
   background-color:#958e9c;
   transition:var(--menuTransition);
}

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

#navigation-pages ul li ul li:first-child a {
   padding-top:8px;
}

#navigation-pages ul li ul li:last-child a {
   padding-bottom:8px;
}

#navigation-pages .menu-deroulant:hover > ul {
   visibility:visible;
   opacity:1;
   transition:var(--menuTransition);
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Menus gauche
-------------------------------------------------------------
-----------------------------------------------------------*/

#menus-gauche {
   display:block;
   position:fixed;
   width:100%;
   height:auto;
   max-width:280px;
   padding:30px 40px;
   box-sizing:border-box;
   border-top-right-radius:20px;
   border-bottom-right-radius:20px;
   border-top-left-radius:20px;
   border-bottom-left-radius:20px;
   box-shadow:5px 5px 15px #dfdfdf;
   background-color:#f7f7f7;
   z-index:7;
   transition:var(--menuTransition);
}

#menus-gauche .glisser-deposer:hover,
#menus-gauche .glisser-deposer:focus {
   background-color:#d8d8d8;
}

#menus-gauche .glisser-deposer {
   width:100%;
   height:auto;
   margin-bottom:6px;
   padding:0 8px;
   box-sizing:border-box;
   font-size:18px;
   text-align:center;
   line-height:36px;
   border-radius:5px;
   border:2px dashed #b5b5b5;
   user-select:none;
   -webkit-user-select:none;
   cursor:pointer;
   background-color:#fff;
}

#menus-gauche .glisser-deposer.tableau {
   border:1px solid #b5b5b5;
}

#menu-principal {
   display:block;
   transition:var(--menuTransition);
}

#menu-principal .images:hover,
#menu-principal .images:focus {
   background-color:#d8d8d8;
}

#menu-principal .images {
   width:100%;
   height:auto;
   margin-bottom:6px;
   padding:0 8px;
   box-sizing:border-box;
   font-size:18px;
   text-align:center;
   line-height:36px;
   border-radius:5px;
   border:2px dashed #b5b5b5;
   user-select:none;
   -webkit-user-select:none;
   cursor:pointer;
   background-color:#fff;
}

.bouton-centre {
   text-align:center;
   margin-bottom:40px;
   cursor:pointer;
}

.bouton-centre img {
   margin:0 auto 11px auto;
}

.bouton-centre .span-align {
   display:block;
}

.bouton-nouveau-bloc:hover > .gli-dep {
   background-color:#d8d8d8;
}

.bouton-nouveau-bloc .gli-dep {
   display:inline-block;
   vertical-align:middle;
   width:40px;
   height:20px;
   margin-left:8px;
   border-radius:5px;
   border:2px dashed #b5b5b5;
   background-color:#fff;
}

#menu-nouveaux-blocs,
#menu-galerie-images {
   display:none;
   opacity:0;
   transition:var(--menuTransition);
}

#menu-nouveaux-blocs .col-2 {
   padding:0 4px;
}

#menu-nouveaux-blocs .col-2:hover {
   background-color:#d8d8d8;
}

#menu-nouveaux-blocs .col-2:first-child {
   margin-right:5px;
}

#menu-nouveaux-blocs span {
   display:inline-block;
   position:relative;
   top:-1.5px;
   margin:0 5px;
}

#menu-galerie-images .galerie {
   display:inline-grid;
   grid-template-columns:1fr 1fr;
   align-items:center;
   width:100%;
   margin-bottom:30px;
}

#menu-galerie-images .galerie img {
   display:block;
   max-width:82px;
   max-height:80px;
   height:auto;
   margin:5px auto;
   padding:4px 12px;
   box-sizing:border-box;
   border-radius:5px;
   border:2px dashed #dedede;
   cursor:pointer;
}

#image-surface {
   display:block;
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:red;
   z-index:4;
}

#camouflage-colonnes {
   position:absolute;
   display:block;
   width:200px;
   height:132px;
   background-color:rgba(247,247,247, 0.75);
   visibility:hidden;
   z-index:6;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Feuille de service & bloc vide
-------------------------------------------------------------
-----------------------------------------------------------*/

#feuille-de-service {
   position:relative;
   left:30%;
   max-width:1020px;
   width:100%;
   height:1680px;
   padding:20px;
   box-sizing:border-box;
   box-shadow:0 0 30px #cbd8df;
   transition:0.18s;
   z-index:2;
}

#feuille-de-service #menu-bloc {
   display:none;
   position:absolute;
   top:0;
   right:-47px;
   left:unset;
   width:35px;
   height:100px;
   border-radius:15px;
   background-color:#f7f7f7;
   box-shadow:3px 3px 8px 2px #b4b4b4;
   transition:0.4s;
}

#feuille-de-service #menu-bloc .container {
   display:block;
   position:relative;
   width:100%;
   top:20px;
   padding:0;
}

#feuille-de-service #menu-bloc i {
   display:block;
   text-align:center;
   margin:0 auto 20px;
   cursor:pointer;
}

#feuille-de-service .fbloc,
#bloc-vide .fbloc {
   position:relative;
   margin-top:-1px;
   border:1px solid #cacaca;
   box-sizing:content-box;
   z-index:unset;
}

#feuille-de-service .fbloc .text {
   height:auto;
   padding:20px 0;
   box-sizing:border-box;
}

#feuille-de-service .fbloc.bloc-actif,
#bloc-vide .fbloc.bloc-actif {
   border:2px solid #37b3ff!important;
   box-shadow:0px 0px 10px #85d2ed;
   transition:0.05s!important;
   z-index:5;
}

#feuille-de-service .fbloc.element-sans-bordure,
#bloc-vide .fbloc.element-sans-bordure {
   border:1px solid transparent;
}

#feuille-de-service .col.col-sans-bordure,
#bloc-vide .col.col-sans-bordure {
   border:3px dashed transparent;
}

.fbloc div[contenteditable="true"] {
   display:block;
   height:auto;
   padding:4px 8px;
   box-sizing:border-box;
   line-height:17px;
}

[contenteditable=true]:empty:before{
   content:attr(placeholder);
   color:#a9a9a9;
   font-style:italic;
   pointer-events:none;
   display:block;
}

.fbloc div[contenteditable="true"] div {
   display:block;
}

#feuille-de-service .fcol,
#bloc-vide .fcol {
   position:relative;
   z-index:4;
}

.fbloc .contenu,
.fcol .contenu {
   display:none;
}

.fbloc span {
   display:block;
   width:100%;
}

.fbloc[name="separateur"],
.fbloc[name="separateur"] {
   display:block;
   max-width:100%;
}

#feuille-de-service .fbloc[name="separateur"] .contenu,
#bloc-vide .fbloc[name="separateur"] .contenu {
   display:flex!important;
   justify-content:center;
   align-items:center;
   width:100%;
   height:40px;
}

#feuille-de-service .fbloc[name="separateur"] div[contenteditable="true"],
#bloc-vide .fbloc[name="separateur"] div[contenteditable="true"] {
   font-size:18px;
   text-align:center;
   width:100%;
   padding:0 8px;
   height:auto;
}

#feuille-de-service .fbloc[name="separateur"] div[contenteditable="true"]::before,
#bloc-vide .fbloc[name="separateur"] div[contenteditable="true"]::before {
   content:"";
   height:0;
   width:0;
   color:unset;
   font-style:unset;
   pointer-events:unset;
   display:unset;
}

#feuille-de-service .separateur-border-bottom,
#bloc-vide .separateur-border-bottom {
   display:block;
   opacity:0;
   position:absolute;
   width:100%;
   height:6px;
   bottom: 0;
   margin-bottom:-3px;
   transition:0.15s;
}

#feuille-de-service .separateur-border-bottom .ligne,
#bloc-vide .separateur-border-bottom .ligne {
   display:block;
   position:relative;
   width:100%;
   height:4px;
   bottom:-1px;
   box-shadow:0 0 3px #fff;
   background-color:#000;
}

.fcol .col-2,
.fcol .col-3,
.fcol .col-4,
.fcol .col-5 {
   border:3px dashed #cacaca;
   box-sizing:border-box;
   transition:0.2s;
}

.fcol .col-2:hover,
.fcol .col-3:hover,
.fcol .col-4:hover,
.fcol .col-5:hover {
   border:3px dashed #93c1f5;
   box-sizing:border-box;
   transition:0.1s;
}

.fcol .col-2.actif,
.fcol .col-3.actif,
.fcol .col-4.actif,
.fcol .col-5.actif {
   border:3px dashed #3782d8;
   box-sizing:border-box;
   z-index:5;
   transition:0.1s;
}

.fcol .col-2.actif-parent,
.fcol .col-3.actif-parent,
.fcol .col-4.actif-parent,
.fcol .col-5.actif-parent {
   box-shadow:0 0 0 3px #3782d8;
   border:0!important;
}

.fcol .col-2:hover.actif,
.fcol .col-3:hover.actif,
.fcol .col-4:hover.actif,
.fcol .col-5:hover.actif {
   border:3px dashed #3782d8;
}

.fcol .col-2:first-of-type {
   max-width:50%;
   margin-right:10px;
   max-height:60px;
   width:100%;
}

.fcol .col-2:last-of-type {
   max-width:50%;
   margin-left:10px;
   height:60px;
   width:100%;
}

.fcol .col-3:first-of-type {
   max-width:33.333%;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-3:nth-child(2) {
   max-width:33.333%;
   margin-left:10px;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-3:last-of-type {
   max-width:33.333%;
   margin-left:10px;
   height:60px;
   width:100%;
}

.fcol .col-4:first-of-type {
   max-width:25%;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-4:nth-child(2),
.fcol .col-4:nth-child(3) {
   max-width:25%;
   margin-left:10px;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-4:last-of-type {
   max-width:25%;
   margin-left:10px;
   height:60px;
   width:100%;
}

.fcol .col-5:first-of-type {
   max-width:20%;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-5:nth-child(2),
.fcol .col-5:nth-child(3),
.fcol .col-5:nth-child(4) {
   max-width:20%;
   margin-left:10px;
   margin-right:10px;
   height:60px;
   width:100%;
}

.fcol .col-5:last-of-type {
   max-width:20%;
   margin-left:10px;
   height:60px;
   width:100%;
}

#nouveau-bloc {
   position:absolute;
   display:none;
   max-width:1200px;
   width:100%;
   height:100%;
   top:0;
   overflow:hidden;
   z-index:6;
}

#nouveau-bloc input[type="text"] {
   font-size:28px;
   padding:4px 6px;
}

#menu-haut-feuille {
   position:relative;
   margin-left:20px;
   max-width:1020px;
   width:100%;
   height:auto;
   z-index:5;
}

#menu-haut-feuille .col-2:last-of-type {
   margin-top:8px;
}

#menu-haut-feuille .col-2:last-of-type img {
   float:right;
   margin:4px 8px 0 0;
   cursor:pointer;
}

#menu-haut-feuille .supprimer {
   display:block;
   width:24px;
   height:24px;
   font-size:20px;
   text-align:center;
   color:#c40303;
   float:right;
   cursor:pointer;
   transition:var(--menuTransition);
}

#menu-haut-feuille .supprimer:hover {
   background-color:#ccc;
}

#menu-haut-feuille .supprimer:active {
   background-color:#fff;
   transition:0.1s;
}

#bouton-dashed {
   display:block;
   height:20px;
   width:20px;
   margin:4px 0 0 10px;
   border:2px dashed #000;
   float:right;
   clear:both;
   background-color:#fff;
   cursor:pointer;
}

#bouton-dashed.actif {
   background-color:#c4c4c4;
}

#bloc-vide {
   display:block;
   position:relative;
   top:34px;
   max-width:1020px;
   width:100%;
   height:180px;
   max-height:180px;
   padding:20px;
   box-sizing:border-box;
   margin-left:20px;
   box-shadow:0 0 30px #cbd8df;
   background-color:#fff;
   transition:max-height 0.3s ease-in-out;
   z-index:4;
}

#nouveau-bloc button[type='submit'] {
   position:absolute;
   bottom:-64px;
   opacity:0.3;
   cursor:not-allowed;
   z-index:4;
}

#background-nouveau-bloc {
   display:block;
   position:fixed;
   opacity:0;
   width:0;
   height:0;
   top:50%;
   left:50%;
   transform:translateY(-50%);
   transform:translateX(-50%);
   background-color:#ececec;
   transition:var(--menuTransition);
   z-index:3;
}

#images-suivant,
#images-precedent {
   min-width:50%;
   max-width:50%;
   width:100%;
   cursor:pointer;
}

#images-precedent span {
   float:left;
}

#images-suivant span {
   float:right;
}

#supprimer-image {
   width:100%;
   font-size:13px;
   color:#3ca0cb;
   text-align:center;
   cursor:pointer;
}

.div-image-conteneur {
   display:block;
   position:fixed;
   max-width:100%;
   height:auto;
   padding:8px;
   box-sizing:border-box;
   cursor:pointer;
   background-color:rgba(255,255,255,0);
   z-index:10;
}

.div-image {
   display:block;
   position:relative;
}

.div-image div {
   visibility:hidden;
   opacity:0;
   transition:0.2s;
}

.x-image {
   display:block;
   position:absolute;
   right:10px;
   top:7px;
   padding:4px 7px 5px;
   box-sizing:border-box;
   font-size:16px;
   line-height:16px;
   color:#000;
   box-shadow: 3px 3px 7px #dfdfdf;
   background-color:#fff;
}

#erreur-feuille,
#erreur-nouveau-bloc {
   position:absolute;
   top:-30px;
   color:#3ca0cb;
   z-index:8;
}

#background-glisser-deposer {
   display:block;
   position:fixed;
   opacity:0;
   width:0;
   height:0;
   top:0;
   left:50%;
   transform:translate(-50%);
   background-color:#ececec;
   transition:var(--menuTransition2);
   z-index:3;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Éléments Javascript
-------------------------------------------------------------
-----------------------------------------------------------*/

.fenetre {
   display:block;
   position:fixed;
   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:var(--menuTransition);
   z-index:12;
}

.fenetre .container {
   margin-top:40px;
   overflow:visible;
}

.fenetre h2 {
   color:#000;
}

.fenetre button {
   margin:40px auto;
   max-width:188px;
   width:100%;
}

.fenetre form {
   margin-top:20px;
}

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

.fenetre input {
   border:1px solid #898989;
   line-height:30px;
   transition:var(--boutonTransition);
}

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

.fenetre input[type="radio"] {
   width:unset;
   margin:0 10px 0 30px;
   float:left;
}

.fenetre input[type="radio"]:first-of-type {
   margin:0 10px 0 0;
}

.fenetre input[type="number"] {
   max-width:60px;
}

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

.fenetre button[name="generer_tableau"] {
   max-width:230px;
}

.fenetre #generer-tableau-2 div {
   display:flex!important;
}

.fenetre #generer-tableau-2 label {
   margin-left:8px;
}

.fenetre .fermer {
   position:absolute;
   top:20px;
   right:30px;
   font-size:18px;
   font-weight:700;
   cursor:pointer;
}

.fenetre #generer-tableau label {
   margin-top:20px;
   margin-bottom:10px;
}

.separateur-fenetre {
   height:1px;
   margin:40px 0;
   background-color:#d7d7d7;
}

.col-scene-drop {
   display:block;
   position:relative;
   font-size:18px;
   line-height:24px;
   color:#422c58;
   user-select:none;
}

.col-scene-drop div {
   clear:both;
}

.col-scene-drop input {
   height:24px;
   max-width:95%;
   line-height:22px;
   font-size:16px!important;
   border:1px solid #cdcdcd;
   float:right;
   transition:max-height 0.8s ease;
}

.col-scene-drop .wrapper {
   display:block;
   position:relative;
   height:24px;
   margin-bottom:4px;
}

.col-scene-drop .wrapper:first-of-type {
   margin-top:10px;
}

.col-scene-drop .wrapper:last-of-type {
   margin-bottom:15px;
}

.x-scene-drop {
   display:block;
   position:absolute;
   right:8px;
   margin:0;
   font-size:16px;
   line-height:unset;
   color:#525252;
   border:0;
   cursor:pointer;
   z-index:10;
}

.no-role-scene-drop {
   display:block;
   position:absolute;
   left:0;
   margin:0;
   font-size:12px;
   line-height:unset;
   color:#000;
   border:0;
   z-index:10;
}

#modifier-scene .input-role-scene-drop {
   max-width:90%;
}

.col-scene-drop .drop-plus {
   display:inline-block;
   margin-left:16px;
   height:18px;
   width:18px;
   line-height:18px;
   text-align:center;
   border:1px solid #d7d7d7;
   cursor:pointer;
}

.col-scene-drop div[data-i] .recipient {
   display:none;
   position:relative;
   top:-1px;
   left:0;
   width:100%;
   max-width:95%;
   height:auto;
   font-size:16px;
   color:#474747;
   border:1px solid #929292;
   box-sizing:border-box;
   float:right;
   opacity:0;
   visibility:hidden;
   background-color:#f8f0ff;
   transition:var(--menuTransition);
   z-index:12;
}

div[data-categorie="roles"] .recipient {
   max-width:90%!important;
}

.col-scene-drop div[data-i] .recipient span {
   display:block;
   width:100%;
   padding:3px 12px;
   box-sizing:border-box;
   cursor:pointer;
   color:#474747;
}

.col-scene-drop div[data-i] .recipient span:hover {
   cursor:pointer;
   color:#000;
   background-color:#a98cc2;
}

.recipient .marqueur,
.fenetre-contenant .marqueur {
   color:#000!important;
   background-color:#a98cc2;
}

#modifier #supprimer-scene {
   text-align:right;
   margin-bottom:40px;
}

#connexion form {
   width:100%;
   padding:40px 110px;
   box-sizing:border-box;
   margin-bottom:60px;
}

#connexion input {
   margin-top:7px;
   margin-bottom:18px;
   max-width:unset;
   border:1px solid #9a9a9a;
}

#connexion input:focus {
   border:1px solid #d9d9d9;
   outline:none;
   box-shadow:0 0 5px #7340a2;
}

#connexion input:last-of-type {
   margin-bottom:0;
}

#connexion input[type="submit"] {
   display:block;
   margin-top:28px;
   font-size:18px;
   font-weight:500;
   color:#fff;
   padding:6px 35px 8px;
   border:0;
   border-radius:6px;
   background-color:#7340a2;
   cursor:pointer;
   transition:var(--boutonTransition);
}

#connexion input[type="submit"]:hover,
#connexion input[type="submit"]:focus {
   background-color:#4d2a6d;
   transition:var(--boutonTransition);
}

.background-nouvelle-fenetre {
   display:block;
   position:fixed;
   opacity:0;
   width:0;
   height:0;
   top:50%;
   left:50%;
   transform:translateY(-50%);
   transform:translateX(-50%);
   background-color:#ececec;
   transition:var(--menuTransition);
   z-index:11;
}

#nouveau-tableau {
   display:none;
}

#nouveau-tableau .container div {
   display:table;
   width:100%;
   margin:12px 0;
}

#nouveau-tableau #generer-tableau,
#nouveau-tableau #generer-tableau-2 {
   display:none;
}