/* Cible le h6 dans l'élément avec l'ID spécifique */

/* Version desktop / par défaut (>1024px) */
#hAGsMFvvf5lXfUumjKqtvnqq > h6 {
  font-family: 'Roboto', sans-serif;  /* police Roboto */
  font-weight: 700;                   /* gras */
  color: #333780;                     /* couleur */

  /* Décalage / positionnement */
  padding-left: 110px;                 /* espace à gauche */
 /* margin-right: -1000px !important;               /* espace en dessous */
  margin-top: 70px;                   /* espace au-dessus */
  margin-bottom: -70px;               /* espace en dessous */

}

/* Version tablette (768px à 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  #hAGsMFvvf5lXfUumjKqtvnqq > h6 {
    padding-left: 130px;              /* ajuste le décalage pour tablette */
    margin-top: 80px;
    margin-bottom: -130px;
    font-weight: 700;                 /* gras confirmé */
  }
}

/* Version mobile (<768px) */
@media (max-width: 767px) {
  #hAGsMFvvf5lXfUumjKqtvnqq > h6 {
    padding-left: 130px;               /* espace réduit pour petits écrans */
    margin-top: 80px;
    margin-bottom: -130px;
    font-weight: 700;                 /* gras confirmé */
  }
}




/* Taille icone réseaux sociaux (Fb,insta,Twitter...) */
.mod-social-links .icon-facebook,
.mod-social-links .icon-instagram,
.mod-social-links .icon-x-twitter {
  font-size: 26px !important;
}

/* Page Actualités : background en bleu  */
.line.line-menu {
    background-color: #333870;
    /* margin-bottom: : 10px; */
    span.caret::after {
        content: '' !important; /* Assurez-vous que le contenu est vide */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid white; /* Couleur blanche pour la flèche */
        top: 70% !important;
        transform: translateY(-55%);
        position: absolute !important;
    }    
}
/* En-tête */
.header-ext-custom {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 9999;
  background-color: red;
  padding: 12px 24px;
  color: #fff !important;
  border-radius: 8px;
  text-align: center !important;

  box-sizing: border-box;
  width: fit-content;  /* le bloc s'adapte au texte */
}
@media (max-width: 991px) {
  .header-ext-custom {
    display: block !important;
    width: 90% !important;       /* bloc prend toute la largeur de l'écran */
    margin: 0 !important;         /* supprime les marges latérales */
    word-wrap: break-word;
    font-size: 12px;              /* un peu plus lisible que 10px */
    padding: 8px 16px;            /* padding interne plus confortable */
    box-sizing: border-box;       /* inclut le padding dans la largeur */
  }
}


/* Header avec séparation verticale */
#hAGsMFvvf5lXfUumjKqtvnqq {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 70%, #333870 70%, #333870 100%);
}


/* ============================= */
/* Fond bleu et texte blanc pour tous les types d'éléments */
/* ============================= */

/* 1. Appliquer fond bleu directement sur le li */
li.menu-type-separator,
li.menu-type-separator.open,
li.menu-type-page,
li.menu-type-page.active {
    background-color: #333870 !important; /* Fond bleu */
}

/* 2. Forcer texte blanc pour tous les liens ou spans à l'intérieur */
li.menu-type-separator a,
li.menu-type-separator.open a,
li.menu-type-page a,
li.menu-type-page.active a,
li.menu-type-separator a span,
li.menu-type-separator.open a span,
li.menu-type-page a span,
li.menu-type-page.active a span {
    color: #ffffff !important;
}

/* 3. Supprimer tout changement de fond au hover/focus/active sur li */
li.menu-type-separator:hover,
li.menu-type-separator:focus,
li.menu-type-separator:active,
li.menu-type-separator.open:hover,
li.menu-type-separator.open:focus,
li.menu-type-separator.open:active,
li.menu-type-page:hover,
li.menu-type-page:focus,
li.menu-type-page:active,
li.menu-type-page.active:hover,
li.menu-type-page.active:focus,
li.menu-type-page.active:active {
    background-color: #333870 !important;
}

