/* ═════════════════════════════════════════════
   Le film v2 (2026-09-23) — la page a un fond, cinq voix typographiques,
   de nouvelles pièces (sticker, avis, cartes produit, bandeau) et plus de mouvement.
   Palette : craie, encre, rose, orange, vert, violet, accent.
   ═════════════════════════════════════════════ */

/* ── la scène : un quatrième halo et une trame de points ── */
.film__blob--4{width:30%;aspect-ratio:1;right:18%;bottom:-20%;background:var(--vert);animation-delay:-3s}
.film__blob--2{background:var(--violet)}
.film__grid{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(244,241,236,.14) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask:radial-gradient(70% 70% at 50% 45%,#000,transparent);mask:radial-gradient(70% 70% at 50% 45%,#000,transparent)}

/* ── le fond de la page composée ── */
.board__canvas{--pg:#fff;--pg-ink:var(--ink);--pg-mut:var(--ink-3);--pg-line:var(--craie-2);background:var(--pg);color:var(--pg-ink);transition:background .9s var(--ease),color .6s}
.film__board[data-bg="aura"] .board__canvas{--pg:var(--craie)}
.film__board[data-bg="nuit"] .board__canvas{--pg:#171514;--pg-ink:var(--craie);--pg-mut:rgba(244,241,236,.55);--pg-line:rgba(244,241,236,.14)}
.cv--bg{inset:0;opacity:1;z-index:0;pointer-events:none;overflow:hidden}
.cv--bg i{position:absolute;border-radius:50%;filter:blur(38px);opacity:0;transform:scale(.4);transition:opacity 1s var(--ease),transform 1.4s var(--spring),background 1s}
.cv--bg i:nth-child(1){width:46%;aspect-ratio:1;right:-8%;top:-18%;background:var(--mood,var(--rose))}
.cv--bg i:nth-child(2){width:34%;aspect-ratio:1;left:-10%;bottom:-16%;background:var(--orange)}
.cv--bg i:nth-child(3){width:26%;aspect-ratio:1;left:38%;top:30%;background:var(--violet)}
.film__board:is([data-bg="aura"],[data-bg="nuit"]) .cv--bg i{opacity:.55;transform:none;animation:bgdrift 8s ease-in-out infinite alternate}
.film__board[data-bg="nuit"] .cv--bg i{opacity:.4}
.cv--bg i:nth-child(2){animation-delay:-3s!important}.cv--bg i:nth-child(3){animation-delay:-5s!important}
@keyframes bgdrift{to{translate:6% 8%}}
.board__canvas>.cv:not(.cv--bg):not(.cv--sig):not(.cv--burst){z-index:1}

/* ── la barre : un vrai menu ── */
.cv--nav{border-bottom-color:var(--pg-line);gap:5%;font:500 clamp(7px,.8vw,10px)/1 var(--text);transform:translateY(-100%);transition:opacity .4s,transform .7s var(--spring),border-color .6s}
.cv--nav.is-in{transform:none}
.cv--nav b.cvn__logo{width:auto;height:auto;background:none;border-radius:0;font:600 clamp(11px,1.4vw,18px)/1 var(--font);font-size:calc(clamp(11px,1.4vw,18px) * var(--fsc,1));color:var(--pg-ink);margin-right:auto;transition:color .6s}
.cv--nav i{width:auto;height:auto;background:none;border-radius:0;color:var(--pg-mut);font-style:normal}
.cv--nav i.cvn__cta{margin-left:0;width:auto;height:auto;padding:.7em 1.2em;border-radius:999px;background:var(--mood,var(--accent));color:#fff;font-weight:600;transition:background .5s}

/* ── les textes ── */
.cv--eyebrow{left:6%;top:16%;font:400 clamp(7px,.75vw,10px)/1 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mood,var(--accent));transform:translateY(10px);transition:opacity .4s,transform .6s var(--spring),color .5s}
.cv--eyebrow.is-in{transform:none}
.cv--title{top:21%;max-width:48%;font-size:calc(clamp(16px,2.6vw,34px) * var(--fsc,1));color:var(--pg-ink);transition:color .6s,opacity .35s}
.cv--text{top:38%;width:38%}
.cv--text i{background:var(--pg-line);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease),background .6s}
.cv--text.is-in i{transform:none}
.cv--text.is-in i:nth-child(2){transition-delay:.08s}.cv--text.is-in i:nth-child(3){transition-delay:.16s}

/* ── l'image se dévoile par un volet ── */
.cv--img{left:57%;top:15%;width:28%;aspect-ratio:4/5;clip-path:inset(100% 0 0 0 round 14px);transform:none!important;transition:clip-path 1s cubic-bezier(.7,0,.2,1),opacity .2s}
.cv--img.is-in{clip-path:inset(0 0 0 0 round 14px)}
.cv--img img{transform:scale(1.3);transition:transform 1.6s var(--ease)}
.cv--img.is-in img{transform:none}

/* ── sticker tournant ── */
.cv--sticker{left:49.5%;top:10%;width:12%;aspect-ratio:1;border-radius:50%;background:var(--mood,var(--accent));color:#fff;display:grid;place-items:center;transform:scale(0) rotate(-90deg);transition:opacity .2s,transform .7s var(--spring),background .5s;box-shadow:0 14px 26px -12px rgba(0,0,0,.45)}
.cv--sticker.is-in{transform:none}
.cv--sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 12s linear infinite}
.cv--sticker text{font:600 10.5px 'Space Mono',monospace;letter-spacing:.14em;fill:#fff}
.cv--sticker b{font-size:clamp(10px,1.4vw,18px);line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── avis ── */
.cv--rate{left:62%;top:73%;display:flex;flex-direction:column;gap:3px;padding:.8em 1em;border-radius:12px;background:#fff;color:var(--ink);font:500 clamp(7px,.75vw,10px)/1 var(--text);box-shadow:0 16px 30px -14px rgba(0,0,0,.4);transform:translateX(30px);transition:opacity .3s,transform .7s var(--spring)}
.cv--rate.is-in{transform:none}
.cv--rate b{color:var(--orange);letter-spacing:.1em;font-size:1.15em}

/* ── bouton ── */
.cv--btn{transition:opacity .3s,transform .6s var(--spring),left .55s var(--ease),top .55s var(--ease),background .4s;transform:scale(.6)}
.cv--btn.is-in{transform:none}

/* ── cartes produit ── */
.cv--card{width:13%;aspect-ratio:4/5;padding:7% 0 0;background:var(--c);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:0 .7em .7em;font:500 clamp(6px,.7vw,9px)/1.15 var(--text)}
.cv--card::after{display:none}
.cv--card em{position:absolute;left:.7em;top:.7em;padding:.35em .6em;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);font:600 .85em/1 var(--text);font-style:normal;letter-spacing:.04em}
.cv--card b{font:600 1.25em/1.1 var(--font);letter-spacing:-.02em}
.cv--card span{opacity:.85}
.cv--card::before{content:"";position:absolute;right:-20%;top:-20%;width:80%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.22)}

/* ── bandeau défilant ── */
.cv--marquee{left:0;right:0;bottom:0;height:9%;display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--craie);font:400 clamp(7px,.8vw,10px)/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;transform:translateY(100%);transition:opacity .3s,transform .7s var(--spring)}
.film__board[data-bg="nuit"] .cv--marquee{background:var(--mood,var(--accent))}
.cv--marquee.is-in{transform:none}
.cv--marquee div{display:flex;white-space:nowrap;animation:marq 9s linear infinite}
.cv--marquee span{padding-right:1em}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── plateau d'outils : cinq polices, trois fonds ── */
.tf[data-f="tight"]{font:600 17px 'Inter Tight'}
.tf[data-f="fraunces"]{font:italic 500 18px 'Fraunces'}
.tf[data-f="syne"]{font:700 16px 'Syne'}
.tf[data-f="cormorant"]{font:500 20px 'Cormorant Garamond'}
.tf[data-f="brush"]{font:400 22px 'Alex Brush'}
.tray__fonts{gap:6px}
.tf{width:36px;height:36px}
.tray__bgs{display:flex;gap:6px}
.tray__bgs i{width:24px;height:24px;border-radius:8px;box-shadow:0 0 0 1px var(--line);transition:transform .4s var(--spring),box-shadow .3s}
.tray__bgs i[data-bg="craie"]{background:var(--craie)}
.tray__bgs i[data-bg="aura"]{background:radial-gradient(circle at 70% 25%,var(--rose),transparent 60%),radial-gradient(circle at 20% 90%,var(--orange),transparent 60%),var(--craie)}
.tray__bgs i[data-bg="nuit"]{background:radial-gradient(circle at 70% 25%,var(--violet),transparent 65%),#171514}
.tray__bgs i.is-pick{transform:scale(1.3);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--accent)}

/* ── la main : un curseur signé ── */
.hand__tag{position:absolute;left:22px;top:22px;padding:4px 9px;border-radius:999px 999px 999px 4px;background:var(--mood,var(--accent));color:#fff;font:600 11px/1 var(--text);white-space:nowrap;transition:background .5s}

/* ── satellites supplémentaires ── */
.sat__aa{transition:font .3s}
.sat--aa .sat__aa{font-size:calc(46px * var(--fsc,1))}
.sat--hex{right:4%;top:36%;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;animation-delay:-1s}
.sat--hex i{width:34px;height:34px;border-radius:10px;background:var(--mood,var(--accent));transition:background .5s}
.sat--hex span{display:flex;flex-direction:column;gap:3px}
.sat--hex b{font:600 14px/1 var(--font);color:var(--ink)}
.sat--hex small{font:500 9px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sat--48{left:5%;top:42%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px;border-radius:18px;background:var(--ink);color:var(--craie);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(244,241,236,.12);animation-delay:-3s}
.sat--48 b{font:600 26px/1 var(--font);letter-spacing:-.05em;color:var(--accent-2)}
.sat--48 small{font:500 9px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.sat--spec{right:5%;top:56%;display:flex;gap:12px;padding:12px 16px;border-radius:999px;font-size:24px;color:var(--ink);animation-delay:-6s}
.sat--btn{bottom:18%;background:var(--mood,var(--accent));transition:filter .9s,opacity .9s,transform .9s,background .5s}
.sat--img{bottom:16%}
.film__board[data-phase="type"] .sat--spec,.film__board[data-phase="color"] .sat--hex,.film__board[data-phase="reveal"] .sat--48{filter:none;opacity:1;transform:scale(1.08)}

@media(max-width:640px){
  .sat--hex,.sat--48,.sat--spec{display:none}
  .tray__fonts{gap:3px}
  .tf{width:26px;height:26px;border-radius:8px}
  .tf[data-f]{font-size:13px}.tf[data-f="brush"]{font-size:16px}
  .tray__bgs{gap:4px}.tray__bgs i{width:16px;height:16px;border-radius:5px}
  .board__screen{aspect-ratio:1/1}
  .board__tray{gap:6px 10px!important;flex-wrap:wrap;padding:8px 6px!important}
  .tray__img{width:26px!important;height:26px!important}
  .tray__colors i{width:15px!important;height:15px!important}
  .cv--title{max-width:50%}
  .cv--img{width:36%;left:56%}
  .cv--rate{top:60%;left:58%}
  .board__screen{top:42%}
  .cv--card{width:17%}
  .cv--sticker{width:16%;left:47%}
  .hand__tag{font-size:9px;padding:3px 7px;left:18px;top:18px}
}
@media(prefers-reduced-motion:reduce){.cv--sticker svg,.cv--marquee div,.cv--bg i{animation:none!important}}

/* ═════════════════════════════════════════════
   Applications (2026-09-23) — cinquième service, type de projet dans le formulaire
   ═════════════════════════════════════════════ */
.bento--services{grid-template-columns:repeat(3,1fr)}
.tile--service-wide{grid-column:1/-1}
.svc__group{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin:14px 0 -4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.svc__group:first-of-type{margin-top:0}
.svc__group b{font:600 30px/1 var(--font);letter-spacing:-.04em;color:var(--ink)}
.svc__group span{padding:5px 11px;border-radius:999px;background:var(--ink);color:var(--accent-2);font:600 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase}
.form__type{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.form__type legend{width:100%;padding:0;margin-bottom:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.7}
.tile--form .form__type label{flex-direction:row;gap:0;text-transform:none;letter-spacing:0;font-size:14px;cursor:pointer}
.form__type input{position:absolute;opacity:0;pointer-events:none}
.form__type b{display:inline-block;padding:9px 16px;border-radius:999px;font-weight:500;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent);transition:background .25s,color .25s,box-shadow .25s}
.form__type input:checked+b{background:var(--accent);color:#fff;box-shadow:none}
.form__type input:focus-visible+b{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:900px){.bento--services{grid-template-columns:repeat(2,1fr)}.svc--last{grid-column:1/-1}}
@media(max-width:640px){.svc--last{grid-column:1/-1!important}.svc__group{margin:10px 0 -10px}.svc__group b{font-size:24px}.form__type b{padding:7px 12px;font-size:13px}}

/* ── L'atelier : l'intertitre « Nous » se détache du texte par un filet ── */
.tile--text .tile__kick{display:flex;align-items:center;gap:14px;margin:0 0 28px!important}
.tile--text .tile__kick::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28}
@media(max-width:640px){.tile--text .tile__kick{margin-bottom:20px!important}}
/* ── titres : chaque début de ligne est ramené sur le bord d'encre de l'intertitre et du texte ── */
.h2 .w:first-child,.h2 br+.w{margin-left:-.045em}

/* ═════════════════════════════════════════════
   Le film v3 (2026-09-23) — sixième temps « Application » :
   le site s'écarte, la même allure arrive dans un téléphone, la réservation tombe,
   puis site et app sont signés ensemble. Satellites dans la langue des cartes.
   ═════════════════════════════════════════════ */
.film__timeline{grid-template-columns:repeat(6,1fr)}
.board__phone{position:absolute;z-index:5;right:11%;top:50%;width:clamp(120px,15.5%,196px);aspect-ratio:9/19;border-radius:28px;padding:7px;background:#0f0e0d;box-shadow:0 60px 90px -40px rgba(0,0,0,.9),inset 0 0 0 1.5px #3a3631,0 0 0 1px rgba(255,255,255,.06);opacity:0;transform:translate(40%,-44%) rotate(8deg) scale(.86);transition:opacity .6s,transform 1.1s cubic-bezier(.65,0,.2,1);pointer-events:none}
.board__phone.is-in{opacity:1;transform:translate(0,-50%) rotate(-3deg)}
.board__phone.is-sig{transform:translate(0,-50%) rotate(0) scale(1.03)}
.ph__scr{position:relative;height:100%;border-radius:22px;overflow:hidden;background:var(--craie);color:var(--ink);display:flex;flex-direction:column;gap:7%;padding:8% 9% 0;font-size:clamp(7px,.75vw,10px)}
.ph__scr>*{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--spring)}
.board__phone.is-in .ph__scr>*{opacity:1;transform:none}
.board__phone.is-in .ph__scr>:nth-child(2){transition-delay:.15s}.board__phone.is-in .ph__scr>:nth-child(3){transition-delay:.25s}
.board__phone.is-in .ph__scr>:nth-child(4){transition-delay:.35s}.board__phone.is-in .ph__scr>:nth-child(5){transition-delay:.45s}
.board__phone.is-in .ph__scr>:nth-child(6){transition-delay:.55s}.board__phone.is-in .ph__scr>:nth-child(7){transition-delay:.6s}
.ph__status{display:flex;justify-content:space-between;align-items:center;font:600 .9em/1 var(--text)}
.ph__status i{width:22%;height:.8em;border-radius:3px;background:var(--ink);opacity:.8}
.ph__head{display:flex;justify-content:space-between;align-items:center}
.ph__logo{font:600 1.6em/1 var(--font);font-size:calc(1.6em * var(--fsc,1))}
.ph__head i{width:1.6em;height:1.6em;border-radius:50%;background:var(--mood,var(--accent));transition:background .5s}
.ph__img{position:relative;aspect-ratio:4/3.4;border-radius:12px;overflow:hidden;flex-shrink:0}
.ph__img img{width:100%;height:100%;object-fit:cover}
.ph__chip{position:absolute;left:6%;top:8%;padding:.35em .7em;border-radius:999px;background:rgba(255,255,255,.92);font:600 .85em/1 var(--text)}
.ph__title{font:600 1.45em/1.05 var(--font);font-size:calc(1.45em * var(--fsc,1));letter-spacing:-.03em}
.ph__row{display:flex;gap:6%}
.ph__row i{flex:1;aspect-ratio:1;border-radius:8px;background:var(--c)}
.ph__btn{align-self:stretch;text-align:center;padding:.9em 0;border-radius:999px;background:var(--mood,var(--accent));color:#fff;font:600 1em/1 var(--text);transition:background .5s,transform .2s var(--spring)}
.board__phone.is-tap .ph__btn{animation:ph-tap .45s var(--spring)}
@keyframes ph-tap{40%{transform:scale(.92)}}
.ph__tabs{margin-top:auto;display:flex;justify-content:space-around;padding:6% 0 9%;border-top:1px solid var(--line)}
.ph__tabs i{width:1.3em;height:1.3em;border-radius:5px;background:var(--craie-2)}
.ph__tabs i.on{background:var(--ink)}
.ph__tap{position:absolute;left:50%;bottom:21%;width:44px;height:44px;margin-left:-22px;border-radius:50%;border:2px solid var(--mood,var(--accent));opacity:0}
.board__phone.is-tap .ph__tap{animation:ph-ring .6s var(--ease)}
@keyframes ph-ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
.ph__notif{position:absolute;left:-38%;top:12%;display:flex;align-items:center;gap:8px;padding:9px 12px 9px 9px;border-radius:14px;background:rgba(244,241,236,.96);color:var(--ink);font:500 11px/1.25 var(--text);font-style:normal;white-space:nowrap;box-shadow:0 24px 40px -18px rgba(0,0,0,.8);opacity:0;transform:translateY(-12px) scale(.9);transition:opacity .35s,transform .6s var(--spring)}
.ph__notif>i{width:24px;height:24px;border-radius:7px;background:var(--mood,var(--accent));flex-shrink:0}
.ph__notif>span{display:flex;flex-direction:column}
.ph__notif b{font:600 11px/1.2 var(--text)}
.board__phone.is-notif .ph__notif{opacity:1;transform:none}

/* satellites dans la langue des cartes */
.sat--48{gap:10px;padding:14px 16px 12px}
.s48__top{display:flex;flex-direction:column;align-items:center;gap:4px}
.sat--48 .ob--week{gap:10px;font-size:10px}
.sat--ring{left:42%;top:3%;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--ink);color:var(--craie);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(244,241,236,.12);animation-delay:-2.5s}
.sat--ring .ob--ring{width:28px;height:28px}
.sat--ring small{font:600 10px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.film__board[data-phase="app"] :is(.sat--ring,.sat--48),.film__board[data-phase="reveal"] .sat--ring{filter:none;opacity:1;transform:scale(1.08)}

@media(max-width:640px){
  .board__phone{right:4%;top:44%;width:30%;border-radius:20px;padding:5px}
  .ph__scr{border-radius:16px;font-size:6px}
  .ph__notif{left:-70%;top:6%;font-size:9px;padding:6px 9px 6px 6px}.ph__notif b{font-size:9px}.ph__notif>i{width:18px;height:18px}
  .sat--ring{display:none}
}
@media(prefers-reduced-motion:reduce){.board__phone{transition:none}}

/* ═════════════════════════════════════════════
   Le film v4 — la main compose une page Clairio, dans le nouveau design :
   titre du hero, portrait, cartes d'encre avec leurs objets, puis l'app.
   ═════════════════════════════════════════════ */
.cv--nav{gap:4%}
.cv--nav .nav__mark{width:clamp(16px,1.8vw,22px);height:clamp(16px,1.8vw,22px);font-size:clamp(6px,.65vw,9px);border-radius:5px;flex-shrink:0}
.cv--nav .nav__mark::after{inset:2px;border-radius:3px}
.cv--nav b.cvn__logo{margin-right:auto;margin-left:-2%}
.cv--eyebrow{top:15%;font-family:var(--text);letter-spacing:.02em;text-transform:none;color:var(--pg-mut)}
.cv--title{top:20%;left:6%;max-width:50%;font-size:calc(clamp(18px,3vw,40px) * var(--fsc,1));line-height:.95;letter-spacing:-.05em;font-weight:600}
.cv--title em{font-style:normal;font-weight:300;color:var(--pg-mut)}
.cv--btn{left:6%;top:50%!important;background:var(--ink)!important;color:#fff}
.cv--btn i{background:var(--mood,var(--accent))!important;transition:background .5s}
/* cartes d'encre : même fond que le site (encre + halo d'accent), onglet CL */
.fc{position:absolute;border-radius:clamp(10px,1.4vw,18px);color:#f4f1ec;background:radial-gradient(90% 80% at 85% 0%,color-mix(in oklch,var(--mood,var(--accent)) 55%,transparent),transparent 70%),#171514!important;box-shadow:0 18px 30px -18px rgba(0,0,0,.6),inset 0 0 0 1px rgba(244,241,236,.08);transition:opacity .3s,transform .7s var(--spring),left .55s var(--ease),top .55s var(--ease),background .5s}
.fc__tab{position:absolute;left:10%;top:-.8em;padding:.25em .6em;border-radius:999px;background:var(--craie);color:var(--ink);font:600 clamp(5px,.55vw,8px)/1.2 var(--font);letter-spacing:.08em;white-space:nowrap;z-index:2}
.fc__tab b{color:var(--mood,var(--accent));font-weight:600}
.cv--img.fc{left:57%;top:14%;width:37%;height:auto;aspect-ratio:auto;display:grid;grid-template-columns:44% 1fr;overflow:visible;clip-path:none;transform:translateY(20px) scale(.9)!important;opacity:0}
.cv--img.fc.is-in{transform:none!important;opacity:1}
.fc__photo{margin:5%;aspect-ratio:4/5;border-radius:clamp(6px,.9vw,12px);overflow:hidden;background:#f4f1ec}
.fc__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.fc__txt{display:flex;flex-direction:column;justify-content:flex-end;gap:.4em;padding:0 10% 14% 4%}
.fc__txt b{font:600 clamp(11px,1.5vw,20px)/1 var(--font);letter-spacing:-.04em}
.fc__txt small{font:500 clamp(6px,.65vw,9px)/1 var(--text);color:rgba(244,241,236,.6)}
.cv--card.fc{width:21.5%;height:30%;aspect-ratio:auto;padding:0 3% 5%!important;display:flex;flex-direction:column;justify-content:flex-end;gap:6%;font:inherit;overflow:visible}
.cv--card.fc::before,.cv--card.fc::after{display:none}
.cv--card.fc>b{font:600 clamp(7px,.95vw,13px)/1.05 var(--font);letter-spacing:-.03em}
/* objets miniatures, animés quand la carte est posée */
.fo{position:relative}
.fo--eq{display:flex;align-items:flex-end;gap:5%;height:40%}
.fo--eq i{flex:1;height:30%;border-radius:2px;background:linear-gradient(var(--accent-2),var(--mood,var(--accent)))}
.is-live .fo--eq i{animation:fo-eq 1.4s ease-in-out infinite alternate}
.fo--eq i:nth-child(2n){animation-delay:-.3s}.fo--eq i:nth-child(3n){animation-delay:-.7s}.fo--eq i:nth-child(5n){animation-delay:-1s}
@keyframes fo-eq{to{height:100%}}
.fo--track{height:3px;border-radius:2px;background:rgba(244,241,236,.14);margin-bottom:4%}
.fo--track u{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent-2);width:30%}
.fo--track i{position:absolute;top:50%;left:30%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#f4f1ec;box-shadow:0 0 0 3px color-mix(in oklch,var(--mood,var(--accent)) 50%,transparent)}
.is-live .fo--track u,.board__phone.is-in .fo--track u{animation:fo-w 2.6s var(--ease) infinite}
.is-live .fo--track i,.board__phone.is-in .fo--track i{animation:fo-l 2.6s var(--ease) infinite}
@keyframes fo-w{0%{width:0}70%,100%{width:100%}}
@keyframes fo-l{0%{left:0}70%,100%{left:100%}}
.fo__days{display:flex;justify-content:space-between;align-items:center;font:500 clamp(5px,.6vw,8px)/1 var(--text);color:rgba(244,241,236,.6);margin-bottom:10%}
.fo__days em{font-style:normal;font-weight:600;padding:.3em .6em;border-radius:999px;background:var(--mood,var(--accent));color:#fff;transition:background .5s}
.fo--app{height:44%}
.fo--app>i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:6px;background:#0f0e0d;box-shadow:inset 0 0 0 1.5px #3a3631}
.fo--app>i::before{content:"";position:absolute;inset:22% 18% auto;height:30%;border-radius:3px;background:var(--mood,var(--accent));box-shadow:0 180% 0 -1px var(--accent-2)}
.cv--card.fc .fo--app em{position:absolute;left:20%;top:18%;padding:.45em .6em;border-radius:6px;background:#f4f1ec;color:var(--ink);font:600 clamp(5px,.55vw,8px)/1.1 var(--text);font-style:normal;white-space:nowrap;letter-spacing:0;opacity:0;transform:translateY(6px)}
.is-live .fo--app em{animation:fo-pop 3.2s var(--spring) infinite}
@keyframes fo-pop{0%,10%{opacity:0;transform:translateY(6px)}22%,85%{opacity:1;transform:none}100%{opacity:0}}
.fo--chart{display:flex;align-items:flex-end;gap:7%;height:42%}
.fo--chart i{flex:1;height:var(--h);border-radius:2px 2px 1px 1px;background:linear-gradient(var(--accent-2),var(--mood,var(--accent)));transform-origin:bottom;transform:scaleY(.2)}
.is-live .fo--chart i{animation:fo-bar 3s var(--ease) infinite}
.fo--chart i:nth-child(2){animation-delay:.08s}.fo--chart i:nth-child(3){animation-delay:.16s}.fo--chart i:nth-child(4){animation-delay:.24s}.fo--chart i:nth-child(5){animation-delay:.32s}
@keyframes fo-bar{0%{transform:scaleY(.2)}35%,85%{transform:none}100%{transform:scaleY(.2)}}
/* l'app : même encre, même objets */
.ph__scr{background:#171514;color:#f4f1ec;gap:6%}
.ph__status i{background:#f4f1ec}
.ph__head{justify-content:flex-start;gap:6%}
.ph__head .nav__mark{width:2.2em;height:2.2em;font-size:.8em;border-radius:5px;background:#f4f1ec;color:var(--ink)}
.ph__head .nav__mark::after{inset:2px;border-radius:3px;border-color:rgba(23,21,20,.4)}
.ph__title{font-size:calc(1.35em * var(--fsc,1));line-height:1.08}
.ph__cal{display:flex;gap:4%}
.ph__cal span{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.6em 0;border-radius:7px;background:rgba(244,241,236,.07);font:600 .85em/1 var(--text);color:rgba(244,241,236,.55)}
.ph__cal span b{font:inherit}
.ph__cal span.on{background:color-mix(in oklch,var(--mood,var(--accent)) 30%,transparent);color:#f4f1ec;box-shadow:inset 0 0 0 1px var(--mood,var(--accent))}
.ph__cal span i{font-style:normal;padding:.25em .2em;border-radius:3px;background:var(--mood,var(--accent));color:#fff;font-size:.8em}
.ph__card{padding:9% 8% 2%;border-radius:10px;background:radial-gradient(90% 90% at 90% 0%,color-mix(in oklch,var(--mood,var(--accent)) 50%,transparent),transparent 70%),#221f1c;box-shadow:inset 0 0 0 1px rgba(244,241,236,.08)}
.ph__card .fo__days{font-size:.85em;margin-bottom:4%}
.ph__tabs{border-top-color:rgba(244,241,236,.1)}
.ph__tabs i{background:rgba(244,241,236,.15)}.ph__tabs i.on{background:#f4f1ec}
.board__phone .ph__notif>i{background:#171514 url() center/60% no-repeat;box-shadow:inset 0 0 0 2px var(--mood,var(--accent))}
@media(max-width:640px){
  .cv--title{max-width:54%;top:19%}
  .cv--img.fc{width:40%;left:56%}
  .cv--card.fc{height:26%;top:66%!important}
  .cv--card.fc>b{display:none}
  .cv--eyebrow{display:none}
}
.board__canvas{--pg:var(--craie)}
@media(max-width:640px){.cv--nav i:not(.cvn__cta){display:none}}

/* ── v5 : pas de photo dans le film, la page reste droite ── */
.board__screen{rotate:none}
.cv--img.fc{grid-template-columns:1fr;padding:8% 7% 7%;gap:7%;aspect-ratio:1.45}
.fc__win{border-radius:clamp(6px,.8vw,10px);background:#221f1c;box-shadow:inset 0 0 0 1px rgba(244,241,236,.1);overflow:hidden}
.fw__bar{display:flex;gap:4%;padding:5% 6%;border-bottom:1px solid rgba(244,241,236,.08)}
.fw__bar i{width:.45em;height:.45em;border-radius:50%;background:rgba(244,241,236,.2);font-size:clamp(8px,1vw,14px)}.fw__bar i:first-child{background:var(--mood,var(--accent))}
.fw__body{display:flex;flex-direction:column;gap:.45em;padding:7% 8% 9%;font-size:clamp(6px,.7vw,10px)}
.fw__body i{height:.55em;border-radius:3px;background:rgba(244,241,236,.18)}.fw__body i:first-child{height:1em;width:80%;background:#f4f1ec}.fw__body i:nth-child(3){width:55%}
.fw__body span{display:flex;align-items:center;gap:.6em;margin-top:.4em}
.fw__body span b{padding:.5em 1em;border-radius:999px;background:var(--mood,var(--accent));color:#fff;font:600 1em/1 var(--text);transition:background .5s}
.fw__body span u{width:3.4em;height:1.6em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(244,241,236,.25)}
.fc__tog{justify-self:end;width:34%;aspect-ratio:2.1;border-radius:999px;background:var(--mood,var(--accent));box-shadow:0 0 0 3px #0f0e0d;position:relative;transition:background .5s}
.fc__tog i{position:absolute;right:6%;top:12%;bottom:12%;aspect-ratio:1;border-radius:50%;background:#f4f1ec}
.tray__img--win{display:flex;flex-direction:column;gap:3px;padding:7px 6px;background:#171514;border-radius:10px}
.tray__img--win i{height:4px;border-radius:2px;background:rgba(244,241,236,.25)}.tray__img--win i:first-child{height:8px;background:var(--accent)}.tray__img--win i:last-child{width:60%}
.sat--tog{width:auto;aspect-ratio:auto;padding:0;filter:none;border-radius:999px;background:var(--mood,var(--accent));width:96px;height:46px;box-shadow:0 0 0 4px #171514,0 30px 60px -24px rgba(0,0,0,.7)}
.sat--tog i{position:absolute;right:5px;top:5px;bottom:5px;aspect-ratio:1;border-radius:50%;background:#f4f1ec}
@media(max-width:640px){.sat--tog{display:none}}

/* ═════════════════════════════════════════════
   v6 — plus de confettis ; un orbe liquide vivant à la place de la photo ;
   le téléphone a autant de place que la page.
   ═════════════════════════════════════════════ */
.cv--burst{display:none!important}
.cv--img.fc{padding:6%;aspect-ratio:1.45;display:flex}
.fc__orb{position:relative;flex:1;border-radius:clamp(7px,1vw,12px);overflow:hidden;background:#0f0e0d;isolation:isolate}
.fc__orb>i{position:absolute;border-radius:50%;filter:blur(18px);opacity:.75;mix-blend-mode:screen}
.fc__orb .o1{width:60%;aspect-ratio:1;left:-10%;top:-20%;background:var(--mood,var(--accent));animation:orb-a 7s ease-in-out infinite alternate}
.fc__orb .o2{width:50%;aspect-ratio:1;right:-12%;bottom:-25%;background:var(--violet);animation:orb-b 8s ease-in-out infinite alternate}
.fc__orb .o3{width:40%;aspect-ratio:1;right:10%;top:-10%;background:var(--orange);opacity:.5;animation:orb-a 9s ease-in-out infinite alternate-reverse}
@keyframes orb-a{to{translate:30% 25%}}
@keyframes orb-b{to{translate:-35% -20%}}
@property --oa{syntax:'<angle>';inherits:false;initial-value:0deg}
.fc__orb .sph{position:absolute;left:50%;top:48%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 10%,transparent 26%),
             radial-gradient(circle at 70% 78%,rgba(0,0,0,.45),transparent 55%),
             conic-gradient(from var(--oa),var(--mood,var(--accent)),var(--violet),var(--rose),var(--orange),var(--mood,var(--accent)));
  box-shadow:0 0 40px -6px var(--mood,var(--accent)),inset 0 0 18px rgba(255,255,255,.18);animation:orb-spin 6s linear infinite,orb-float 4s ease-in-out infinite}
.fc__orb .sph u{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from calc(var(--oa) * -1.5),transparent,rgba(255,255,255,.35),transparent 30%);mix-blend-mode:overlay;animation:orb-spin 6s linear infinite}
@keyframes orb-spin{to{--oa:360deg}}
@keyframes orb-float{0%,100%{translate:-50% -50%;scale:1}50%{translate:-50% -56%;scale:1.05}}
.orb__chip{position:absolute;left:6%;bottom:8%;display:flex;align-items:center;gap:.5em;padding:.45em .8em .45em .5em;border-radius:999px;background:rgba(244,241,236,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(244,241,236,.14);font:500 clamp(5px,.6vw,8px)/1 var(--text);color:#f4f1ec;white-space:nowrap}
.orb__chip>i{width:.8em;height:.8em;border-radius:50%;background:var(--mood,var(--accent));box-shadow:0 0 8px var(--mood,var(--accent));animation:orb-pulse 1.6s ease-in-out infinite}
@keyframes orb-pulse{50%{opacity:.4}}
.tray__img--orb{display:grid;place-items:center;background:#0f0e0d;border-radius:10px;overflow:hidden}
.tray__img--orb b{width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0,transparent 30%),conic-gradient(from var(--oa),var(--accent),var(--violet),var(--rose),var(--orange),var(--accent));animation:orb-spin 6s linear infinite}
/* le téléphone, à égalité avec la page */
.board__phone{right:8%;width:clamp(150px,21%,262px);border-radius:34px;padding:8px}
.board__phone.is-in{transform:translate(0,-50%) rotate(0)}
.board__phone.is-sig{transform:translate(0,-50%) scale(1.02)}
.board__phone .ph__scr{border-radius:27px;font-size:clamp(8px,.95vw,12px)}
.board__phone .ph__notif{left:-44%;top:9%;font-size:12px;padding:10px 14px 10px 10px}
.board__phone .ph__notif b{font-size:12px}
/* interrupteurs du film : même capsule d'encre que celle du hero */
.sat--tog{background:#171514!important;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(244,241,236,.12)!important}
.sat--tog i{background:var(--mood,var(--accent));box-shadow:0 6px 14px -6px var(--mood,var(--accent));display:grid;place-items:center}
.sat--tog i::after{content:"";width:9px;height:9px;border-radius:50%;background:#f4f1ec}
@media(max-width:640px){
  .board__phone{right:3%;width:38%;border-radius:22px;padding:5px}
  .board__phone .ph__scr{border-radius:17px;font-size:6.5px}
  .board__phone .ph__notif{left:-60%;font-size:9px;padding:6px 9px 6px 6px}.board__phone .ph__notif b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.fc__orb *,.tray__img--orb b{animation:none!important}}
/* ── la page du film a toujours son fond coloré (plus de blanc) ── */
.board__canvas,.film__board[data-bg] .board__canvas{--pg:var(--craie)}
.cv--bg i,.film__board .cv--bg i{opacity:.55;transform:none;animation:bgdrift 8s ease-in-out infinite alternate}
.film__board[data-bg="aura"] .cv--bg i{opacity:.7}