/* Vision Claire · charte 2026 « jaune fluo » (piste D, validée par Mehdi le 27 septembre 2026).
   Figma : https://www.figma.com/design/CDl1o5M6Ed7LhwLUjIBmqF
   Papier #F7F7F4, encre #0E0E0C, fluo #F7FF3C en aplat avec grain, halo et reflet animé.
   Funnel Display (titres), Geist (texte), Geist Mono (libellés). Un seul surligné par titre. */
@font-face{font-family:'Funnel Display';src:url(/assets/refonte-20260913/v2/fonts/funnel-display.woff2) format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'Geist';src:url(/assets/refonte-20260913/v2/fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(/assets/refonte-20260913/v2/fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
 --paper:#F7F7F4;--ink:#0E0E0C;--fluo:#F7FF3C;--grey:#EAEAE5;--white:#fff;--green:#33BF1A;
 --text-2:#595952;--text-3:#86867e;--line:rgb(14 14 12/.12);
 --display:'Funnel Display','Geist',system-ui,sans-serif;--sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E");
 --shine:linear-gradient(112deg,rgb(255 255 255/0) 42%,rgb(255 255 255/.92) 50%,rgb(255 255 255/0) 58%);
 --halo:0 0 8px rgb(247 255 60/.75),0 0 34px rgb(247 255 60/.4);
 /* Jetons historiques des pages intérieures, recalés sur la charte. */
 --accent:#0E0E0C;--accent-rgb:14 14 12;--accent-shine:#3a3a35;--accent-on-dark:#F7FF3C;--black:#0E0E0C;--muted:rgb(14 14 12/.66);--radius:24px;--shadow:0 1px 2px rgb(14 14 12/.04),0 12px 32px rgb(14 14 12/.06)
}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body.v2{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box}
.v2 img,.v2 video{max-width:100%}
.v2 a{color:inherit}
.v2 h1,.v2 h2,.v2 h3,.v2 h4{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:0;color:inherit}
.v2 h3,.v2 h4{font-weight:600;letter-spacing:-.03em;line-height:1.1}
.v2 .container{width:min(1328px,calc(100% - 112px));margin-inline:auto}
.v2 .section{padding:128px 0}
.v2 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v2 .skip{position:fixed;top:10px;left:10px;z-index:99;padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;transform:translateY(-160%);transition:transform .2s}
.v2 .skip:focus{transform:none}
.v2 :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.v2 .kicker{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin:0 0 22px;word-spacing:.2em}

/* Aplat fluo : grain, halo, liseré clair et reflet de lumière qui traverse (déclenché à l'apparition). */
.fluo-surface,.hl::before{background-color:var(--fluo);background-image:var(--shine),var(--grain);background-size:260% 100%,160px 160px;background-position:130% 0,0 0;background-repeat:no-repeat,repeat;box-shadow:var(--halo),inset 0 2px 0 rgb(255 255 255/.72)}
.hl{position:relative;z-index:0;display:inline-block;padding:.02em .17em .1em;margin:0 -.03em;color:var(--ink);white-space:nowrap}
.hl.fluo-surface{background:none;box-shadow:none}
.hl::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:.13em;rotate:-1.6deg;transform-origin:left center}
.has-motion .is-in .fluo-surface,.has-motion .fluo-surface.is-in,.has-motion .is-in.hl::before,.has-motion .is-in .hl::before{animation:fluo-shine 6.5s ease-in-out .9s infinite}
@keyframes fluo-shine{0%{background-position:130% 0,0 0}14%,100%{background-position:-30% 0,0 0}}
.has-motion [data-anim] .hl::before,.has-motion .hl[data-anim]::before{scale:.18 1;transition:scale .75s cubic-bezier(.34,1.56,.64,1) .25s}
.has-motion [data-anim].is-in .hl::before,.has-motion .hl[data-anim].is-in::before{scale:1 1}

/* Entrées : montée + fondu, décalées. */
.has-motion [data-anim]{opacity:0;translate:0 44px;transition:opacity .6s ease,translate .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*140ms)}
.has-motion [data-anim].is-in{opacity:1;translate:0 0}
/* Hero : déplacement seul, jamais d'opacité nulle, pour ne pas retarder le LCP. */
.has-motion [data-anim=rise]{opacity:1;translate:0 26px}
.band-video{opacity:0;transition:opacity .8s ease}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.07}}

