/* =========================================================
   🎨 FOND GLOBAL DU SITE
   ========================================================= */
body {
  background-image: url("https://cdn.eu.yapla.com/company/CPYae9u2s13YctgR8wiVQnmpI/asset/images/IMAGE LALOIRE POUR FOND PAGE WEB 6.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* =========================================================
   🔵 TITRES H5
   ========================================================= */
h5 {
  color:#0000FF;
  font:100 18px "Source Sans Pro",Arial,Helvetica,sans-serif;
  text-transform:none;
  margin-bottom:8px;
}

/* =========================================================
   🎞 MARQUEE
   ========================================================= */
bandef {
  display: none;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}

/* =========================================================
   🌈 BASE COMMUNE POUR TOUTES LES PAGES À FOND SPÉCIAL
   ========================================================= */
body.fond-page-diapo,
body.fond-zoom-diapo,
body.fond-page-noir,
body.fond-page-blue,
body.fond-page-maillot {
  background: none !important;
  background-attachment: fixed !important;
  color: white !important;
  min-height: 100vh;
}

/* =========================================================
   🌈 FOND — PAGE DIAPORAMA
   ========================================================= */
body.fond-page-diapo {
  background-color: rgb(126, 158, 211) !important;
  background-image: radial-gradient(circle at 20% 30%, #1a1a2e, #0f0f1a 80%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
  animation: fadeInFond 1s ease-out forwards;
}

@keyframes fadeInFond {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* Conteneur du diaporama */
.fond-page-diapo .diaporama-wrapper {
  border: 6px solid #FFD700;
  border-radius: 25px;
  padding: 20px;
  background: rgb(126, 146, 164);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
  margin: 40px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fond-page-diapo .swiper {
  width: 900px;
  max-width: 90vw;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* =========================================================
   🌈 FOND — PAGE ZOOM DIAPO
   ========================================================= */
body.fond-zoom-diapo {
  background-color: rgb(63, 64, 63) !important; /* Gris foncé */
}

/* =========================================================
   🌈 FOND — PAGE NOIRE
   ========================================================= */
body.fond-page-noir {
  background-color: rgb(0, 0, 0) !important;
}
/* =========================================================
   🌈 FOND — PAGE BLEU
   ========================================================= */
body.fond-page-blue {
  background-color: #2E5283 !important;
}

/* =========================================================
   📱 RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  body.fond-page-diapo {
    padding: 25px 10px;
  }
  .fond-page-diapo h1 {
    font-size: 1.5rem;
  }
  .fond-page-diapo .diaporama-wrapper {
    width: 95%;
    padding: 10px;
  }

/* =========================================================
   🌈 FOND — PAGE MAILLOT
   ========================================================= */
body.fond-page-maillot {
    margin: 0;
    background-color: linear-gradient(
        to bottom,
        #ff007f 0%,      /* rose vif du maillot */
        #ffffff 40%,     /* blanc / crème */
        #000000 100%     /* noir */
    );
    background-attachment: fixed;
}
body.fond-page-maillot {
    margin: 0;
    background-color: 
        linear-gradient(
            to bottom,
            #ff007f 0%,    /* rose */
            #ff007f 20%,
            #ffffff 20%,   /* blanc */
            #ffffff 25%,
            #ff007f 25%,   /* rose */
            #ff007f 30%,
            #ffffff 30%,   /* blanc */
            #ffffff 35%,
            #000000 35%    /* noir */
        );
    background-attachment: fixed;
}
body.fond-page-maillot {
    margin: 0;
    background-color: 
        linear-gradient(
            to bottom,
            #000000 0%,     /* haut noir */
            #000000 70%,
            #ff007f 70%,    /* bande rose */
            #ff007f 100%
        );
    background-attachment: fixed;
}

/* =========================================================
   📚 ALBUM PHOTO TYPE LIVRE
   ========================================================= */
#album-container {
  width: 95%;
  max-width: 1100px;
  height: 650px;
  margin: 40px auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  border-radius: 15px;
  background: rgb(126, 158, 211);
}

 /* ======== ALBUM PHOTO GLOBAL ======== */

.album-wrapper {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
  perspective: 2000px;
}

.album {
  position: relative;
  width: 100%;
  height: 600px;
  background: #f5f1e8;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  overflow: hidden;
  display: flex;
}

.album-page {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.album-page:last-child {
  border-right: none;
}

.album-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Zoom léger au survol */
.album-page:hover img {
  transform: scale(1.05);
}

/* Titre album */
.album-title {
  text-align: center;
  font-size: 28px;
  margin: 20px 0 10px;
  font-weight: bold;
  font-family: "Georgia", serif;
  color: #2a2a2a;
}

/* Navigation */
.album-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.album-btn {
  padding: 10px 20px;
  background: #333;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.album-btn:hover {
  background: #666;
}