/* Variables globales */
.snh-gallery-wrap{
  --eig-accent:#124129;
  --eig-font:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --eig-cols:3;          /* desktop */
  --gap-x-extra:0px;     /* supplément horizontal */
  --gap-y-extra:0px;     /* supplément vertical */

  --gap-x-base:10px;     /* base = 5px par carte (gauche+droite) */
  --gap-y-base:20px;     /* base = 10px par carte (haut+bas) */

  /* EIG PATCH: variables visuelles additionnelles */
  --eig-card-bg:#fff;
  --eig-glass-bg: rgba(255,255,255,.65);
  --eig-glass-border: 1px solid rgba(255,255,255,.45);
  --eig-shadow: 0 8px 24px rgba(0,0,0,.09);
  --eig-shadow-hover: 0 14px 36px rgba(0,0,0,.16);

  /* EIG PATCH (grille uniforme) : ratio commun des vignettes */
  --eig-card-ratio: 1/1; /* ex: 1/1, 4/3, 3/4 */

  font-family:var(--eig-font);
  color:#1b1b1b;
}

/* Toolbar */
.snh-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.snh-total{font-weight:500}.snh-total .snh-total-count{font-weight:700}

/* Filtre (z-index élevé pour passer devant la grille) */
.snh-controls{display:flex;align-items:center;gap:12px}
.snh-filter{position:relative;z-index:1000}
.snh-filter-toggle{appearance:none;border:0;cursor:pointer;outline:none;background:var(--eig-accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600}

/* EIG PATCH: animation d'ouverture (slide+blur) — sera activée par classe .is-open (JS) */
.snh-filter-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:#1b1b1b;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.12);padding:14px;min-width:240px;z-index:1100;
  opacity:0; transform:translateY(-6px); filter:blur(0.2px);
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
  pointer-events:none;
}
.snh-filter-menu[hidden]{display:none}

/* FIX: garder le panneau de lightbox dans le DOM mais invisible (évite les erreurs JS quand show_info=OFF) */
.snh-lb-panel[hidden]{display:none}

.snh-filter.is-open .snh-filter-menu{opacity:1; transform:translateY(0); filter:blur(0); pointer-events:auto}

.snh-filter-section+.snh-filter-section{margin-top:10px}
.snh-filter-title{font-size:.9rem;font-weight:600;opacity:.75;margin-bottom:6px}
.snh-filter-menu button{display:block;width:100%;text-align:left;appearance:none;border:0;background:#fff;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .14s ease}
.snh-filter-menu button:hover{background:#f3f4f6}
.snh-filter-menu select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid #e5e7eb;background:#fff}

/* EIG PATCH: chips de filtres actifs (créées en JS) */
.snh-active-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.snh-chip{display:inline-flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;padding:6px 10px;border-radius:999px;font-size:.9rem}
.snh-chip button{appearance:none;border:0;background:transparent;cursor:pointer;line-height:1}

/* Search */
.snh-search{margin-bottom:16px}
.snh-search-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;outline:none;transition:border-color .15s ease, box-shadow .15s ease}
.snh-search-input:focus{border-color:var(--eig-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--eig-accent) 20%, transparent)}
.snh-no-results{display:none;margin:10px 0 20px;color:#6b7280}

/* Grille (CSS Grid) */
.snh-gallery{
  display:grid;
  grid-template-columns:repeat(var(--eig-cols,3),1fr);
  column-gap:calc(var(--gap-x-base) + var(--gap-x-extra));
  row-gap:calc(var(--gap-y-base) + var(--gap-y-extra));
}

/* Carte (patch clic : footer au-dessus de l'image) */
.snh-card{position:relative;border-radius:18px;overflow:hidden;background:var(--eig-card-bg);box-shadow:var(--eig-shadow);
  /* EIG PATCH: hover doux */
  transform:translateY(0) scale(1);
  transition:transform .18s ease, box-shadow .2s ease;
  will-change:transform, box-shadow;
}
.snh-card:hover{transform:translateY(-4px) scale(1.02); box-shadow:var(--eig-shadow-hover)}

/* === EIG PATCH (grille uniforme + fond flou intelligent) === */
.snh-lightbox-link{
  position:relative; z-index:1; display:block; overflow:hidden;
  aspect-ratio: var(--eig-card-ratio, 1/1);
  background:#111; /* fallback discret */
}
/* Fond flou (utilise --eig-thumb, posée en JS) */
.snh-lightbox-link::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--eig-thumb, none);
  background-size: cover; background-position: center;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.1);   /* évite les bords du blur */
  opacity:.55; pointer-events:none;
}
/* Vignettage subtil pour du relief */
.snh-lightbox-link::after{
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.08), rgba(0,0,0,.25));
  opacity:.25; pointer-events:none;
}
/* L’image reste intacte (contain) et remplit le cadre visuel */
.snh-card img{
  position:relative; z-index:1;
  display:block; width:100%; height:100%;
  object-fit: contain;
  transition:transform .35s ease; will-change:transform;
}
.snh-card:hover img{transform:scale(1.03)}

