/* FRONT - Colistiers (Classic + Nid d’abeille + Apple Watch) */
/* IMPORTANT: on cible .oscolistiers (nom réel du wrapper) */

.oscolistiers{
  --oscol-circle: 120px;
  --oscol-gap: 16px;
  --oscol-mobile: 92px;
  --oscol-peek: 0.55;

  --oscol-fade-bg: #ffffff; /* couleur du fond derrière le fade (modifiable en CSS) */

  --oscol-caption: 0px; /* réservé si nom affiché */
  --oscol-offset: 0px; /* décalage réel (desktop) */
  --oscol-moffset: 0px; /* décalage réel (mobile) */

  position: relative;
}

.oscolistiers.has-names{ --oscol-caption: 28px; }

/* Wrapper de scroll : desktop centré + overflow si ça dépasse */
.oscolistiers .oscol-scroll{
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;


/* Wrapper pour gérer le "swipe hint" (fade à droite) */
.oscolistiers .oscol-scrollwrap{
  position: relative;
}

/* Fade à droite pour suggérer le swipe (s'affiche seulement si scroll possible) */
.oscolistiers .oscol-swipefade{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 64px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
  background: linear-gradient(to left,
    var(--oscol-fade-bg),
    transparent
  );
}

/* Dès que l'utilisateur a commencé à swiper/scroller, on cache définitivement */
.oscolistiers.is-swiped .oscol-swipefade{ opacity: 0; }

/* Si pas de scroll horizontal, on n'affiche pas le hint */
.oscolistiers.no-scroll .oscol-swipefade{ opacity: 0; }
}

/* ======== BASE GRID (desktop) : colonnes + N lignes ======== */
.oscolistiers .oscol-grid{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--oscol-circle) !important;
  gap: var(--oscol-gap) !important;
  align-items: start !important;
  justify-content: start !important;

  width: max-content;
  padding: 10px 6px;
  padding-bottom: calc(10px + var(--oscol-offset));
}

