/* new color variables */
        :root {
            --dark-color: #1B2739;
            --light-color:#ACADAF;
            --main-background: #F7F7F8;
            --primary-background: #41648C;
	        --primary-textColor: #FCFDEF;
            --secondary-background: #00AFB9;
            --secondary-textColor: #FCFDFF;
            --accent-background: #F07167;
            --accent-textColor: #0F0F0F;
            --primary-gradient: linear-gradient(180deg, #FFFFFF, #FFFFFF);
            --secondary-gradient: linear-gradient(180deg, #00AFB9, #006a70);
        }

        body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(#fbeea8); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--dark-color); /* text color of your form controls --primary-color*/
	        border-radius: 3; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}

	    .float-end {
             border-radius: 5px; /* border radius of your form controls */
        }
	    .float-none {
             border-radius: 5px; /* border radius of your form controls */
        }

        .MenuConnexion {
             border-radius: 5px; /* border radius of your form controls */
             background-color: var(--main-background); /* background color of your cards */
             text-align : left;
             padding: 3px 3px 3px 3px; /* padding of your article info */
             margin: 3px 3px 3px 3px; /* padding of your article info */ 
             color : var(--black); 

        }

        ul.MenuConnexion li {
             margin-left: auto;   /* pousse chaque item à droite */
        }
        
        .MenuConnect {            /* menu connection et inscription */
             display: inline-block;
             border-radius: 5px; /* border radius of your form controls */
             background-color: var(--white); /* background color of your cards */
             border: 1px solid var(--primary-background); /* border width, style and color of your info buttons */
             text-align : left;
             padding: 1px 12px 1px 3px; /* padding of your article info */
             color : var(--black) !important; 
        }


        .MenuConnect:hover {       /* menu connection et inscription changement couleur au passage */
             background-color: var(--green);   /* couleur du fond au survol */
             color: #fff !important;              /* couleur du texte au survol */
        }

        .MenuRegistered {
             border-radius: 5px; /* border radius of your form controls */
             background-color: var(--main-background); /* background color of your cards */
             text-align : left;
             padding: 10px 3px 3px 3px; /* padding of your article info */
             margin: 3px 3px 3px 3px; /* padding of your article info */ 
             color : var(--black); 
        }
ul.MenuRegistered li {
  margin-rigth: auto;   /* pousse chaque item à droite */
}

        .brand-logo  {           /* zone logo du site */
             width: 100%;        /* prend toute la largeur dispo */
             display: flex;              /* on utilise flexbox */
             justify-content: center;    /* centre horizontalement */
         }

         .brand-logo img {        /* centrage image dans zone logo diu site */
             display: block;             /* supprime les espaces parasites */
             margin: 0;                  /* reset héritages */
             max-width: 100%;            
             height: auto;  
         }

.icon-fa { color : var(--white); font-size: 1.5em;}
.icon-fb { color : var(--green);font-size: 1.5em;}
.icon-fc { color : var(--dark);font-size: 1.5em;}
.icon-fd { color : var(--blue);font-size: 1.5em;}
.icon-fe { color : var(--black);font-size: 1.5em;}

.MenuConnect:hover .icon-fa { color : var(--white) ;   background-color: var(--blue);font-size: 1.5em;}
.MenuConnect:hover .icon-fb { color : var(--white) ;   background-color: var(--green);font-size: 1.5em;}
/* Changer l’icône au survol */
.MenuConnect:hover .icon-fb::before {
  content: "\f506"; /* Unicode FontAwesome pour fa-user-slash */
}
.MenuConnect:hover .icon-fc { color : var(--white) ;   background-color: var(--green);}
/* Changer l’icône au survol */
.MenuConnect:hover .icon-fc::before {
  content: "\f007"; /* Unicode FontAwesome pour fa-user-slash */
}
.MenuConnect:hover .icon-fd { color : var(--white) ;   background-color: var(--blue);}

.navbar-brand {
  width: 100%;        /* prend toute la largeur dispo */
}

.location-container {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.location-icon {
    cursor: pointer;
    color: #0d6efd;
    transition: transform 0.2s ease;
}
.location-icon:hover {
    transform: scale(1.2);
    color: #084298;
}

.tooltip-location {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    max-width: 250px;
    z-index: 1000;
    display: none;
}

/* Fond assombri */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Fenêtre au centre */
.popup-content {
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.popup-content button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.popup-content button:hover {
    background-color: #0056b3;
}

/* Barre du haut (connexion / inscription / adhérer) */
/* --- MENU CONNEXION (en haut) --- */
.MenuConnexion {
  width: max-content;  /* empêche la UL de casser sur plusieurs lignes */
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  overflow-x: auto;
  white-space: nowrap;
}

/* Chaque item du menu connexion */
.MenuConnexion > li {
  display: inline-flex !important;
  background: transparent !important; /* Fond transparent */
  border: none !important;           /* Pas de bordure */
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* --- MENU CONNEXION (barre du haut) --- */

/* Liens du menu */
.MenuConnexion > li > a {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* A du menu */
.MenuConnexion > li > a,
.MenuConnexion a.nav-link {
  border: none !important;

  /* Pour être sûr qu’aucune couleur ne s’applique */
  background-color: transparent !important;
}

/* Barre du haut (programme / mes ateliers / tutors) */

/* --- MENU REGISTERED (en haut) --- */
.MenuRegistered {
  /*width: 200;  empêche la UL de casser sur plusieurs lignes */
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  overflow-x: auto;
  white-space: nowrap;
  padding-left: 100px !important; /* le menu commence 100px plus loin */
}

/* Chaque item du menu connexion */
.MenuRegistered > li {
  display: inline-flex !important;
  background: transparent !important; /* Fond transparent */
  border: none !important;           /* Pas de bordure */
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* --- MENU REGISTERED (barre du haut) --- */

/* Liens du menu */
.MenuRegistered > li > a {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap !important;
  flex-shrink: 0;
  padding: .5rem 0;
}

/* A du menu */
.MenuRegistered > li > a,
.MenuRegistered a.nav-link {
  border: none !important;

  /* Pour être sûr qu’aucune couleur ne s’applique */
  background-color: transparent !important;
}

/* Scroll horizontal fluide et sans barre sur mobile */
@media (max-width: 768px) {
  .MenuConnexion {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .MenuConnexion::-webkit-scrollbar {
    display: none;
  }
}

/* Barre du haut fixed */
.MenuConnexionContainer {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 65px;
  /* background: white; /* Sinon transparence = moche avec scroll */
  background: rgba(255, 255, 255, 0.85); /* 85% opaque */
  backdrop-filter: blur(6px); /* Optionnel: effet "frosted glass" moderne */
  z-index: 2000; /* Au-dessus de tout */
  border-bottom: 1px solid #ccc; /* Optionnel, style Google */
  padding: .5rem 0;
}

/* Barre du haut fixed */
.MenuRegisteredContainer {
  position: fixed;
  top: 0;
  left: 0px;;
  display: block;
  width: 90%;
  height: 65px;
  /* background: white; /* Sinon transparence = moche avec scroll */
  background: rgba(255, 255, 255, 0.0); /* 85% opaque */
  z-index: 2001; /* Au-dessus de tout */
  /*border-bottom: 1px solid #ccc; */ /* Optionnel, style Google */
  padding: .5rem 0;
}

/* On place le module logo dans la barre fixe */
#mod-custom125 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2002; /* Au-dessus de tout */
  left: 1rem;         /* marge gauche */
  display: flex;
  align-items: center;
}

/* Les images du logo */
#mod-custom125 img {
  width: auto;
  margin-right: 6px;
}

/* Empêche le contenu de passer sous la barre */
body {
  padding-top: 65px; /* Ajuste selon ta barre */
}

/* Icône bleue par défaut */
.feuille-btn i {
    color: var(--bs-primary);
}

/* Icône blanche en hover */
.feuille-btn:hover i {
    color: #fff;
}

/* Menu sticky */
.second-menu {
    position: fixed !important;
    top: 65px !important;   /* hauteur du premier menu */
    /*justify-content: center !important;*/ /* centre horizontalement */
    z-index: 1999;
    color: var(--black) !important;
      padding: 0 !important;
    margin: 0 !important;
}

.second-menu a {
    font-size: 0.85rem !important; /* ou 14px */
    line-height: 1.2;
}

/* Souligner tout le lien au hover */
.second-menu a:hover {
    text-decoration: underline !important;
    color: var(--black) !important; /* garder texte noir */
}

/* Changer la couleur de l'icône seulement */
.second-menu a:hover span {
    color: var(--blue) !important;
}
/* --- MENU SECOND MENU (en haut) --- */
.second-menu {
  /*width: 200;  empêche la UL de casser sur plusieurs lignes */
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  overflow-x: auto;
  white-space: nowrap;

}
.second-menu {
  width: max-content;  /* empêche la UL de casser sur plusieurs lignes */
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  /*overflow-x: auto; */
  /*overflow-y: hidden; */ /* empêche tout mouvement vertical */
  overflow-x: visible; /* empêche tout mouvement vertical */
  white-space: nowrap;
  /*padding-left: 85px !important; *//* le menu commence 100px plus loin */
}

.second-menuContainer {
    display: flex;
    justify-content: center;  /* centre horizontalement le contenu interne */
}

.second-menu {
    width: 100%;
    margin: 0 auto;
    padding-left: 0 !important;
}

/*@media (min-width: 576px) { .second-menu { max-width: 540px; } }
@media (min-width: 768px) { .second-menu { max-width: 720px; } }
@media (min-width: 992px) { .second-menu { max-width: 960px; } }
@media (min-width: 1200px) { .second-menu { max-width: 1140px; } }
@media (min-width: 1400px) { .second-menu { max-width: 1320px; } } */

/* Chaque item du menu connexion */
.second-menu > li {
  display: inline-flex !important;
  background: transparent !important; /* Fond transparent */
  border: none !important;           /* Pas de bordure */
  flex: 0 0 auto  !important;
  padding: 0 10px !important;
  white-space: nowrap;
}
/* Barre du haut fixed */
.second-menuContainer {
  position: fixed !important;
  top: 00 px;
  left: 0px;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;       /* centre le texte */
  /* background: white; /* Sinon transparence = moche avec scroll */
  background: rgba(255, 255, 255, 0.85); /* 85% opaque */
  z-index: 2001; /* Au-dessus de tout */
  border-bottom: 1px solid #ccc; /* Optionnel, style Google */
  padding: .5rem 0;
}

/* Sous-menu : alignement icône + texte */
.metismenu-item.level-2 > a {
    display: flex;
    align-items: center;   /* centre icône + texte verticalement */
    gap: 6px;              /* espace horizontal entre icône et texte */
    line-height: 1.0;      /* réduit l'espace vertical */
    padding: 4px 4px;      /* réduit la hauteur de chaque ligne */
}

/* Icônes */
.metismenu-item.level-2 > a span {
    display: inline-flex;  
    align-items: center;
    font-size: 1rem;     /* ajuste légèrement pour un meilleur alignement */
}

/* Réduit l’espace vertical dans le sous-menu */
.metismenu-item.level-2 > a {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 2px 8px;     /* réduit la hauteur */
    line-height: 1.1;     /* très compact */
    min-height: 0;        /* empêche les valeurs imposées */
}

/* Neutralise le padding trop grand de .p-2 sur les icônes */
.metismenu-item.level-2 > a span.p-2 {
    padding: 0 !important; /* supprime le gros padding Bootstrap */
    margin-right: 4px;     /* on remet un petit espace propre */
}

/* Conteneur du sous-menu */
.metismenu .mm-collapse {
    background: white;               /* fond blanc (ou autre) */
    border-radius: 10px;             /* bords arrondis */
    padding: 0.25rem 0;              /* réduit l’espace vertical interne */
    overflow: hidden;                /* évite que les coins internes dépassent */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* optionnel: joli effet */
}