/* ===================================================================
   Azzkara — Slideshow Pro
   Slider « hero » full-width sous le header. Assets propres au module
   (ne touche pas theme.css). Esprit du design system : noir #0c0c0e,
   rouge #b3171d, polices Cinzel (titres) / Jost (UI).

   IMPORTANT : ce fichier est chargé AUSSI dans l'éditeur BO (aperçu live),
   pour que le rendu des calques (.azzss-layer*, .azzss-btn*) y soit
   IDENTIQUE au front. Les sélecteurs de calque sont donc autonomes
   (pas de dépendance à theme.css ; fonts en font-family avec fallback).

   PASSE 1 : slides image. Le markup vidéo réutilisera ces mêmes classes.
=================================================================== */

/* Polices embarquées (Cinzel = titres, Jost = UI) — mêmes fichiers que le thème, recopiés dans le
   module pour qu'il soit AUTONOME : l'éditeur BO ne charge pas theme.css, donc sans ça l'aperçu
   retombait sur un serif générique. url() est relative à CE fichier → fonctionne au front ET au BO. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cinzel-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cinzel-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2');}

.azzss {
  --azzss-red: #b3171d;
  --azzss-ink: #0c0c0e;

  position: relative;
  width: 100%;
  aspect-ratio: 2.8 / 1;  /* desktop : hero un peu plus haut que large, RATIO calibré sur l'aperçu BO */
  max-height: 88vh;       /* garde-fou : ne dépasse jamais 88% de la hauteur d'écran */
  overflow: hidden;
  background: var(--azzss-ink);
  isolation: isolate;
}

.azzss__track {
  position: absolute;
  inset: 0;
}

/* --- Slides : empilés, fond-enchaînés --- */
.azzss__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  will-change: opacity;
}
.azzss__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Transition « slide » (glissement horizontal). */
.azzss[data-transition="slide"] .azzss__slide {
  transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .8s ease;
  transform: translateX(100%);
  opacity: 1;
  visibility: visible;
}
.azzss[data-transition="slide"] .azzss__slide.is-active {
  transform: translateX(0);
}
.azzss[data-transition="slide"] .azzss__slide.is-prev {
  transform: translateX(-100%);
}

.azzss__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Léger dégradé sombre pour la lisibilité des calques --- */
.azzss__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .42) 100%);
}

/* --- Conteneur des calques (repère en %) --- */
.azzss__layers {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Conteneur de requête : les calques dimensionnent texte/image en cqw (1cqw = 1% de la largeur
     du slide). Ainsi le rendu est PROPORTIONNEL à la largeur — identique au front (large) et dans
     l'aperçu BO (canvas plus étroit). */
  container-type: inline-size;
}

/* ===================================================================
   CALQUES — partagés front + aperçu BO.
   Ancrage au CENTRE : positionnés via left/top en % + translate(-50%,-50%).
=================================================================== */
.azzss-layer {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 92%;
}

/* Texte */
.azzss-layer--text {
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  width: max-content;   /* largeur = contenu, indépendante de la position → pas de wrap au bord droit (max-width: 92% hérité plafonne les textes très longs) */
}
.azzss-font--display { font-family: 'Cinzel', var(--font-display, 'Cinzel'), serif; letter-spacing: .012em; }
.azzss-font--ui { font-family: 'Jost', var(--font-ui, 'Jost'), system-ui, sans-serif; }

/* Image (ex. logo) */
.azzss-layer--image { line-height: 0; }
.azzss-layer--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Bouton — 3 styles */
.azzss-layer--button { line-height: 0; }
.azzss-btn {
  display: inline-block;
  font-family: 'Jost', var(--font-ui, 'Jost'), system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 14px 26px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.azzss-btn--primary { background: var(--azzss-red); color: #fff; border-color: var(--azzss-red); }
.azzss-btn--primary:hover { background: #fff; color: #000; border-color: #fff; }
.azzss-btn--line { background: transparent; color: #fff; border-color: #fff; }
.azzss-btn--line:hover { background: #fff; color: #000; }
.azzss-btn--ghost { background: rgba(12, 12, 14, .42); color: #fff; border-color: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.azzss-btn--ghost:hover { background: var(--azzss-red); border-color: var(--azzss-red); }

/* --- Flèches de navigation --- */
.azzss__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 14, .35);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.azzss__nav:hover { background: var(--azzss-red); border-color: var(--azzss-red); }
.azzss__nav--prev { left: clamp(12px, 2vw, 28px); }
.azzss__nav--next { right: clamp(12px, 2vw, 28px); }
/* Masquage des flèches par device (réglage BO) : injecté en <style> inline dans slideshow.tpl
   (toujours à jour, insensible au cache de ce fichier CSS). */

/* --- Points (dots) --- */
.azzss__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.azzss__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .2s, width .2s, border-radius .2s;
}
.azzss__dot:hover { background: rgba(255, 255, 255, .8); }
.azzss__dot.is-active {
  width: 26px;
  border-radius: var(--rounded, 5px);
  background: var(--azzss-red);
}

/* Arrondi global : boutons CTA des slides (la flèche .azzss__nav et les dots
   ronds gardent leur 50% ; le hero/slides full-bleed restent à bord franc). */
.azzss-btn { border-radius: var(--rounded, 6px); }

/* --- Responsive front : ratios calibrés sur les devices de l'éditeur BO --- */
@media (max-width: 991px) {   /* tablette */
  .azzss { aspect-ratio: 3 / 2; }
  .azzss__nav { width: 38px; height: 38px; }
}
@media (max-width: 575px) {   /* mobile : hero portrait */
  .azzss { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .azzss__slide { transition: opacity .2s linear; }
  .azzss[data-transition="slide"] .azzss__slide { transition: opacity .2s linear; }
}