/* ============================================================
   Galeries : grille d'albums + page album (photos, lightbox, bille de verre)
   Couleur de section : ambre (--opc-sec-accent)
   ============================================================ */

/* ---------- Filtres par catégorie ---------- */
.opc-gtabs{ display:flex; flex-wrap:wrap; gap:9px; margin:10px 0 8px; }
.opc-gtab{ border:1px solid var(--opc-line); background:#fff; color:var(--opc-muted); border-radius:999px;
  padding:8px 16px; font-size:.88rem; cursor:pointer; font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 600; transition:.18s; }
.opc-gtab:hover{ border-color:var(--acc); color:var(--acc); }
.opc-gtab.on{ background:var(--acc); color:#fff; border-color:var(--acc); }

/* ---------- Grille d'albums ---------- */
.opc-albums{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; margin-top:34px; }
.opc-album{ position:relative; display:block; text-decoration:none; color:inherit; border-radius:18px; overflow:hidden;
  aspect-ratio:4/3; background:#dfe4e7; box-shadow:0 20px 44px rgba(10,25,35,.12); transition:transform .3s, box-shadow .3s; }
.opc-album:hover{ transform:translateY(-4px); box-shadow:0 30px 60px rgba(10,25,35,.2); }
.opc-album .cover{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.opc-album:hover .cover{ transform:scale(1.07); }
.opc-album::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(8,18,26,.86),rgba(8,18,26,.08) 56%,transparent 80%); }
.opc-album .meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; color:#fff; }
.opc-album .cat{ display:inline-flex; align-items:center; gap:9px; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:color-mix(in srgb, var(--opc-sec-accent) 55%, #ffffff); margin:0 0 8px; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.opc-album .cat::before{ content:""; width:20px; height:2px; background:currentColor; opacity:.85; flex:none; }
.opc-album .t{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); font-size:1.32rem; line-height:1.05; margin:0 0 8px; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.opc-album .n{ font-size:.82rem; opacity:.92; display:inline-flex; align-items:center; gap:6px; }
.opc-album .n svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }

.opc-gal-empty{ color:var(--opc-muted); padding:20px 0; }

/* ---------- Page album : en-tête ---------- */
.opc-album-back{ display:inline-flex; align-items:center; gap:8px; color:var(--acc); text-decoration:none; font-weight:600; margin-top:2rem; font-size:.9rem; }
.opc-album-back svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.opc-album-back:hover{ gap:12px; }
.opc-album-meta{ color:var(--opc-muted); margin:14px 0 0; display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:.95rem; }
.opc-album-meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--acc); }

/* Chapô à la même largeur que le texte et les photos */
.opc-album-single .opc-page-lead{ max-width:none; }
/* Interversion des espaces : chapô rapproché du texte qui suit */
.opc-album-single .opc-page-head{ margin-bottom:0; }

