@charset "utf-8";

/* =========================
   Base (lisibilité web)
========================= */
html{
  font-size: 100%;
}

body{
  background: #333393 url(fond.png) fixed no-repeat 0 0;
  color: #000000;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

/* =========================
   Template / couleurs
========================= */
.template_color{ color: #333393; }
.template_border_color{ border-color: #000000; }
.template_backgroundcolor{ color: #000000; } /* conservé tel quel */

/* =========================
   Titres
========================= */
.titre{
  text-transform: uppercase;
  color: #333393;
  font-size: 1rem;
}

.formcontent .titre{
  text-transform: none;
  color: inherit;
  font-size: 1rem;
}

/* =========================
   Header
========================= */
#template_header,
#template_header a{
  color: #000000;
}

/* =========================
   Largeur layout
========================= */
#container{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* =========================
   Main menu : structure
   - admin au-dessus à droite
   - menu principal dessous en 5 colonnes
========================= */
#mainmenu{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Nettoyage UL */
#mainmenu > ul.admin,
#mainmenu > ul.fll{
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- ADMIN : largeur = 1/5, collé à droite, 12px ---- */
#mainmenu > ul.admin{
  order: 0;

  width: calc(100% / 5);
  align-self: flex-end;

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

  font-size: 12px;
  line-height: 1.2;
}

/* Dropdowns admin inclus : restent à 12px */
#mainmenu > ul.admin *{
  font-size: inherit;
}

/* Dropdown aligné à droite sous "Espace connecté" */
#mainmenu > ul.admin > li{
  position: relative;
}
#mainmenu > ul.admin > li > ul{
  right: 0;
  left: auto;
  z-index: 40;
}

/* ---- MENU PRINCIPAL : 5 colonnes qui remplissent la largeur ---- */
#mainmenu > ul.fll{
  order: 1;
  width: 100%;

  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* 5 parts égales */
#mainmenu > ul.fll > li{
  flex: 1 1 0;
}

/* Liens du menu */
#mainmenu > ul.fll > li > a{
  display: block;
  width: 100%;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  text-decoration: none; /* pratique si ton thème sous-ligne */
  padding: 12px 10px;    /* un peu de confort */
  color: inherit;
}

/* Si le thème impose des floats via .fll/.flr */
#mainmenu > ul.fll,
#mainmenu > ul.fll > li{
  float: none;
}

/* =========================
   Hover / focus : couleurs par bouton
========================= */
#mainmenu ul.fll > li:nth-child(1):hover,
#mainmenu ul.fll > li:nth-child(1):focus-within{
  background-color: #5a95c2;
}

#mainmenu ul.fll > li:nth-child(2):hover,
#mainmenu ul.fll > li:nth-child(2):focus-within{
  background-color: #e69742;
}

#mainmenu ul.fll > li:nth-child(3):hover,
#mainmenu ul.fll > li:nth-child(3):focus-within{
  background-color: #f3ca58;
}

/* 3e bouton : texte noir au survol */
#mainmenu ul.fll > li:nth-child(3):hover > a,
#mainmenu ul.fll > li:nth-child(3):focus-within > a{
  color: #000000 !important;
}

#mainmenu ul.fll > li:nth-child(4):hover,
#mainmenu ul.fll > li:nth-child(4):focus-within{
  background-color: #3d8a41;
}

/* 5e bouton : fond blanc + texte noir au survol */
#mainmenu ul.fll > li:nth-child(5):hover,
#mainmenu ul.fll > li:nth-child(5):focus-within{
  background-color: #ffffff;
}

#mainmenu ul.fll > li:nth-child(5):hover > a,
#mainmenu ul.fll > li:nth-child(5):focus-within > a{
  color: #000000 !important;
}

/* =========================
   Bouton / dropdown quicklogin (inchangé)
========================= */
#template_link .filariane_quicklogin .dropbtn2{
  background-color: #df543b;
  color: #ffffff;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
}

#template_link .filariane_quicklogin .dropbtn2 i{
  color: #ffffff;
}

#template_link .filariane_quicklogin .dropbtn2 .caret-grey{
  border-top-color: #ffffff;
}

#template_link .filariane_quicklogin .dropdown-content{
  background-color: #df543b;
  border-radius: 8px;
  overflow: hidden;
}

#template_link .filariane_quicklogin .dropdown-content a{
  color: #ffffff;
  font-weight: 700;
}

#template_link .filariane_quicklogin .dropdown-content a:hover{
  background-color: #c44732;
  color: #ffffff;
}

/* =========================================================
   SÉPARATION ADMIN vs MENU — CSS-ONLY
   Option A (recommandée) ACTIVE
   Option B (admin détaché visuellement) plus bas
========================================================= */

/* =========================
   OPTION A (ACTIVE) : séparation nette, stable
========================= */
#mainmenu{
  gap: 10px;            /* espace entre toolbar admin et nav */
  overflow: visible;    /* sécurise dropdowns */
}

/* barre admin “toolbar” */
#mainmenu > ul.admin{
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 0px solid rgba(0,0,0,.15);
}

/* barre nav principale */
#mainmenu > ul.fll{
  border-radius: 10px;
  overflow: hidden; /* hover backgrounds propres */
  border: 1px solid rgba(0,0,0,.15);
}

/* =========================
   OPTION B (INACTIVE) : admin “détaché” visuellement au-dessus
   Pour activer :
   1) commente tout le bloc OPTION A
   2) décommente tout le bloc OPTION B ci-dessous
========================= */
/*
:root{
  --adminbar-h: 40px;
}

#mainmenu{
  position: relative;
  padding-top: var(--adminbar-h);
  gap: 0;
  overflow: visible;
}

#mainmenu > ul.admin{
  position: absolute;
  top: 0;
  right: 0;

  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(0,0,0,.15);
  z-index: 30;
}

#mainmenu > ul.fll{
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.15);
}
*/

/* =========================
   Responsive (recommandé)
========================= */
@media (max-width: 900px){
  #mainmenu > ul.fll{
    flex-wrap: wrap;
  }

  #mainmenu > ul.fll > li{
    flex: 1 1 50%;
  }

  #mainmenu > ul.fll > li > a{
    white-space: normal;
  }

  /* admin plus naturel sur tablette */
  #mainmenu > ul.admin{
    width: auto;
  }
}

@media (max-width: 520px){
  #mainmenu > ul.fll > li{
    flex: 1 1 100%;
  }

  /* admin plus lisible sur mobile */
  #mainmenu > ul.admin{
    align-self: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  /* dropdown admin : éviter qu’il sorte à droite sur petit écran */
  #mainmenu > ul.admin > li > ul{
    right: auto;
    left: 0;
  }
}