/* ===== GALERIE D'ALBUMS EN VOLETS (partagée par index, maghreb, turath) =====
   Un album ouvert en grand, les autres en bandes étroites avec leur nom à la verticale.
   Survol (ordinateur) ou toucher (téléphone) = ouvre l'album. */
.galerie { display: flex; gap: 12px; height: var(--galerie-h, 78vh); min-height: 460px; }
.volet { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; color: #fff; transition: flex-grow .85s cubic-bezier(.65, 0, .2, 1); }
.volet.actif { flex-grow: var(--grow, 9); }
.volet:focus-visible { outline: none; }
.volet:focus-visible .volet-carte { outline: 2px solid #ededed; outline-offset: 3px; }

.volet-num { height: 28px; flex: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6f6f6f; white-space: nowrap; overflow: hidden; transition: color .5s; }
.volet-num b { font-weight: 400; color: #ededed; margin-left: 8px; opacity: 0; transition: opacity .4s; }
.volet.actif .volet-num { color: #9a9a9a; }
.volet.actif .volet-num b { opacity: 1; transition-delay: .3s; }

.volet-carte { position: relative; flex: 1; border-radius: 10px; overflow: hidden; background: #141414; }
.volet-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.85); transform: scale(1.08); transition: filter .8s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.volet.actif .volet-carte img { filter: none; transform: scale(1); }
.volet.actif:hover .volet-carte img { transform: scale(1.03); }
.volet-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .25) 38%, rgba(0, 0, 0, 0) 60%); pointer-events: none; }

.volet-vertical { position: absolute; left: 50%; bottom: 18px; z-index: 2; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #ededed; transition: opacity .35s; }
.volet.actif .volet-vertical { opacity: 0; }

.volet-texte { position: absolute; left: 30px; bottom: 28px; z-index: 2; width: min(460px, calc(100% - 60px)); min-width: 260px; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; pointer-events: none; }
.volet.actif .volet-texte { opacity: 1; transform: translateY(0); transition: opacity .6s ease .35s, transform .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.volet-cat { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c9c5bb; margin-bottom: 10px; }
.volet-titre { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; letter-spacing: -.01em; }
.volet-sous { display: block; margin-top: 8px; font-size: 13px; color: #b5b5b5; }
.volet-lien { display: inline-block; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 3px; }

/* Téléphone : les volets s'empilent à la verticale */
@media (max-width: 860px) {
  .galerie { flex-direction: column; height: auto; min-height: 0; gap: 8px; }
  .volet { flex: none; }
  .volet-num { height: 22px; }
  .volet-carte { flex: none; height: 64px; transition: height .75s cubic-bezier(.65, 0, .2, 1); }
  .volet.actif .volet-carte { height: var(--galerie-h-mobile, 58vh); }
  .volet-vertical { writing-mode: horizontal-tb; left: 18px; bottom: 50%; transform: translateY(50%); }
  .volet-texte { left: 20px; bottom: 22px; width: calc(100% - 40px); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .volet, .volet-carte, .volet-carte img, .volet-texte { transition: none !important; } }