/* ══════════════════════════════════════════════════════════════
   ✦ Edito Gallery — eg-style.css
   Direction : Éditorial Magazine — Playfair + DM Sans
   Minimaliste, coloré par accent, espaces maîtrisés
   ══════════════════════════════════════════════════════════════ */

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

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --eg-accent:   #E63946;
  --eg-gap:      16px;
  --eg-radius:   4px;
  --eg-bar:      3px;
  --eg-fi-dur:   700ms;
  --eg-fi-dist:  40px;
  --eg-cols:     3;
  --eg-cols-t:   2;
  --eg-cols-m:   1;
  --eg-delay:    0ms;

  --eg-ease:     cubic-bezier(0.25, 1, 0.5, 1);
  --eg-ease-o:   cubic-bezier(0.16, 1, 0.3, 1);

  --eg-f-disp:   'Playfair Display', Georgia, serif;
  --eg-f-body:   'DM Sans', system-ui, sans-serif;
  --eg-f-mono:   'DM Mono', monospace;
}

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

.eg-empty {
  padding: 3rem; text-align: center; color: #aaa;
  font: 300 .75rem/1 var(--eg-f-mono); font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   MASONRY — colonnes CSS natives (pas de dépendance)
   Chaque carte est break-inside:avoid → hauteur naturelle
══════════════════════════════════════════════════════════════ */
.eg-wrap    { width: 100%; }
.eg-masonry {
  columns: var(--eg-cols, 3);
  column-gap: var(--eg-gap, 16px);
  width: 100%;
}
@media (max-width: 1024px) { .eg-masonry { columns: var(--eg-cols-t, 2); } }
@media (max-width: 640px)  { .eg-masonry { columns: var(--eg-cols-m, 1); } }

/* ══════════════════════════════════════════════════════════════
   CARTE ÉDITORIALE
══════════════════════════════════════════════════════════════ */
.eg-card {
  break-inside: avoid;
  display: block;
  margin-bottom: var(--eg-gap, 16px);
  background: #fff;
  border-radius: var(--eg-radius, 4px);
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05);
  transition:
    box-shadow .45s var(--eg-ease),
    transform  .45s var(--eg-ease);
  will-change: transform, opacity;
}
.eg-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-4px);
}

/* ── Barre accent haut ─── */
.eg-card--bar-top::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:var(--eg-bar,3px); background:var(--eg-accent); z-index:3;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--eg-ease-o);
}
.eg-card--bar-top.eg-visible::before,
.eg-card--bar-top:not(.eg-fi)::before { transform:scaleX(1); }

/* ── Barre accent gauche ─── */
.eg-card--bar-left::before {
  content:''; position:absolute; top:0; left:0; bottom:0;
  width:var(--eg-bar,3px); background:var(--eg-accent); z-index:3;
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--eg-ease-o);
}
.eg-card--bar-left.eg-visible::before,
.eg-card--bar-left:not(.eg-fi)::before { transform:scaleY(1); }

/* ── Lien ─── */
.eg-card__a {
  display:block; text-decoration:none; color:inherit;
}

/* ── Image ─── */
.eg-card__img {
  position:relative; overflow:hidden; width:100%;
  background:#f0f0f0;
}
.eg-card__img:not([style*="aspect-ratio"]) { min-height:100px; }
.eg-card__img img {
  display:block; width:100%; height:100%;
  object-fit:cover;
  transition:transform .85s var(--eg-ease-o);
  will-change:transform;
}
.eg-card:hover .eg-card__img img { transform:scale(1.06); }

