* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100dvh;
    padding: 0;
    overflow: hidden !important;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    overflow: hidden;
    background-color: #ffffff;
}

#conteneur {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

#connecteurs {
    z-index: 0;
    overflow: visible;
}

.grabbing, .moving {
    cursor: grabbing !important;
}





.zone {
    position: absolute;
    padding: 0.5em;
    border-radius: 1em;
    text-align: center;
    background-color: white;
    white-space: nowrap;
    min-width: 5em;
    user-select: none;
    z-index: 1;
}

body:not(.lock) .zone:not(#conteneurTitre):hover {
    cursor: grab;
}

body:not(.lock) .zone:hover .zoneTexte {
    background-color: #ffffff;
}

.zone.moving button {
    display: none !important;
}

.zone button {
    display: none;
}

body:not(.lock) .zone:hover button {
    display: unset;
}

.zoneTexte {
    border-radius: 0.5em;
    cursor: text;
}

body.lock .zoneTexte {
    cursor: default;
    pointer-events: none;
}

.zone.suppr, .zone.suppr .zoneTexte  {
    background-color: red !important;

}

.zone.selected {
    box-shadow: 0px 0px 0px 2px blue;
}

.placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: rgba(180, 180, 180, 0.795);
    pointer-events: none;
    width: 100%;
}

body.lock .placeholder {
    position: static;
}

   
#conteneurTitre {
    position: absolute;
    border-radius: 2em;
    text-align: center;
    top: 50%;
    padding: 0.5em;
    left: 50%;
    min-width: 5em;
    min-height: 1.5em;
    transform: translateX(-50%) translateY(-50%);
    background-color: bisque;
    font-size: 3em;
    user-select: none;
}

.boutonAjouter {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(images/boutonplus.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

p {
    margin: 0;
}

.zone.n2 {
    font-size: 2em;
}

.zone.n3 {
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
}

.n2:nth-of-type(10n+1) {
    background-color: #fde2e2; /* pastel rose clair */
}

.n2:nth-of-type(10n+2) {
    background-color: #e2f0cb; /* vert pomme pastel */
}

.n2:nth-of-type(10n+3) {
    background-color: #d0f4de; /* vert menthe très clair */
}

.n2:nth-of-type(10n+4) {
    background-color: #fef6c9; /* jaune clair pastel */
}

.n2:nth-of-type(10n+5) {
    background-color: #e0e4ff; /* bleu lavande */
}

.n2:nth-of-type(10n+6) {
    background-color: #ffe0f0; /* rose bonbon clair */
}

.n2:nth-of-type(10n+7) {
    background-color: #c8f1ff; /* bleu ciel pastel */
}

.n2:nth-of-type(10n+8) {
    background-color: #f3e5f5; /* violet lavande clair */
}

.n2:nth-of-type(10n+9) {
    background-color: #fff0d6; /* orange abricot pastel */
}

.n2:nth-of-type(10n) {
    background-color: #dcf8e8; /* vert très pâle */
}



button {
    user-select: none !important;
}

#ecouter {
    position: fixed;
    margin-top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 10dvh;
    height: 10dvh;
    background-color: rgb(125, 236, 255);
    border-radius: 0 0% 50% 50%;
    background-image: url(images/ecouter.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    z-index: 1000000;
}


#corbeille {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 10dvh;
    height: 10dvh;
    background-color: rgb(231, 148, 148);
    border-radius: 50% 50% 0 0%;
    background-image: url(images/corbeille.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    z-index: 1000000;

}

#photo {
    position: fixed;
    top: 5px;
    left: 5px;
    width: 10dvh;
    height: 10dvh;
    background-image: url(images/photo.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000000;
}

#cadenas {
    position: fixed;
    top: 5px;
    right: 5px;
    width: 10dvh;
    height: 10dvh;
    background-image: url(images/cadenas.svg);
    background-size: auto 200%;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: 1000000;
}

body.lock #cadenas {
    background-position: top;
}

#ouvrir {
    position: fixed;
    bottom: 5px;
    left: 5px;
    width: 10dvh;
    height: 10dvh;
    background-image: url(images/ouvrir.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000000;
}

#enregistrer {
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 10dvh;
    height: 10dvh;
    background-image: url(images/enregistrer.svg);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000000;
}

#ecouter:hover, #corbeille:hover, #photo:hover {
    filter: brightness(1.2);
}

.hide {
    display: none;
}