/* =========================================================================
   carrousel-3d — la feuille du modèle. NEUTRE par construction : elle ne lit
   que les variables --m-* (l'habillage) et --c3d-* (la géométrie). Aucune
   couleur de marque ici.

   Trois états, posés par le script sur .c3d (data-c3d-mode) :
   · aucun  → GRILLE lisible (sans JavaScript). C'est la valeur par défaut,
              donc l'état OUVERT : tout se lit si le script n'est pas passé.
   · anneau → la 3D.
   · bande  → mouvement réduit : bande plate, sans rotation.
   Anti-gabarit : angles droits (--m-rayon), aucun verre, aucun flou d'arrière-
   plan, l'accent (--m-accent) seulement en filet et en point.
   ========================================================================= */

.c3d {
  --c3d-marge: clamp(1rem, 5vw, 5rem);
  --c3d-largeur: clamp(11rem, 21vw, 20rem);
  --c3d-proportion: 1.25; /* hauteur de la boîte / largeur : tient un portrait 4:5 */
  --c3d-ecart: 0.14; /* entre deux pièces, en part de largeur */
  --c3d-perspective: 1500px;
  --c3d-centre-x: 68%; /* l'anneau n'est PAS centré : il tient le bord droit */
  --c3d-centre-y: 52%;
  --c3d-origine-y: 44%;
  --c3d-inclinaison: -2deg;
  --c3d-dos-opacite: 0.5; /* le dos des pièces : juste assez pour lire un anneau */
  --c3d-pas: 45vh; /* défilement par pièce (pilotage au défilement) */
  --c3d-haut: 1.25rem; /* place de la mention en haut : à relever sous un en-tête collant */
  --c3d-duree-point: var(--m-duree, 0.55s);
  --c3d-courbe-point: var(--m-courbe-sortie, cubic-bezier(0.16, 1, 0.3, 1));
  --c3d-duree-ui: var(--m-duree-courte, 0.25s);
  --c3d-courbe-ui: var(--m-courbe, cubic-bezier(0.4, 0, 0.2, 1));

  position: relative;
  background: var(--m-fond);
  color: var(--m-encre);
  font-family: var(--m-police-texte);
}

@supports (height: 1svh) {
  .c3d {
    --c3d-pas: 45svh;
  }
}

.c3d *,
.c3d *::before,
.c3d *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------- la GRILLE */
.c3d-colle {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--c3d-marge);
}

.c3d-titre {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  max-width: 18ch;
  font-family: var(--m-police-titre);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.08;
  color: var(--m-titre, var(--m-encre));
}

.c3d-anneau {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 2.25rem 1.5rem;
  align-items: end;
}

.c3d-panneau {
  margin: 0;
}

.c3d-ouvrir {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio, 1);
  color: inherit;
  text-decoration: none;
  border-radius: var(--m-rayon, 0);
  -webkit-user-drag: none;
}

.c3d-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* la boîte a le ratio natif du fichier : rien n'est recadré */
  background: var(--m-surface);
  border-radius: var(--m-rayon, 0);
}

.c3d-ouvrir:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 4px;
}

.c3d-legende {
  margin: 0.7rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--m-encre-douce);
}

.c3d-etiquette {
  display: block;
  font-family: var(--m-police-texte);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c3d-etiquette-encre, var(--m-encre-douce));
}

/* Ce qui n'a de sens qu'avec le script. */
.c3d-legende-active,
.c3d-consigne,
.c3d-commandes {
  display: none;
}

/* LA MENTION (images générées, droits…). Son contraste se règle ICI, une
   seule fois, dans sa couleur et son fond — jamais par une opacité de
   section, qui se multiplierait avec. Sans script : collante par le bas,
   avec son propre fond, donc présente tant que les pièces sont à l'écran. */
.c3d-mention {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: table;
  margin: 1.75rem 0 0;
  padding: 0.35rem 0.55rem;
  max-width: calc(100vw - 2 * var(--c3d-marge));
  background: var(--c3d-mention-fond, var(--m-fond));
  color: var(--c3d-mention-encre, var(--m-encre));
  font-family: var(--m-police-texte);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.c3d-statut {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Boutons : angles droits, filet, aucun fond d'accent. Cible de 44 px. */
.c3d-commandes button,
.c3d-fermer {
  min-width: 44px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--m-filet);
  border-radius: var(--m-rayon, 0);
  background: transparent;
  color: var(--m-encre);
  font: 500 0.8125rem/1 var(--m-police-texte);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--c3d-duree-ui) var(--c3d-courbe-ui), color var(--c3d-duree-ui) var(--c3d-courbe-ui);
}

.c3d-commandes button:hover,
.c3d-fermer:hover {
  border-color: var(--m-encre-douce);
}

.c3d-commandes button:focus-visible,
.c3d-fermer:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 3px;
}

.c3d-commandes button[aria-disabled="true"] {
  color: var(--m-encre-douce);
  border-color: transparent;
  cursor: default;
}

