@charset "utf-8";

/* ===== Minimal base ===== */
:root{
  --bg:#f7f7f9; --panel:#fff; --fg:#1f2328; --muted:#6b7280;
  --accent:#7c3aed; --line:#e5e7eb;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg);
      font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif; }
img{ max-width:100%; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== Layout ===== */
#entete, header, #bandeau{
  position:relative !important;
  z-index:1000 !important;        /* keep header above everything */
  background:var(--panel);
  border-bottom:1px solid var(--line);
  overflow:visible !important;     /* allow dropdown to escape */
}
#template_wrapper{
  max-width:1200px; margin:1rem auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px; padding:1rem;
}
#content, #centre, .page_centre, .contenu, .texte, .bloc{
  position:static !important;
  z-index:auto !important;
  overflow:visible !important;     /* prevent clipping the dropdown */
  transform:none !important; filter:none !important; opacity:1 !important;
}

/* ===== Simple typography ===== */
h1,h2,h3{ margin:1.25rem 0 .5rem; line-height:1.3; }
h1{ font-size:1.75rem; } h2{ font-size:1.35rem; } h3{ font-size:1.1rem; }
p{ margin:.75rem 0; color:var(--fg); }
.titre{ margin:0 0 .5rem; font-weight:700; }

/* ===== Header nav & dropdown (generic, works with Sciencesconf menus) ===== */
#entete nav ul, #entete .menu, #entete .menu ul{ list-style:none; margin:0; padding:0; }
#entete nav ul li{ position:relative; display:inline-block; }
#entete nav ul li > a{ display:inline-block; padding:.5rem .75rem; border-radius:6px; }
#entete nav ul li:hover > a, #entete nav ul li:focus-within > a{ background:#f3f4f6; }

#entete nav ul li ul,
#entete .menu li ul,
#entete .dropdown-menu,
#entete [role="menu"]{
  position:absolute !important;
  top:100% !important; left:0 !important;
  display:none; min-width:180px; margin-top:.25rem;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:1001 !important;         /* above header and page card */
  overflow:visible !important;
}
#entete nav ul li:hover > ul,
#entete nav ul li:focus-within > ul,
#entete .dropdown:hover > .dropdown-menu,
#entete .dropdown:focus-within > .dropdown-menu{ display:block; }

#entete nav ul li ul li{ display:block; }
#entete nav ul li ul a{ display:block; padding:.5rem .6rem; border-radius:6px; }
#entete nav ul li ul a:hover{ background:#f3f4f6; }

/* Fallback: ensure “Connexion/Utilisateur” blocks are on top even without nav UL */
#entete [class*="connex"], #entete [class*="deconn"], #entete [class*="user"], #entete .dropdown{
  position:relative !important; z-index:1001 !important; overflow:visible !important;
}

/* ===== Tables & buttons (minimal) ===== */
table{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); }
th,td{ padding:.5rem .75rem; border-bottom:1px solid var(--line); text-align:left; }
th{ background:#fafafa; font-weight:600; }
button,.btn,.button,input[type=submit]{
  border:1px solid var(--line); background:#fff; color:var(--fg);
  padding:.5rem .75rem; border-radius:6px; cursor:pointer;
}
button:hover,.btn:hover,.button:hover,input[type=submit]:hover{ background:#f3f4f6; }

/* ===== Footer ===== */
footer{ border-top:1px solid var(--line); color:var(--muted); padding:1rem 0; }

/* === Left side menu active / selected item === */
.menu_niveau_1_on,
.menu_niveau_1_on > a,
.menu_niveau_2_on,
.menu_niveau_2_on > a {
  background-color: #d487e7 !important; /* purple accent */
  color: #fff !important;                     /* white text */
  border-radius: 6px;
}

/* Optional: hover states stay purple but lighten slightly */
.menu_niveau_1_on > a:hover,
.menu_niveau_2_on > a:hover {
  background-color: #d487e7 !important; /* lighter purple on hover */
  color: #fff !important;
}