/* Shimmer overlay au hover */
.eg-card__shimmer {
  position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.eg-card:hover .eg-card__shimmer { opacity:1; }

/* Mode overlay */
.eg-card--ov .eg-card__body {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 100%);
  color:#fff;
}
.eg-card--ov .eg-card__title { color:#fff; }
.eg-card--ov .eg-card__expt  { color:rgba(255,255,255,.65); }
.eg-card--ov .eg-date        { color:rgba(255,255,255,.45); }

/* ── Corps ─── */
.eg-card__body {
  padding:1rem 1.15rem 1.2rem;
  display:flex; flex-direction:column; gap:.45rem;
}
.eg-card__meta {
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}

/* ── Tag ─── */
.eg-tag {
  display:inline-block;
  font:300 .59rem/1 var(--eg-f-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--eg-accent); border:1px solid var(--eg-accent);
  padding:.22em .65em; border-radius:2px;
  text-decoration:none;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.eg-tag:hover { background:var(--eg-accent); color:#fff; }

/* ── Date ─── */
.eg-date {
  font:300 italic .58rem/1 var(--eg-f-mono);
  letter-spacing:.06em; color:#c0c0c0;
  margin-left:auto;
}

/* ── Titre ─── */
.eg-card__title {
  font:400 clamp(.95rem,1.25vw,1.18rem)/1.3 var(--eg-f-disp);
  color:#111; margin:0; letter-spacing:-.012em;
}

/* ── Extrait ─── */
.eg-card__expt {
  font:300 .8rem/1.65 var(--eg-f-body);
  color:#6b6b6b; margin:0;
}

/* ── CTA ─── */
.eg-card__cta {
  display:inline-flex; align-items:center; gap:.3rem;
  font:300 .59rem/1 var(--eg-f-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--eg-accent);
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--eg-ease), transform .3s var(--eg-ease);
}
.eg-card__cta svg { width:16px; height:10px; }
.eg-card:hover .eg-card__cta { opacity:1; transform:translateX(0); }

/* ══════════════════════════════════════════════════════════════
   FONDU ENTRANT — 5 effets
══════════════════════════════════════════════════════════════ */
.eg-fi {
  opacity:0;
  transition:
    opacity   var(--eg-fi-dur,700ms) var(--eg-ease-o) var(--eg-delay,0ms),
    transform var(--eg-fi-dur,700ms) var(--eg-ease-o) var(--eg-delay,0ms),
    filter    var(--eg-fi-dur,700ms) var(--eg-ease-o) var(--eg-delay,0ms),
    box-shadow .45s var(--eg-ease),
    translate  .45s var(--eg-ease);
}
.eg-fi--rise  { transform:translateY(var(--eg-fi-dist,40px)); }
.eg-fi--fade  { /* opacity only */ }
.eg-fi--zoom  { transform:scale(.86); }
.eg-fi--blur  { filter:blur(14px); transform:translateY(calc(var(--eg-fi-dist,40px)*.35)); }
.eg-fi--slide { transform:translateX(calc(-1*var(--eg-fi-dist,40px))); }

.eg-fi.eg-visible {
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* ══════════════════════════════════════════════════════════════
   FONDU SORTANT
══════════════════════════════════════════════════════════════ */
.eg-fo {
  transition:
    opacity .5s var(--eg-ease),
    transform .5s var(--eg-ease),
    filter .5s var(--eg-ease),
    box-shadow .45s var(--eg-ease);
}
.eg-fo--fade.eg-hidden  { opacity:0 !important; }
.eg-fo--sink.eg-hidden  { opacity:0 !important; transform:translateY(20px) !important; }
.eg-fo--blur.eg-hidden  { opacity:0 !important; filter:blur(8px) !important; }
.eg-fo.eg-hidden        { pointer-events:none; }

/* ══════════════════════════════════════════════════════════════
   MODE STACK
   Scène : height = n × 100vh, sticky = 100vh
   Chaque carte révèle au scroll et reste visible en retrait
══════════════════════════════════════════════════════════════ */
.eg-scene {
  position:relative; width:100%;
}

.eg-sticky {
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

/* Deck = zone où les cartes se superposent */
.eg-deck {
  position:relative;
  width:min(700px, 94vw);
  height:84vh;
}

/* ── Carte Stack ─── */
.eg-scard {
  position:absolute; inset:0;
  border-radius:calc(var(--eg-radius,4px) + 6px);
  overflow:hidden;
  display:block;

  /* Par défaut : invisible, sous la pile */
  opacity:0;
  transform:
    translateY(calc(var(--eg-offset,12px) * (var(--eg-count,5) - var(--eg-idx,0) - 1)))
    scale(calc(1 - .032 * (var(--eg-count,5) - var(--eg-idx,0) - 1)));
  z-index:1;

  transition:
    transform .75s var(--eg-ease-o),
    opacity   .55s var(--eg-ease-o),
    box-shadow .4s var(--eg-ease);

  box-shadow:
    0 2px 8px rgba(0,0,0,.06),
    0 10px 40px rgba(0,0,0,.09);
}

/* Active = premier plan */
.eg-scard.is-active {
  opacity:1;
  transform:translateY(0) scale(1);
  z-index:20;
  box-shadow:
    0 4px 20px rgba(0,0,0,.12),
    0 20px 60px rgba(0,0,0,.16),
    0 40px 100px rgba(0,0,0,.1);
}

/* Passées = visibles en retrait derrière */
.eg-scard.is-past {
  opacity:var(--eg-past-op, .5);
  z-index:calc(20 - var(--eg-past-depth, 1));
  pointer-events:none;
}

/* ── Layout intérieur carte stack ─── */
.eg-scard__a {
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%; height:100%;
  text-decoration:none; color:inherit;
  background:#fff;
}
@media (max-width:600px) {
  .eg-scard__a { grid-template-columns:1fr; grid-template-rows:45% 1fr; }
}

/* Image */
.eg-scard__img {
  position:relative; overflow:hidden; background:#eee;
}
.eg-scard__img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--eg-ease-o);
}
.eg-scard.is-active .eg-scard__img img { transform:scale(1.04); }

.eg-scard__tint {
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--eg-accent) 0%, transparent 60%);
  opacity:.12; pointer-events:none;
}

