/* ==========================================================================
   Pages produits : socle commun (gabarit templates/produit.php).
   Chaque produit a sa propre mise en scène dans pp-{slug}.css / pp-{slug}.js.
   Règles communes :
   - sections bord à bord (.pp-s), contenu centré (.pp-in) ;
   - apparitions [data-pp-vu] et progression de défilement [data-pp-defile] (pp.js) ;
   - mouvement réservé à « pas de réduction des animations » ; sinon état final.
   ========================================================================== */

.sumo-pp .site-content > .ast-container { padding: 0; max-width: none; }
.sumo-pp .pp { width: 100%; }
.sumo-pp .pp-contenu { margin: 0; }
.pp-s { position: relative; padding: clamp(64px, 9vw, 140px) 0; }
.pp-in { width: 100%; max-width: 1348px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.pp-s :is(h1, h2, h3) { text-transform: none; }
.pp-sur {                                   /* surtitre : petit trait + capitales */
	display: flex; align-items: center; gap: 12px;
	font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	margin: 0 0 18px;
}
.pp-sur::before { content: ""; width: 28px; height: 3px; background: currentColor; }
.pp-titre { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 24px; }
.pp-texte { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; max-width: 38em; }
.pp-texte p { margin: 0 0 1em; }
.pp-boutons { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 32px; }

/* Bas de page : les autres produits, sur blanc (le sumo du bandeau sort sur du blanc, comme à l'accueil) */
.sumo-pp .pp-autres {
	background: #fff;
	color: var(--sumo-ink, #111);
	padding: clamp(56px, 7vw, 96px) 0 calc(clamp(28px, 3vw, 44px) + 129px);
	border-top: 1px solid var(--sumo-line, #e3e3e3);
}
.sumo-pp .pp-bandeau { margin-top: 0 !important; }
.pp-autres__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.sumo-refonte .pp-contenu .pp-autres__titre { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; color: var(--sumo-ink, #111); }
.pp-autres__titre::before { content: ""; display: block; width: 40px; height: 6px; background: var(--sumo-red, #ed1c24); margin-bottom: 18px; }
.pp-autres__tous { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sumo-red-text, #d9171f); text-decoration: none; }
.pp-autres__tous:hover { color: var(--sumo-ink, #111); }
.pp-autres__tous svg { transition: translate .25s ease; }
.pp-autres__tous:hover svg { translate: 5px 0; }
.pp-autres__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pp-autre { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 16px; padding-top: 22px; border-top: 1px solid var(--sumo-line, #e3e3e3); }
.pp-autre::before { content: ""; position: absolute; left: 0; top: -2px; width: 32px; height: 4px; background: var(--sumo-red, #ed1c24); transition: width .45s var(--sumo-ease, ease); }
.pp-autre:is(:hover, :focus-within)::before { width: 100%; }
.pp-autre__logo { grid-column: 1 / -1; display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; margin-bottom: 18px; }
.sumo-refonte .pp-contenu .pp-autre__nom { font-family: var(--font-title); font-weight: 700; font-size: 1.375rem; line-height: 1.15; margin: 0 0 6px; color: var(--sumo-ink, #111); }
.pp-autre__nom a { color: inherit; text-decoration: none; }
.pp-autre__nom a::after { content: ""; position: absolute; inset: 0; }        /* toute la tuile est cliquable */
.pp-autre__nom a:focus-visible { outline: none; }
.pp-autre:focus-within { outline: 3px solid var(--sumo-red, #ed1c24); outline-offset: 6px; }
.pp-autre__accroche { grid-column: 1; margin: 0; color: #555; font-size: 1rem; line-height: 1.5; }
.pp-autre__fleche { grid-column: 2; grid-row: 2; align-self: center; color: var(--sumo-red, #ed1c24); transition: translate .25s ease; }
.pp-autre:hover .pp-autre__fleche { translate: 5px 0; }
@media (max-width: 781px) { .pp-autres__liste { grid-template-columns: minmax(0, 1fr); } }

/* Apparitions : seulement si le JS est là et le mouvement autorisé */
@media (prefers-reduced-motion: no-preference) {
	.pp-js [data-pp-vu]:not(.is-vu) { opacity: 0; translate: 0 28px; }
	.pp-js [data-pp-vu] { transition: opacity .8s ease, translate .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--pp-delai, 0s); }
}

/* Lien texte avec flèche, réutilisable */
.pp-lien { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: inherit; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.pp-lien svg { transition: translate .25s ease; }
.pp-lien:hover svg { translate: 5px 0; }
.pp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* « Nos autres produits » garde ses couleurs, quelle que soit l'ambiance de la page (ex. page sombre) */
.sumo-pp .pp-contenu .pp-autres :is(h2, h3, h3 a) { color: var(--sumo-ink, #111) !important; }
.sumo-pp .pp-contenu .pp-autres .pp-autre__accroche { color: #555 !important; }