/* ===== HEADER SANS ESPACE MAIS VISIBLE ===== */
.container-header {
    position: absolute !important;  /* Ne prend plus d'espace dans le flux */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease !important;
    z-index: 1030 !important;
    padding: 5px 0 !important;  /* Garde un peu d'espace pour le contenu */
    margin: 0 !important;
}

/* Version après scroll (fond bleu) */
.container-header.header-scrolled {
    background-color: #004080 !important;
    position: fixed !important;  /* Devient fixed au scroll */
    animation: slideDown 0.3s ease-in-out;
}

/* Animation d'apparition */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Compense l'espace UNIQUEMENT si nécessaire */
body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Votre première section SPPB colle parfaitement */
.sp-page-builder .sppb-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.container-header .site-description,
.container-header .mod-menu a {
    color: #ffffff; /* Change text and link color here */
}
.container-topbar {
    background-color: #C00000;
}

/* Supprime l'espace en haut de la première section SPPB */
#sp-page-builder .page-content .sppb-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Supprime les marges du conteneur principal */
.sp-page-builder .page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Style du menu off-canvas */
.offcanvas {
    background-color: var(--cassiopeia-color-primary);
    color: white;
}
.offcanvas .mod-menu {
    flex-direction: column;
}
.offcanvas .mod-menu a {
    color: white;
    padding: 10px 0;
    text-decoration: none;
}
.offcanvas .mod-menu a:hover {
    text-decoration: underline;
}

/* Responsive : Cacher le menu normal et afficher le bouton sur mobile et desktop */
@media (max-width: 2000px) {
    .btn.hamburger {
        display: flex; /* Afficher le bouton sur mobile/tablette */
    }
    .navbar.custom-nav {
        display: none; /* Cacher le menu horizontal normal */
    }
}

/* Style du label MENU */
.menu-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 4px;
    color: #004080;
    text-transform: uppercase;
}

/* Pour les thèmes sombres, adaptez la couleur */
.dark .menu-label,
[data-bs-theme="dark"] .menu-label {
    color: #fff;
}

/* Ajustement responsive (optionnel) */
@media (max-width: 2000px) {
    .menu-label {
        font-size: 10px;
        margin-top: 3px;
    }
}
/* Structure de l'en-tête */
.container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
/* Conteneur global du hamburger + mention */
.hamburger-wrapper {
    background-color: #ffffff !important;
    width: 60px !important;           /* Largeur fixe */
    height: 65px !important;          /* Hauteur = largeur → carré parfait */
    margin-top : 25px;
    border-radius: 0 !important;      /* Pas de coins arrondis → carré */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Effet au survol du bloc entier */
.hamburger-wrapper:hover {
    background-color: #f5f5f5 !important;  /* Fond légèrement grisé */
}

/* Style du bouton hamburger (sans fond propre) */
.btn.hamburger {
    background: transparent !important;     /* Transparent pour hériter du fond du wrapper */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

/* Style des 3 traits */
.btn.hamburger span {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background-color: #004080 !important;  /* Bleu */
    margin: 3px 0;
    transition: 0.3s;
}

/* Style de la mention MENU */
.menu-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 6px;
    color: #004080 !important;              /* Bleu comme l'icône */
    text-transform: uppercase;
    font-family: inherit;
}

/* Animation au survol du wrapper (optionnel) */
.hamburger-wrapper:hover .btn.hamburger span {
    background-color: #002b5c !important;   /* Bleu plus foncé */
}

.hamburger-wrapper:hover .menu-label {
    color: #002b5c !important;
}

/* Animation quand le menu est ouvert */
.hamburger-wrapper.active .btn.hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-wrapper.active .btn.hamburger span:nth-child(2) {
    opacity: 0;
}

.hamburger-wrapper.active .btn.hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Pour les thèmes sombres, le fond reste blanc */
[data-bs-theme="dark"] .hamburger-wrapper {
    background-color: #ffffff !important;
}

[data-bs-theme="dark"] .menu-label,
[data-bs-theme="dark"] .btn.hamburger span {
    color: #004080 !important;
    background-color: #004080 !important;
}
/* Le logo (votre module personnalisé) forcé à gauche */
.container-header .grid-child:first-child,
[data-position="menu"] .mod-custom {
    order: 1;
    margin-right: auto;
}
/* Bouton de fermeture (X) */
.offcanvas-header .btn-close {
    background-color: #ffffff !important;
    opacity: 1;
    border-radius: 0 !important;           /* Carré aussi */
    width: 30px;
    height: 30px;
}
/* Le conteneur du hamburger forcé à droite */
.hamburger-wrapper {
    order: 3;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Si le module menu contient aussi autre chose */
.container-header .grid-child:last-child {
    order: 2;
}
/* Supprime le soulignement de tous les boutons SP Page Builder */
.sppb-btn,
.sppb-btn span,
.sppb-btn a,
.sppb-addon-button .sppb-btn-link {
    text-decoration: none !important;
}

/* Supprime également le soulignement au survol */
.sppb-btn:hover,
.sppb-btn span:hover,
.sppb-btn a:hover {
    text-decoration: none !important;
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ===== HEADER STICKY TRANSPARENT PAR DÉFAUT ===== */
.container-header {
    background-color: transparent !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: none !important;
}

/* ===== HEADER APRÈS SCROLL ===== */
.container-header.header-scrolled {
    background-color: #004080 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* ===== COULEUR DU TEXTE ET DES LIENS ===== */
/* Version transparente (par défaut) */
.container-header .site-title a,
.container-header .mod-menu a,
.container-header .mod-menu .nav-link {
    color: #ffffff !important; /* Blanc sur fond transparent */
    transition: color 0.3s ease;
}

/* Version après scroll (sur fond bleu) */
.container-header.header-scrolled .site-title a,
.container-header.header-scrolled .mod-menu a,
.container-header.header-scrolled .mod-menu .nav-link {
    color: #ffffff !important; /* Reste blanc sur fond bleu */
}

/* Effet au survol */
.container-header .mod-menu a:hover,
.container-header.header-scrolled .mod-menu a:hover {
    opacity: 0.8 !important;
}

/* ===== MENU HAMBURGER (si off-canvas) ===== */
/* Version transparente */
.container-header .hamburger-wrapper {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Version après scroll */
.container-header.header-scrolled .hamburger-wrapper {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Bouton hamburger (traits toujours blancs pour contraster) */
.container-header .btn.hamburger span,
.container-header.header-scrolled .btn.hamburger span {
    background-color: #ffffff !important;
}

/* Label MENU */
.container-header .menu-label,
.container-header.header-scrolled .menu-label {
    color: #ffffff !important;
}