/* ===== Page Infos (archive opc_info) : photos immersives + filtres + bille de verre ===== */

/* (Le fond sombre « galerie » est défini dans style.css sous body.opc-imm — partagé Infos + Galeries.) */

.opc-infos{ --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);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:1160px; margin:0 auto; padding:clamp(30px,5vw,64px) clamp(20px,4vw,48px) 90px; }
.opc-infos *{ box-sizing:border-box; }

.opc-infos-head{ margin-bottom:0; }
.opc-infos-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--sea);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; margin:0 0 18px; }
.opc-infos-eyebrow::before{ content:""; width:36px; height:2px; background:var(--sea); display:inline-block; }
.opc-infos-title{ font-family:'Recursive',var(--sans); font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.0; letter-spacing:-.01em; margin:0; color:#f3f8fb; }
.opc-infos-intro{ color:color-mix(in srgb, var(--opc-sec-accent) 46%, #ffffff); font-weight:500;
  margin:clamp(28px,4vw,48px) 0 0; max-width:none;
  font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.6; }

/* onglets de filtre */
.opc-tabs{ display:flex; flex-wrap:wrap; gap:9px; margin:clamp(26px,3.5vw,38px) 0 26px; }
.opc-tab{ border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:8px 16px; font-size:.88rem; cursor:pointer; font-family:'Recursive',var(--sans); font-variation-settings:'wght' 600; transition:.18s; }
.opc-tab:hover{ border-color:var(--deep); color:var(--deep); }
.opc-tab.on{ background:var(--deep); color:#fff; border-color:var(--deep); }

/* grille immersive */
.imm{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:188px; gap:16px; grid-auto-flow:dense; }
.imm-card{ position:relative; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end;
  text-decoration:none; color:#fff; cursor:none; background:#cfd8db; }
.imm-card.big{ grid-column:span 2; grid-row:span 2; }
.imm-card .bg{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform .5s ease; }
.imm-card:hover .bg{ transform:scale(1.06); }
.imm-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg,rgba(6,16,22,.92),rgba(6,16,22,.38) 44%,rgba(6,16,22,0) 74%); }
.imm-card .in{ position:relative; z-index:2; padding:16px 18px; width:100%; }
.imm-card .imm-k{ display:inline-flex; align-items:center; gap:9px; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 6px; color:color-mix(in srgb, var(--opc-sec-accent) 55%, #ffffff);
  text-shadow:0 1px 6px rgba(0,0,0,.6); }
.imm-card .imm-k::before{ content:""; width:20px; height:2px; background:currentColor; opacity:.85; flex:none; }
.imm-card .imm-t{ font-family:'Recursive',var(--sans); font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); font-size:1.12rem; line-height:1.08; margin:0 0 5px;
  color:#eaf6fb; text-shadow:0 2px 14px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.6); }
.imm-card.big .imm-t{ font-size:clamp(1.4rem,2.6vw,2rem); }
.imm-card .imm-dt{ font-size:.84rem; opacity:.95; margin:0; color:#eaf6fb; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* Page Galeries uniquement : noms des photographes en taille réduite (l'arrondi CASL vient de la règle globale, graisse ≥ 700). */
.opc-galeries-page .imm-card .imm-t{ font-size:1.06rem; }
.opc-galeries-page .imm-card.big .imm-t{ font-size:clamp(1.32rem,2.4vw,1.85rem); }
@media (max-width:1024px){
  .opc-galeries-page .imm-card .imm-t{ font-size:1rem; }
  .opc-galeries-page .imm-card.big .imm-t{ font-size:clamp(1.2rem,3.6vw,1.6rem); }
}

/* pastille de date */
.imm-date{ position:absolute; top:12px; left:12px; z-index:3; background:rgba(255,255,255,.94); color:var(--ink);
  border-radius:10px; padding:6px 10px; text-align:center; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.imm-date .d{ display:block; font-family:'Recursive',var(--sans); font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); font-size:1.25rem; }
.imm-date .m{ display:block; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-top:2px; }
.imm-date .y{ display:block; font-size:.56rem; font-weight:700; color:var(--sea); letter-spacing:.04em; margin-top:1px; }

/* catégories (kicker coloré quand pas sur image) — ici le kicker est clair sur photo, on garde la teinte via la pastille */
/* Les catégories suivent désormais la couleur de la rubrique (anis) — plus de teinte par catégorie. */

/* passées : grisées */
.imm-card.past .bg{ filter:grayscale(.85) brightness(.92); }
.imm-card.past::after{ background:linear-gradient(0deg,rgba(20,28,34,.8),rgba(20,28,34,.2) 55%,rgba(20,28,34,.08) 78%); }
.imm-card.past .imm-date{ background:rgba(236,236,236,.9); }
.imm-card.past:hover .bg{ filter:grayscale(0) brightness(1); }

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

/* (La barre latérale d'Infos suit désormais le système « couleur par section » : dégradé anis + texture sable.
   Le fond SOMBRE ci-dessus concerne uniquement la zone de CONTENU, conservée à la demande de Marc.) */

@media (max-width:860px){ .imm{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } }
@media (max-width:600px){ .imm{ grid-template-columns:1fr; grid-auto-rows:200px; } .imm-card.big{ grid-column:span 1; grid-row:span 1; } }
@media (max-height:500px) and (max-width:950px){ .imm{ grid-auto-rows:140px; } .imm-card.big{ grid-column:span 1; grid-row:span 1; } }

/* ---------- Détail d'une Info (single) : bandeau photo en haut, titre & texte dessous ---------- */
.opc-single-band{ width:100%; height:clamp(200px,30vh,360px); background:#20303a center/cover no-repeat; }
.opc-single-band.no-photo{ height:clamp(110px,16vh,180px);
  background:linear-gradient(135deg, color-mix(in srgb, var(--opc-sec-accent) 60%, #1b2630), color-mix(in srgb, var(--opc-sec-accent) 28%, #0f161c)); }
.opc-single{ max-width:1000px; margin:0 auto; padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px) 110px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.opc-single-back{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.9rem; margin-top:2rem;
  color:color-mix(in srgb, var(--opc-sec-accent) 46%, #ffffff); }
.opc-single-back svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.opc-single-back:hover{ gap:12px; }
.opc-single-head .k{ display:inline-flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 12px;
  color:color-mix(in srgb, var(--opc-sec-accent) 42%, #ffffff); }
.opc-single-head .k::before{ content:""; width:24px; height:2px; background:currentColor; opacity:.9; flex:none; }
.opc-single-head h1{ font-family:'Recursive',var(--sans) !important; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);
  font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.06; letter-spacing:-.01em; margin:0 0 14px;
  color:#fff !important; }
.opc-single-head .date{ display:inline-flex; align-items:center; gap:8px; color:#aebcc4; font-size:.98rem; }
.opc-single-head .date svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.opc-single-body{ max-width:none; margin:clamp(30px,4vw,48px) 0 0; color:#d6dee3; font-size:1.1rem; line-height:1.85;
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.opc-single-body p{ margin:0 0 1.2em; }
.opc-single-body a{ color:color-mix(in srgb, var(--opc-sec-accent) 45%, #ffffff); }
.opc-single-body h2, .opc-single-body h3{ font-family:'Recursive',var(--sans); color:#f3f8fb; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); margin:1.6em 0 .5em; }
.opc-single-body img{ max-width:100%; height:auto; border-radius:14px; margin:1em 0; }
.opc-single-body ul, .opc-single-body ol{ padding-left:1.3em; margin:0 0 1.2em; }
.opc-single-cta{ text-align:center; margin-top:clamp(40px,6vw,66px); }
.opc-single-cta a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; border-radius:999px; padding:13px 26px;
  color:#16202a; background:color-mix(in srgb, var(--opc-sec-accent) 72%, #ffffff); transition:.25s; }
.opc-single-cta a:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.35); }
.opc-single-cta svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* ---------- BILLE DE VERRE (curseur, reprise à l'identique de l'accueil) ---------- */
.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; } .imm-card{ cursor:pointer; } }

/* ── Documents à télécharger (single info) : boutons centrés entre texte et photos ── */
.opc-docs{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:2.5rem auto; max-width:900px; }
.opc-doc-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:.85rem 1.5rem; border-radius:999px;
  background:var(--opc-accent,#2f9fd6); color:#fff !important; text-decoration:none;
  font-weight:600; font-size:1rem; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.opc-doc-btn svg{ width:20px; height:20px; flex:none; }
.opc-doc-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.22); background:var(--opc-accent-dark,#2680ad); color:#fff !important; }