/* 4. Supprimer tout changement de couleur au hover/focus/active sur les liens */
li.menu-type-separator a:hover,
li.menu-type-separator a:focus,
li.menu-type-separator a:active,
li.menu-type-separator.open a:hover,
li.menu-type-separator.open a:focus,
li.menu-type-separator.open a:active,
li.menu-type-page a:hover,
li.menu-type-page a:focus,
li.menu-type-page a:active,
li.menu-type-page.active a:hover,
li.menu-type-page.active a:focus,
li.menu-type-page.active a:active,
li.menu-type-separator a span:hover,
li.menu-type-separator a span:focus,
li.menu-type-separator a span:active,
li.menu-type-separator.open a span:hover,
li.menu-type-separator.open a span:focus,
li.menu-type-separator.open a span:active,
li.menu-type-page a span:hover,
li.menu-type-page a span:focus,
li.menu-type-page a span:active,
li.menu-type-page.active a span:hover,
li.menu-type-page.active a span:focus,
li.menu-type-page.active a span:active {
    color: #ffffff !important;
}

/* Padding et marge pour tous les types d’éléments */
li.menu-type-separator,
li.menu-type-separator.open,
li.menu-type-page,
li.menu-type-page.active {
    padding: 10px 15px; /* 10px haut/bas, 15px gauche/droite */
    margin: 2px 0;      /* petit espace entre les éléments */
    box-sizing: border-box; /* s’assure que le padding ne casse pas la largeur */
}

/* Décaler les éléments vers le haut de 20px uniquement sur desktop */
@media (min-width: 992px) { /* Desktop */
    li.menu-type-separator,
    li.menu-type-separator.open,
    li.menu-type-page,
    li.menu-type-page.active {
        transform: translateY(-15px);
    }
}

/* Cibler tous les li du menu vertical */
ul.menu-vertical-items li.menu-type-separator,
ul.menu-vertical-items li.menu-type-separator.open,
ul.menu-vertical-items li.menu-type-page,
ul.menu-vertical-items li.menu-type-page.active {
    padding: 5px 10px !important; /* réduit le padding haut/bas et gauche/droite */
}

/* Si le lien a lui-même du padding, réduire aussi */
ul.menu-vertical-items li a {
    padding: 5px 10px !important; /* ajuste la hauteur réelle du lien */
    line-height: 1.2 !important;  /* ajuste la ligne pour compacter le texte */
}

/* Optionnel : réduire la flèche et le caret */
ul.menu-vertical-items li a .caret {
    margin-top: 0 !important;
    vertical-align: middle;
}




/* Menu */
div#mainMenu > ul > li[class^=menu-type] {
    border-right: 0px solid white;
    background-color: #333870;
    a {
        color: white !important;
    }   
}

.dropdown-menu {
    background-color: #333870 !important;
    color: white;
}




/* Carrousel */
.line-banner {
    margin-top: 10px;
}

.carousel .carousel-caption {
    background-color: #333870 !important;
    clip-path: polygon(0px 0px, 100% 0px, 90% 100%, 0% 100%);
}

.carousel-caption p,
.carousel-caption h3,
.carousel-caption h2,
.carousel-caption a,
.carousel-caption div {
    color: #ffffff !important;
}

.carousel .item img {
    width: 110%;
    height: 100%;
    object-fit: cover;
    position: relative;
    left: -5%;
    top: 0; /* toujours alignée en haut */
}

.carousel .item {
    background-color: #F5B61D; /* couleur de fond derrière l'image */
}

.carousel-link-detail {
    background-color: #F5B61D !important; /* fond jaune */
    color: #000000 !important;           /* texte noir */
    padding: 8px 16px;                   /* un peu de padding pour que ça ressemble à un bouton */
    text-decoration: none;               /* enlève le soulignement du lien */
    border-radius: 4px;                  /* coins arrondis */
    display: inline-block;               /* pour que le padding fonctionne correctement */
}

