/* =========================================================
   EXCLUSIF — Galerie Premium Fusion + Slider
   Fichier : /docs/CSS/exclusif-galerie-premium.css

   Couvre :
   - .module-galerie.type-1  => cartes premium
   - .module-galerie.type-2  => roll hover premium

   Slider :
   - transformation visuelle JS
   - backoffice garde les contenus / ordre / liens
   - aucune dépendance au nombre d'items
   ========================================================= */

/* =========================================================
   SOCLE COMMUN
   ========================================================= */
html body .module-galerie{
  --xg-bg-1: #15213a;
  --xg-bg-2: #0d1322;
  --xg-surface: rgba(255,255,255,.045);
  --xg-surface-2: rgba(255,255,255,.022);
  --xg-border: rgba(255,255,255,.09);
  --xg-border-strong: rgba(231,190,96,.18);
  --xg-text: #f4f7fb;
  --xg-text-soft: rgba(244,247,251,.84);
  --xg-gold: #e7be60;
  --xg-gold-2: #f4d58d;
  --xg-blue: #78b8ff;
  --xg-shadow: 0 16px 38px rgba(0,0,0,.24);
  --xg-radius-xl: 22px;
  --xg-radius-lg: 18px;
  --xg-radius-md: 14px;

  /* slider vars */
  --xg-gap: 0px;
  --xg-cols: 5;
  --xg-nav-size: 46px;
  --xg-nav-offset: 12px;
}

html body .module-galerie > .fullmod{
  position: relative;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(231,190,96,.10), transparent 58%),
    radial-gradient(700px 240px at 100% 0%, rgba(120,184,255,.08), transparent 56%),
    linear-gradient(180deg, var(--xg-bg-1) 0%, var(--xg-bg-2) 100%);
  box-shadow: var(--xg-shadow);
}

html body .module-galerie > .fullmod::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html body .module-galerie .entete{
  margin: 0;
  padding: 0;
  background: transparent;
}

html body .module-galerie .entete > .fullmod{
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

html body .module-galerie .entete > .fullmod > span{
  display: inline-block;
  position: relative;
  padding-left: 18px;
  color: var(--xg-text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .015em;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}

html body .module-galerie .entete > .fullmod > span::before{
  content: "";
  position: absolute;
  left: 0;
  top: .08em;
  bottom: .08em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--xg-gold-2), var(--xg-gold));
  box-shadow: 0 0 14px rgba(231,190,96,.22);
}

html body .module-galerie a:focus-visible{
  outline: 2px solid rgba(244,213,141,.80);
  outline-offset: 2px;
}

html body .module-galerie .col,
html body .module-galerie .column{
  box-sizing: border-box;
}

/* =========================================================
   MODE SLIDER — SOCLE
   Ajouté par JS via .xg-slider-ready
   ========================================================= */
html body .module-galerie.xg-slider-ready .clear,
html body .module-galerie.xg-slider-ready .clearimportant{
  display: none !important;
}

html body .module-galerie.xg-slider-ready .xg-slider-shell{
  position: relative;
  padding: 8px 56px 12px;
}

html body .module-galerie.xg-slider-ready .xg-slider-viewport{
  overflow: hidden;
  width: 100%;
}

html body .module-galerie.xg-slider-ready .xg-slider-track{
  display: flex;
  transition: transform .34s ease;
  will-change: transform;
}

html body .module-galerie.xg-slider-ready .xg-slide{
  flex: 0 0 100%;
  min-width: 100%;
}