/* Nombre de lignes desktop (fiable) */
.oscolistiers[data-desktop-rows="1"] .oscol-grid{ grid-template-rows: repeat(1, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="2"] .oscol-grid{ grid-template-rows: repeat(2, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="3"] .oscol-grid{ grid-template-rows: repeat(3, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="4"] .oscol-grid{ grid-template-rows: repeat(4, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="5"] .oscol-grid{ grid-template-rows: repeat(5, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="6"] .oscol-grid{ grid-template-rows: repeat(6, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="7"] .oscol-grid{ grid-template-rows: repeat(7, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }
.oscolistiers[data-desktop-rows="8"] .oscol-grid{ grid-template-rows: repeat(8, calc(var(--oscol-circle) + var(--oscol-caption))) !important; }

/* Cell = rond + nom */
.oscolistiers .oscol-cell{
  width: var(--oscol-circle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(0);
}

/* ROND */
.oscolistiers .oscol-item{
  width: var(--oscol-circle);
  height: var(--oscol-circle);
  border-radius: 999px;
  border: 0;
  background: #e5e7eb center/cover no-repeat;
  cursor: pointer;
  position: relative;
  outline: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.oscolistiers .oscol-item:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 22px 48px rgba(0,0,0,.22);
  filter: saturate(1.05);
}

/* halo / ring pro */
.oscolistiers .oscol-ring{
  position:absolute;
  inset: -4px;
  border-radius: 999px;
  background: conic-gradient(from 180deg,
    rgba(255,255,255,.0),
    rgba(255,255,255,.32),
    rgba(255,255,255,.0)
  );
  filter: blur(7px);
  opacity: .75;
  pointer-events:none;
}
.oscolistiers .oscol-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
  pointer-events:none;
}

/* NOM */
.oscolistiers .oscol-name{
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: rgba(20, 28, 45, .78);
}

/* ======== DISPOSITIONS (desktop) ======== */

/* Classic: aligné propre */
.oscolistiers[data-layout="classic"]{ --oscol-offset: 0px; }
.oscolistiers[data-layout="classic"] .oscol-cell{ transform: none; }

/* Nid d’abeille */
.oscolistiers[data-layout="honey"]{ --oscol-offset: calc(var(--oscol-circle) * var(--oscol-stagger-mult)); }
.oscolistiers[data-layout="honey"] .oscol-cell.col-even{
  transform: translateY(var(--oscol-offset));
}

/* Apple Watch: plus compact */
.oscolistiers[data-layout="watch"]{ --oscol-offset: calc(var(--oscol-circle) * 0.35); }
.oscolistiers[data-layout="watch"] .oscol-grid{ gap: calc(var(--oscol-gap) * 0.85) !important; }
.oscolistiers[data-layout="watch"] .oscol-cell.col-even{
  transform: translateY(var(--oscol-offset));
}

/* ======== MODAL ======== */
.oscolistiers .oscol-modal{ position: fixed; inset: 0; display: none; z-index: 99999; }
.oscolistiers .oscol-modal.is-open{ display:block; }
.oscolistiers .oscol-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.oscolistiers .oscol-modal__panel{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 28px)); background: rgba(12, 18, 34, .92); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.45); overflow: hidden; }
.oscolistiers .oscol-modal__close{
  position:absolute; top: 10px; right: 10px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,60,60,.16);
  color: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 14px;
  transition: transform .15s ease, background .15s ease;
  z-index: 2;
}
.oscolistiers .oscol-modal__close .oscol-x{ font-size: 18px; line-height: 1; }
.oscolistiers .oscol-modal__close:hover{ transform: scale(1.03); background: rgba(255,60,60,.22); }
.oscolistiers .oscol-modal__content{ position: relative; padding-top: 56.25%; background: rgba(0,0,0,.35); }
.oscolistiers .oscol-modal__content iframe,
.oscolistiers .oscol-modal__content video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ======== MOBILE ======== */
@media (max-width: 720px){
  .oscolistiers .oscol-scroll{ justify-content: flex-start; }

  .oscolistiers .oscol-grid{
    grid-auto-columns: var(--oscol-mobile) !important;
    gap: calc(var(--oscol-gap) * 0.8) !important;
    padding-right: calc(var(--oscol-mobile) * var(--oscol-peek));
    padding-left: 6px;
    padding-bottom: calc(10px + var(--oscol-moffset));
  }

  /* Nombre de lignes mobile */
  .oscolistiers[data-mobile-rows="1"] .oscol-grid{ grid-template-rows: repeat(1, calc(var(--oscol-mobile) + var(--oscol-caption))) !important; }
  .oscolistiers[data-mobile-rows="2"] .oscol-grid{ grid-template-rows: repeat(2, calc(var(--oscol-mobile) + var(--oscol-caption))) !important; }
  .oscolistiers[data-mobile-rows="3"] .oscol-grid{ grid-template-rows: repeat(3, calc(var(--oscol-mobile) + var(--oscol-caption))) !important; }
  .oscolistiers[data-mobile-rows="4"] .oscol-grid{ grid-template-rows: repeat(4, calc(var(--oscol-mobile) + var(--oscol-caption))) !important; }
  .oscolistiers[data-mobile-rows="5"] .oscol-grid{ grid-template-rows: repeat(5, calc(var(--oscol-mobile) + var(--oscol-caption))) !important; }

  .oscolistiers .oscol-cell{ width: var(--oscol-mobile); }
  .oscolistiers .oscol-item{ width: var(--oscol-mobile); height: var(--oscol-mobile); scroll-snap-align: start; }

  /* Appliquer les dispositions sur mobile aussi */
  .oscolistiers[data-layout="classic"]{ --oscol-moffset: 0px; }
  .oscolistiers[data-layout="classic"] .oscol-cell{ transform: none; }

  .oscolistiers[data-layout="honey"]{ --oscol-moffset: calc(var(--oscol-mobile) * var(--oscol-mstagger-mult)); }
  .oscolistiers[data-layout="honey"] .oscol-cell.col-even{ transform: translateY(var(--oscol-moffset)); }

  .oscolistiers[data-layout="watch"]{ --oscol-moffset: calc(var(--oscol-mobile) * 0.35); }
  .oscolistiers[data-layout="watch"] .oscol-cell.col-even{ transform: translateY(var(--oscol-moffset)); }
}

/* scrollbar discret */
.oscolistiers .oscol-scroll::-webkit-scrollbar{ height: 10px; }
.oscolistiers .oscol-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.20); border-radius: 999px; }