.carousel-link-detail:hover {
    background-color: #F5B61D !important; /* jaune un peu plus foncé au survol */
    color: #333870 !important;
}

/* Responsive : mobile et tablette */
@media (max-width: 1250px) {
  .carousel .carousel-caption {
    clip-path: none !important;   /* supprime la diagonale */
    padding: 15px;                /* ajuste éventuellement le padding */
  }

  .carousel .item img {
    width: 100% !important;       /* image reprend sa largeur normale */
    left: 0 !important;           /* repositionnement horizontal */
    object-fit: contain;           /* éviter le rognage */
  }
}

.carousel-link-detail {
    margin-top: 50px !important; /* modifie cette valeur selon ton besoin */
}


/* Horaires */
#x8liUcLqYJtTSYBZrsstjOcT {
    background-color: #333870;
    border-radius : 24px;
    margin: 10px 0px 10px 0px; /* haut droite bas gauche */
    padding: 20px; /* padding interne si nécessaire */
    h3 {
        color: white;
    }
}

/* Inscription/Tarif/Tenue  */
.inscription-tarif {
    
}

/* Calendrier */
.calendrier {
    h4 {
        font-family: 'Roboto', sans-serif; /* police Roboto */
        font-weight: 700;                  /* gras */
        font-size: 35px;                   /* taille du texte */
        background-color: #333870;
        color: white;
        display: inline-flex;              /* adapte la largeur au texte */
        align-items: center;               /* centre verticalement */
        justify-content: left;             /* texte aligné à gauche */
        padding: 15px 35px 15px 15px; /* haut, droite, bas, gauche */
        height: auto;                      /* supprime hauteur fixe */
        width: auto;                       /* supprime largeur fixe */
        clip-path: polygon(0px 0px, 100% 0px, 90% 100%, 0% 100%); /* garde la diagonale */
    }
}



/* =============================
   Trombinoscope
   ============================= */
.ligne-5-blocs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2%;                  /* espacement horizontal */
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 0;
}

.ligne-5-blocs .carte-archer {
  flex: 0 0 calc((100% - 4 * 2%) / 5); /* 5 cartes par ligne, 4 gaps de 2% */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2vw;        /* espace vertical */
}

.ligne-5-blocs .carte-archer img {
  width: 120%;
  max-width: 180px;
  border-radius: 50%;
  margin-bottom: -10px;        /* colle la photo au nom */
  border: 3px solid #333870;   /* contour bleu */
}

.ligne-5-blocs .carte-archer h3 {
  display: inline-block;
  width: auto;
  white-space: nowrap;
  background-color: #F5B61D;   /* bleu */
  color: #333870;              /* jaune */
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 50px;
  margin: 0;                    /* supprime marge pour coller au rôle */
  border: 3px solid #333870;    /* contour bleu */
}

.ligne-5-blocs .carte-archer p {
  display: inline-block;
  width: auto;
  white-space: nowrap;

  color: #333870;               /* bleu */
  font-size: 18px;
  font-weight: bold;
  padding: 6px 12px;
  margin: -2px;                 /* supprime marge pour coller au nom */
}

/* =============================
   Tablette : 4 cartes par ligne
   ============================= */
@media (max-width: 992px) {
  .ligne-5-blocs .carte-archer {
    flex: 0 0 auto;
    max-width: 22%;           /* 4 cartes par ligne */
    margin: 0 1% 40px;        /* centre horizontalement + espace vertical */
  }
  .ligne-5-blocs .carte-archer img {
    width: 100%;
    max-width: 150px;
  }
}

/* =============================
   Mobile : 2 cartes par ligne, plus petites
   ============================= */
