@font-face {
  font-family: 'IndieFlower';
  src: url(polices/IndieFlower.ttf)
}

@font-face {
    font-family: 'FuntypeRegular';
    src: url('polices/Funtype.ttf')
}

@font-face {
    font-family: 'ThatNogoFontCasual'; 
    src: url('polices/ThatNogoFontCasual.ttf')
}

@font-face {
    font-family: 'Kaph'; 
    src: url('polices/Kaph-Regular.ttf')
}

@font-face {
    font-family: 'Segment'; 
    src: url('polices/Segment14.otf')
}

@font-face {
    font-family: 'Teleindicadore'; 
    src: url('polices/Teleindicadores1.ttf')
}


body,html {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    user-select: none;
    background-color: #323131;
}

body {
    font-size: 0;
}

#barre_outils {
    height: 50px;
    background-color: #323131;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre pour effet glossy */
    padding: 5px; /* Espace intérieur pour les éléments de la barre d'outils */
    display: flex;
    overflow-y: visible;
    /* justify-content: space-around; /* Pour répartir les éléments horizontalement */
    align-items: center;
    width: 100%;
}


#barre_outils span {
    margin-left: 20px;
    height: 36px;
    padding: 5px;
    border: 0px;
    display: inherit;
    justify-content: center;
    overflow-y: visible;
}

#barre_outils button, #barre_outils input, #barre_outils select {
    margin-left: 5px;
    background-color: #fff;
}

#barre_outils button:hover, #barre_outils input:hover, #barre_outils select:hover {
    margin-left: 5px;
    background-color: #fbff00;
}

button:first-child {
    margin-left: 0px !important;
}

#barre_outils span:first-child {
    margin-left: 0;
}

#galerie {
    height: calc(100% - 80px);
    padding-top: 20px;
    width: 15%;
    margin: 0;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    overflow-y: hidden;
    background-color: #323131;



}

#galerie_images {
    padding-top: 10px;
    padding-bottom: 10px;
    overflow-y: scroll;
    background-color: #ccd7eb;
}


#bd {
    height: calc(100% - 70px);
    width: calc(85% - 10px);
    margin: 0;
    padding: 5px;
    display: inline-block;
    overflow-y: scroll;
    overflow-x: visible !important;
    vertical-align: top;
    position: relative;
    user-select: none;
    background-color: #ffffff;
    border-radius: 10px 0px 0px 0px;
}

.vignette {
    display: inline-block;
    position: relative;
    height: calc(100% - 16px);
    border: 3px solid rgb(0, 0, 0);
    background-color: #fff;
    margin: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 100%;
    margin-bottom: 10px; 
    overflow: hidden;
}

.bande {
    position: relative;
}

.bouton_plus {
    margin: 10px;
    padding: 10px;
    width: 50px;
    height: 50px;
    font-size: 25px;
    border-radius: 50%;
}

#bouton_moins {display: none;}

.apercu {
    max-width: 90%;
    max-height: 50%;
    margin-bottom: 10px;
    cursor: grab;
}

#galeries {
    margin-bottom: 5px;
    background-color: #ffffff;
    border-radius: 5px;
    border: 0px;
}

#themes {
    background-color: #ffffff;
    border-radius: 5px;
    border: 0px;


}

.objet {
    position: absolute;
    pointer-events:none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.objet .cadre {   
    user-select: none;
}

.cadre.rotation {
    border: 1px black dotted;
}

.cadre img {
    position: static;
}





img, .handle {
    pointer-events:all;
}

.inversex {
    transform: scaleX(-1);
}

.inversey {
    transform: scaleY(-1);
}


.inversexy {
    transform: scaleX(-1) scaleY(-1);
}

.bulle_editable {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 50px;
}

.conteneur_bulle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}

.bulle_editable p {
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    text-align: center;   
    word-break:break-word;
    margin: 0;
    min-width: 1em;
}


#choix {
    padding : 10px;
    background-color: #ccd7eb;
    border-radius: 10px 10px 0px 0px;



}

#choix select {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    
}

.bouton_outil {
    display: inline-block;
    position: relative;
    height: 36px;
    width: 36px;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 7px;
    border-width: 0px;
    vertical-align: middle;
}

