/* Compact mail scene: the full workflow remains below. */
.hero-focused .hero-layout{display:block}.hero-focused .hero-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:70px;align-items:start}.hero-focused .hero-title{grid-column:1;grid-row:1;text-align:left;margin:0;width:100%}.hero-focused h1{font-size:clamp(54px,5.1vw,74px);line-height:1.03;margin-top:25px}.hero-focused .hero-copy{grid-column:1;grid-row:2;padding:0;margin:25px 0 0;max-width:none}.hero-focused .hero-description{font-size:17px;line-height:1.7;max-width:590px}.hero-focused .hero-actions{gap:20px;margin-top:23px}.hero-focused .hero-actions .button{font-size:13px;padding:16px 19px}.hero-focused .hero-connections{margin-top:42px}
.mail-visual{grid-column:2;grid-row:1/3;align-self:center;position:relative;isolation:isolate;margin:0;min-width:0;color:var(--text);padding:35px 8px 0}.mail-aura{position:absolute;z-index:-1;inset:5% -8% 12%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%);pointer-events:none}.mail-scene{perspective:1000px;padding:0 15px;position:relative}.mail-incoming,.mail-draft{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:24px;box-shadow:0 20px 45px #00000012}.mail-incoming{margin-right:28px;transform:rotate(-3deg);transform-origin:80% 80%}.mail-card-top{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;line-height:1.4;margin-bottom:18px}.mail-icon,.mail-check{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:10px;color:var(--accent);font-size:21px;flex-shrink:0}.mail-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:auto;box-shadow:0 0 15px color-mix(in srgb,var(--accent) 40%,transparent)}.mail-incoming>strong{font-size:23px;letter-spacing:-.02em;color:var(--heading);display:block}.mail-incoming>p,.mail-draft>p{font-size:15px;line-height:1.6;margin:9px 0 0}.mail-bridge{height:41px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:28px}.mail-bridge i{display:none}.mail-draft{margin-left:24px;transform:rotate(2deg);border-color:var(--accent);box-shadow:6px 7px 0 color-mix(in srgb,var(--accent) 12%,var(--bg)),0 22px 50px #00000012;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface))}.mail-draft .mail-card-top{color:var(--accent);font-weight:600;margin-bottom:15px}.mail-check{background:var(--accent);color:var(--bg);border:0}.mail-review{margin-top:19px;border-top:1px solid var(--line);padding-top:14px;font-size:12px;color:var(--muted);display:flex;gap:9px;align-items:center}.mail-pencil{color:var(--accent);font-size:19px}.mail-saved{position:relative;margin:24px auto 0;width:fit-content;border:1px solid var(--line);padding:11px 16px;border-radius:100px;background:var(--bg);font-size:12px;color:var(--text);box-shadow:0 8px 20px #00000008}.mail-saved>span{color:var(--accent);margin-right:7px}.mail-visual figcaption{position:static;display:flex;flex-direction:column;align-items:center;text-align:center;margin:28px 0 0;gap:8px;padding:0;background:none}.mail-visual figcaption>span{font:500 9px/1.4 Jura,sans-serif;letter-spacing:.12em;color:var(--accent)}.mail-visual figcaption>strong{font-size:27px;line-height:1.15;letter-spacing:-.03em;color:var(--heading)}.mail-visual figcaption>small{font-size:10px;color:var(--muted)}
.mail-visual:is([data-motion=running],[data-motion=paused]) .mail-incoming{animation:mail-arrival 1s ease-out both}.mail-visual:is([data-motion=running],[data-motion=paused]) .mail-draft{animation:mail-ready 3s ease-in-out both}.mail-visual:is([data-motion=running],[data-motion=paused]) .mail-saved{animation:mail-scene-complete 4.5s ease-out both}.mail-visual[data-motion=paused] :is(.mail-incoming,.mail-draft,.mail-saved){animation-play-state:paused}
@keyframes mail-arrival{from{transform:translateY(-14px) rotate(-6deg)}to{transform:rotate(-3deg)}}@keyframes mail-ready{0%,20%{transform:translateY(10px) rotate(0)}65%{transform:translateY(-4px) rotate(2deg);box-shadow:6px 7px 0 color-mix(in srgb,var(--accent) 20%,var(--bg)),0 0 35px color-mix(in srgb,var(--accent) 12%,transparent)}100%{transform:rotate(2deg)}}@keyframes mail-scene-complete{0%,65%{transform:translateY(5px)}85%{transform:translateY(-3px);border-color:var(--accent)}100%{transform:translateY(0)}}
@media(max-width:1150px) and (min-width:901px){.hero-focused .hero-intro{column-gap:35px;grid-template-columns:1.05fr .95fr}.hero-focused h1{font-size:58px}.hero-focused .hero-description{font-size:16px}.mail-incoming,.mail-draft{padding:20px}.mail-scene{padding:0 5px}.mail-incoming{margin-right:15px}.mail-draft{margin-left:12px}.mail-card-top{font-size:11px}}
@media(max-width:900px){.hero-focused .hero-intro{grid-template-columns:1fr}.hero-focused .hero-title{grid-row:1}.hero-focused h1{font-size:clamp(52px,8.9vw,78px)}.mail-visual{grid-column:1;grid-row:2;max-width:540px;width:100%;justify-self:center;padding-top:40px}.hero-focused .hero-copy{grid-row:3;margin-top:35px}.hero-focused .hero-description{max-width:730px;font-size:18px}.hero-focused .hero-connections{margin-top:35px}}
@media(max-width:480px){.hero-focused h1{font-size:clamp(40px,11vw,53px)}.mail-visual{padding:30px 0 0}.mail-scene{padding:0 5px}.mail-incoming,.mail-draft{padding:17px;border-radius:16px}.mail-incoming{margin-right:14px}.mail-draft{margin-left:12px}.mail-card-top{font-size:11px;margin-bottom:12px;gap:8px}.mail-icon,.mail-check{width:28px;height:28px;font-size:18px}.mail-incoming>strong{font-size:21px}.mail-incoming>p,.mail-draft>p{font-size:14px}.mail-bridge{height:30px}.mail-review{font-size:11px;margin-top:12px;padding-top:10px}.mail-saved{font-size:10px;padding:10px 12px;margin-top:19px}.mail-visual figcaption{margin-top:23px}.mail-visual figcaption>strong{font-size:25px}.mail-visual figcaption>span{font-size:8px}.hero-focused .hero-description{font-size:16px}.hero-focused .hero-actions{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.mail-visual *{animation:none!important;transition:none!important}}

/* 8 octobre : le montage retrouve le hero, l’exemple email devient concret plus bas. */
.hero-film{grid-column:2;grid-row:1/3;align-self:center;min-width:0;width:100%;margin:0;position:relative}
.film-canvas{position:relative;aspect-ratio:9/7;isolation:isolate}
.film-poster,.film-poster img,.film-canvas video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film-canvas video{opacity:0;transition:opacity .2s;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);border:0;box-shadow:none}
.hero-film[data-ready=true] video{opacity:1}.hero-film[data-ready=true] .film-poster{visibility:hidden}
.film-poster-light{display:none}[data-theme=light] .film-poster-dark{display:none}[data-theme=light] .film-poster-light{display:block}
.film-control{position:absolute;right:8px;bottom:8px;z-index:2;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--text);opacity:0;transition:opacity .2s;cursor:pointer}
.film-canvas:hover .film-control,.film-control:focus-visible,.hero-film[data-playback=paused] .film-control,.hero-film[data-playback=ended] .film-control{opacity:1}
.film-error{font-size:13px;color:var(--muted)}
.workflow-mail{grid-column:auto;grid-row:auto;max-width:600px;justify-self:center;width:100%;padding:20px 8px 0}
.workflow .workflow-mail p{max-width:none;font-size:15px;margin-top:9px}.workflow .mail-card-top{font-size:13px}.workflow .mail-review{font-size:13px}.workflow .mail-saved{font-size:13px}.workflow .mail-visual figcaption>small{font-size:12px}
@media(max-width:900px){.hero-film{grid-column:1;grid-row:2;max-width:590px;justify-self:center;margin-top:25px}.film-canvas{aspect-ratio:9/11}.hero-focused .hero-copy{margin-top:24px}.workflow-mail{grid-row:auto;max-width:540px}}
@media(max-width:480px){.hero-film{margin-top:15px}.workflow .workflow-mail p{font-size:14px}.workflow .mail-card-top,.workflow .mail-review{font-size:12px}.workflow .mail-saved{font-size:11px}.workflow-mail{padding:18px 0 0}}
@media(prefers-reduced-motion:reduce){.film-canvas video,.film-control{transition:none}}
/* Keep the three deliberate headline lines comfortably inside small screens. */
@media(max-width:900px){.hero-focused .hero-title h1{font-size:clamp(30px,7.6vw,68px);line-height:1.08;letter-spacing:-.035em;max-width:100%;margin-inline:0}.hero-focused .founder-line br{display:none}}