/* -----------------------------------------------------------
   1. NAVIGATION & FIX MENU MOBILE (Priorité Maximale)
----------------------------------------------------------- */
.navbar.sticky-top {
    z-index: 99999 !important; /* Force le menu au-dessus de l'overlay d'accueil */
    position: sticky !important;
    top: 0;
}

.navbar-toggler {
    position: relative;
    z-index: 100001 !important; /* Force le bouton burger à être cliquable */
}

/* Aligner la loupe avec le bouton burger */
.plugin-search-container {
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .navbar-brand {
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------
   2. RECHERCHE & SURLIGNAGE (Plugin Search)
----------------------------------------------------------- */
/* Surlignage Jaune vif */
mark.search-highlight, .search-highlight {
    background-color: #ffeb3b !important;
    color: #000 !important;
    padding: 0 2px !important;
    font-weight: bold !important;
    border-radius: 2px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.search-toggle, .search-icon-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

/* Fenêtre de recherche qui s'affiche sous la loupe */
.search-plugin-form, .search-box {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: white;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    min-width: 200px;
}

/* -----------------------------------------------------------
   3. TYPOGRAPHIE & COULEURS DU THÈME
----------------------------------------------------------- */
h2 { font-size: 20px; }
.bg-soft-orange { background-color:#FFE6DD; }
.btn-orange { background-color:#FFE6DD; color:#ffffff; }
.text-orange { color:#FF5733; }
.link-text { color:#8A9A5B; }
.copyright { color:#585c5e; }
.tsm { font-size: 13px; }

p a, .txt-link {
    color:#ff5733;
    text-decoration:none;
}

blockquote {
    padding:22px;
    font-size: 20px;
    font-style: italic;
    border-left: 5px solid #ff5733;
}

/* -----------------------------------------------------------
   4. LAYOUT & IMAGES (Correction Accueil)
----------------------------------------------------------- */
/* On s'assure que le contenu de la page ne passe pas devant le menu */
.container.py-5, .home-hero, .col-md-9 {
    position: relative;
    z-index: 1;
}

p img {
    width:100%;
    border-radius:10px;
    margin: 10px 0;
}

.card:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.11);
}

.card-link { text-decoration:none; }

/* Correction Flexbox Mobile pour l'accueil */
@media (max-width: 768px) {
    .home-hero { background-attachment: scroll !important; }
    
    /* Force le texte et l'image de l'accueil à s'empiler proprement */
    div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* -----------------------------------------------------------
   5. COMPOSANTS SPÉCIFIQUES (Audio, Vidéos, Justes)
----------------------------------------------------------- */
.portrait-item { margin-bottom: 30px; }

.justes-grid {
    display: grid;
    gap: 20px;
    margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.juste-item {
    background: #C7C7C7;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.juste-item img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.juste-item h3 {
    margin-top: 0;
    font-size: 18px;
}


.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
/* Le conteneur doit être le point d'ancrage */
.plugin-search {
    position: relative; /* Crucial pour que la box s'aligne sous la loupe */
    display: inline-block;
}

/* On ajuste la box pour ordinateur */
.search-overlay {
    position: absolute; /* Changez "fixed" en "absolute" si vous voulez qu'elle reste sous la loupe */
    top: 100%; /* Juste en dessous du bouton */
    right: 0;  /* Aligné à droite de la loupe */
    width: 300px; /* Largeur fixe sur ordi */
    background: white;
    padding: 15px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-radius: 8px;
    display: none; /* Caché par défaut */
    z-index: 9999;
}

/* Sur mobile, on repasse en plein écran pour une meilleure expérience */
@media (max-width: 768px) {
    .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.95);
        display: none;
        align-items: center;
        justify-content: center;
    }
    .search-box {
        width: 90%;
    }
}
.livre-layout {
  display: flex;
  gap: 20px;
}

/* Empêche l'image du livre d'être forcée en 100% */
.livre-left img {
    width: auto !important;
    max-width: 280px; /* ou la largeur que tu veux */
    height: auto;
}


@media (max-width: 768px) {
  .livre-layout {
    flex-direction: column;
  }
  .livre-left {
    flex: none;
    width: 100%;
  }
  .livre-left img { max-width: 100%; }
}
.livre-images {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.livre-images img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .livre-images {
        flex-direction: column;
        align-items: center;
    }
}
.evenement-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.evenement-galerie img {
    width: 100%;
    border-radius: 10px;
}
/* Overlay */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

/* Image agrandie */
.lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}