/* Ajustement des marges pour le header qui contient le titre */
.region-breadcrumb {
    display: none;
}

.content-header {
    padding: 0 !important;
    margin-bottom: -10px !important;
    background-color: transparent !important;
}


.block-page-title-block:last-child {
    margin: 0 !important;
}



.form-row label {
    font-weight: 600;
}


/* Les marges*/
.mb-10 {
    margin-bottom: 10px
}

.mt-24 {
    margin-top: 24px;
}

.mt-70 {
    margin-top: 70px
}




/* Les couleurs */
.vert_fonce {
    color:green;
}


/* Les tailles */
.text12 {
    font-size:12px; 
}


.t210 {
    width: 210px;
}



/* les alignements*/
.form-row {
    display: flex;
    gap: 20px; /* Espace entre les groupes */
    align-items: flex-start; /* Aligner en haut */
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column; /* Le label reste au-dessus du select */
    width: 48%;
}


.form-group.textarea {
    width: 98%;
}


.rouge {
    color: red;
}


.vert {
    color: green;
}


.orange {
    color: orangered;
}


/* Gestion des themes*/
.form-gestion-themes input[type=text] {
    width: 470px;
    max-width: 100%;
}



/* Gestion des sous-thèmes*/
.form-gestion-sous-themes input[type=text] {
    width: 470px;
    max-width: 100%;
}

.form-gestion-sous-themes select {
    width: 470px;
    max-width: 100%;
}

.form-gestion-sous-themes label {
    display: block;
}



/* Collection */
.form-collection input[type=text] {
    width: 98%;
}

.form-collection select {
    width: 98%;
}


.form-collection input[type=textarea] {
    width: 98%;
}



.form-collection input[type=button] {
    width: 250px;
}


.liste-collection-avec-lien a {
    text-decoration: none;
    color:black;
}








/* Gérer les vignettes */


.form-gerer-vignettes .form-row {
    margin-bottom: 10px;
}

.form-gerer-vignettes {
    border: solid;
    border-width: 1px;
    border-color: #999999;
    padding: 10px;
    background-color: #FAFAFA;
}

.form-gerer-vignettes input[type=text] {
    width: 98%;
}

.form-gerer-vignettes select {
    width: 98%;
    height: 30px;
}


.form-gerer-vignettes input[type=textarea] {
    width: 98%;
}



.form-gerer-vignettes input[type=button] {
    width: 150px;
    margin-top: 23px;

}


.form-gerer-vignettes input[type=reset] {
    width: 150px;
    margin-top: 23px;

}


.copy-btn{
   border: none; 
   display: inline-block;
   background: url(../img/icone-copier.png) no-repeat center center;
   background-size: contain;
   width: 25px;
   height: 25px;
   position: relative;
   top:5px;
   margin-left: 5px;
}











/* Les onglets */
.tabs {
  margin: 20px 0;
}

.tabs__nav {
  display: flex;
  list-style: none;
  padding: 0;
  border-bottom: 2px solid #ddd;
}

.tabs__item {
  margin-right: 10px;
}

.tabs__link {
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  color: #333;
  border: 3px solid transparent;
  border-radius: 4px 4px 0 0;
}

.tabs__link.active {
  background: #fff;
  border-color: #ddd;
  border-bottom-color: #fff;
}

.tabs__content {
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  padding: 15px;
}

.tabs__pane {
  display: none;
}

.tabs__pane.active {
  display: block;
}





/*Autocomplete*/
/* Container pour les suggestions d'autocomplétion */
.autocomplete-wrapper {
  position: relative; /* Nécessaire pour positionner la liste correctement */
  width: 100%;
}

/* Suggestions d'autocomplétion */
#autocomplete-suggestions-nom-collection,
#autocomplete-suggestions-code-collection,
#autocomplete-suggestions-commune {
  list-style-type: none; /* Supprime les puces */
  padding: 0; /* Enlève les marges intérieures */
  margin: 0; /* Enlève les marges extérieures */
  max-height: 200px; /* Limite la hauteur de la zone de suggestions */
  overflow-y: auto; /* Active le défilement vertical si nécessaire */
  overflow-x: hidden; /* Désactive le défilement horizontal */
  border-right: 1px solid #ccc; /* Ajoute une bordure pour mieux délimiter la zone */
  border-left: 1px solid #ccc; /* Ajoute une bordure pour mieux délimiter la zone */
  background-color: #fff; /* Couleur de fond */
  z-index: 1000; /* Assure que la liste est au-dessus des autres éléments */
  position: absolute; /* Pour que la liste reste attachée au champ */
  width: 100%; /* Fait correspondre la largeur au champ de saisie */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute un léger ombrage */
}

