/* Style de base */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFF2EC; /*f4f4f9*/
}

header, footer {
    background-color: #ffffff;
    padding: 10px 20px;
    font-size: 14px;
}

header {
		display: flex;
		justify-content: space-between; /* Espace entre les éléments de gauche et de droite */
		align-items: flex-start; /* Aligne les éléments en haut */
    margin-bottom: 20px; /* Espace sous le header */
		border-bottom: 2px solid #0000ff; /* Ligne bleue de séparation */
		display: flex;
    height: 82px;
    background-color: #ffffff; /*FFDC9F FFE8DF*/
}

header #title {
    font-size: 24px;
    color: #0000ff; /* Couleur bleue pour le titre */
    font-weight: bold;
    margin-top: 22px;
}

.header-right {
    position: relative; /* Nécessaire pour placer le logo en absolu */
}

.header-right .site-logo {
    position: absolute;
    display: inline;
    bottom: -45px; /* Positionne le logo juste au-dessus de la ligne */
    left:-200px;
    transform: translateY(50%); /* Ajuste la position pour le chevauchement */
    z-index: 2; /* Place le logo au-dessus de la ligne de séparation */
    /*width: 80px; /* Ajustez selon la taille souhaitée */
}

/* Cacher les liens pour les écrans de moins de 768px de large */
@media only screen and (max-width: 768px) {
    .header-right  .site-logo {
        display: none;
    }
}

.menu-btn {
    cursor: pointer;
    display: inline-block; /* Pour s'assurer que l'image s'aligne bien */
    padding: 5px; /* Ajout de padding pour le confort */
		margin-top: 7px; /* Positionne le bouton un peu plus haut */
		margin-right: 30px;
}

/* Menu de navigation en colonne avec séparateurs */
.nav-menu {
    display: none;
    background-color: #ffffff;
    border: 1px solid #0000ff;
    border-radius: 5px;
    margin-top: 60px;
    padding: 10px;
    width: 200px;
    font-size: 16px;
    position: absolute;
    z-index: 10000;
}

