/*
 * SWA – habillage du composant stride-portfolio-cylinder aux couleurs du site.
 * Typographie : variables globales Elementor du kit (post-6) :
 *   dfa0517 = titres PPM capitales · 803318b = libellés DM Mono capitales espacées
 *   2b0014e = texte PPM léger. Couleurs : noir, blanc, lavande #B3A0CD.
 */
.swa-creations-cylinder[data-stride-portfolio] {
  --sp-bg: #000;
  --sp-fg: #fff;
  --sp-radius: 0;
  --sp-card-width: 82vw;
  --sp-card-max: 44rem;
  --swa-accent: #B3A0CD;
  font-family: var(--e-global-typography-2b0014e-font-family, "PPM"), sans-serif;
}

/* Fond flouté : voile noir pur, comme le reste du site */
.swa-creations-cylinder .sp-backdrop::after {
  background: rgba(0, 0, 0, .6);
}

/* Titre de section : style « grand titre » du site */
/* sous l'en-tete fixe du site (logo SWA + pilule de menu) */
.swa-creations-cylinder .sp-title {
  top: clamp(7rem, 15vh, 9.5rem);
  font-family: var(--e-global-typography-dfa0517-font-family, "PPM"), sans-serif;
  font-weight: var(--e-global-typography-dfa0517-font-weight, 400);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  font-size: clamp(2.5rem, 5vw, 5rem);
}

/* Ligne d'information centrale */
.swa-creations-cylinder .sp-meta {
  left: clamp(1rem, 4vw, 3rem);
  right: clamp(1rem, 4vw, 3rem);
}
.swa-creations-cylinder .sp-count {
  font-family: var(--e-global-typography-803318b-font-family, "DM Mono"), monospace;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .8rem;
  color: rgba(255, 255, 255, .7);
}
.swa-creations-cylinder .sp-name {
  font-family: var(--e-global-typography-2b0014e-font-family, "PPM"), sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* Bouton : libellé DM Mono, angles droits, survol lavande */
.swa-creations-cylinder .sp-btn {
  font-family: var(--e-global-typography-803318b-font-family, "DM Mono"), monospace;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .75rem;
  border-radius: 0;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
  padding: 12px 22px;
  transition: background-color .25s cubic-bezier(.25, 1, .5, 1), border-color .25s cubic-bezier(.25, 1, .5, 1);
}
.swa-creations-cylinder .sp-btn:hover {
  background-color: var(--swa-accent);
  border-color: var(--swa-accent);
  color: #fff;
}
.swa-creations-cylinder .sp-btn:focus-visible {
  outline: 2px solid var(--swa-accent);
  outline-offset: 3px;
}

/* Petits écrans : le nom passe au-dessus, le compteur et le bouton en dessous */
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-meta {
    top: auto;
    bottom: 6.5rem; /* au-dessus de la barre du lecteur audio Sonaar */
    transform: none;
    grid-template-columns: auto 1fr;
    row-gap: .75rem;
  }
  .swa-creations-cylinder .sp-name {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: normal;
  }
  .swa-creations-cylinder .sp-btn {
    justify-self: end;
  }
}

/* Avant l'initialisation du JS (ou sans JS) : liste simple et lisible */
.swa-creations-cylinder:not(.sp-ready) {
  padding: 4rem clamp(1rem, 4vw, 3rem);
}
.swa-creations-cylinder:not(.sp-ready) > [data-portfolio-card] img {
  display: none;
}
.swa-creations-cylinder:not(.sp-ready) > [data-portfolio-card] a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

/*
 * Intégration dans le bloc « Sur scène » (fusion du 14/10).
 * Ce bloc Elementor est en overflow:hidden, ce qui casserait position:sticky.
 * overflow-x:clip coupe toujours les débordements latéraux, mais sans créer de
 * conteneur de défilement : l'épinglage fonctionne. Sans :has(), pas d'épinglage,
 * la section reste lisible.
 */
.e-con:has(.swa-creations-cylinder) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Pleine largeur malgré les marges latérales (10 %) du bloc parent */
.swa-creations-cylinder[data-stride-portfolio] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/*
 * Une seule section visuelle (retours du 14/10) : le cylindre est transparent,
 * le fond du bloc « Sur scène » (noir + lignes verticales) passe sous le titrage,
 * les cartes et le bouton. Le fond flouté d'images est remplacé par un halo parme
 * (accent du site #B3A0CD) derrière la carte active.
 */
