/* ═══════════════════════════════════════════════════
   Pinault Galleries — pgl-style.css
   PSG Hero · SG Galerie défilante · PSG Slider
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@300;400;600&family=DM+Mono:ital,wght@0,300;1,300&display=swap');

:root {
  --pgl-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --pgl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pgl-font-h:   'Syne', sans-serif;
  --pgl-font-m:   'DM Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; }

.pgl-empty {
  padding: 2rem; text-align: center; color: #999;
  font-family: var(--pgl-font-m); font-size: .75rem; font-style: italic;
}

/* ═══════════════════════════════════════════════════
   1. PSG HERO — Plein écran parallaxe
   ═══════════════════════════════════════════════════ */
.pgl-hero {
  position: relative;
  width: 100%;
  height: var(--pgl-hero-h, 100vh);
  background: var(--pgl-hero-bg, #111);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Image wrap */
.pgl-hero__img-wrap {
  position: absolute;
  inset: 0;
  /* On élargit l'image pour que le parallaxe ait de la marge */
  top: -15%;
  bottom: -15%;
}
.pgl-hero--parallax .pgl-hero__img-wrap {
  will-change: transform;
}

.pgl-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pgl-hero-pos, 50% 50%);
  pointer-events: none;
  user-select: none;
}

/* Overlay */
.pgl-hero__overlay {
  position: absolute; inset: 0;
  background: var(--pgl-hero-ov, #000);
  opacity: var(--pgl-hero-ov-op, 0.4);
  pointer-events: none;
}

/* Contenu texte */
.pgl-hero__content {
  position: relative;
  z-index: 2;
  display: block;
  padding: clamp(2rem, 5vw, 5rem);
  text-decoration: none;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
  transition: background .4s var(--pgl-ease);
}
.pgl-hero__content:hover {
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 70%);
}

.pgl-hero__cat {
  display: inline-block;
  font-family: var(--pgl-font-m);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  margin-bottom: .5rem;
}

.pgl-hero__title {
  font-family: var(--pgl-font-h);
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 .5rem;
  max-width: 800px;
  transition: opacity .3s;
}
.pgl-hero__content:hover .pgl-hero__title { opacity: .9; }

.pgl-hero__excerpt {
  font-family: var(--pgl-font-m);
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  margin: .4rem 0 0;
  max-width: 500px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   2. SG — GALERIE DÉFILANTE PARALLAX
   ═══════════════════════════════════════════════════ */

/* Outer = pleine largeur potentielle */
.pgl-sg-outer {
  width: 100%;
  overflow: hidden;
}

/* Pleine largeur (casse les marges du conteneur Elementor) */
.pgl-sg--fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Grille */
.pgl-sg {
  display: grid;
  grid-template-columns: repeat(var(--pgl-sg-cols, 3), 1fr);
  gap: var(--pgl-sg-gap, 0px);
  width: 100%;
}

@media (max-width: 1024px) {
  .pgl-sg { grid-template-columns: repeat(var(--pgl-sg-cols-tab, 2), 1fr); }
}
@media (max-width: 640px) {
  .pgl-sg { grid-template-columns: repeat(var(--pgl-sg-cols-mob, 1), 1fr); }
}

/* Item */
.pgl-sg__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--pgl-sg-ratio, 3/4);
  background: #1a1a1a;
}

/* Image avec marge de headroom pour le parallaxe */
.pgl-sg__img-wrap {
  position: absolute;
  inset: 0;
  top: calc(-1 * var(--pgl-sg-pm, 10%));
  bottom: calc(-1 * var(--pgl-sg-pm, 10%));
  overflow: hidden;
}

