/* Pages d'article : scenes de fond alterne, volet diagonal entre chaque titre,
   titres centres. Charge uniquement sur les articles (gabarit.page).
   Tout mouvement est sous `.js` : sans JavaScript la page est une lecture normale. */

/* ---- En-tete : tout centre ---- */
.page-tete--article {
  display: block; text-align: center; width: min(calc(100% - 3rem), 1100px);
  padding-block: clamp(2.6rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}
.page-tete--article h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(2.5rem, 6vw, 5.2rem); }
.page-tete--article .page-tete__accroche { margin-inline: auto; max-width: 52ch; }
.page-tete--article .page-tete__actions { justify-content: center; }
.article__signature {
  width: min(calc(100% - 3rem), 1100px); margin: 0 auto; padding-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center; color: var(--encre-douce); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}

/* ---- Scenes ---- */
.art-scene {
  --pente: clamp(56px, 14vw, 210px);
  --fond: var(--ivoire); --texte-scene: var(--encre-douce); --titre: var(--encre);
  position: relative; background: var(--fond); color: var(--texte-scene);
  padding: clamp(3.2rem, 8vw, 6.5rem) 1.5rem calc(var(--pente) + clamp(1rem, 3vw, 2.5rem));
  overflow-x: clip;
}
.art-scene--nuit {
  --fond: var(--nuit); --texte-scene: rgba(242, 241, 238, .82); --titre: var(--ivoire);
  --texte: var(--ivoire); --lien: var(--or-clair);
}
.art-scene--ivoire { --lien: var(--encre); }
.art-scene__int { width: min(100%, 1100px); margin-inline: auto; }

/* Volet diagonal : le bord monte vers la droite (~14 degres a 1440 px), la scene
   suivante remonte sous le texte precedent au defilement (--p, pose par article.js). */
.art-scene + .art-scene::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: calc(var(--pente) + 2px);
  background: var(--fond); clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.js .art-scene + .art-scene::before {
  transform: translateY(calc((1 - var(--p, 1)) * 100%));
  will-change: transform;
}

/* ---- Titres centres ---- */
.art-titre {
  max-width: 20ch; margin: 0 auto clamp(2rem, 5vw, 3.6rem); text-align: center;
  font-size: clamp(2rem, 5vw, 4.4rem); font-weight: 300; line-height: 1.04; letter-spacing: -.015em;
  color: var(--titre);
}
.art-scene .article__h3 {
  max-width: 28ch; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; text-align: center;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 400; color: var(--titre);
}
.art-scene--nuit .article__h3 { color: var(--or-clair); }
.art-corps { width: min(100%, 64ch); margin-inline: auto; }
.art-corps p { max-width: none; margin-top: 1.3rem; color: var(--texte-scene); }
.art-corps p:first-child, .art-corps .article__h3 + p { margin-top: 1.2rem; }
.art-corps a:not(.bouton) { color: var(--lien, var(--encre)); border-bottom: 1px solid var(--filet-or); text-decoration: none; }
.art-corps a:not(.bouton):hover, .art-corps a:not(.bouton):focus-visible { color: var(--or); border-bottom-color: var(--or); }
.art-scene--nuit .art-corps a:not(.bouton):hover { color: var(--ivoire); }

/* Titre coupe : la moitie gauche arrive de la gauche, la droite de la droite, puis
   elles se rejoignent en une seule phrase. --t (0 -> 1) est pose par article.js. */
.js .art-titre--coupe .coupe { display: inline-block; will-change: transform, opacity; }
.js .art-titre--coupe .coupe--g {
  transform: translateX(calc((1 - var(--t, 0)) * -62vw));
  opacity: min(1, calc(var(--t, 0) * 1.7));
}
.js .art-titre--coupe .coupe--d {
  transform: translateX(calc((1 - var(--t, 0)) * 62vw));
  opacity: min(1, calc(var(--t, 0) * 1.7));
}

/* Lettres du titre centre : meme effet de survol que le reste du site. */
.art-scene--nuit .lettre.est-creuse { -webkit-text-stroke-color: var(--ivoire); }

/* ---- Suite de l'article (FAQ, liens, appel) ---- */
.art-suite .bloc { width: min(100%, 1100px); }
.art-suite .bloc + .bloc { border-top: 1px solid var(--filet); }

@media (max-width: 640px) {
  .art-scene { padding-inline: 1.15rem; }
  .art-titre { font-size: clamp(1.9rem, 8.4vw, 2.6rem); max-width: 13ch; }
  .js .art-titre--coupe .coupe--g { transform: translateX(calc((1 - var(--t, 0)) * -100vw)); }
  .js .art-titre--coupe .coupe--d { transform: translateX(calc((1 - var(--t, 0)) * 100vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .art-scene + .art-scene::before { transform: none; }
  .js .art-titre--coupe .coupe--g, .js .art-titre--coupe .coupe--d { transform: none; opacity: 1; }
}