html body .module-galerie.xg-slider-ready .xg-slide-grid{
  display: grid;
  grid-template-columns: repeat(var(--xg-cols), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

html body .module-galerie.xg-slider-ready .xg-nav{
  position: absolute;
  top: 50%;
  z-index: 6;
  width: var(--xg-nav-size);
  height: var(--xg-nav-size);
  margin-top: calc(var(--xg-nav-size) / -2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.22);
  color: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    opacity .18s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html body .module-galerie.xg-slider-ready .xg-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
}

html body .module-galerie.xg-slider-ready .xg-nav:active{
  transform: translateY(0) scale(.98);
}

html body .module-galerie.xg-slider-ready .xg-nav[disabled]{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

html body .module-galerie.xg-slider-ready .xg-nav::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

html body .module-galerie.xg-slider-ready .xg-nav--prev{
  left: var(--xg-nav-offset);
}

html body .module-galerie.xg-slider-ready .xg-nav--prev::before{
  transform: translate(-38%, -50%) rotate(-135deg);
}

html body .module-galerie.xg-slider-ready .xg-nav--next{
  right: var(--xg-nav-offset);
}

html body .module-galerie.xg-slider-ready .xg-nav--next::before{
  transform: translate(-62%, -50%) rotate(45deg);
}

html body .module-galerie.xg-slider-ready .xg-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 2px;
}

html body .module-galerie.xg-slider-ready .xg-dot{
  width: 8px;
  height: 8px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    transform .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

html body .module-galerie.xg-slider-ready .xg-dot:hover{
  transform: scale(1.12);
  background: rgba(255,255,255,.42);
}

html body .module-galerie.xg-slider-ready .xg-dot.is-active{
  background: linear-gradient(135deg, var(--xg-blue), var(--xg-gold-2));
  box-shadow:
    0 0 0 4px rgba(120,184,255,.07),
    0 0 12px rgba(120,184,255,.14);
}

/* =========================================================
   TYPE 1 — CARTES PREMIUM
   ========================================================= */
html body .module-galerie.type-1 .cel1{
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 14px !important;
  padding-bottom: 18px !important;
  background: transparent;
}

html body .module-galerie.type-1 .col{
  padding: 10px;
  border-radius: var(--xg-radius-xl);
  background:
    linear-gradient(180deg, var(--xg-surface), var(--xg-surface-2));
  border: 1px solid var(--xg-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(0,0,0,.14);
  overflow: hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

html body .module-galerie.type-1 .col:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 36px rgba(0,0,0,.22);
}

html body .module-galerie.type-1 .col > a{
  display: block;
  text-decoration: none;
}

html body .module-galerie.type-1 img.vignette{
  display: block;
  width: 100% !important;
  height: 160px !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border-radius: 16px;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition:
    transform .35s ease,
    filter .25s ease;
}

html body .module-galerie.type-1 .col:hover img.vignette{
  transform: scale(1.035);
  filter: saturate(1.07) contrast(1.04);
}

html body .module-galerie.type-1 .titre{
  margin: 12px 0 0;
  padding: 0;
}

html body .module-galerie.type-1 .titre a{
  display: block;
  position: relative;
  min-height: 56px;
  padding: 12px 14px 14px 30px;
  border-radius: 14px;
  color: var(--xg-text-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

html body .module-galerie.type-1 .titre a::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--xg-blue), var(--xg-gold-2));
  box-shadow:
    0 0 0 4px rgba(120,184,255,.07),
    0 0 12px rgba(120,184,255,.12);
}

html body .module-galerie.type-1 .col:hover .titre a{
  color: #fff;
  border-color: rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03));
}

/* =========================================================
   TYPE 2 — ROLL HOVER PREMIUM
   ========================================================= */
html body .module-galerie.type-2 .cel1safe{
  padding: 14px 14px 18px;
  background: transparent;
}

html body .module-galerie.type-2 .vignette{
  position: relative;
  max-width: 100%;
  border-radius: var(--xg-radius-xl);
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--xg-surface), var(--xg-surface-2));
  border: 1px solid var(--xg-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.16);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

html body .module-galerie.type-2 .vignette:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 38px rgba(0,0,0,.22);
}

html body .module-galerie.type-2 .vignette .bg{
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  background-position: center center !important;
  background-size: cover !important;
  transition:
    transform .35s ease,
    filter .28s ease;
  filter: saturate(1.02) contrast(1.02);
}

html body .module-galerie.type-2 .vignette:hover .bg{
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.05);
}

html body .module-galerie.type-2 .vignette .bg::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,10,18,0) 0%, rgba(5,10,18,.10) 42%, rgba(5,10,18,.70) 100%);
}

html body .module-galerie.type-2 .rollover_infos{
  position: absolute !important;
  inset: 3px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(7,12,22,.08), rgba(7,12,22,.68)),
    radial-gradient(240px 120px at 100% 0%, rgba(120,184,255,.16), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(0,0,0,.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html body .module-galerie.type-2 .rollover_infos .titre{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  margin: 0;
  padding: 0;
}

html body .module-galerie.type-2 .rollover_infos .titre a{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

html body .module-galerie.type-2 .vignette::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 42px;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7,12,22,0), rgba(7,12,22,.42));
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  html body .module-galerie{
    --xg-cols: 3;
  }
}

