/* ======================================================================
   BLOC — TOPBAR (bande fine titre + sous-titre sur 1 ligne)
   ====================================================================== */
.container-topbar{
  /* Bleu -> violet en douceur (évite la “cassure” visuelle) */
  background: linear-gradient(
    180deg,
    var(--sep-topbar-bg) 0%,
    color-mix(in srgb, var(--sep-topbar-bg) 78%, var(--sep-nav-bg-1)) 100%
  );
  color: var(--sep-topbar-text);

  /* +2px pour éviter tout “cut” sur certaines polices/OS */
  padding: calc(var(--sep-topbar-pad-y) + 2px) var(--sep-topbar-pad-x);

  position: relative;
  z-index: 3; /* au-dessus des décors */
}

/* Fallback si color-mix non supporté */
@supports not (color-mix(in srgb, #000 50%, #fff)){
  .container-topbar{ background: var(--sep-topbar-bg); }
}

/* Module de bande haute */
.container-topbar .sep-topstrip{
  display: flex;
  align-items: center; /* baseline -> center (évite le “titre coupé”) */
  gap: .5rem;
  flex-wrap: wrap;              /* mobile : ça repasse proprement */
  line-height: 1.35;
  position: relative;
  z-index: 1;                   /* au-dessus des pseudo-éléments */
}

.sep-topstrip__title{
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.sep-topstrip__tag{
  opacity: .92;
  font-weight: 500;
}

.sep-topstrip__dot{
  opacity: .65;
}





/* ##########################################################################
   BLOC 01 — HEADER / NAV (Accueil & site)
   - Dégradé fin entre topbar et nav
   - Vague très légère (optionnelle)
   - Menu plus net (hover/actif)
   ########################################################################## */

/* --- NAV : fond en dégradé violet (au lieu du “brique” actuel) --- */
:where(.container-header, .container-nav){
  background: linear-gradient(180deg,
    var(--sep-nav-bg-1) 0%,
    color-mix(in srgb, var(--sep-nav-bg-1) 78%, var(--sep-nav-bg-2)) 45%,
    var(--sep-nav-bg-2) 100%
  );
}

/* --- Transition douce entre topbar (bleu) et nav (violet) --- */
.container-topbar{
  position: relative;
}
.container-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: 14px;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(0,27,76,1) 0%,
    rgba(0,27,76,.55) 20%,
    rgba(76,29,149,.70) 70%,
    rgba(76,29,149,0) 100%
  );
}

/* --- Vague animée (optionnelle) : une “respiration”, pas une déco lourde --- */
:where(.container-header, .container-nav){
  position: relative;
  overflow-y: visible; /* crucial: ne pas couper les dropdowns */
}
:where(.container-header, .container-nav)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 26px;
  pointer-events:none;
  opacity: var(--sep-wave-opacity);

  /* SVG vague en background (repeat-x) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26'%3E%3Cpath d='M0 18 C 30 8, 60 28, 90 18 S 150 8, 180 18 S 210 28, 240 18 V26 H0 Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 240px 26px;
  animation: sepWave 18s linear infinite;
}
@keyframes sepWave{
  from{ background-position-x: 0; }
  to{ background-position-x: 240px; }
}
@media (prefers-reduced-motion: reduce){
  :where(.container-header, .container-nav)::after{ animation: none; }
}

/* --- Menu : lisibilité + état actif clair --- */
:where(.container-header, .container-nav) .navbar-nav .nav-link{
  color: var(--sep-nav-ink);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .95rem .95rem;
  text-decoration: none;
  position: relative;
}

/* hover */
:where(.container-header, .container-nav) .navbar-nav .nav-link:hover{
  color: #fff;
}

/* underline discret sur hover/actif (évite l’effet “bouton”) */
:where(.container-header, .container-nav) .navbar-nav .nav-link::after{
  content:"";
  position:absolute;
  left: .95rem;
  right: .95rem;
  bottom: .55rem;
  height: 2px;
  background: rgba(255,255,255,.0);
  transform: scaleX(.6);
  transform-origin: left;
  transition: transform .18s ease, background .18s ease;
}
:where(.container-header, .container-nav) .navbar-nav .nav-link:hover::after{
  background: rgba(255,255,255,.55);
  transform: scaleX(1);
}