.bouton_outil:hover {
    background-color: yellow;
}

.bouton_outil:disabled::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255,0.7);
}

#bouton_nouveau {
    background-image: url(images/boutons/nouveau.svg);
}
#bouton_ouvrir {
    background-image: url(images/boutons/ouvrir.svg);
}
#bouton_enregistrer{
    background-image: url(images/boutons/enregistrer.svg);

}
#bouton_supprimer {
    background-image: url(images/boutons/supprimer.svg);
}

/* Masquer l'input de type fichier */
input[type="file"] {
    display: none !important;
}

#bouton_image {
    background-image: url(images/boutons/image.svg);
}


#bouton_nouvel_arriere_plan{
    background-image: url(images/boutons/nouvel_arriere_plan.svg);
}


#bouton_a_propos {
    background-image: url(images/boutons/question.svg);
}

#bouton_bulle {
    background-image: url(images/boutons/bulle01.svg);
}
#bouton_pensee {
    background-image: url(images/boutons/bulle02.svg);
}

#bouton_ordi {
    background-image: url(images/boutons/bulle03.svg);
}

#bouton_telephone {
    background-image: url(images/boutons/bulle05.svg);
}

#bouton_colere {
    background-image: url(images/boutons/bulle04.svg);
}

#bouton_onomatopee{
    background-image: url(images/boutons/onomatopee.svg);
    margin-left: 0 !important;
}

#bouton_dupliquer {
    background-image: url(images/boutons/dupliquer.svg);
}

#bouton_miroir {
    background-image: url(images/boutons/miroir.svg);
}

#bouton_miroir_y {
    background-image: url(images/boutons/miroiry.svg);
}

#bouton_ancrer {
    background-image: url(images/boutons/ancre.svg);
    background-size: auto 72px;
    background-position: center 100%;
}

#bouton_back {
    background-image: url(images/boutons/back.svg);
}

#bouton_front {
    background-image: url(images/boutons/front.svg);
}

#bouton_imprimer {
    background-image: url(images/boutons/imprimer.svg);
}

#police_moins {
    background-image: url(images/boutons/police_moins.svg);
}

#police_plus {
    background-image: url(images/boutons/police_plus.svg);
}

#bouton_annuler {
    background-image: url(images/boutons/annuler.svg);
}

#bouton_refaire {
    background-image: url(images/boutons/refaire.svg);
}

#bouton_cadenas {
    background-image: url(images/boutons/cadenas.svg);
    background-size: auto 72px;
    background-position: center 100%;
}

#bouton_titre {
    background-image: url(images/boutons/titre.svg);
}




@media print {

    #barre_outils,#galerie,#bouton_plus,#bouton_moins {
        display: none;
    }

    #bd {
        overflow-x:visible;
        overflow-y:visible;
    }

    .bande {
        width:  80%;
    }

    .vignette {max-width: 30%; max-height: 20%;}

}

.draggable {
    cursor:grab;
}

.dragged {
    cursor:grabbing;
}


.handle {
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 100000;
    background-size: 10px 10px;
    border: 1px solid #086b31;
    background-color: #8af1b5;

   
  }