@media (max-width: 600px) {
  .ligne-5-blocs .carte-archer {
    flex: 0 0 auto;
    max-width: 40%;           /* 2 cartes par ligne */
    margin: 0 5% 40px;        /* centre horizontalement + espace vertical */
  }
  .ligne-5-blocs .carte-archer img {
    width: 100%;
    max-width: 110px;         /* image plus petite */
  }
  .ligne-5-blocs .carte-archer h3,
  .ligne-5-blocs .carte-archer p {
    padding: 3px 8px;         /* réduit légèrement les fonds */
    font-size: 14px;          /* réduit légèrement la taille du texte */
  }
}

/* Footer Test */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 50px;
  max-width: 1700px;
  margin: 0 auto;
  text-align: left;
  color: #ffffff; /* texte en blanc */
  font-size: 12px; /* Texte normal */
  padding: 0 20px; /* marge à gauche et à droite */
  justify-content: center; /* centre les colonnes si moins de colonnes sur la ligne */
  justify-items: start; /* aligne le contenu des colonnes à gauche */
}

.footer-col p {
  margin: 6px 0;
  font-size: 14px; /* Texte normal */
}

/* Première ligne de chaque colonne (titres) */
.footer-col p:first-of-type {
  font-size: 16px; 
  font-weight: bold;
}

/* Responsive : moins de colonnes sur petits écrans */
@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes max en mobile/tablette */
    text-align: left; /* optionnel : recentrer le texte sur mobile */
  }
}

@media (max-width: 480px) {
  .footer-columns {
    grid-template-columns: 1fr; /* 1 seule colonne en très petit écran */
  }
}



/* Style pour le bloc de texte */
.bloc-de-texte {
  color: #ffffff;               /* Texte en blanc par défaut */
  font-size: 14px;              /* Taille de texte */
  line-height: 1.3;             /* Hauteur de ligne réduite */
  max-width: 600px;             /* Largeur max pour confort de lecture */
  margin: 0 auto;               /* Centrer le bloc si besoin */
  font-family: Arial, sans-serif; /* Police lisible */
}

.bloc-de-texte * {
            /* Forcer la couleur blanche sur tous les descendants */
  margin: 0;                    /* Supprime marges par défaut */
  padding: 0;
}

.bloc-de-texte p {
  margin: 6px 0;      /* Espacement vertical réduit entre paragraphes */
  font-size: 16px;    /* Légèrement plus petit que la taille de base */
}

.bloc-de-texte ul {
  margin: 6px 0 6px 20px;       /* Petit espace au-dessus et indentation des listes */
  padding: 0;
}

.bloc-de-texte ul li {
  margin: 4px 0;                /* Espacement réduit entre les lignes de la liste */
}

.fond-bloc {
  background-color: #333870;   /* Fond bleu/violet foncé */
  border-radius: 24px;          /* Coins arrondis */
  padding: 16px;                /* Petit padding pour l’intérieur */
  margin-left: : 10px;                 /* Marge minimum autour du bloc */
  margin-right: : 10px;   
}

/* Tous les h3 à l’intérieur auront le texte blanc */
.fond-bloc h3 {
  color: white;
  margin: 0 0 8px 0;            /* Petit espacement sous le titre */
}
.fond-bloc-jaune {
    background-color: #F5B61D;   /* Fond jaune */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); /* Bord droit en diagonale plus incliné */
    padding: 20px 100px 20px 20px; /* padding-top/right/bottom/left */
    margin: 0px 0;
    color: #333870; /* Texte noir pour contraste */
}
.fond-bloc-bleu {
    background-color: #333870;   /* Fond bleu */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); /* Bord droit en diagonale plus incliné */
    padding: 20px 100px 20px 20px; /* padding-top/right/bottom/left */
    margin: 0px 0;
    color: #333870; /* Texte noir pour contraste */
}

/*Inscription et tarif*/

.double-bloc {
  display: flex;
  width: 100%;
  background-color: #333870; /* fond bleu derrière les deux blocs */
    Margin: 0px;
}

.bloc-gauche {
  width: 50%;
  background-color: #F5B61D; /* fond jaune */
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
  display: flex;
}

