/* Visite de JeunACTIO — lecteur d'écrans animés (système « Après »), thème clair */
.vt{ --v-ink:#0f2a38; --v-mute:#58737f; --v-line:#dbe7ec; --v-cy:#99d1e4; --v-cyd:#2a6c85; --v-soft:#f3f9fb; --ease:cubic-bezier(.22,1,.36,1); position:relative; padding:clamp(36px,5vw,72px) 0 clamp(40px,5vw,80px); background:radial-gradient(1100px 520px at 12% 0%,#e4f2f7 0%,transparent 62%),linear-gradient(180deg,#fff,#eef6f9); color:var(--v-ink); font-family:var(--ja-font,Inter,system-ui,sans-serif); outline:none; }
.vt *{ box-sizing:border-box; }
.vt-wrap{ width:var(--ja-container,min(1180px,92vw)); margin:0 auto; }
.vt-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px 32px; margin-bottom:22px; }
.vt-head h2{ margin:0; font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-size:clamp(28px,3.6vw,48px); line-height:1.05; font-weight:800; letter-spacing:-.015em; }
.vt-head p{ margin:0; max-width:46ch; color:var(--v-mute); line-height:1.55; }

/* Barre de sections */
.vt-bar{ position:sticky; top:0; z-index:5; display:flex; gap:8px; overflow-x:auto; padding:10px 2px; margin-bottom:16px; scrollbar-width:none; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vt-bar::-webkit-scrollbar{ display:none; }
.vt-pill{ position:relative; flex:none; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--v-line); background:#fff; color:var(--v-ink); font:700 13px/1 inherit; font-family:inherit; cursor:pointer; overflow:hidden; transition:background .3s ease,color .3s ease,border-color .3s ease; }
.vt-pill::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--v-cy); transform:scaleX(var(--p,0)); transform-origin:left; }
.vt-pill:hover{ border-color:var(--v-cy); }
.vt-pill.is-on{ background:#0f2a38; border-color:#0f2a38; color:#fff; }
.vt-pill.is-on::after{ background:#99d1e4; }

/* Scène 3D */
.vt-stage{ position:relative; width:100%; aspect-ratio:1200/760; perspective:2200px; border-radius:20px; background:radial-gradient(900px 480px at 50% 0%,#fff 0%,#e6f1f6 70%); border:1px solid var(--v-line); overflow:hidden; --s:1; }
.vt-badge{ position:absolute; left:18px; top:16px; z-index:6; padding:7px 12px; border-radius:999px; background:#0f2a38; color:#fff; font:700 11px/1 ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; opacity:0; transform:translateY(-6px); transition:opacity .4s ease,transform .4s ease; pointer-events:none; }
.vt-badge.is-on{ opacity:1; transform:none; }
.scr{ position:absolute; left:4%; top:7%; width:92%; height:92%; border-radius:12px; overflow:visible; background:#fff; border:1px solid var(--v-line); box-shadow:0 50px 100px -34px rgba(6,16,23,.38),0 2px 6px rgba(6,16,23,.08); transform-style:preserve-3d; will-change:transform,opacity,filter; }
.scr[hidden]{ display:none; }
.drift{ position:absolute; inset:0; transform-origin:50% 50%; }
.scr-in{ position:absolute; left:0; top:0; width:1200px; height:760px; transform-origin:0 0; transform:scale(var(--k,1)); font-size:16px; }
.scr::after{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%) 100% 0/300% 100% no-repeat; opacity:0; z-index:4; }
.scr.is-play::after{ animation:vtSheen 1.6s linear .2s 1 both; }
@keyframes vtSheen{ 0%{ background-position:100% 0; opacity:1; } 80%{ opacity:1; } 100%{ background-position:0 0; opacity:0; } }

/* Habillage « site » des maquettes */
.top{ border-radius:12px 12px 0 0; height:56px; display:flex; align-items:center; gap:18px; padding:0 28px; border-bottom:1px solid var(--v-line); background:#fff; }
.logo{ font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-weight:900; letter-spacing:.2em; font-size:17px; }
.nav{ display:flex; gap:6px; margin-left:12px; }
.nav i{ font-style:normal; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:700; color:var(--v-mute); }
.nav i.on{ background:#0f2a38; color:#fff; }
.top .lbl{ margin-left:auto; font:700 10px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--v-mute); border:1px solid var(--v-line); border-radius:999px; padding:6px 10px; }
.body{ border-radius:0 0 12px 12px; position:absolute; left:0; right:0; top:56px; bottom:0; padding:28px; background:linear-gradient(180deg,#fafdfe,#f1f8fb); }
.g2{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; height:100%; }
.g22{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); grid-auto-rows:1fr; gap:20px; height:100%; }
.g33{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); grid-auto-rows:1fr; gap:18px; height:100%; }
.g3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; height:100%; }
.col{ display:flex; flex-direction:column; gap:18px; min-height:0; }
.card{ background:#fff; border:1px solid var(--v-line); border-radius:14px; box-shadow:0 1px 3px rgba(6,16,23,.1); position:relative; min-width:0; }
.pc{ display:flex; flex-direction:column; overflow:hidden; }
.pc .im{ position:relative; flex:1; min-height:0; overflow:hidden; background:#e6f3f8; }
.pc .im::before{ content:""; position:absolute; inset:-24px; background:var(--bg,none) center/cover no-repeat; filter:blur(20px) saturate(1.15) brightness(1.04); transform:scale(1.05); }
.pc .im img{ position:relative; width:100%; height:100%; object-fit:contain; display:block; }
.pc .bd{ padding:14px 18px 16px; display:grid; gap:8px; }
.pc h4{ margin:0; font-size:19px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta{ display:flex; align-items:center; gap:8px; color:var(--v-mute); font-size:13px; }
.tag{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:#e6f3f8; color:#2a6c85; font-size:12px; font-weight:800; width:max-content; }
.dot{ width:10px; height:10px; border-radius:50%; background:#5cb97e; display:inline-block; }
.dot.o{ background:#e6a73a; } .dot.b{ background:#3d79b8; } .dot.r{ background:#d94a3d; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; border-radius:999px; border:1px solid var(--v-cy); background:#fff; color:var(--v-ink); font-weight:800; font-size:14px; }
.btn.p{ background:#0f2a38; border-color:#0f2a38; color:#fff; }
h2.t{ margin:14px 0 12px; font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-size:44px; line-height:1.05; font-weight:800; letter-spacing:-.015em; }
.lead{ margin:0 0 22px; font-size:19px; line-height:1.6; color:var(--v-mute); min-height:4.8em; position:relative; }
.stat{ padding:20px 24px; display:grid; gap:8px; }
.stat b{ font-size:44px; line-height:1; font-variant-numeric:tabular-nums; }
.stat > span{ color:var(--v-mute); font-size:14px; }
.spark{ width:100%; height:38px; }
.spark path{ fill:none; stroke:#2a6c85; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.dots{ display:flex; gap:10px; }
.prog{ height:8px; border-radius:99px; background:#e6f3f8; overflow:hidden; }
.prog i{ display:block; height:100%; width:var(--w,70%); border-radius:99px; background:#2a6c85; transform-origin:left; }
.table{ padding:8px 0; height:100%; display:flex; flex-direction:column; }
.thead{ display:grid; grid-template-columns:150px 1fr 140px 110px; gap:16px; padding:12px 28px; color:var(--v-mute); font:800 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--v-line); }
.row{ display:grid; grid-template-columns:150px 1fr 140px 110px; gap:16px; align-items:center; padding:12px 28px; border-bottom:1px solid var(--v-line); background:#fff; position:relative; }
.row:last-child{ border-bottom:0; }
.row img{ width:150px; height:84px; object-fit:contain; border-radius:10px; background:#e6f3f8; }
.row .rt{ font-weight:800; font-size:18px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row .mini{ height:34px; font-size:13px; padding:0 16px; }
.person{ padding:0; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.person .pb{ align-self:stretch; height:86px; position:relative; overflow:hidden; background:linear-gradient(120deg,#e4f3f8,#bfe0ec); }
.person .pb::before,.person .pb::after{ content:""; position:absolute; border-radius:50%; border:3px solid; }
.person .pb::before{ width:170px; height:170px; right:-34px; top:-92px; border-color:rgba(61,121,184,.45); }
.person .pb::after{ width:130px; height:130px; right:6px; top:-70px; border-color:rgba(92,185,126,.55); }
.person .av{ width:104px; height:104px; margin:-52px 0 0 24px; border-radius:50%; border:4px solid #fff; background:#eaf3f7; box-shadow:0 8px 20px -8px rgba(6,16,23,.35); overflow:hidden; display:grid; place-items:center; position:relative; transition:box-shadow .5s var(--ease); }
.person .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.person .ini{ font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-weight:800; font-size:36px; color:#2a6c85; letter-spacing:.02em; }
.person strong{ margin:10px 24px 0; font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-size:23px; line-height:1.15; }
.person .rl{ margin:0 24px; color:var(--v-mute); font-size:15px; font-weight:600; min-height:1.4em; position:relative; }
.person .ml{ margin:8px 24px 22px; padding:8px 14px 8px 36px; border-radius:999px; background:#f1f8fb; border:1px solid var(--v-line); font-size:14px; font-weight:600; color:#0f2a38; position:relative; max-width:calc(100% - 48px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.person .ml::before{ content:""; position:absolute; left:13px; top:50%; width:15px; height:15px; transform:translateY(-50%); background:#2a6c85; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.person .ml .tx-l{ left:36px; right:14px; top:8px; }
.person .ml[hidden],.person .rl[hidden]{ display:none; }
.person .av[data-a]{ animation-name:aPop; --dur:.7s; }
.scr.is-spot .person.is-front .av{ box-shadow:0 0 0 4px #99d1e4,0 12px 26px -8px rgba(6,16,23,.4); }
.scr.is-spot .person.is-front .pb{ background:linear-gradient(120deg,#d4ecf5,#9fd2e4); }
.person .pb{ transition:background .6s ease; }
.fld{ display:grid; gap:6px; }
.fld label{ font:800 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--v-mute); }
.fld .v{ height:48px; border:1px solid var(--v-line); border-radius:10px; padding:0 14px; display:flex; align-items:center; font-size:17px; background:#fff; position:relative; }
.form{ padding:28px; display:grid; gap:16px; align-content:start; }
.tgl{ display:flex; align-items:center; gap:12px; font-size:15px; }
.tgl s{ width:46px; height:26px; border-radius:99px; border:1px solid var(--v-line); background:#fff; position:relative; display:inline-block; text-decoration:none; }
.tgl s::after{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#bdd0d8; transition:none; }
.tgl.on s{ background:#0f2a38; border-color:#0f2a38; }
.tgl.on s::after{ left:23px; background:#fff; }
.steps{ padding:24px; display:grid; gap:14px; align-content:start; }
.step{ display:flex; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--v-line); border-radius:12px; background:#fff; }
.step b{ font-size:17px; }
.rings{ display:flex; gap:22px; justify-content:center; padding:10px 0 4px; }
.ring{ display:grid; gap:8px; justify-items:center; width:84px; font-size:13px; font-weight:700; color:var(--v-ink); text-align:center; }
.ring u{ width:68px; height:68px; border-radius:50%; border:3px solid var(--c); background:#fff; box-shadow:0 0 0 3px #fff,0 0 0 4px var(--v-line); display:grid; place-items:center; text-decoration:none; font-size:26px; color:var(--c); font-weight:900; }
.ig3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; height:300px; }
.ig3 .card{ overflow:hidden; } .ig3 img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Texte dont la place est réservée (frappe) */
.tx-g{ visibility:hidden; }
.tx-l{ position:absolute; left:0; top:0; right:0; }
.v .tx-l{ left:14px; top:50%; transform:translateY(-50%); right:14px; }
.tx-l::after{ content:""; display:none; width:.08em; height:1em; margin-left:2px; vertical-align:-.12em; background:currentColor; animation:vtCaret .8s steps(1) infinite; }
.tx-l.on::after{ display:inline-block; }
.tx-l.done::after{ display:none; }
@keyframes vtCaret{ 50%{ opacity:0; } }
.v{ position:relative; }

/* Mouvements par type d'élément (délai --d posé par le script) */
.scr [data-a]{ animation-duration:var(--dur,.75s); animation-timing-function:var(--ease); animation-delay:var(--d,0s); animation-fill-mode:backwards; animation-play-state:paused; }
.scr.is-play [data-a]{ animation-play-state:running; }
/* A. Cascade */
@keyframes eCascade{ from{ opacity:0; transform:perspective(1000px) translateY(-46px) rotateX(-22deg); } }
@keyframes eCascadeR{ from{ opacity:0; transform:perspective(1000px) translateY(-30px) rotateX(-22deg); } }
/* B. Retournement */
@keyframes eFlip{ from{ opacity:0; transform:perspective(1000px) rotateY(88deg) scale(.9); } }
@keyframes eFlipR{ from{ opacity:0; transform:perspective(900px) rotateX(-85deg); } }
/* C. Distribution */
@keyframes eDeal{ from{ opacity:0; transform:perspective(1000px) translate(120px,-30px) rotate(6deg) rotateY(-25deg); } }
/* D. Élévation */
@keyframes eRise{ from{ opacity:0; transform:perspective(1000px) translateY(28px) rotateX(14deg) scale(.96); } }
@keyframes eRiseR{ from{ opacity:0; transform:translateX(-28px); } }
/* E. Zoom */
@keyframes eZoom{ from{ opacity:0; transform:perspective(1000px) translateZ(220px); filter:blur(6px); } }
.scr[data-entry=cascade] .card[data-a]{ animation-name:eCascade; transform-origin:top center; }
.scr[data-entry=cascade] .row[data-a]{ animation-name:eCascadeR; transform-origin:top center; }
.scr[data-entry=flip] .card[data-a]{ animation-name:eFlip; --dur:1s; }
.scr[data-entry=flip] .row[data-a]{ animation-name:eFlipR; transform-origin:top center; }
.scr[data-entry=deal] .card[data-a],.scr[data-entry=deal] .row[data-a]{ animation-name:eDeal; --dur:.9s; }
.scr[data-entry=rise] .card[data-a]{ animation-name:eRise; --dur:.95s; transform-origin:bottom center; }
.scr[data-entry=rise] .row[data-a]{ animation-name:eRiseR; }
.scr[data-entry=zoom] .card[data-a],.scr[data-entry=zoom] .row[data-a]{ animation-name:eZoom; --dur:.9s; }
/* Graphique : se dessine */
.spark path[data-a]{ stroke-dasharray:1; stroke-dashoffset:0; animation-name:aDraw; --dur:1.4s; animation-timing-function:cubic-bezier(.45,0,.2,1); }
@keyframes aDraw{ from{ stroke-dashoffset:1; } }
/* Barre de valeur */
.bar[data-a]{ animation-name:aBar; --dur:1.1s; transform-origin:left; }
@keyframes aBar{ from{ transform:scaleX(.2); opacity:0; } 50%{ opacity:.5; } }
/* Étiquette, pastille active : pop */
.tag[data-a],.nav i.on[data-a],.ring[data-a]{ animation-name:aPop; --dur:.6s; }
@keyframes aPop{ 0%{ opacity:0; transform:scale(.5); } 70%{ opacity:1; transform:scale(1.08); } 100%{ transform:scale(1); } }
/* Pastille d'état, case */
.dot[data-a]{ animation-name:aDot; --dur:.5s; }
@keyframes aDot{ 0%{ transform:scale(0); } 70%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
/* Bouton : monte puis « appui » */
.btn[data-a]{ animation-name:aBtn; --dur:.9s; }
@keyframes aBtn{ 0%{ opacity:0; transform:translateY(12px); } 70%{ opacity:1; transform:none; } 85%{ transform:scale(.95); } 100%{ transform:scale(1); } }
/* Champ : s'ouvre de gauche à droite */
.v[data-a]{ animation-name:aField; --dur:.9s; }
@keyframes aField{ from{ opacity:0; clip-path:inset(0 100% 0 0 round 10px); } to{ opacity:1; clip-path:inset(0 0 0 0 round 10px); } }
/* Progression */
.prog i[data-a]{ animation-name:aProg; --dur:1.2s; }
@keyframes aProg{ from{ transform:scaleX(0); } }
/* Interrupteur */
.tgl.on[data-a] s{ animation:aTglBg .6s var(--ease) calc(var(--d,0s) + .25s) backwards; }
.tgl.on[data-a] s::after{ animation:aKnob .6s var(--ease) calc(var(--d,0s) + .25s) backwards; }
@keyframes aTglBg{ from{ background:transparent; border-color:var(--v-line); } }
@keyframes aKnob{ from{ transform:translateX(-14px); background:#bdd0d8; } }
.tgl.on[data-a]{ animation:none; }

/* Mise en avant (spotlight) */
.scr .is-spotable{ transition:transform .65s var(--ease),box-shadow .65s var(--ease),opacity .5s ease,filter .5s ease,background .5s ease; }
.scr.is-spot .is-back{ opacity:.38; filter:grayscale(1); }
.scr.is-spot .card.is-front{ transform:perspective(900px) translateZ(90px) scale(1.06); background:#fff; box-shadow:0 30px 60px -18px rgba(10,10,10,.35); outline:2px solid #0f2a38; z-index:3; }
.scr.is-spot .card.is-front[data-soft]{ transform:perspective(900px) translateZ(24px) scale(1.015); }
.scr.is-spot .row.is-front{ transform:perspective(900px) translateZ(40px) scale(1.02); box-shadow:0 20px 40px -16px rgba(10,10,10,.3); outline:2px solid #0f2a38; z-index:3; }
.scr.is-spot .v.is-front,.scr.is-spot .btn.is-front{ transform:perspective(900px) translateZ(24px) scale(1.04); box-shadow:0 14px 30px -12px rgba(10,10,10,.35); z-index:3; }

/* Informations sous la scène + commandes */
.vt-meta{ margin-top:18px; display:grid; gap:6px; min-height:84px; transition:opacity .45s ease,transform .45s ease; }
.vt-meta.is-sw{ opacity:0; transform:translateY(8px); }
.vt-num{ font:700 12px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--v-mute); }
.vt-title{ margin:0; font-family:var(--font-serif,'Playfair Display',Georgia,serif); font-size:clamp(22px,2.6vw,32px); font-weight:800; }
.vt-desc{ margin:0; color:var(--v-mute); max-width:70ch; line-height:1.55; }
.vt-ctl{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.vt-ctl button{ height:44px; min-width:44px; border-radius:999px; border:1px solid var(--v-line); background:#fff; color:var(--v-ink); font:inherit; font-weight:800; cursor:pointer; padding:0 14px; transition:transform .2s ease,border-color .2s ease; }
.vt-ctl button:hover{ border-color:var(--v-cy); transform:translateY(-1px); }
.vt-ctl .play{ width:56px; height:56px; padding:0; background:#0f2a38; color:#fff; border-color:#0f2a38; display:grid; place-items:center; }
.vt-ctl svg{ width:20px; height:20px; fill:currentColor; }
.vt-ctl .sp{ margin-left:auto; }
.vt-tl{ display:flex; gap:4px; margin-top:16px; }
.vt-tl i{ flex:1; height:4px; border-radius:2px; background:#d3e4ec; overflow:hidden; position:relative; }
.vt-tl i::after{ content:""; position:absolute; inset:0; background:#0f2a38; transform:scaleX(var(--p,0)); transform-origin:left; }
.vt :is(button,a):focus-visible{ outline:2px solid #2a6c85; outline-offset:3px; }

/* Agrandi */
.vt.is-big{ position:fixed; inset:0; z-index:100000; overflow:auto; padding:24px 0; background:#eef6f9; }
.vt.is-big .vt-stage{ max-height:calc(100vh - 220px); }

/* Mouvement réduit : fondu simple, contenu visible d'emblée */
.vt-rm .scr [data-a]{ animation:none !important; }
.vt-rm .scr::after{ display:none; }
.vt-rm .tx-g{ visibility:visible; } .vt-rm .tx-l{ display:none; }

@media (max-width:760px){
  .vt-pill{ height:36px; padding:0 14px; }
  .vt-ctl .sp{ display:none; }
}