/* --------------------------------------------------------------- l'ANNEAU */
.c3d[data-c3d-mode="anneau"][data-pilotage="defilement"] {
  /* la hauteur de la section EST la course de l'anneau */
  height: calc(100vh + (var(--c3d-n) - 1) * var(--c3d-pas));
  height: calc(100svh + (var(--c3d-n) - 1) * var(--c3d-pas));
}

.c3d[data-c3d-mode="anneau"] .c3d-colle {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden; /* l'anneau déborde à droite : jamais de défilement horizontal */
}

.c3d[data-c3d-mode="anneau"][data-pilotage="libre"] .c3d-colle {
  position: relative;
  height: clamp(34rem, 88vh, 52rem);
}

.c3d[data-c3d-mode="anneau"] .c3d-texte {
  position: absolute;
  z-index: 2;
  left: var(--c3d-marge);
  top: calc(var(--c3d-haut) + 3.25rem);
  bottom: 4.75rem;
  width: min(25rem, 30%);
  display: flex;
  flex-direction: column;
  pointer-events: none; /* le vide de la colonne laisse passer le glisser */
}

.c3d[data-c3d-mode="anneau"] .c3d-texte > * {
  pointer-events: auto;
}

.c3d[data-c3d-mode="anneau"] .c3d-titre {
  margin: 0;
}

.c3d[data-c3d-mode="anneau"] .c3d-legende-active {
  display: block;
  margin-top: auto;
}

.c3d-compte {
  margin: 0 0 1.1rem;
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--m-encre-douce);
}

.c3d-legende-active .c3d-quoi {
  margin: 0.55rem 0 0;
  max-width: 24ch;
  font-family: var(--m-police-titre);
  font-weight: 500;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.2;
  color: var(--m-titre, var(--m-encre));
}

.c3d[data-c3d-mode="anneau"] .c3d-consigne {
  display: block;
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--m-encre-douce);
}

.c3d[data-c3d-mode="anneau"] .c3d-commandes {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.c3d[data-c3d-mode="anneau"] .c3d-scene {
  position: absolute;
  inset: 0;
  perspective: var(--c3d-perspective);
  perspective-origin: var(--c3d-centre-x) var(--c3d-origine-y);
  touch-action: pan-y; /* le geste vertical reste à la page */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.c3d[data-c3d-glisse] .c3d-scene {
  cursor: grabbing;
}

.c3d[data-c3d-mode="anneau"] .c3d-anneau {
  position: absolute;
  left: var(--c3d-centre-x);
  top: var(--c3d-centre-y);
  display: block;
  width: var(--c3d-largeur);
  height: calc(var(--c3d-largeur) * var(--c3d-proportion));
  margin: calc(var(--c3d-largeur) * var(--c3d-proportion) / -2) 0 0 calc(var(--c3d-largeur) / -2);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--c3d-rayon, 0px) * -1)) rotateX(var(--c3d-inclinaison))
    rotateY(calc(var(--c3d-rotation, 0) * -1deg));
}

.c3d[data-c3d-mode="anneau"] .c3d-panneau {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 360deg / var(--c3d-n))) translateZ(var(--c3d-rayon, 0px));
}

.c3d[data-c3d-mode="anneau"] .c3d-ouvrir {
  width: min(100%, calc(var(--c3d-largeur) * var(--c3d-proportion) * var(--ratio, 1)));
  transform-style: preserve-3d;
}

/* La face : lumière selon l'angle (posée par le script, sur une feuille de
   l'arbre — une opacité sur un parent 3D l'aplatirait). */
.c3d[data-c3d-mode="anneau"] .c3d-media {
  opacity: var(--c3d-lumiere, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Le dos : une surface pleine, pour que l'anneau se lise comme un anneau. */
.c3d[data-c3d-mode="anneau"] .c3d-ouvrir::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--m-surface);
  opacity: var(--c3d-dos-opacite);
  border-radius: var(--m-rayon, 0);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* LA MISE AU POINT : quand l'anneau se pose, un filet et un point d'accent
   désignent la pièce de face (0,55 s, courbe d'entrée). L'accent ne remplit
   jamais : c'est un trait d'un pixel. */
.c3d[data-c3d-mode="anneau"] .c3d-ouvrir::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  height: 5px;
  background:
    radial-gradient(circle at 2.5px 50%, var(--m-accent) 0 2px, transparent 2.6px),
    linear-gradient(var(--m-accent), var(--m-accent)) 0 50% / 100% 1px no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--c3d-duree-point) var(--c3d-courbe-point);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.c3d[data-c3d-mode="anneau"] .c3d-panneau[data-c3d-au-point] .c3d-ouvrir::after {
  transform: scaleX(1);
}

.c3d[data-c3d-mode="anneau"] .c3d-legende {
  display: none; /* la légende de face est reprise dans la colonne */
}

/* La mention suit la scène : en haut à l'entrée, en bas à la sortie. */
.c3d[data-c3d-mode="anneau"] .c3d-colle > .c3d-mention {
  position: absolute;
  left: var(--c3d-marge);
  top: var(--c3d-haut);
  bottom: auto;
  margin: 0;
}

.c3d[data-c3d-mode="anneau"][data-c3d-mention="bas"] .c3d-colle > .c3d-mention {
  top: auto;
  bottom: 1.25rem;
}

/* Option « panneaux courbes » : la toile dessine, le DOM reste pour la main. */
.c3d-toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.c3d[data-c3d-courbe="actif"] .c3d-media,
.c3d[data-c3d-courbe="actif"] .c3d-ouvrir::before {
  opacity: 0;
}

/* ---------------------------------------------------------------- la BANDE */
.c3d[data-c3d-mode="bande"] .c3d-colle {
  padding-inline: 0;
}

.c3d[data-c3d-mode="bande"] .c3d-texte,
.c3d[data-c3d-mode="bande"] .c3d-colle > .c3d-mention {
  margin-inline: var(--c3d-marge);
}

.c3d[data-c3d-mode="bande"] .c3d-consigne {
  display: none;
}

.c3d[data-c3d-mode="bande"] .c3d-commandes {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem; /* déjà dans la colonne de texte, qui porte la marge */
}

.c3d[data-c3d-mode="bande"] .c3d-anneau {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--c3d-marge);
  padding: 0 var(--c3d-marge) 1rem; /* le bord gauche tient la marge, la bande déborde à droite */
  scrollbar-width: thin;
  scrollbar-color: var(--m-encre-douce) transparent;
}

