/* ==========================================================================
   Page produit VizProof : « l'œil qui ne cligne pas ».
   Couleurs du produit : vert #163f35, corail #e97157, vert pâle.
   1. Hero : la page est photographiée avant / après, la différence s'entoure.
   2. Problème (section collante) : la page se casse au fil du défilement,
      pendant que les tests du code restent au vert.
   3. Réponse. 4. Le fil : chaque étape s'allume quand le trait l'atteint.
   5. L'objectif : le message d'alerte avec la zone entourée.
   Sans JS / mouvement réduit / mobile : états finaux, tout lisible.
   ========================================================================== */

.sumo-pp--vizproof { --vz-vert: #163f35; --vz-corail: #e97157; --vz-corail-texte: #b8452e; --vz-pale: #eef5f0; --vz-encre: #13261f; --vz-ligne: #d6e2da; }
.pp--vizproof { color: var(--vz-encre); }
.pp--vizproof .pp-sur { color: var(--vz-vert); }

/* --- Le site témoin (dessiné en HTML, mesures en cqw) --------------------- */
.vz-site { container-type: inline-size; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(19, 38, 31, .45), 0 0 0 1px rgba(19, 38, 31, .06); }
.vz-site * { box-sizing: border-box; }
.vz-site__barre { display: flex; align-items: center; gap: 3cqw; height: 8cqw; padding: 0 5cqw; border-bottom: 1px solid var(--vz-ligne); }
.vz-site__barre i { width: 4cqw; height: 4cqw; border-radius: 1cqw; background: var(--vz-vert); margin-right: auto; }
.vz-site__barre span { width: 8cqw; height: 1.2cqw; border-radius: 1cqw; background: #d4ddd7; }
.vz-site__une { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; padding: 5cqw 5cqw 3cqw; align-items: center; }
.vz-site__img { display: block; aspect-ratio: 4 / 3; border-radius: 1.6cqw; background: linear-gradient(135deg, #d5e7db, #8fb9a2); transition: translate .6s cubic-bezier(.3, .7, .2, 1); }
.vz-site__titre { display: block; height: 3.6cqw; width: 90%; border-radius: 1cqw; background: var(--vz-vert); margin-bottom: 2.4cqw; }
.vz-site__ligne { display: block; height: 1.6cqw; width: 70%; border-radius: 1cqw; background: #d6e0da; box-shadow: 0 3cqw 0 #e4ebe6; }
.vz-site__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; padding: 0 5cqw; transition: grid-template-columns .6s ease; }
.vz-site__grille span { aspect-ratio: 5 / 4; border-radius: 1.4cqw; background: #eef3ef; }
.vz-site__form { display: flex; flex-direction: column; gap: 2cqw; margin: 4cqw 5cqw 5cqw; }
.vz-site__form b { font-size: 3.2cqw; color: var(--vz-vert); }
.vz-champ em { display: block; font-style: normal; font-size: 1.8cqw; color: #56665f; margin-bottom: .8cqw; }
.vz-champ i { display: block; height: 4.4cqw; border: 1px solid var(--vz-ligne); border-radius: .9cqw; background: #f8faf8; }
.vz-champ { transition: opacity .4s ease, height .5s ease; }
.vz-site__btn { display: block; text-align: center; font-size: 2.4cqw; font-weight: 700; color: #fff; background: var(--vz-vert); border-radius: 1.2cqw; padding: 2cqw; transition: translate .6s cubic-bezier(.3, .7, .2, 1), width .6s ease; }
/* les accidents */
.vz-site.is-apres .vz-site__btn { translate: 0 5cqw; }
.vz-site.is-image .vz-site__img { translate: 9cqw 4cqw; }
.vz-site.is-grille .vz-site__grille { grid-template-columns: 1fr 1fr 1.6fr; }
.vz-site.is-grille .vz-site__grille span:nth-child(3) { translate: 0 6cqw; rotate: 3deg; }
.vz-site.is-champ .vz-champ--2 { opacity: 0; }
.vz-site__grille span { transition: translate .6s ease, rotate .6s ease; }

/* --- 1. Hero ----------------------------------------------------------------- */
.vz-hero { background: var(--vz-pale); padding-top: clamp(48px, 6vw, 96px); overflow: hidden; }
.vz-hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; position: relative; }
.vz-logo { display: block; height: 30px; width: auto; margin-bottom: 28px; }
.pp-contenu .vz-hero .pp-titre { font-size: clamp(2.8rem, 6vw, 5.2rem); color: var(--vz-vert); margin-bottom: 12px; }
.vz-accroche { font-family: var(--font-title); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.2; margin: 0 0 22px; }
.vz-bouton { display: inline-flex; align-items: center; gap: 12px; background: var(--vz-vert); color: #fff; font-weight: 700; padding: 15px 24px; border-radius: 10px; text-decoration: none; }
.vz-bouton:hover { background: var(--vz-encre); color: #fff; }
.vz-bouton:focus-visible, .vz-rejouer:focus-visible { outline: 3px solid var(--vz-corail); outline-offset: 3px; }
.pp--vizproof .pp-lien { color: var(--vz-vert); }

.vz-scene { position: relative; padding: 26px 26px 0; max-width: min(100%, 60vh + 120px); justify-self: center; width: 100%; }
.vz-hero .vz-site__grille { display: none; }            /* page témoin plus courte : la différence reste visible */
.vz-hero .vz-site__une { padding-bottom: 1cqw; }
.vz-scene__cadre { position: relative; container-type: inline-size; }
.vz-viseur { position: absolute; inset: -16px; pointer-events: none; }
.vz-viseur i { position: absolute; width: 34px; height: 34px; border: 3px solid var(--vz-vert); transition: scale .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; }
.vz-viseur i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.vz-viseur i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vz-viseur i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.vz-viseur i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vz-flash { position: absolute; inset: 0; background: #fff; opacity: 0; border-radius: 12px; pointer-events: none; }
.vz-ecart { position: absolute; left: 3.5cqw; width: 93cqw; top: 79cqw; height: 11.5cqw;   /* recalé sur le bouton par pp-vizproof.js */
	 border: 3px dashed var(--vz-corail); border-radius: 12px; transition: opacity .4s ease, scale .5s cubic-bezier(.2, .8, .2, 1); }
.vz-ecart b { position: absolute; left: -3px; top: -30px; background: var(--vz-corail-texte); color: #fff; font-size: .75rem; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.vz-etiquette { margin: 22px 0 0; font: 600 .8125rem/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; color: #4c6159; }
.vz-etiquette__avant { display: none; }
.vz-alerte { position: absolute; right: -6px; top: 0; display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 18px 40px -18px rgba(19, 38, 31, .45); transition: opacity .4s ease, translate .5s cubic-bezier(.2, .8, .2, 1); }
.vz-alerte em { width: 12px; height: 12px; border-radius: 50%; background: var(--vz-corail); box-shadow: 0 0 0 6px rgba(233, 113, 87, .2); }
.vz-alerte b { display: block; font-size: .9375rem; }
.vz-alerte small { display: block; font-size: .8125rem; color: #5d6f67; }
.vz-rejouer { position: absolute; right: clamp(20px, 4vw, 40px); bottom: -46px; background: none; border: 0; padding: 6px 0; font: 700 .875rem/1 inherit; color: var(--vz-vert); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* la démonstration (dossier .is-anim posé par pp-vizproof.js) */
.vz-hero.is-anim .vz-ecart { opacity: 0; scale: 1.12; }
.vz-hero.is-anim .vz-alerte { opacity: 0; translate: 0 14px; }
.vz-hero.is-anim .vz-viseur i { opacity: 0; scale: 1.6; }
.vz-hero.is-anim.is-vise .vz-viseur i { opacity: 1; scale: 1; }
.vz-hero.is-anim:not(.is-capt2) .vz-etiquette__avant { display: inline; }
.vz-hero.is-anim:not(.is-capt2) .vz-etiquette__apres { display: none; }
.vz-hero.is-anim.is-diff .vz-ecart { opacity: 1; scale: 1; }
.vz-hero.is-anim.is-alerte .vz-alerte { opacity: 1; translate: 0 0; }
.vz-flash.is-on { animation: vz-flash .45s ease-out; }
@keyframes vz-flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* --- 2. Le problème ------------------------------------------------------------ */
.vz-pb { background: #fff; padding: 0; }
.vz-pb__colle { padding: clamp(64px, 9vw, 140px) 0; }
.vz-pb__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pp-contenu .vz-pb .pp-titre { font-size: clamp(2rem, 3.8vw, 3.3rem); }
.vz-pb__scene { position: relative; container-type: inline-size; width: 100%; max-width: min(100%, 58vh + 80px); justify-self: center; }
.vz-casse { position: absolute; z-index: 2; background: var(--vz-encre); color: #fff; font-size: .8125rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: opacity .35s ease, scale .4s cubic-bezier(.2, 1.4, .4, 1); }
.vz-casse::before { content: "×"; color: var(--vz-corail); margin-right: 6px; }
.vz-casse--img { left: 52cqw; top: 14cqw; }
.vz-casse--grille { right: -2cqw; top: 54cqw; }
.vz-casse--champ { left: -3cqw; top: 92cqw; }
.vz-console { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; font: 600 .875rem/1.3 ui-monospace, Menlo, monospace; }
.vz-console__ok { color: #1c7a4d; }
.vz-console__ok::before { content: "✓ "; }
.vz-console__ko { color: var(--vz-corail-texte); transition: opacity .4s ease; }
.vz-console__ko::before { content: "✗ "; }
/* au repos (sans JS, mobile, mouvement réduit) : la page déjà cassée */
.vz-pb:not(.is-anim) .vz-site__img { translate: 9cqw 4cqw; }
.vz-pb:not(.is-anim) .vz-site__grille { grid-template-columns: 1fr 1fr 1.6fr; }
.vz-pb:not(.is-anim) .vz-site__grille span:nth-child(3) { translate: 0 6cqw; rotate: 3deg; }
.vz-pb:not(.is-anim) .vz-champ--2 { opacity: 0; }
/* défilement (ordinateur) : chaque accident arrive à son tour */
.vz-pb.is-anim .vz-casse { opacity: 0; scale: .7; }
.vz-pb.is-anim.is-1 .vz-casse--img,
.vz-pb.is-anim.is-2 .vz-casse--grille,
.vz-pb.is-anim.is-3 .vz-casse--champ { opacity: 1; scale: 1; }
.vz-pb.is-anim:not(.is-4) .vz-console__ko { opacity: 0; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.vz-pb.is-anim { height: 340vh; }
	.vz-pb.is-anim .vz-pb__colle { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
	.vz-pb.is-anim .vz-pb__in { width: 100%; }
}

/* --- 3. La réponse ---------------------------------------------------------------- */
.vz-reponse { background: var(--vz-vert); color: #fff; }
.vz-reponse .pp-sur { color: #b9d6c6; }
.vz-reponse__texte { max-width: 52em; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; }
.vz-reponse__texte p { margin: 0 0 1em; }
.vz-reponse__fort { font-family: var(--font-title); font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.1; margin-top: .6em !important; }
.vz-reponse__fort::after { content: ""; display: block; width: 72px; height: 5px; background: var(--vz-corail); margin-top: 26px; }

/* --- 4. Le fil ---------------------------------------------------------------------- */
.vz-comment { background: var(--vz-pale); }
.pp-contenu .vz-comment .pp-titre { color: var(--vz-vert); }
.vz-fil { list-style: none; margin: 56px 0 0; padding: 0; position: relative; display: grid; gap: 28px; }
.vz-fil::before, .vz-fil::after { content: ""; position: absolute; left: 50%; top: 0; width: 3px; margin-left: -1.5px; border-radius: 3px; }
.vz-fil::before { bottom: 0; background: var(--vz-ligne); }
.vz-fil::after { height: calc(clamp(0, (var(--p, 1) - .22) / .5, 1) * 100%); background: var(--vz-corail); }
.vz-fil__etape { position: relative; width: calc(50% - 44px); margin: 0; }
.vz-fil__etape:nth-child(odd) { justify-self: start; text-align: right; }
.vz-fil__etape:nth-child(even) { justify-self: end; }
.vz-fil__etape p { margin: 0; background: #fff; border-radius: 14px; padding: 22px 26px; font-size: 1.0625rem; line-height: 1.55; box-shadow: 0 20px 40px -28px rgba(19, 38, 31, .4); }
.vz-fil__point { position: absolute; top: 26px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--vz-ligne); transition: background .4s ease, border-color .4s ease, scale .4s cubic-bezier(.2, 1.5, .4, 1); }
.vz-fil__etape:nth-child(odd) .vz-fil__point { right: -53px; }
.vz-fil__etape:nth-child(even) .vz-fil__point { left: -53px; }
.vz-fil__etape.is-vu .vz-fil__point { background: var(--vz-corail); border-color: var(--vz-corail); }
.pp-js .vz-fil__etape:not(.is-vu) .vz-fil__point { scale: .6; }

/* --- 5. L'objectif : le message ------------------------------------------------- */
.vz-objectif__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pp-contenu .vz-objectif .pp-titre { color: var(--vz-vert); font-size: clamp(2rem, 4vw, 3.4rem); }
.vz-message { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 40px 80px -40px rgba(19, 38, 31, .5), 0 0 0 1px rgba(19, 38, 31, .06); }
.vz-message__tete { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: .8125rem; color: #56665f; }
.vz-message__tete img { height: 20px; width: auto; }
.vz-message__titre { font-weight: 700; font-size: 1.0625rem; margin: 0 0 16px; }
.vz-message__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vz-message__duo figure { position: relative; margin: 0; }
.vz-message__duo .vz-site { box-shadow: 0 0 0 1px var(--vz-ligne); border-radius: 8px; }
.vz-message__duo figcaption { font: 600 .75rem/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; color: #56665f; margin-top: 8px; }
.vz-cercle { position: absolute; left: -4%; width: 108%; top: 74%; height: 22%; overflow: visible; }
.vz-cercle ellipse { fill: none; stroke: var(--vz-corail); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
.vz-message__actions { display: flex; gap: 10px; margin: 18px 0 0; }
.vz-message__actions span { flex: 1; text-align: center; font-weight: 700; font-size: .9375rem; padding: 11px; border-radius: 10px; background: var(--vz-pale); color: var(--vz-vert); }
.vz-message__actions span:last-child { background: var(--vz-vert); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.pp-js .vz-message:not(.is-vu) .vz-cercle ellipse { stroke-dashoffset: 100; }
	.pp-js .vz-message .vz-cercle ellipse { transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .7s; }
}

/* --- Mobile ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vz-hero__in, .vz-pb__in, .vz-objectif__in { grid-template-columns: minmax(0, 1fr); }
	.vz-scene { padding: 20px 10px 0; }
	.vz-alerte { right: 0; top: -6px; padding: 10px 14px; }
	.vz-rejouer { position: static; margin-top: 18px; }
	.vz-fil::before, .vz-fil::after { left: 9px; }
	.vz-fil__etape, .vz-fil__etape:nth-child(odd), .vz-fil__etape:nth-child(even) { width: auto; justify-self: stretch; text-align: left; padding-left: 40px; }
	.vz-fil__etape:nth-child(odd) .vz-fil__point, .vz-fil__etape:nth-child(even) .vz-fil__point { left: 0; right: auto; }
	.vz-casse--grille { right: 0; }
	.vz-casse--champ { left: 0; }
}