/* =============================================================
   Vivid Parallax Gallery — vpg-style.css
   Design : Moderne / Coloré — typographie expressive,
   palettes vives, animations fluides, mise en page audacieuse
   ============================================================= */

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

/* ─────────────────────────────────────────────
   Variables
───────────────────────────────────────────── */
:root {
  --vpg-c1:      #ff6b35;   /* orange vif     */
  --vpg-c2:      #06d6a0;   /* menthe         */
  --vpg-c3:      #7c3aed;   /* violet         */
  --vpg-c4:      #ffd60a;   /* jaune soleil   */
  --vpg-c5:      #ef476f;   /* rose chaud     */
  --vpg-dark:    #0f0f0f;
  --vpg-light:   #fafaf7;
  --vpg-gray:    #888;
  --vpg-font-display: 'Syne', sans-serif;
  --vpg-font-body:    'DM Sans', sans-serif;
  --vpg-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --vpg-radius:  4px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ─────────────────────────────────────────────
   Utilitaires communs
───────────────────────────────────────────── */
.vpg-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--vpg-ease), transform .9s var(--vpg-ease);
}
.vpg-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.vpg-reveal-delay-1 { transition-delay: .1s; }
.vpg-reveal-delay-2 { transition-delay: .2s; }
.vpg-reveal-delay-3 { transition-delay: .3s; }
.vpg-reveal-delay-4 { transition-delay: .4s; }

/* ═══════════════════════════════════════════
   1. GALERIE PARALLAX COLORÉE
═══════════════════════════════════════════ */
.vpg-gallery {
  --vpg-accent: var(--vpg-c1);
  width: 100%;
  padding: clamp(2rem, 5vw, 6rem) 0;
}

/* Ligne de section numérotée */
.vpg-gallery__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: clamp(4rem, 10vw, 12rem);
  position: relative;
}

/* Alternance droite/gauche */
.vpg-gallery__item:nth-child(even) {
  direction: rtl;
}
.vpg-gallery__item:nth-child(even) > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .vpg-gallery__item,
  .vpg-gallery__item:nth-child(even) {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}

/* Bloc image */
.vpg-gallery__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: var(--vpg-radius);
}

/* Bande colorée derrière l'image */
.vpg-gallery__img-wrap::before {
  content: '';
  position: absolute;
  inset: -8px -8px -8px -8px;
  background: var(--vpg-item-color, var(--vpg-accent));
  border-radius: var(--vpg-radius);
  transform: translate(12px, 12px);
  z-index: 0;
  transition: transform .5s var(--vpg-ease);
}
.vpg-gallery__item:hover .vpg-gallery__img-wrap::before {
  transform: translate(18px, 18px);
}

.vpg-gallery__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 120%;           /* débordement pour parallax */
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  transition: transform .05s linear;
  border-radius: var(--vpg-radius);
}

/* Bloc texte */
.vpg-gallery__info {
  padding: clamp(1rem, 3vw, 3rem);
}

.vpg-gallery__number {
  font-family: var(--vpg-font-display);
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--vpg-item-color, var(--vpg-accent));
  display: block;
  margin-bottom: 1rem;
  letter-spacing: -.04em;
  user-select: none;
}

.vpg-gallery__title {
  font-family: var(--vpg-font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: var(--vpg-dark);
  margin: 0 0 .75rem;
  line-height: 1.15;
}

.vpg-gallery__caption {
  font-family: var(--vpg-font-body);
  font-size: .95rem;
  color: var(--vpg-gray);
  margin: 0;
  line-height: 1.7;
}

/* Ligne décorative colorée */
.vpg-gallery__line {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--vpg-item-color, var(--vpg-accent));
  margin-bottom: 1.25rem;
  border-radius: 99px;
  transition: width .4s var(--vpg-ease);
}
.vpg-gallery__item:hover .vpg-gallery__line { width: 80px; }

/* ═══════════════════════════════════════════
   2. SPOTLIGHT — Plein écran avec révélation couleur
═══════════════════════════════════════════ */
.vpg-spotlight {
  --vpg-spot-color: var(--vpg-c3);
  position: relative;
  width: 100%;
  min-height: 85vh;
  overflow: hidden;
  cursor: crosshair;
  display: flex;
  align-items: flex-end;
}

.vpg-spotlight__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}

/* Révélation couleur au hover via radial-gradient qui suit le curseur */
.vpg-spotlight__color-reveal {
  position: absolute;
  inset: 0;
  background: var(--vpg-spot-color);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity .4s var(--vpg-ease);
  pointer-events: none;
  z-index: 2;
}
.vpg-spotlight:hover .vpg-spotlight__color-reveal {
  opacity: .55;
}

/* Masque radial qui suit la souris */
.vpg-spotlight__cursor-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 300px at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 100%
  );
  z-index: 3;
  pointer-events: none;
  transition: background .1s;
}