.bloc-droite {
  width: 50%;
  display: flex;
  color: #ffffff;
}

.bloc-gauche .bloc-de-texte {
  padding: 20px;
    padding-right: 100px;
  color: #000000;
}

.bloc-droite .bloc-de-texte {
  padding: 20px;
  color: #ffffff;
}

.bloc-de-texte h3 {
  margin-top: 0;
}
.bloc-gauche li::marker {
    color: #333870;
}

/* --- Version mobile --- */
@media (max-width: 1000px) {
  .double-bloc {
    flex-direction: column;
  }

  .bloc-gauche,
  .bloc-droite {
    width: 100%;
    clip-path: none; /* retire la diagonale pour mobile */
  }
}

/* --- Version mobile --- */
@media (max-width: 768px) {
  .double-bloc {
    flex-direction: column;
  }

  .bloc-gauche,
  .bloc-droite {
    width: 100%;
    clip-path: none; /* retire la diagonale pour mobile */
  }
}



.panel-news-accordion {
    background: linear-gradient(
        90deg,          /* angle de la diagonale */
        #333870 95%,     /* bleu à gauche jusqu'à 50% */
        #F5B61D 5%      /* jaune à droite à partir de 50% */
    );
    color: #ffffff;      /* texte blanc */
}

/* Forcer le texte à l'intérieur à rester blanc */
.panel-news-accordion * {
    color: #ffffff !important;
}

/* Padding uniquement à gauche pour le titre et l’introduction */
.panel-news-accordion .panel-title,
.panel-news-accordion .news-accordion-intro {
    padding-left: 20px;
}


/* Titre avec classe control-label en bleu */
.control-label {
    color: #333870 !important;  /* bleu */
}


/* --- Version mobile --- */
@media (max-width: 768px) {
  a.news-accordion-header.collapsed::after {
    margin-right: 4px;           /* espace ajustable */

}

  a.news-accordion-header.collapsed {
    margin-bottom: -4px !important; /* Ajuste la valeur selon le rendu souhaité */
  }

  a.news-accordion-header::after {
    margin-right: 4px !important;
  }
}


/* Parent header en position relative et flex vertical */
a.news-accordion-header {
    position: relative;
    display: flex;
    flex-direction: column;       /* empile les éléments verticalement */
    justify-content: space-between; /* pousse les éléments au top et bottom */

}

/* Pseudo-élément + collé en bas à droite */
a.news-accordion-header.collapsed::after {
    content: "+";                /* s'assure que le + est présent */
    color: #333870 !important;
    font-weight: bold;
    position: absolute;
    bottom: 0;                    /* en bas du container */
    right: 0;                     /* à droite du container */
    margin-right: 20px;           /* espace ajustable */

}

/* Forcer la couleur bleue et ajouter une marge à droite pour le - */
a.news-accordion-header::after {
    color: #333870 !important;  /* couleur bleue imposée */
    margin-right: 20px;          /* espace à droite par rapport au container */
    font-weight: bold;           /* optionnel, pour le rendre plus visible */
        margin-top: 5px;
}

a.news-accordion-header.collapsed {
    margin-bottom: -20px !important; /* Ajuste la valeur selon le rendu souhaité */
}

/* Style par défaut (desktop/tablette) */
.bloc-contenu {
  margin: -20px; /* exemple */
}

/* Version mobile uniquement */
@media (max-width: 768px) {
  .bloc-contenu {
    margin-left: -20px !important; /* nouvelle marge spécifique aux mobiles */
  }
}

.lien-pdf {
    padding-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
        background-color: #333870;   /* Fond bleu */
        color: #ffffff; /* Texte blanc pour contraste */
        border-radius: 24px;
        padding-inline: 5px;
    }
    span {
        color: #ffffff !important;
    }
}

/* Articles */

/* Import police Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* =====================
   Blocs texte (intro, paragraphes)
   ===================== */
