/* anneau.css : l'anneau 3D des templates, seul et autonome (extrait de composants.css, Xactyzis).
   Douze panneaux posés en rond, un cran toutes les 3,4 s (anneau.js), rotation de 1,1 s sur
   cubic-bezier(.38, 0, 0, 1). Mesures en cqw / px de la racine .sw-ring.

   Habillage (variables posées sur :root, un parent, ou en style sur la racine) :
     --sw-accent   anneau de focus des flèches              (défaut #3f5f86)
     --sw-paper    fond de l'anneau et des flèches          (défaut #14141a)
     --sw-ink      textes et flèches                        (défaut #f4f1ea)
   La police est celle de la page (font-family: inherit). */

.sw-ring,
.sw-ring *,
.sw-ring *::before,
.sw-ring *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sw-ring {
  --sw-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: var(--sw-paper, #14141a);
  color: var(--sw-ink, #f4f1ea);
  font-family: inherit;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.sw-ring svg { display: block; max-width: 100%; }

.sw-ring-stage {
  --sw-w: clamp(260px, 46cqw, 680px);
  position: relative;
  /* en bas, la place de la légende que l'inclinaison de la caméra fait descendre */
  padding-block: clamp(16px, 2cqw, 32px) 48px;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 20%;
}

@container (max-width: 720px) {
  .sw-ring-stage { --sw-w: min(74cqw, 320px); perspective: 1000px; }
  .sw-ring-arrow { width: 44px; height: 44px; }
  .sw-ring-arrow--prev { left: 14px; }
  .sw-ring-arrow--next { right: 14px; }
}

.sw-ring-ring {
  /* rayon qui laisse ~10 % d'air entre deux panneaux, jamais moins que le panneau */
  --sw-r: max(calc(var(--sw-w) * var(--sw-rn) * 1.1 / 6.2832), calc(var(--sw-w) * 0.8));
  position: relative;
  width: var(--sw-w);
  aspect-ratio: 16 / 13;
  /* l'inclinaison de 4° autour du centre, à --sw-r derrière, fait descendre le panneau de face
     de r × sin 4° : on remonte d'autant pour coller l'anneau au haut */
  margin: calc(-0.07 * var(--sw-r)) auto 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--sw-r))) rotateX(-4deg) rotateY(calc(var(--sw-step) * -360deg / var(--sw-rn)));
  transition: transform 1100ms cubic-bezier(0.38, 0, 0, 1);
}

.sw-ring-slot {
  position: absolute;
  inset: 0;
  list-style: none;
  transform: rotateY(calc(var(--sw-i) * 360deg / var(--sw-rn))) translateZ(var(--sw-r));
  backface-visibility: hidden;
  /* les panneaux de côté s'estompent avec leur distance --sw-d à celui de face */
  opacity: calc(1 - min(var(--sw-d), 3) * 0.22);
  transition: opacity 1100ms linear;
}

.sw-ring-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--sw-ink, #f4f1ea);
}

.sw-ring-screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 14px;
  border: 0.5px solid color-mix(in srgb, var(--sw-ink, #f4f1ea) 12%, transparent);
  background: color-mix(in srgb, var(--sw-paper, #14141a) 94%, var(--sw-ink, #f4f1ea));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.sw-ring-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* la page entière, posée sur le premier écran : affichée (donc téléchargée) au survol seulement,
   elle défile une fois chargée */
.sw-ring-screen .sw-ring-page {
  position: absolute;
  inset: 0;
  display: none;
}

.sw-ring-card[data-front]:hover .sw-ring-page {
  display: block;
  animation: sw-ring-scroll var(--sw-scroll, 12s) linear 600ms both !important;
}

@keyframes sw-ring-scroll {
  to { object-position: 50% 100%; }
}

.sw-ring-name { font-size: 17px; font-weight: 500; letter-spacing: -0.018em; }
.sw-ring-meta { font-size: 13px; color: color-mix(in srgb, var(--sw-ink, #f4f1ea) 62%, transparent); }

/* légende lisible seulement de face : de côté, elle se chevaucherait */
.sw-ring-card:not([data-front]) .sw-ring-name,
.sw-ring-card:not([data-front]) .sw-ring-meta { opacity: 0; transition: opacity 300ms linear; }

/* flèches épurées sur les côtés de l'anneau, à hauteur des écrans (fond plein, sans flou) */
.sw-ring-arrow {
  position: absolute;
  top: calc(clamp(16px, 2cqw, 32px) + var(--sw-w) * 0.44);
  left: auto;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  translate: 0 -50%;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sw-paper, #14141a) 78%, transparent);
  color: color-mix(in srgb, var(--sw-ink, #f4f1ea) 72%, transparent);
  cursor: pointer;
  transition: color 200ms linear, transform 320ms var(--sw-spring);
}
.sw-ring-arrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-ring-arrow--prev { left: clamp(12px, 4cqw, 56px); }
.sw-ring-arrow--prev svg { rotate: 180deg; }
.sw-ring-arrow--next { right: clamp(12px, 4cqw, 56px); }
.sw-ring-arrow:hover { color: var(--sw-ink, #f4f1ea); }
.sw-ring-arrow--prev:hover { transform: translateX(-4px); }
.sw-ring-arrow--next:hover { transform: translateX(4px); }
.sw-ring-arrow:focus-visible { outline: 2px solid var(--sw-accent, #3f5f86); outline-offset: 2px; }

/* repli sans script : quelques vignettes en rangée (le script les remplace par l'anneau) */
.sw-ring-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
}
.sw-ring-row .sw-ring-card { flex: 0 0 calc(var(--sw-w) * 0.62); }
.sw-ring-row li { list-style: none; }
.sw-ring-row .sw-ring-name { font-size: 15px; }

/* sous « réduire les animations » : l'anneau ne tourne pas seul (flèches seulement, sans glissement) */
@media (prefers-reduced-motion: reduce) {
  .sw-ring *,
  .sw-ring *::before,
  .sw-ring *::after { transition: none !important; animation: none !important; }
  .sw-ring-card[data-front]:hover .sw-ring-page { display: none; }
}