@media (max-width: 700px){
  html body .module-galerie{
    --xg-cols: 2;
    --xg-nav-size: 42px;
  }

  html body .module-galerie.xg-slider-ready .xg-slider-shell{
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 520px){
  html body .module-galerie{
    --xg-cols: 1;
    --xg-nav-size: 40px;
    --xg-nav-offset: 8px;
  }

  html body .module-galerie .entete > .fullmod{
    padding: 16px 16px 12px;
  }

  html body .module-galerie .entete > .fullmod > span{
    font-size: 22px;
  }

  html body .module-galerie.type-1 .cel1{
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  html body .module-galerie.type-1 .col{
    padding: 8px;
  }

  html body .module-galerie.type-1 img.vignette{
    height: 180px !important;
  }

  html body .module-galerie.type-1 .titre a{
    font-size: 14px;
  }

  html body .module-galerie.type-2 .cel1safe{
    padding: 10px 10px 14px;
  }

  html body .module-galerie.type-2 .rollover_infos .titre a{
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  html body .module-galerie *,
  html body .module-galerie *::before,
  html body .module-galerie *::after{
    transition: none !important;
    animation: none !important;
  }
}



/* =========================================================
   PATCH — Galerie slider
   Rail mieux calé + plus d'espace entre cartes
   À mettre EN FIN de exclusif-galerie-premium.css
   ========================================================= */

/* plus d'air entre les cartes */
html body .module-galerie{
  --xg-gap: 18px;
}

/* grille du slider */
html body .module-galerie.xg-slider-ready .xg-slide-grid{
  gap: var(--xg-gap);
  align-items: stretch;
}

/* très important :
   dans le slider, on neutralise les largeurs/float/clear inline CMS
   pour que le rail termine parfaitement aligné */
html body .module-galerie.xg-slider-ready .xg-slide-grid > .col,
html body .module-galerie.xg-slider-ready .xg-slide-grid > .column{
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

/* TYPE 1 : cartes
   on garde le padding interne premium, mais la carte remplit bien sa case */
html body .module-galerie.type-1.xg-slider-ready .xg-slide-grid > .col{
  height: 100%;
}

/* TYPE 2 : roll hover
   ici le CMS met du padding inline autour des colonnes,
   ça décale le rail. On l'annule dans le slider. */
html body .module-galerie.type-2.xg-slider-ready .xg-slide-grid > .column{
  padding: 0 !important;
  height: 100%;
}

/* la vignette roll hover prend toute la largeur de sa case */
html body .module-galerie.type-2.xg-slider-ready .xg-slide-grid > .column > .vignette{
  width: 100% !important;
  margin: 0 !important;
}

/* homogénéisation de hauteur visuelle des cartes type-1 */
html body .module-galerie.type-1.xg-slider-ready .xg-slide-grid > .col{
  display: flex;
  flex-direction: column;
}

html body .module-galerie.type-1.xg-slider-ready .xg-slide-grid > .col > a{
  display: block;
  flex: 0 0 auto;
}

html body .module-galerie.type-1.xg-slider-ready .xg-slide-grid > .col > .titre{
  flex: 1 1 auto;
}

/* un peu plus de respiration latérale dans le shell */
html body .module-galerie.xg-slider-ready .xg-slider-shell{
  padding-left: 62px;
  padding-right: 62px;
}

/* responsive */
@media (max-width: 700px){
  html body .module-galerie{
    --xg-gap: 14px;
  }

  html body .module-galerie.xg-slider-ready .xg-slider-shell{
    padding-left: 52px;
    padding-right: 52px;
  }
}

@media (max-width: 520px){
  html body .module-galerie{
    --xg-gap: 12px;
  }
}


/* =========================================================
   PATCH — Flèches slider style Adobe
   À mettre EN FIN de exclusif-galerie-premium.css
   ========================================================= */

html body .module-galerie{
  --xg-nav-size: 48px;
  --xg-nav-offset: 14px;
}

/* bouton */
html body .module-galerie.xg-slider-ready .xg-nav{
  position: absolute;
  top: 50%;
  z-index: 8;
  width: var(--xg-nav-size);
  height: var(--xg-nav-size);
  margin-top: calc(var(--xg-nav-size) / -2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30,38,56,.96), rgba(16,22,36,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    opacity .16s ease;
}

/* léger reflet interne */
html body .module-galerie.xg-slider-ready .xg-nav::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%);
}

/* hover Adobe */
html body .module-galerie.xg-slider-ready .xg-nav:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(40,50,72,.98), rgba(18,24,40,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 14px 28px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 18px rgba(120,184,255,.10);
}

/* clic/enfoncement */
html body .module-galerie.xg-slider-ready .xg-nav:active{
  transform: translateY(1px) scale(.97);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 6px 14px rgba(0,0,0,.22);
}

/* disabled */
html body .module-galerie.xg-slider-ready .xg-nav[disabled]{
  opacity: .34;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 12px rgba(0,0,0,.16);
}

/* position */
html body .module-galerie.xg-slider-ready .xg-nav--prev{
  left: var(--xg-nav-offset);
}

html body .module-galerie.xg-slider-ready .xg-nav--next{
  right: var(--xg-nav-offset);
}

/* chevrons Adobe, plus propres */
html body .module-galerie.xg-slider-ready .xg-nav::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2.5px solid rgba(255,255,255,.96);
  border-right: 2.5px solid rgba(255,255,255,.96);
  box-sizing: border-box;
}

html body .module-galerie.xg-slider-ready .xg-nav--prev::before{
  transform: translate(-38%, -50%) rotate(-135deg);
}

html body .module-galerie.xg-slider-ready .xg-nav--next::before{
  transform: translate(-62%, -50%) rotate(45deg);
}

/* petit liseré premium exclusif */
html body .module-galerie.xg-slider-ready .xg-nav--prev{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03),
    -1px 0 0 rgba(244,213,141,.08);
}

html body .module-galerie.xg-slider-ready .xg-nav--next{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03),
    1px 0 0 rgba(120,184,255,.10);
}