.nav-menu.active {
    display: block;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu ul li.grey a {
    color: #666; /* Texte en gris */
}

.nav-menu ul li {
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease; /* Transition douce */
}

.nav-menu ul li:last-child {
    border-bottom: none; /* Retire la bordure après le dernier élément */
}

.nav-menu ul li a {
    color: #0000ff; /* Couleur du texte */
    text-decoration: none; /* Pas de soulignement */
    display: block;
    padding: 8px 10px; /* Ajout de padding pour les liens */
}

/* Nouveau style au survol */
.nav-menu ul li:hover {
    background-color: #0000ff; /* Fond bleu au survol */
}

.nav-menu ul li:hover a {
    color: #ffffff; /* Texte blanc au survol */
}

/* Style de base pour masquer le sous-menu */
/* Style de base pour le sous-menu */
.nav-menu ul.submenu {
    display: none;
    background-color: #ffffff; /* Même couleur de fond que le menu principal */
    border: 1px solid #0000ff; /* Bordure bleue */
    margin-top: 3px; /* Espace au-dessus du sous-menu */
    margin-left: 38px;
    padding: 0; /* Pas de padding pour la liste */
    position: absolute;
    width: 160px; /* Ajuster si nécessaire */
    z-index: 10000; /* Même ordre de superposition */
}

/* Afficher le sous-menu au survol de l'élément parent */
.nav-menu li.has-submenu:hover ul.submenu {
    display: block;
}

/* Style des éléments de la liste du sous-menu */
.nav-menu ul.submenu li {
    padding: 3px 0;
    border-bottom: 1px solid #ddd; /* Même bordure que le menu principal */
    transition: background-color 0.3s ease; /* Même transition douce */
}

/* Retirer la bordure du dernier élément du sous-menu */
.nav-menu ul.submenu li:last-child {
    border-bottom: none;
}

/* Style des liens dans le sous-menu */
.nav-menu ul.submenu li a {
    color: #0000ff; /* Couleur bleue des liens */
    text-decoration: none;
    display: block;
    padding: 8px 10px; /* Même padding que le menu principal */
}

/* Changement de style au survol du sous-menu */
.nav-menu ul.submenu li:hover {
    background-color: #0000ff; /* Fond bleu au survol, comme le menu principal */
}

.nav-menu ul.submenu li:hover a {
    color: #ffffff; /* Texte blanc au survol, comme le menu principal */
}

/* Style pour les éléments de menu désactivés en gris */
.nav-menu ul li.disabled a {
    color: #666; /* Texte en gris */
    pointer-events: none; /* Désactiver les interactions (facultatif) */
    cursor: default; /* Changer le curseur pour montrer que l'élément est non cliquable */
}

/* Optionnel : Changement au survol */
.nav-menu ul li.disabled:hover {
    background-color: #ffffff; /* Pas de changement de fond au survol */
}

.nav-menu ul li.disabled:hover a {
    color: #666; /* Couleur du texte reste en gris même au survol */
}

.results-table {
    border-collapse: collapse; /* Assure que les bordures se touchent */
    width: 100%; /* Optionnel : ajuste la largeur selon vos besoins */
}

.results-table th, .results-table td {
    padding: 10px; /* Optionnel : ajoute de l'espace autour du texte */
    text-align: left; /* Aligne le texte à gauche */
}

.results-table tr {
    border-bottom: 1px solid #ddd; /* Ajoute une bordure en bas de chaque ligne */
}

.results-table tr:last-child {
    border-bottom: none; /* Supprime la bordure de la dernière ligne */
}

img.centered  {
    text-align: center !important; /* Utilisation de !important pour forcer le centrage */
    width:100%;
    margin:auto;
}
.results-table th.centered,
.results-table td.centered {
    text-align: center !important; /* Utilisation de !important pour forcer le centrage */
}
.results-table td.blue {
    color: #0000ff; !important; /* Utilisation de !important pour forcer le centrage */
}

form input[type="text"],
form input[type="number"],
form input[type="date"],
form input[type="time"],
form input[type="password"],
form input[type="password_verify"],
form input[type="email"],
form select,
form textarea {
    font-family: Arial, sans-serif; /* Remplacez par la police souhaitée */
    font-size: 16px; /* Remplacez par la taille souhaitée */
    line-height: 1.5; /* Ajuste l'espacement des lignes */
    padding: 8px; /* Pour un peu d'espace intérieur */
    margin-top: 5px; /* Espace entre le label et le champ */
    margin-bottom: 10px; /* Espace entre les champs */
    border: 1px solid #ccc; /* Ajoute une bordure pour la clarté */
    border-radius: 4px; /* Arrondit les bords */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur */
}

/* Boutons dans le contenu */
/* Style des boutons */
form input[type="submit"],
.button {
    background-color: #ffffff; /* Fond blanc */
    color: #0000ff; /* Texte bleu */
    border: 2px solid #0000ff; /* Bordure bleue */
    padding: 10px 15px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    font-size: 16px; /* Taille de la police */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transition douce */
    display: inline-block; /* Permet d'utiliser margin pour l'espacement */
    margin: 10px 5px; /* Espacement entre les boutons */
    text-decoration: none; /* Pas de soulignement */
}
.button.orange {
	color: #fd5308; /* Texte orange */
	border: 2px solid #fd5308; /* Bordure orange */
}
.button.grey {
	color: #666666; /* Texte gris */
	border: 2px solid #666666; /* Bordure gris */
}

td.grey {
  color: #666666;
  background-color: #EEEEEE;
}

/* Effet au survol du bouton */
form input[type="submit"]:hover,
.button:hover {
    background-color: #0000ff; /* Couleur de fond bleue au survol */
    color: white; /* Texte blanc au survol */
}

.button.orange:hover {
    background-color: #fd5308; /* Couleur de fond bleue au survol */
    color: white; /* Texte blanc au survol */
}

.button.grey:hover {
    background-color: #666666; /* Couleur de fond bleue au survol */
    color: white; /* Texte blanc au survol */
}

input[readonly],
textarea[readonly],
select[readonly] {
    background-color: #f0f0f0; /* Couleur de fond grisée */
    color: #666; /* Couleur du texte légèrement grisée */
    border: 1px solid #ccc; /* Bordure standard */
    cursor: not-allowed; /* Change le curseur pour indiquer que c'est en lecture seule */
}

input[readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus {
    background-color: #f0f0f0; /* Maintient la couleur de fond grisée même en focus */
    outline: none; /* Supprime l'effet de focus par défaut */
}

/* Contenu principal */
#content {
    padding: 20px;
		margin : auto;
    max-width: 1000px; /* 800px; */
    background-color: #fff;
    border: 2px solid #0000ff; /* Ligne bleue autour du contenu */
    border-radius: 5px;
    text-align: center; /* Centre le contenu */
}

/* Formulaire */
form label {
    display: inline-block;
    width: 160px;
    font-weight: bold;
    color: #333;
		padding-top: 8px;
		padding-right: 5px;
		margin-top: 8px;
		vertical-align: top;
		text-align: left;
}
form label.large {
  width: 400px;
}

form label.checklabel {
  width: 440px;
  text-align: left;
  font-weight: normal;
}
form textarea.mediumtext {
  width: 800px;
}
span.mediumtext {
  width: calc(100% - 170px);
}

form input[type="checkbox"] {
  margin-top: 18px;
  margin-right:10px;
  text-decoration: none;
  margin-bottom: 10px;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form textarea {
    width: calc(100% - 170px);
    max-width: 800px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

form input.smalltext {
		width: 160px;
}
form input.mediumtext {
		width: 320px;
}
div.mediumtext {
		width: 320px;
}

form textarea {
    resize: vertical;
}

/* Footer */
footer {
    text-align: center;
	  margin-top: 20px; /* Espace au-dessus du header */
    padding: 20px;
    color: #666;
    border-top: 2px solid #666; /* Ligne  au-dessus du footer */
		border-bottom: 2px solid #666; /* Ligne bleue de séparation */
}

footer a {
    color: #666;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 600px) {
    form label {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form textarea {
        width: 100%;
    }

    #title {
        font-size: 20px;
    }
}


/* Styles pour le message de confirmation */
.confirmation-message {
    background-color: #dff0d8; /* Couleur de fond verte claire */
    color: #3c763d; /* Couleur du texte */
    border: 1px solid #d6e9c6; /* Bordure légèrement plus foncée */
    border-radius: 5px; /* Bords arrondis */
    padding: 15px; /* Espacement intérieur */
    margin: 20px 0; /* Espacement supérieur et inférieur */
    font-family: 'Arial', sans-serif; /* Police */
    font-size: 18px; /* Taille de la police */
    position: relative; /* Pour le positionnement du bouton de fermeture */
    line-height: 1.5; /* Ajuste l'espacement des lignes */
}

/* Style pour le bouton de fermeture */
.confirmation-message .close-btn {
    position: absolute; /* Positionné par rapport à la boîte */
    top: 10px; /* Espacement supérieur */
    right: 10px; /* Espacement droit */
    background: transparent; /* Fond transparent */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Changer le curseur au survol */
    font-size: 22px; /* Taille du texte */
    color: #3c763d; /* Couleur du texte */
}

/* Styles pour le message de confirmation */
.alert-message {
    background-color: #FFF2EC; /* Couleur de fond verte claire */
    color: #fd5308; /* Couleur du texte */
    border: 1px solid #FFC882; /* Bordure légèrement plus foncée */
    border-radius: 5px; /* Bords arrondis */
    padding: 15px; /* Espacement intérieur */
    margin: 20px 0; /* Espacement supérieur et inférieur */
		font-family: 'Arial', sans-serif; /* Police */
    font-size: 18px; /* Taille de la police */
    position: relative; /* Pour le positionnement du bouton de fermeture */
    line-height: 1.5; /* Ajuste l'espacement des lignes */
}

/* Style pour le bouton de fermeture */
.alert-message .close-btn {
    position: absolute; /* Positionné par rapport à la boîte */
    top: 10px; /* Espacement supérieur */
    right: 10px; /* Espacement droit */
    background: transparent; /* Fond transparent */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Changer le curseur au survol */
    font-size: 22px; /* Taille du texte */
    color: #fd5308; /* Couleur du texte */
}

.centered {
    text-align: center; /* Centre le texte dans la cellule */
}

/* Style général pour chaque bloc */
.block {
    border: 1px solid #ddd; /* Bordure légère */
    padding: 10px; /* Espacement interne */
    margin-top: 20px; /* Espacement entre les blocs */
    background-color: #f9f9f9; /* Fond légèrement grisé */
    border-radius: 8px; /* Coins arrondis */
    text-align : left;
}

div.options {
  margin-left: 30px;
}

/* Style des titres de section */
.block h2 {
    font-size: 1.2em;
    color: #fd5308; /* Couleur du titre */
    margin-bottom: 20px;
    text-align: center;
}

.container {
    display: flex;
    gap: 20px; /* Espace entre les items */
}

.item {
	flex: 1 1 200px; /* Largeur flexible avec un minimum de 300px */
	min-width: 200px; /* Largeur minimale pour chaque section */
}

.bigText {
    font-size: 18px; /* Taille du texte */
		padding:20px;
}
.blue {
    color: #0000ff;
}

.sul-counter {
    float: right;
		background-color: #0000ff; /* Couleur de fond bleu */
    color: #ffffff; /* Texte blanc */
    padding: 8px 15px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
    font-weight: bold; /* Texte en gras */
    font-size: 16px; /* Taille du texte */
    display: inline-block;
    margin-left: 10px; /* Espace entre le logo et le compteur */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet moderne */
		text-align: center;
}

.header-left,
.header-right {
    display: flex;
}

.header-right a {
		margin-left:20px;  /* Espace entre le logo et le compteur */
}

.sul-counter {
    background-color: #0000ff; /* Couleur de fond bleu */
    color: #ffffff; /* Texte blanc */
    padding: 12px 8px 8px 8px; /* Espacement intérieur */
		margin-right:5px;
    border-radius: 5px; /* Coins arrondis */
    font-weight: bold;
    font-size: 16px; /* Taille du texte de base */
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet moderne */
    line-height: 1.2; /* Ajuste l'espacement entre les lignes */
    width: 120px;
}
.sul-counter.orange {
    background-color: #fd5308; /* Couleur de fond orange */
}

.sul-counter .sul-label {
    display: block; /* Assure que "richesse créée" est sur une ligne seule */
    font-size: 12px; /* Taille de texte standard */
}

a.sul-value {
    font-size: 24px; /* Texte plus grand pour "26 SUL" */
    font-weight: bold; /* Gras pour mettre en évidence */
    text-decoration: none;
    color : #fd5308;
    padding: 0;
    margin: 0;
}

.sul-value.orange {
  color : #0000ff;
}

.sul-counter .sul-value {
    font-size: 24px; /* Texte plus grand pour "26 SUL" */
    font-weight: bold; /* Gras pour mettre en évidence */
}

/* Style de la div centrée */
.explain {
    max-width: 900px;      /* Largeur maximale */
    width: 90%;           /* Largeur ajustée pour le responsive */
    margin: 20px auto;        /* Centre la div horizontalement */
    padding: 20px;         /* Optionnel, ajoute de l'espace interne */
    text-align: left;      /* Aligne le texte à gauche */
    background-color: #FFF2EC; /* Optionnel, pour mieux visualiser la boîte FFF2EC*/
    text-align: center;
    border: 1px solid #FFC882; /* Bordure légèrement plus foncée */
    border-radius: 5px; /* Bords arrondis */
}

#search-results {
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    /*position: absolute; /* Position absolue pour que la liste apparaisse sous le champ */
    z-index: 1000;
    width: auto; /* Adapter la largeur du conteneur aux besoins */
    /*border: 1px solid #ccc; /* Pour délimiter la liste */
    margin-bottom: 30px;
}

#search-results ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#search-results li {
    padding: 10px;
    cursor: pointer;
    border: 1px solid #ccc; /* Ligne grise entre les éléments */
    text-align: left;
}

#search-results li:hover {
    background-color: #f0f0f0; /* Couleur de fond au survol */
}