/* ---------- Page album : texte de présentation ---------- */
.opc-album-body{ max-width:none; margin:clamp(10px,1.6vw,16px) 0 4px; color:#d6dee3; font-size:1.06rem; line-height:1.8;
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.opc-album-body p{ margin:0 0 1.1em; }
.opc-album-body p:last-child{ margin-bottom:0; }
.opc-album-body a{ color:color-mix(in srgb, var(--opc-sec-accent) 45%, #fff); }

/* ---------- Actu d'exposition : l'affiche habille le texte (float, façon presse) ---------- */
.opc-single-body .opc-affiche{ float:left; width:min(340px,42%); margin:-0.9rem 28px 20px 0; }
.opc-single-body .opc-affiche img{ display:block; width:100%; height:auto; border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.5); }
/* le contenu qui suit le corps (galerie) repart sous l'affiche */
.opc-single-body.has-affiche::after{ content:""; display:block; clear:both; }
@media (max-width:640px){
  .opc-single-body .opc-affiche{ float:none; width:min(360px,100%); margin:0 auto 20px; }
}

/* ---------- Page album : grille de photos (mosaïque) ---------- */
.opc-photos{ columns:3 280px; column-gap:16px; margin-top:clamp(30px,4.5vw,52px); }
.opc-photos figure{ break-inside:avoid; margin:0 0 16px; border-radius:12px; overflow:hidden; position:relative;
  background:#e3e8eb; cursor:none; }
.opc-photos img{ width:100%; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.opc-photos figure:hover img{ transform:scale(1.05); }
@media (hover:none){ .opc-photos figure{ cursor:pointer; } }

/* ---------- Lightbox (visionneuse plein écran) ---------- */
.opc-lb{ position:fixed; inset:0; z-index:9998; background:rgba(8,13,18,.96); display:none;
  align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.opc-lb.on{ display:flex; opacity:1; }
.opc-lb figure{ margin:0; max-width:92vw; max-height:88vh; }
.opc-lb img{ max-width:92vw; max-height:82vh; border-radius:6px; box-shadow:0 30px 90px rgba(0,0,0,.6); display:block; }
/* Crédit photographe dans la visionneuse : centré sous la photo, style du carrousel d'accueil (Recursive italique + ©). */
.opc-lb-credit{ position:absolute; left:50%; transform:translateX(-50%); bottom:48px; margin:0; text-align:center;
  font-family:'Recursive',var(--sans); font-style:italic; font-variation-settings:'wght' 500;
  font-size:clamp(.9rem,1.25vw,1.1rem); line-height:1.15; letter-spacing:.005em; color:rgba(255,255,255,.8); pointer-events:none; }
.opc-lb-credit::before{ content:"\00A9\00A0"; font-style:normal; }
/* Crédit riche (rang + © devant le nom, injecté en HTML) : le © est déjà dans le texte, on masque le © automatique. */
.opc-lb-credit.has-html::before{ content:none; }
.opc-lb-credit .opc-lb-copy{ font-style:normal; }
/* L'exposant du rang suit l'italique du crédit (demande Marc). */
.opc-lb-credit sup{ font-size:.62em; }
.opc-lb button{ position:absolute; border:0; background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:.2s; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.opc-lb button:hover{ background:rgba(255,255,255,.22); }
.opc-lb button svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; }
.opc-lb-close{ top:22px; right:22px; }
.opc-lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.opc-lb-next{ right:22px; top:50%; transform:translateY(-50%); }
.opc-lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.5); font-size:.85rem; letter-spacing:.05em; }
@media (max-width:640px){ .opc-lb-prev{ left:8px; } .opc-lb-next{ right:8px; } .opc-lb button{ width:44px; height:44px; } }
@media (max-height:520px){ .opc-lb img{ max-height:70vh; } .opc-lb figure{ max-height:80vh; } .opc-lb figcaption{ margin-top:8px; font-size:.8rem; } .opc-lb-count{ bottom:8px; } }

/* ---------- Bille de verre (reprise à l'identique de l'accueil/infos) ---------- */
.gball{ position:fixed; left:0; top:0; width:76px; height:76px; margin:-38px 0 0 -38px; z-index:9000; pointer-events:none;
  opacity:0; transform:scale(.5); transition:opacity .2s ease, transform .2s ease; }
.gball.show{ opacity:1; transform:scale(1); }
.gball-shadow{ position:absolute; left:64%; top:74%; width:135%; height:60%; margin-left:-67%;
  transform:rotate(30deg); background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.46), rgba(0,0,0,0) 68%); filter:blur(2.5px); }
.gball-halo{ position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:0 0 15px 1px rgba(0,0,0,.17); }
.gball-clip{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  -webkit-mask:radial-gradient(circle at center,#000 91%,rgba(0,0,0,0) 100%);
  mask:radial-gradient(circle at center,#000 91%,rgba(0,0,0,0) 100%); }
.gball-base{ position:absolute; inset:-16px; background-repeat:no-repeat; background-position:50% 50%;
  background-size:160%; opacity:0; transition:opacity .15s ease; filter:url(#lens); }
.gball.on-img .gball-base{ opacity:1; }
.gball-glass{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 62% 54% at 31% 26%, rgba(0,0,0,.22), rgba(0,0,0,0) 62%),
    radial-gradient(ellipse 78% 56% at 55% 90%, rgba(255,255,255,.44), rgba(255,255,255,0) 76%); }
.gball-spec{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:4; }
.gball-spec::before,.gball-spec::after{ content:""; position:absolute; border-radius:50%; background:#fff; filter:blur(.5px); }
.gball-spec::before{ left:29%; top:27%; width:8.5%; height:6%; transform:rotate(-22deg); opacity:.95; }
.gball-spec::after{ left:39%; top:23%; width:4.2%; height:3.4%; opacity:.9; }
@media (hover:none){ .gball{ display:none; } }

@media (max-width:640px){ .opc-photos{ columns:2 160px; } }

/* ---------- Légende par photo (galerie « Coup de cœur ») ---------- */
/* Légende incrustée EN BAS À GAUCHE de la photo, comme sur les vignettes de la page Galeries :
   dégradé sombre pour la lisibilité, mois en « eyebrow » (ambre + trait), nom en Recursive gras arrondi. */
.opc-photos figure:has(.opc-photo-cap){ position:relative; }
.opc-photos figure:has(.opc-photo-cap)::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:12px;
  background:linear-gradient(0deg,rgba(6,16,22,.9),rgba(6,16,22,.34) 42%,rgba(6,16,22,0) 72%); }
.opc-photo-cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px; text-align:left; pointer-events:none; }
.opc-photo-cap .opc-photo-k{ display:inline-flex; align-items:center; gap:9px; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; margin:0 0 6px; color:color-mix(in srgb, var(--opc-sec-accent) 42%, #ffffff);
  text-shadow:0 1px 6px rgba(0,0,0,.75); }
.opc-photo-cap .opc-photo-k::before{ content:""; width:20px; height:2px; background:currentColor; opacity:.85; flex:none; }
/* L'ordinal (chiffre + exposant) reste un seul bloc, exposant collé et propre. */
.opc-photo-cap .opc-photo-k .ord{ letter-spacing:0; white-space:nowrap; }
.opc-photo-cap .opc-photo-k .ord sup{ font-size:.62em; letter-spacing:0; margin-left:.02em; }
.opc-photo-cap .opc-photo-t{ display:block; font-family:'Recursive',var(--sans); font-variation-settings:'wght' 900, 'CASL' var(--opc-casl);
  font-size:1.12rem; line-height:1.1; color:#eaf6fb; text-shadow:0 2px 14px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.6); }

/* Titre du photographe dans les galeries : corps réduit (demande Marc, plus discret). */
.opc-album-single .opc-page-title{ font-size:clamp(1.7rem,3.6vw,2.9rem); }