/* === Badges (nouveau + top like) === */
/* Conteneur commun en haut-gauche */
.snh-badges{
  position:absolute; top:4px; left:4px;
  display:flex; gap:6px; z-index:2;
}
/* Badge "Nouveau" existant — neutralisé quand rendu dans .snh-badges */
.snh-badge-new{
  position:absolute;top:4px;left:4px;background:#ffd65a;color:#111;font-weight:700;font-size:.78rem;padding:6px 10px;border-radius:999px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.12)
}
.snh-badges .snh-badge-new{ position:static; top:auto; left:auto; }

/* Nouveau badge "Top like" */
.snh-badge-top{
  background:#ff5a6b; /* fallback plein */
  color:#fff;
  font-weight:700; font-size:.78rem;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* Verre pour les deux badges */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .snh-badge-new{
    background:rgba(255,214,90,.75);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,214,90,.65);
  }
  .snh-badge-top{
    background:rgba(252,52,65,.75);                 /* rouge translucide */
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border:1px solid rgba(252,52,65,.65);
  }
}

/* Footer */
/* GRID À ZONES :
   "title   title"
   "meta    meta"
   "caption actions"
   → titre & méta sur 2 colonnes ; caption à gauche ; actions à droite, alignées sur la caption */
.snh-footer{
  position:relative;z-index:3;background:var(--eig-card-bg);
  padding:16px 18px 14px;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title title"
    "meta  meta"
    "caption actions";
  column-gap:16px; row-gap:0;
  align-items:end; /* actions alignées sur la ligne de caption */
  border-top-left-radius:18px;border-top-right-radius:18px
}

/* EIG PATCH: glass sur le footer (fallback: bg plein) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .snh-footer{
    background:var(--eig-glass-bg);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-top:var(--eig-glass-border);
  }
}

/* .snh-texts devient "transparent" pour exposer ses enfants au grid parent */
.snh-texts{
  display:contents;
  min-width:0;
}

