/* ============================================================
   Iliade — Lightbox overrides : design, densité, accessibilité
   S’appuie sur --hb-brand / --hb-bd / --hb-soft
   ============================================================ */

/* --- Toolbar & sous-titres (caption OFF) --- */
.lg-outer .lg-toolbar,
.lg-outer .lg-sub-html {
  background: color-mix(in oklab, #000 60%, transparent);
  backdrop-filter: blur(6px);
}
.lg-outer .lg-sub-html { display: none !important; } /* ⬅️ force no-caption */

/* --- Forcer toolbar à DROITE + ordre des icônes --- */
.lg-toolbar{
  display:flex !important;
  justify-content:flex-end !important;  /* croix & actions à droite */
  align-items:center;
  gap:6px;
}
.lg-toolbar .lg-icon{ opacity:1; pointer-events:auto; }
.lg-close{ order: 99; }                 /* la croix en dernier, à droite */
.lg-native-share{ order: 98; }          /* Partager juste avant la croix */

/* Empêcher d’éventuels resets globaux de casser les boutons */
.lg-toolbar button,
.lg-toolbar .lg-icon{
  background:none;
  border:0;
  box-shadow:none;
}

/* --- Bouton Partager (style) --- */
.lg-outer .lg-native-share.lg-icon {
  border-radius: 10px;
  border: 1px solid var(--hb-brand, #5CA174);
  color: #fff;
  background: color-mix(in oklab, var(--hb-brand, #5CA174) 85%, #000);
  margin-right: 4px;
}
.lg-outer .lg-native-share.lg-icon:hover { filter: brightness(1.05); }

/* --- Thumbnails --- */
.lg-outer .lg-thumb-outer {
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.lg-outer .lg-thumb-item {
  border-radius: 10px;
  overflow: hidden;
  outline: none;
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:focus-visible {
  box-shadow: 0 0 0 2px var(--hb-brand, #5CA174);
}

/* --- Anim / focus --- */
@media (prefers-reduced-motion: no-preference) {
  .lg-outer .lg-object { transition: transform .28s ease, opacity .28s ease; }
}
.lg-outer .lg-toolbar .lg-icon { transition: transform .15s ease; }
.lg-outer .lg-toolbar .lg-icon:hover { transform: translateY(-1px); }

/* Compteur lisible */
.lg-outer .lg-counter {
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
}

/* Boutons nav + focus accessibles */
.lg-outer .lg-prev,
.lg-outer .lg-next {
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.lg-outer .lg-prev:focus-visible,
.lg-outer .lg-next:focus-visible,
.lg-outer .lg-close:focus-visible,
.lg-outer .lg-native-share:focus-visible {
  outline: 2px solid var(--hb-brand, #5CA174);
  outline-offset: 2px;
}

/* --- Priorité aux contrôles de tes rails (cliquables au-dessus) --- */
.hb .hb-floral__rail,
.galerie-carrousel-selection {
  position: relative;
  z-index: 1;
}

/* les boutons doivent passer AU-DESSUS de toute surcouche décorative */
.hb .hb-floralCtrls {
  position: relative;
  z-index: 5;            /* plus haut que tout overlay décoratif */
}

/* si tu as un overlay visuel sur le rail, on le rend non bloquant */
.hb .hb-floral__rail::before,
.hb .hb-floral__rail::after {
  pointer-events: none !important;      /* l’overlay ne capte pas les clics */
}

/* (optionnel) en cas de styles agressifs globaux sur button */
.hb .hb-floralBtn {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

/* (sécurité) évite qu’un reset global remette la toolbar à gauche */
[dir="ltr"] .lg-toolbar { justify-content: flex-end !important; }
/* ============================================================
   Iliade — Lightbox overrides : design, densité, accessibilité
   ============================================================ */

/* Toolbar & (on masque les captions) */
.lg-outer .lg-toolbar,
.lg-outer .lg-sub-html {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.lg-outer .lg-sub-html { display: none !important; } /* pas de légendes */

/* Toolbar à droite + ordre des icônes (share avant close) */
.lg-toolbar{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  gap:6px;
}
.lg-toolbar .lg-icon{ opacity:1; pointer-events:auto; }
.lg-native-share{ order: 98; }
.lg-close{ order: 99; }

/* Bouton partager */
.lg-outer .lg-native-share.lg-icon {
  border-radius: 10px;
  border: 1px solid var(--hb-brand, #5CA174);
  color: #fff;
  background: linear-gradient(180deg, color-mix(in oklab, var(--hb-brand, #5CA174) 85%, #000), #111);
  margin-right: 4px;
}
.lg-outer .lg-native-share.lg-icon:hover { filter: brightness(1.05); }

/* Thumbnails */
.lg-outer .lg-thumb-outer { background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)); }
.lg-outer .lg-thumb-item { border-radius: 10px; overflow: hidden; outline: none; }
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:focus-visible { box-shadow: 0 0 0 2px var(--hb-brand, #5CA174); }

/* Anim / focus */
@media (prefers-reduced-motion: no-preference) {
  .lg-outer .lg-object { transition: transform .28s ease, opacity .28s ease; }
}
.lg-outer .lg-toolbar .lg-icon { transition: transform .15s ease; }
.lg-outer .lg-toolbar .lg-icon:hover { transform: translateY(-1px); }

/* Compteur lisible */
.lg-outer .lg-counter {
  font-size: 13px;
  padding: 6px 10px;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
}

/* Nav + focus */
.lg-outer .lg-prev, .lg-outer .lg-next { border-radius: 12px; backdrop-filter: blur(4px); }
.lg-outer .lg-prev:focus-visible,
.lg-outer .lg-next:focus-visible,
.lg-outer .lg-close:focus-visible,
.lg-outer .lg-native-share:focus-visible {
  outline: 2px solid var(--hb-brand, #5CA174); outline-offset: 2px;
}

/* S’assure que la toolbar est visible (même si une classe l’opaque) */
.lg-outer .lg-toolbar{ opacity:1 !important; transform:none !important; }

/* Priorité z-index : tes flèches restent cliquables au-dessus du décor */
.hb .hb-floral__rail,
.galerie-carrousel-selection { position: relative; z-index: 1; }
.hb .hb-floralCtrls { position: relative; z-index: 5; }
.hb .hb-floral__rail::before,
.hb .hb-floral__rail::after { pointer-events: none !important; }

[dir="ltr"] .lg-toolbar { justify-content: flex-end !important; }