:root {
      --columns: 3;
      --yellow: rgba(6, 63, 100, 1);
      --pink: rgba(36, 51, 57, 1);
      --blue: rgba(112, 130, 176, 1);
      --green: rgba(2, 18, 29, 1);
      --white: rgba(248, 255, 229, 1);
      --bg: #0C1212;
      --text3: #555555;
      --accent: #F3F3F3;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── STRUCTURE ET AFFICHAGE CIBLE ── */
    .pdf-gallery {
	margin-top:80px;
      display: block; /* Visible par défaut */
    }
    .pdf-gallery.hidden {
      display: none !important;
    }

    /* ── STYLE DE LA GALERIE ── */
    .pdf-gallery ul {
      display: grid;
      grid-template-columns: repeat(var(--columns), 1fr);
      padding: 40px;
      list-style: none;
    }

    .pdf-gallery li {
      grid-column-end: span 2;
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      margin-top: -50%;
      cursor: pointer; /* Indique que c'est cliquable */
    }

    .pdf-gallery li:nth-child(2n){ grid-column-start:2; }

    .pdf-gallery li::before, .pdf-gallery li::after {
      content:''; position: absolute; display: block; width: 100%; height: 100%; background-size: 50% 100%,100% 100%; background-position: left, right;
    }
    .pdf-gallery li::before{
      z-index: -10; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background-repeat: no-repeat;
      background-image: linear-gradient(-45deg,var(--yellow) 53.5%,var(--green) 53.5%,var(--green) 60%,var(--yellow) 60%), linear-gradient(45deg,var(--yellow) 65.3%,var(--green) 65.3%,var(--green) 69.9%,var(--yellow) 69.9%);
    }
    .pdf-gallery li::after{
      clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%); -webkit-clip-path: polygon(100% 50%, 50% 100%, 0 50%, 20% 50%, 50% 80%,80% 50%); background-repeat: no-repeat;
      background-image: linear-gradient(45deg,var(--yellow) 40%,var(--green) 40%), linear-gradient(-45deg,var(--yellow) 30%,var(--green) 30%);
    }
    .pdf-gallery li:nth-child(2n)::before{ background-image: linear-gradient(-45deg,var(--pink) 53.5%,var(--blue) 53.5%,var(--blue) 60%,var(--pink) 60%), linear-gradient(45deg,var(--pink) 65.3%,var(--blue) 65.3%,var(--blue) 69.9%,var(--pink) 69.9%); }
    .pdf-gallery li:nth-child(2n)::after{ background-image: linear-gradient(45deg,var(--pink) 40%,var(--blue) 40%), linear-gradient(-45deg,var(--pink) 30%,var(--blue) 30%); }

    .pdf-gallery img {
      position: absolute; width: 43%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-60%); box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3); transition: transform .3s;
    }
    .pdf-gallery img:hover { transform: translateX(-40%) translateY(-70%) rotatez(25deg); }

    /* Reste des Medias Queries de la galerie... */
    @media (min-width:600px){ :root { --columns: 5; } .pdf-gallery li:nth-child(2n){ grid-column-start:auto; } .pdf-gallery li:nth-child(4n-1){ grid-column-start:2; } }
    @media (min-width:900px){ :root { --columns: 7; } .pdf-gallery li:nth-child(4n-1){ grid-column-start:auto; } .pdf-gallery li:nth-child(6n-2){ grid-column-start:2; } }
    @media (min-width:1200px){ :root { --columns: 9; } .pdf-gallery li:nth-child(6n-2){ grid-column-start:auto; } .pdf-gallery li:nth-child(8n-3){ grid-column-start:2; } }

    /* ── LOADER ── */
    #loader {
      position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 90;
      opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
    }
    #loader.visible { opacity: 1; visibility: visible; }
    .loader-bar-bg { width: 220px; height: 2px; background: rgba(0,0,0,0.1); border-radius: 1px; overflow: hidden; }
    .loader-bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.3s; border-radius: 1px; }
    .loader-text { font-size: 12px; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; }

    /* ── FLIPBOOK APP ── */
    #app {
      position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0;
      opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; z-index: 10;
    }
    #app.visible { opacity: 1; visibility: visible; }
    .stage-container { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
    #book-stage { position: relative; z-index: 1; perspective: 1400px; flex-shrink: 0; }
    #book { position: relative; transform-style: preserve-3d; }
    #book-shadow { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 88%; height: 28px; background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 68%); border-radius: 50%; pointer-events: none; }
    #spine-overlay { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: 0; box-shadow: 0 0 10px rgba(0,0,0,0.25); background: #060e0e; z-index: 50; pointer-events: none; }
    
    .book-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
    #left-half  { left: 0; box-shadow: inset -12px 0 32px rgba(0,0,0,0.35); }
    #right-half { right: 0; box-shadow: inset 12px 0 32px rgba(0,0,0,0.35); }
    .book-half canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    #flap { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; transform-origin: left center; will-change: transform; z-index: 20; pointer-events: none; display: none; }
    #flap-front, #flap-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; }
    #flap-front { transform: rotateY(0deg); }
    #flap-back { transform: rotateY(180deg); }
    #flap-front canvas, #flap-back canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

    #controls { position: relative; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 0 0; }
    .ctrl-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: #F3F3F3; }
    .ctrl-btn:hover { background: rgba(255,255,255,0.14); transform: scale(1.06); }
    .ctrl-btn:disabled { opacity: 0.2; cursor: default; transform: none; }
    .ctrl-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
    #page-info { font-size: 13px; color: #F3F3F3; min-width: 80px; text-align: center; }

    /* Bouton Fermer / Retour */
    #btn-close { position: fixed; top: 20px; right: 20px; z-index: 100; }
	
	/* Quand l'application du flipbook est visible, on force la disparition de la croix de la lightbox */
#app.visible ~ .lightbox-close,
#app.visible ~ * .lightbox-close,
body:has(#app.visible) .lightbox-close {
  display: none !important;
}