.c3d[data-c3d-mode="bande"] .c3d-panneau {
  flex: 0 0 var(--c3d-largeur);
  scroll-snap-align: start;
}

/* ------------------------------------------------------------------ la VUE */
.c3d-vue {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--m-filet);
  border-radius: var(--m-rayon, 0);
  background: var(--m-surface);
  color: var(--m-encre);
  font-family: var(--m-police-texte);
}

.c3d-vue[open] {
  animation: c3d-vue-entree var(--c3d-duree-ui) var(--c3d-courbe-ui);
}

.c3d-vue::backdrop {
  background: rgba(10, 11, 13, 0.86);
  background: color-mix(in srgb, var(--m-fond, #0a0b0d) 88%, transparent);
}

@keyframes c3d-vue-entree {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.c3d-vue-cadre {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr);
}

.c3d-vue-media {
  position: relative;
  background: var(--m-fond);
}

.c3d-vue-cadre-media {
  display: grid;
  place-items: center;
  height: 100%;
}

.c3d-vue-el {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 2rem);
  object-fit: contain;
}

.c3d-vue-texte {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.c3d-fermer {
  align-self: flex-end;
}

.c3d-vue-titre {
  margin: 0;
  font-family: var(--m-police-titre);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--m-titre, var(--m-encre));
}

.c3d-vue-texte-libre {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--m-encre-douce);
}

.c3d-vue-emplacement {
  padding: 0.9rem 1rem;
  border: 1px dashed var(--m-filet);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--m-encre-douce);
}

/* Sur le média, en haut à gauche : jamais sous les commandes d'un film. */
.c3d-vue .c3d-vue-mention {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  bottom: auto;
  margin: 0;
  max-width: calc(100% - 1.5rem);
}

/* --------------------------------------------------------------- téléphone */
@media (max-width: 700px) {
  .c3d {
    --c3d-marge: 16px;
    --c3d-largeur: min(66vw, 17rem);
    --c3d-perspective: 1100px;
    --c3d-centre-x: 57%;
    --c3d-centre-y: 55%;
    --c3d-origine-y: 48%;
    --c3d-haut: 0.75rem;
  }

  .c3d[data-c3d-mode="anneau"] .c3d-texte {
    top: calc(var(--c3d-haut) + 3rem);
    bottom: 1rem;
    right: var(--c3d-marge);
    width: auto;
  }

  .c3d[data-c3d-mode="anneau"] .c3d-titre {
    font-size: 1.6rem;
  }

  /* la légende sous le titre, les commandes sous le pouce */
  .c3d[data-c3d-mode="anneau"] .c3d-legende-active {
    margin-top: 0.9rem;
  }

  .c3d-compte {
    display: inline;
    margin: 0 0.6rem 0 0;
  }

  .c3d[data-c3d-mode="anneau"] .c3d-legende-active .c3d-etiquette {
    display: inline;
  }

  .c3d-legende-active .c3d-quoi {
    max-width: none;
    font-size: 1.3rem;
  }

  .c3d[data-c3d-mode="anneau"] .c3d-consigne {
    display: none;
  }

  .c3d[data-c3d-mode="anneau"] .c3d-commandes {
    margin-top: auto;
  }

  .c3d[data-c3d-mode="anneau"][data-c3d-mention="bas"] .c3d-colle > .c3d-mention {
    bottom: calc(1rem + 44px + 0.6rem);
  }

  .c3d-vue-cadre {
    grid-template-columns: 1fr;
  }

  .c3d-vue-el {
    max-height: 60vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c3d-ouvrir::after,
  .c3d-commandes button,
  .c3d-fermer {
    transition: none;
  }

  .c3d-vue[open] {
    animation: none;
  }
}