/* ===== Accueil Oléron Photo Club : diaporama + cartouche + galerie + bille de verre ===== */

.opc-home{ --sea:var(--opc-sea); --deep:var(--opc-deep); --leaf:var(--opc-leaf); --pine:var(--opc-pine);
  --ink:var(--opc-ink); --muted:var(--opc-muted); --line:var(--opc-line);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.opc-home *{ box-sizing:border-box; }

/* ---------- HÉROS ---------- */
.opc-hero{ position:relative; height:100vh; min-height:560px; overflow:hidden; isolation:isolate; }
.opc-hero .slides{ position:absolute; inset:0; }
.opc-hero .slide{ position:absolute; inset:0; opacity:0;
  transition:opacity 1.6s ease; will-change:opacity; }
.opc-hero .slide.on{ opacity:1; }
/* Le zoom Ken Burns s'applique à l'IMAGE seule (.scene), pas à toute la slide,
   pour que le crédit photo (frère de .scene) reste fixe et ne suive pas le zoom. */
.opc-hero .scene{ position:absolute; inset:0; background:center/cover no-repeat;
  transform:scale(1.09); transition:transform 8s ease-out; will-change:transform; }
.opc-hero .slide.on .scene{ transform:scale(1.0); }
.opc-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,25,30,.48), rgba(15,25,30,.06) 45%, transparent 72%),
    linear-gradient(0deg, rgba(12,22,28,.62), rgba(12,22,28,.12) 34%, transparent 55%); }
.opc-hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:0 clamp(24px,5vw,70px) clamp(40px,8vh,90px); }
.opc-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:#eaf6fb; font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; margin:0 0 14px; }
.opc-eyebrow::before{ content:""; width:32px; height:2px; background:currentColor; flex:none; }
.opc-htitle{ font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);  font-family:'Recursive',var(--sans); color:#fff; margin:0;
  font-size:clamp(2.5rem,5.6vw,4.8rem); line-height:1.12; max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.35); }
/* Indicateur de défilement : flèche discrète centrée en bas de l'accueil. */
.opc-scroll-hint{ position:absolute; z-index:5; left:50%; bottom:clamp(22px,4vh,40px); transform:translateX(-50%);
  width:34px; height:34px; display:grid; place-items:center; text-decoration:none;
  transition:opacity .25s; animation:opc-scroll-bounce 2s ease-in-out infinite; }
