@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&family=Roboto:ital,wdth,wght@0,75,900;1,75,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/*@import url(fontawesome-all.min.css);*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
  --rightLeftSpaceIconMenuItem: 10px;
  --border-radiusWidget: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
input {
  /* font-family: "Poppins", sans-serif; */
  font-family: "Inter", sans-serif;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.apple-link {
  color: #0071e3; /* bleu Apple */
  text-decoration: none; /* enlever le soulignement */
  position: relative;
  font-weight: 400;
}
/*
.apple-link::after {
  content: '\2192'; // petite flèche haut-droite
  margin-left: 0.3em;
  font-size: 0.8em;
}
*/
.apple-link::after {
  color: #0071e3; /* bleu Apple */
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.0em;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M5 19L19 5M5 5h14v14"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}





/*MARK: centrage de la form de sign up sign in*/
/* Conteneur principal (contenant tous les widgets) centré horizontalement */
.container {
  display: flex;
  justify-content: center;     /* centre horizontalement */
  align-items: center;         /* centre verticalement si tu veux aussi */
  flex-wrap: wrap;             /* permet l’adaptation sur petits écrans */
  gap: 1rem; /* ✅ espace horizontal entre les différents widgets (sur grand écran) et vertical (sur petit écran) entre formulaine et pannels*/
  padding-top: 2rem; /* espace ajouté en haut */
  /*padding: 1rem;*/ /* la largeur du widget*/
  min-height: 10vh;
  box-sizing: border-box;
  
}

/*
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  min-height: 100vh;
}
*/

/*Option Widget*/

/* Conteneur des formulaires */


/* WIDGETS V2 --------------- */
/* END WIDGETS V2 --------------- */
/* Appliquer flex seulement à contentWidget pour gérer les alignements */
.widget {
  display: flex;
  flex-direction: column;   /* Colonne d'éléments */
  max-width: 880px;
  width: 94%;               /* ✅ Largeur du widget */
  padding-left: 15px; padding-right: 15px; 
  padding-top: 10px; padding-bottom: 10px; 
  position: relative; overflow: hidden;

  background-color: #ffffff;
  border-radius: var(--border-radiusWidget);
  /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);*/ /* Ombre portée */
  box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
  align-items: flex-start;  /* Par défaut, aligner à gauche */
  overflow: hidden; /* tronquer ce qui dépasse */
}

.widgetFixed {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  border-radius: 0px;
}
.widgetMenu{
  overflow: visible; /*ne pas tronquer ce qui dépasse*/
}


.widgetSmall {
  position: relative;
  top: 0px;
  right: 0px;
  padding-left: 0px; padding-right: 0px; 
  padding-top: 0px; padding-bottom: 0px;  
  min-width: 100px;
  width: auto;               /* ✅ Largeur du widget */
  height: auto;
  z-index: 999999;
  border-radius: 10px;
  box-shadow: 0.125rem 0 0.375rem rgba(34, 48, 62, 0.08), 
  -0.125rem 0 0.375rem rgba(34, 48, 62, 0.08),
  0 0.125rem 0.375rem rgba(34, 48, 62, 0.08);  
}
.widgetSmall li {
  padding-left: var(--rightLeftSpaceIconMenuItem) !important; /* ---- VAR --- */
  padding-right: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}


.anyContent.widgetImageDuHaut{
  position: absolute;
  top: -0px;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 1;
}

.anyContent.widgetImageBackground{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  border-radius: var(--border-radiusWidget);     /* Même arrondi que .widget */
  overflow: hidden;        /* Masquer ce qui dépasse */
  pointer-events: none;    /* Facultatif : évite que ça capte les clics */  

}



.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
  margin-top: 15px;
  margin-bottom: 15px;        /* Tu peux définir uniquement le bas si tu veux */
  text-align: inherit;           /* Aligne tous les titres selon leur parent */
  width: 100%;                   /* Assure que les titres prennent toute la largeur disponible */

  /* Amélioration visuelle */
  /*font-weight: bold; */
  /*color: #222; */ /* couleur sombre, personnalisable */
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); */
  /*letter-spacing: 0.5px;*/

  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
  text-transform: uppercase;


  /* Optionnel : dégradé dans le texte (effet visuel moderne) */
  background: linear-gradient(to right, #00000c, #061c9a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Animation légère au survol */
  transition: transform 0.2s ease;  
}