/* Boutons pilule : encre + rond fléché fluo, fluo + rond encre, contour. La flèche tourne au survol. */
.v2 .pill{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:6px 6px 6px 24px;border:0;border-radius:999px;font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.1;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:transform .25s ease,background-color .25s}
.v2 .pill:hover{transform:translateY(-2px)}
.v2 .pill-arrow{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v2 .pill-arrow svg{width:18px;height:18px}
.v2 .pill:hover .pill-arrow{transform:rotate(45deg)}
.v2 .pill-ink{background:var(--ink);color:#fff}
.v2 .pill-ink .pill-arrow{background-color:var(--fluo);background-image:var(--grain);color:var(--ink);box-shadow:0 0 12px rgb(247 255 60/.55)}
.v2 .pill-fluo{color:var(--ink)}
.v2 .pill-fluo .pill-arrow{background:var(--ink);color:#fff}
.v2 .pill-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgb(14 14 12/.8)}
.v2 .pill-line .pill-arrow{background:var(--ink);color:#fff}
.v2 .pill-block{width:100%;justify-content:center;gap:8px;padding:0 20px;min-height:56px}
.v2 .pill-block .pill-arrow{width:auto;height:auto;background:none!important;box-shadow:none!important;color:inherit}
.v2 .pill-block .pill-arrow svg{width:16px;height:16px}

/* En-tête */
.v2 .site-header{position:sticky;top:0;z-index:40;background:rgb(247 247 244/.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0;box-shadow:none}
.v2 .site-header .nav{display:flex;align-items:center;gap:28px;width:min(1328px,calc(100% - 112px));min-height:96px;margin:0 auto;padding:0;flex-wrap:nowrap}
.v2 .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.035em}
.v2 .brand img{width:34px;height:34px;display:block}
.v2 .brand span{font-size:21px}
.v2 .site-header #navigation{display:flex;align-items:center;gap:36px;margin:0 auto;padding:0;position:static;background:none;box-shadow:none;border:0;flex-direction:row;width:auto;opacity:1;visibility:visible;transform:none}
.v2 .site-header .nav-page-link{position:relative;display:inline;padding:4px 0;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0;background:none;border:0}
.v2 .site-header .nav-page-link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--fluo);box-shadow:0 0 8px rgb(247 255 60/.8);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.v2 .site-header .nav-page-link:hover::after,.v2 .site-header .nav-page-link[aria-current=page]::after{transform:scaleX(1)}
.v2 .site-header .nav-cta{margin-left:0}
.v2 .site-header .menu-toggle,.v2 .site-header .mobile-menu-footer{display:none}
@media(max-width:980px){
 .v2 .site-header .nav{width:calc(100% - 40px);min-height:76px;gap:14px}
 .v2 .site-header .menu-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;font:600 15px var(--sans);color:var(--ink)}
 .v2 .menu-icon{width:16px;height:10px;border-block:2px solid currentColor}
 .v2 .site-header .nav-cta{display:none}
 .v2 .site-header #navigation{position:absolute;top:calc(100% - 4px);left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:14px;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgb(14 14 12/.16)}
 .v2 .site-header #navigation.open{display:flex}
 .v2 .site-header .nav-page-link{display:block;padding:14px 12px;font-size:20px;font-family:var(--display);font-weight:600}
 .v2 .site-header .nav-page-link::after{display:none}
 .v2 .site-header .mobile-menu-footer{display:block;padding:8px 4px 4px}
 .v2 .site-header .mobile-menu-footer .pill{width:100%}
}

/* Hero (Figma nœud 37:3) : titre à mot tournant, reel central, photos inclinées, pastilles du mois. */
.hero3{position:relative;overflow:hidden;padding:30px 0 70px}
.hero3-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:24px;align-items:center;min-height:min(760px,calc(100svh - 96px))}
.hero3-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:8px 14px 8px 12px;border:1px solid rgb(14 14 12/.12);border-radius:999px;background:#fff;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.hero3-kicker i{width:8px;height:8px;border-radius:50%;background:var(--fluo);box-shadow:0 0 0 0 rgb(247 255 60/.9),0 0 8px rgb(247 255 60)}
.has-motion .hero3-kicker i{animation:dot-pulse 2s ease-out infinite}
@keyframes dot-pulse{0%{box-shadow:0 0 0 0 rgb(247 255 60/.9),0 0 8px rgb(247 255 60)}70%{box-shadow:0 0 0 10px rgb(247 255 60/0),0 0 8px rgb(247 255 60)}100%{box-shadow:0 0 0 0 rgb(247 255 60/0),0 0 8px rgb(247 255 60)}}
.hero3-title{font-size:clamp(60px,7.6vw,112px);line-height:.94;letter-spacing:-.065em}
.hero3-line{white-space:nowrap}
.hero3-line{display:block}
.hero3-word{position:relative;display:inline-block;vertical-align:top;width:var(--word-w,auto);height:1.02em;margin-left:.08em;transition:width .55s cubic-bezier(.34,1.56,.64,1)}
.hero3-hl{position:absolute;inset:.04em -.14em -.02em;z-index:-1;border-radius:.12em;rotate:1.6deg;transform-origin:left center}
.has-motion .hero3-hl{animation:hl-in .9s cubic-bezier(.34,1.56,.64,1) .35s both,fluo-shine 6.5s ease-in-out 1.4s infinite}
@keyframes hl-in{from{scale:.1 1}to{scale:1 1}}
.hero3-word b{position:absolute;left:0;top:0;font-weight:800;white-space:nowrap;opacity:0;translate:0 .35em;transition:opacity .35s ease,translate .5s cubic-bezier(.22,1,.36,1)}
.hero3-word b.is-on{opacity:1;translate:0 0}
.hero3-word b.is-off{opacity:0;translate:0 -.3em}
.hero3-title{position:relative;z-index:0;isolation:isolate}
.hero3-lead{max-width:560px;margin:34px 0 0;font-size:20px;line-height:1.45;color:var(--text-2)}
.hero3-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hero3-proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:52px}
.hero3-proof p{flex-basis:100%;margin:0 0 4px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.hero3-proof span{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em;opacity:.78}
/* Scène */
.hero3-stage{position:relative;height:min(700px,calc(100svh - 130px));min-height:560px}
.hero3-glow{position:absolute;left:12%;top:20%;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(247 255 60/.55),rgb(247 255 60/0));filter:blur(20px)}
.has-motion .hero3-glow{animation:glow-breathe 7s ease-in-out infinite}
@keyframes glow-breathe{50%{scale:1.12}}
.hero3-reel{position:absolute;left:50%;top:50%;width:min(300px,50%);aspect-ratio:9/16;margin:0;translate:-50% -50%;overflow:hidden;border-radius:32px;background:#1b1b18;box-shadow:0 30px 60px rgb(0 0 0/.3),0 0 40px rgb(247 255 60/.35)}
.hero3-reel .hero3-poster,.hero3-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero3-reel.is-playing video{opacity:1}
.hero3-segments{position:absolute;z-index:2;left:16px;right:16px;top:16px;display:flex;gap:6px}
.hero3-segments i{position:relative;flex:1;height:3px;border-radius:2px;background:rgb(255 255 255/.35);overflow:hidden}
.hero3-segments i::after{content:'';position:absolute;inset:0;background:var(--fluo);transform-origin:left;transform:scaleX(0)}
.has-motion .hero3-segments i::after{animation:seg 9s linear infinite}
.hero3-segments i:nth-child(2)::after{animation-delay:3s}.hero3-segments i:nth-child(3)::after{animation-delay:6s}
@keyframes seg{0%{transform:scaleX(0)}33.3%,100%{transform:scaleX(1)}}
.hero3-reel .media-format.is-top{top:32px;left:16px}
.hero3-sound{position:absolute;z-index:3;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;color:var(--ink);cursor:pointer}
.hero3-sound svg{width:20px;height:20px}
.hero3-reel.has-sound .hero3-sound{opacity:0;pointer-events:none}
.hero3-photo{position:absolute;margin:0;overflow:hidden;border:4px solid #fff;border-radius:24px;background:#ddd;box-shadow:0 24px 50px rgb(0 0 0/.2)}
.hero3-photo img{width:100%;height:100%;object-fit:cover}
.hero3-photo.is-a{left:-4%;top:40%;width:40%;aspect-ratio:3/4;rotate:-11deg}
.hero3-photo.is-b{right:0;top:8%;width:36%;aspect-ratio:3/4.3;rotate:9deg}
.hero3-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:9px;padding:11px 16px 11px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px rgb(0 0 0/.18)}
.hero3-chip i{width:9px;height:9px;border-radius:50%}
/* Pastille « Octobre · plus que N places », à côté du libellé du hero. */
.hero3-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px}
.hero3-badges .hero3-kicker{margin:0}
.hero3-slots{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 13px 5px 12px;border-radius:999px;background:var(--ink);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 14px 30px rgb(0 0 0/.18);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.v2 .hero3-slots{color:#fff}
.hero3-slots:hover{transform:translateY(-2px)}
.slots-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.has-motion .slots-dot{animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgb(51 191 26/.7)}70%{box-shadow:0 0 0 7px rgb(51 191 26/0)}100%{box-shadow:0 0 0 0 rgb(51 191 26/0)}}
.slots-num{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;color:var(--ink);font-family:var(--display);font-weight:800;font-size:14px;rotate:-5deg}
.hero3-slots svg{width:11px;height:11px;margin-left:2px;color:var(--fluo)}
.has-motion .hero3-slots{animation:chip-pop .55s cubic-bezier(.34,1.56,.64,1) .5s both}
.has-motion .slots-num{animation:num-pop .7s cubic-bezier(.34,1.56,.64,1) .9s both,fluo-shine 6.5s ease-in-out 2.4s infinite}
@keyframes num-pop{from{scale:.4;rotate:-25deg}to{scale:1;rotate:-5deg}}
.hero3-chip.is-delivery{right:-4px;top:66%;color:var(--ink)}
.hero3-chip.is-delivery i{background:var(--ink)}
.hero3-chip.is-post{left:8%;bottom:6%;background:#fff;color:var(--ink)}
.hero3-chip.is-post i{background:var(--green)}
/* Entrées de la scène puis flottement léger. */
.has-motion .hero3-reel{animation:reel-in 1s cubic-bezier(.34,1.56,.64,1) .3s both,float-a 7s ease-in-out 1.4s infinite}
@keyframes reel-in{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@keyframes float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.has-motion .hero3-photo.is-a{animation:photo-a .9s cubic-bezier(.34,1.56,.64,1) .5s both,float-b 7.5s ease-in-out 1.5s infinite}
.has-motion .hero3-photo.is-b{animation:photo-b .9s cubic-bezier(.34,1.56,.64,1) .6s both,float-a 6.5s ease-in-out 1.6s infinite}
@keyframes photo-a{from{opacity:0;rotate:-25deg;translate:60px 0}to{opacity:1;rotate:-11deg;translate:0 0}}
@keyframes photo-b{from{opacity:0;rotate:22deg;translate:-60px 0}to{opacity:1;rotate:9deg;translate:0 0}}
@keyframes float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.has-motion .hero3-chip{animation:chip-pop .55s cubic-bezier(.34,1.56,.64,1) both}
.has-motion .hero3-chip.is-delivery{animation-delay:2.2s}.has-motion .hero3-chip.is-post{animation-delay:3s}
@keyframes chip-pop{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@media(max-width:1100px){.hero3-grid{grid-template-columns:1fr;min-height:0}.hero3-stage{height:560px;min-height:0;max-width:560px;width:100%;margin:10px auto 0}}
@media(max-width:760px){
 .hero3{padding:18px 0 56px}
 .hero3-title{font-size:clamp(50px,14.5vw,68px)}
 .hero3-line{white-space:normal}
 .hero3-word{display:block;margin-left:0;margin-top:.06em}
 .hero3-lead{font-size:18px;margin-top:26px}
 .hero3-proof{margin-top:36px}.hero3-proof span{font-size:18px}
 .hero3-stage{height:470px;margin-top:22px}
 .hero3-reel{width:220px}
 .hero3-photo.is-a{width:42%}.hero3-photo.is-b{width:38%}
 .hero3-chip{font-size:12px;padding:9px 12px}
 .hero3-badges{gap:8px}.hero3-slots{font-size:12px;min-height:33px;padding:4px 11px 4px 10px}.slots-num{min-width:21px;height:21px;font-size:13px}
 .hero3-chip.is-delivery{right:0}
}
@media(prefers-reduced-motion:reduce){.hero3 *{animation:none!important}.hero3-word{transition:none}}

/* En-têtes de section */
.section-head{display:grid;gap:18px;margin-bottom:56px}
.section-head h2{font-size:clamp(44px,6vw,84px)}
.section-head p:not(.kicker){margin:0;font-size:18px;line-height:1.5;color:var(--text-2);max-width:380px}
.section-head.is-centered{justify-items:center;text-align:center}
.section-head.is-centered p:not(.kicker){max-width:620px}
.section-head.is-split{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:end;gap:40px}
.section-head.is-split h2{font-size:clamp(44px,5.3vw,78px)}
.section-head .kicker{margin-bottom:18px}

/* ( 01 ) Ce que vous recevez : 5 mini-interfaces animées (jouées quand la carte est visible). */
.receive-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.receive-card{grid-column:span 4;display:flex;flex-direction:column;padding:14px 14px 30px;border-radius:30px;background:#fff}
.receive-tournage{grid-column:span 5}
.receive-livraison{grid-column:span 7}
.receive-scene{position:relative;height:300px;overflow:hidden;border-radius:20px;background:var(--grey)}
.receive-card.is-soft .receive-scene{background:#FBFCDD}
.receive-card h3{display:flex;align-items:center;gap:8px;margin:24px 14px 10px;font-size:28px}
.receive-card h3 span{display:inline-grid;color:var(--text-3)}
.receive-card h3 svg{width:18px;height:18px}
.receive-card>p{margin:0 14px;font-size:16px;line-height:1.5;color:var(--text-2)}
.receive-card>p strong{color:var(--ink);font-weight:600}
.receive-scene *{animation-play-state:paused!important}
.receive-card.is-in .receive-scene *{animation-play-state:running!important}
.ui-mono{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ui-cursor{position:absolute;z-index:6;width:22px;height:22px;filter:drop-shadow(0 3px 6px rgb(0 0 0/.25))}
.ui-check{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background-color:var(--fluo);background-image:var(--grain);color:var(--ink)}
.ui-check svg{width:12px;height:12px}
/* Tournage : viseur, REC, mise au point, niveaux audio. */
.ui-viewfinder{position:absolute;inset:0;padding:18px;background:#141412}
.ui-viewfinder-img{width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:.9}
.ui-rec,.ui-timecode,.ui-spec{position:absolute;font-family:var(--mono);font-size:11px;color:#fff;letter-spacing:.06em}
.ui-rec{left:36px;top:34px;display:flex;align-items:center;gap:6px}
.ui-rec i{width:8px;height:8px;border-radius:50%;background:#ff4b3e;animation:rec-blink 1s steps(2,jump-none) infinite}
@keyframes rec-blink{50%{opacity:.15}}
.ui-timecode{right:36px;top:34px;font-variant-numeric:tabular-nums}
.ui-focus{position:absolute;left:50%;top:50%;width:132px;height:92px;margin:-46px 0 0 -66px;animation:focus-lock 3.2s cubic-bezier(.22,1,.36,1) infinite}
.ui-focus i{position:absolute;width:18px;height:18px;border:2px solid var(--fluo);filter:drop-shadow(0 0 4px rgb(247 255 60/.7))}
.ui-focus i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}.ui-focus i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}.ui-focus i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}.ui-focus i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
@keyframes focus-lock{0%{scale:1.35;opacity:.5}35%{scale:1;opacity:1}45%{scale:1.05}55%,100%{scale:1}}
.ui-levels{position:absolute;left:36px;bottom:34px;display:flex;align-items:flex-end;gap:4px;height:26px}
.ui-levels i{width:4px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;animation:level 1.1s ease-in-out infinite alternate}
.ui-levels i:nth-child(3n){background:var(--fluo)}
.ui-levels i:nth-child(2){animation-delay:-.3s}.ui-levels i:nth-child(3){animation-delay:-.7s}.ui-levels i:nth-child(4){animation-delay:-.2s}.ui-levels i:nth-child(5){animation-delay:-.9s}.ui-levels i:nth-child(6){animation-delay:-.5s}.ui-levels i:nth-child(7){animation-delay:-.1s}.ui-levels i:nth-child(8){animation-delay:-.6s}.ui-levels i:nth-child(9){animation-delay:-.4s}
@keyframes level{0%{scale:1 .25}100%{scale:1 1}}
.ui-spec{right:36px;bottom:32px;padding:6px 10px;border-radius:999px;background:#fff;color:var(--ink)}
/* Livraison : espace client Vision Claire (boucle de 10 s, pointeur piloté par des cibles mesurées en JS). */
.receive-tournage .receive-scene,.receive-livraison .receive-scene{height:368px}
.app{position:absolute;inset:18px 18px 0;display:flex;flex-direction:column;overflow:hidden;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 18px 40px rgb(14 14 12/.12);font-size:12px;--dur:10s}
.app-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #efefe9}
.app-logo{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.03em}
.app-bar-label{padding:3px 8px;border-radius:999px;background:var(--grey);font:500 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.app-bell{position:relative;margin-left:auto;width:18px;height:18px;color:var(--ink)}
.app-bell svg{width:18px;height:18px}
.app-bell i{position:absolute;top:-4px;right:-5px;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background-color:var(--fluo);font:700 8px var(--sans);font-style:normal;color:var(--ink);box-shadow:0 0 8px rgb(247 255 60/.9);animation:app-bell var(--dur) ease infinite both}
@keyframes app-bell{0%,3%{scale:0}7%,94%{scale:1}100%{scale:0}}
.app-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:600 9px var(--sans)}
.app-body{flex:1;display:grid;grid-template-columns:118px 1fr;min-height:0}
.app-side{display:flex;flex-direction:column;gap:2px;padding:12px 8px;border-right:1px solid #efefe9;background:#fbfbf8}
.app-side span{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:8px;font-size:11px;color:var(--text-2)}
.app-side span.is-active{background:var(--ink);color:#fff;font-weight:600}
.app-side b{display:grid;place-items:center;min-width:15px;height:15px;border-radius:8px;background-color:var(--fluo);color:var(--ink);font-size:9px}
.app-main{display:flex;flex-direction:column;gap:10px;padding:12px 16px 0;min-width:0}
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.app-head strong{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.03em}
.app-head em{font-style:normal;font-size:10px;color:var(--text-3)}
.app-status{position:relative;flex:none;height:22px;min-width:92px}
.app-status span{position:absolute;right:0;top:0;padding:4px 9px;border-radius:999px;font:500 10px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.app-status .s-1{background-color:var(--fluo);background-image:var(--grain);color:var(--ink);animation:swap-out var(--dur) ease infinite both}
.app-status .s-2{background:#e8f7e3;color:#1f7a0e;animation:swap-in var(--dur) ease infinite both}
@keyframes swap-out{0%,79%{opacity:1}82%,97%{opacity:0}100%{opacity:1}}
@keyframes swap-in{0%,79%{opacity:0;scale:.8}83%,96%{opacity:1;scale:1}100%{opacity:0}}
.app-msg{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:#f4f4ef;animation:app-fade var(--dur) ease infinite both}
.app-msg img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.app-msg p{margin:0;font-size:11px;line-height:1.35;color:var(--text-2)}
.app-msg b{color:var(--ink);margin-right:4px}
@keyframes app-fade{0%,4%{opacity:0;translate:0 6px}9%,95%{opacity:1;translate:0 0}100%{opacity:0}}
.app-files{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.app-file{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:var(--grey);animation:app-file var(--dur) cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:calc(var(--i)*.12s)}
.app-file img{width:100%;height:100%;object-fit:cover}
.app-file em{position:absolute;left:4px;top:4px;padding:1px 4px;border-radius:4px;background:#fff;font:500 7px var(--mono);font-style:normal;text-transform:uppercase}
.app-file b{position:absolute;right:4px;bottom:4px;padding:1px 4px;border-radius:4px;background:rgb(14 14 12/.75);color:#fff;font:500 7px var(--mono)}
.app-more{display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;color:var(--text-2)}
@keyframes app-file{0%,6%{opacity:0;scale:.7}12%,94%{opacity:1;scale:1}100%{opacity:0}}
.app-file.is-commented{animation-name:app-file,app-ring}
@keyframes app-ring{0%,49%{box-shadow:0 0 0 0 rgb(247 255 60/0)}52%,76%{box-shadow:0 0 0 3px var(--fluo),0 0 14px rgb(247 255 60/.7)}80%,100%{box-shadow:0 0 0 0 rgb(247 255 60/0)}}
.app-pin{position:absolute;left:50%;bottom:6px;translate:-50% 0;padding:1px 5px;border-radius:999px;background-color:var(--fluo);font:600 7px var(--mono);font-style:normal;color:var(--ink);animation:pin var(--dur) cubic-bezier(.34,1.56,.64,1) infinite both}
.app-actions{display:flex;flex-wrap:wrap;gap:6px}
.app-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.app-btn svg{width:12px;height:12px}
.app-btn.is-dl{color:var(--ink);animation:press-a var(--dur) ease infinite both}
.app-btn.is-line{box-shadow:inset 0 0 0 1px rgb(14 14 12/.3)}
.app-btn.is-ink{background:var(--ink);color:#fff;animation:press-c var(--dur) ease infinite both,validate var(--dur) ease infinite both}
.app-btn .v-2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:inherit;background:#1f7a0e;color:#fff;opacity:0;animation:swap-in var(--dur) ease infinite both}
.app-btn .v-2 svg{width:11px;height:11px}
.app-progress{display:flex;align-items:center;gap:10px;height:18px;font-size:10px;color:var(--text-2);position:relative}
.app-bar-track{position:relative;flex:1;max-width:160px;height:4px;border-radius:2px;background:#efefe9;overflow:hidden}
.app-bar-track i{position:absolute;inset:0;background:var(--fluo);box-shadow:0 0 6px rgb(247 255 60/.9);transform-origin:left;animation:dl var(--dur) ease-in-out infinite both}
.app-progress .p-1,.app-progress .p-2{position:absolute;left:170px;white-space:nowrap}
.app-progress .p-1{animation:p1 var(--dur) ease infinite both}
.app-progress .p-2{display:flex;align-items:center;gap:4px;color:#1f7a0e;font-weight:600;animation:p2 var(--dur) ease infinite both}
.app-progress .p-2 svg{width:11px;height:11px}
@keyframes p1{0%,24%{opacity:0}27%,41%{opacity:1}44%,100%{opacity:0}}
@keyframes p2{0%,42%{opacity:0}45%,95%{opacity:1}100%{opacity:0}}
.app-toast{position:absolute;right:12px;top:46px;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 12px 28px rgb(14 14 12/.3);animation:toast var(--dur) cubic-bezier(.22,1,.36,1) infinite both}
.app-toast strong{display:block;font-size:11px}.app-toast em{font-style:normal;font-size:9px;color:#a9a9a2}
@keyframes toast{0%{opacity:0;translate:40px 0}5%,18%{opacity:1;translate:0 0}22%,100%{opacity:0;translate:40px 0}}
.app-comment{position:absolute;z-index:5;left:var(--c2x,50%);top:calc(var(--c2y,50%) + 26px);width:170px;padding:9px 11px;border-radius:12px;background:#fff;box-shadow:0 14px 30px rgb(14 14 12/.2),0 0 0 1px rgb(14 14 12/.06);font-size:11px;line-height:1.35;animation:comment var(--dur) cubic-bezier(.34,1.56,.64,1) infinite both}
.app-comment-head{display:flex;justify-content:space-between;margin-bottom:3px;font-size:10px}
.app-comment-head i{font:500 9px var(--mono);font-style:normal;padding:1px 5px;border-radius:999px;background-color:var(--fluo)}
.app-comment em{display:flex;align-items:center;gap:4px;margin-top:5px;font-style:normal;font-size:9px;font-weight:600;color:#1f7a0e;animation:p-sent var(--dur) ease infinite both}
.app-comment em svg{width:10px;height:10px}
@keyframes comment{0%,52%{opacity:0;scale:.6;translate:-20% -10px}56%,72%{opacity:1;scale:1;translate:-20% 0}76%,100%{opacity:0;scale:.9;translate:-20% 0}}
@keyframes p-sent{0%,63%{opacity:0}66%,100%{opacity:1}}
.receive-livraison .app .ui-cursor{left:0;top:0;animation:app-cursor var(--dur) cubic-bezier(.45,0,.2,1) infinite both}
@keyframes app-cursor{
 0%,10%{opacity:0;translate:calc(var(--c1x,60%) + 90px) calc(var(--c1y,70%) + 60px)}
 13%{opacity:1}
 21%,27%{translate:var(--c1x,60%) var(--c1y,70%);scale:1}
 24%{scale:.82}
 45%,52%{translate:var(--c2x,40%) var(--c2y,50%);scale:1}
 50%{scale:.82}
 74%,80%{translate:var(--c3x,80%) var(--c3y,80%);scale:1}
 78%{scale:.82}
 92%{opacity:1}
 97%,100%{opacity:0;translate:var(--c3x,80%) var(--c3y,80%)}}
@media(max-width:760px){.receive-tournage .receive-scene,.receive-livraison .receive-scene{height:320px}.app{inset:12px 12px 0}.app-body{grid-template-columns:1fr}.app-side,.app-bar-label,.app-msg{display:none}.app-files{grid-template-columns:repeat(5,1fr)}.app-file:nth-child(n+5):not(.app-more){display:none}.app-btn.is-line{display:none}.app-progress .p-1,.app-progress .p-2{left:112px}.app-bar-track{max-width:100px}.app-comment{width:150px}}
@media(prefers-reduced-motion:reduce){.app *{animation:none!important}.app-toast,.app-comment,.receive-livraison .app .ui-cursor,.app-status .s-2,.app-btn .v-2,.app-progress .p-1{opacity:0}.app-progress .p-2{opacity:1}}

/* Calendrier éditorial : pastilles qui s'ajoutent, pastille glissée au curseur. */
.ui-cal{position:absolute;left:24px;right:24px;top:28px;padding:14px 14px 12px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgb(14 14 12/.08)}
.ui-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ui-cal-head strong{font-family:var(--display);font-weight:600;font-size:15px}
.ui-cal-head span{color:var(--text-3);font-size:12px}
.ui-cal-week,.ui-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ui-cal-week span{font:500 8px var(--mono);color:var(--text-3);padding-left:4px}
.ui-day{position:relative;height:50px;padding:4px;border-radius:6px;background:#f4f4ef}
.ui-day em{display:block;font:500 7px var(--mono);font-style:normal;color:var(--text-3)}
.ui-pill{position:absolute;left:4px;right:4px;bottom:5px;padding:3px 0;border-radius:999px;background-color:var(--fluo);background-image:var(--grain);font:500 7px var(--mono);text-align:center;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);animation:pill-in 7s cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:calc(var(--i)*.09s)}
.ui-pill.is-ink{background:var(--ink);color:#fff}
.ui-pill.is-line{background:#fff;box-shadow:inset 0 0 0 1px rgb(14 14 12/.3)}
@keyframes pill-in{0%,6%{opacity:0;scale:.4}14%,92%{opacity:1;scale:1}100%{opacity:0}}
.ui-pill-drag{animation:pill-drag 7s cubic-bezier(.45,0,.2,1) infinite both;box-shadow:0 6px 14px rgb(14 14 12/.2);rotate:6deg}
@keyframes pill-drag{0%,48%{opacity:0;translate:90px -40px}54%{opacity:1;translate:90px -40px}72%,92%{opacity:1;translate:0 0;rotate:0deg}100%{opacity:0}}
.receive-calendrier .ui-cursor{left:calc(24px + 6/7*(100% - 48px) - 30px);top:118px;animation:cursor-drag 7s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes cursor-drag{0%,48%{opacity:0;translate:100px -30px}54%{opacity:1;translate:100px -30px}72%,86%{opacity:1;translate:10px 10px}92%,100%{opacity:0}}
/* Publication : téléphone qui se remplit et planning de la semaine. */
.ui-phone{position:absolute;left:28px;top:26px;width:150px;height:300px;padding:10px 6px;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 0 0 6px var(--ink),0 18px 40px rgb(14 14 12/.2)}
.ui-phone-head{display:flex;align-items:center;gap:8px;margin:4px 4px 10px;font-size:9px}
.ui-phone-head strong{display:block;font-size:10px}.ui-phone-head em{font-style:normal;color:var(--text-3)}
.ui-avatar{width:22px;height:22px;border-radius:50%}
.ui-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ui-grid span{aspect-ratio:3/4;overflow:hidden;background:var(--grey);animation:post-in 7s ease infinite both;animation-delay:calc(var(--i)*.22s)}
.ui-grid img{width:100%;height:100%;object-fit:cover}
@keyframes post-in{0%{opacity:0;scale:.7}8%,92%{opacity:1;scale:1}100%{opacity:0}}
.ui-schedule{position:absolute;right:24px;top:62px;width:48%;padding:14px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgb(14 14 12/.1);font-size:11px}
.ui-schedule>strong{display:block;margin-bottom:8px;font-family:var(--display);font-weight:600;font-size:14px}
.ui-schedule span{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;margin-top:6px;border-radius:9px;background:#f4f4ef}
.ui-schedule em{font-style:normal}
.ui-schedule b{padding:3px 8px;border-radius:999px;background-color:var(--fluo);background-image:var(--grain);font-size:9px;font-weight:600;animation:status 7s ease infinite both}
.ui-schedule span:nth-child(3) b{animation-delay:.4s}.ui-schedule span:nth-child(4) b{animation-delay:.8s}
.ui-schedule b.is-live{background:#e8f7e3;color:#1f7a0e}
.ui-schedule b.is-live::before{content:'';display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green);vertical-align:1px}
@keyframes status{0%,30%{opacity:0;translate:0 6px}38%,92%{opacity:1;translate:0 0}100%{opacity:0}}
/* Point mensuel : bilan qui se coche, prochain tournage. */
.ui-report{position:absolute;left:30px;right:30px;top:44px;padding:18px 18px 16px;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgb(14 14 12/.1)}
.ui-report-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ui-report-head strong{font-family:var(--display);font-weight:600;font-size:15px}
.ui-report ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.ui-report li{display:flex;align-items:center;gap:10px;font-size:12px;animation:tick 7s ease infinite both;animation-delay:calc(var(--i)*.45s)}
@keyframes tick{0%,10%{opacity:.25}18%,92%{opacity:1}100%{opacity:.25}}
.ui-report li .ui-check{animation:tick-mark 7s cubic-bezier(.34,1.56,.64,1) infinite both;animation-delay:calc(var(--i)*.45s)}
@keyframes tick-mark{0%,10%{scale:0}18%,92%{scale:1}100%{scale:0}}
.ui-next{display:flex;gap:12px;align-items:center;margin:0;padding:10px 12px;border-radius:9px;background:var(--ink);color:#bdbdb5;font-size:11px}
.ui-next strong{color:#fff}

/* ( 02 ) Formules */
.formula-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.formula-card{display:flex;flex-direction:column;padding:34px 32px 32px;border-radius:30px;background:#fff}
.formula-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.formula-card h3{font-size:30px}
.formula-badge{padding:6px 12px;border-radius:999px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.formula-price{display:flex;align-items:baseline;gap:10px;margin:34px 0 22px}
.formula-price strong{font-family:var(--display);font-weight:800;font-size:clamp(50px,4.4vw,66px);letter-spacing:-.06em;line-height:1}
.formula-price span{font-size:14px;color:var(--text-3)}
.formula-pitch{margin:0 0 26px;padding-bottom:26px;border-bottom:1px solid var(--line);font-size:16px;color:var(--text-2)}
.formula-card ul{list-style:none;display:grid;gap:12px;margin:0 0 36px;padding:0;flex:1;align-content:start}
.formula-card li{display:flex;align-items:center;gap:12px;font-size:16px}
.formula-check{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--grey);color:var(--ink)}
.formula-check svg{width:13px;height:13px}
.formula-card.is-recommended{background:var(--ink);color:#fff}
.formula-card.is-recommended .formula-price span,.formula-card.is-recommended .formula-pitch{color:#a7a79f}
.formula-card.is-recommended .formula-pitch{border-color:rgb(255 255 255/.14)}
.has-motion .formula-card.is-recommended.is-in{scale:1.02}
.offer-extra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.offer-extra{display:grid;gap:8px;padding:24px 24px 26px;border-radius:22px;background:var(--grey);text-decoration:none;transition:background .25s,transform .25s}
.offer-extra:hover{background:#e0e0d9;transform:translateY(-2px)}
.offer-extra strong{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em}
.offer-extra span{font-size:15px;color:var(--text-2);line-height:1.45}
.offer-footnote{margin:40px 0 0;font-family:var(--mono);font-size:12px;color:var(--text-3);letter-spacing:.02em}

/* Formules v2 (Figma nœud 39:3) : volume du mois, compteurs, bascule d'engagement. */
.offers2-side{display:grid;gap:18px;justify-items:start}
.offers2-side p{margin:0;font-size:17px;line-height:1.5;color:var(--text-2)}
.engagement{position:relative;display:inline-grid;grid-template-columns:auto auto;padding:5px;border:1px solid rgb(14 14 12/.12);border-radius:999px;background:#fff}
.engagement button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:none;font:600 14px var(--sans);color:var(--text-2);cursor:pointer;transition:color .3s ease}
.engagement button[aria-pressed=true]{color:#fff}
.engagement button b{padding:3px 7px;border-radius:999px;font:500 11px var(--mono);color:var(--ink)}
.engagement-knob{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:var(--kw,160px);border-radius:999px;background:var(--ink);transform:translateX(var(--kx,0));transition:transform .45s cubic-bezier(.65,0,.2,1),width .45s cubic-bezier(.65,0,.2,1)}
.formula-card{position:relative}
.formula-month{margin:22px 0 0;padding:14px 16px 16px;border-radius:20px;background:#f4f4ef}
.formula-card.is-recommended .formula-month{background:#1c1c19}
.formula-month p{margin:0 0 10px;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.formula-card.is-recommended .formula-month p{color:#8f8f87}
.formula-tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.formula-tiles span{aspect-ratio:9/16;border-radius:6px;border:1px dashed rgb(14 14 12/.18);overflow:hidden}
.formula-card.is-recommended .formula-tiles span{border-color:rgb(255 255 255/.16)}
.formula-tiles span.is-full{border:0;box-shadow:0 3px 8px rgb(14 14 12/.14)}
.formula-card.is-recommended .formula-tiles span.is-full{box-shadow:0 0 0 1.5px var(--fluo),0 0 10px rgb(247 255 60/.35)}
.formula-tiles img{width:100%;height:100%;object-fit:cover}
.has-motion .formula-card .formula-tiles span.is-full{opacity:0;scale:.3;transition:opacity .3s ease,scale .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.35s + var(--i,0)*.15s + var(--k)*70ms)}
.has-motion .formula-card.is-in .formula-tiles span.is-full{opacity:1;scale:1}
.formula-stats{flex:none!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 0!important;padding:0!important;border:0!important;list-style:none}
.formula-stats li{display:grid!important;gap:2px!important;font-size:13px!important;color:var(--text-2)}
.formula-card.is-recommended .formula-stats li{color:#a7a79f}
.formula-stats strong{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.formula-card.is-recommended .formula-stats strong{color:#fff}
.formula-stats li.is-empty strong{color:var(--text-3);opacity:.5}
.formula-card .formula-price{position:relative;margin:24px 0 4px;height:1.05em;font-size:clamp(50px,4.4vw,66px);overflow:visible}
.formula-card .formula-price strong{font-size:1em;display:inline-block}
.formula-price strong.is-leaving{animation:price-out .28s ease-in forwards}
.formula-price strong.is-entering{animation:price-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes price-out{to{opacity:0;translate:0 -.3em}}
@keyframes price-in{from{opacity:0;translate:0 .3em}to{opacity:1;translate:0 0}}
.formula-card .formula-price span{font-size:14px}
.formula-saving{margin:0 0 18px;height:0;overflow:hidden;opacity:0;font:500 12px var(--mono);letter-spacing:.03em;color:var(--ink);transition:height .35s ease,opacity .35s ease}
.formula-card.is-recommended .formula-saving{color:var(--fluo)}
.is-annual .formula-saving{height:18px;opacity:1}
.formula-card .formula-pitch{margin-top:14px}
/* Partenaire : halo fluo qui tourne autour de la carte. */
.formula-card.is-recommended{isolation:isolate}
.formula-card.is-recommended::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:32px;padding:2px;background:conic-gradient(from var(--formula-angle,0deg),rgb(247 255 60/0) 0 55%,rgb(247 255 60/.95) 75%,rgb(247 255 60/0) 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 8px rgb(247 255 60/.8))}
@property --formula-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.has-motion .formula-card.is-recommended.is-in::before{animation:formula-orbit 5s linear infinite}
@keyframes formula-orbit{to{--formula-angle:360deg}}
@media(max-width:760px){.engagement button{padding:0 13px;font-size:13px}.formula-tiles{gap:4px}.formula-stats strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.formula-card.is-recommended::before{animation:none!important}.formula-price strong{animation:none!important}}

/* ( 03 ) Méthode : fond encre, calendrier d'origine sur papier. */
.method{background:var(--ink);color:#fff;overflow-x:clip}
.method .kicker{color:#8f8f87}
.method .section-head p:not(.kicker){color:#a8a8a0}
.method .calendar-stage{position:relative}
.project-calendar{overflow:hidden;border-radius:28px;background:var(--paper);color:var(--ink)}
.calendar-phase{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:0;padding:22px 20px 0;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.calendar-phase span:not(.phase-tag){font-weight:400;color:var(--text-2)}
.phase-tag{padding:4px 10px;border-radius:999px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.calendar-row{position:relative;min-height:230px}
.calendar-row+.calendar-phase{border-top:2px dashed #d8d8d0}
.calendar-days{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));pointer-events:none}
.calendar-day{min-width:0;padding-top:30px;text-align:center}
.calendar-day.has-divider{border-right:2px dashed #d8d8d0}
.calendar-day>span{display:inline-flex;align-items:center;min-height:26px;max-width:calc(100% - 16px);padding:5px 9px;font:500 11px var(--mono);letter-spacing:.05em;line-height:1.2;text-transform:uppercase;color:var(--text-3)}
.calendar-day.is-marked>span{border-radius:7px;background:var(--ink);color:#fff}
.calendar-day.is-delivery{background-color:rgb(247 255 60/.55);background-image:linear-gradient(180deg,rgb(247 247 244/.7),rgb(247 247 244/0)),var(--grain)}
.calendar-events{position:relative;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));align-items:start;margin:0;padding:96px 0 26px;list-style:none}
.calendar-event{grid-column:var(--start)/span var(--span);min-width:0;padding:0 10px}
.calendar-period{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.calendar-ticket{position:relative;display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;min-height:56px;margin:0 auto;padding:11px 10px 11px 12px;border-left:3px solid var(--ink);border-radius:0 12px 12px 0;background:#fff;box-shadow:0 10px 28px rgb(14 14 12/.08);text-align:left}
.calendar-ticket strong{display:block;font-size:16px;font-weight:600;line-height:1.2}
.calendar-ticket>div>span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:var(--text-2)}
.calendar-icon{position:absolute;right:16px;top:-24px;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--fluo);transform:rotate(-12deg);box-shadow:0 6px 14px rgb(14 14 12/.25)}
.calendar-icon svg{width:20px;height:20px}
.calendar-event:nth-child(even) .calendar-icon{transform:rotate(10deg);background-color:var(--fluo);background-image:var(--grain);color:var(--ink);box-shadow:0 0 12px rgb(247 255 60/.7)}
.calendar-icon-figma{right:-4px;top:-48px;width:78px;height:auto;background:none!important;box-shadow:none!important;transform:rotate(-8deg)!important}
.calendar-icon-figma img{display:block;width:100%;height:auto}
.calendar-people{display:flex;flex:none;padding-left:4px}
.calendar-people img{width:26px;height:26px;margin-left:-5px;border:2px solid #fff;border-radius:50%;object-fit:cover}
.calendar-results{position:relative;display:block;width:150px;height:84px;margin:14px auto -24px}
.calendar-results img{position:absolute;left:34px;top:6px;width:84px;height:58px;object-fit:cover;border:2px solid #fff;border-radius:8px;box-shadow:0 8px 18px rgb(14 14 12/.22);transform:translateX(calc((var(--k) - 1)*34px)) rotate(calc((var(--k) - 1)*9deg));transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.calendar-results img:nth-child(2){z-index:1;top:0}
.calendar-sweep{position:absolute;z-index:1;top:0;bottom:0;left:0;width:calc(100% / var(--columns));pointer-events:none;opacity:0;background:linear-gradient(90deg,rgb(247 255 60/0),rgb(247 255 60/.45) 50%,rgb(247 255 60/0))}
.calendar-sweep::after{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;translate:-1px 0;background:var(--ink);box-shadow:0 0 14px rgb(247 255 60/.9)}
.calendar-fx{position:absolute;z-index:2;pointer-events:none;height:auto}
.calendar-fx-charte{top:-70px;right:-48px;width:206px;rotate:-4deg}
.calendar-fx-report{left:-50px;bottom:-60px;width:220px}
.calendar-fx-report img{display:block;width:100%;height:auto}
.calendar-fx-report span{position:absolute;left:20%;top:25%;color:#fff;font-size:13px;font-weight:600}
.method-progress{height:3px;margin:84px 0 0;border-radius:3px;background:#2a2a26;overflow:hidden}
.method-progress span{display:block;height:100%;width:calc(var(--p,1)*100%);border-radius:3px;background:var(--fluo);box-shadow:0 0 12px rgb(247 255 60/.8);transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.method .calendar-note{margin:22px 0 0;font-size:14px;color:#8f8f87}
/* Séquence animée du calendrier. L'état caché s'applique sans transition ; les transitions et délais
   ne jouent qu'à l'apparition (.is-in), sinon un élément à long délai resterait visible au départ. */
.calendar-stage.is-animated .calendar-day.is-marked>span{opacity:0;transform:translateY(8px) scale(.9)}
.calendar-stage.is-animated .calendar-row.is-in .calendar-day.is-marked>span{opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*140ms)}
.calendar-stage.is-animated .calendar-row.has-sweep.is-in .calendar-day.is-marked>span{transition-delay:calc(var(--i)*380ms + 150ms)}
.calendar-stage.is-animated .calendar-ticket{opacity:0;transform:translateY(18px)}
.calendar-stage.is-animated .calendar-row.is-in .calendar-ticket{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*160ms + 250ms)}
.calendar-stage.is-animated .calendar-row.has-sweep.is-in .calendar-ticket{transition-delay:calc(var(--i)*950ms + 150ms)}
.calendar-stage.is-animated .calendar-results img{opacity:0;transform:translateY(18px) rotate(0) scale(.8)}
.calendar-stage.is-animated .calendar-row.is-in .calendar-results img{opacity:1;transform:translateX(calc((var(--k) - 1)*34px)) rotate(calc((var(--k) - 1)*9deg));transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(2.2s + var(--k)*.14s)}
.calendar-stage.is-animated .calendar-day.is-delivery{background-color:rgb(247 255 60/0);background-image:none}
.calendar-stage.is-animated .calendar-row.is-in .calendar-day.is-delivery{background-color:rgb(247 255 60/.55);background-image:linear-gradient(180deg,rgb(247 247 244/.7),rgb(247 247 244/0)),var(--grain);transition:background-color 1s ease 2s}
.calendar-stage.is-animated .calendar-row.is-in .calendar-sweep{animation:calendar-sweep 2.2s cubic-bezier(.45,0,.2,1) .1s both}
@keyframes calendar-sweep{0%{opacity:0;transform:translateX(0)}8%{opacity:1}88%{opacity:1;transform:translateX(calc((var(--columns) - 1)*100%))}100%{opacity:0;transform:translateX(calc((var(--columns) - 1)*100%))}}
.calendar-stage.is-animated .calendar-fx-charte{opacity:0;transform:translate(34px,-24px) rotate(12deg) scale(.9)}
.calendar-stage.is-animated.fx-charte .calendar-fx-charte{opacity:1;transform:none;transition:opacity .7s ease .3s,transform .9s cubic-bezier(.22,1,.36,1) .3s}
.calendar-stage.is-animated .calendar-fx-report{opacity:0;transform:translateY(40px)}
.calendar-stage.is-animated.fx-report .calendar-fx-report{opacity:1;transform:none;transition:opacity .7s ease .4s,transform .9s cubic-bezier(.22,1,.36,1) .4s}
.has-motion .calendar-stage.fx-charte .calendar-fx-charte,.has-motion .calendar-stage.fx-report .calendar-fx-report img{animation:card-bob 6s ease-in-out 1.3s infinite}
.has-motion .calendar-row.is-in .calendar-icon-figma img{animation:shoot-glow 2.6s ease-in-out 1s infinite}
.has-motion .calendar-row.is-in:last-child .calendar-event:last-child .calendar-icon svg{animation:calendar-loop 5s linear 1s infinite}
@keyframes card-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes shoot-glow{0%,100%{filter:drop-shadow(0 0 0 rgb(247 255 60/0))}50%{filter:drop-shadow(0 0 12px rgb(247 255 60/.8))}}
@keyframes calendar-loop{to{rotate:360deg}}
@media(max-width:1000px) and (min-width:761px){.calendar-event{padding-inline:5px}.calendar-ticket{padding:9px 6px;gap:3px}.calendar-ticket strong{font-size:14px}.calendar-people{display:none}.calendar-fx-charte{right:-14px;width:170px}.calendar-fx-report{left:-14px;width:180px}}

/* ( 04 ) Réalisations · table de montage (Figma nœud 36:3). Le défilement pilote la tête de lecture (v2.js). */
.edit-section{padding-bottom:96px}
.edit-section .section-head{margin-bottom:24px}
.edit-scroll{position:relative;height:calc(100vh + var(--n)*52vh)}
.edit-sticky{position:sticky;top:96px;height:calc(100vh - 96px);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:8px 0 20px}
.edit-grid{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:34px;align-items:center}
.edit-count{display:flex;align-items:baseline;gap:6px;margin:0 0 14px;line-height:.8}
.edit-count strong{font-family:var(--display);font-weight:800;font-size:clamp(96px,10vw,150px);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.edit-count span{font-family:var(--display);font-weight:600;font-size:34px;color:var(--text-3);letter-spacing:-.04em}
.edit-sector{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--ink);color:#fff;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.edit-copy h3{margin:16px 0 10px;font-size:clamp(28px,2.8vw,40px);line-height:1.05}
.edit-copy p{margin:0 0 26px;font-size:15px;color:var(--text-2)}
.edit-copy.is-swapping{animation:edit-swap .5s cubic-bezier(.22,1,.36,1)}
.edit-count strong.is-swapping{animation:edit-num .5s cubic-bezier(.22,1,.36,1)}
@keyframes edit-swap{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes edit-num{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.edit-screen{justify-self:end;display:flex;justify-content:center;width:min(100%,calc((100vh - 96px - 260px)*16/9));aspect-ratio:16/9}
/* Le moniteur prend le format du plan : 16:9 pour les films, 9:16 pour les reels (même hauteur, largeur animée). */
.edit-monitor{position:relative;width:100%;height:100%;overflow:hidden;border-radius:24px;background:#0b0b0a;box-shadow:0 30px 70px rgb(14 14 12/.22);transition:width .7s cubic-bezier(.65,0,.2,1),border-radius .7s ease}
.edit-monitor.is-vertical{width:31.64%;border-radius:28px}
.edit-monitor.is-vertical .edit-rec b{display:none}
.edit-monitor.is-vertical .edit-track{top:auto;bottom:16px;right:auto;left:16px}
.edit-plan{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .55s ease}
.edit-plan.is-active{opacity:1}
.edit-plan img,.edit-plan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.edit-plan-video{opacity:0;transition:opacity .6s ease}
.edit-plan.is-playing .edit-plan-video{opacity:1}

.edit-rec{position:absolute;z-index:2;left:20px;top:20px;display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgb(14 14 12/.72);color:#fff;font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.edit-rec b{font-weight:500;font-variant-numeric:tabular-nums}
.edit-rec i{width:8px;height:8px;border-radius:50%;background:#ff4b3e;animation:rec-blink 1s steps(2,jump-none) infinite}
.edit-track{position:absolute;z-index:2;right:20px;top:20px;padding:6px 11px;border-radius:999px;color:var(--ink);font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.edit-corners{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
/* Timeline : règle, deux pistes, clips positionnés par durée, tête de lecture fluo. */
.edit-timeline{position:relative;height:168px;padding:0 16px 0 104px;border-radius:20px;background:#161614;color:#fff}
.edit-ruler{position:absolute;left:104px;right:16px;top:14px;height:22px}
.edit-ruler i{position:absolute;left:calc(var(--i)/24*100%);bottom:0;width:1px;height:5px;background:rgb(255 255 255/.2)}
.edit-ruler i[data-label]{height:11px;background:rgb(255 255 255/.45)}
.edit-ruler i[data-label]::after{content:attr(data-label);position:absolute;left:5px;top:-4px;font:500 10px var(--mono);letter-spacing:.04em;color:#8f8f87;white-space:nowrap}
.edit-label{position:absolute;left:18px;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8f8f87}
.edit-label.is-v1{top:66px}.edit-label.is-v2{top:122px}
.edit-tracks{position:absolute;left:104px;right:16px;top:48px;bottom:12px}
.edit-clip{position:absolute;left:var(--x);width:calc(var(--w) - 4px);height:44px;top:4px;padding:0;overflow:hidden;border:0;border-radius:9px;background:#2a2a26;cursor:pointer;transition:box-shadow .35s ease,filter .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.edit-clip[data-track="2"]{top:60px}
.edit-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;filter:grayscale(.4)}
.edit-clip span{position:absolute;left:9px;right:6px;top:50%;translate:0 -50%;overflow:hidden;font:600 12px var(--sans);color:#fff;text-align:left;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 6px rgb(0 0 0/.7)}
.edit-clip::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(0 0 0/.65),rgb(0 0 0/.05) 70%);pointer-events:none}
.edit-clip span{z-index:2}
.edit-clip:hover{transform:translateY(-2px)}
.edit-clip.is-active{box-shadow:0 0 0 2px var(--fluo),0 0 16px rgb(247 255 60/.65)}
.edit-clip.is-active img{opacity:1;filter:none}
.edit-clip:focus-visible{outline:2px solid var(--fluo);outline-offset:3px}
.edit-playhead{position:absolute;z-index:3;top:-34px;bottom:-4px;left:calc(var(--p,0)*100%);width:2px;margin-left:-1px;background:var(--fluo);box-shadow:0 0 12px rgb(247 255 60/.9);pointer-events:none}
.edit-playhead::before{content:'';position:absolute;left:-6px;top:-2px;width:14px;height:16px;background:var(--fluo);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
.edit-section .works-more{margin-top:40px}
/* Mobile, tablette et mouvement réduit : pas de défilement piloté, on choisit les plans au doigt. */
@media(max-width:980px),(max-height:620px){
 .edit-scroll{height:auto}
 .edit-sticky{position:relative;top:0;height:auto;padding:0}
 .edit-grid{grid-template-columns:1fr;gap:18px}
 .edit-screen{order:-1;justify-self:stretch;width:100%;aspect-ratio:auto;height:calc((100vw - 40px)*.5625);transition:height .7s cubic-bezier(.65,0,.2,1)}
 .edit-screen.is-vertical{height:min(460px,64vh)}
 .edit-monitor.is-vertical{width:calc(min(460px,64vh)*.5625)}
 .edit-count strong{font-size:72px}
 .edit-copy h3{font-size:28px}
 .edit-timeline{height:auto;padding:12px;overflow-x:auto;scroll-snap-type:x mandatory}
 .edit-ruler,.edit-label,.edit-playhead,.edit-rec{display:none}
 .edit-track{top:12px;right:12px;font-size:10px}
 .edit-tracks{position:static;display:flex;gap:8px;width:max-content}
 .edit-clip{position:relative;left:auto;top:auto!important;width:150px;height:56px;scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){.edit-scroll{height:auto}.edit-sticky{position:relative;top:0;height:auto}.edit-rec i{animation:none}}

/* ( 05 ) Agence */
.agency2{background:#fff}
.agency2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.agency2 h2{font-size:clamp(42px,4.8vw,66px)}
.agency2-lead{margin:24px 0 30px;max-width:520px;font-size:18px;color:var(--text-2)}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.facts li{display:grid;gap:2px;padding:16px 20px;border-radius:18px;background:var(--paper)}
.facts strong{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.04em}
.facts span{font-size:13px;color:var(--text-2)}
.team-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:40px}
.team-card{margin:0;padding:12px 12px 18px;border-radius:22px;background:var(--paper);box-shadow:0 18px 40px rgb(14 14 12/.08);rotate:-3deg}
.team-card:nth-child(2){rotate:2deg;translate:0 10px}
.team-card:nth-child(3){rotate:-1.5deg}
.team-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#fff}
.team-card figcaption{padding:14px 6px 0}
.team-swipe{display:none;align-items:center;gap:8px;margin:-6px 0 0;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.team-swipe i{width:26px;height:2px;border-radius:2px;background:var(--ink);opacity:.35}
.team-card strong{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em}
.team-card span{font-size:14px;color:var(--text-2)}
.has-motion .team-card.is-in{animation:float 6s ease-in-out 1s infinite}
.has-motion .team-card:nth-child(2).is-in{animation-delay:-2s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ( 06 ) Questions */
.faq-section .faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;align-items:start}
.faq-section h2{font-size:clamp(42px,4.4vw,60px)}
.faq-section .faq{display:grid;gap:10px}
.faq-section details{border:0;border-radius:22px;background:#fff;padding:0}
.faq-section summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.faq-section summary::-webkit-details-marker{display:none}
.faq-toggle{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--grey);transition:rotate .35s ease}
.faq-toggle::before,.faq-toggle::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink)}
.faq-toggle::after{rotate:90deg;transition:rotate .35s ease}
.faq-section details[open] .faq-toggle{background-color:var(--fluo);background-image:var(--grain);box-shadow:0 0 12px rgb(247 255 60/.7);rotate:180deg}
.faq-section details[open] .faq-toggle::after{rotate:0deg}
.faq-section details>div{padding:0 26px 24px}
.faq-section details p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}

/* Bandeau final + pied de page */
.v2 .site-footer{margin:0;padding:0 0 36px;background:var(--ink);color:#fff}
.final-cta{padding:56px 0 0}
.final-cta-card{padding:clamp(40px,6vw,84px) clamp(28px,5vw,64px);border-radius:30px;color:var(--ink)}
.final-cta-card .kicker{color:rgb(14 14 12/.6)}
.final-cta-card h2{max-width:1120px;font-size:clamp(50px,7.4vw,108px);line-height:.95}
.final-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:40px}
.final-cta-actions .pill-ink .pill-arrow{background:#fff;box-shadow:none}
.v2 .final-cta-card .final-cta-mail{font-size:16px;color:var(--ink);text-decoration:none}
.v2 .final-cta-card .pill-ink{color:#fff}
.final-cta-mail:hover{text-decoration:underline}
.footer-inner{padding-top:40px}
.footer-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px}
.footer-row .brand{color:#fff}
.footer-nav,.footer-contact,.footer-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer a{text-decoration:none;color:#cfcfc6;font-size:15px}
.site-footer a:hover{color:#fff}
.footer-bottom{margin-top:30px;padding-top:24px;border-top:1px solid rgb(255 255 255/.12)}
.footer-legal a,.footer-legal span,.footer-legal button{font-size:13px;color:#9a9a92;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.footer-copy{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#8a8a82;text-transform:uppercase}
.site-footer .social-links{display:flex;align-items:center;gap:16px;margin:0;padding:0;border:0}
.site-footer .social-links p{margin:0;font-size:13px;color:#9a9a92}
.site-footer .social-links-items{display:flex;gap:16px}
.site-footer .social-links a{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.site-footer .social-links svg{width:12px;height:12px}

/* Mobile */
@media(max-width:1100px){.hero2-top,.section-head.is-split,.agency2-grid,.faq-section .faq-layout{grid-template-columns:1fr;gap:28px}.receive-card,.receive-tournage,.receive-livraison{grid-column:span 6}.receive-point{grid-column:span 12}.formula-grid,.offer-extra-grid{grid-template-columns:1fr}.formula-grid{max-width:620px}.work-tile{grid-column:span 6}.work-tile.is-big,.work-tile.is-big:first-child,.work-tile.is-big:nth-child(2){grid-column:span 12}}
@media(max-width:760px){
 .v2 .container{width:calc(100% - 40px)}
 .v2 .section{padding:84px 0}
 .hero2{padding-top:20px}
 .hero2-title{font-size:clamp(50px,15vw,72px)}
 .hero-band{flex-direction:column;padding:0 20px}
 .band-showreel{width:100%;height:auto;aspect-ratio:16/10}
 .hero-band .band-marquee{margin-right:-20px}
 .band-card:not(.band-showreel){width:150px;height:260px}
 .section-head h2{font-size:clamp(40px,11vw,56px)}
 .receive-card,.receive-tournage,.receive-livraison,.receive-point{grid-column:span 12}
 .receive-scene{height:280px}
 .receive-card h3{font-size:24px}
 .ui-window{width:auto;right:22px;top:20px}
 .ui-notif{top:auto;bottom:18px;right:18px}
 .ui-download,.receive-livraison .ui-cursor{display:none}
 .ui-schedule{width:52%;right:14px}
 .ui-phone{left:16px;width:130px}
 .formula-card{padding:28px 22px 24px}
 .work-tile,.work-tile.is-big,.work-tile.is-big:first-child,.work-tile.is-big:nth-child(2){grid-column:span 12}
 .work-media,.work-tile.is-big .work-media{height:240px}
 /* Agence mobile : chiffres sur une bande de 3 colonnes égales, équipe en carrousel à faire glisser. */
 .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-radius:20px;background:var(--paper);overflow:hidden}
 .facts li{position:relative;isolation:isolate;padding:16px 12px 18px;border-radius:0;background:none}
 .facts li+li{border-left:1px solid rgb(14 14 12/.1)}
 .facts strong{position:relative;display:inline-block;font-size:24px;line-height:1}
 .facts strong::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:6px;border-radius:3px;background-color:var(--fluo);background-image:var(--grain);z-index:-1;box-shadow:0 0 8px rgb(247 255 60/.6)}
 .facts span{display:block;margin-top:8px;font-size:12px;line-height:1.35}
 .team-cards{display:flex;gap:14px;margin:0 -20px;padding:26px 20px 30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .team-cards::-webkit-scrollbar{display:none}
 .team-card{flex:0 0 68%;padding:12px 12px 18px;border-radius:22px;scroll-snap-align:center;translate:none!important}
 .team-card:nth-child(1){rotate:-2deg}.team-card:nth-child(2){rotate:1.5deg}.team-card:nth-child(3){rotate:-1deg}
 .team-card strong{font-size:22px}.team-card span{font-size:14px}
 .team-swipe{display:flex!important}
 .faq-section summary{font-size:18px;padding:20px}
 .faq-section details>div{padding:0 20px 20px}
 .final-cta-card{border-radius:24px}
 .method .calendar-stage{margin-bottom:30px}
 .project-calendar{border-radius:22px}
 .calendar-row{min-height:0;padding:18px 16px 20px}
 .calendar-days,.calendar-sweep{display:none}
 .calendar-events{display:flex;flex-direction:column;gap:18px;padding:0}
 .calendar-event{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;column-gap:12px;width:100%;padding:0}
 .calendar-period{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font:500 11px var(--mono);letter-spacing:.04em;line-height:1.3;text-transform:uppercase;color:var(--ink)}
 .calendar-ticket{width:100%;max-width:none;margin:0;padding:14px 12px;min-height:72px}
 .calendar-icon{position:static;order:2;flex:none;width:28px;height:28px;margin-left:auto;border-radius:8px;box-shadow:none;transform:rotate(-8deg)}
 .calendar-icon svg{width:16px;height:16px}
 .calendar-icon-figma{width:60px;transform:none!important}
 .calendar-people,.calendar-results,.calendar-fx-charte{display:none}
 .calendar-fx-report{left:auto;right:-8px;bottom:-46px;width:150px}
 .calendar-fx-report span{font-size:10px}
 .footer-row{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 .band-marquee-track,.play-button,.receive-scene *,.team-card,.fluo-surface,.hl::before{animation:none!important}
 [data-anim],.hl::before{opacity:1!important;translate:none!important;scale:none!important}
}

/* ==== Pages intérieures : habillage de l'ancien gabarit (site.css chargé en dessous). ==== */
.v2-legacy .section-title{text-align:left;max-width:none;margin:0 0 56px}
.v2-legacy .section-title>img{display:none}
.v2-legacy .section-title h2,.v2-legacy h2{font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.98;font-size:clamp(40px,5.2vw,72px)}
.v2-legacy .section-title p{margin:18px 0 0;max-width:620px;font-size:18px;color:var(--text-2)}
.v2-legacy h2 strong,.v2-legacy h1 strong{font-weight:800;color:var(--ink);padding:0 .14em;border-radius:.12em;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.v2-legacy .interior-dark h2 strong,.v2-legacy .dark h2 strong{color:var(--ink)}
.v2-legacy .eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.v2-legacy .interior-hero,.v2-legacy .page-hero{background:none}
.v2-legacy .page-hero{padding:56px 0 40px;text-align:left}
.v2-legacy .page-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.06em;line-height:.92;font-size:clamp(52px,7.4vw,112px);max-width:1100px}
.v2-legacy .page-hero .lead{max-width:640px;margin:26px 0 0;font-size:20px;color:var(--text-2);text-align:left}
.v2-legacy .page-hero .actions{justify-content:flex-start;margin-top:30px}
.v2-legacy .sticker,.v2-legacy .rotating-sticker,.v2-legacy .home-hero .rotating-sticker{display:inline-block;width:auto!important;margin:0!important;padding:.02em .16em .08em!important;border:0!important;border-radius:.13em!important;background-color:var(--fluo)!important;background-image:var(--shine),var(--grain)!important;background-size:260% 100%,160px 160px!important;background-position:130% 0,0 0!important;background-repeat:no-repeat,repeat!important;box-shadow:var(--halo),inset 0 2px 0 rgb(255 255 255/.7)!important;color:var(--ink)!important;font-family:var(--display)!important;font-weight:800!important;font-size:inherit!important;letter-spacing:-.05em!important;rotate:-1.6deg;transform:none!important;animation:fluo-shine 6.5s ease-in-out 1s infinite!important}
.v2-legacy .rotating-word{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important}
.v2-legacy .rotating-sticker::after{display:none}
.v2-legacy .motion-toggle{display:none}
.v2-legacy .dark,.v2-legacy .interior-dark{background:var(--ink);color:#fff}
.v2-legacy .interior-dark .section-title p{color:#a8a8a0}
.v2-legacy .interior-pills span,.v2-legacy .pills span{padding:7px 13px;border:1px solid rgb(14 14 12/.28);border-radius:999px;background:transparent;box-shadow:none;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.v2-legacy .interior-feature{border:0;border-radius:26px;background:#fff;box-shadow:none;padding:32px}
.v2-legacy .interior-dark .interior-feature{background:#1a1a17;color:#fff}
.v2-legacy .feature-number{display:inline-block;padding:4px 10px;border:0;border-radius:999px;background-color:var(--fluo);background-image:var(--grain);font-family:var(--mono);font-size:12px;color:var(--ink);box-shadow:none}
.v2-legacy .interior-feature h3{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.03em}
.v2-legacy .interior-feature p{color:var(--text-2)}
.v2-legacy .interior-dark .interior-feature p{color:#b3b3ab}
.v2-legacy .work-card{border:0;border-radius:24px;background:#fff;box-shadow:none;overflow:hidden}
.v2-legacy .interior-dark .work-card{background:#1a1a17;color:#fff}
.v2-legacy .work-card h3,.v2-legacy .portfolio-card h2,.v2-legacy .project-caption h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.v2-legacy .work-format,.v2-legacy .project-kind{border-radius:999px;background:#fff;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;box-shadow:none;border:0}
.v2-legacy .work-link,.v2-legacy .text-link{color:inherit}
.v2-legacy .interior-note,.v2-legacy .calendar-note{color:var(--text-3)}
.v2-legacy .faq-layout h2{font-size:clamp(40px,4.4vw,60px)}
.v2-legacy .interior-scope-grid article{border:0;border-radius:26px;background:#fff;box-shadow:none}
.v2-legacy .interior-checks li span{color:var(--ink);background-color:var(--fluo);border-radius:50%}
/* Formulaire, rendez-vous et contact */
.v2-legacy .home-booking-panel{background:var(--ink);border-radius:30px;box-shadow:none}
.v2-legacy .home-booking-copy h2{color:#fff}
.v2-legacy .home-booking-copy h2 strong{background:none;box-shadow:none;color:var(--fluo);padding:0}
.v2-legacy .home-booking-eyebrow span{background:var(--fluo);box-shadow:0 0 10px rgb(247 255 60/.8)}
.v2-legacy .home-booking-benefits li{background:#1c1c19;border:0}
.v2-legacy .home-booking-benefits li::before{background-color:var(--fluo);color:var(--ink)}
.v2-legacy .home-booking-calendar{border:2px dashed rgb(247 255 60/.55);background:transparent}
.v2-legacy .home-booking-calendar-icon{background:var(--grey);color:var(--ink);box-shadow:none}
.v2-legacy .home-booking-direct,.v2-legacy .home-booking-brief{color:var(--ink)}
.v2-legacy .home-booking-references .client-logo-group img{filter:brightness(0) invert(1)}
.v2-legacy .quote-card,.v2-legacy .new-contact-layout aside,.v2-legacy #devis{border:0;border-radius:26px;background:#fff;box-shadow:none}
.v2-legacy input,.v2-legacy select,.v2-legacy textarea{border:1.5px solid rgb(14 14 12/.18);border-radius:14px;background:var(--paper);font-family:var(--sans)}
.v2-legacy input:focus,.v2-legacy select:focus,.v2-legacy textarea:focus{border-color:var(--ink);outline:0;box-shadow:0 0 0 4px rgb(247 255 60/.6)}
.v2-legacy .contact-direct-links a{color:var(--ink)}
/* Réalisations (portfolio et pages projet) */
.v2-legacy .filters button,.v2-legacy .portfolio-toolbar button{border:1px solid rgb(14 14 12/.2);border-radius:999px;background:#fff;font-family:var(--sans);font-weight:500}
.v2-legacy .filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.v2-legacy .portfolio-card{border:0;border-radius:24px;background:#fff;box-shadow:none}
.v2-legacy .portfolio-hero{background:var(--paper)}
.v2-legacy .portfolio-more button{border:1.5px solid var(--ink);border-radius:999px;background:transparent;font-weight:600}
.v2-legacy .case-media-stage{background:var(--ink)}
.v2-legacy .case-narrative,.v2-legacy .case-result-section{background:var(--paper)}
.v2-legacy .case-result-board article{border:0;border-radius:26px;background:#fff;box-shadow:none}
.v2-legacy .case-step{background-color:var(--fluo);color:var(--ink)}
.v2-legacy .breadcrumb a{color:var(--text-2)}
/* Mentions et politique */
.v2-legacy .legal-nav a[aria-current],.v2-legacy .legal-nav a:hover{color:var(--ink)}
/* Équipe (page Agence) */
.v2-legacy .new-team-card{border:0;border-radius:26px;background:#1a1a17;box-shadow:none}
.v2-legacy .team-label{background-color:var(--fluo);color:var(--ink)}

/* Recalage des composants historiques encore teintés en bleu (interiors.css, property-offer.css, privacy.css). */
.v2-legacy .page-hero h1{margin:0}
.v2-legacy .page-hero .interior-pills{justify-content:flex-start}
.v2 h1 strong,.v2 h2 strong{color:var(--ink)!important;-webkit-text-fill-color:currentColor!important;background-clip:border-box!important}
.v2-legacy .portfolio-intro h1 strong{padding:0;background:none;box-shadow:none}
.v2-legacy .home-booking{background:none}
.v2-legacy .home-booking-brief{background:none}
.v2-legacy .interior-scope-grid .eyebrow,.v2-legacy .case-story-grid .eyebrow,.v2-legacy .new-contact-layout>aside .eyebrow,.v2-legacy .new-contact-layout .quote-card>.eyebrow{color:var(--text-3)}
.v2-legacy .interior-checks li>span,.v2-legacy .case-deliverables li>span,.v2-legacy .service-price-card .interior-checks li>span{background-color:var(--fluo);background-image:var(--grain);color:var(--ink);border:0}
.v2-legacy .case-deliverables li{border-color:rgb(255 255 255/.18);background:transparent;color:#fff}
.v2-legacy .case-result-board{background:var(--ink);box-shadow:none;border-radius:30px}
.v2-legacy .case-result-board article{background:#1a1a17;color:#fff}
.v2-legacy .case-result-board article p{color:#b3b3ab}
.v2-legacy .case-result-board .eyebrow{color:#8f8f87}
.v2-legacy .case-step{background-color:var(--fluo);background-image:var(--grain);color:var(--ink);box-shadow:none}
.v2-legacy .case-study-page .case-jump{color:var(--ink)}
.v2-legacy .case-film video,.v2-legacy .case-web-preview{box-shadow:0 24px 60px rgb(0 0 0/.35)}
.v2-legacy .interior-photo-gallery .gallery-item{border-radius:18px;box-shadow:none}
.v2-legacy .contact-direct-links svg{color:var(--ink)}
.v2-legacy .new-contact-layout .quote-card{background:#fff;box-shadow:none;border:0}
.v2-legacy .portfolio-card:hover,.v2-legacy .portfolio-card:focus-within,.v2-legacy .work-card:hover,.v2-legacy .work-card:focus-within{box-shadow:0 18px 40px rgb(14 14 12/.1);border-color:transparent}
.v2-legacy .portfolio-card-image{background:var(--grey)}
.v2-legacy .work-copy>p{color:var(--text-3);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.v2-legacy .interior-dark .work-copy>p{color:#8f8f87}
.v2-legacy .portfolio-toolbar .filters button[aria-pressed=true],.v2-legacy .portfolio-page .portfolio-toolbar .filters button[aria-pressed=true],.v2-legacy .service-billing button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.v2-legacy .social-reel-stage .offer-reels{background:var(--ink);border:0;box-shadow:none;border-radius:26px}
.v2-legacy .new-team-card{background:#1a1a17}
.v2-legacy .interior-dark .interior-feature{background:#1a1a17;border:0;box-shadow:none}
.v2 .site-footer .social-links a,.v2 .site-footer .social-links-light a{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#cfcfc6}
/* Immobilier : offre Prestige et formules sur encre et fluo. */
.v2 .property-unique-offer{border:0;border-radius:30px;background:var(--ink);box-shadow:none}
.v2 .property-unique-offer .eyebrow{color:#8f8f87!important}
.v2 .property-unique-price strong{color:var(--fluo)!important;text-shadow:0 0 18px rgb(247 255 60/.45)}
.v2 .property-unique-price>span,.v2 .property-unique-inclusions span{color:#b3b3ab!important}
.v2 .property-unique-inclusions li{border-color:rgb(255 255 255/.14)}
.v2 .property-unique-inclusions li:before{color:var(--fluo)}
.v2 .property-unique-offer .property-unique-footer a.btn{border-radius:999px!important;background-color:var(--fluo)!important;background-image:var(--grain)!important;border-color:var(--fluo)!important;color:var(--ink)!important}
.v2 .property-partner{border:0;border-radius:30px;background:var(--grey)}
.v2 .property-partner-heading h3{color:var(--ink)!important}
.v2 .property-partner-heading p,.v2 .property-subscription-card p{color:var(--text-2)!important}
.v2 .property-subscription-card{border:0;border-radius:24px;background:#fff;color:var(--ink)}
.v2 .property-subscription-card h4{color:var(--ink)!important}
.v2 .property-subscription-card .property-pack-price{color:var(--ink)!important}
.v2 .property-subscription-card a.btn,.v2 .property-type-card a.btn{border-radius:999px!important;background:var(--ink)!important;color:#fff!important}
.v2 .property-subscription-card.is-recommended{background:var(--ink);box-shadow:none}
.v2 .property-subscription-card.is-recommended h4,.v2 .property-subscription-card.is-recommended .property-pack-price{color:#fff!important}
.v2 .property-subscription-card.is-recommended p,.v2 .property-subscription-card.is-recommended li{color:#b3b3ab!important}
.v2 .property-subscription-card.is-recommended a.btn{background-color:var(--fluo)!important;background-image:var(--grain)!important;color:var(--ink)!important}
.v2 .property-pack-conditions{color:var(--text-2)!important}
.v2 .property-travel-details summary{color:var(--ink)}
/* Mentions, confidentialité, cookies et bandeau de consentement. */
.v2 .legal-hero h1 strong,.v2 .privacy-dialog h2 strong{color:var(--ink)!important}
.v2 .legal-nav a[aria-current=page]{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;box-shadow:none!important}
.v2 .legal-summary a span{color:var(--ink);background:var(--grey)}
.v2 .legal-summary a:hover{color:var(--ink)}
.v2 .legal-card .legal-notice{border-color:var(--ink);background:var(--grey)}
.v2 .privacy-banner,.v2 .privacy-dialog{font-family:var(--sans);border-radius:22px}
.v2 .privacy-banner button,.v2 .privacy-dialog button{border-radius:999px;font-family:var(--sans)}
.v2 .privacy-calendar-choice input{accent-color:var(--ink)}
.v2 .privacy-banner :focus-visible,.v2 .privacy-dialog :focus-visible,.v2 .legal-page :focus-visible{outline-color:var(--ink)}

/* ==== Pages intérieures v2 : heros animés (Figma CDl1o5M6Ed7LhwLUjIBmqF, nœuds 43:3 à 43:71) ==== */
.ph{position:relative;overflow:hidden;padding:30px 0 88px;background:var(--paper)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center;min-height:min(720px,calc(100svh - 110px))}
.ph-copy{position:relative;z-index:2}
.ph-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px}
.ph-badges .hero3-kicker{margin:0}
.v2 .ph-title{font-size:clamp(52px,6.1vw,94px);line-height:.95;letter-spacing:-.065em;margin:0;max-width:none}
.ph-line{display:block;white-space:nowrap}
.ph-title .hl{margin-left:.04em}
.v2 .ph-lead{max-width:540px;margin:30px 0 0;font-size:20px;line-height:1.45;color:var(--text-2);text-align:left}
.ph-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.ph-note{max-width:460px;margin:28px 0 0;font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ph-facts{display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 0;padding:0;list-style:none}
.ph-facts li{display:grid;gap:3px;min-width:120px;padding:14px 18px 15px;border-radius:18px;background:#fff}
.ph-facts strong{font:800 30px/1 var(--display);letter-spacing:-.045em}
.ph-facts span{font-size:13px;line-height:1.3;color:var(--text-2)}
.ph-range{margin:26px 0 0;font-size:16px;color:var(--text-2)}
.ph-range strong{color:var(--ink);font-weight:700}
.v2 .ph .interior-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ph-direct{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 0;padding:0;list-style:none}
.ph-direct a{display:grid;grid-template-columns:auto 18px;align-items:center;column-gap:10px;padding:14px 18px;border-radius:18px;background:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ph-direct a span{grid-column:1/-1;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ph-direct a svg{width:16px;height:16px;transition:rotate .35s}
.ph-direct a:hover{transform:translateY(-2px)}
.ph-direct a:hover svg{rotate:45deg}
.ph-visual{position:relative;z-index:1;min-height:600px}
.ph-scene{position:absolute;inset:0}
.ph-glow{position:absolute;left:14%;top:26%;width:76%;height:56%;border-radius:50%;background:var(--fluo);filter:blur(80px);opacity:.6;pointer-events:none}
.has-motion .ph-visual.is-in .ph-glow{animation:breathe 9s ease-in-out infinite}
.ph-cursor{position:absolute;z-index:8;width:20px;height:28px;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 8px rgb(0 0 0/.28))}
@keyframes ph-pop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.06}100%{opacity:1;scale:1}}

/* L'app : fenêtre, écrans qui glissent, notifications (boucle de 11 s). */
.apv-window{position:relative;overflow:hidden;border-radius:22px;background:var(--ink);box-shadow:0 44px 80px -34px rgb(0 0 0/.5)}
.apv .apv-window{position:absolute;left:0;top:56px;width:calc(100% + 72px)}
.apv-bar{position:relative;display:flex;align-items:center;gap:6px;height:36px;padding:0 16px}
.apv-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a35}
.apv-bar i:first-child{background:var(--fluo)}
.apv-bar span{position:absolute;left:50%;translate:-50% 0;font:500 11px var(--mono);letter-spacing:.06em;color:#a8a8a0;white-space:nowrap}
.apv-screen{position:relative;overflow:hidden;aspect-ratio:16/10;background:#fff}
.apv-screen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.apv-s2,.apv-s3{translate:101% 0}
.apv-card{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:18px;background:#fff;box-shadow:0 24px 50px -18px rgb(0 0 0/.32);font-size:14px;line-height:1.3}
.apv-card strong{display:block;font-size:15px}
.apv-card span{color:var(--text-2);font-size:13px}
.apv-bell{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background-color:var(--fluo);background-image:var(--grain);box-shadow:0 0 14px rgb(247 255 60/.8)}
.apv-bell svg{width:18px;height:18px}
.apv-n1{left:-54px;bottom:96px}

/* Réalisations : planche contact qui défile et moniteur du showreel. */
.pfv-panel{position:absolute;top:0;right:-64px;bottom:40px;left:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 18px;overflow:hidden;border-radius:36px;background:var(--ink)}
.pfv-panel::before,.pfv-panel::after{content:'';position:absolute;left:0;right:0;z-index:2;height:120px;pointer-events:none}
.pfv-panel::before{top:0;background:linear-gradient(var(--ink),rgb(14 14 12/0))}
.pfv-panel::after{bottom:0;background:linear-gradient(rgb(14 14 12/0),var(--ink))}
.pfv-col{position:relative;overflow:hidden}
.pfv-track{display:flex;flex-direction:column;gap:14px}
.pfv-track{--half-gap:7px}
.pfv-col:nth-child(2) .pfv-track{translate:0 calc(-50% - var(--half-gap))}
.pfv-track img{display:block;width:100%;height:auto;object-fit:cover;border-radius:14px;background:#1a1a17}
.pfv-track img.is-v{aspect-ratio:9/16}
.pfv-track img.is-h{aspect-ratio:16/9}
.has-motion .ph-visual.is-in .pfv-track{animation:pfv-up 44s linear infinite}
.has-motion .ph-visual.is-in .pfv-col:nth-child(2) .pfv-track{animation:pfv-down 52s linear infinite}
.has-motion .ph-visual.is-in .pfv-col:nth-child(3) .pfv-track{animation-duration:38s}
@keyframes pfv-up{from{translate:0 0}to{translate:0 calc(-50% - var(--half-gap))}}
@keyframes pfv-down{from{translate:0 calc(-50% - var(--half-gap))}to{translate:0 0}}
.pfv-monitor{position:absolute;left:0;bottom:0;z-index:3;width:60%;aspect-ratio:16/9;margin:0;overflow:hidden;border:6px solid #fff;border-radius:22px;background:#000;box-shadow:0 34px 60px -24px rgb(0 0 0/.55);rotate:-2deg}
.pfv-monitor video{display:block;width:100%;height:100%;object-fit:cover}
.pfv-rec{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgb(14 14 12/.82);color:#fff;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pfv-rec i{width:8px;height:8px;border-radius:50%;background:var(--fluo);box-shadow:0 0 8px var(--fluo)}
.has-motion .pfv-rec i{animation:rec-blink 1.2s steps(1) infinite}
.has-motion .ph-visual .pfv-monitor{translate:0 70px;rotate:-7deg;transition:translate .9s cubic-bezier(.22,1,.36,1) .25s,rotate 1s cubic-bezier(.34,1.3,.64,1) .25s}
.has-motion .ph-visual.is-in .pfv-monitor{translate:0 0;rotate:-2deg}
.ph-portfolio + .portfolio-selection{padding-top:24px}

/* Formules : le mois en un coup d'œil (onglets pilotés par v2.js). */
.ofv{display:flex;align-items:center;justify-content:flex-end}
.ofv-card{position:relative;z-index:2;width:min(100%,570px);padding:22px 22px 26px;border-radius:32px;background:#fff;box-shadow:0 40px 80px -36px rgb(0 0 0/.35)}
.ofv-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:var(--grey)}
.ofv-tab{position:relative;z-index:1;padding:12px 0;text-align:center;font-size:15px;font-weight:600;transition:color .35s}
.ofv-tab.is-on{color:#fff}
.ofv-tab-hl{position:absolute;top:4px;bottom:4px;left:4px;z-index:0;width:calc((100% - 8px)/3);border-radius:999px;background:var(--ink);translate:calc(var(--t,1)*100%) 0;transition:translate .55s cubic-bezier(.34,1.3,.64,1)}
.ofv-prices{position:relative;height:112px;margin:24px 8px 0}
.ofv-price{position:absolute;inset:0;opacity:0;translate:0 14px;transition:opacity .35s ease,translate .5s cubic-bezier(.22,1,.36,1)}
.ofv-price.is-on{opacity:1;translate:0 0}
.ofv-price p{display:flex;align-items:flex-end;gap:10px;margin:0}
.ofv-price strong{font:800 64px/.9 var(--display);letter-spacing:-.055em}
.ofv-price p span{padding-bottom:6px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ofv-price em{display:block;margin-top:12px;font-size:15px;font-style:normal;color:var(--text-2)}
.ofv-month{margin:6px 8px 0}
.ofv-days,.ofv-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ofv-days{margin-bottom:6px;text-align:center;font:500 11px var(--mono);color:var(--text-3)}
.ofv-cell{display:grid;place-items:center;height:32px;border-radius:9px;background:#F2F2EE;font-size:11px;font-weight:600;white-space:nowrap}
.ofv-cell.is-shoot{background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo)}
.ofv-cell.is-delivery{background:var(--ink);color:#fff}
.ofv-cell.is-point{grid-column:span 2;background:var(--grey)}
.has-motion .ph-visual .ofv-cell.is-shoot,.has-motion .ph-visual .ofv-cell.is-delivery,.has-motion .ph-visual .ofv-cell.is-point{opacity:0}
.has-motion .ph-visual.is-in .ofv-cell.is-shoot{animation:ph-pop .6s cubic-bezier(.34,1.56,.64,1) .8s both}
.has-motion .ph-visual.is-in .ofv-cell.is-delivery{animation:ph-pop .6s cubic-bezier(.34,1.56,.64,1) 1.4s both}
.has-motion .ph-visual.is-in .ofv-cell.is-point{animation:ph-pop .6s cubic-bezier(.34,1.56,.64,1) 2s both}
.ofv-bars{margin:20px 8px 0}
.ofv-bars p{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;align-items:center;gap:12px;margin:10px 0 0}
.ofv-bars span{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.ofv-bars b{display:block;height:12px;overflow:hidden;border-radius:999px;background:#F2F2EE}
.ofv-bars i{display:block;height:100%;width:calc(var(--v,0)*100%);border-radius:inherit;background:var(--ink);transition:width .8s cubic-bezier(.22,1,.36,1)}
.has-motion .ph-visual:not(.is-in) .ofv-bars i{width:0}
.ofv-bars em{font:800 20px/1 var(--display);font-style:normal;text-align:right;letter-spacing:-.03em}
.ofv-tag{position:absolute;right:-8px;top:40px;z-index:3;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--fluo);font-size:14px;font-weight:600;rotate:-4deg;box-shadow:0 14px 30px rgb(0 0 0/.2)}
.has-motion .ph-visual.is-in .ofv-tag{animation:ph-pop .6s cubic-bezier(.34,1.56,.64,1) 1.1s both}

/* Agence : badges de tournage sur tour de cou, chute puis balancement. */

/* Contact : carte de rendez-vous (démonstration en boucle de 9 s). */
.ctv{display:flex;align-items:center;justify-content:flex-end}
.ctv-card{position:relative;z-index:2;width:min(100%,540px);padding:30px;border-radius:32px;background:#fff;box-shadow:0 40px 80px -36px rgb(0 0 0/.35)}
.ctv-team{display:flex}
.ctv-team img{width:46px;height:46px;margin-right:-12px;border:3px solid #fff;border-radius:50%;object-fit:cover}
.ctv-title{margin:18px 0 4px;font:800 32px/1 var(--display);letter-spacing:-.045em}
.ctv-sub{margin:0;font-size:15px;color:var(--text-2)}
.ctv-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:24px}
.ctv-days span{padding:18px 0;border-radius:16px;background:#F2F2EE;text-align:center;font-size:15px;font-weight:600}
.ctv-days .is-on{background:var(--ink);color:#fff}
.ctv-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.ctv-slots span{padding:14px 0;border:1.5px solid #d9d9d2;border-radius:999px;text-align:center;font:500 15px var(--mono);transition:background-color .3s,border-color .3s}
.ctv-slots .is-pick{border-color:transparent;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo)}
.ctv-confirm{display:block;margin-top:20px;padding:18px;border-radius:999px;background:var(--ink);color:#fff;text-align:center;font-weight:600;font-size:16px}
.ctv-mail{margin:14px 0 0;font-size:13px;color:var(--text-3)}
.ctv-toast{position:absolute;right:26px;bottom:34px;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;box-shadow:0 20px 40px -14px rgb(0 0 0/.45)}
.ctv-toast i{width:10px;height:10px;border-radius:50%;background:var(--green)}
.ctv .ph-cursor{left:84%;top:96%}
.has-motion .ph-visual.is-in .ctv-slots span{animation:ph-pop .5s cubic-bezier(.34,1.56,.64,1) calc(.5s + var(--i)*.08s) both}
.has-motion .ph-visual.is-in .ctv-slots .is-pick{animation:ph-pop .5s cubic-bezier(.34,1.56,.64,1) .66s both,ctv-pick 9s ease 1s infinite}
.has-motion .ph-visual.is-in .ctv-confirm{animation:ctv-press 9s ease 1s infinite}
.has-motion .ph-visual.is-in .ctv-toast{animation:ctv-toast 9s ease 1s infinite both}
.has-motion .ph-visual.is-in .ctv .ph-cursor{animation:ctv-cursor 9s cubic-bezier(.45,0,.25,1) 1s infinite both}
@keyframes ctv-pick{0%,24%{background-color:transparent;background-image:none;border-color:#d9d9d2;box-shadow:none}27%,90%{background-color:var(--fluo);background-image:var(--grain);border-color:transparent;box-shadow:var(--halo)}96%,100%{background-color:transparent;background-image:none;border-color:#d9d9d2;box-shadow:none}}
@keyframes ctv-press{0%,44%,50%,100%{scale:1}47%{scale:.96}}
@keyframes ctv-toast{0%,50%{opacity:0;translate:0 24px}55%,90%{opacity:1;translate:0 0}96%,100%{opacity:0;translate:0 0}}
@keyframes ctv-cursor{0%{opacity:0;left:84%;top:96%}6%{opacity:1}22%{left:80%;top:57%;scale:1}24%{scale:.8}26%{scale:1;left:80%;top:57%}40%{left:62%;top:79%;scale:1}46%{scale:.8}48%{scale:1;left:62%;top:79%}90%{opacity:1;left:62%;top:79%}96%,100%{opacity:0;left:62%;top:79%}}

/* Navigation : pastille « Nouveau » sur L'app. */
.nav-new{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:6px;background-color:var(--fluo);background-image:var(--grain);font:600 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);vertical-align:2px}

/* Formules : « Vous hésitez ? » avec jauge de rythme. */
.formula-chooser{background:var(--paper)}
.chooser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.chooser-card{display:flex;flex-direction:column;gap:10px;padding:30px;border-radius:28px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.v2 .chooser-card{color:var(--ink)}
.chooser-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgb(0 0 0/.4)}
.v2 .chooser-card.is-recommended{background:var(--ink);color:#fff}
.chooser-gauge{display:flex;align-items:flex-end;gap:6px;height:36px;margin-bottom:10px}
.chooser-gauge i{width:12px;height:14px;border-radius:4px;background:rgb(14 14 12/.12);transform-origin:bottom}
.chooser-gauge i:nth-child(2){height:25px}
.chooser-gauge i:nth-child(3){height:36px}
.chooser-gauge i.is-on{background:var(--ink)}
.is-recommended .chooser-gauge i{background:rgb(255 255 255/.16)}
.is-recommended .chooser-gauge i.is-on{background-color:var(--fluo);background-image:var(--grain);box-shadow:0 0 10px rgb(247 255 60/.7)}
.has-motion .chooser-card .chooser-gauge i.is-on{scale:1 0;transition:scale .6s cubic-bezier(.34,1.56,.64,1)}
.has-motion .chooser-card.is-in .chooser-gauge i.is-on{scale:1 1}
.has-motion .chooser-card.is-in .chooser-gauge i:nth-child(2){transition-delay:.15s}
.has-motion .chooser-card.is-in .chooser-gauge i:nth-child(3){transition-delay:.3s}
.chooser-profile{margin:0;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.is-recommended .chooser-profile{color:#a8a8a0}
.v2 .chooser-card h3{font-size:36px;letter-spacing:-.04em}
.chooser-card h3 span{display:block;margin-top:6px;font:500 15px var(--sans);letter-spacing:0;color:var(--text-2)}
.is-recommended h3 span,.is-recommended>p{color:#b3b3ab}
.chooser-card>p{margin:0;font-size:16px;color:var(--text-2)}
.chooser-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-weight:600}
.chooser-link svg{width:18px;height:18px;transition:rotate .4s cubic-bezier(.34,1.56,.64,1)}
.chooser-card:hover .chooser-link svg{rotate:45deg}
.is-recommended .chooser-link{color:var(--fluo)}

/* Agence : références et engagements animés. */
.agency-logos{padding:64px 0 60px;background:var(--paper)}
.agency-logos .kicker{margin-bottom:26px}
.agency-logos-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.agency-logos-track{display:flex;width:max-content}
.has-motion .agency-logos-track{animation:logos-run 46s linear infinite}
.agency-logos-marquee:hover .agency-logos-track{animation-play-state:paused}
.agency-logos ul{display:flex;align-items:center;gap:72px;margin:0;padding:0 36px;list-style:none}
.agency-logos img{display:block;width:auto;height:42px;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.78}
@keyframes logos-run{to{translate:-50% 0}}
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.value-card{padding:32px;border-radius:26px;background:#fff}
.value-icon{display:grid;place-items:center;width:66px;height:66px;margin-bottom:28px;border-radius:20px;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo)}
.value-icon svg{width:32px;height:32px;overflow:visible}
.v2 .value-card h3{font-size:28px}
.value-card p{margin:12px 0 0;color:var(--text-2)}
.value-icon path{transform-box:fill-box;transform-origin:center}
.has-motion .value-card.is-in.is-listen path{animation:eq 1.1s ease-in-out infinite alternate}
.has-motion .value-card.is-in.is-listen path:nth-child(2){animation-delay:-.3s}
.has-motion .value-card.is-in.is-listen path:nth-child(3){animation-delay:-.6s}
.has-motion .value-card.is-in.is-listen path:nth-child(4){animation-delay:-.2s}
.has-motion .value-card.is-in.is-listen path:nth-child(5){animation-delay:-.8s}
@keyframes eq{from{scale:1 .35}to{scale:1 1}}
.value-hand{transform-box:view-box!important;transform-origin:12px 12px!important}
.has-motion .value-card.is-in .value-hand{animation:value-tick 6s steps(12) infinite}
@keyframes value-tick{to{rotate:360deg}}
.value-check{stroke-dasharray:1;stroke-dashoffset:0}
.has-motion .value-card.is-in .value-check{animation:draw 3.6s cubic-bezier(.65,0,.35,1) .3s infinite}
@keyframes draw{0%{stroke-dashoffset:1}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}

/* Réalisations : cartes nettes (sans voile clair) et filtres pilule. */
.v2-legacy .portfolio-card-image::after,.v2-legacy .portfolio-card-image::before{display:none!important}
.v2-legacy .portfolio-card-image img{transition:scale .8s cubic-bezier(.22,1,.36,1)}
.v2-legacy .portfolio-card:hover .portfolio-card-image img{scale:1.05}
.v2-legacy .filters{display:flex;flex-wrap:wrap;gap:8px}
.v2-legacy .filters button{min-height:40px;padding:0 16px;transition:background-color .25s,color .25s,transform .3s}
.v2-legacy .filters button:hover{transform:translateY(-2px)}
.v2-legacy .filters button[aria-pressed=true]{box-shadow:inset 0 -3px 0 var(--fluo)}

/* ==== Page « L'app by Vision Claire » ==== */
.app-page .section-head p{max-width:460px}
.app-features{padding-top:40px}
.app-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.app-tile{display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:30px 30px 0;border-radius:28px;background:#fff}
.app-tile.is-wide{grid-column:span 7}
.app-tile.is-tall{grid-column:span 5}
.app-tile.is-half{grid-column:span 4}
.app-tile-n{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font:500 11px var(--mono);letter-spacing:.06em}
.v2 .app-tile h3{margin-top:18px;font-size:clamp(24px,2.2vw,30px)}
.app-tile-copy p{max-width:460px;margin:10px 0 0;font-size:16px;color:var(--text-2)}
.app-tile-stage{position:relative;flex:1;min-height:300px;margin-top:26px}

.app-journey{background:#fff}
.app-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none}
.app-steps::before,.app-steps::after{content:'';position:absolute;left:22px;right:calc(20% - 22px);top:21px;height:3px;border-radius:999px;background:var(--grey)}
.app-steps::after{right:auto;width:calc(80% - 22px);background-color:var(--ink);transform-origin:left}
.has-motion .app-steps::after{scale:0 1;transition:scale 3.2s cubic-bezier(.45,0,.25,1) .3s}
.has-motion .app-steps.is-in::after{scale:1 1}
.app-steps li{position:relative;z-index:1}
.app-step-dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo),0 0 0 6px #fff}
.app-step-dot svg{width:20px;height:20px}
.has-motion .app-steps .app-step-dot{background:#fff;box-shadow:inset 0 0 0 2px var(--grey),0 0 0 6px #fff;transition:background-color .4s,box-shadow .4s;transition-delay:calc(.3s + var(--i)*.8s)}
.has-motion .app-steps .app-step-dot svg{opacity:0;scale:.4;transition:opacity .3s,scale .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.3s + var(--i)*.8s)}
.has-motion .app-steps.is-in .app-step-dot{background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo),0 0 0 6px #fff}
.has-motion .app-steps.is-in .app-step-dot svg{opacity:1;scale:1}
.app-step-when{margin:22px 0 6px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.v2 .app-steps h3{font-size:26px}
.app-steps p:last-child{margin:10px 0 0;font-size:15px;color:var(--text-2)}

.app-team{overflow:hidden;background:var(--ink);color:#fff}
.app-team .kicker{color:#8f8f87}
.app-team-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.v2 .app-team h2{font-size:clamp(42px,4.8vw,66px)}
.app-team-lead{max-width:480px;margin:24px 0 0;font-size:18px;color:#b3b3ab}
.app-team-list{display:grid;gap:12px;margin:34px 0 0;padding:0;list-style:none}
.app-team-list li{display:flex;gap:14px;padding:18px 20px;border-radius:20px;background:#1a1a17}
.app-team-list li>svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background-color:var(--fluo);background-image:var(--grain);color:var(--ink)}
.app-team-list strong{display:block;font-size:17px}
.app-team-list span{font-size:15px;color:#a8a8a0}
.app-team-stage{position:relative}
.app-team-stage .apv-window{width:calc(100% + 80px);box-shadow:0 50px 90px -40px rgb(0 0 0/.8),0 0 0 1px rgb(255 255 255/.08)}
.app-team-chip{position:absolute;left:-24px;bottom:34px;z-index:2;padding:12px 18px;border-radius:999px;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo);color:var(--ink);font-size:15px;font-weight:600;rotate:-3deg}
.has-motion .app-team-stage.is-in .app-team-chip{animation:ph-pop .6s cubic-bezier(.34,1.56,.64,1) .8s both,breathe 5s ease-in-out 1.6s infinite}

.app-roadmap-section{background:var(--paper)}
.app-roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.app-roadmap li{padding:30px;border-radius:26px;background:#fff}
.app-roadmap-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.is-done .app-roadmap-tag{background-color:var(--fluo);background-image:var(--grain)}
.is-now .app-roadmap-tag{background:var(--ink);color:#fff}
.is-now .app-roadmap-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green)}
.has-motion .is-now .app-roadmap-tag::before{animation:live 1.8s ease-out infinite}
.is-next .app-roadmap-tag{box-shadow:inset 0 0 0 1.5px rgb(14 14 12/.3)}
.v2 .app-roadmap h3{margin-top:22px;font-size:28px}
.app-roadmap p{margin:10px 0 0;font-size:16px;color:var(--text-2)}

/* Tablette et mobile */
@media(max-width:1100px){
 .apv .apv-window{width:calc(100% + 40px)}
 .apv-n1{left:-20px}
}
@media(max-width:980px){
 .ph{padding:18px 0 64px}
 .ph-grid{grid-template-columns:1fr;gap:34px;min-height:0}
 .ph-visual{min-height:520px}
 .apv .apv-window{left:0;width:100%;top:40px}
 .apv-n1{left:12px;bottom:40px}
 .pfv-panel{left:0;right:0}
 .ofv,.ctv{justify-content:center}
 .app-bento{grid-template-columns:1fr 1fr}
 .app-tile.is-wide,.app-tile.is-tall{grid-column:span 2}
 .app-tile.is-half{grid-column:span 1}
 .app-tile.is-half:last-child{grid-column:span 2}
 .app-steps{grid-template-columns:1fr;gap:26px;padding-left:66px}
 .app-steps::before,.app-steps::after{left:21px;right:auto;top:22px;bottom:22px;width:3px;height:auto}
 .app-steps::after{height:calc(100% - 44px);transform-origin:top}
 .has-motion .app-steps::after{scale:1 0}
 .has-motion .app-steps.is-in::after{scale:1 1}
 .app-steps li{margin:0}
 .app-step-dot{position:absolute;left:-66px;top:0}
 .app-step-when{margin-top:10px}
 .app-team-grid{grid-template-columns:1fr;gap:44px}
 .app-team-stage .apv-window{width:100%}
 .app-team-chip{left:12px;bottom:-16px}
 .chooser-grid,.value-grid,.app-roadmap{grid-template-columns:1fr}
}
@media(max-width:760px){
 .v2 .ph-title{font-size:clamp(44px,12.4vw,62px)}
 .ph-line{white-space:normal}
 .v2 .ph-lead{font-size:17px;margin-top:22px}
 .ph-actions{margin-top:26px}
 .ph-actions .pill{flex:1 1 auto}
 .ph-facts{margin-top:30px;gap:8px}
 .ph-facts li{flex:1 1 0;min-width:0;padding:12px 14px}
 .ph-facts strong{font-size:24px}
 .ph-facts span{font-size:12px}
 .ph-direct a{flex:1 1 100%}
 .ph-visual{min-height:440px}
 .ph-glow{filter:blur(60px)}
 .apv-card{padding:10px 12px;font-size:12px}
 .apv-card strong{font-size:13px}.apv-card span{font-size:12px}
 .apv-bell{width:30px;height:30px}.apv-bell svg{width:15px;height:15px}
 .apv-n1{bottom:74px}
 .apv-bar span{display:none}
 .pfv-panel{bottom:0;gap:10px;padding:0 10px;border-radius:26px}
 .pfv-track{gap:10px}
 .pfv-track{--half-gap:5px}
 .pfv-monitor{left:auto;right:12px;bottom:14px;width:40%;aspect-ratio:9/16;border-width:4px;border-radius:16px}
 .pfv-rec{left:8px;top:8px;padding:4px 8px;font-size:9px}
 .ofv-card{padding:16px 14px 18px;border-radius:26px}
 .ofv-tab{font-size:13px;padding:10px 0}
 .ofv-prices{height:98px;margin:18px 4px 0}
 .ofv-price strong{font-size:48px}
 .ofv-price em{font-size:13px}
 .ofv-month,.ofv-bars{margin-inline:4px}
 .ofv-cell{height:28px;font-size:9px;border-radius:7px}
 .ofv-tag{right:6px;top:-16px;font-size:12px}
 .ofv{align-items:flex-start}
 .ctv-card{padding:22px 18px;border-radius:26px}
 .ctv-title{font-size:26px}
 .ctv-days span{padding:13px 0;font-size:13px}
 .ctv-slots span{padding:11px 0;font-size:13px}
 .ctv-confirm{padding:15px}
 .ctv-toast{right:10px;bottom:-4px;font-size:13px;padding:11px 16px}
 .ctv{align-items:flex-start}
 .app-bento{grid-template-columns:1fr}
 .app-tile.is-wide,.app-tile.is-tall,.app-tile.is-half,.app-tile.is-half:last-child{grid-column:auto}
 .app-tile{padding:24px 22px 0}
 .app-tile-stage{min-height:250px}
 .agency-logos ul{gap:48px}
 .agency-logos img{height:32px}
}
@media(prefers-reduced-motion:reduce){
 .ph *,.app-page *,.agency-logos *,.value-card *{animation:none!important;transition:none!important}
}
/* Ajustements après contrôle visuel (27/09) */
.v2 .pfv-track img{background:#1a1a17}
.ph-contact .ph-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
.v2 .ph-contact .ph-title{font-size:clamp(50px,5.3vw,80px)}
@media(max-width:980px){
 .ph-contact .ph-grid{grid-template-columns:1fr}
 .ph-app .ph-visual{min-height:360px}
 .ph-agency .ph-visual{overflow:hidden;min-height:470px;border-radius:0}
}
@media(max-width:760px){
 .ph-app .ph-visual{min-height:300px}
 .ph-agency .ph-visual{min-height:380px}
}
.value-icon{color:var(--ink)}
/* Agence : l'ancien dégradé bleuté entre le hero et l'équipe laisse place à l'encre. */
.v2-legacy.agency-page #equipe.interior-dark{background:var(--ink)}
/* Réalisations : voile encre sous le texte des cartes (remplace le voile blanc bleuté). */
.v2-legacy .portfolio-card{background:var(--ink)}
.v2-legacy .portfolio-card a::after{background:linear-gradient(rgb(14 14 12/0) 28%,rgb(14 14 12/.5) 55%,rgb(14 14 12/.93) 86%)!important}
.v2-legacy .portfolio-card-copy,.v2-legacy .portfolio-card-copy h2,.v2-legacy .portfolio-card-copy p{color:#fff}
.v2-legacy .portfolio-card-copy>p:first-child{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fluo)}
.v2-legacy .portfolio-card-copy .portfolio-card-description{color:#c9c9c1}
.v2-legacy .portfolio-card-bottom span{color:#c9c9c1}
.v2-legacy .portfolio-card-arrow{background-color:var(--fluo)!important;background-image:var(--grain)!important;color:var(--ink)!important;border:0!important}
.v2-legacy .portfolio-card-image{background:#141412}
.v2-legacy .portfolio-card-bottom>span:first-child{border:1px solid rgb(255 255 255/.28);background:transparent!important;color:#fff!important;box-shadow:none!important}
.value-icon svg{stroke-width:2.2}
/* Surligné fluo toujours DERRIÈRE le texte du titre (27/09, retour Mehdi : le bloc jaune passait devant la ligne du dessus).
   Le titre isole sa pile ; le surligné descend sous tout le texte du titre, lignes précédentes comprises. */
.v2 h1,.v2 h2,.v2 h3{isolation:isolate}
.v2 :is(h1,h2,h3) .hl{z-index:-1}
.v2 :is(h1,h2,h3) .hl::before{rotate:-1deg;top:.06em}
.v2-legacy :is(h1,h2) strong{position:relative;z-index:-1}
/* L'app, côté équipe : fiche client réelle ; repère fluo sur la ligne « Chez le client » (septembre). */
.eq-row{position:absolute;left:19.6%;right:3.2%;top:42%;height:7.2%;border:2px solid var(--fluo);border-radius:12px;box-shadow:0 0 0 4px rgb(247 255 60/.25),var(--halo);pointer-events:none}
.eq-chip{position:absolute;right:4%;top:52%;padding:8px 12px;border-radius:999px;background:var(--ink);color:#fff;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 14px 30px -12px rgb(0 0 0/.5)}
.has-motion .app-team-stage .eq-row,.has-motion .app-team-stage .eq-chip{opacity:0}
.has-motion .app-team-stage.is-in .eq-row{animation:eq-row 6s ease .8s infinite}
.has-motion .app-team-stage.is-in .eq-chip{animation:eq-chip 6s ease .8s infinite}
@keyframes eq-row{0%{opacity:0;scale:1.04}10%,80%{opacity:1;scale:1}90%,100%{opacity:0;scale:1}}
@keyframes eq-chip{0%,14%{opacity:0;translate:0 10px}22%,80%{opacity:1;translate:0 0}90%,100%{opacity:0;translate:0 0}}
@media(max-width:760px){.eq-chip{font-size:9px;padding:5px 8px}}
.v2 .value-icon svg{color:var(--ink)!important;stroke:var(--ink)!important}

/* L'app : tuiles = vraie interface recadrée (27/09). Cadre au ratio exact du recadrage, repère fluo + curseur. */
.app-tile{padding:30px}
.app-tile-stage{flex:none;min-height:0;margin-top:auto;padding-top:26px}
.crop{position:relative;overflow:hidden;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px rgb(14 14 12/.08),0 24px 40px -30px rgb(0 0 0/.4)}
.crop img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.crop-ring{position:absolute;z-index:2;border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 0 0 5px rgb(247 255 60/.85),0 0 24px rgb(247 255 60/.9);pointer-events:none}
.crop.has-two .crop-ring.r2{opacity:0}
.crop-cursor{position:absolute;z-index:3;left:var(--c1x);top:var(--c1y);width:18px;height:25px;margin:-2px 0 0 -2px;opacity:0;filter:drop-shadow(0 4px 8px rgb(0 0 0/.3));pointer-events:none}
.has-motion .app-tile .crop-ring{opacity:0}
.has-motion .app-tile.is-in .crop-ring.r1{animation:ring-one 7s ease .4s infinite}
.has-motion .app-tile.is-in .crop.has-two .crop-ring.r1{animation-name:ring-a}
.has-motion .app-tile.is-in .crop.has-two .crop-ring.r2{animation:ring-b 7s ease .4s infinite}
.has-motion .app-tile.is-in .crop-cursor{animation:crop-cursor 7s cubic-bezier(.45,0,.25,1) .4s infinite}
@keyframes ring-one{0%,26%{opacity:0;scale:1.08}32%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes ring-a{0%,26%{opacity:0;scale:1.08}32%,52%{opacity:1;scale:1}58%,100%{opacity:0;scale:1}}
@keyframes ring-b{0%,58%{opacity:0;scale:1.08}64%,88%{opacity:1;scale:1}94%,100%{opacity:0;scale:1}}
@keyframes crop-cursor{0%{opacity:0;left:94%;top:108%;scale:1}8%{opacity:1;left:94%;top:108%}26%{left:var(--c1x);top:var(--c1y);scale:1}29%{scale:.78}32%{scale:1;left:var(--c1x);top:var(--c1y)}52%{left:var(--c1x);top:var(--c1y)}60%{left:var(--c2x);top:var(--c2y);scale:1}63%{scale:.78}66%{scale:1;left:var(--c2x);top:var(--c2y)}88%{opacity:1;left:var(--c2x);top:var(--c2y)}95%,100%{opacity:0;left:var(--c2x);top:var(--c2y)}}
@media(prefers-reduced-motion:reduce){.crop-ring{opacity:1!important}.crop.has-two .crop-ring.r2,.crop-cursor{opacity:0!important}}
/* Contact, bloc rendez-vous : « échange. » était encre sur encre (invisible). Surligné fluo comme les autres titres, titre sur 3 lignes. */
.v2-legacy .home-booking .home-booking-copy h2{font-size:clamp(36px,3.9vw,56px);max-width:600px}
.v2-legacy .home-booking .home-booking-copy h2 strong{padding:0 .14em;border-radius:.12em;background-color:var(--fluo);background-image:var(--grain);box-shadow:var(--halo);color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* Calendly affiché directement : le cadre prend la hauteur du calendrier. */
.v2-legacy .home-booking-calendar.calendar-loaded{border-style:solid;border-color:transparent;background:#fff;overflow:hidden}
.v2-legacy .home-booking-calendar.calendar-loaded iframe{display:block;width:100%;min-height:700px;border:0}
.v2-legacy .home-booking .home-booking-copy h2{font-size:clamp(34px,3.4vw,50px);max-width:none;margin-bottom:34px;line-height:1.02}

/* Agence : figurines emballées qui tournent, sans décor (28/09). Vidéo à fond transparent. */
.ph-scene.agv{position:relative;inset:auto;display:flex;align-items:center;justify-content:center}
.ph-agency .ph-visual{min-height:0}
.agv-fig{--h:min(720px,86svh);display:block;height:var(--h);margin-block:calc(var(--h) * -.07);width:auto;max-width:100%;aspect-ratio:2/3;background:transparent;object-fit:contain;pointer-events:none}
.has-motion .ph-visual .agv-fig{opacity:0;translate:0 24px}
.has-motion .ph-visual.is-in .agv-fig{animation:agv-in .9s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes agv-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:1100px){.ph-agency .ph-visual{min-height:0}}
@media(max-width:760px){.ph-agency .ph-visual{min-height:0;overflow:visible}.agv-fig{--h:min(560px,120vw)}}
@media(prefers-reduced-motion:reduce){.agv-fig{opacity:1!important;translate:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.pfv-monitor{translate:none!important}}
/* Pied de page : ancrage local (SEO, 28/09). */
.footer-local{flex-basis:100%;order:-1;margin:0 0 6px;font-size:14px;color:#a8a8a0}

/* L'app, hero : séquence synchronisée (boucle 14 s). Curseur, saisie et badge dans l'écran, positions en % de l'écran 1440 × 900. */
.apv-screen .ph-cursor{left:60%;top:96%;width:clamp(14px,2.2%,20px);height:auto;aspect-ratio:20/28}
.apv-s3b,.apv-s4{opacity:0}
/* Masque blanc posé sur le texte de la capture « saisie » (1066 → 1332 px ; 733 → 757 px) : il se retire vers la droite. */
.apv-mask{position:absolute;z-index:1;left:74.03%;top:81.44%;width:18.47%;height:2.67%;background:#fff;opacity:0}
.apv-caret{position:absolute;z-index:2;left:74.1%;top:81.44%;width:2px;height:2.67%;background:var(--ink);opacity:0}
.apv-toast{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:.55em .9em;border-radius:999px;font-size:clamp(10px,1.35vw,14px);font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -12px rgb(0 0 0/.45);opacity:0}
.apv-n3{right:2.5%;top:62%;background-color:var(--fluo);background-image:var(--grain);box-shadow:0 0 24px rgb(247 255 60/.85);color:var(--ink)}
.apv-n3 svg{width:1.1em;height:1.1em}
.has-motion .ph-visual.is-in .apv-s2{animation:apv-s2 14s cubic-bezier(.65,0,.35,1) .6s infinite}
.has-motion .ph-visual.is-in .apv-s3{animation:apv-s3 14s cubic-bezier(.65,0,.35,1) .6s infinite}
.has-motion .ph-visual.is-in .apv-s3b{animation:apv-s3b 14s linear .6s infinite}
.has-motion .ph-visual.is-in .apv-mask{animation:apv-mask 14s linear .6s infinite}
.has-motion .ph-visual.is-in .apv-caret{animation:apv-caret 14s linear .6s infinite}
.has-motion .ph-visual.is-in .apv-s4{animation:apv-s4 14s linear .6s infinite}
.has-motion .ph-visual.is-in .apv-n1{animation:apv-n1 14s ease .6s infinite both}
.has-motion .ph-visual.is-in .apv-n3{animation:apv-n3 14s ease .6s infinite both}
.has-motion .ph-visual.is-in .apv-screen .ph-cursor{animation:apv-cursor 14s cubic-bezier(.45,0,.25,1) .6s infinite both}
/* 1 · accueil : notification, clic « Voir la livraison » (12,5 %) */
@keyframes apv-n1{0%,2%{opacity:0;translate:0 20px}5%,11%{opacity:1;translate:0 0}14%,100%{opacity:0;translate:0 0}}
@keyframes apv-s2{0%,14%{translate:101% 0;opacity:1}18%,92%{translate:0 0;opacity:1}96%,100%{translate:0 0;opacity:0}}
/* 2 · livraison : clic sur le film (27,5 %) → lecteur, zone de retour vide */
@keyframes apv-s3{0%,29%{translate:101% 0;opacity:1}33%,92%{translate:0 0;opacity:1}96%,100%{translate:0 0;opacity:0}}
/* 3 · clic dans la zone de retour (39,5 %) → zone active ; le texte s'écrit de 41 % à 55 % */
@keyframes apv-s3b{0%,39.4%{opacity:0}39.6%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes apv-mask{0%,39.4%{opacity:0;clip-path:inset(0 0 0 0)}39.6%,41%{opacity:1;clip-path:inset(0 0 0 0);animation-timing-function:steps(37,end)}55%,92%{opacity:1;clip-path:inset(0 0 0 100%)}96%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes apv-caret{0%,39.4%{opacity:0;left:74.1%}39.6%,41%{opacity:1;left:74.1%;animation-timing-function:steps(37,end)}55%{opacity:1;left:92.3%}60.9%{opacity:1;left:92.3%}61%,100%{opacity:0;left:92.3%}}
/* 4 · clic « Publier le retour » (60 %) → le retour apparaît dans la liste */
@keyframes apv-s4{0%,60.9%{opacity:0}61.2%,92%{opacity:1}96%,100%{opacity:0}}
/* 5 · clic « Demander la retouche » (70 %) → « Demande envoyée » */
@keyframes apv-n3{0%,70.5%{opacity:0;scale:.6}72.5%{opacity:1;scale:1.08}74%,92%{opacity:1;scale:1}96%,100%{opacity:0;scale:1}}
@keyframes apv-cursor{
 0%{opacity:0;left:60%;top:96%;scale:1}3%{opacity:1;left:60%;top:96%}
 11%{left:27.5%;top:79.4%;scale:1}12.5%{scale:.78}14%{scale:1;left:27.5%;top:79.4%}
 22%{left:27.5%;top:79.4%}26%{left:25.6%;top:71.9%;scale:1}27.5%{scale:.78}29%{scale:1;left:25.6%;top:71.9%}
 34%{left:25.6%;top:71.9%}38%{left:80%;top:85.6%;scale:1}39.5%{scale:.78}41%{scale:1;left:80%;top:85.6%}
 52%{left:90%;top:88.5%}58%{left:96.88%;top:90.28%;scale:1}60%{scale:.78}61.5%{scale:1;left:96.88%;top:90.28%}
 64%{left:96.88%;top:90.28%}68%{left:81.14%;top:75.33%;scale:1}70%{scale:.78}71.5%{scale:1;left:81.14%;top:75.33%}
 92%{opacity:1;left:81.14%;top:75.33%}96%,100%{opacity:0;left:81.14%;top:75.33%}}
@media(prefers-reduced-motion:reduce){.apv-toast,.apv-mask,.apv-caret{display:none}}
/* Plus de débordement à droite : « Valider ce fichier » et les badges restent visibles (29/09). */
.apv .apv-window,.ph-app .apv .apv-window{width:100%}
/* Repères : forme calée sur l'élément visé (29/09). */
.crop-ring.is-pill{border-radius:999px}
.crop-ring.is-soft{border-radius:10px}
/* Badge « Demande envoyée » : plus discret, dans l'espace vide au-dessus du bloc noir (29/09). */
.apv-screen .apv-toast{font-size:clamp(9px,1.05vw,13px)}
.apv-n3{top:49%}
/* Contact, bloc « Le point de départ peut être simple. » : marge intérieure (le texte touchait le bord) et restes bleus de l'ancienne charte (29/09). */
.v2-legacy .new-contact-layout aside{padding:36px}
.v2-legacy .new-contact-layout aside p:not(.eyebrow){color:var(--text-2)}
.v2-legacy .new-contact-layout .social-links p{color:var(--text-2)}
.v2-legacy .new-contact-layout .social-links a{border:1px solid rgb(14 14 12/.14);background:var(--paper);color:var(--ink);box-shadow:none}
.v2-legacy .new-contact-layout .social-links a:hover{background:var(--grey)}
@media(max-width:760px){.v2-legacy .new-contact-layout aside{padding:26px 20px}}
.v2-legacy #devis p,.v2-legacy #devis .field-note,.v2-legacy #devis small{color:var(--text-2)}
.v2-legacy #devis a{color:var(--ink)}