/* Titres & clamp */
.snh-title{
  grid-area:title;
  font-size:1.15rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;            /* → 2 lignes max pour réduire les "…" */
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;              /* supprime le nowrap précédent */
  margin:0 0 6px;
}
.snh-caption{
  grid-area:caption;
  color:#3b3b3b;font-size:1rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Méta — look éditorial */
.snh-meta{
  grid-area:meta;
  font-size:.92rem;color:#6b7280;margin-bottom:8px;
  font-variant-caps: all-small-caps;
  letter-spacing:.06em;
}

/* Actions — colonne de droite, alignées bas/droite */
.snh-actions{
  grid-area:actions;
  display:flex; align-items:flex-end; gap:18px;
  justify-self:end; align-self:end;
}
.snh-actions .snh-like,.snh-actions .snh-download{position:relative;z-index:4}

/* Like */
.snh-like{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#111;padding:4px; position:relative}
.snh-like svg{width:28px;height:28px;display:block;transition:transform .14s ease,color .14s ease, filter .14s ease}
.snh-like .snh-like-count{font-weight:600;font-size:.95rem;display:inline-block;transition:transform .12s ease; line-height:1; min-height:1em}
.snh-like:hover svg{transform:scale(1.06)}
.snh-like.is-liked{color:var(--eig-accent)}
.snh-like.is-liked svg path{stroke:var(--eig-accent);fill:var(--eig-accent)}

/* EIG PATCH: confettis + micro-interactions like */
@keyframes eig-like-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.snh-like.is-animating svg{ animation:eig-like-pulse .22s ease }
@keyframes eig-count-bump { 0%{transform:translateY(0)} 40%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
.snh-like.is-bump .snh-like-count{ animation:eig-count-bump .18s ease }
.snh-like .snh-confetti-dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  opacity:0; pointer-events:none;
}
@keyframes eig-confetti-pop {
  0%{opacity:0; transform:translate(-50%,-50%) scale(.6)}
  20%{opacity:1}
  100%{opacity:0; transform:translate(var(--dx,0), var(--dy,0)) scale(1)}
}

/* Download */
.snh-download{color:#111;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px; position:relative}
.snh-download svg{width:26px;height:26px;display:block;transition:transform .14s ease, color .14s ease}
.snh-download:hover{color:var(--eig-accent)}

/* EIG PATCH: placeholder de compteur pour aligner avec le like */
.snh-download .snh-download-count{
  font-weight:600; font-size:.95rem; line-height:1; min-height:1em;
  visibility:hidden; /* réservé pour l’alignement, restera invisible */
  display:inline-block;
  transition:opacity .18s ease, transform .18s ease;
}

/* EIG PATCH: progress ring (état is-loading) + succès (is-success) */
.snh-download.is-loading::after{
  content:""; position:absolute; inset:-4px auto auto -4px; right:-4px; bottom:auto;
  width:34px; height:34px; border-radius:50%;
  background: conic-gradient(var(--eig-accent) 0 25%, rgba(0,0,0,0) 25% 100%);
  mask: radial-gradient(farthest-side, transparent calc(50% - 3px), #000 calc(50% - 2px));
  animation: eig-rotate 1s linear infinite;
  pointer-events:none;
}
@keyframes eig-rotate { to{ transform:rotate(360deg)} }
.snh-download.is-success svg{ transform:scale(1.1) }
.snh-download.is-bump .snh-download-count{ transform:translateY(-2px) }

/* Top liké — neutralisation de l’halo rouge kitch */
.snh-top-liked{ box-shadow: var(--eig-shadow); }

/* Load more */
.snh-loadmore-wrap{display:flex;justify-content:center;margin-top:18px}
.snh-load-more{appearance:none;border:0;cursor:pointer;outline:none;background:#fff;color:#111;border:1px solid #e5e7eb;padding:10px 16px;border-radius:10px;font-weight:600;transition:border-color .15s ease,color .15s ease}
.snh-load-more:hover{border-color:var(--eig-accent);color:var(--eig-accent)}

/* EIG PATCH: stagger d'apparition (JS appliquera .is-stagger + --i) */
@keyframes eig-fadein { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
.snh-gallery.is-stagger .snh-card{ animation:eig-fadein .24s ease both; animation-delay:calc(var(--i, 0) * 40ms); }

/* Focus states (accessibilité) */
.snh-lightbox-link:focus-visible,
.snh-like:focus-visible,
.snh-download:focus-visible,
.snh-filter-toggle:focus-visible,
.snh-load-more:focus-visible,
.snh-filter-menu button:focus-visible,
.snh-filter-menu select:focus-visible,
.snh-search-input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--eig-accent) 22%, transparent), 0 0 0 1px var(--eig-accent) inset;
  border-color:var(--eig-accent);
}

/* Responsive */
@media (max-width:1024px){
  .snh-gallery-wrap{--eig-cols:2}
}
@media (max-width:640px){
  .snh-gallery-wrap{--eig-cols:1}
  .snh-footer{
    padding:14px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta"
      "caption"
      "actions"; /* pile: actions sous la caption pour éviter l'écrasement */
  }
  .snh-actions{
    justify-self:start;
    margin-top:10px;
  }
}

/* === v1.7.11 — Correctifs couleur du cœur ===
   - Cœur liké toujours rouge fixe (#fc3441)
   - Pas d’overlay rose/teinte au survol
   Ces règles surclassent les styles existants sans les supprimer.
*/
.snh-like.is-liked,
.snh-like.is-liked svg {
  color: #fc3441 !important;
  fill: #fc3441 !important;
  stroke: #fc3441 !important;
}

/* Neutralise tout fond/halo au survol du bouton de like */
.snh-like:hover,
.snh-like:focus {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Le petit compteur sous le cœur reste inchangé (texte par défaut) — rien à faire ici */

/* EIG PATCH: respects prefers-reduced-motion (adoucit les anims) */
@media (prefers-reduced-motion: reduce){
  .snh-card,
  .snh-card img,
  .snh-like svg,
  .snh-like .snh-like-count,
  .snh-download svg,
  .snh-download .snh-download-count,
  .snh-filter-menu{
    transition:none !important;
    animation:none !important;
  }
}