.widget h1:hover,
.widget h2:hover,
.widget h3:hover,
.widget h4:hover,
.widget h5:hover,
.widget h6:hover {
  transform: scale(1.02);
}
.titleDistngu{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
  text-transform: uppercase;
}

.anyContent{
  width:100%;
  z-index: 10;
}
.contentWidget {
  display: flex;
  flex-direction: column;
  width: 100%;
  word-break: break-word; /*avoid errors for long continuous sentences on mobile devices */
  overflow-wrap: break-word; /*avoid errors for long continuous sentences on mobile devices */
  z-index: 10;
}

/* Alignement à gauche */
.contentWidget.alignLeft {
  align-items: flex-start;
  text-align: left;
}

/* Alignement au centre */
.contentWidget.alignCenter {
  align-items: center;
  text-align: center;
}

/* Alignement à droite */
.contentWidget.alignRight {
  align-items: flex-end;
  text-align: right;
}

.contentWidget p {
  /*margin-top: 6px;*/
  margin-bottom: 6px;
}


.anyContent.alignLeft,
.anyContent.alignRight,
.widget .anyContent.alignCenter {

  display: flex;
  justify-content: center;    /* remplacé individuellement plus bas */
  align-items: center;
  flex-direction: column;
}
.anyContent.alignLeft{
  display: flex;
  justify-content: left;    /* remplacé individuellement plus bas */
  align-items:flex-start;
  flex-direction: column;
}
.anyContent.alignRight{
  display: flex;
  justify-content:right;    /* remplacé individuellement plus bas */
  align-items:flex-end;
  flex-direction: column;
}

.anyContent img.fitAll {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

}

.widgetUL {
  display: flex;
  flex-direction: column;   /* Colonne d'éléments */
  max-width: 880px;
  margin-top:10px;
  margin-bottom: 10px;
  width: 96%;               /* ✅ Largeur du widget */
  padding-left: 15px; padding-right: 15px; 
  padding-top: 0px; padding-bottom: 0px; 
  position: relative; overflow: hidden;

  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Ombre portée */
  align-items: flex-start;  /* Par défaut, aligner à gauche */
}


/* Tous les enfants directs */




/* WIDGETS --------------- */
/* Conteneur principal du panneau gauche */
/* Conteneur principal du panneau gauche */

/* Assurez-vous que tous les titres prennent bien l'alignement */


/* Aligner spécifiquement le bouton à droite si nécessaire */
.alignRight button {
  align-self: flex-end;      /* Alignement spécifique du bouton à droite */
  margin-top: 1rem;          /* Ajouter un espace au-dessus du bouton */
}

/* Aligner spécifiquement le bouton au centre si nécessaire */
.alignCenter button {
  align-self: center;       /* Centrer spécifiquement le bouton */
  margin-top: 1rem;          /* Ajouter un espace au-dessus du bouton */
}

/* Aligner spécifiquement le bouton à gauche si nécessaire */
.alignLeft button {
  align-self: flex-start;    /* Aligner spécifiquement le bouton à gauche */
  margin-top: 1rem;          /* Ajouter un espace au-dessus du bouton */
}

.widget ul {
  margin-top: 20px;
  margin-bottom: 20px;
}


.widget li {
  list-style: none;
  position: relative;
  padding-left: 1.6em;
  padding-right: 1.0em;
  margin-top: 8px;
  margin-bottom: 8px;
  /*font-family: 'Segoe UI', sans-serif;*/
  font-family: 'Quicksand', sans-serif;
  font-size: 17px;
  font-weight: 600;  
  color: #222;
}

/* Style étoile ✨ */
.widget.emoji-star li::before {
  content: "✨";
  position: absolute;
  left: 0;
  top: 0;
}




/* Style emoji-3points ⋮  */
.widget.emoji-3points li::before {
  content: "⋮";
  position: absolute;
  left: 0;
  top: 0;
}


/* Style cible 🎯 */
.widget.emoji-cible li::before {
  content: "🎯";
  position: absolute;
  left: 0;
  top: 0;
}



/* Style cocher ✔️ */
.widget.emoji-cocher li::before {
  content: "✔️";
  position: absolute;
  left: 0;
  top: 0;
}