/* actif (menu current / active) */
:where(.container-header, .container-nav) .navbar-nav .active > .nav-link,
:where(.container-header, .container-nav) .navbar-nav .nav-link[aria-current="page"]{
  color: #fff;
}
:where(.container-header, .container-nav) .navbar-nav .active > .nav-link::after,
:where(.container-header, .container-nav) .navbar-nav .nav-link[aria-current="page"]::after{
  background: rgba(255,255,255,.78);
  transform: scaleX(1);
}

/* burger (mobile) : garder lisible sur violet */
:where(.container-header, .container-nav) .navbar-toggler{
  border-color: rgba(255,255,255,.35);
}
:where(.container-header, .container-nav) .navbar-toggler-icon{
  filter: brightness(6);
}

/* Zone haute : un peu plus d’air */


.container-nav .navbar{
  position: relative;
  z-index: 1; /* au-dessus de la vague (::after) */
  padding-block: .35rem;
}

@media (min-width: 992px){
  :where(.container-header, .container-nav) .navbar-nav .nav-link{
    padding: 1.05rem .95rem; /* + de hauteur visuelle */
  }
}

/* =============================================================================
   HOTFIX — HEADER / NAV
   Raison : :where() a une spécificité nulle → Cassiopeia écrase background/overflow.
   ============================================================================= */

.container-header,
.container-nav{
  background: linear-gradient(180deg, var(--sep-nav-bg-1), var(--sep-nav-bg-2)) !important;
  position: relative;
  overflow-y: visible !important; /* ne pas couper les dropdowns */
}

/* vague derrière le contenu */
.container-header::after,
.container-nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 26px;
  pointer-events:none;
  opacity: var(--sep-wave-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26'%3E%3Cpath d='M0 18 C 30 8, 60 28, 90 18 S 150 8, 180 18 S 210 28, 240 18 V26 H0 Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 240px 26px;
  animation: sepWave 18s linear infinite;
}

/* contenu du menu au-dessus */
.container-nav .navbar{
  position: relative;
  z-index: 2;
}

/* ======================================================================
   BLOC — MENU : rester sur une ligne (grand écran)
   - Sur mobile, Cassiopeia bascule en menu burger : on ne force pas.
   ====================================================================== */

@media (min-width: 992px){
  .container-nav .navbar-nav{
    flex-wrap: nowrap;
    gap: .25rem;
  }
  .container-nav .navbar-nav > li{
    white-space: nowrap;
  }
}


/* ======================================
   FOOTER Cassiopeia revisité : colonnes
   ====================================== */

.footer .grid-child{
  flex-wrap: wrap;              /* autorise plusieurs modules sur plusieurs lignes */
  align-items: flex-start;
  row-gap: 2rem;
}

/* Cassiopeia change parfois la direction en < 992px : on enlève pour laisser Bootstrap gérer */
@media (max-width: 991.98px){
  .footer .grid-child{ flex-direction: unset; }
}

/* Optionnel : titres plus discrets */
.footer h3{ font-size: 1.10rem; }

/* Optionnel : paragraphes plus discrets */
.footer p{ font-size: 0.80rem; }

/* =========================
   FOOTER : même couleur que topbar + liens plus petits
========================= */

.footer{
  background: var(--sep-footer-bg);
  color: var(--sep-footer-text);
}

/* texte & titres lisibles sur fond sombre */
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
  color: var(--sep-footer-text);
}

/* Texte “normal” un peu plus doux */
.footer p, .footer li, .footer small{
  color: var(--sep-footer-text-muted);
}

/* Liens = plus visibles + repère visuel */
.footer a,
.footer .nav-link,
.footer .mod-menu a{
  color: var(--sep-footer-link);
  font-size: var(--sep-footer-link-size);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
  text-decoration-color: rgba(255,255,255,.45);
}

.footer a:hover,
.footer a:focus-visible{
  color: var(--sep-footer-link-hover);
  text-decoration-color: currentColor;
}

/* Menus footer plus compacts (évite le footer “trop haut”) */
.footer .mod-menu .nav-link,
.footer .mod-menu a{
  padding: .15rem 0;
}
.footer .nav{ gap: .15rem; }
.footer p{ margin: 0 0 .35rem; }