.bubble .handle, .onomatopee .handle {
    display: none;
}


  .fleche {
    display: none;
    bottom: -40px;
    left: 35px;
    cursor:crosshair;
    transform: translateX(-50%) translateY(50%);
    background-color: #fbff00;
    border: 1px solid #ff8000;

  }

  .rotate {
    display: none;
    top: -40px;
    left: 50%;
    cursor:crosshair;
    transform: translateX(-50%) translateY(50%);
    background-color: #fbff00;
    border: 1px solid #ff8000;
  }


  .coin {
    border: none;
    background-color: transparent;
    background-image: url(images/boutons/resize.svg);
  }


  .reclic .coin {
    background-image: url(images/boutons/rotate.svg);
    cursor: url(images/boutons/roate_curor.png), pointer;
  }


  .rotation .coin {
    display: none;
  }

  .reclic .pas_coin {
    display: none;
  }



  .top-left { top: 0px; left: 0px; cursor: nwse-resize; z-index: 200000;}
  .top-right { top: 0px; right: 0px; cursor: nesw-resize; z-index: 200000;transform:scaleX(-1)}
  .bottom-left { bottom: 0px; left: 0px; cursor: nesw-resize; z-index: 200000;transform: scaleY(-1);}
  .bottom-right { bottom: 0px; right: 0px; cursor: nwse-resize; z-index: 200000; transform: scaleX(-1) scaleY(-1);}


  .top { top: 0px; left: 50%; transform: translateX(-50%); cursor: ns-resize; width: 30px; height:10px; border-radius: 0%;}
  .bottom { bottom: 0px; left: 50%; transform: translateX(-50%); cursor: ns-resize; width: 30px; height:10px; border-radius: 0%; }
  .left { top: 50%; left: 0px; transform: translateY(-50%); cursor: ew-resize; height: 30px; width:10px; border-radius: 0%;}
  .right { top: 50%; right: 0px; transform: translateY(-50%); cursor: ew-resize; height: 30px; width:10px; border-radius: 0%;}



  .bubble .left {
    left: -12px;
  } 

  .bubble .right {
    right: -10px;
  }
  
  .bubble.inversex .left {right: -10px !important; left: 100% !important;}
  .bubble.inversex .right {left: -10px !important; right: 100% !important;}

  .bubble .left, .bubble .right, .bubble .fleche {
    display: block;
  }

  .onomatopee .rotate {
    display: block;
  }

  .objet .rotate {
    top: 20px;
  }


  #police_choix {
    height: 36px;
    width: 100px;
    vertical-align: middle;
    font-size: 20px;
    font-family: 'IndieFlower';
    border-radius: 7px;
    border: 0px;
  }

  #police_taille {
    font-size: 18px;
    width: 2.5em;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    vertical-align: middle;
    height: 36px;
    border: 0px;
    padding: 1px;
    border-radius: 7px;
    color: rgb(55, 55, 181);
  }

.zone_outil {
    display: none;
    z-index: 100000;
    height: 0;
    width: 0;
}


.zone_gauche.inversex {left: 100%;}

.vignette_selectionnee .zone_outil {display: block;}

.vignette_selectionnee .zone_gauche {display: flex;}

.haut button {display: none;}

.background .haut button {display: inline-block;}

.haut .bouton_couleur {display: inline-block;}

.background .haut button.bouton_couleur {display: none;}

.bouton_cartouche {display: inline-block !important;}



.outils_vignette {    
    background-color: rgba(255, 255, 255,0.7);
    display: inline-block;
    border: 1px black solid;
    z-index: 100000;
    cursor: auto;
    padding: 5px;  
}


.haut {
    border-radius: 0px 0px 15px 15px;
    border-top: none;
}

.bas {
    border-radius: 15px 15px 0px 0px;
    border-bottom: none;

}

.gauche {
    border-radius: 0px 15px 15px 0px;
    border-left: none;

}


.outils_vignette button {
    height: 40px;
    width: 40px;
    margin: 3px;
    background-size: contain;
    border: none;
    background-color: transparent;
    vertical-align: middle;
}

.barre {
    background-size: 45px ;
    background-repeat: no-repeat;
    background-position: left;
}


#titre {
    font-size: 28px;
    font-family: 'IndieFlower';
    font-weight: bold;
    height: 46px;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    border-radius: 50% ;
}

#titre::before {
    content: '';
    width: 20px;
    height: 10px;
    background-color: #ffffff;
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
    border-radius: 0% 0% 0% 100% / 0% 0% 0% 100% ;
}

#titre::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #323131;
    position: absolute;
    top: 100%;
    left: calc(50% + 5px);
    border-radius: 0% 0% 0% 100% / 0% 0% 0% 100% ;
}

.fond, .fond img {
    border-radius: 20%;
}


.onomatopee {
    position: absolute;
    font-size: 48px;
    text-align: center;
    font-family: Kaph;
    padding: 30px;
    text-align: center;
    border-radius: 10px;   
}

.onomatopee:hover,.onomatopee.clicked {
    background-color: rgba(0, 0, 0, 0.5);
}