/* Style coche ✅ */
.widget.emoji-check li::before {
  content: "✅";
  position: absolute;
  left: 0;
  top: 0;
}

/* Style flèche 👉 */
.widget.emoji-arrow li::before {
  content: "👉";
  position: absolute;
  left: 0;
  top: 0;
}

/* Style cœur ❤️ */
.widget.emoji-heart li::before {
  content: "❤️";
  position: absolute;
  left: 0;
  top: 0;
}
/* WIDGETS --------------- END*/







/* Formulaires internes */
.signin-signup form {
  width: 110%;
  margin-left: 50%;
  transform: translateX(-50%);  
}







/* Pour les images dans les panels */
.panel .image {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-top: 1rem;
}

/* Responsiveness mobile */
@media screen and (max-width: 768px) {
  .panel {
    width: 100%;
    max-width: 480px;
  }
}














.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}
/*MARK: center icons in same line and center*/
.social-media {
  display: flex;
  justify-content: center;
}
.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
}









.input-field {
  display: flex;
  align-items: center; /* <-- centre verticalement */
  max-width: 380px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #1E90FF; /* ✅ Le contour autour du tout */  
  background-color: #f0f0f0;
  padding: 0 0.4rem;
  margin: 10px 0;
}
/* Survol et focus global */
.input-field:focus-within {
  border-color: #f39c12;
}

.input-field i {
  color: #acacac;
  font-size: 1.1rem;
  margin-right: 10px;
}
.input-field input {
  padding: 0.8rem 0; /* ici tu augmentes ou réduis la hauteur */

  border: none;
  background: none;
  outline: none;
  flex: 1; /* <-- prend toute la place restante */
  padding: 0.45rem 0; /* hauteur de l'input */
  
  font-size: 1rem;
  font-weight: 300;
  font-size: 1.1rem;
  color: #333;
  background: none;
  outline: none;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}

/* MARK: avoid yellow input when type is password*/
input:-webkit-autofill {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1000px #f1f1f1 !important;
  color: #333 !important;
      /*border-radius: 55px;*/
}

input[type="email"], input[type="password"] {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1000px #f1f1f1 !important;
  color: #333 !important;
      /* border-radius: 55px;*/ /*MARK: round de l'input MAIL+PASS ----------------------------------*/
}


.input-field textarea {
  resize: vertical; /* ou none si tu veux bloquer le redimensionnement */
  padding: 0.45rem 0;
  border: none;
  background: none;
  outline: none;
  flex: 1;
  font-size: 1.1rem;
  font-weight: 300;
  color: #333;
  height: 50%; /* ou autre hauteur par défaut */
  width: inherit;
}

.input-field textarea::placeholder {
  color: #aaa;
  font-weight: 500;
}







.btn {
  width: 150px;
  background-color: #5995fd;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}
  

.btn:hover {
  background-color: #4d84e2;
}


/*Close permanent*/
#closeButton {
  position: fixed;
  top: 40px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: grey;
  cursor: pointer;
  z-index: 9999;
}
#closeButton:hover {
  color: darkgray;
}
/*background*/
.background-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Important ! */
  background-image: url("https://socialgame.live/images/mainBackground.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.background-uni1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Important ! */
  z-index: -1;
  pointer-events: none;
  background-color: #F5F5F9;
}

.contenu {
  position: relative;
  z-index: 10;
}

/*MARK: if captcha error*/
.g-recaptcha {
  max-width: 100%;
  overflow-x: auto;
  transform: scale(0.88); /* Ajuste selon ton test */
  transform-origin: top left;
}
/*MARK: server Error*/
.error-message {
  font-family: 'Press Start 2P', cursive;
  color: #ff0044;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  line-height: 14px;

  display: block;
  /*max-width: 250px;*/ /* légèrement moins que input */
  width: 100%;
  margin: 0 auto 10px auto; /* centrage horizontal + spacing */

  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;

}

#footer {
  margin-top: 0; /* ⬅️ Réduction ici */

  -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
  width: 100%;
  max-width: 100%;
  
  text-align: center;
}

  #footer .copyright {
    letter-spacing: 0.2rem;
    font-size: 0.6rem;
    opacity: 0.75;
    margin-bottom: 0;
    text-transform: uppercase;
  }

  body.is-article-visible #footer {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -moz-filter: blur(0.1rem);
    -webkit-filter: blur(0.1rem);
    -ms-filter: blur(0.1rem);
    filter: blur(0.1rem);
    opacity: 0;
  }

  body.is-preload #footer {
    opacity: 0;
  }