a.forgot_password {
  color: #666666;
  font-size: 14px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    padding: 10px 15px;
    margin: 0 5px;
    text-decoration: none;
    color: #0000ff; /* Couleur des liens */
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Animation pour effet hover et focus */
}

.pagination a:hover {
    background-color: #f0f0f0; /* Légère couleur de fond au survol */
    color: #0056b3;
}

.pagination a.active {
    background-color: #0000ff; /* Couleur de fond prononcée pour la page active */
    color: white; /* Texte en blanc sur fond bleu */
    border-color: #0000ff; /* Bordure assortie au fond */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Légère ombre pour effet de relief */
    pointer-events: none; /* Désactive le clic sur la page active */
    font-weight: bold; /* Rend le texte plus visible */
    cursor: default; /* Change le curseur pour indiquer que c'est non-cliquable */
}

.cgu-container {
    max-height: 200px; /* Ajuster la hauteur maximale */
    overflow-y: auto;  /* Activer le défilement vertical */
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    text-align: left;
}


.photo{
    width: auto;
    height: 150px;
    border: 2px solid #ccc; /* Optionnel : bordure */
    margin: 0 20px 0 20px;
    vertical-align: middle;
    object-fit: contain; /* Remplit l'espace en gardant le ratio, sans déformation */
    object-position: center; /* Centre l'image si elle est coupée */
}
.small_photo{
    width: auto;
    height: 60px;
    border: 0px; /* Optionnel : bordure */
    margin: 0 5px 0 5px;
    vertical-align: middle;
    object-fit: containt; /* Remplit l'espace en gardant le ratio, sans déformation */
    object-position: center; /* Centre l'image si elle est coupée */
}
.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;  /* Rendre l'image ronde */
    object-fit: cover; /* Remplit l'espace en gardant le ratio, sans déformation */
    object-position: center; /* Centre l'image si elle est coupée */
    border: 2px solid #ccc; /* Optionnel : bordure */
    margin: 0 20px 0 20px;
    vertical-align: middle;
}
.small_avatar {
    width: 50px;
    height: 50px;
    object-fit: cover; /* Remplit l'espace en gardant le ratio, sans déformation */
    object-position: center; /* Centre l'image si elle est coupée */
    border-radius: 50%;  /* Rendre l'image ronde */
    border: 2px solid #ccc; /* Optionnel : bordure */
    margin: 0 auto 0 20px;
    vertical-align: middle;
}

img.avatar-marker {
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: #FFFFFF;
}

img.picto_avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 5px;
}

.suggestions-box {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    width: 80%;
    z-index: 100;
}

.suggestions-box.visible {
    display: block;
}

/* Style pour la boîte modale */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
}

#caption {
  margin: auto;
  display: block;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Masquer le bandeau lorsque la classe header-hidden est active */
.header-hidden {
  display: none;
}

/* Modifier le curseur lors du survol de l'image pour zoom */
.photo {
  cursor: zoom-in !important; /* Curseur de loupe indiquant un zoom */
  transition: 0.3s;
}

.photo:hover {
  opacity: 0.7; /* Ajouter un effet visuel lors du survol (optionnel) */
}

img.photo {
  cursor: zoom-in !important;
}