/* Surbrillance de l'élément actif */
.autocomplete-suggestions-nom-collection li.active,
.autocomplete-suggestions-code-collection li.active,
.autocomplete-suggestions-commune li.active {
  background-color: #ccc; /* Couleur de surbrillance */
  color: #000; /* Couleur du texte de l'élément actif */
}

/* Style pour chaque élément de la liste */
#autocomplete-suggestions-nom-collection li,
#autocomplete-suggestions-code-collection li,
#autocomplete-suggestions-commune li {
  padding: 8px; /* Espacement pour une meilleure lisibilité */
  cursor: pointer; /* Ajoute un curseur de type clic pour l'interaction */
  text-align: left; /* Alignement du texte à gauche */
}

/* Les champs d'entrée de texte dans le formulaire */
.form-gerer-vignettes input[type=text],
.form-gerer-vignettes select {
  width: 98%;
}

/* Règles supplémentaires pour l'affichage des champs et des boutons */
.form-gerer-vignettes input[type=button] {
  width: 150px;
  margin-top: 23px;
}







/* vignettes-liste.html.twig */
.vignettes_liste {
    width:100%;
    height:570px;
    overflow:auto;
}


.g_vignettes_liste {
    width:100%;
    height:865px;
    overflow:auto;
}


.lien1 {
	display:block;
	text-decoration:none;
	height:27px;
	padding-top:5px;
	cursor: pointer;
}

.lien1:hover {
	background-color: #E5E5E5;
	cursor: pointer;
}


.vignettes_liste .tableau {
    margin: 0;
    padding: 0;
    border-collapse: unset;
}

.vignettes_liste .tableau td {
    box-sizing: unset;
    height: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}





.g_vignettes_liste .tableau {
    margin: 0;
    padding: 0;
    border-collapse: unset;
}

.g_vignettes_liste .tableau td {
    box-sizing: unset;
    height: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}





.tab-actions {
    border-top:solid;
    border-top-width:1px;
    border-bottom:solid;
    border-bottom-width:1px;
    
    margin: 0;
    padding: 0;
    border-collapse: unset;
}

.tab-actions td {
    box-sizing: unset;
    height: 0;
    padding: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}

.lien_liste_conjoncture {
    font-size: 12px;
    text-decoration: none;
    color: #333;
}

.lien_liste_conjoncture:hover {
    color: orangered;
}

.bouton {
    font-size: 14px;
    cursor: pointer;
    height: 30px;
}

.form_la_selection {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}



/* Vignette Form Edition */

.form-edition .form-row {
    margin-bottom: 20px;
}

.form-edition input[type=text] {
    width: 98%;
}

.form-edition select {
    width: 98%;
}


.form-edition input[type=textarea] {
    width: 98%;
}



.form-edition input[type=button] {
    width: 250px;
}



/* Formulaire de publication */
.form-publication .nb-files-selectiones {
    font-weight: bold;
    margin-left: 20px;
}

.form-publication .files-corrects {
    font-weight: bold;
    margin-left: 20px;
    color: green;
}


.form-publication .files-incorrects {
    font-weight: bold;
    margin-left: 20px;
    color: red;
}





/****************/
/* Quill Editor */
/****************/


/* Libellé sélectionné */
.ql-colorClass .ql-picker-label::before {
  content: "Couleur";
}

/* Options */
.ql-colorClass .ql-picker-item[data-value="bleu"]::before {
  content: "Bleu";
  color: #009cb8;
}

.ql-colorClass .ql-picker-item[data-value="orange"]::before {
  content: "Orange";
  color: #fd7e14;
}


.ql-colorClass .ql-picker-item[data-value=""]::before {
  content: "Aucune";
}



.color-bleu {
  color: #009cb8;
}

.color-orange {
  color: #fd7e14;
}




/* Largeur du bouton (fermé) */
.ql-colorClass {
  width: 100px;           /* ajuste à ta convenance */
}

/* Largeur du menu déroulé */
.ql-colorClass .ql-picker-options {
  width: 100px;
}

/* S'assurer que le texte ne se coupe pas */
.ql-colorClass .ql-picker-item,
.ql-colorClass .ql-picker-label {
  white-space: nowrap;
}

.help {
    color: #999999;
    font-style: italic;
    margin-left: 50px;
}