/* =========================
   Footer — module contact
========================= */
.footer .sep-footer-contact .sep-foot-title{
  margin: 0 0 .6rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.footer .sep-footer-contact .sep-foot-kicker{
  margin: .35rem 0 .2rem;
  font-weight: 700;
  opacity: .92;
}

.footer .sep-footer-contact .sep-foot-line{
  margin: 0 0 .25rem;
  line-height: 1.45;
}

.footer .sep-footer-contact .sep-foot-label{
  color: var(--sep-footer-text-muted);
  font-weight: 600;
}

.footer .sep-footer-contact .sep-foot-sep{
  opacity: .7;
  padding-inline: .25rem;
}

.footer .sep-footer-contact .sep-foot-hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.28);
  margin: .8rem 0;
}

/* ======================================================================
   FIX — Dropdowns (sous-menus) masqués / “coupés”
   Cause typique : le header est sous le contenu (z-index trop bas)
   + parfois overflow hérité.
   ====================================================================== */

/* Remonte tout le header au-dessus du contenu de page */
header.header,
.container-topbar,
.container-header,
.container-nav{
  position: relative;
  z-index: 1030; /* > contenu normal, < modals Bootstrap (1050+) */
}

/* Topbar légèrement au-dessus si besoin */
.container-topbar{ z-index: 1032; }
.container-nav{ z-index: 1031; }

/* Assure qu’aucun ancestor ne clippe les dropdowns */
header.header,
.container-header,
.container-nav,
.container-nav .navbar,
.container-nav .navbar-collapse,
.container-nav .navbar-nav,
.container-nav .mod-menu,
.container-nav .metismenu{
  overflow: visible !important;
}

/* Remonte explicitement le dropdown */
.container-nav .dropdown-menu,
.container-nav .mod-menu ul ul{
  z-index: 1040;
}

/* Option : ancrage robuste si un parent est en position: static */
.container-nav .navbar-nav > li{
  position: relative;
}


/* ======================================================================
   TOPBAR — logo SEP Nancy
   Nouvelle composition : titre / logo / baseline
   ====================================================================== */

/* un peu plus d’air dans la bande haute */
.container-topbar{
  padding: calc(var(--sep-topbar-pad-y) + 8px) var(--sep-topbar-pad-x);
}

/* grille équilibrée en 3 zones */
.container-topbar .sep-topstrip{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .9rem 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* colonne gauche */
.sep-topstrip__title{
  justify-self: end;
  text-align: right;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* colonne centre */
.sep-topstrip__brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sep-topstrip__logo{
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  flex: 0 0 auto;
}

/* colonne droite */
.sep-topstrip__tag{
  justify-self: start;
  text-align: left;
  opacity: .92;
  font-weight: 500;
  white-space: nowrap;
}

/* le point n’est plus nécessaire dans cette version */
.sep-topstrip__dot{
  display: none !important;
}

/* tablette */
@media (max-width: 991.98px){
  .container-topbar{
    padding: calc(var(--sep-topbar-pad-y) + 6px) var(--sep-topbar-pad-x);
  }

  .container-topbar .sep-topstrip{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo title"
      "logo tag";
    gap: .2rem .8rem;
    justify-content: center;
  }

  .sep-topstrip__brand{
    grid-area: logo;
    align-self: center;
  }

  .sep-topstrip__title{
    grid-area: title;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .sep-topstrip__tag{
    grid-area: tag;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .sep-topstrip__logo{
    width: 46px;
    height: 46px;
  }
}

/* mobile */
@media (max-width: 767.98px){
  .container-topbar{
    padding: calc(var(--sep-topbar-pad-y) + 5px) var(--sep-topbar-pad-x);
  }

  .sep-topstrip__logo{
    width: 42px;
    height: 42px;
  }

  .sep-topstrip__title{
    font-size: .95rem;
    line-height: 1.2;
  }

  .sep-topstrip__tag{
    font-size: .84rem;
    line-height: 1.2;
  }
}

/* très petit écran */
@media (max-width: 480px){
  .container-topbar .sep-topstrip{
    grid-template-columns: auto 1fr;
    gap: .15rem .65rem;
  }

  .sep-topstrip__logo{
    width: 38px;
    height: 38px;
  }

  .sep-topstrip__tag{
    display: none;
  }
}