/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* ==========================================
   ÉTAT 1 : En haut de page (transparent)
   ========================================== */

header.fixed_header.headroom--top {
    background-color: rgba(255, 255, 255, 0);
    padding: 10px 0;
    box-shadow: none;
    transition: all 0.3s ease-in-out;
}

/* Logo grand */
header.fixed_header.headroom--top .logo_sticky {
    width: 175px;
    transition: all 0.3s ease-in-out;
}

header.fixed_header.headroom--top .logo_sticky img {
    /*max-height: 60px;*/
    transition: all 0.3s ease-in-out;
}

/* Container avec padding top */
header.fixed_header.headroom--top .container {
    padding-top: 40px !important;
    transition: all 0.3s ease-in-out;
}

/* Liens menu */
header.fixed_header.headroom--top nav ul li a {
    color: #EEEEEE;
    font-size: 18px;
    transition: all 0.3s ease-in-out;
}

/* Hamburger blanc */
header.fixed_header.headroom--top .hamburger__inner,
header.fixed_header.headroom--top .hamburger__inner::before,
header.fixed_header.headroom--top .hamburger__inner::after {
    background-color: #fff;
}


/* ==========================================
   ÉTAT 2 : Au scroll (header réduit + noir)
   ========================================== */

header.fixed_header.headroom--not-top {
    background-color: rgba(0,0,0,.8) !important;
    padding: 5px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(10px);
}

/* ===== LOGO RÉDUIT ===== */
header.fixed_header.headroom--not-top .logo_sticky {
    width: 120px !important;
    transition: all 0.3s ease-in-out;
}

header.fixed_header.headroom--not-top .logo_sticky img {
    max-height: 50px !important;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* ===== CONTAINER SANS PADDING ===== */
header.fixed_header.headroom--not-top .container {
    padding-top: 5px !important;
    transition: all 0.3s ease-in-out;
}

/* ===== LIENS PLUS PETITS ===== */
header.fixed_header.headroom--not-top nav ul li a {
    color: #ffffff !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out;
}

/* Soulignement blanc */
header.fixed_header.headroom--not-top nav ul li a.animated_link:before {
    background-color: #ffffff !important;
}

/* Hamburger blanc */
header.fixed_header.headroom--not-top .hamburger__inner,
header.fixed_header.headroom--not-top .hamburger__inner::before,
header.fixed_header.headroom--not-top .hamburger__inner::after {
    background-color: #ffffff !important;
}

/* ===== BOUTON PLUS PETIT ===== */
header.fixed_header.headroom--not-top a.btn_1 {
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    transition: all 0.3s ease-in-out;
}





























/* ==========================================
   FANCYBOX MODAL CENTRÉ (pas plein écran)
   ========================================== */

/* Fond noir derrière */
.fancybox-bg {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Le conteneur principal centré */
.fancybox-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* La boîte d'image (le modal) */
.fancybox-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Barre d'outils en haut */
.fancybox-toolbar {
    top: 20px !important;
    right: 20px !important;
}

.fancybox-button:hover {
    background: rgba(229, 181, 79, 0.3) !important; /* Or au survol */
}

/* Flèches navigation */
.fancybox-navigation .fancybox-arrow {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
}

.fancybox-navigation .fancybox-arrow:hover {
    background: rgba(229, 181, 79, 0.3) !important;
}

/* Compteur "1/10" */
.fancybox-infobar {
    top: 20px !important;
    left: 20px !important;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 14px !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
}

/* Caption (légende) */
.fancybox-caption {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 16px !important;
    padding-bottom: 30px !important;
}




/* ==========================================
   EFFET BOÎTE/CARTE POUR LE MODAL
   ========================================== */

/* Conteneur de l'image avec fond */
.fancybox-slide--image .fancybox-content {
    background: #1a1a2e !important; /* Fond sombre autour de l'image */
    padding: 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

/* L'image à l'intérieur */
.fancybox-slide--image .fancybox-content img {
    border-radius: 8px !important;
}

/* Animation d'entrée */
.fancybox-slide--current {
    animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}