.pgl-sg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  pointer-events: none;
}
.pgl-sg__img-empty { width:100%; height:100%; background:#222; }

/* Lien invisible par-dessus */
.pgl-sg__link {
  position: absolute; inset: 0;
  z-index: 3;
  display: block;
  text-decoration: none;
  /* Overlay au hover */
  background: rgba(0,0,0,0);
  transition: background .45s var(--pgl-ease);
}
.pgl-sg__link:hover { background: rgba(0,0,0,.15); }

/* ── Fondu entrant ─────────────────────────────── */
.pgl-sg--fadein .pgl-sg__item--fi {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .7s var(--pgl-ease-out) var(--pgl-sg-item-delay, 0ms),
    transform .7s var(--pgl-ease-out) var(--pgl-sg-item-delay, 0ms);
}
.pgl-sg--fadein .pgl-sg__item--fi.pgl-in {
  opacity: 1;
  transform: none;
}

/* ── Fondu sortant ─────────────────────────────── */
.pgl-sg--fadeout .pgl-sg__item--fo {
  transition: opacity .4s var(--pgl-ease), transform .4s var(--pgl-ease);
}
.pgl-sg--fadeout .pgl-sg__item--fo.pgl-out {
  opacity: 0;
  transform: scale(.97);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   3. PSG SLIDER HORIZONTAL
   ═══════════════════════════════════════════════════ */

/* Outer — PAS de bordure, pas d'overflow hidden sur outer
   pour que les flèches débordent si besoin */
.pgl-slider-outer {
  position: relative;
  background: var(--pgl-sl-bg, #fff);
  /* Supprime toute bordure héritée d'Elementor */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Zone scrollable — overflow-x caché via JS, visible en natif */
.pgl-slider {
  display: flex;
  gap: var(--pgl-sl-gap, 16px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
  padding: 0;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.pgl-slider::-webkit-scrollbar { display: none; }
.pgl-slider.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* Item */
.pgl-sl__item {
  flex: 0 0 calc(
    (100% - var(--pgl-sl-gap, 16px) * (var(--pgl-sl-cols, 3) - 1))
    / var(--pgl-sl-cols, 3)
  );
  min-width: 0;
}

@media (max-width: 1024px) {
  .pgl-sl__item {
    flex: 0 0 calc(
      (100% - var(--pgl-sl-gap, 16px) * (var(--pgl-sl-cols-tab, 2) - 1))
      / var(--pgl-sl-cols-tab, 2)
    );
  }
}
@media (max-width: 640px) {
  .pgl-sl__item {
    flex: 0 0 calc(
      (100% - var(--pgl-sl-gap, 16px) * (var(--pgl-sl-cols-mob, 1) - 1))
      / var(--pgl-sl-cols-mob, 1)
    );
  }
}

.pgl-sl__link {
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.pgl-sl__img-wrap {
  aspect-ratio: var(--pgl-sl-ratio, 3/4);
  overflow: hidden;
  background: #f0f0f0;
}
.pgl-sl__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--pgl-ease-out);
  pointer-events: none;
}
.pgl-sl__item:hover .pgl-sl__img { transform: scale(1.04); }
.pgl-sl__img-empty { width:100%; height:100%; background:#e0e0e0; }

/* ── Fondu fort sur les bords ─────────────────────
   Dégradé du fond vers transparent, réglable en px   */
.pgl-slider__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--pgl-sl-fade-size, 180px);
  z-index: 4;
  pointer-events: none;
}
.pgl-slider__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--pgl-sl-fade-color, #fff) 0%,
    rgba(255,255,255,0) 100%
  );
}
.pgl-slider__fade--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--pgl-sl-fade-color, #fff) 0%,
    rgba(255,255,255,0) 100%
  );
}

/* ── Navigation flèches ───────────────────────────── */
.pgl-sl-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pgl-sl-bg, #fff);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--pgl-ease);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.pgl-sl-nav svg { width:18px; height:18px; stroke:currentColor; }
.pgl-sl-prev { left: calc(var(--pgl-sl-fade-size, 180px) * .25); }
.pgl-sl-next { right: calc(var(--pgl-sl-fade-size, 180px) * .25); }
.pgl-sl-nav:hover { background: #111; border-color: #111; color: #fff; }
.pgl-sl-prev:hover { transform: translateY(-50%) translateX(-3px); }
.pgl-sl-next:hover { transform: translateY(-50%) translateX(3px); }
.pgl-sl-nav:disabled { opacity: .3; pointer-events: none; }

/* ── Placeholders éditeur Elementor ──────────────── */
.pgl-editor-ph {
  border: 2px dashed #ccc; border-radius: 6px; padding: 3rem 2rem;
  text-align: center; background: #f8f8f8; color: #888;
  font-family: var(--pgl-font-m); font-size: .78rem;
}
.pgl-editor-ph strong {
  display: block; font-family: var(--pgl-font-h);
  font-weight: 400; font-size: 1rem; color: #555; margin-bottom: .4rem;
}