.opc-scroll-hint:hover svg{ stroke:#fff; }
/* Chevron : même teinte que les points du slider au repos (blanc semi-transparent). */
.opc-scroll-hint svg{ width:28px; height:28px; stroke:rgba(255,255,255,.5); fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
@keyframes opc-scroll-bounce{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(7px); } }
@media (prefers-reduced-motion:reduce){ .opc-scroll-hint{ animation:none; } }

/* Crédit photo (auteur + titre) — discret, en bas à droite de chaque slide.
   N'apparaît que sur le slide actif (fondu synchronisé avec le diaporama). */
/* Aligné sur la même ligne que la flèche (centre) et les puces du slider (droite) :
   même « bottom » que .opc-dots. Teinte du nom = celle des points au repos. */
/* Crédit photo = bloc unique au niveau du héros, AU-DESSUS du voile sombre (z-index élevé).
   Aligné en bas à gauche, sur la même ligne que la flèche (centre) et les puces (droite). */
.opc-credit-photo{ position:absolute; z-index:5; left:clamp(20px,4vw,44px); bottom:clamp(22px,4vh,40px);
  text-align:left; color:rgba(255,255,255,.5); line-height:1; opacity:0; transition:opacity .8s ease;
  pointer-events:none; }
.opc-credit-photo.is-in{ opacity:1; }
.opc-credit-photo .opc-credit-titre{ display:block; font-family:'Recursive',var(--sans); font-style:italic;
  font-size:clamp(.9rem,1.4vw,1.15rem); font-variation-settings:'wght' 700, 'CASL' var(--opc-casl); color:#fff; }
/* Nom du photographe : typo des titres (Recursive), graisse intermédiaire, corps légèrement réduit. Sans ©. */
.opc-credit-photo .opc-credit-auteur{ display:block; font-family:'Recursive',var(--sans); font-style:italic;
  font-variation-settings:'wght' 600; font-size:clamp(.8rem,1.05vw,.95rem); line-height:1.15;
  letter-spacing:.005em; margin-top:2px; }
/* Symbole copyright devant le nom du photographe */
.opc-credit-photo .opc-credit-auteur::before{ content:"\00A9\00A0"; font-style:normal; }
/* Filet séparateur titre / auteur : uniquement quand la photo porte un titre. */
.opc-credit-photo.has-titre .opc-credit-auteur{ margin-top:8px; padding-top:8px; position:relative; }
.opc-credit-photo.has-titre .opc-credit-auteur::after{ content:""; position:absolute; left:0; top:0;
  width:60px; height:1px; background:rgba(255,255,255,.45); }
.opc-dots{ position:absolute; z-index:3; right:clamp(20px,4vw,44px); bottom:clamp(22px,4vh,40px); display:flex; gap:9px; align-items:center; }
.opc-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; transition:.25s; padding:0; }
.opc-dots button.on{ background:#fff; width:26px; border-radius:6px; }

/* ---------- CARTOUCHE « À venir » (carrousel cliquable) ---------- */
.opc-upcoming{ position:absolute; z-index:4; right:clamp(20px,4vw,44px); top:clamp(28px,6vh,64px);
  width:min(300px,74vw); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:8px; overflow:hidden; box-shadow:0 20px 50px rgba(10,25,35,.28); cursor:pointer; }
.opc-u-track{ position:relative; }
.opc-u-item{ display:block; color:inherit; text-decoration:none; position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.opc-u-item.on{ position:relative; opacity:1; pointer-events:auto; }
.opc-u-img{ height:132px; background:center/cover no-repeat #ddd; }
.opc-u-body{ padding:14px 16px 16px; }
.opc-u-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sea); font-weight:700; margin:0 0 6px; }
.opc-u-kicker::before{ content:""; width:18px; height:2px; background:currentColor; flex:none; }
.opc-u-title{ font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);  font-family:'Recursive',var(--sans); font-size:.92rem; margin:0 0 6px; line-height:1.2;
  min-height:calc(.92rem * 1.2 * 2);                 /* réserve toujours 2 lignes -> hauteur constante */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.opc-u-item:hover .opc-u-title{ color:var(--deep); }
.opc-u-meta{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem; margin:0; }
.opc-u-meta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.opc-u-dots{ display:flex; gap:6px; justify-content:center; padding:2px 0 12px; }
.opc-u-dots button{ width:6px; height:6px; border-radius:50%; border:0; background:#cfd8db; cursor:pointer; transition:.25s; padding:0; }
.opc-u-dots button.on{ background:var(--sea); width:16px; border-radius:4px; }

/* ---------- GALERIE ---------- */
.opc-gallery{ padding:clamp(48px,8vw,96px) clamp(24px,5vw,70px); }
.opc-g-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.opc-g-head h2{ font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);  font-family:'Recursive',var(--sans); font-size:clamp(1.7rem,3vw,2.4rem); margin:0; }
.opc-g-head > div{ flex:1 1 100%; }
.opc-g-head p{ margin:6px 0 0; color:var(--muted); max-width:none; font-size:clamp(1.1rem,1.5vw,1.35rem); font-weight:500; line-height:1.6; }
.opc-g-link{ color:var(--deep); font-weight:700; border-bottom:2px solid var(--leaf); padding-bottom:2px; text-decoration:none; margin-left:auto; }
.opc-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.tile{ position:relative; overflow:hidden; border-radius:8px; cursor:none; background:#ddd; display:block; text-decoration:none; color:inherit; }
.tile .ph{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform .5s ease; }
.tile:hover .ph{ transform:scale(1.08); }
.tile.big{ grid-row:span 2; grid-column:span 2; }
.tile .cap{ font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);  position:absolute; left:0; right:0; bottom:0; z-index:5; padding:14px 16px; color:#fff;
  font-family:'Recursive',var(--sans); font-size:1.02rem; line-height:1.12;
  background:linear-gradient(transparent, rgba(10,20,28,.55)); text-shadow:0 1px 8px rgba(0,0,0,.45);
  opacity:0; transform:translateY(8px); transition:.3s; }
.tile:hover .cap{ opacity:1; transform:none; }
.opc-g-hint{ margin-top:16px; color:var(--muted); font-size:.82rem; }

/* ---------- BILLE DE VERRE (curseur, sur les photos) ---------- */
.gball{ position:fixed; left:0; top:0; width:76px; height:76px; margin:-38px 0 0 -38px; z-index:9999; 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; } }

/* ---------- Reveal ---------- */
/* .opc-reveal : défini globalement dans style.css (ralenti + partagé) */

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .opc-hero{ height:auto; min-height:0; aspect-ratio:4/5; max-height:88vh; }
  .opc-upcoming{ width:clamp(220px,42vw,280px); }   /* reste flottant (garde z-index) — plus de position:static qui cassait l'empilement */
  .opc-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
}
@media (max-width:600px){
  .opc-upcoming{ display:none; }        /* mobile portrait : pas de cartouche news, le texte reste sur le slider */
  .opc-hero{ aspect-ratio:3/4; }        /* un peu plus haut pour respirer avec le texte */
}
/* Téléphone paysage : pas de cartouche non plus, et hero à hauteur DÉFINIE (sinon le texte,
   en justify-content:flex-end via height:100%, se colle en haut faute de hauteur de référence) */
@media (max-height:500px) and (orientation:landscape) and (max-width:950px){
  .opc-upcoming{ display:none; }
  .opc-hero{ aspect-ratio:auto; height:82vh; min-height:0; max-height:none; }
}
@media (max-width:520px){ .opc-grid{ grid-template-columns:1fr; grid-auto-rows:200px; } .tile.big{ grid-column:span 1; grid-row:span 1; } }
@media (prefers-reduced-motion:reduce){ .opc-hero .slide{ transition:none; } }