/* Corps */
.eg-scard__body {
  display:flex; flex-direction:column;
  position:relative; overflow:hidden; background:#fff;
}

/* Numéro */
.eg-scard__num {
  font:300 .62rem/1 var(--eg-f-mono);
  letter-spacing:.2em; color:var(--eg-accent); opacity:.55;
  padding:1.4rem 1.5rem .3rem;
  flex-shrink:0;
}

/* Contenu */
.eg-scard__content {
  padding:.5rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.55rem;
  flex:1; overflow:hidden;
}
.eg-scard__meta { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }

.eg-scard__title {
  font:400 clamp(1.15rem,2.2vw,1.75rem)/1.22 var(--eg-f-disp);
  color:#111; margin:0; letter-spacing:-.02em;
}

.eg-scard__cta {
  display:inline-block; margin-top:auto;
  font:300 .6rem/1 var(--eg-f-mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--eg-accent); border:1px solid var(--eg-accent);
  padding:.42em 1em; border-radius:2px; width:fit-content;
  transition:background .25s, color .25s;
  opacity:0; transform:translateY(6px);
  transition:background .25s, color .25s, opacity .4s .3s var(--eg-ease-o), transform .4s .3s var(--eg-ease-o);
}
.eg-scard.is-active .eg-scard__cta { opacity:1; transform:translateY(0); }
.eg-scard.is-active .eg-scard__a:hover .eg-scard__cta { background:var(--eg-accent); color:#fff; }

/* Bande colorée bas */
.eg-scard__stripe {
  height:4px; flex-shrink:0;
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--eg-ease-o) .25s;
}
.eg-scard.is-active .eg-scard__stripe { transform:scaleX(1); }

/* ── Dots de progression ─── */
.eg-dots {
  position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.5rem; z-index:30;
}
.eg-dot {
  width:7px; height:7px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(0,0,0,.12);
  padding:0;
  transition:background .3s, transform .3s var(--eg-ease), box-shadow .3s;
}
.eg-dot.is-active {
  background:var(--eg-accent);
  transform:scale(1.5);
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
}
.eg-dot.is-past { background:rgba(0,0,0,.28); }

/* ── Compteur ─── */
.eg-counter {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:baseline; gap:.3rem;
  font:300 .72rem/1 var(--eg-f-mono); letter-spacing:.1em;
  color:#bbb; z-index:30;
  transition:color .3s;
}
.eg-counter__cur { font-size:1.1rem; color:#333; font-weight:400; }
.eg-counter__sep { color:#ddd; }

/* ── Placeholder éditeur ─── */
.eg-ph {
  border:2px dashed #ddd; border-radius:8px;
  padding:3.5rem 2rem; text-align:center; background:#fafafa; color:#bbb;
  font:300 .75rem/1.6 var(--eg-f-mono);
}
.eg-ph strong {
  display:block; font:400 1rem/1 var(--eg-f-disp); color:#555; margin-bottom:.6rem;
}