/* Plateformes IA : avant / après d'une extension générative, avec un curseur de comparaison. */

/* Hero sombre : le gabarit commun est clair, on repasse les textes en clair. */
.sl-hero--ap {
  background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(244, 81, 30, 0.25), transparent 65%), #120a06;
  color: #fff;
}

.sl-hero--ap .sl-crumbs,
.ps-page main .sl-hero--ap .sl-crumbs a {
  color: var(--ps-faint-dark);
}

.ps-page main .sl-hero--ap .sl-crumbs a:hover,
.sl-hero--ap .sl-crumbs [aria-current="page"] {
  color: #fff;
}

.ps-page .sl-hero--ap .sl-h1 {
  color: #fff;
  font-size: clamp(46px, 6.6vw, 108px);
}

.sl-hero--ap .f-out {
  -webkit-text-stroke-color: var(--ps-orange-light);
}

.sl-hero--ap .sl-lead {
  color: var(--ps-muted-dark);
}

.ps-page main .sl-hero--ap .sl-text-link {
  color: #fff;
}

/* Mise en page propre à cette page : titre et texte côte à côte, scène pleine largeur dessous ;
   dès 1100px, le texte passe à gauche et la scène à droite (voir plus bas). */
.sl-hero--ap .ap-hero-inner {
  display: block;
}

.ap-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.sl-hero--ap .ap-hero-title {
  flex: 1 1 560px;
}

/* Assez large pour garder le bouton et le lien secondaire sur une ligne, en français aussi. */
.ap-hero-side {
  display: flex;
  flex: 0 1 34em;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.ap-scene-col {
  padding-top: 48px;
}

.sl-hero--ap .sl-scene {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------- Scène ---------- */

.ap-scene {
  padding: 16px;
  border: 1px solid rgba(255, 138, 76, 0.25);
  border-radius: 16px;
  background: #1c110b;
  box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.9);
}

.ap-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 14px;
  color: #b59a8c;
  font-size: 13px;
}

.ap-title {
  color: #fff;
  font-weight: 700;
}

.ap-pill {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 138, 76, 0.14);
  color: #ffb48c;
  font-size: 11px;
}

.ap-hint {
  margin-left: auto;
  font-size: 11px;
}

.ap-stage {
  --split: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: 10px;
}

.ap-after,
.ap-before {
  position: absolute;
  inset: 0;
}

.ap-after img,
.ap-orig img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Les bandes ajoutées par l'IA, de chaque côté. */
.ap-gen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  border: 2px dashed rgba(255, 224, 200, 0.9);
  background: rgba(255, 224, 200, 0.08);
  box-sizing: border-box;
}

.ap-gen--left { left: 0; }
.ap-gen--right { right: 0; }

.ap-tag {
  position: absolute;
  top: 6%;
  padding: 3px 8px;
  border-radius: 5px;
  background: #ffe0c8;
  color: var(--ps-ink);
  font-size: 11px;
}

.ap-tag--left { left: 1.5%; }
.ap-tag--right { right: 1.5%; }

/* Avant : l'image importée sur un fond transparent en damier, coupée au niveau du curseur. */
.ap-before {
  background-color: #2a1d17;
  background-image:
    linear-gradient(45deg, #3a2a22 25%, transparent 25%, transparent 75%, #3a2a22 75%),
    linear-gradient(45deg, #3a2a22 25%, transparent 25%, transparent 75%, #3a2a22 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.ap-orig {
  position: absolute;
  top: 0;
  right: 22%;
  bottom: 0;
  left: 22%;
  overflow: hidden;
}

.ap-cap {
  position: absolute;
  bottom: 6%;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
}

.ap-cap--left { left: 1.5%; }
.ap-cap--right { right: 1.5%; }

.ap-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.ap-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--ps-orange);
  color: var(--ps-ink);
  font-weight: 800;
}

.ap-range {
  width: 100%;
  height: 28px;
  margin: 14px 0 6px;
  accent-color: var(--ps-orange);
  cursor: ew-resize;
}

.ap-range:focus-visible {
  outline: 3px solid rgba(255, 138, 76, 0.55);
  outline-offset: 3px;
}

.ap-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 6px 4px 0;
  color: var(--ps-muted-dark);
  font-size: 12px;
}

.ap-white { color: #fff; }
.ap-val { color: #ff9a66; }
.ap-ok { color: #6ee7b7; }

/* ---------- Bureau : texte à gauche, scène à droite ---------- */

@media (min-width: 1100px) {
  .sl-hero--ap .ap-hero-inner {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }

  .ap-hero-top {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 26px;
  }

  .sl-hero--ap .ap-hero-title,
  .ap-hero-side {
    flex: 0 0 auto;
  }

  .ap-scene-col {
    min-width: 0;
    padding-top: 0;
  }

  .sl-hero--ap .sl-scene {
    max-width: 640px;
    margin: 0 0 0 auto;
  }

  .ap-stage {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 900px) {
  .sl-scene .ap-scene {
    zoom: 0.62;
  }
}

@media (max-width: 420px) {
  .sl-scene .ap-scene {
    zoom: 0.54;
  }
}