/* Conteneur principal de la galerie */
    /* Conteneur principal de la galerie */
    .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Colonne flexible */
        gap: 20px;
        padding: 20px;
        justify-content: center;
        max-width: 100%;
        /* Empêche le conteneur de déborder */
        margin: 0 auto;
        /* Centre la galerie */
    }

    /* Style pour chaque carte de photo (le conteneur séparé) */
    .photo-card {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        max-width: 100%;
        /* Empêche les cartes d'être trop larges */
    }

    /* Cadre pour l'image avec effet de zoom au survol */
    .photo-frame {
        overflow: hidden;
        border-radius: 12px 12px 0 0;
        position: relative;
        max-width: 100%;
        /* Empêche le cadre d'être trop large */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        /* Couleur de fond pour remplir les espaces vides */
    }

    /* Image dans le cadre */
    .photo-frame img {
        width: 100%;
        height: auto;
        /* Conserve les proportions d'origine */
        max-width: 100%;
        object-fit: contain;
        /* Affiche l'image entière sans découpe */
        transition: transform 0.4s ease;
    }

    /* Effet de survol pour les cartes */
    .photo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    /* Légende sous chaque photo */
    .photo-caption {
        text-align: center;
        padding: 10px;
        background-color: #fff;
        border-top: 1px solid #ddd;
        color: #333;
        font-size: 14px;
    }

    /* 🌟 Media query pour petits écrans 🌟 */
    @media (max-width: 768px) {
        .gallery-container {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            /* Réduit la taille minimale sur petits écrans */
        }

        .photo-card {
            max-width: 90%;
            /* Réduit la largeur maximale des cartes sur petits écrans */
            margin: 0 auto;
            /* Centre les cartes */
        }

        .photo-frame img {
            max-width: 100%;
            height: auto;
            /* Conserve les proportions sur petits écrans */
        }
    }

    /* 🌟 Style de base (texte normal sur grand écran) */


    /* 🌟 Réduit la taille des textes sur petits écrans */
    @media (max-width: 768px) {
        .texte-titre {
            font-size: 20px;
            /* Réduit le titre seulement sur petits écrans */
        }

        .texte-contenu {
            font-size: 16px;
            /* Réduit le contenu seulement sur petits écrans */
        }

        .texte-detail {
            font-size: 14px;
            /* Réduit les détails seulement sur petits écrans */
        }

        .texte-citation {
            font-size: 14px;
            /* Réduit les citations seulement sur petits écrans */
        }

        .texte-lieu {
            font-size: 12px;
            /* Réduit le lieu seulement sur petits écrans */
        }
    }

    /* 🌟 Réduit encore plus la taille des textes sur très petits écrans */
    @media (max-width: 480px) {
        .texte-titre {
            font-size: 18px;
            /* Réduit encore le titre seulement sur très petits écrans */
        }

        .texte-contenu {
            font-size: 14px;
            /* Réduit encore le contenu seulement sur très petits écrans */
        }

        .texte-detail {
            font-size: 12px;
            /* Réduit encore les détails seulement sur très petits écrans */
        }

        .texte-citation {
            font-size: 12px;
            /* Réduit encore les citations seulement sur très petits écrans */
        }

        .texte-lieu {
            font-size: 10px;
            /* Réduit encore le lieu seulement sur très petits écrans */
        }
    }


.layout-memoire,
.menu-memoire-lateral,
.zone-contenu {
  z-index: auto !important;
}

/* ==============================
   🌸 LAYOUT PAGE MÉMOIRE
   ============================== */
/* ==============================
   🌸 STRUCTURE PAGE MÉMOIRE
   ============================== */
.layout-memoire {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 70px); /* hauteur totale visible */
 
  /* ❌ margin-top: 70px;  --> à retirer */
}

/* 📋 Menu à gauche */
.menu-memoire-lateral {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 1rem;
  width: 260px;
  flex-shrink: 0;
 position: fixed; 
  top: 70px;
margin: 20px 0px;
 min-height: 1000px;
  overflow-y: auto;
}

/* 🕊️ Contenu principal */
.zone-contenu {
  flex: 1;
  padding: 0rem 0rem; /* un peu de respiration interne */
  margin-left: 0;       /* ❌ on supprime le vide externe */

  border-radius: 10px;
 
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}


/* ✅ Version mobile */
@media (max-width: 991.98px) {
  .layout-memoire {
    flex-direction: column;
    margin-top: 0;
  }

  /* Le conteneur du menu (bouton hamburger) */

  .menu-memoire-lateral {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 0;
    z-index: 1050; /* au-dessus du contenu principal */
    background: #fff; /* pour éviter la transparence */
  }

  /* Bouton hamburger bien visible et centré */
 
  .menu-memoire-lateral .btn {
    display: block;
    width: 90%;
    max-width: 100px;
    margin: 0.5rem auto;
    z-index: 1100;
    position: relative;
  }

  /* Le offcanvas doit passer au-dessus du contenu */


  /* Le contenu principal ne doit pas passer par-dessus */
  .zone-contenu {
    margin-left: 0;
    padding: 1rem;
    border-radius: 0;
    position: relative;
    z-index: 1;
  }
}