.onomatopee.clicked {
    border: 3px solid yellow;
    padding: 27px;
}

.onomatopee p {
    text-align: center;   
    word-break:break-word;
    margin : 0;
    -webkit-text-stroke: 2px;
    cursor: text;
}

.bubble {
    position: absolute;
    font-family: Arial;
    font-size: 24px;
    text-align: center;
    width: 140px;
    border-radius: 35px / 50%;
    padding: 10px;
    border: #000000 solid 3px;
}

.bubble.ordi, .bubble.telephone {
    border-radius: 0px;
}

.bubble.colere {
    border: 0px;
    border-radius: 0px;
    background-color: transparent;
}

.bubble.colere svg {
    position: absolute;
    top: 0px;
    left: 0px;
    max-height: 100%;
    max-width: 100%;
}

.bubble.colere p {
    margin : 20%;
}

.bubble p {
    margin: 0;
    position: relative;
}

.bubble p {
    text-align: center;   
    word-break:break-word;
    cursor: text;
}

.pointe {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 100%;
    left: 35px;
    transform: scaleY(1);
    transform-origin: top left;
    overflow: hidden;    
}

.pensee .pointe {
    width: 50px;
}

.colere .pointe {
    top: calc(100% - 10px);
    left: 50px; 
}

#titre_bd {
    text-align: center;
    margin: 10px;
    padding: 5px;
}


#texte_a_propos {
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 18px;
    user-select: text;
    font-family: FuntypeRegular;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    padding: 20px;
    overflow-y: auto;
    z-index: 1000000;
    background-color: #fff;
}

#dark {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.8);
}

.bouton_quitter {
    float: right;
    position: fixed;
    top: 20px;
    right: 20px;
    height: 40px;
    width: 40px;
    background-size: contain;
    background-image: url(images/boutons/quitter.svg);
    border-radius: 50%;
}

.cartouche {
    font-family: FuntypeRegular;
    font-size: 18px;
    padding: 10px;
    border: 2px solid #000000;
    position: absolute;
    /*max-width: calc(100% + 100px); */ 
}

.cartouche.clicked {
    border-color: red;
}

.cartouche_top {
    top: 0px;
    border-top: none;
}
.cartouche_bottom {
    bottom: 0px;
    border-bottom: none;
}
.cartouche_left {
    left: 0px;
    border-left: none;
}
.cartouche_right {
    right: 0px;
    border-right: none;
}

.cartouche p {
    margin: 0;
    min-width: 2em;
    word-break:break-word;
    cursor: text;
}

.gros_bouton { 
    position: relative;   
    width: 30%;
    padding: 30% 0% 0% 0%;
    border: 0px;
    margin-left: 1%;
    margin-right: 1%;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #515969;
    border-radius: 10px 10px 0px 0px;

}


#zone_gros_boutons {
    background-color: #323131;  
    position: relative;

}



.gros_bouton:hover {
    background-color: #828895;
}

.gros_bouton.actif {
    background-color: #ccd7eb;
}


#bouton_arriere_plans {
    background-image: url(images/boutons/arriere_plans.svg);
}

#bouton_personnages {
    background-image: url(images/boutons/personnage.svg);
}

#bouton_objets {
    background-image: url(images/boutons/objets.svg);
}



#modele_pointe, #modele_pensee, #modele_ordi, #modele_colere {
    display: none;
}

#bulles {
    display: inline-block;
    width: 46px;
    height: auto;
    height: 164px;
    max-height: 41px;
    overflow-y: hidden;    
    text-align: center;
    z-index: 100000;
    background-color: #323131;
    border-radius: 0px 0px 5px 5px; 
}

#bulles:hover {
    max-height: 500px;
}

#bulles button {
    margin: 0px 0px 5px 0px !important;
}

.cadre {
    position: absolute;
    overflow: hidden;
}

.rognage .coin {
    display: none;
}

.div_fond {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 100%;
}

#credits {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    user-select: text;
}

#zone_credits {
    margin-left: 5px;
}

#zone_credits p {
margin: 0;
}

.hide {
    display: none;
}