.swa-creations-cylinder[data-stride-portfolio] {
  background: transparent;
}
.swa-creations-cylinder .sp-backdrop img {
  display: none; /* plus de fond d'image : ni affiché ni téléchargé (lazy) */
}
.swa-creations-cylinder .sp-backdrop::after {
  background: radial-gradient(ellipse 42% 38% at 50% 50%,
    rgba(179, 160, 205, .32) 0%,
    rgba(179, 160, 205, .12) 40%,
    rgba(179, 160, 205, 0) 72%);
}
.swa-creations-cylinder .sp-card {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(179, 160, 205, .45);
}

/*
 * Fondu naturel en haut et en bas de la section « Sur scène » : le calque de
 * lignes du conteneur Elementor (::before, background overlay) s'efface vers le
 * noir sur ~22vh à chaque extrémité. Masque plutôt que voile noir par-dessus :
 * le titrage et le bouton ne sont jamais assombris.
 */
.e-con:has(> .elementor-widget-shortcode .swa-creations-cylinder)::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 calc(100% - 22vh), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22vh, #000 calc(100% - 22vh), transparent 100%);
}

/* ---------------------------------------------------------------------------
 * Retours du 14/10 (2) : centrage, bouton au style du site, resserrage.
 * ------------------------------------------------------------------------- */

/* Nom de la création au centre exact de l'écran : colonnes latérales égales */
.swa-creations-cylinder .sp-meta {
  grid-template-columns: 1fr auto 1fr;
}
.swa-creations-cylinder .sp-count { justify-self: start; }
.swa-creations-cylinder .sp-name  { justify-self: center; max-width: 56vw; }
.swa-creations-cylinder .sp-btn   { justify-self: end; }

/* Bouton « Découvrir » = bouton du site : PPM 300 capitales, filet parme 0,5px, flèche SWA */
.swa-creations-cylinder .sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--e-global-typography-a9730c7-font-family, "PPM"), sans-serif;
  font-size: var(--e-global-typography-a9730c7-font-size, .8vw);
  font-weight: var(--e-global-typography-a9730c7-font-weight, 300);
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: .5px solid var(--swa-accent);
  border-radius: 0;
  padding: 0 0 .3em;
  transition: border-color .25s cubic-bezier(.25, 1, .5, 1);
}
.swa-creations-cylinder .sp-btn::after {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 41' fill='none'%3E%3Cpath d='M1 0.49H41.5V40.28' stroke='white'/%3E%3Cpath d='M41.5 0.49L1 40.28' stroke='white'/%3E%3C/svg%3E") center / contain no-repeat;
}
.swa-creations-cylinder .sp-btn:hover {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

/* La scène transparente chevauche le titrage et le bouton : seuls cartes et bouton captent les clics */
.swa-creations-cylinder .sp-stage { pointer-events: none; }
.swa-creations-cylinder .sp-card,
.swa-creations-cylinder .sp-btn { pointer-events: auto; }

/*
 * Resserrage : la carte est centrée dans une scène de 100vh, précédée de l'écart
 * de 10vh du bloc. On remonte le cylindre (et on rapproche ce qui suit) pour
 * garder ~8vh entre le texte et la carte. Hauteur de carte = min(44rem, 82vw) × 10/16.
 */
.swa-creations-cylinder[data-stride-portfolio] {
  --swa-pull: calc(-52vh + min(44rem, 82vw) * .3125);
  margin-top: var(--swa-pull);
  margin-bottom: var(--swa-pull);
}
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-meta { grid-template-columns: 1fr 1fr; }
  .swa-creations-cylinder .sp-name { max-width: none; justify-self: stretch; text-align: center; }
  /* sur mobile la ligne d'info est sous la carte : le bouton suivant vient juste après elle */
  .swa-creations-cylinder[data-stride-portfolio] { margin-bottom: -20vh; }
}