/*
MENU AVATAR
*/

.avatar {
  position: absolute;
  top: 5px;          /* distance du haut */
  left: 50%;         /* Pour centrer horizontalement */
  transform: translateX(-50%); /* Ajuste la position pour centrer exactement */
  cursor: pointer;

  width: auto;
  height: auto;
  z-index: 100;
  display: flex;
  justify-content: center; /* Centre horizontalement les enfants */
  align-items: center;     /* Centre verticalement les enfants */
  flex-direction: column;  /* Garder l'alignement vertical pour les éléments enfants */
}

.avatar img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.avatar-online::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  bottom: 0px;
  right: 5px;
  background-color: #4CAF50; /* vert */
  border: 2px solid white; /* contour blanc */
  border-radius: 50%;
  z-index: 110;
}

.textAvatar {
  width: 40px;              /* même taille que l'image */
  height: 40px;             /* même taille que l'image */
  border-radius: 50%;       /* cercle parfait */
  display: flex;
  justify-content: center;  /* centrer horizontalement */
  align-items: center;      /* centrer verticalement */
  font-size: 20px;          /* taille de la lettre */
  font-weight: bold;        /* rendre la lettre plus visible */
  color: white;             /* couleur du texte (lettre) */
  cursor: pointer;
}

.menuRedMore {
  position: absolute;
  top: 20px;          /* distance du haut */
  right: 15px;         /* Pour centrer horizontalement */
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight:100 !important;
  z-index: 100;
  display: flex;
  justify-content: center; /* Centre horizontalement les enfants */
  align-items: center;     /* Centre verticalement les enfants */
  flex-direction: column;  /* Garder l'alignement vertical pour les éléments enfants */
}


.menuSmallPopup {
  display: none;
  position: fixed;
  pointer-events: auto; /* force to accept clicks*/
  top: 55px;
  right: 0px;
  z-index: 999999999 !important;
  padding: 0px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* Empêche les clics quand invisible */
}
.menuMainPopup{
  left: 0px;
  right: auto;
}

/* Quand visible */
.menuSmallPopup.show {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 999999999 !important;
}
/*
.menuSmallPopup * {
  padding-left: 5px !important; // ou la valeur que tu veux
}
*/
.menuSmallPopup li {
  color: rgb(74, 78, 81);
  font-weight:600;
  font-size: 16px;
}



.threeBars{
  position: absolute;
  top: 20px;          /* distance du haut */
  left: 15px;         /* Pour centrer horizontalement */
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight:100 !important;
  z-index: 100;
  display: flex;
  justify-content: center; /* Centre horizontalement les enfants */
  align-items: center;     /* Centre verticalement les enfants */
  flex-direction: column;  /* Garder l'alignement vertical pour les éléments enfants */
}

