/* Agences créatives : le fichier de campagne se compose calque par calque (shooting, retouche,
   ciel généré, logo), puis le BAT signé par l'agence tombe. Hero sombre : dès 1100px, titre,
   chapô et actions à gauche, scène à droite ; en dessous, scène pleine largeur sous le texte. */

.sl-hero--ag {
  background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(244, 81, 30, 0.25), transparent 65%), var(--ps-ember);
  color: #fff;
}

.sl-hero--ag .sl-hero-inner {
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.sl-hero--ag .sl-hero-copy {
  flex: 1 1 560px;
}

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

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

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

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

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

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

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

.sl-hero--ag .sl-scene-col {
  flex: 1 1 100%;
  padding-top: 20px;
}

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

/* ---------- Le logiciel de création ---------- */

.ag-app {
  overflow: hidden;
  border: 1px solid var(--ps-line-strong);
  border-radius: var(--ps-radius-md);
  background: var(--ps-ink);
  box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.9);
}

.ag-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ps-line);
  color: var(--ps-subtle-dark);
  font-size: 12px;
}

.ag-file {
  color: #fff;
  font-weight: 700;
}

.ag-count {
  margin-left: auto;
}

.ag-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 420px;
}

.ag-layers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-right: 1px solid rgba(255, 138, 76, 0.15);
  color: var(--ps-nav-text);
  font-size: 13px;
}

.ag-layers-title {
  padding: 0 8px 6px;
  color: var(--ps-orange-light);
  font-size: 11px;
  font-weight: 600;
}

/* Les calques s'allument de bas en haut, au rythme de l'image. */
.ag-l {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  animation: ag-l 10s ease infinite both;
}

.ag-l3 { animation-delay: 0s; }
.ag-l2 { animation-delay: 1.2s; }
.ag-l1 { animation-delay: 2.4s; }
.ag-l0 { animation-delay: 3.6s; }

@keyframes ag-l {
  0% { opacity: 0.3; }
  6%, 90% { opacity: 1; }
  96%, 100% { opacity: 0.3; }
}

/* Le calque généré est teinté, sans barre latérale. */
.ag-l1 {
  background: rgba(255, 138, 61, 0.12);
}

.ag-ico {
  width: 18px;
  color: var(--ps-subtle-dark);
  text-align: center;
}

.ag-ico--ai {
  color: var(--ps-orange-light);
}

.ag-name {
  flex: 1 1 auto;
}

.ag-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffe0c8;
  color: var(--ps-ink);
  font-size: 10px;
}

/* ---------- Le visuel ---------- */

.ag-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #0e0805;
}

.ag-art {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

.ag-a1 {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ag-a1 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ag-a2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 140, 60, 0.28), rgba(120, 30, 90, 0.22));
}

.ag-a3 {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 46%;
  height: 34%;
  border: 2px dashed #ffe0c8;
  border-radius: 6px;
}

.ag-a3 svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ag-a3-tag {
  position: absolute;
  top: -24px;
  left: -2px;
  padding: 3px 8px;
  border-radius: 5px;
  background: #ffe0c8;
  color: var(--ps-ink);
  font-size: 11px;
  white-space: nowrap;
}

.ag-a4 {
  position: absolute;
  right: 0;
  bottom: 8%;
  left: 0;
  color: #fff;
  font-family: var(--ps-font-sans);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: 0.24em;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.ag-a1,
.ag-a2,
.ag-a3,
.ag-a4 {
  animation: ag-in 10s cubic-bezier(0.23, 1, 0.32, 1) infinite both;
}

.ag-a2 { animation-delay: 1.2s; }
.ag-a3 { animation-delay: 2.4s; }
.ag-a4 { animation-delay: 3.6s; }

@keyframes ag-in {
  0% { opacity: 0; transform: scale(1.04); }
  8%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

/* Le tampon du bon à tirer. */
.ag-bat {
  position: absolute;
  top: -22px;
  right: -16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border: 3px solid #ff5a2a;
  border-radius: 8px;
  background: rgba(18, 10, 6, 0.75);
  color: #ff5a2a;
  font-family: var(--ps-font-sans);
  font-weight: 900;
  animation: ag-bat 10s cubic-bezier(0.2, 1.6, 0.4, 1) infinite both;
}

@keyframes ag-bat {
  0%, 52% { opacity: 0; transform: scale(2.2); }
  58%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

.ag-bat-big {
  font-size: 26px;
  letter-spacing: 0.12em;
}

.ag-bat-small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

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

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

  .sl-hero--ag .sl-hero-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .ag-hero-side {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .sl-hero--ag .sl-scene-col {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-top: 0;
  }

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

  .ag-body {
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 360px;
  }

  .ag-layers {
    padding: 12px 8px;
  }

  .ag-l {
    gap: 6px;
    padding: 7px 6px;
  }

  .ag-canvas {
    padding: 28px 22px 22px;
  }

  .ag-a4 {
    font-size: 22px;
    letter-spacing: 0.18em;
  }

  .ag-bat {
    top: -18px;
    right: -10px;
    padding: 8px 12px;
  }

  .ag-bat-big {
    font-size: 21px;
  }
}

/* Entre 1100 et 1279px la colonne est plus étroite : la scène est réduite d'un cran. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .sl-scene .ag-app {
    zoom: 0.86;
  }
}

/* ---------- Mobile et mouvement réduit ---------- */

@media (max-width: 900px) {
  .sl-hero--ag .sl-scene-col {
    padding-top: 0;
  }

  .ag-body {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .sl-scene .ag-app {
    zoom: 0.62;
  }
}

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

@media (max-width: 900px), (hover: none), (prefers-reduced-motion: reduce) {
  .ag-l,
  .ag-a1,
  .ag-a2,
  .ag-a3,
  .ag-a4,
  .ag-bat {
    opacity: 1;
    animation: none;
  }
}

/* Le tampon devient le sceau ProvSeal : logo, nom, puis la mention de validation. */
.ag-bat {
  flex-direction: row;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 2px solid var(--ps-orange-light);
  border-radius: 14px;
  background: rgba(18, 10, 6, 0.88);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 138, 61, 0.14), 0 18px 40px -12px rgba(0, 0, 0, 0.8);
}

.ag-bat-logo {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.ag-bat-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ag-bat-big {
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.ag-bat-small {
  color: var(--ps-peach);
}

@media (min-width: 1100px) {
  .ag-bat {
    padding: 6px 12px 6px 6px;
  }

  .ag-bat-logo {
    width: 34px;
    height: 34px;
  }

  .ag-bat-big {
    font-size: 16px;
  }
}

/* ---------- Comment ça se passe chez vous : même mise en page que « Le logiciel n'est plus
   le problème » de l'accueil (titre et sous-titre, puis les cartes communes .sl-card), version fond clair
   pour garder l'alternance sombre / clair de la page. ---------- */

.ag-why-inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 128px;
  padding-bottom: 128px;
}

.ag-why-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px 56px;
}

.ag-why-copy {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (max-width: 900px) {
  .ag-why-inner {
    padding-top: 88px;
    padding-bottom: 88px;
  }

}