/* focus clavier */
html body .module-galerie.xg-slider-ready .xg-nav:focus-visible{
  outline: 2px solid rgba(244,213,141,.82);
  outline-offset: 2px;
}

/* un peu plus compact sur petits écrans */
@media (max-width: 700px){
  html body .module-galerie{
    --xg-nav-size: 44px;
    --xg-nav-offset: 10px;
  }

  html body .module-galerie.xg-slider-ready .xg-nav{
    border-radius: 13px;
  }

  html body .module-galerie.xg-slider-ready .xg-nav::after{
    border-radius: 12px;
  }
}

@media (max-width: 520px){
  html body .module-galerie{
    --xg-nav-size: 40px;
    --xg-nav-offset: 8px;
  }

  html body .module-galerie.xg-slider-ready .xg-nav::before{
    width: 9px;
    height: 9px;
  }
}


/* =========================================================
   PATCH — Compteur en pastille premium
   À mettre EN FIN de exclusif-galerie-premium.css
   ========================================================= */

html body .module-galerie.xg-slider-ready .xg-slider-meta{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0 6px;
}

/* pastille premium */
html body .module-galerie.xg-slider-ready .xg-counter{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 108px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120px 40px at 50% 0%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(33,41,60,.96), rgba(16,22,36,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 12px 28px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.03);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
}

/* reflet premium */
html body .module-galerie.xg-slider-ready .xg-counter::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%);
}

/* filet or/bleu discret */
html body .module-galerie.xg-slider-ready .xg-counter::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(244,213,141,.26) 0%,
      rgba(255,255,255,.06) 35%,
      rgba(120,184,255,.18) 65%,
      rgba(244,213,141,.22) 100%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

html body .module-galerie.xg-slider-ready .xg-counter-current,
html body .module-galerie.xg-slider-ready .xg-counter-sep,
html body .module-galerie.xg-slider-ready .xg-counter-total{
  position: relative;
  z-index: 1;
}

html body .module-galerie.xg-slider-ready .xg-counter-current{
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(255,255,255,.10);
}

html body .module-galerie.xg-slider-ready .xg-counter-sep{
  margin: 0 9px;
  color: rgba(244,213,141,.92);
}

html body .module-galerie.xg-slider-ready .xg-counter-total{
  color: rgba(244,247,251,.76);
}

/* variante un peu plus noble sous les deux rendus */
html body .module-galerie.type-1.xg-slider-ready .xg-counter,
html body .module-galerie.type-2.xg-slider-ready .xg-counter{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 12px 28px rgba(0,0,0,.24),
    0 0 18px rgba(120,184,255,.06);
}

/* mobile */
@media (max-width: 520px){
  html body .module-galerie.xg-slider-ready .xg-slider-meta{
    padding-top: 12px;
  }

  html body .module-galerie.xg-slider-ready .xg-counter{
    min-width: 96px;
    min-height: 36px;
    padding: 7px 15px;
    font-size: 13px;
  }

  html body .module-galerie.xg-slider-ready .xg-counter-sep{
    margin: 0 7px;
  }
}

/* =========================================================
   PATCH — Anti flash retour arrière / bfcache
   Masque la galerie tant que le slider n'est pas prêt
   ========================================================= */

/* état JS attendu */
html body .module-galerie.xg-js-pending.type-1 .cel1,
html body .module-galerie.xg-js-pending.type-2 .cel1safe{
  visibility: hidden;
}

/* dès que le slider est prêt, on réaffiche */
html body .module-galerie.xg-slider-ready.type-1 .cel1,
html body .module-galerie.xg-slider-ready.type-2 .cel1safe{
  visibility: visible;
}