.menu3dots {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 10c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2m0 12c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2'/%3E%3C/svg%3E");

  display: inline-block;
  width: 30px;             /* Taille réelle de l'icône */
  height: 30px;
  background-color: #a7acb2;

  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-size: contain;  /* ✅ clé pour forcer l'agrandissement */
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.menu3bars {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E");

  display: inline-block;
  width: 30px;             /* Taille réelle de l'icône */
  height: 30px;
  background-color: #a7acb2;

  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-size: contain;  /* ✅ clé pour forcer l'agrandissement */
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center; 
}

/*
DEBUT : MENU items
*/
/* Menu item with normal hauteur */
.menu-item {
  display: flex;
  align-items: stretch; /* <- force le <a> à coller en haut */
  height: 40px; /* modifiable */
  padding: 0;
  background-color: transparent;
}

/* Effet hover */
.menu-item-hover-enabled:hover {
  background-color: rgba(0, 0, 0, 0.05); /* gris très clair, modifiable */
}

/* Menu item with big hauteur */
.menu-item-big {
  height: 48px; /* modifiable */
}
/* Menu item with underlined top */
.menu-item-underline-top {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
/* Menu item with underlined bottom */
.menu-item-underline-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item a {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ⬅️ Tout à gauche */
  text-decoration: none;
  color: inherit;
  padding: 0;
  margin: 0;  
  width: 100%;
  height: 100%;
}


.menu-icon {
  margin-right: var(--rightLeftSpaceIconMenuItem);
  margin-left: 0px;
  font-size: 18px;
  color: #4A4E51;
  flex-shrink: 0;
}

.menu-iconSub {
  margin-right: var(--rightLeftSpaceIconMenuItem);
  margin-left: 20px;
  font-size: 16px;
  color: #4A4E51;
  flex-shrink: 0;
}


.menu-text {
  flex: 1;
  margin-right: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #4A4E51;
}

.menu-textSub {
  flex: 1;
  margin-right: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #4A4E51;
}

.menu-symbol {
  margin-left: 0px;
  font-size: 12px;
  color: #d00;
  flex-shrink: 0;
}

.menu-symbol.badge {
  background-color: #e00;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}
/*
FIN : menu items
*/

/*
DEBUT DIV widget-scroll-wrapper : horizontal scrollable items
*/

.widget-item {
  /*background-color: #4CAF50;*/
  padding-bottom: 10px;
  /*border-radius: 10px;*/
  margin-right: 20px; /* Espace entre les widgets */
  /*padding: 10px 20px;*/
  white-space: nowrap; /* Empêche le texte de se couper */
  /*min-width: 120px;*/ /* width of widget*/
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}




/* Style pour l'élément cliqué */
.widget-item.clicked {
  color: #625307;
  font-weight: 700;  
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

/* Style des autres éléments non-cliqués */
.widget-item:not(.clicked) {
  color: #898886;
  font-weight:400;  
  text-decoration: none;
  background-color: transparent; /* Réinitialiser la couleur */
}

.widget-line {
  position: absolute;
  bottom: 0px;
  bottom: 20px;
  left: 20px;
  right: 0;

  display: flex;
  justify-content: flex-start;
  align-items: center;

  overflow-x: auto;
  overflow-y: hidden; /* pour ne scroller qu'horizontalement */
  white-space: nowrap;

  padding-bottom : 0px;
  padding-left: 5px;
  box-sizing: border-box;

  scrollbar-width: none;       /* Firefox */
  scrollbar-color: #ccc #eee;  /* Firefox */
}




.widget-line::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.widget-line, .widget-line * {
  user-select: none; /* empêche la sélection du texte */
  -webkit-user-select: none; /* pour Safari */
}
.widget-line {
  -webkit-overflow-scrolling: touch; /* effet d'inertie fluide sur iOS/macOS */
}

/* bouton scrol menu mon espace */
.scroll-btn {
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
  width: 46px;
  height: 46px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: none; /* jamais visible par défaut */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.scroll-btn svg {
  width: 34px;
  height: 34px;
  fill: white;
}
.scroll-btn.left { left: 5px; }
.scroll-btn.right { right: 5px; }

/* when hover on the horizontal bare we show buttons */
/* Les boutons de défilement sont visibles uniquement sur les bureaux */
/*
.widget-scroll-wrapper:hover .scroll-btn {
  display: flex;
}
*/

/* Affichage conditionnel via JS + hover */
.widget-scroll-wrapper:hover.show-left .scroll-btn.left {
  display: flex;
}

.widget-scroll-wrapper:hover.show-right .scroll-btn.right {
  display: flex;
}

/* Masquer les boutons de défilement droite et gauche du menu header sur les appareils mobiles : iphone et tablette */
/*@media (max-width: 768px) {*/
@media (max-width: 1024px) {
  .widget-scroll-wrapper:hover .scroll-btn {
    display: none !important; /* Assurez-vous qu'ils ne s'affichent pas sur mobile */
  }
}


.widget-line {
  scrollbar-width: none; /* Firefox */
}
.widget-line::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}


.widget-line:hover::after {
  color: #444;  /* Couleur des trois points au survol */
}


.widget-line::-webkit-scrollbar {
  display: none; /* Masquer la barre de défilement par défaut */
}

.widget-line, .widget-line * {
  user-select: none;
  -webkit-user-select: none;
}

.scroll-indicator {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: none; /*flex;*/
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.scroll-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.scroll-indicator .dot.active {
  background-color: #00000c; /* Couleur du point actif */
}

.widget-line {
  -webkit-overflow-scrolling: touch;
}

/*
FIN DIV widget-scroll-wrapper : horizontal scrollable items
*/