/* ============================================================
   TÉRA VISION — Galerie photos (/galerie)
   Thème sombre « salle d'exposition » : les photos ressortent.
   Aucune police ni bibliothèque externe : chargement minimal.
   ============================================================ */
:root{
    --bg:#0a0d0b; --bg-2:#101512; --surface:#151b17; --line:#ffffff14;
    --text:#f1f5f2; --muted:#9aa89f; --gold:#f9d406; --gold-2:#e2a400; --green:#0f7a30; --green-2:#19a14a;
    --radius:18px; --wrap:1240px; --row:200px;
    --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.g-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 max(20px,env(safe-area-inset-left)); }
.g-muted{ color:var(--muted); }
.g-gold{ background:linear-gradient(90deg,var(--gold),#ffe98a 50%,var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.g-eyebrow{ margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.g-skip{ position:absolute; left:-999px; top:8px; background:var(--gold); color:#000; padding:8px 14px; border-radius:8px; z-index:100; }
.g-skip:focus{ left:8px; }

/* ── Boutons ── */
.g-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; border:1px solid transparent;
    font-weight:650; font-size:.95rem; text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .25s var(--ease), background .25s, border-color .25s; }
.g-btn svg{ width:18px; height:18px; }
.g-btn:active{ transform:scale(.97); }
.g-btn--gold{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#141414; box-shadow:0 12px 30px -12px #f9d40680; }
.g-btn--gold:hover{ transform:translateY(-2px); }
.g-btn--ghost{ background:#ffffff0d; border-color:#ffffff26; color:var(--text); }
.g-btn--ghost:hover{ background:#ffffff1a; border-color:#ffffff4d; }
.g-pill{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; font-size:.85rem; font-weight:700; text-decoration:none; }
.g-pill--green{ background:var(--green); color:#fff !important; }
.g-pill--gold{ background:var(--gold); color:#141414 !important; }

/* ── Barre de navigation ── */
.g-bar{ position:sticky; top:0; z-index:40; background:#0a0d0bd9; backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.g-bar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; }
.g-logo{ display:inline-flex; background:#fff; border-radius:999px; padding:6px 14px; flex:none; }
.g-logo img{ display:block; height:24px; width:auto; }
.g-nav{ display:flex; align-items:center; gap:4px; }
.g-nav > a{ padding:8px 12px; border-radius:999px; color:#d6ded9; text-decoration:none; font-size:.92rem; font-weight:550; }
.g-nav > a:hover{ color:#fff; background:#ffffff0f; }
.g-nav > a.is-active{ color:#141414; background:var(--gold); }
.g-nav__cta{ display:flex; gap:6px; margin-left:8px; }
.g-nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.g-burger{ display:none; }

/* ── En-têtes ── */
.g-hero{ position:relative; }
.g-hero h1{ margin:0 0 14px; font-size:clamp(2rem,5.4vw,3.6rem); line-height:1.05; letter-spacing:-.03em; font-weight:800; }
.g-lead{ margin:0 0 22px; max-width:720px; color:#c9d3cd; font-size:clamp(1rem,1.6vw,1.12rem); }
.g-hero--list{ padding:clamp(48px,9vw,96px) 0 clamp(30px,5vw,48px); background:radial-gradient(60% 90% at 10% 0%, #0f7a3040, transparent 70%), radial-gradient(40% 70% at 90% 10%, #f9d40618, transparent 70%); }
.g-stats{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; color:var(--muted); }
.g-stats b{ color:var(--text); font-size:1.3rem; margin-right:4px; }

.g-hero--album{ min-height:clamp(420px,68vh,720px); display:flex; align-items:flex-end; padding:120px 0 clamp(28px,5vw,56px); overflow:hidden; isolation:isolate; }
.g-hero__bg{ position:absolute; inset:0; z-index:-1; }
.g-hero__bg img{ width:100%; height:100%; object-fit:cover; animation:gZoom 18s ease-out both; }
.g-hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,#0a0d0b59 0%,#0a0d0b26 35%,#0a0d0bcc 75%,var(--bg) 100%), linear-gradient(90deg,#0a0d0bb3,transparent 70%); }
@keyframes gZoom{ from{ transform:scale(1.08); } }
.g-hero__content{ animation:gRise .9s var(--ease) both; }
@keyframes gRise{ from{ opacity:0; transform:translateY(24px); } }
.g-crumbs{ display:flex; gap:8px; flex-wrap:wrap; font-size:.85rem; color:#c9d3cd; margin-bottom:14px; }
.g-crumbs a{ color:var(--gold); text-decoration:none; font-weight:600; }
.g-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 16px; color:#dfe7e2; font-size:.95rem; }
.g-meta span{ display:inline-flex; align-items:center; gap:7px; }
.g-meta svg{ width:18px; height:18px; color:var(--gold); }
.g-hero__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ── Cartes d'albums ── */
.g-albums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-bottom:40px; }
.g-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; text-decoration:none; background:var(--surface); aspect-ratio:4/3; isolation:isolate;
    box-shadow:0 20px 40px -24px #000; transition:transform .45s var(--ease), box-shadow .45s; }
.g-card--big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; min-height:100%; }
.g-card__img{ position:absolute; inset:0; z-index:-1; }
.g-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.g-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 35%,#000000d9 100%); }
.g-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -28px #000; }
.g-card:hover .g-card__img img{ transform:scale(1.06); }
.g-card__count{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:#0a0d0b99; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:.82rem; font-weight:700; }
.g-card__count svg{ width:16px; height:16px; color:var(--gold); }
.g-card__body{ position:absolute; left:0; right:0; bottom:0; padding:20px; display:grid; gap:4px; }
.g-card__days{ justify-self:start; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#141414; background:var(--gold); padding:3px 9px; border-radius:6px; }
.g-card__title{ font-size:1.15rem; line-height:1.25; font-weight:750; }
.g-card--big .g-card__title{ font-size:clamp(1.4rem,2.6vw,2rem); }
.g-card__meta{ font-size:.86rem; color:#d0d9d3; }
.g-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:var(--radius); }
.g-pager{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 0 50px; }

/* ── Onglets des sections ── */
.g-tabs{ position:sticky; top:64px; z-index:30; background:#0a0d0be6; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.g-tabs__in{ display:flex; gap:8px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none; }
.g-tabs__in::-webkit-scrollbar{ display:none; }
.g-tabs a{ flex:none; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); color:#d6ded9; text-decoration:none; font-weight:600; font-size:.9rem; transition:background .25s, color .25s, border-color .25s; }
.g-tabs a small{ font-size:.75rem; color:var(--muted); font-weight:600; }
.g-tabs a:hover{ border-color:#ffffff40; }
.g-tabs a.is-active{ background:var(--text); color:#0a0d0b; border-color:var(--text); }
.g-tabs a.is-active small{ color:#4a5750; }

/* ── Grille justifiée (sans JavaScript) ── */
.g-album{ padding-top:28px; padding-bottom:30px; }
.g-section{ padding:18px 0 34px; scroll-margin-top:130px; }
.g-section__head{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.g-section__head h2{ margin:0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.02em; }
.g-section__head::after{ content:""; flex:1; height:1px; background:var(--line); align-self:center; }
.g-grid{ display:flex; flex-wrap:wrap; gap:6px; }
.g-grid::after{ content:""; flex-grow:999999; }
.g-tile{ position:relative; flex-grow:calc(var(--r) * 100); flex-basis:calc(var(--r) * var(--row)); aspect-ratio:var(--r); max-height:calc(var(--row) * 1.35);
    border-radius:6px; overflow:hidden; cursor:zoom-in; animation:gFade .5s ease both; }
.g-tile img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; }
.g-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,#00000080); opacity:0; transition:opacity .3s; }
.g-tile:hover img{ transform:scale(1.04); }
.g-tile:hover::after{ opacity:1; }
@keyframes gFade{ from{ opacity:0; } }
.g-more{ display:flex; margin:22px auto 0; }
.g-more.is-loading{ opacity:.6; pointer-events:none; }

/* ── Visionneuse ── */
.g-lb{ position:fixed; inset:0; z-index:100; background:#050606; display:grid; grid-template-rows:auto 1fr auto; overscroll-behavior:contain; transition:background-color .25s; }
.g-lb[hidden]{ display:none; }
.g-lb.is-open{ animation:gLb .25s ease both; }
@keyframes gLb{ from{ opacity:0; } }
.g-lb__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:max(10px,env(safe-area-inset-top)) 12px 6px 18px; font-size:.9rem; color:#cfd8d2; }
.g-lb__info b{ color:#fff; margin-right:6px; }
.g-lb__icon{ width:46px; height:46px; border-radius:50%; border:0; background:#ffffff14; cursor:pointer; display:grid; place-items:center; }
.g-lb__icon:hover{ background:#ffffff26; }
.g-lb__icon svg{ width:22px; height:22px; }
/* Bande de photos : défilement natif aimanté, une photo par glisser */
.g-lb__stage{ position:relative; overflow:hidden; min-height:0; }
.g-lb__track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior:contain;
    scrollbar-width:none; touch-action:pan-x; transition:transform .3s var(--ease); cursor:grab; }
.g-lb__track::-webkit-scrollbar{ display:none; }
.g-lb__track.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
.g-lb__slide{ position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; }
.g-lb__slide img{ position:absolute; top:0; bottom:0; left:72px; right:72px; width:calc(100% - 144px); height:100%; object-fit:contain;
    user-select:none; -webkit-user-drag:none; pointer-events:none; transition:filter .35s ease; }
.g-lb__slide img:not([src]){ visibility:hidden; }
.g-lb__slide[data-state="th"] img{ filter:blur(6px); }
.g-lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:#ffffff14; cursor:pointer; display:grid; place-items:center; }
.g-lb__nav:hover{ background:#ffffff2e; }
.g-lb__nav:disabled{ opacity:.2; cursor:default; }
.g-lb__nav svg{ width:26px; height:26px; }
.g-lb__nav--prev{ left:10px; } .g-lb__nav--next{ right:10px; }
.g-lb__bottom{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:12px 16px max(14px,env(safe-area-inset-bottom)); }
.g-lb__bottom small{ font-weight:600; opacity:.7; }

/* ── Appel à l'action & pied ── */
.g-cta{ border-top:1px solid var(--line); background:radial-gradient(50% 120% at 100% 0%, #f9d40614, transparent 70%), var(--bg-2); }
.g-cta__in{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top:44px; padding-bottom:44px; }
.g-cta h2{ margin:0 0 6px; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.02em; }
.g-cta p{ margin:0; }
.g-cta__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.g-foot{ border-top:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.g-foot__in{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:18px; padding-bottom:max(18px,env(safe-area-inset-bottom)); }
.g-foot a{ color:#cfd8d2; text-decoration:none; }

/* ── Tablette ── */
@media (max-width:1024px){
    :root{ --row:170px; }
    .g-albums{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .g-card--big{ grid-row:auto; aspect-ratio:16/9; }
    .g-nav > a{ padding:8px 9px; font-size:.88rem; }
}
/* ── Menu repliable ── */
@media (max-width:900px){
    .g-burger{ display:grid; gap:4px; place-content:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); cursor:pointer; }
    .g-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--text); transition:transform .3s, opacity .3s; }
    .g-nav{ position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px 18px; background:#0a0d0b; border-bottom:1px solid var(--line); box-shadow:0 30px 60px #000c;
        transform:translateY(-8px); opacity:0; visibility:hidden; transition:transform .3s var(--ease), opacity .3s, visibility .3s; }
    .g-nav > a{ padding:12px 14px; font-size:1rem; }
    .g-nav__cta{ margin:8px 0 0; }
    .g-nav__cta .g-pill{ flex:1; justify-content:center; height:44px; }
    .g-nav-toggle:checked ~ .g-nav{ transform:none; opacity:1; visibility:visible; }
    .g-nav-toggle:checked ~ .g-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
    .g-nav-toggle:checked ~ .g-burger span:nth-child(2){ opacity:0; }
    .g-nav-toggle:checked ~ .g-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}
/* ── Mobile ── */
@media (max-width:640px){
    :root{ --row:118px; }
    .g-wrap{ padding-left:16px; padding-right:16px; }
    .g-albums{ grid-template-columns:1fr; gap:14px; }
    .g-card, .g-card--big{ grid-column:auto; aspect-ratio:4/3; }
    .g-grid{ gap:3px; }
    .g-tile{ border-radius:3px; }
    .g-hero--album{ min-height:clamp(380px,62vh,560px); padding-top:90px; }
    .g-hero__actions .g-btn{ flex:1; }
    .g-lb__slide img{ left:6px; right:6px; width:calc(100% - 12px); }
    .g-lb__nav{ display:none; }
    .g-lb__bottom .g-btn{ flex:1; }
    .g-cta__btns .g-btn{ flex:1; }
    .g-section{ padding-bottom:24px; }
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
}