/* Ronde 2 — thèmes de couleur, logo à la taille de l'agence, vidéo placeholder, gros logo, heros selon la formule */
:root{--dark:#220B26;--dark-2:#2A2329;--dark-3:#362E36}
.theme-mauve{--dark:#6D5F6F;--dark-2:#786A7A;--dark-3:#5E515F}
.theme-mauve .nav-ink{background:rgba(109,95,111,.92)}
.theme-mauve .on-ink .lead,.theme-mauve .on-ink .sub,.theme-mauve .on-ink .card p,.theme-mauve .fcard .txt p,.theme-mauve .way li,.theme-mauve .on-ink .step p,.theme-mauve .ed.full .who,.theme-mauve .on-ink .faq details p{color:#F3EFF3}
.theme-mauve .on-ink .fact span,.theme-mauve .on-ink .poster .cap span,.theme-mauve .way .who,.theme-mauve .foot,.theme-mauve .foot .bottom{color:#EAE4EB}
.theme-mauve .foot a:hover{color:#fff}
.theme-mauve .on-ink .fact,.theme-mauve .fcard,.theme-mauve .way,.theme-mauve .on-ink .card,.theme-mauve .on-ink .loop{border-color:rgba(255,255,255,.16)}
.theme-mauve .phone{background:var(--ink)}
.theme-mauve .final.on-ink .sig{color:#EAE4EB}

/* le logo à la taille du mockup de l'agence + la signature à côté */
.nav .logo{display:flex;align-items:center;gap:14px}
.nav .logo img{height:36px}
.nav .logo .tag{font-family:var(--serif);font-size:16px;letter-spacing:-.01em;opacity:.92;white-space:nowrap}
@media (max-width:1100px){.nav .logo .tag{display:none}}
@media (max-width:760px){.nav .logo img{height:30px}}

/* vidéo placeholder */
.vid{position:relative}
.vid-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);aspect-ratio:16/9;box-shadow:0 30px 80px -30px rgba(34,11,38,.55)}
.vid-frame img,.vid-frame video{width:100%;height:100%;object-fit:cover;display:block}
.vid-frame .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(34,11,38,.35);transition:transform .2s var(--ease)}
.vid-frame .play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vid-frame .play svg{width:30px;height:30px;margin-left:4px}
.vid-frame .dur{position:absolute;left:16px;bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white);background:rgba(34,11,38,.7);padding:7px 10px;border-radius:6px}
.vid-cap{display:block;margin-top:14px;font-size:14px;color:var(--mauve)}
.on-ink .vid-cap{color:#CFC8D0}
.vid.plate::before{transform:translate(20px,20px)}

/* héros vidéo (b1 · b3) */
.hero-v{padding:clamp(48px,7vw,96px) 0 0;position:relative;overflow:hidden}
.hero-v .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-v h1{font-size:clamp(40px,5.3vw,74px)}
.hero-v.on-ink h1 em{font-style:normal;color:var(--lime)}
.hero-v .facts{margin:56px 0 0}
.hero-v .facts-wrap{padding-bottom:64px}
.hero-v.on-ink .fact{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);color:var(--white)}
.hero-v.on-ink .fact span{color:var(--grey)}
.theme-mauve .hero-v.on-ink .fact span{color:#EAE4EB}

/* héros papier avec le gros logo (b2) */
.hero-p{background:var(--paper)}
.hero-p h1 em{font-style:italic}
.hero-p .hero-logo{position:absolute;right:-6%;top:-12%;width:62%;height:124%;pointer-events:none;z-index:0}
.hero-p .hero-logo svg{width:100%;height:100%}
.hero-p .hero-grid{position:relative;z-index:1}
.hero-p .vid{max-width:620px;margin-left:auto}
.hero-p .fact{background:var(--white)}
@media (max-width:900px){.hero-v .hero-grid{grid-template-columns:1fr}.hero-p .hero-logo{right:-30%;top:auto;bottom:-10%;width:90%;height:60%}}

/* héros formule */
.hero-f{padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden}
.hero-f.center .hero-copy{text-align:center;max-width:900px;margin:0 auto}
.hero-f.center .lead{margin:24px auto 0;max-width:720px}
.hero-f.center .cta-row{justify-content:center}
.hero-f h1{font-size:clamp(40px,5.6vw,80px)}
.hero-f.on-ink h1 em{font-style:normal;color:var(--lime)}
.hero-f .lead{color:#CFC8D0}
.proof{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:14.5px;color:var(--grey);align-items:center}
.hero-f.center .proof{justify-content:center}
.proof span{position:relative;padding-left:18px}
.proof span::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2px;background:var(--lime)}
.proof .logos{padding-left:0;width:100%;text-align:inherit;margin-top:4px;font-size:13.5px}
.proof .logos::before{display:none}
.hero-f .stage{margin-top:clamp(40px,5vw,64px)}
.hero-f.center .stage{max-width:1040px;margin-left:auto;margin-right:auto}
.hero-f .hero-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-f .hero-grid{grid-template-columns:1fr}}

/* F2 — le geste animé par-dessus le vrai tableau de bord */
.wf{position:relative}
.wf .browser{border-color:rgba(255,255,255,.12)}
.wf .layer{position:absolute;inset:0;pointer-events:none}
.wf .layer>*{position:absolute}
.wf .ring{left:78.4%;top:11%;width:14.6%;height:5.2%;border-radius:999px;border:2px solid var(--lime);opacity:0;animation:wf-ring 14s infinite}
.wf .cursor{left:40%;top:72%;width:22px;height:22px;animation:wf-cursor 14s infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.wf .toast{right:3%;bottom:6%;background:var(--ink);color:var(--white);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(12px);animation:wf-toast 14s infinite;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.wf .toast i{width:20px;height:20px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--ink);font-style:normal;font-size:12px}
.wf .chip{right:4.2%;width:7.2%;height:3.4%;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center;opacity:0;animation:wf-chip 14s infinite}
.wf .chip.c1{top:50%;animation-delay:.3s}.wf .chip.c2{top:56.2%;animation-delay:.6s}.wf .chip.c3{top:62.5%;animation-delay:.9s}
.wf-cap{margin-top:14px;font-size:14px;color:var(--grey)}
@keyframes wf-cursor{0%{left:40%;top:72%;opacity:0}6%{opacity:1}22%{left:84.5%;top:12.6%}26%{left:84.5%;top:12.6%;transform:scale(.85)}30%{transform:scale(1)}70%{left:84.5%;top:12.6%;opacity:1}80%{opacity:0}100%{left:40%;top:72%;opacity:0}}
@keyframes wf-ring{0%,22%{opacity:0;transform:scale(1)}26%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
@keyframes wf-toast{0%,28%{opacity:0;transform:translateY(12px)}33%{opacity:1;transform:translateY(0)}74%{opacity:1;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(12px)}}
@keyframes wf-chip{0%,34%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}76%{opacity:1}82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wf .cursor,.wf .ring{display:none}.wf .toast,.wf .chip{animation:none;opacity:1;transform:none}}

/* F3 — la visite guidée */
.tour{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,4vw,56px);align-items:center;text-align:left}
.tour .tabs{display:grid;gap:10px}
.tour .tab{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--white);text-align:left;cursor:pointer;position:relative;overflow:hidden;font:inherit}
.tour .tab .tile{width:40px;height:40px;border-radius:9px;font-size:18px;background:rgba(255,255,255,.08);color:var(--white)}
.tour .tab b{display:block;font-weight:700;font-size:16px}
.tour .tab span{display:block;color:var(--grey);font-size:14px;margin-top:4px}
.tour .tab.on{background:rgba(255,255,255,.06);border-color:rgba(213,240,152,.6)}
.tour .tab.on .tile{background:var(--lime);color:var(--ink)}
.tour .tab .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lime)}
.tour .tab.on .bar{animation:tour-bar 5s linear forwards}
@keyframes tour-bar{from{width:0}to{width:100%}}
.tour .panels{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center}
.tour .panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.tour .panel.on{opacity:1;pointer-events:auto}
.tour .panel .browser{width:100%;border-color:rgba(255,255,255,.12)}
.tour .panel .phone{width:min(250px,60vw)}
@media (prefers-reduced-motion:reduce){.tour .tab.on .bar{animation:none;width:100%}}
@media (max-width:900px){.tour{grid-template-columns:1fr}.tour .panels{min-height:0;height:auto}.tour .panel{position:relative;display:none}.tour .panel.on{display:flex}}
.wf-stage{position:relative}
.hero-p h1 em{color:inherit;font-style:italic}
.hub .decided{padding:18px 22px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--mauve);font-size:15px}
.hub .decided b{color:var(--ink)}
.hub .decided a{text-decoration:underline}
.hub .rules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hub .rules .card h3{font-size:22px;margin-top:10px}
.hub .rules .card p{font-size:15px}
.hub .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hub .ideas .card h3{font-size:22px;margin-top:10px}
.hub .ideas .card p{font-size:15px}
.hub .dirs.six{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.hub .rules,.hub .ideas,.hub .dirs.six{grid-template-columns:1fr}}

/* retouches après relecture de la ronde 2 */
.vid .vid-cap{margin-top:36px}
.hero-v .facts-wrap,.hero-v .hero-grid{position:relative;z-index:1}
.hero-p .hero-logo{right:-20%;top:-30%;width:72%;height:118%}
@media (max-width:900px){.hero-p .hero-logo{right:-34%;top:auto;bottom:-6%;width:96%;height:62%}}
.hero-f.two h1{font-size:clamp(36px,4.4vw,62px)}
.wf .chip{left:88.4%;right:auto;width:7.6%;height:4%;font-size:10px;white-space:nowrap;overflow:hidden;border:1px solid rgba(34,11,38,.25)}
.wf .chip.c1{top:49.9%}.wf .chip.c2{top:56.2%}.wf .chip.c3{top:62.5%}

.hero-p .vid-cap{display:inline-block;background:rgba(246,246,246,.9);padding:5px 10px;border-radius:6px;margin-top:30px}

.vid .plate{border-radius:var(--r-lg)}
.vid .vid-cap{margin-top:34px}
.wf .chip{width:8.4%;font-size:9px;letter-spacing:0}
.wf .chip.c1{top:50.1%}.wf .chip.c2{top:56.4%}.wf .chip.c3{top:62.7%}