@layer reset, base, page, header, footer;

@layer header {
/* === Global (desktop + mobile) — Banner + Menu === */
.banniere-container {
  background: url('../img/banniere1.jpg') center/cover no-repeat, #0b7a3e;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}
.banniere-container {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
}

.banniere-container .site-nav {
  background: url('../img/banniere1.jpg') center/cover no-repeat, #0b7a3e;
  color: #fff;
}

/* Title on banner (balanced) */
.banniere-container .titre-institut {
    font-size: 0.9em;
    color: #fff;
    text-align: left;      /* passe de center → left */
    font-weight: 700;
    margin-left: -350px;    /* décalage gauche – ajuste selon ton goût */
}

/* Réduction maximale espace MENU ↔ TITRE */
.banniere-container .site-nav {
    margin-bottom: 0 !important;  /* enlève l'espace sous les menus */
    padding-bottom: 0 !important;
}

.banniere-container {
    padding-top: 0 !important;    /* colle encore plus */
    padding-bottom: 0 !important;
}

.banniere-container .titre-institut {
    margin-top: -5px !important;  /* remonte le titre légèrement */
}

/* === RESPONSIVE HEADER & MENU (≤ 768px) ======================= */
/* === Mobile : sous-menus longs mais entièrement accessibles + logos COP réduits === */
@media (max-width: 768px) {

  /* Le sous-menu peut défiler si nécessaire */
  .site-nav .submenu {
    max-height: 65vh;          /* limite à ~65% de l'écran */
    overflow-y: auto;          /* scroll interne si trop d’éléments */
    margin-bottom: 4px !important;
    padding: 0 !important;
    display: none;             /* caché par défaut, géré au survol / JS */
  }

  /* On compacte la liste pour gagner de la place */
  .site-nav .submenu li {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav .submenu a {
    display: block;
    width: 100% !important;
    text-align: center !important;
    padding: 4px 6px !important;     /* moins haut */
    line-height: 1.2 !important;
    font-size: 0.85rem !important;   /* légèrement plus petit */
    white-space: normal !important;  /* retour à la ligne possible */
  }

  /* === Logos COP plus petits en responsive === */
  img[src*="logo27"],
  img[src*="logo28"],
  img[src*="logo29"],
  img[src*="logo30"] {
    max-height: 80px !important;   /* moitié de 110px */
    width: auto !important;
    height: auto !important;
  }

/* Espace entre le logo COP (logo27/28/29/30) et le titre */
.title-wrapper .logo-title {
    display: block;
    margin-bottom: 10px !important;   /* distance entre le logo et le <h1> */
}
/* === FIX RESPONSIVE : centrer le logo IESD + le titre IESD === */
@media (max-width: 768px) {

    /* Centrer le bloc logo */
    .logo-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    .logo-container img {
        margin: 0 auto !important;   /* force l'image à être centrée */
        display: block !important;
    }

    /* Centrer le titre IESD */
    .banniere-container .titre-institut {
        margin: 0 auto !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .banniere-container .titre-institut h1 {
        text-align: center !important;
        margin: 0 auto !important;
    }
}
}
/* =========================
   NAVIGATION ENTRE LES COP
   ========================= */

.cop-mini-nav {
  width: 100%;
  background: #f5f5f5;
  margin: 0 0 -50px; /* distance minimale avec la bannière */
  padding: 5px 0;
  position: relative;
  z-index: 5;
  clear: both;
}

.cop-mini-nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 10px;

  display: flex;
  justify-content: flex-end;  /* alignement à droite */
  align-items: center;
  flex-wrap: wrap;
  gap: 12px; /* distance minimale entre logos */
}

/* Bloc lien COP */
.cop-mini-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 0.8rem;
  color: #00324d;
  transition: transform 0.25s ease-in-out;
}

/* Logos COP */
.cop-mini-link img {
  display: block;
  height: 60px !important;
  width: auto !important;
  object-fit: contain;
  transition: transform 0.25s ease-in-out;
}

/* HOVER : zoom 1,5x */
.cop-mini-link:hover img {
  transform: scale(1.5);
}

/* Bouton "COP — vue d’ensemble" */
.cop-mini-link.cop-main {
  padding: 6px 10px;
  border: 1px solid #00324d;
  border-radius: 999px;
  font-weight: 600;
  background: #ffffff;
  text-transform: uppercase;
  transition: transform 0.25s ease-in-out;
}

/* Hover bouton */
.cop-mini-link.cop-main:hover {
  transform: scale(1.12);
}

/* Responsive mobile */
@media (max-width: 780px) {
  .cop-mini-nav-inner {
    justify-content: center;
  }

  .cop-mini-link img {
    height: 42px !important;
  }
}
.cop-mini-link:hover img {
  transform: scale(1.5);
  filter: drop-shadow(0 0 10px rgba(0, 150, 255, 0.6));
}
/* =========================
   PASTILLE FLOTTANTE COP
   ========================= */

.cop-floating-badge {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}

.cop-floating-badge picture,
.cop-floating-badge img {
  display: block !important;
}

.cop-floating-badge img {
  max-width: 60px !important;
  height: auto !important;
}

/* Un petit effet survol sur PC (facultatif) */
@media (hover: hover) {
  .cop-floating-badge:hover {
    transform: scale(1.06);
    transition: transform 0.2s ease-in-out;
  }
}

/* Version mobile : légèrement plus petite */
@media (max-width: 780px) {
  .cop-floating-badge {
    right: 10px !important;
    bottom: 10px !important;
    width: 58px !important;
    height: 58px !important;
  }

  .cop-floating-badge img {
    max-width: 48px !important;
  }
}

/* =========================
   NAVIGATION ENTRE LES COP
   ========================= */

.cop-mini-nav {
  margin: 10px 0 25px;
}

.cop-mini-nav-inner {
  display: flex;
  justify-content: flex-end;   /* aligné à droite */
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Chaque logo + texte */
.cop-mini-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 0.85rem;
  color: #00324d;
}

.cop-mini-link span {
  margin-top: 4px;
}

.cop-mini-link:hover {
  text-decoration: underline;
}

/* Les logos des COP (30, 29, 28, 27) */
.cop-mini-link img {
  display: block;
  height: 48px;      /* ~ hauteur du titre visuellement */
  width: auto;
  object-fit: contain;
}

/* Lien "COP – vue d’ensemble" */
.cop-mini-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 10px;
  border: 1px solid #00324d;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Responsive : centrer sur mobile */
@media (max-width: 780px) {
  .cop-mini-nav-inner {
    justify-content: center;
  }
}

/* =========================
   PASTILLE FLOTTANTE COP
   ========================= */

.cop-floating-badge {
  position: fixed;
  right: 12px;
  bottom: 70px;              /* un peu au-dessus du bas */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;       /* devant tout */
}

.cop-floating-badge picture,
.cop-floating-badge img {
  display: block;
}

.cop-floating-badge img {
  max-width: 48px;
  height: auto;
}


/* =========================
   Pastille COP - mobile
   ========================= */
@media (max-width: 780px) {
  .cop-floating-badge {
    display: none !important;
  }
}
/* Désactiver le clic sur le logo en mobile pour éviter
   les retours involontaires vers l'accueil (index.php) */
@media (max-width: 780px) {
  .logo-container a {
    pointer-events: none;
  }
}