.vpg-spotlight__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.85) 0%, transparent 60%);
  z-index: 4;
}

.vpg-spotlight__content {
  position: relative;
  z-index: 5;
  padding: clamp(2rem, 5vw, 5rem);
  color: #fff;
  max-width: 720px;
}

.vpg-spotlight__label {
  font-family: var(--vpg-font-display);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vpg-spot-color);
  display: block;
  margin-bottom: .75rem;
}

.vpg-spotlight__title {
  font-family: var(--vpg-font-display);
  font-size: clamp(2rem, 5.5vw, 5rem);
  font-weight: 800;
  margin: 0 0 1.5rem;
  line-height: 1.05;
  letter-spacing: -.02em;
}

.vpg-spotlight__tag {
  display: inline-block;
  background: var(--vpg-spot-color);
  color: #fff;
  font-family: var(--vpg-font-body);
  font-size: .8rem;
  font-weight: 300;
  padding: .4em 1em;
  border-radius: 99px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   3. MOSAÏQUE ASYMÉTRIQUE COLORÉE
═══════════════════════════════════════════ */
.vpg-mosaic {
  --cols: 12;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: clamp(60px, 8vw, 100px);
  gap: clamp(4px, .6vw, 10px);
  width: 100%;
}

@media (max-width: 600px) {
  .vpg-mosaic {
    --cols: 6;
    grid-auto-rows: clamp(50px, 12vw, 80px);
  }
}

/* Positions prédéfinies — 9 tuiles asymétriques */
.vpg-mosaic__tile { position: relative; overflow: hidden; border-radius: var(--vpg-radius); }
.vpg-mosaic__tile:nth-child(1)  { grid-column: 1 / 6;  grid-row: 1 / 5; }
.vpg-mosaic__tile:nth-child(2)  { grid-column: 6 / 9;  grid-row: 1 / 3; }
.vpg-mosaic__tile:nth-child(3)  { grid-column: 9 / 13; grid-row: 1 / 4; }
.vpg-mosaic__tile:nth-child(4)  { grid-column: 6 / 9;  grid-row: 3 / 6; }
.vpg-mosaic__tile:nth-child(5)  { grid-column: 9 / 11; grid-row: 4 / 7; }
.vpg-mosaic__tile:nth-child(6)  { grid-column: 11/ 13; grid-row: 4 / 6; }
.vpg-mosaic__tile:nth-child(7)  { grid-column: 1 / 4;  grid-row: 5 / 8; }
.vpg-mosaic__tile:nth-child(8)  { grid-column: 4 / 7;  grid-row: 5 / 7; }
.vpg-mosaic__tile:nth-child(9)  { grid-column: 7 / 10; grid-row: 6 / 8; }

@media (max-width: 600px) {
  .vpg-mosaic__tile:nth-child(1)  { grid-column: 1 / 4; grid-row: 1 / 4; }
  .vpg-mosaic__tile:nth-child(2)  { grid-column: 4 / 7; grid-row: 1 / 3; }
  .vpg-mosaic__tile:nth-child(3)  { grid-column: 4 / 7; grid-row: 3 / 5; }
  .vpg-mosaic__tile:nth-child(4)  { grid-column: 1 / 4; grid-row: 4 / 6; }
  .vpg-mosaic__tile:nth-child(5)  { grid-column: 4 / 7; grid-row: 5 / 7; }
  .vpg-mosaic__tile:nth-child(6)  { grid-column: 1 / 4; grid-row: 6 / 8; }
  .vpg-mosaic__tile:nth-child(7)  { display: none; }
  .vpg-mosaic__tile:nth-child(8)  { display: none; }
  .vpg-mosaic__tile:nth-child(9)  { display: none; }
}

.vpg-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--vpg-ease), filter .4s;
  will-change: transform;
}

/* Flash couleur au survol */
.vpg-mosaic__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vpg-tile-color, var(--vpg-c1));
  opacity: 0;
  transition: opacity .35s var(--vpg-ease);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}
.vpg-mosaic__tile:hover::after { opacity: .6; }
.vpg-mosaic__tile:hover .vpg-mosaic__img { transform: scale(1.07); }

/* Caption dans la mosaïque */
.vpg-mosaic__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: .6rem .8rem;
  font-family: var(--vpg-font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(15,15,15,.7), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--vpg-ease), transform .35s var(--vpg-ease);
  pointer-events: none;
}
.vpg-mosaic__tile:hover .vpg-mosaic__caption {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   Éditeur Elementor — widget vide
───────────────────────────────────────────── */
.elementor-empty-widget {
  padding: 2rem;
  background: repeating-linear-gradient(
    45deg,
    #f5f5f5 0,
    #f5f5f5 10px,
    #ebebeb 10px,
    #ebebeb 20px
  );
  border: 2px dashed #ccc;
  color: #666;
  font-family: var(--vpg-font-body);
  border-radius: 6px;
  text-align: center;
}