/*
 * Mobile (retour du 14/10) : compteur et bouton en haut de la scène, sous l'en-tête
 * fixe du site ; le nom reste centré sur la carte, comme sur ordinateur.
 * .sp-meta est absolu dans la scène : le nom est positionné par rapport à lui.
 */
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-meta {
    --swa-meta-top: 5.75rem; /* sous le logo SWA et la pilule de menu */
    top: var(--swa-meta-top);
    bottom: auto;
    transform: none;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .swa-creations-cylinder .sp-count { grid-column: 1; grid-row: 1; }
  .swa-creations-cylinder .sp-btn   { grid-column: 2; grid-row: 1; justify-self: end; }
  .swa-creations-cylinder .sp-name {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50svh - var(--swa-meta-top));
    translate: 0 -50%;
    max-width: none;
    text-align: center;
    white-space: normal;
  }
}

/* Titres de création plus présents (retour du 14/10) ; les titres longs passent à la ligne au lieu d'être coupés */
.swa-creations-cylinder .sp-name {
  font-size: clamp(1.5rem, 2.9vw, 2.75rem);
  line-height: 1.05;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-wrap: balance;
}
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-name { font-size: clamp(1.45rem, 6.4vw, 1.9rem); padding: 0 1rem; }
}

/*
 * Mobile, structure finale (retour du 14/10) : pile centrée sur la carte —
 * compteur en surtitre, titre de la création, puis bouton « Découvrir ».
 * Annule le placement « en haut » de la v1.3.1.
 */
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-meta {
    top: 50%;
    bottom: auto;
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%);
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: .85rem;
    text-align: center;
  }
  .swa-creations-cylinder .sp-count { grid-column: 1; grid-row: 1; justify-self: center; }
  .swa-creations-cylinder .sp-name {
    position: static;
    translate: none;
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    padding: 0;
  }
  .swa-creations-cylinder .sp-btn { grid-column: 1; grid-row: 3; justify-self: center; }
}

/* Mobile : les infos sont sur la carte, le bouton « toutes les créations » se rapproche comme sur ordinateur */
@media (max-width: 1023px) {
  .swa-creations-cylinder[data-stride-portfolio] { margin-bottom: var(--swa-pull); }
}

/*
 * Inclinaison au survol (souris uniquement) : la carte ne fait plus que porter la
 * position dans le cylindre ; son calque intérieur .swa-tilt reprend l'arrondi,
 * le fond, l'ombre et le recadrage, pour pivoter sans être coupé par la carte.
 */
.swa-creations-cylinder.swa-has-tilt .sp-card {
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.swa-creations-cylinder .swa-tilt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--sp-radius);
  background: var(--sp-bg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 80px -30px rgba(179, 160, 205, .45);
  will-change: transform;
}

/*
 * Passe responsive (14/10) :
 * - jusqu'à 1023px (téléphones ET tablettes), la pile centrée sur la carte du mobile :
 *   en ligne, compteur et « Découvrir » mordaient sur les bords de la carte ;
 * - à partir de 1024px, une seule largeur de carte (--swa-card-w) qui grandit sur les
 *   grands écrans (44rem → 60rem), garde 12rem de chaque côté pour le compteur et le
 *   bouton, et ne dépasse pas ~62vh de haut. Le compteur et le bouton se rapprochent
 *   de la carte au lieu de rester collés aux bords de l'écran.
 */
.swa-creations-cylinder[data-stride-portfolio] {
  --swa-card-w: min(82vw, 44rem);
  --sp-card-width: var(--swa-card-w);
  --sp-card-max: none;
  --swa-pull: calc(-52vh + var(--swa-card-w) * .3125);
}
@media (min-width: 1024px) {
  .swa-creations-cylinder[data-stride-portfolio] {
    --swa-card-w: min(clamp(44rem, 46vw, 60rem), 100vw - 24rem, 99vh);
  }
  .swa-creations-cylinder .sp-meta {
    left: max(1rem, calc(50% - var(--swa-card-w) / 2 - 12rem));
    right: max(1rem, calc(50% - var(--swa-card-w) / 2 - 12rem));
  }
}

/* Mobile et tablette (retour du 14/10) : pas de bouton « Découvrir » sur la carte, la carte elle-même s'ouvre au toucher */
@media (max-width: 1023px) {
  .swa-creations-cylinder .sp-btn { display: none; }
}