.article-bloc-contenu {
    width: 100% !important;
    padding-left: 20px !important;
    font-family: 'Roboto', sans-serif !important;
    text-align: left !important;
    margin-top: -10px !important;
    margin-bottom: -40px !important;
}

.article-sous-titre,
.article-texte-bloc {
    max-width: 90% !important;
}

.article-sous-titre {
    font-weight: 700 !important;
    font-size: 2rem !important;
    margin-bottom: 10px !important;
    color: #000000 !important; /* défaut : noir */
}

.article-texte-bloc {
    line-height: 1.6 !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    margin: 10px 0 20px 0 !important;
    color: #000000 !important; /* défaut : noir */
}

/* Variante texte blanc (fond transparent) */
.article-bloc-bleu {
    padding: 0px !important;
    background-color: transparent !important;
    color: #ffffff !important;
}

.article-bloc-bleu .article-sous-titre,
.article-bloc-bleu .article-texte-bloc {
    color: #ffffff !important;
}

/* =====================
   Blocs boutons
   ===================== */
.article-bloc-bouton {
    padding-top: 40px !important;
    padding-left: 50px !important;
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.article-btn-jaune {
    display: inline-block !important;
    background-color: #F5B61D !important;
    color: #ffffff !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.article-btn-jaune:hover {
    background-color: #f59b1d !important;
    transform: translateY(-2px) !important;
}
.article-btn-jaune.disabled {
  background-color: #cccccc !important; /* gris pour indiquer désactivé */
  color: #666666 !important;           /* texte plus clair */
  pointer-events: none !important;      /* désactive le clic */
  cursor: default !important;           /* change le curseur */
  transform: none !important;           /* annule l'effet hover */
}


/* =====================
   Blocs images
   ===================== */
.article-bloc-images {
    padding-top: 40px !important;
    padding-left: 50px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.article-bloc-images img {
    max-height: 300px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 5px !important;
}

/* Responsive mobile */
@media screen and (max-width: 600px) {
    .article-bloc-images {
        padding-left: 5px !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .article-bloc-images img {
        width: 90% !important;
        height: auto !important;
        max-height: 200px !important;
    }
}
/* --- Albums / Dossiers --- */
.folder-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 320px);
  gap: 25px;
  justify-content: center;
  margin: 50px auto;
  max-width: 1200px;
}

.folder {
  width: 320px;
  height: 180px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.2s ease;
}

.folder:hover { transform: scale(1.03); }

/* Nombre de photos */
.photo-count {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(51, 56, 112, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.folder-footer {
  display: flex;
  align-items: center;
  background-color: #333870;
  padding: 10px 14px;
  color: white;
}

.folder-icon {
  font-size: 28px;
  margin-right: 12px;
}

.folder-label {
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Sections Accordéon --- */
.section {
  margin: 20px auto;
  max-width: 1200px;
}

.section-title {
  background-color: #333870;
  color: #ffffff;
  padding: 12px 20px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 5px;
}

.section-content {
  display: none; /* fermé par défaut */
  padding: 15px 0;
  grid-template-columns: repeat(auto-fill, 320px);
  gap: 25px;
  display: grid; /* affichage en grille quand ouvert */
}

/* --- Mosaïque --- */
.mosaic-container {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.mosaic-header {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.mosaic-header .back {
  cursor: pointer;
  font-size: 22px;
  color: #333870;
  margin-right: 20px;
  font-weight: bold;
}

.mosaic-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #333870;
}

.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  width: 100%;
}

.mosaic-grid img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.mosaic-grid img:hover {
  transform: scale(1.03);
}

/* --- Lightbox --- */
.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(51, 56, 112, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

/* Croix sous la photo */
.lightbox .close {
  font-size: 40px;
  color: #333870;
  background: #ffffff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  bottom: 10%; /* juste sous la photo */
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}

.lightbox .close:hover {
  transform: translateX(-50%) scale(1.1);
}

/* Navigation Lightbox */
.lightbox .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.lightbox .prev { left: 30px; }
.lightbox .next { right: 30px; }