/* Space Mono dessine un zéro pointé : ses chiffres sont remplacés par ceux de Space Grotesk */
@font-face{font-family:'Otopcy Digits';src:url('assets/fonts/SpaceGrotesk.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'Yemvak Sans';src:url('assets/fonts/YemvakSans.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --white:#fff; --black:#0a0a0a; --blue:#0076ff; --blue-deep:#0058c2; --blue-soft:#e5f0ff;
  --green:#009d32; --violet:#883ff0; --yellow:#ffa900; --red:#fa0005;
  --display:'Yemvak Sans',system-ui,sans-serif; --ui:'Space Grotesk',system-ui,sans-serif; --mono:'Otopcy Digits','Space Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,96px); --r:28px; --ease:cubic-bezier(.2,.8,.2,1);
}
/* Thèmes de section : chaque section déclare le sien, la nav s'y adapte */
.light{--bg:#fff;--fg:#0a0a0a;--dim:#a3a3a3;--muted:#6f6f6f;--line:#e6e6e6;--card:#f5f5f7;
  --globe-ocean:#f5f5f7;--globe-dot:#98a3b5;--globe-arc:rgba(0,118,255,.6)}
.grey{--bg:#f5f5f7;--fg:#0a0a0a;--dim:#a3a3a3;--muted:#6f6f6f;--line:#e2e2e5;--card:#fff}
.dark{--bg:#000;--fg:#fff;--dim:#4d4d4d;--muted:#8a8a8a;--line:#1f1f1f;--card:#0e0e10;
  --globe-ocean:#04060b;--globe-ocean-hi:#0c1a33;--globe-dot:#3a5580;--globe-arc:rgba(80,160,255,.85)}
.blue{--bg:var(--blue);--fg:#fff;--dim:rgba(255,255,255,.55);--muted:rgba(255,255,255,.8);--line:rgba(255,255,255,.25);--card:rgba(255,255,255,.12)}
section,header.hero,footer{background:var(--bg);color:var(--fg)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#0a0a0a;font-family:var(--display);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,canvas{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:999px;font-family:var(--ui)}
.skip:focus{top:16px}

/* ---------- Typo ---------- */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.h2{font-weight:700;letter-spacing:-.045em;line-height:.95;font-size:clamp(40px,6vw,96px);margin-top:18px}
.dim{color:var(--dim)}
.lead{font-family:var(--ui);color:var(--muted);font-size:clamp(16px,1.3vw,20px);max-width:46ch}
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .12em .16em;margin:0 -.12em -.16em}
.split-w>span{display:inline-block}

/* ---------- Verre liquide (port CSS du composant LiquidButton : mêmes ombres, même filtre SVG) ---------- */
:root{
  --glass-shadow:0 1px 2px rgba(10,10,10,.04),0 6px 18px rgba(10,10,10,.05),inset 0 0 0 1px rgba(10,10,10,.07),inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.95),inset -1px -1px 0 -.5px rgba(255,255,255,.7),inset 0 0 10px 3px rgba(255,255,255,.45),inset 3px 3px .5px -3px rgba(10,10,10,.14),inset -3px -3px .5px -3px rgba(10,10,10,.12);
  --glass-shadow-dark:0 2px 10px rgba(0,0,0,.12),inset 0 0 0 1px rgba(255,255,255,.14),inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1px -1px 0 -.5px rgba(255,255,255,.3),inset 0 0 8px 2px rgba(255,255,255,.08);
  --gs:var(--glass-shadow); --glass-tint:rgba(255,255,255,.22);
}
.dark,.blue,.expertise,.menu,.hd.on-dark{--gs:var(--glass-shadow-dark);--glass-tint:rgba(255,255,255,.06)}
.glass,.btn{position:relative;isolation:isolate;background:var(--glass-tint)}
.glass::before,.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--gs);pointer-events:none;transition:box-shadow .4s}
.glass::after,.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none;
  -webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8)}
/* shortcut: la distorsion SVG en backdrop-filter n'existe que sous Chromium ; Safari et Firefox gardent le flou classique */
html.glass-svg .glass::after,html.glass-svg .btn::after{backdrop-filter:url(#container-glass)}

/* ---------- Boutons en verre liquide ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;color:var(--fg);font-family:var(--ui);font-weight:600;font-size:15px;transition:transform .3s var(--ease),filter .3s}
.btn:active{transform:scale(.98)}
/* boutons colorés : pleins (une couleur translucide laisse voir la page en taches), avec un reflet discret */
.btn--blue{background:linear-gradient(180deg,#2a8cff,#0070f0);color:#fff;--gs:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,50,120,.2),0 8px 22px rgba(0,118,255,.22)}
.btn--dark{background:linear-gradient(180deg,#2a2a2e,#0a0a0a);color:#fff;--gs:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px rgba(0,0,0,.18)}
.btn--white{background:#fff;color:var(--blue);--gs:inset 0 0 0 1px rgba(10,10,10,.06),0 8px 22px rgba(0,0,0,.08)}
.btn--blue::after,.btn--dark::after,.btn--white::after{display:none}
.btn--blue:hover,.btn--dark:hover{filter:brightness(1.07)}
.btn i{font-style:normal;transition:transform .4s var(--ease)}

/* ---------- En-tête : éléments indépendants (menus, logo, recherche, bouton) ---------- */
.hd{--h:26px;position:fixed;inset:12px 0 auto;max-width:1160px;margin-inline:auto;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:0 clamp(12px,2.4vw,40px);color:#0a0a0a;font-family:var(--ui);font-size:14px;pointer-events:none;transition:color .4s}
.hd>*{pointer-events:auto}
.hd.on-dark,.hd.on-color{color:#fff}
/* Verre de l'en-tête : toujours clair et lumineux (jamais une teinte sombre), il prend la couleur de ce qu'il y a derrière.
   Liseré brillant, reflet en haut, ombre douce : la lecture du verre liquide. */
.hd .glass{--glass-tint:rgba(255,255,255,.6);
  --gs:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(10,10,10,.04),0 0 0 1px rgba(10,10,10,.05),0 8px 24px rgba(10,10,10,.07)}
.hd.on-dark .glass{--glass-tint:rgba(255,255,255,.1);
  --gs:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.32),0 8px 24px rgba(0,0,0,.25)}
.hd.on-color .glass{--glass-tint:rgba(255,255,255,.2);
  --gs:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.7),0 8px 24px rgba(0,0,0,.1)}
/* flou net (la distorsion ferait des taches au passage du texte) et lumière : le verre éclaircit ce qu'il recouvre */
html.glass-svg .hd .glass::after,.hd .glass::after{-webkit-backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);backdrop-filter:blur(20px) saturate(1.8) brightness(1.06)}
/* le logo garde un fond clair sur les couleurs, sinon son « o » bleu ou son « t » vert se fondent dans le fond */
.hd.on-color .hd__logo.glass{--glass-tint:rgba(255,255,255,.82)}
.hd.on-color .glass::after{-webkit-backdrop-filter:blur(20px) saturate(1.5) brightness(1.18);backdrop-filter:blur(20px) saturate(1.5) brightness(1.18)}
/* voile de profondeur : quand un menu s'ouvre, la page recule */
.hd-scrim{position:fixed;inset:0;z-index:58;background:rgba(10,10,10,.24);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .4s}
.hd-scrim.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.mega,.nw,.sr{box-shadow:0 24px 60px rgba(0,0,0,.18);--gs:inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 1px rgba(10,10,10,.07)}
.hd__group{display:flex;align-items:center;gap:8px}
.hd__group--r{justify-content:flex-end}
.hd__caps{display:flex;align-items:center;gap:0;height:44px;padding:0 4px;border-radius:999px}
.hd__link{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 13px;border-radius:999px;font-weight:500;white-space:nowrap;transition:background .25s}
.hd__link:hover,.hd__link[aria-expanded=true]{background:color-mix(in srgb,currentColor 9%,transparent)}
.hd__link svg{width:11px;height:11px;transition:rotate .3s var(--ease)}
.hd__link[aria-expanded=true] svg{rotate:180deg}
.hd__link--icon{width:36px;padding:0;justify-content:center;flex:none}
.hd__link--icon svg{width:18px;height:18px}
/* Connexion : capsule de verre discrète, à côté du bouton d'action */
.hd__login{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;font-weight:500;white-space:nowrap;flex:none;transition:filter .25s}
.hd__login:hover{filter:brightness(1.04)}
/* pendant la recherche, le champ prend la place de Connexion pour ne jamais toucher le logo */
.hd.is-searching .hd__login,.hd.is-searching .hd__store{display:none}
/* bouton d'action sobre : plus petit, ombre discrète */
.hd__cta{height:40px;padding:0 16px;font-size:14px;flex:none;--gs:inset 0 1px 0 rgba(255,255,255,.28),0 2px 10px rgba(0,118,255,.22)}
.hd__cta:hover{transform:none;filter:brightness(1.08)}

/* Logo dans sa propre capsule de verre : le contenu de la page ne passe plus derrière les lettres à nu.
   Repli et déploiement uniquement en transform et opacity (aucune largeur d'image animée) : fluide. */
.hd{--fold:cubic-bezier(.32,.72,0,1);--fold-t:.42s}
.hd__logo{position:relative;display:block;width:calc(var(--h) * 3.894 + 30px);height:44px;border-radius:999px;overflow:hidden;transition:width var(--fold-t) var(--fold)}
.hd__mark{position:absolute;left:50%;top:50%;display:flex;transform:translate(-50%,-50%);transition:transform var(--fold-t) var(--fold)}
.hd__mark img{height:var(--h);flex:none;transition:transform var(--fold-t) var(--fold),opacity .35s var(--fold)}
.hd__mark .lg-a{width:calc(var(--h) * 1.156)}
.hd__mark .lg-o{width:calc(var(--h) * .706)}
.hd__mark .lg-b{width:calc(var(--h) * 2.032)}
.hd__logo .lg-ico{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;opacity:0;transform:scale(.6) rotate(-60deg);transition:opacity .35s var(--fold),transform var(--fold-t) var(--fold)}
.hd__ring{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--fold);pointer-events:none}
.hd__ring svg{width:100%;height:100%;rotate:-90deg}
.hd__ring circle{fill:none;stroke-width:2.5}
.hd__ring .bg{stroke:color-mix(in srgb,currentColor 12%,transparent)}
.hd__ring .fg{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:calc(var(--p,0) * 100) 100;transition:stroke-dasharray .2s}

/* petite animation quand la page est immobile : « ot » et « pcy » se rangent derrière le « o », puis reviennent */
.hd.is-blink .lg-a{transform:translateX(calc(var(--h) * .9)) scale(.7);opacity:0}
.hd.is-blink .lg-b{transform:translateX(calc(var(--h) * -1.6)) scale(.7);opacity:0}
.hd.is-blink .hd__logo{width:44px}
.hd.is-blink .hd__mark{transform:translate(calc(-50% + var(--h) * .438),-50%)}
.hd.is-blink .lg-o{opacity:0}
.hd.is-blink .lg-ico{opacity:1;transform:none}
.hd.is-spin .lg-ico{animation:icoSpin 1.2s var(--fold)}
@keyframes icoSpin{to{rotate:360deg}}

/* Bulle : les capsules glissent vers le centre en s'effaçant, le logo se resserre sur le « o » qui laisse place à l'icône */
.hd__group{transition:opacity .28s var(--fold) .06s,transform var(--fold-t) var(--fold)}
.hd.is-island .hd__group{opacity:0;pointer-events:none;transition:opacity .18s var(--fold),transform var(--fold-t) var(--fold)}
.hd.is-island .hd__group--l{transform:translateX(24px) scale(.97)}
.hd.is-island .hd__group--r{transform:translateX(-24px) scale(.97)}
.hd.is-island .hd__logo{width:44px}
.hd.is-island .hd__mark{transform:translate(calc(-50% + var(--h) * .438),-50%)}
.hd.is-island .lg-a{transform:translateX(calc(var(--h) * .9)) scale(.7);opacity:0}
.hd.is-island .lg-b{transform:translateX(calc(var(--h) * -1.6)) scale(.7);opacity:0}
.hd.is-island .lg-o{opacity:0;transition-delay:.06s}
.hd.is-island .lg-ico{opacity:1;transform:none;transition-delay:.04s}
.hd.is-island .hd__ring{opacity:1}

/* Menus déroulants en verre : Solutions (grand) et Nouveautés (petit) */
.mega,.nw{position:fixed;top:68px;z-index:59;color:#0a0a0a;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top center;transition:opacity .25s,transform .4s var(--ease),visibility 0s .4s}
.mega.is-open,.nw.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .4s var(--ease)}
/* grands panneaux : flou classique, la distorsion liquide est réservée aux boutons et capsules */
html.glass-svg .mega::after,.mega::after,html.glass-svg .nw::after,.nw::after,html.glass-svg .sr::after,.sr::after{-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8)}
.mega{left:50%;translate:-50% 0;width:min(1100px,calc(100% - 32px));padding:22px;border-radius:32px;background:rgba(255,255,255,.88)}
.mega__head{display:flex;justify-content:space-between;align-items:end;gap:16px;padding:4px 6px 18px}
.mega__head h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;line-height:1;margin-top:8px}
.mega__head a{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--blue)}
/* mini aperçus des produits */

.nw{right:clamp(16px,3vw,56px);width:360px;padding:10px;border-radius:24px;background:rgba(255,255,255,.88);transform-origin:top left}
.nw a{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px;border-radius:16px;transition:background .2s}
.nw a:hover{background:rgba(10,10,10,.04)}
.nw i{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:var(--nc);display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:15px}
.nw b{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center}
.nw b em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.nw small{font-family:var(--ui);font-size:13px;color:#6f6f6f;line-height:1.4}

/* Recherche : une capsule ronde indépendante, l'icône reste en place et le champ se déplie vers la gauche */
.hd__search{display:flex;align-items:center;justify-content:flex-end;height:44px;min-width:44px;padding:0 4px;border-radius:999px;flex:none}
.hd__search input{width:0;padding:0;border:0;outline:0;background:none;color:inherit;font-family:var(--ui);font-size:14px;opacity:0;transition:width .5s var(--ease),padding .5s var(--ease),opacity .3s}
.hd__search input::placeholder{color:currentColor;opacity:.5}
.hd__search input::-webkit-search-cancel-button{display:none}
.hd.is-searching .hd__search input{width:min(170px,13vw);padding:0 4px 0 12px;opacity:1}
.sr{position:fixed;top:64px;right:32px;z-index:61;width:260px;padding:6px;border-radius:20px;background:rgba(255,255,255,.94);color:#0a0a0a;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.sr.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease)}
.sr p{padding:10px 12px 4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a3a3a3}
.sr a{display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:12px;font-family:var(--ui);font-size:14px}
.sr a small{color:#6f6f6f;text-align:right}
.sr a:hover,.sr a.is-sel{background:rgba(10,10,10,.05)}
.sr__empty{padding:22px 12px;text-align:center;font-family:var(--ui);font-size:14px;color:#6f6f6f}

/* ---------- Menu mobile ----------
   Fond opaque et animation limitée à transform et opacity : l'ouverture reste fluide sur téléphone. */
.menu{position:fixed;z-index:59;color:#0a0a0a;background:#fff;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;will-change:transform,opacity;
  transition:opacity .2s,transform .4s cubic-bezier(.32,.72,0,1),visibility 0s .4s}
.menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .5s cubic-bezier(.32,.72,0,1)}
.menu__links{list-style:none;margin:0;padding:0}
.menu__links>li,.menu__actions{opacity:0;transform:translateY(10px);transition:opacity .15s,transform .3s var(--ease)}
.menu.is-open .menu__links>li,.menu.is-open .menu__actions{opacity:1;transform:none;
  transition:opacity .35s calc(.06s + var(--i) * .035s),transform .5s cubic-bezier(.32,.72,0,1) calc(.06s + var(--i) * .035s)}
.menu__row{display:flex;align-items:center;gap:14px;-webkit-tap-highlight-color:transparent;transition:background .2s}
.menu__ico{flex:none;width:24px;height:24px;color:#0a0a0a}
.menu__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.menu__txt b{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.05;transition:color .2s}
.menu__go{font-family:var(--ui);font-size:18px;color:#a3a3a3}
.menu__row:active .menu__txt b{color:var(--mc)}
.menu__chips{display:flex;flex-wrap:wrap;gap:6px}
.menu__chips a{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:rgba(10,10,10,.05);font-family:var(--ui);font-size:13px;font-weight:500}
.menu__chips i{width:8px;height:8px;border-radius:50%}
.menu__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu__actions .btn{height:48px;padding:0 12px;font-size:14px;white-space:nowrap}
.menu__login{--gs:inset 0 0 0 1px rgba(10,10,10,.08);background:rgba(10,10,10,.05)}
.menu__login::after{display:none}
body.is-locked{overflow:hidden}

/* Le panneau naît du bouton menu */
.menu{top:64px;left:12px;right:12px;max-height:calc(100svh - 80px);padding:8px;border-radius:28px;
  box-shadow:0 0 0 1px rgba(10,10,10,.06),0 30px 80px rgba(0,0,0,.22);transform-origin:22px -30px}
.menu:not(.is-open){transform:scale(.9)}
.menu__row{padding:13px 12px;border-radius:18px}
.menu__row:active{background:rgba(10,10,10,.04)}
.menu__ico{width:22px;height:22px}
.menu__txt b{font-size:23px}
.menu__links>li+li{border-top:1px solid rgba(10,10,10,.06)}
.menu__chips{padding:0 12px 14px 48px}
.menu__actions{padding:10px 4px 4px}

@media (min-width:1061px){.menu{display:none}}
@media (max-width:1060px){.hd-scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,10,.34)}}

/* Bouton menu (mobile) : un petit carré arrondi en verre */
.hd__sq{display:none;width:44px;height:44px;border-radius:14px;align-items:center;justify-content:center;color:inherit}
/* l'icône ne capte pas le toucher : sinon, remplacée par la croix à l'ouverture, elle passe pour un toucher en dehors et le menu se referme aussitôt */
.hd__sq svg{width:20px;height:20px;pointer-events:none;transition:transform .45s var(--ease)}
.hd__sq[aria-expanded="true"] svg{transform:rotate(90deg)}

@media (max-width:1060px){
  .hd{grid-template-columns:1fr auto 1fr;inset:12px 0 auto;max-width:none}
  .hd__group--l,.hd__login,.hd__store,.hd__cta,.mega,.nw{display:none}
  .hd__sq{display:inline-flex;grid-column:1;grid-row:1;justify-self:start}
  .hd__logo{grid-column:2;grid-row:1;justify-self:center}
  .hd__group--r{grid-column:3;grid-row:1}
  .hd__search{border-radius:14px}
  /* le logo devient l'icône, mais le menu et la recherche restent à portée de pouce */
  .hd.is-island .hd__group{opacity:1;pointer-events:auto;transform:none}
  .hd__sq,.hd__logo{transition:width var(--fold-t) var(--fold),opacity .25s}
  /* recherche : la capsule prend toute la ligne, les résultats s'ouvrent dessous */
  .hd.is-searching .hd__group--r{grid-column:1/-1}
  .hd.is-searching .hd__search{flex:1}
  .hd.is-searching .hd__search input{width:auto;flex:1;min-width:0;font-size:16px}
  .hd.is-searching .hd__sq,.hd.is-searching .hd__logo{opacity:0;pointer-events:none}
  .sr{left:12px;right:12px;width:auto;max-height:calc(100svh - 90px);overflow:auto}
}

/* ---------- Lien Otopcy : au survol, l'icône s'assemble devant le texte ----------
   À utiliser là où c'est utile (liens de texte, pied de page, « Lire l'article ») : ajouter la classe .o-link.
   Le texte prend la couleur --lc (bleu par défaut). Un parent .o-hover déclenche l'effet sur ses .o-link. */
.o-link{display:inline-flex;align-items:center;transition:color .35s var(--ease)}
.o-mark{display:inline-block;width:0;height:.95em;margin-right:0;flex:none;opacity:0;transition:width .5s var(--ease),margin .5s var(--ease),opacity .2s}
.o-mark svg{display:block;width:.95em;height:.95em;overflow:visible;transform:rotate(-90deg);transition:transform .6s var(--ease)}
.o-mark .q{transition:transform .55s var(--ease)}
.o-mark .q1{transform:translate(-34px,-34px)}.o-mark .q2{transform:translate(34px,-34px)}.o-mark .q3{transform:translate(-34px,34px)}.o-mark .q4{transform:translate(34px,34px)}
.o-mark .dot{transform:scale(0);transform-origin:50px 50px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
:is(.o-link:hover,.o-link:focus-visible,.o-hover:hover .o-link,.o-hover:focus-visible .o-link){color:var(--lc,var(--blue))}
:is(.o-link:hover,.o-link:focus-visible,.o-hover:hover .o-link,.o-hover:focus-visible .o-link) .o-mark{width:.95em;margin-right:.32em;opacity:1}
:is(.o-link:hover,.o-link:focus-visible,.o-hover:hover .o-link,.o-hover:focus-visible .o-link) .o-mark svg{transform:none}
:is(.o-link:hover,.o-link:focus-visible,.o-hover:hover .o-link,.o-hover:focus-visible .o-link) .q{transform:none}
:is(.o-link:hover,.o-link:focus-visible,.o-hover:hover .o-link,.o-hover:focus-visible .o-link) .dot{transform:scale(1);transition-delay:.22s}
.prose .o-link{color:var(--blue);font-weight:500}

/* ---------- Hero clair ---------- */
.hero{min-height:100svh;position:relative;overflow:hidden;padding:130px var(--gut) 0;text-align:center;
  background:radial-gradient(55% 45% at 50% 100%,rgba(0,118,255,.18),transparent 70%),#fff}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,10,10,.12) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);pointer-events:none}
.tagline{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-family:var(--ui);font-size:13px;color:var(--muted)}
.tagline b{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.hero h1{margin-top:24px;font-size:clamp(54px,8.4vw,148px);line-height:.92;letter-spacing:-.05em;font-weight:700}
.hero h1 .blue-t{color:var(--blue)}
.hero .lead{margin:26px auto 0}
.hero .btns{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.arc{position:relative;height:clamp(280px,30vw,420px);margin-top:30px}
.pcard{--w:clamp(170px,17vw,270px);position:absolute;left:50%;bottom:-12%;width:var(--w);aspect-ratio:3/4;margin-left:calc(var(--w)/-2);border-radius:26px;overflow:hidden;padding:18px;text-align:left;font-family:var(--ui);transform-origin:50% 240%;transform:rotate(calc(var(--k) * 10deg)) translateY(calc(var(--k) * var(--k) * 10px));box-shadow:0 -10px 60px rgba(10,10,10,.12);border:1px solid rgba(10,10,10,.08)}
.pcard strong{display:block;font-family:var(--display);font-size:clamp(20px,1.9vw,30px);letter-spacing:-.03em;line-height:1}
.pcard small{opacity:.7;font-size:12px}
.pcard .inner{position:absolute;left:18px;right:18px;bottom:18px;top:44%;border-radius:16px}
.pc1{--k:-2;background:#0a0a0a;color:#fff}.pc1 .inner{background:linear-gradient(160deg,#1d1d1f,#000);border:1px solid #2a2a2a}
.pc2{--k:-1;background:#fff;color:#000}.pc2 .inner{background:radial-gradient(circle at 30% 30%,#7db8ff,var(--blue) 60%,#002a5c)}
.pc3{--k:0;background:var(--blue);color:#fff;z-index:2}.pc3 .inner{background:#fff;display:grid;place-items:center;padding:12%}.pc3 .inner img{width:100%;height:auto}
.pc4{--k:1;background:#f5f5f7;color:#000}.pc4 .inner{background:repeating-linear-gradient(90deg,#e6e6e8 0 18px,#efeff1 18px 36px)}
.pc5{--k:2;background:var(--yellow);color:#000}.pc5 .inner{background:#0a0a0a}

/* ---------- Manifeste (sombre) ---------- */
.manifest{height:300vh}
.manifest__pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 var(--gut);overflow:hidden}
.manifest__in{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(18px,3vh,32px)}
.manifest__in .kicker{color:rgba(255,255,255,.6)}
.manifest p{font-weight:700;letter-spacing:-.045em;line-height:1;font-size:clamp(38px,6vw,108px);text-align:center;max-width:17ch}
.manifest .w{color:#232323;transition:color .3s}
.manifest .w.on{color:#fff}
.manifest .w.blue.on{color:var(--blue)}
/* signature : apparaît quand la phrase est entièrement allumée */
.manifest__by{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(6px,1.5vh,16px);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .8s var(--ease)}
.manifest__by.on{opacity:1;transform:none}
.manifest__by img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.manifest__by span{display:grid;gap:4px;justify-items:center;text-align:center;font-family:var(--ui)}
.manifest__by b{font-size:17px;font-weight:600;color:#fff}
.manifest__by small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* ---------- Expertises : le fond prend la couleur de chaque quadrant ---------- */
.expertise{height:400vh;position:relative;--bg:var(--blue);--fg:#fff;--muted:rgba(255,255,255,.8);--line:rgba(255,255,255,.3);transition:background-color .8s var(--ease),color .8s}
.expertise[data-step="1"]{--bg:var(--green)}
.expertise[data-step="2"]{--bg:var(--violet)}
.expertise[data-step="3"]{--bg:var(--yellow);--fg:#0a0a0a;--muted:rgba(10,10,10,.75);--line:rgba(10,10,10,.25)}
.expertise[data-step="4"]{--bg:var(--red)}
.expertise__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding:clamp(90px,10vw,120px) var(--gut) clamp(24px,3vw,40px)}
.expertise__head{display:flex;justify-content:space-between;align-items:center}
.expertise__count{font-family:var(--mono);font-size:13px}
.expertise__stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:5vw}
.disc{justify-self:center;width:min(36vw,58vh);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 40px 100px rgba(0,0,0,.18);transform:rotate(var(--tilt,0deg));will-change:transform}
.disc svg{width:72%;height:72%;--q-tl:.12;--q-tr:.12;--q-bl:.12;--q-br:.12;--q-c:.12}
.expertise[data-step="0"] .disc svg{--q-bl:1}
.expertise[data-step="1"] .disc svg{--q-tl:1}
.expertise[data-step="2"] .disc svg{--q-tr:1}
.expertise[data-step="3"] .disc svg{--q-br:1}
.expertise[data-step="4"] .disc svg{--q-tl:1;--q-tr:1;--q-bl:1;--q-br:1;--q-c:1}
.ex-list{position:relative;min-height:22em;overflow:clip;overflow-clip-margin:12px}
.ex-list>li{position:absolute;inset:0 0 auto;opacity:0;pointer-events:none;will-change:transform,opacity}
.ex-list>li.is-on{pointer-events:auto}
.ex-list h2{font-weight:700;letter-spacing:-.045em;line-height:.92;font-size:clamp(40px,5.4vw,92px)}
.ex-list p{margin-top:20px;max-width:38ch;color:var(--muted);font-family:var(--ui);font-size:clamp(15px,1.25vw,19px)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags li{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.expertise .tags li{border:0;padding:7px 14px;background:color-mix(in srgb,currentColor 14%,transparent);font-family:var(--ui);font-size:13px;font-weight:500}
.expertise .tags li.key{background:currentColor}.expertise .tags li.key span{color:var(--bg)}
.ex-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.ex-bar i{display:block;height:100%;background:currentColor;transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- Un produit, tous les écrans (sombre) ---------- */
.morph{height:560vh}
.morph__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gut);gap:4vw;overflow:hidden;background:radial-gradient(50% 60% at 75% 55%,rgba(0,118,255,.22),transparent 70%)}
.morph .h2{font-size:clamp(40px,5.4vw,88px)}
.morph__steps{position:relative;margin-top:28px;height:130px}
.morph__steps p{position:absolute;inset:0;font-family:var(--ui);font-size:clamp(16px,1.3vw,20px);color:var(--muted);max-width:36ch;opacity:0;transform:translateY(20px);transition:.6s var(--ease)}
.morph__steps p.on{opacity:1;transform:none}
.morph__steps p b{display:block;color:var(--fg);font-family:var(--display);font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;margin-bottom:6px}
.morph__stage{display:grid;place-items:center;height:70vh}
.device{width:280px;height:580px;border-radius:52px;background:#1d1d1f;padding:12px;box-shadow:0 50px 120px rgba(0,118,255,.25),inset 0 0 0 1.5px #3a3a3c;position:relative}
.device__screen{width:100%;height:100%;border-radius:42px;background:#fff;color:#0a0a0a;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:20px;font-family:var(--ui)}
.device__screen header{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.device__screen header span{font-family:var(--mono);font-size:10px;color:#6f6f6f;font-weight:400}
.dgrid{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);grid-auto-rows:1fr;gap:10px;min-height:0;overflow:hidden}
.dgrid i{border-radius:14px;background:#f2f2f4;min-height:0}
.dgrid i:nth-child(1){background:var(--blue)}.dgrid i:nth-child(4){background:#0a0a0a}.dgrid i:nth-child(6){background:var(--yellow)}
.device__stand{position:absolute;left:50%;bottom:-40px;translate:-50% 0;width:30%;height:40px;background:linear-gradient(#3a3a3c,#1d1d1f);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);opacity:0}

/* ---------- Études de cas (clair) ---------- */
.s-pad{padding:clamp(80px,12vw,180px) var(--gut)}
.cases__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,4vw,48px)}
.cases__tab{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);font-family:var(--ui);font-weight:600;color:var(--muted);transition:.3s}
.cases__tab[aria-selected=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.case{margin-top:24px;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,3vw,48px)}
.case__vis{border-radius:var(--r);background:var(--card);min-height:clamp(380px,40vw,600px);display:grid;place-items:center;position:relative;overflow:hidden}
.case__vis::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--case-c,var(--blue)) 35%,transparent),transparent 65%);filter:blur(20px)}
.case__body{display:flex;flex-direction:column;justify-content:center;gap:26px}
.case__meta{display:flex;flex-wrap:wrap;gap:8px}
.case__meta span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted)}
.case h3{font-weight:700;letter-spacing:-.04em;font-size:clamp(36px,4.4vw,68px);line-height:.95}
.case dl{display:grid;gap:18px}
.case dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.case dd{margin-top:4px;font-family:var(--ui);font-size:clamp(15px,1.15vw,18px);opacity:.85}
.case.is-swap .case__vis>*,.case.is-swap .case__body{animation:caseIn .8s var(--ease) both}
@keyframes caseIn{from{opacity:0;transform:translateY(24px)}}
.m-phone{position:relative;width:min(260px,52%);aspect-ratio:9/19.5;border-radius:44px;background:#111;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.25),inset 0 0 0 2px #333}
.m-phone__screen{height:100%;border-radius:36px;background:#fff;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:44px 14px 14px;font-family:var(--ui);color:#0a0a0a;position:relative}
.m-phone__screen::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;width:34%;height:24px;border-radius:999px;background:#111}
.m-mac{position:relative;width:86%;aspect-ratio:16/10.4;border-radius:14px;background:#111;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.25)}
.m-mac::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-16px;height:16px;border-radius:0 0 18px 18px;background:linear-gradient(#d9d9d9,#a9a9a9)}
.m-mac__screen{height:100%;border-radius:6px;background:#fff;overflow:hidden;font-family:var(--ui);color:#0a0a0a}
.ui-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #eee}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.ui-bar i:nth-child(2){background:#febc2e}.ui-bar i:nth-child(3){background:#28c840}
.ui-tile{border-radius:14px;background:#f2f2f4}
.ui-btn{border-radius:999px;background:#0a0a0a;color:#fff;font-size:12px;font-weight:600;text-align:center;padding:10px}
.ui-blue{background:var(--blue)!important;color:#fff}

/* ---------- Carte (sombre) ---------- */
.s-globe{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,4vw,64px);align-items:center}
.globe{position:relative;aspect-ratio:1;width:100%;max-width:720px;justify-self:center;cursor:grab;touch-action:pan-y}
.globe:active{cursor:grabbing}
.globe canvas{width:100%;height:100%}
.globe__tip{position:absolute;left:0;top:0;pointer-events:none;background:#fff;color:#000;font-family:var(--ui);font-size:13px;padding:8px 12px;border-radius:12px;white-space:nowrap;opacity:0;transform:translate(-50%,calc(-100% - 14px));transition:opacity .2s}
.globe__tip.is-on{opacity:1}
.globe__tip small{display:block;opacity:.6;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.places{margin-top:32px;display:grid;border-top:1px solid var(--line)}
.place{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;padding:16px 4px;border-bottom:1px solid var(--line);transition:padding .4s,color .3s}
.place b{width:10px;height:10px;border-radius:50%;background:var(--pc)}
.place strong{font-weight:700;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em}
.place em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase}
.place:hover,.place.is-on{padding-left:14px;color:var(--blue)}
.globe-stats{display:flex;gap:28px;margin-top:28px;font-family:var(--ui);color:var(--muted);font-size:14px}
.globe-stats strong{display:block;font-family:var(--display);font-size:clamp(32px,3vw,48px);color:var(--fg);letter-spacing:-.04em;line-height:1}

/* ---------- Logos clients ---------- */
.logo-wall{margin-top:clamp(36px,5vw,72px);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logo{height:clamp(96px,10vw,150px);display:grid;place-items:center;text-align:center;padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.55;transition:opacity .4s,background .4s,color .4s;line-height:1}
.logo:hover{opacity:1;background:var(--card);color:var(--blue)}
.logo--heavy{font-weight:900;font-size:clamp(20px,2vw,30px);letter-spacing:-.04em;text-transform:uppercase}
.logo--mono{font-family:var(--mono);font-size:clamp(14px,1.3vw,18px);letter-spacing:.06em}
.logo--wide{font-family:var(--ui);font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(12px,1.05vw,15px)}
.logo--serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(20px,2vw,30px)}
.logo--round{font-family:var(--ui);font-weight:700;font-size:clamp(15px,1.4vw,20px)}
.logo--round span{border:2px solid currentColor;border-radius:999px;padding:6px 14px}
.logo small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;margin-top:6px;opacity:.7;font-style:normal;text-transform:uppercase}

/* ---------- Journal (blog) ---------- */
.journal__head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.posts{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s}
.post:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,10,10,.08)}
.post__cover{aspect-ratio:16/11;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--pc,var(--blue));color:#fff}
.post__cover>*{transition:transform .9s var(--ease)}
.post:hover .post__cover>*{transform:scale(1.08)}
.post__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__meta{display:flex;gap:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.post__meta b{color:var(--pc,var(--blue));font-weight:400}
.post h3{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.05}
.post p{font-family:var(--ui);color:var(--muted);font-size:15px}
.post .more{margin-top:auto;padding-top:8px;font-family:var(--ui);font-weight:600;font-size:14px}
.cov-big{font-size:clamp(60px,7vw,110px);font-weight:700;letter-spacing:-.06em;line-height:.8}
.cov-bars{display:flex;align-items:flex-end;gap:8px;height:46%}.cov-bars i{width:22px;border-radius:6px;background:#fff}
.cov-bars i:nth-child(1){height:25%}.cov-bars i:nth-child(2){height:50%}.cov-bars i:nth-child(3){height:75%;opacity:.35}.cov-bars i:nth-child(4){height:100%;opacity:.35}
.cov-screens{display:flex;gap:10px;align-items:flex-end}.cov-screens i{border:3px solid #fff;border-radius:10px}
.cov-screens i:nth-child(1){width:34px;height:64px}.cov-screens i:nth-child(2){width:120px;height:78px;border-radius:6px}.cov-screens i:nth-child(3){width:30px;height:36px;border-radius:9px}

/* ---------- Appel final (bleu) ---------- */
.s-cta{text-align:center}
.s-cta .kicker{justify-content:center;--k:#fff}
.s-cta .h2{font-size:clamp(64px,13vw,230px);line-height:.84}
.s-cta .lead{margin:28px auto 36px}
.s-cta .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.s-cta .btn--ghost{border-color:rgba(255,255,255,.4)}

/* ---------- Pied de page ---------- */
.foot{padding:clamp(56px,7vw,96px) var(--gut) 32px}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot__logo img{height:30px;width:auto}
.foot__grid p{font-family:var(--ui);color:var(--muted);margin-top:16px;max-width:30ch;font-size:15px}
.foot h4{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot ul{display:grid;gap:8px;font-family:var(--ui);font-size:15px}
.foot ul a:hover{color:var(--blue)}
.foot__legal{margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- Pages du journal ---------- */
.page-head{padding:150px var(--gut) clamp(40px,5vw,72px)}
.page-head h1{font-size:clamp(56px,10vw,170px);letter-spacing:-.055em;line-height:.88;font-weight:700;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.chip{height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-family:var(--ui);font-weight:600;font-size:14px;color:var(--muted)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,48px);align-items:center;background:var(--card);border-radius:var(--r);overflow:hidden}
.feature .post__cover{aspect-ratio:auto;height:100%;min-height:380px}
.feature__body{padding:clamp(24px,3vw,48px)}
.feature h2{font-size:clamp(32px,3.6vw,56px);letter-spacing:-.04em;line-height:1;margin:14px 0}
.article{padding:150px var(--gut) clamp(60px,8vw,120px)}
.article__head{max-width:900px;margin:0 auto;text-align:center}
.article__head h1{font-size:clamp(40px,6vw,92px);letter-spacing:-.05em;line-height:.95;margin-top:20px}
.article__head .lead{margin:22px auto 0}
.article__cover{max-width:none;margin:clamp(36px,5vw,64px) 0;border-radius:var(--sec-r);overflow:hidden;min-height:clamp(320px,62vh,720px)}
.prose{max-width:680px;margin:0 auto;font-family:var(--ui);font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:#2b2b2b}
.prose h2{font-family:var(--display);font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em;line-height:1.1;color:#0a0a0a;margin:56px 0 14px}
.prose p{margin:0 0 20px}
.prose blockquote{margin:40px 0;padding:0 0 0 24px;border-left:3px solid var(--blue);font-family:var(--display);font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em;color:#0a0a0a}
.prose ol{list-style:decimal;padding-left:22px;display:grid;gap:10px;margin:0 0 20px}
.author{max-width:680px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:14px;align-items:center;font-family:var(--ui);color:var(--muted)}
.author img{width:46px;height:46px;border-radius:50%;background:#f5f5f7;padding:8px}

@media (max-width:860px){
  .pc1,.pc5{display:none}
  .expertise__stage{grid-template-columns:1fr;align-content:center;gap:28px}
  .disc{width:min(52vw,32vh)}
  .ex-list{min-height:19em}
  .morph__pin{grid-template-columns:1fr;align-content:center;padding-top:80px}
  .morph__stage{height:46vh}
  .device{width:140px;height:290px;border-radius:30px;padding:8px}
  .device__screen{border-radius:24px;padding:12px}
  .case,.s-globe,.feature{grid-template-columns:1fr}
  .case__vis{min-height:340px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__grid>div:first-child{grid-column:1/-1}
}
@media (max-width:600px){.hero h1{font-size:14.2vw}.hero{padding-top:110px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* =====================================================================
   De l'humain : photos de mise en situation, textures et mouvements variés
   ===================================================================== */
/* Grain de film, pour sortir du tout-plat */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Hero : trois halos de couleur qui dérivent lentement derrière le titre */
.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__bg i{position:absolute;width:46vw;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.42;will-change:transform}
.hero__bg i:nth-child(1){background:#8cc2ff;left:-12vw;top:-12vw;animation:drift1 22s ease-in-out infinite alternate}
.hero__bg i:nth-child(2){background:#dcc6ff;right:-14vw;top:2vw;animation:drift2 26s ease-in-out infinite alternate}
.hero__bg i:nth-child(3){background:#ffe0a3;left:28vw;bottom:-24vw;opacity:.34;animation:drift3 30s ease-in-out infinite alternate}
.hero__bg::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.06;mix-blend-mode:multiply}
@keyframes drift1{to{transform:translate(14vw,8vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-12vw,10vw) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vw,-8vw) scale(1.2)}}
.hero .tagline,.hero h1,.hero .lead,.hero .btns{position:relative;z-index:1}

/* Manifeste : la rue au soir derrière les mots, qui se rapproche en défilant */
.manifest__bg{position:absolute;inset:0;overflow:hidden}
.manifest__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;will-change:transform}
.manifest__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 75% at 50% 50%,rgba(10,10,10,.5),#0a0a0a 95%)}
.manifest__bg::before{content:"";position:absolute;inset:0;z-index:1;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay}
.manifest p{position:relative;z-index:1}
.manifest .w{color:rgba(255,255,255,.15)}

/* Une journée : défilement horizontal, chaque photo s'anime en passant au centre */

/* Tous les écrans : la scène de vie change avec l'écran */
.morph__bg{position:absolute;inset:0;pointer-events:none}
.morph__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1.1s var(--ease),transform 7s linear}
.morph__bg img.on{opacity:.34;transform:scale(1)}
.morph__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0a 15%,rgba(10,10,10,.55) 55%,rgba(10,10,10,.8))}
.morph__pin>:not(.morph__bg){position:relative}

/* Études de cas : la personne d'abord, le produit par-dessus */
.case__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case__vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35));pointer-events:none}
.case__mock{position:relative;z-index:1;align-self:end;justify-self:end;width:56%;margin:0 5% 6% 0;display:flex;justify-content:flex-end;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
.case__mock .m-phone{width:min(210px,58%)}
.case__mock .m-mac{width:100%}
.case.is-swap .case__photo{animation:photoIn 1.4s var(--ease) both}
.case.is-swap .case__mock{animation:mockIn 1s .25s cubic-bezier(.3,1.25,.5,1) both}
@keyframes photoIn{from{transform:scale(1.18);filter:blur(8px)}}
@keyframes mockIn{from{opacity:0;transform:translate(40px,60px) scale(.9)}}

/* La méthode : la photo s'ouvre en grand quand on arrive dessus */
.method{padding:clamp(80px,12vw,180px) var(--gut)}
.method__frame{position:relative;margin:clamp(32px,5vw,64px) calc(var(--gut) * -1) 0;height:clamp(420px,72vh,860px);overflow:hidden;border-radius:var(--sec-r)}
.method__frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--m,0) * .2))}
.method__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6))}
.method__quote{position:absolute;z-index:1;left:var(--gut);bottom:clamp(28px,5vw,64px);max-width:24ch;color:#fff;font-weight:700;font-size:clamp(22px,2.8vw,44px);letter-spacing:-.03em;line-height:1.05}
.method__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.method__steps b{font-family:var(--mono);font-size:12px;color:var(--blue)}
.method__steps h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;margin:10px 0 8px}
.method__steps p{font-family:var(--ui);color:var(--muted);font-size:16px;max-width:34ch}

/* Logos : deux rubans qui défilent en sens contraire, en pause au survol */
.logo-wall[data-marquee]{display:grid;grid-template-columns:1fr;gap:12px;border:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq{overflow:hidden}
.marq__run{display:flex;gap:12px;width:max-content;animation:marq 40s linear infinite}
.marq--rev .marq__run{animation-direction:reverse;animation-duration:46s}
.marq:hover .marq__run{animation-play-state:paused}
.marq .logo{flex:none;width:clamp(170px,17vw,250px);border:1px solid var(--line);border-radius:22px;background:#fff}
@keyframes marq{to{transform:translateX(calc(-50% - 6px))}}

/* Appel final : quatre lueurs aux couleurs du logo tournent sous le bleu */
.s-cta{position:relative;overflow:hidden}
.s-cta>:not(.cta__bg){position:relative;z-index:1}
.cta__bg{position:absolute;inset:0;pointer-events:none}
.cta__bg i{position:absolute;width:36vw;aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.42;mix-blend-mode:screen;animation:orb 24s linear infinite}
.cta__bg i:nth-child(1){background:#00c853;left:-8%;top:-18%}
.cta__bg i:nth-child(2){background:#a46bff;right:-8%;top:-12%;animation-duration:28s;animation-direction:reverse}
.cta__bg i:nth-child(3){background:#ffb300;left:4%;bottom:-24%;animation-duration:32s}
.cta__bg i:nth-child(4){background:#ff4d4d;right:2%;bottom:-20%;opacity:.35;animation-duration:26s;animation-direction:reverse}
.cta__bg::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.1;mix-blend-mode:overlay}
@keyframes orb{from{transform:rotate(0) translateX(5vw) rotate(0)}to{transform:rotate(360deg) translateX(5vw) rotate(-360deg)}}

@media (max-width:860px){
  .hero__bg i{filter:blur(48px);width:70vw}
  .morph__bg::after{background:linear-gradient(180deg,#0a0a0a 25%,rgba(10,10,10,.6) 60%,#0a0a0a)}
  .case__mock{width:64%}
  .method__steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hero__bg i,.cta__bg i,.marq__run,.pchip{animation:none}}

/* =====================================================================
   Direction photo : lumière dorée, tons crème, grain de film, une touche de bleu
   ===================================================================== */
.hero{padding-bottom:clamp(40px,6vw,90px)}
.hero h1 .rot{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block}

/* Héros : une grande photo qui s'élargit jusqu'aux bords */
.stage{position:relative;z-index:1;margin:clamp(44px,6vw,80px) calc(var(--gut) * -1) 0;--s:1}
.stage__frame{position:relative;margin:0;height:min(80vh,58vw);overflow:hidden;border-radius:var(--sec-r)}
.stage__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(calc(1 + var(--s) * .14))}
.stage__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,12,4,.35))}
.note{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:18px;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 18px 50px rgba(20,12,4,.22),inset 0 0 0 1px rgba(255,255,255,.7);
  font-family:var(--ui);text-align:left;animation:bob 6s ease-in-out infinite}
.note i{width:30px;height:30px;border-radius:10px;flex:none;box-shadow:inset 0 0 0 6px rgba(255,255,255,.35)}
.note span{display:grid;font-size:14px;font-weight:600;color:#0a0a0a;line-height:1.25}
.note b{font-size:11px;font-weight:500;color:#6f6f6f}
.note--a{left:calc(var(--gut) + 6%);top:16%}
.note--b{right:calc(var(--gut) + 5%);top:44%;animation-delay:-2s}
.note--c{left:calc(var(--gut) + 14%);bottom:12%;animation-delay:-4s}
@keyframes bob{50%{translate:0 -10px}}

/* Gros plan : une seule image, trois phrases */
.close{height:320vh}
.close__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-items:center}
.close__img{position:absolute;inset:0;--dim:.2}
.close__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.close__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,4,calc(var(--dim) + .25)),rgba(8,6,4,var(--dim)) 60%,rgba(8,6,4,calc(var(--dim) * .4)))}
.close__lines{position:relative;z-index:1;padding:0 var(--gut);max-width:1100px}
.close__k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffcf73;margin-bottom:18px}
.close__l{font-weight:700;font-size:clamp(40px,7vw,112px);letter-spacing:-.05em;line-height:.98;color:#fff}
.close__l:nth-child(3){color:#8cc2ff}
.close__c{margin-top:26px;font-family:var(--ui);font-size:clamp(16px,1.3vw,20px);color:rgba(255,255,255,.75);max-width:42ch}

/* Journal : des scènes en couverture, qui s'inclinent vers la souris */
.post{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.post__cover.ph{position:relative;overflow:hidden;padding:0}
.post__cover.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.post:hover .post__cover.ph img{transform:scale(1.12)}

/* Une journée : les photos penchent un peu avec la vitesse de défilement */

/* Bandeau : de grands mots en contour, qui avancent avec la page */
.ticker{overflow:hidden;padding:clamp(40px,6vw,80px) 0;background:#fff}
.ticker__row{display:flex;align-items:center;gap:clamp(24px,3vw,48px);width:max-content;will-change:transform}
.ticker span{font-weight:700;font-size:clamp(64px,11vw,190px);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px #0a0a0a;white-space:nowrap;transition:color .4s}
.ticker span:hover{color:var(--blue);-webkit-text-stroke-color:var(--blue)}
.ticker i{width:clamp(28px,3.4vw,56px);aspect-ratio:1;border-radius:50%;flex:none;background:conic-gradient(var(--green) 0 25%,var(--violet) 0 50%,var(--yellow) 0 75%,var(--blue) 0)}

/* Curseur : un point bleu qui s'ouvre en pastille sur les photos */
.cursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor span{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-family:var(--ui);font-size:0;font-weight:600;transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),font-size .2s}
.cursor.is-big span{left:-40px;top:-40px;width:80px;height:80px;font-size:13px;box-shadow:0 10px 30px rgba(0,118,255,.35)}

@media (max-width:860px){
  .stage__frame{height:62vh}
  .note{padding:8px 12px 8px 9px;border-radius:14px}.note i{width:24px;height:24px;border-radius:8px}.note span{font-size:12.5px}
  .note--a{left:calc(var(--gut) + 2%);top:8%}.note--b{right:calc(var(--gut) + 2%);top:40%}.note--c{left:calc(var(--gut) + 4%);bottom:8%}
  .close{height:260vh}
}
@media (prefers-reduced-motion:reduce){.note{animation:none}}
/* les curseurs du héros restent au-dessus de la photo, autour du titre */

/* =====================================================================
   Appareils : téléphone, Mac, télévision, montre, avec de vraies interfaces
   ===================================================================== */
.dv{position:relative;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;color:#0a0a0a;text-align:left}
.dv img{display:block;width:100%;height:100%;object-fit:cover}
.dv svg{display:block}
/* Téléphone */
.dv-phone{--w:290px;width:var(--w);aspect-ratio:9/19.4;padding:calc(var(--w) * .034);border-radius:calc(var(--w) * .175);
  background:linear-gradient(150deg,#5b5b60,#1c1c1e 22%,#0b0b0c 60%,#3a3a3d);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 calc(var(--w) * .012) #0b0b0c,0 50px 90px -30px rgba(0,0,0,.55),0 24px 40px -24px rgba(0,0,0,.4)}
.dv-phone::before,.dv-phone::after{content:"";position:absolute;width:calc(var(--w) * .012);border-radius:2px;background:linear-gradient(90deg,#2a2a2c,#55555a)}
.dv-phone::before{left:calc(var(--w) * -.01);top:22%;height:7%;box-shadow:0 calc(var(--w) * .16) 0 #3a3a3d,0 calc(var(--w) * .3) 0 #3a3a3d}
.dv-phone::after{right:calc(var(--w) * -.01);top:30%;height:12%}
.dv-phone__scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--w) * .145);background:#fff;font-size:calc(var(--w) / 22)}
.dv-phone__scr::before{content:"";position:absolute;z-index:5;left:50%;top:calc(var(--w) * .03);width:31%;height:calc(var(--w) * .1);translate:-50% 0;border-radius:999px;background:#000}
/* Mac */
.dv-mac{--w:620px;width:var(--w)}
.dv-mac__lid{aspect-ratio:16/10.4;padding:calc(var(--w) * .016) calc(var(--w) * .016) calc(var(--w) * .022);border-radius:calc(var(--w) * .028) calc(var(--w) * .028) calc(var(--w) * .006) calc(var(--w) * .006);
  background:#0d0d0e;box-shadow:inset 0 0 0 1.5px #3c3c40,inset 0 0 0 3px #0d0d0e,0 40px 80px -40px rgba(0,0,0,.6)}
.dv-mac__scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--w) * .006);background:#f5f5f7;font-size:calc(var(--w) / 54)}
.dv-mac__base{position:relative;height:calc(var(--w) * .028);margin:0 -7%;border-radius:2px 2px calc(var(--w) * .03) calc(var(--w) * .03)/2px 2px calc(var(--w) * .022) calc(var(--w) * .022);
  background:linear-gradient(180deg,#f1f2f4,#c9cbcf 45%,#9a9da2);box-shadow:0 30px 50px -20px rgba(0,0,0,.45)}
.dv-mac__base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:42%;translate:-50% 0;border-radius:0 0 8px 8px;background:linear-gradient(#a8abaf,#c9cbcf)}
/* Télévision */
.dv-tv{--w:660px;width:var(--w)}
.dv-tv__frame{aspect-ratio:16/9;padding:calc(var(--w) * .008);border-radius:calc(var(--w) * .008);background:#050505;box-shadow:inset 0 0 0 1px #2c2c2e,0 50px 90px -40px rgba(0,0,0,.7)}
.dv-tv__scr{position:relative;height:100%;overflow:hidden;border-radius:2px;background:#000;color:#fff;font-size:calc(var(--w) / 52)}
.dv-tv__stand{width:34%;height:calc(var(--w) * .055);margin:0 auto;background:linear-gradient(180deg,#38383b,#121213);clip-path:polygon(44% 0,56% 0,58% 62%,100% 74%,100% 100%,0 100%,0 74%,42% 62%)}

/* Interfaces : barre d'état et fenêtre */
.ui{position:absolute;inset:0;display:flex;flex-direction:column}
.sb{display:flex;justify-content:space-between;align-items:center;padding:1.05em 1.9em .3em 2.1em;font-size:.95em}
.sb b{font-weight:600}.sb span{display:flex;gap:.35em;align-items:center}.sb svg{height:.78em;width:auto}
.win{display:flex;align-items:center;gap:.5em;padding:.75em 1em;background:#ececee;border-bottom:1px solid #dcdcdf;flex:none}
.win i{width:.85em;height:.85em;border-radius:50%;background:#ff5f57}.win i:nth-child(2){background:#febc2e}.win i:nth-child(3){background:#28c840}
.win span{margin-left:auto;margin-right:auto;font-size:.9em;font-weight:600;color:#6f6f6f;translate:-1.6em 0}
/* Mokolo, téléphone */
.ui-mk{background:#fbfaf7}
.mk-top{display:flex;justify-content:space-between;align-items:center;padding:.9em 1.15em .5em}
.mk-top small{display:block;font-size:.72em;color:#8a8a8e}.mk-top b{font-size:1.05em}
.mk-av{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:#ffa900;color:#fff;font-weight:700;font-size:.85em}
.mk-search{display:flex;align-items:center;gap:.5em;margin:.3em 1.15em .7em;padding:.62em .8em;border-radius:.9em;background:#efede8;color:#8a8a8e;font-size:.82em}
.mk-search svg{width:1.1em;height:1.1em}
.mk-chips{display:flex;gap:.4em;padding:0 1.15em .8em;font-size:.75em}
.mk-chips span{padding:.45em .85em;border-radius:999px;background:#efede8;color:#555}.mk-chips .on{background:#0a0a0a;color:#fff}
.mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65em;padding:0 1.15em;flex:1;min-height:0}
.mk-card{display:flex;flex-direction:column;min-height:0}
.mk-card img{flex:1;min-height:0;border-radius:.85em}
.mk-card b{font-size:.74em;font-weight:500;margin-top:.45em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-card span{font-size:.8em;font-weight:700}
.mk-safe{display:flex;align-items:center;gap:.5em;margin:.7em 1.15em .5em;padding:.6em .8em;border-radius:.8em;background:#e8f2ff;color:#0058c4;font-size:.72em;font-weight:600}
.mk-safe svg{width:1.3em;height:1.3em;flex:none}
.mk-tab{display:flex;justify-content:space-around;padding:.7em 1em 1.5em;border-top:1px solid #ecebe6;background:#fff}
.mk-tab i{color:#b5b5b9;display:grid}.mk-tab i.on{color:#0a0a0a}.mk-tab svg{width:1.45em;height:1.45em}
/* Espaces de travail sur ordinateur */
.ui-desk{background:#f5f5f7}
.dk{display:grid;grid-template-columns:22% 1fr;flex:1;min-height:0}
.dk aside{display:flex;flex-direction:column;gap:.2em;padding:1em .8em;background:#ececee;border-right:1px solid #dcdcdf;font-size:.9em;color:#555}
.dk aside span{padding:.45em .6em;border-radius:.5em}.dk aside .on{background:#fff;color:#0a0a0a;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dk-logo{font-size:1.15em;margin:0 0 .7em .6em;color:#0a0a0a}.dk-logo::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#ffa900;margin-right:.4em}
.dk-logo.ag::before{background:#009d32}
.dk main{display:flex;flex-direction:column;gap:1em;padding:1.2em 1.4em;min-width:0}
.dk-h{display:flex;justify-content:space-between;align-items:flex-end}
.dk-h small{display:block;color:#8a8a8e;font-size:.85em}.dk-h b{font-size:1.45em;letter-spacing:-.02em}
.dk-btn{padding:.55em 1em;border-radius:.6em;background:#0a0a0a;color:#fff;font-size:.85em;font-weight:600}.dk-btn.ag{background:#009d32}
.dk-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.dk-kpi div{padding:.9em 1em;border-radius:.8em;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dk-kpi small{display:block;color:#8a8a8e;font-size:.8em}.dk-kpi b{display:block;font-size:1.35em;letter-spacing:-.02em;margin:.15em 0}.dk-kpi em{font-style:normal;font-size:.75em;color:#009d32}
.dk-rows{display:grid;gap:.45em}
.dk-rows div{display:grid;grid-template-columns:2.4em 1fr auto auto;align-items:center;gap:.9em;padding:.55em .7em;border-radius:.7em;background:#fff;font-size:.88em}
.dk-rows img{width:2.4em;height:2.4em;border-radius:.5em}.dk-rows span:nth-child(3){font-weight:600}
.dk-rows em{font-style:normal;font-size:.8em;padding:.3em .7em;border-radius:999px;background:#fff4e0;color:#a86a00}
.dk-rows em.st1{background:#e8f2ff;color:#0058c4}.dk-rows em.st2{background:#e5f6ea;color:#007a27}
.ag-chart{display:grid;grid-template-columns:auto 1fr;gap:1.4em;align-items:center;padding:1em 1.2em;border-radius:.8em;background:#fff}
.ag-chart small{display:block;color:#8a8a8e;font-size:.8em}.ag-chart b{display:block;font-size:1.5em;letter-spacing:-.02em}.ag-chart em{font-style:normal;font-size:.8em;color:#009d32}
.ag-chart svg{width:100%;height:5.5em}.ag-chart .ln{fill:none;stroke:#009d32;stroke-width:2.5;vector-effect:non-scaling-stroke}.ag-chart .ar{fill:rgba(0,157,50,.12)}
/* Veeyou */
/* Télévision : le marché en direct */
.tv-bg{position:absolute;inset:0;opacity:.9}
.ui-tv::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 60%,transparent),linear-gradient(0deg,rgba(0,0,0,.85),transparent 50%)}
.ui-tv>*:not(img){position:relative;z-index:2}
.tv-top{display:flex;justify-content:space-between;align-items:center;padding:1.4em 2em}
.tv-top b{font-size:1.3em}.tv-live{display:flex;align-items:center;gap:.45em;padding:.35em .8em;border-radius:999px;background:#fa0005;font-size:.8em;font-weight:700}
.tv-live i{width:.5em;height:.5em;border-radius:50%;background:#fff;animation:live 1.4s ease-in-out infinite}
@keyframes live{50%{opacity:.25}}
.tv-hero{padding:0 2em;margin-top:auto}
.tv-hero small{color:#ffcf73;font-size:.85em}.tv-hero b{display:block;font-size:2.2em;letter-spacing:-.03em;line-height:1.05;margin:.2em 0 .6em;max-width:12em}
.tv-cta{display:inline-flex;align-items:center;gap:.4em;padding:.55em 1.1em;border-radius:.5em;background:#fff;color:#0a0a0a;font-weight:700;font-size:.9em}.tv-cta svg{width:1em;height:1em}
.tv-row{display:flex;gap:.9em;padding:1.3em 2em 1.6em}
.tv-row div{flex:1;border-radius:.6em;overflow:hidden;position:relative;aspect-ratio:16/10;outline:2px solid transparent;transition:outline-color .3s}
.tv-row div.on{outline:.18em solid #fff;outline-offset:.18em}
.tv-row span{position:absolute;left:.5em;bottom:.4em;font-size:.7em;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* Tous les écrans : les appareils se relaient au centre de la scène */
.morph__stage{position:relative;height:72vh;display:block;perspective:1400px}
.morph__dvs,.morph__dv{position:absolute;inset:0;display:grid;place-items:center}
.morph__dv{will-change:transform,opacity;transform-style:preserve-3d}
.morph .dv-mac{--w:min(620px,44vw)}.morph .dv-tv{--w:min(660px,46vw)}.morph .dv-phone{--w:min(290px,36vh)}.morph .dv-watch{--w:min(190px,24vh)}
/* Études de cas : l'appareil posé sur la photo */
.case__mock{width:auto}
.case__mock .dv-phone{--w:210px}.case__mock .dv-mac{--w:430px}
@media (max-width:860px){
  .morph__stage{height:48vh}
  .morph .dv-mac{--w:84vw}.morph .dv-tv{--w:86vw}.morph .dv-phone{--w:min(190px,18svh)}.morph .dv-watch{--w:130px}
  .case__mock .dv-phone{--w:150px}.case__mock .dv-mac{--w:250px}
}

/* =====================================================================
   Passages d'une section à l'autre : la nouvelle section monte en carte et s'élargit
   ===================================================================== */
/* Chaque section monte sur la précédente avec les coins du haut arrondis, sur toute la largeur :
   la section d'avant reste visible dans l'arrondi. Les grandes photos prennent le même arrondi, d'un bord à l'autre. */
:root{--sec-r:clamp(28px,3vw,44px)}
.tx-card,.ofc{position:relative;z-index:2;margin-top:calc(var(--sec-r) * -1);clip-path:inset(0 round var(--sec-r) var(--sec-r) 0 0)}
/* halos en dégradés : aucun flou à recalculer pendant qu'ils bougent */
.hero__bg i{filter:none;opacity:1}
.hero__bg i:nth-child(1){background:radial-gradient(circle,rgba(140,194,255,.28),rgba(140,194,255,0) 66%)}
.hero__bg i:nth-child(2){background:radial-gradient(circle,rgba(214,192,255,.26),rgba(214,192,255,0) 66%)}
.hero__bg i:nth-child(3){background:radial-gradient(circle,rgba(255,222,160,.24),rgba(255,222,160,0) 66%)}
.cta__bg i{filter:none;mix-blend-mode:normal;opacity:1;width:46vw}
.cta__bg i:nth-child(1){background:radial-gradient(circle,rgba(0,214,90,.42),rgba(0,214,90,0) 64%)}
.cta__bg i:nth-child(2){background:radial-gradient(circle,rgba(170,110,255,.5),rgba(170,110,255,0) 64%)}
.cta__bg i:nth-child(3){background:radial-gradient(circle,rgba(255,190,40,.38),rgba(255,190,40,0) 64%)}
.cta__bg i:nth-child(4){background:radial-gradient(circle,rgba(255,90,90,.3),rgba(255,90,90,0) 64%)}
.cta__bg::after{display:none}
.hero__bg i,.cta__bg i,.stage__frame img,.close__img img,.manifest__bg img,.morph__bg img{will-change:transform}
.ticker span{font-size:clamp(56px,9vw,160px)}

/* Appel final : un bleu calme, juste une lumière douce venue du bas */
.s-cta.blue{background:radial-gradient(90% 70% at 50% 110%,#2f8dff,var(--blue) 70%)}

/* =====================================================================
   Mac moderne : barre de menus et Dynamic Island ; montre redessinée
   ===================================================================== */
.dv-mac__scr .ui{top:1.634em}
.mbar{position:absolute;inset:0 0 auto;z-index:4;height:1.9em;display:flex;justify-content:space-between;align-items:center;padding:0 1em;background:rgba(236,236,239,.92);font-size:.86em;color:#1d1d1f}
.mbar>span{display:flex;align-items:center;gap:1.1em}.mbar b{font-weight:600}.mbar svg{height:.85em;width:auto}
.isl{position:absolute;z-index:6;left:50%;top:.2em;height:1.5em;width:5.5em;translate:-50% 0;display:flex;align-items:center;gap:.55em;padding:0 .7em;overflow:hidden;white-space:nowrap;
  border-radius:999px;background:#000;color:#fff;font-size:.86em;font-weight:500;animation:isl 7s cubic-bezier(.32,.72,0,1) infinite}
.isl i{width:.65em;height:.65em;flex:none;border-radius:50%;background:var(--ic,#28c840);opacity:0;animation:islc 7s ease infinite}
.isl span{opacity:0;animation:islc 7s ease infinite}
@keyframes isl{0%,30%{width:5.5em;height:1.5em}40%,76%{width:17em;height:2.05em}86%,100%{width:5.5em;height:1.5em}}
@keyframes islc{0%,36%{opacity:0}46%,72%{opacity:1}80%,100%{opacity:0}}

.dv-watch{--w:190px;width:var(--w);display:flex;flex-direction:column;align-items:center}
.dv-watch__band{position:relative;width:74%;height:calc(var(--w) * .6);background:linear-gradient(90deg,#14234a,#28418a 20%,#3150a2 50%,#28418a 80%,#14234a)}
.dv-watch__band--t{margin-bottom:calc(var(--w) * -.07);border-radius:calc(var(--w) * .1) calc(var(--w) * .1) calc(var(--w) * .03) calc(var(--w) * .03);-webkit-mask-image:linear-gradient(to top,#000 50%,transparent);mask-image:linear-gradient(to top,#000 50%,transparent)}
.dv-watch__band--b{margin-top:calc(var(--w) * -.07);border-radius:calc(var(--w) * .03) calc(var(--w) * .03) calc(var(--w) * .1) calc(var(--w) * .1);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.dv-watch__band--b i{position:absolute;left:50%;width:calc(var(--w) * .04);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:#0f1a38;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.dv-watch__band--b i:nth-child(1){top:36%}.dv-watch__band--b i:nth-child(2){top:50%}.dv-watch__band--b i:nth-child(3){top:64%}
.dv-watch__case{position:relative;z-index:1;width:100%;aspect-ratio:39/46;padding:calc(var(--w) * .032);border-radius:calc(var(--w) * .29);
  background:linear-gradient(145deg,#9a9ca2,#45464b 28%,#1c1d20 58%,#606166);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 calc(var(--w) * .014) #0a0a0b,0 34px 60px -26px rgba(0,0,0,.75)}
.dv-watch__scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--w) * .26);background:#000;color:#fff;font-size:calc(var(--w) / 15)}
.dv-watch__crown{position:absolute;right:calc(var(--w) * -.05);top:21%;width:calc(var(--w) * .065);height:17%;border-radius:calc(var(--w) * .022);background:repeating-linear-gradient(180deg,#a5a6ab 0 1.5px,#4e4f53 1.5px 3px);box-shadow:inset -2px 0 3px rgba(0,0,0,.35)}
.dv-watch__btn{position:absolute;right:calc(var(--w) * -.02);top:47%;width:calc(var(--w) * .028);height:21%;border-radius:calc(var(--w) * .014);background:linear-gradient(90deg,#3a3b3f,#707176)}
.ui-w{padding:1.15em 1.05em 1em;gap:.3em}
.w-top{display:flex;align-items:center;gap:.45em;font-size:.72em;color:#a1a1a6}
.w-app{width:1.9em;height:1.9em;flex:none;border-radius:50%;display:grid;place-items:center;background:#ffa900;color:#000;font-weight:800}
.w-top b{margin-left:auto;color:#fff;font-weight:600}
.w-body{margin-top:auto}
.w-body small{display:flex;align-items:center;gap:.3em;font-size:.74em;font-weight:600;color:#30d158}.w-body small svg{width:1em;height:1em}
.w-a{display:block;font-size:1.7em;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.w-body span{display:block;margin-top:.15em;font-size:.6em;color:#a1a1a6}
.w-btn{margin-top:.7em;padding:.6em;border-radius:999px;background:#2c2c2e;text-align:center;font-size:.68em;font-weight:600}
.morph .dv-watch{--w:min(200px,22vh)}
@media (max-width:860px){.morph .dv-watch{--w:120px}}

/* =====================================================================
   Pages intérieures : tête de page commune et blocs réutilisables
   ===================================================================== */
.phero{min-height:auto;padding-top:clamp(120px,13vw,170px)}
.phero h1{font-size:clamp(46px,7.4vw,128px)}
.crumbs{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:inherit;transition:color .2s}.crumbs a:hover{color:var(--blue)}
.crumbs span{display:inline-flex;align-items:center;gap:12px;color:var(--fg)}.crumbs span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* Réalisations : un mur de vraies captures, en biais, qui défile */
.stage__frame .wall{position:absolute;inset:-12% 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);padding:0 calc(var(--gut) + 7%);background:#0c0c0e;transform:rotate(-5deg) scale(1.12)}
.wall__col{overflow:hidden}
.wall__run{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);animation:wallUp var(--dur,50s) linear infinite}
.wall__shot{border-radius:12px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45);flex:none}
.stage__frame .wall img{display:block;width:100%;height:auto;object-fit:initial;transform:none}
@keyframes wallUp{to{transform:translateY(-50%)}}
/* Services */
.sv-list{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line)}
.sv{display:grid;grid-template-columns:64px 56px 1fr;gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(28px,3.5vw,46px) 0;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.sv__n{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:12px}
.sv .qi{width:52px;height:52px;color:var(--fg);transition:transform .6s var(--ease)}

.sv h3{font-size:clamp(28px,3vw,48px);letter-spacing:-.04em;line-height:1;transition:color .3s}
.sv:hover h3{color:var(--mc)}
.sv p{font-family:var(--ui);color:var(--muted);font-size:clamp(16px,1.2vw,19px);max-width:58ch;margin-top:12px}
.sv .tags{margin-top:18px}
/* Logiciels : une scène par produit */
.pr{position:relative;min-height:100svh;display:grid;align-items:center;padding:clamp(100px,10vw,150px) var(--gut);overflow:hidden;scroll-margin-top:0}
.pr__in{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center;width:100%;max-width:1300px;margin:0 auto}
.pr__in.is-rev .pr__txt{order:2}
.pr .h2{font-size:clamp(52px,6.4vw,112px)}
.pr .lead{margin-top:20px}
.pr .tags{margin:22px 0 30px}
.pr__dv{position:relative;display:grid;place-items:center;min-height:62vh;perspective:1400px}
.pr__dv::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mc) 22%,transparent),transparent 65%)}
.pr__dv>.dv{position:relative}
.pr .dv-mac{--w:min(660px,50vw)}.pr .dv-phone{--w:min(300px,42vh)}
.ui-shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.ui-code{background:#0f1115;color:#e6e6e6}
.ui-code .win{background:#1c1e24;border-color:#2a2d35}.ui-code .win span{color:#8a8f9c}
.code{padding:1.4em 1.8em;font-family:'Space Mono',ui-monospace,monospace;font-size:1.05em;line-height:1.9}
.code i{font-style:normal;color:#7aa2ff;margin-right:.5em}.code .mut{color:#6b7280}.code .ok{color:#30d158}.code .go{color:#ffcf73}
.code .cur b{display:inline-block;width:.6em;height:1.1em;vertical-align:-.15em;background:#e6e6e6;animation:live 1.1s steps(1) infinite}
/* Réalisations */
.wk-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,36px)}
.wk-filters button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:none;font:600 14px var(--ui);color:var(--muted);cursor:pointer;transition:.25s}
.wk-filters button:hover{color:var(--fg)}.wk-filters button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px);margin-top:clamp(28px,3vw,40px)}
.wk[hidden]{display:none}
.wk__media{position:relative;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,#f3f1ec,#e6e2d8);padding:8% 10% 0}
.wk__win{height:100%;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:0 30px 60px -24px rgba(40,30,10,.35);transition:transform .8s var(--ease)}
.wk__bar{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;background:#f1f1f3;border-bottom:1px solid #e3e3e6}
.wk__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.wk__bar i:nth-child(2){background:#febc2e}.wk__bar i:nth-child(3){background:#28c840}
.wk__shot{height:calc(100% - 26px);overflow:hidden}
.wk__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wk__phone{position:absolute;right:6%;bottom:-6%;width:22%;aspect-ratio:9/19.4;padding:4px;border-radius:22px;background:#111;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);transition:transform .8s var(--ease)}
.wk__phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:18px}
.wk:hover .wk__win{transform:translateY(-8px)}.wk:hover .wk__phone{transform:translateY(-18px) rotate(-2deg)}
.wk__media--img{padding:0}.wk__media--img>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.wk:hover .wk__media--img>img{transform:scale(1.05)}
.wk__body{display:flex;align-items:center;gap:14px;margin-top:20px}
.wk__logo{width:54px;height:54px;flex:none;object-fit:contain;padding:6px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.wk h3{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.05}
.wk__body p{font-family:var(--ui);font-size:15px;color:var(--muted);margin-top:4px}
.wk__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.wk__tags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.more-sw{text-align:center}.more-sw .kicker{justify-content:center}.more-sw .btns{display:flex;justify-content:center;margin-top:30px}
/* Logos des clients : les vrais logos, en gris, en couleur au survol */
.lg{flex:none;display:grid;place-items:center;width:clamp(170px,16vw,230px);height:clamp(96px,8.6vw,118px);padding:16px 24px;border:1px solid var(--line);border-radius:22px;background:#fff}
.lg img{max-width:100%;max-height:64px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .4s,opacity .4s}
.lg:hover img{filter:none;opacity:1}
.marq__dup{display:contents}
.lg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(32px,4vw,56px)}
.lg-grid .lg{width:auto}
.logo-more{margin-top:28px}
/* À propos */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.stats strong{display:block;font-size:clamp(72px,9vw,160px);letter-spacing:-.06em;line-height:.9}
.stats span{display:block;margin-top:10px;font-family:var(--ui);color:var(--muted);max-width:30ch}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(36px,5vw,64px)}
.value{padding:clamp(26px,3vw,44px);border-radius:var(--r);background:var(--card)}
.value__i{display:block;width:14px;height:14px;border-radius:50%}
.value h3{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;margin:22px 0 10px}
.value p{font-family:var(--ui);color:var(--muted);font-size:16px}
/* Démarrer un projet */
.pf-wrap{padding-top:clamp(40px,5vw,70px)}
.pf{display:grid;gap:clamp(30px,3.5vw,44px);max-width:900px;margin:0 auto}
.pf fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}
.pf legend{padding:0;margin-bottom:14px;font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em}
.pf__chips{display:flex;flex-wrap:wrap;gap:8px}
.pf__chips label{position:relative}
.pf__chips input{position:absolute;opacity:0;pointer-events:none}
.pf__chips span{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 15px var(--ui);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.pf__chips span:hover{border-color:var(--fg)}
.pf__chips input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pf__chips input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.pf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf label.f{display:grid;gap:8px;font:500 14px var(--ui);color:var(--muted)}
.pf input[type=text],.pf input[type=email],.pf textarea{width:100%;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#fff;font:16px var(--ui);color:var(--fg);outline:0;transition:border-color .2s,box-shadow .2s}
.pf input:focus,.pf textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,118,255,.12)}
.pf textarea{min-height:160px;resize:vertical}
.pf__send{justify-self:start}
.pf__done{max-width:900px;margin:0 auto;text-align:center}.pf__done .lead{margin:22px auto 0}
@media (max-width:860px){
  .pr__in{grid-template-columns:1fr}.pr__in.is-rev .pr__txt{order:0}.pr__dv{min-height:auto;padding:30px 0}
  .pr .dv-mac{--w:86vw}.pr .dv-phone{--w:230px}
  .wk-grid{grid-template-columns:1fr}
  .stats,.values{grid-template-columns:1fr}
  .lg-grid{grid-template-columns:repeat(2,1fr)}
  .sv{grid-template-columns:40px 1fr}.sv .qi{display:none}
  .pf__row{grid-template-columns:1fr}
}

/* Études de cas : la vraie capture du site dans une fenêtre, la version mobile posée devant */
.case__vis--shot{background:linear-gradient(160deg,color-mix(in srgb,var(--case-c,var(--blue)) 16%,#f3f1ec),#e6e2d8);padding:7% 9% 0;display:block}
.case__vis--shot::before,.case__vis--shot::after{display:none}
.cs__win{position:relative;height:100%;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;box-shadow:0 30px 70px -24px rgba(40,30,10,.4)}
.cs__win .wk__bar span{margin-left:auto;margin-right:auto;translate:-24px 0;padding:3px 14px;border-radius:7px;background:#fff;font:500 11px var(--ui);color:#6f6f6f}
.cs__phone{position:absolute;right:6%;bottom:-5%;width:23%;aspect-ratio:9/19.4;padding:5px;border-radius:26px;background:#111;box-shadow:0 26px 60px -18px rgba(0,0,0,.5)}
.cs__phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:21px}
.case.is-swap .cs__win{animation:csWin 1s var(--ease) both}
.case.is-swap .cs__phone{animation:csPhone 1s .2s cubic-bezier(.3,1.25,.5,1) both}
@keyframes csWin{from{opacity:0;transform:translateY(60px)}}
@keyframes csPhone{from{opacity:0;transform:translate(30px,80px) rotate(4deg)}}
/* écrans réels dans les appareils */
.ui-shot--m{background:#fff}.ui-shot--m img{flex:1;min-height:0}
@media (max-width:860px){.cs__phone{width:28%;border-radius:18px;padding:3px}.cs__phone img{border-radius:15px}}

/* =====================================================================
   En-tête équilibré : le Store à droite, des capsules plus serrées sur les écrans moyens
   ===================================================================== */
.hd__store{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 17px 0 12px;border-radius:999px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;flex:none;transition:filter .25s}
.hd__store img{width:20px;height:20px;transition:transform .6s var(--ease)}
.hd__store:hover img{transform:rotate(90deg)}
@media (min-width:1061px) and (max-width:1280px){
  .hd{padding-inline:20px}
  .hd__link{padding:0 10px}
  .hd__login{padding:0 15px}
  .hd__store{padding:0 14px 0 11px}
}

/* =====================================================================
   Otopcy Store
   ===================================================================== */
.st-mark{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:12px;margin:28px 0 6px;font-weight:700;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.st-mark img{width:1.25em;height:1.25em}
.st-fan{position:relative;z-index:1;display:flex;justify-content:center;margin-top:clamp(48px,6vw,90px);padding-bottom:20px}
.st-fan__card{width:clamp(180px,20vw,280px);margin:0 -14px;padding:10px 10px 16px;border-radius:30px;background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 60px -30px rgba(20,30,60,.35);
  rotate:calc((var(--k) - 1) * 7deg);translate:0 calc(var(--k) * (2 - var(--k)) * -26px);animation:stFloat 7s calc(var(--k) * -2.3s) ease-in-out infinite}
.st-fan__card:nth-child(2){z-index:1}
.st-fan__card b{display:block;margin:14px 8px 0;font-size:16px;letter-spacing:-.02em;line-height:1.15}
.st-fan__card .st__cover{aspect-ratio:1}
@keyframes stFloat{50%{transform:translateY(-10px)}}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(28px,3vw,40px)}
.st{display:flex;flex-direction:column;padding:10px 10px 22px;border-radius:var(--r);background:var(--card);transition:transform .6s var(--ease)}
.st[hidden]{display:none}
.st:hover{transform:translateY(-6px)}
.st__cover{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;color:#0a0a0a;display:grid;place-items:center;
  background:radial-gradient(90% 80% at 50% 45%,#fff,color-mix(in srgb,var(--sc) 14%,#f4f4f6))}
.st__cover .qi{width:38%;height:auto;transition:transform .8s var(--ease)}

.st__kind,.st__fmt{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.st__kind{left:14px;top:14px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--sc);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.st__fmt{left:16px;bottom:14px;color:#6f6f6f}
.st__body{padding:20px 10px 0;flex:1}
.st h3{font-size:clamp(21px,1.7vw,26px);letter-spacing:-.03em;line-height:1.08}
.st__body p{font-family:var(--ui);font-size:15px;color:var(--muted);margin-top:8px}
.st__buy{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 10px 0}
.st__buy strong{font-size:22px;letter-spacing:-.03em}
.st__buy .btn{height:44px;padding:0 20px;font-size:14px}
/* lives */
.lv-list{display:grid;gap:12px;margin-top:clamp(32px,4vw,52px)}
.lv{display:grid;grid-template-columns:96px 1fr auto;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(18px,2.4vw,30px);border-radius:28px;background:var(--card)}
.lv__date{display:grid;place-items:center;aspect-ratio:1;border-radius:22px;background:var(--blue);color:#fff;line-height:1}
.lv__date b{font-size:40px;letter-spacing:-.04em}.lv__date span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:-16px}
.lv__when{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.lv__when span{padding:4px 10px;border:1px solid var(--line);border-radius:999px}
.lv h3{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em;line-height:1.05;margin-top:8px}
.lv__txt p:not(.lv__when){font-family:var(--ui);color:var(--muted);margin-top:8px;max-width:56ch}
.lv small{display:block;margin-top:10px;font-family:var(--ui);font-size:14px}
.lv__go{display:grid;justify-items:end;gap:12px}.lv__go strong{font-size:22px;letter-spacing:-.03em}
.lv__go .btn{height:46px;padding:0 22px;font-size:14px}
/* lettre d'information, quand aucun live n'est prévu */
.nl{margin-top:clamp(32px,4vw,52px);padding:clamp(28px,4vw,60px);border-radius:var(--r);background:var(--card)}
.nl[hidden]{display:none}
.nl h3{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em;line-height:1}
.nl .lead{margin-top:16px}
.nl__form{display:flex;gap:10px;max-width:560px;margin-top:28px}
.nl__form input{flex:1;min-width:0;height:54px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);font:16px var(--ui);outline:0;transition:border-color .2s,box-shadow .2s}
.nl__form input::placeholder{color:var(--muted)}
.nl__form input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,118,255,.2)}
.nl__done{margin-top:24px;font-family:var(--ui);color:var(--muted)}
@media (max-width:860px){
  .st-grid{grid-template-columns:1fr}
  .st-fan__card{width:34vw;margin:0 -2vw;padding:7px 7px 12px;border-radius:22px}.st-fan__card .st__cover{border-radius:16px}.st-fan__card b{margin:10px 4px 0;font-size:12px}.st-fan .st__fmt{display:none}.st-fan .st__kind{left:8px;top:8px;font-size:9px;padding:4px 8px}
  .lv{grid-template-columns:64px 1fr;align-items:start}.lv__date b{font-size:28px}.lv__date span{margin-top:-10px}
  .lv__go{grid-column:1/-1;grid-template-columns:auto auto;justify-content:space-between;align-items:center}
  .nl__form{flex-direction:column}.nl__form input{flex:none}
}
@media (min-width:861px) and (max-width:1100px){.st-grid{grid-template-columns:repeat(2,1fr)}}
/* sur téléphone, le Store vit dans le menu */
@media (max-width:1060px){.hd__store{display:none}}

/* Menu : l'entrée Store garde l'icône Otopcy ; Speedy Flow dans le menu Solutions */
.hd__link--store{gap:6px;font-weight:600}
.hd__link--store img{width:17px;height:17px;transition:transform .6s var(--ease)}
.hd__link--store:hover img{transform:rotate(90deg)}
@keyframes mmMic{50%{height:26px}}
/* équilibre : les capsules de droite s'élargissent un peu pour peser autant que le menu de gauche */
.hd__caps .hd__link{padding:0 11px}.hd__caps .hd__link--icon{padding:0}
.hd__login{padding:0 22px}.hd__cta{padding:0 22px}
@media (min-width:1061px) and (max-width:1280px){.hd__caps .hd__link{padding:0 9px}.hd__login{padding:0 18px}.hd__cta{padding:0 18px}}

/* =====================================================================
   Menu Solutions : vraie capture et vraie icône de chaque logiciel
   ===================================================================== */
.menu__chips a img{width:20px;height:20px;border-radius:6px}.menu__chips a img.o{padding:3px;background:#0a0a0a}
.menu__chips a{padding:0 12px 0 6px}

/* =====================================================================
   Pour qui nous concevons : une contrainte réelle, puis notre réponse
   ===================================================================== */
.who{padding-top:clamp(80px,11vw,160px)}
.who__head{padding:0 var(--gut);max-width:1100px}
.who__head .lead{margin-top:22px}
.who__run{position:relative;height:calc(100svh + 7 * 42svh)}
.who__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(28px,5vw,90px);padding:0 var(--gut) 0 0}
.who__frame{position:relative;height:100%;overflow:hidden;border-radius:0 var(--sec-r) var(--sec-r) 0;background:#e9e9ec;isolation:isolate}
.who__ph{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
.who__ph:first-child,.who__ph.shown{clip-path:inset(0 0 0 0)}
.who__ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.2);filter:saturate(.3) brightness(.94);transition:transform 1.8s cubic-bezier(.22,1,.36,1),filter .9s ease}
.who__ph.shown img,.who__ph:first-child img{transform:scale(1.04)}
.who.is-re .who__ph img,.who__pin.is-re .who__ph img{filter:none}
.who__ui{position:absolute;z-index:2;left:clamp(14px,2vw,26px);bottom:calc(var(--sec-r) + clamp(14px,2vw,26px));display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:22px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 18px 50px rgba(0,0,0,.22);font-family:var(--ui);
  opacity:0;transform:translateY(30px) scale(.92);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.who__pin.is-re .who__ui.on{opacity:1;transform:none;transition:opacity .5s ease .15s,transform .8s cubic-bezier(.3,1.35,.5,1) .15s}
.who__ui>img{width:46px;height:46px;border-radius:12px}
.who__ui>img.who__ico{padding:7px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.06)}
.who__ui span{display:grid;gap:1px}
.who__ui small{font-size:12px;color:#6f6f6f}.who__ui b{font-size:16px;color:#0a0a0a;letter-spacing:-.01em}.who__ui em{font-style:normal;font-family:var(--mono);font-size:11px;color:#6f6f6f}
.who__txt{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px);padding:clamp(80px,10vh,96px) 0 calc(var(--sec-r) + 28px)}
/* sur ordinateur, l'en-tête de la section vit dans la colonne de texte, à côté de la photo : un seul écran composé */
.who__intro .kicker{margin-bottom:14px}
.who__intro h2{font-size:clamp(28px,2.6vw,42px);letter-spacing:-.04em;line-height:1.04;font-weight:700}
.who__intro p:not(.kicker){margin-top:12px;max-width:44ch;font-family:var(--ui);font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:var(--muted)}
@media (min-width:861px){.who{padding-top:0}.who__head{display:none}}
.who__bars{display:flex;gap:8px}
.who__bars i{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.who__bars b{display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:0 50%}
.who__chs{position:relative;flex:0 1 clamp(330px,46vh,430px);min-height:0}
.who__ch{position:absolute;inset:0;pointer-events:none}
.who__ch.on{pointer-events:auto}
.who__ch>*{opacity:0;transform:translateY(22px);transition:opacity .35s ease,transform .45s ease}
.who__ch.on>*{opacity:1;transform:none;transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.who__ch.on>:nth-child(2){transition-delay:.06s}.who__ch.on>:nth-child(3){transition-delay:.12s}
.who__n{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--fg)}.who__n span{color:var(--dim)}
.who__ch h3{margin-top:14px;font-size:clamp(30px,3vw,50px);letter-spacing:-.045em;line-height:1}
.who__pb,.who__re{margin-top:24px;font-family:var(--ui);font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:40ch}
.who__pb span,.who__re span{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.who__re span img{width:18px;height:18px;border-radius:5px}
.who__pb{color:var(--fg);transition:color .6s ease}
.who__pin.is-re .who__ch.on .who__pb{color:var(--dim)}
.who__ch.on .who__re,.who__ch.on .who__cta{opacity:0;transform:translateY(22px)}
.who__pin.is-re .who__ch.on .who__re{opacity:1;transform:none;transition-delay:.1s}
/* appel à l'action : arrive avec la dernière réponse */
.who__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.who__cta .btn{height:48px;padding:0 22px;font-size:14px}
.who__pin.is-re .who__ch.on .who__cta{opacity:1;transform:none;transition-delay:.25s}
.who__ch:not(.on) .who__cta{pointer-events:none}
@media (max-width:860px){
  .who__run{height:calc(100svh + 6 * 34svh)}
  .who__pin{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:18px;padding:0 0 calc(var(--sec-r) + 14px)}
  .who__chs{flex:none}
  .who__txt{padding:0 16px}
  .who__intro{display:none}
  .who__frame{border-radius:0 0 var(--sec-r) var(--sec-r)}
  .who__ui{gap:10px;padding:9px 14px 9px 9px;border-radius:18px}.who__ui>img{width:36px;height:36px;border-radius:9px}.who__ui b{font-size:14px}
  .who__txt{gap:14px}
  .who__chs{min-height:318px}
  .who__ch h3{margin-top:8px;font-size:24px}
  .who__pb,.who__re{margin-top:10px;font-size:14px;line-height:1.42}
  .who__cta{margin-top:14px;flex-wrap:nowrap;gap:8px}.who__cta .btn{height:44px;padding:0 14px;font-size:13px;white-space:nowrap}
}

/* =====================================================================
   Menu Solutions : la liste à gauche, la vraie capture en grand à droite
   ===================================================================== */
.mega{width:min(1180px,calc(100% - 32px))}
.mega__body{margin-bottom:4px;display:grid;grid-template-columns:minmax(300px,.8fr) 1.45fr;gap:18px}
.mx-list{display:grid;gap:4px;align-content:start}
.mx{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;transition:background .3s}
.mx.on{background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.05),0 10px 30px rgba(10,10,10,.06)}
.mx__ico{width:48px;height:48px;flex:none;border-radius:13px;box-shadow:0 0 0 1px rgba(10,10,10,.06),0 6px 14px rgba(10,10,10,.12)}
.mx__ico--o{padding:9px;background:#0a0a0a}
.mx__txt{display:grid;gap:3px;min-width:0}
.mx b{display:flex;align-items:center;gap:8px;font-size:17px;letter-spacing:-.02em}
.mx b em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:var(--blue);color:#fff;border-radius:999px;padding:3px 7px}
.mx small{font-family:var(--ui);font-size:13px;line-height:1.35;color:#6f6f6f}
.mx>i{margin-left:auto;font-style:normal;color:var(--blue);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.mx.on>i{opacity:1;transform:none}
.mx-view{position:relative;min-height:440px;border-radius:24px;overflow:hidden}
.mv{position:absolute;inset:0;padding:26px 30px 0;display:flex;flex-direction:column;background:linear-gradient(165deg,color-mix(in srgb,var(--sc) 20%,#f6f6f8),#ececef 70%);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.mv.on{opacity:1;visibility:inherit;transition:opacity .45s ease}
.mv__win{position:relative;width:86%;border-radius:12px 12px 0 0;overflow:hidden;background:#fff;box-shadow:0 26px 60px -20px rgba(20,20,40,.35);transform:translateY(16px);transition:transform .7s var(--ease)}
.mv.on .mv__win{transform:none}
.mv__win img{display:block;width:100%;height:auto}
.mv .wk__bar span,.mv__term .wk__bar span{margin:0 auto;translate:-20px 0;padding:2px 12px;border-radius:6px;background:#fff;font:500 11px var(--ui);color:#6f6f6f}
.mv__term{width:100%;border-radius:12px;overflow:hidden;background:#141416;font-family:var(--mono);font-size:13px;color:#d6d6d6;box-shadow:0 26px 60px -20px rgba(0,0,0,.5)}
.mv__term .wk__bar{background:#232326;border-color:#2c2c30}.mv__term .wk__bar span{background:#2c2c30;color:#9a9a9f}
.mv__term p{padding:7px 20px}.mv__term p:nth-of-type(1){padding-top:20px}.mv__term p:last-child{padding-bottom:22px}
.mv__term p i{font-style:normal;color:#3ddc72;margin-right:10px}
.mv__term b{display:inline-block;width:8px;height:15px;margin-left:6px;vertical-align:-2px;background:#d6d6d6;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mv__win{width:100%}
.mv__meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mv__av{display:grid;gap:6px}
.mv__av small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a8f}
.mv__av ul{display:flex;flex-wrap:wrap;gap:6px}
.mv__av li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.08);font:600 13px var(--ui);color:#0a0a0a}
.mv__av li svg{width:15px;height:15px}
.mv__av em{font-style:normal;font-family:var(--ui);font-size:12px;color:#6f6f6f}
.mv__cta{flex:none;height:46px;padding:0 22px;font-size:14px}

/* captures entières, jamais rognées sur les côtés */
.wk__media{aspect-ratio:auto;padding:7% 9% 0}
.wk__win{height:auto}.wk__shot{height:auto}.wk__shot img{height:auto}
.cs__win{height:auto}.cs__win .wk__shot{height:auto}.cs__win .wk__shot img{width:100%;height:auto}

/* =====================================================================
   Héros portail : l'icône Otopcy s'ouvre sur un monde
   ===================================================================== */
.pt{position:relative;height:440vh;background:radial-gradient(55% 45% at 50% 100%,rgba(0,118,255,.14),transparent 70%),#fff;color:#0a0a0a}
.pt__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.pt__pin::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,10,10,.12) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);pointer-events:none}
.pt__copy{position:absolute;z-index:3;left:0;right:0;top:clamp(96px,12vh,130px);padding:0 20px;text-align:center;opacity:calc(1 - var(--g,0) * 3);transform:translateY(calc(var(--g,0) * -70px))}
.pt__copy[inert]{pointer-events:none}
.pt__copy h1{font-size:clamp(54px,7.4vw,128px);line-height:1.04;letter-spacing:-.05em;font-weight:700}
.pt__copy h1 .blue-t{color:var(--blue)}
/* on ne coupe que le haut et le bas (le glissement des mots) : sur les côtés, les dernières lettres débordent librement */
.pt__copy .rot{display:inline-grid;justify-items:center;clip-path:inset(0 -.3em);vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.rot__w{grid-area:1/1;white-space:nowrap;will-change:transform}
.pt__copy .lead{margin:22px auto 0}
.pt .btns{display:flex;flex-wrap:wrap;gap:10px}
.pt__icon{position:absolute;z-index:2;left:50%;top:50%;width:min(80vh,80vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  transform:translateY(calc(var(--dy,0px) * (1 - var(--g,0)))) scale(calc(var(--sr,1) + (1 - var(--sr,1)) * var(--g,0)))}
.pt__ring{position:absolute;inset:0}
.pt__q{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--qc);transform-origin:var(--ox) var(--oy);
  transform:translate(calc(var(--tx,0px) * var(--p,0)),calc(var(--ty,0px) * var(--p,0))) scale(calc(1 + (var(--k,1) - 1) * var(--p,0)))}
.pt__world{position:absolute;inset:0;z-index:1;background:#0a0a0a;clip-path:circle(calc(var(--r0,40px) * (var(--sr,1) + (1 - var(--sr,1)) * var(--g,0)) + var(--p,0) * 130vmax) at var(--cx,50%) calc(var(--cy,50%) + var(--dy,0px) * (1 - var(--g,0))))}
.pt__world>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(calc(1.45 - var(--p,0) * .42))}
.pt__world::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.12) 55%,rgba(0,0,0,.28))}
.pt__world::after{content:"";position:absolute;inset:0;z-index:3;background:#e63025;opacity:calc(1 - var(--p,0) * 6);pointer-events:none}
.pt__hint{position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:5px;font-family:var(--mono);font-size:calc(10px / var(--sr,1));line-height:1.25;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#fff;opacity:calc(1 - var(--g,0) * 5)}
.pt__hint i{width:1px;height:12px;background:linear-gradient(#fff,transparent);animation:ptHint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes ptHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.pt__world::before{background:radial-gradient(80% 70% at 50% 62%,rgba(0,0,0,.66),rgba(0,0,0,.28) 70%),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 50%)}
.pt__wcopy{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:calc(var(--sec-r) + clamp(48px,8vh,90px));display:grid;justify-items:center;text-align:center;color:#fff;opacity:0}
.pt__wcopy .kicker{color:rgba(255,255,255,.75);margin-bottom:18px}
.pt__wcopy h2{font-size:clamp(40px,5.4vw,88px);line-height:1;letter-spacing:-.05em;font-weight:700}
.pt__wcopy .lead{margin:18px auto 0;max-width:58ch;color:rgba(255,255,255,.86)}
.pt__stats{display:grid;grid-template-columns:repeat(3,minmax(0,200px));justify-content:center;gap:clamp(12px,2vw,28px);margin-top:clamp(24px,3.5vh,40px)}
.pt__stats li{display:grid;gap:6px;justify-items:center;padding:16px 12px;border-radius:var(--r);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pt__stats b{font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.04em;font-weight:700}
.pt__stats span{font-family:var(--ui);font-size:13px;line-height:1.3;color:rgba(255,255,255,.78)}
.pt__wcopy .btns{justify-content:center;margin-top:28px}
@media (max-width:860px){
  .pt__copy{top:100px}
  .pt__copy h1{font-size:clamp(46px,13.4vw,72px)}
  .pt__copy .lead{margin-top:16px;font-size:15px;max-width:34ch}
  .pt__icon{width:min(60svh,92vw)}
  .pt__wcopy{left:16px;right:16px;bottom:calc(var(--sec-r) + 100px)}
  .pt__wcopy h2{font-size:clamp(32px,9vw,46px)}
  .pt__wcopy .lead{font-size:14px;margin-top:12px}
  .pt__stats{gap:8px;margin-top:14px}.pt__stats li{padding:12px 6px;gap:4px}.pt__stats b{font-size:26px}.pt__stats span{font-size:11px}
  .pt__wcopy .btns{margin-top:18px;flex-wrap:nowrap;gap:8px}.pt__wcopy .btn{height:46px;padding:0 14px;font-size:13px;gap:6px;white-space:nowrap}
  .pt__hint{font-size:calc(9px / var(--sr,1));gap:3px}.pt__hint i{height:9px}
}
@media (prefers-reduced-motion:reduce){.pt{height:auto}.pt__pin{position:relative}.pt__ring,.pt__hint i{animation:none}}
/* écrans d'ordinateur peu hauts : « Pour qui » reste entier au-dessus de l'arrondi de la section suivante */
@media (min-width:861px) and (max-height:820px){
  .who__intro p:not(.kicker){display:none}
  .who__intro h2{font-size:clamp(24px,2.2vw,34px)}
  .who__ch h3{margin-top:8px;font-size:clamp(26px,2.4vw,38px)}
  .who__pb,.who__re{margin-top:14px;font-size:15px;line-height:1.45}
  .who__cta{margin-top:16px}
}

/* Tous les appareils : Veeyou sur la télévision, Speedy Flow au poignet */
.morph__lead{margin-top:18px;max-width:42ch}
.tv-brand{display:flex;align-items:center;gap:.45em}.dv .tv-brand img{width:1.5em;height:1.5em;border-radius:.4em}
.tv-tag{padding:.35em .8em;border-radius:999px;background:rgba(255,255,255,.18);font-size:.8em;font-weight:600}
.tv-prog{display:block;width:62%;height:.28em;margin-top:.9em;border-radius:1em;background:rgba(255,255,255,.25);overflow:hidden}.tv-prog i{display:block;width:38%;height:100%;background:#fff}
.dv .w-ico{width:1.9em;height:1.9em;flex:none;border-radius:50%}
.w-wave{display:flex;align-items:center;gap:.2em;height:1.8em}
.w-wave i{flex:1;max-width:.28em;height:30%;border-radius:.2em;background:#0a84ff;animation:wWave 1.1s ease-in-out infinite}
.w-wave i:nth-child(2n){animation-delay:-.3s}.w-wave i:nth-child(3n){animation-delay:-.55s}.w-wave i:nth-child(4n){animation-delay:-.8s}
@keyframes wWave{50%{height:100%}}
.w-say{display:block;margin-top:.5em;font-size:.8em;line-height:1.25;font-weight:600}
.w-btn--blue{background:#0a84ff;color:#fff}
@media (prefers-reduced-motion:reduce){.w-wave i{animation:none;height:60%}}
@media (max-width:860px){.morph__lead{display:none}}

/* Téléphone : la barre d'état se fond dans la couleur du haut de la page */
.ui-shot--m{background-color:#fff;background-repeat:no-repeat;background-position:50% 0;background-size:100% 8000%}
.ui-shot--m.is-dk .sb{color:#fff}
/* Montre : Speedy Flow transcrit la réunion en direct, tout est centré */
.ui-w--live{padding:.9em .9em .8em;text-align:center}
.ui-w--live .w-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:.7em;color:#5ac8fa;font-weight:600}
.ui-w--live .w-top::before{content:""}
.ui-w--live .w-top span{grid-column:2}
.ui-w--live .w-top b{justify-self:end;margin:0;color:#fff}
.w-live{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.32em;min-height:0}
.dv .w-live .w-ico{width:2.1em;height:2.1em}
.w-rec{display:flex;align-items:center;gap:.35em;font-size:.6em;font-weight:600;color:#ff453a}
.w-rec i{width:.6em;height:.6em;border-radius:50%;background:#ff453a;animation:wRec 1.2s ease-in-out infinite}
@keyframes wRec{50%{opacity:.25}}
.w-live .w-wave{height:1.3em;width:70%;justify-content:center}
.w-txt{font-size:.74em;line-height:1.25;font-weight:600;min-height:3.8em;max-width:100%}
.w-txt b{display:block;font-size:.8em;color:#5ac8fa;margin-bottom:.1em}
.w-clock{font-family:var(--mono);font-size:.56em;color:#8e8e93}
@media (prefers-reduced-motion:reduce){.w-rec i{animation:none}}

/* Ils nous font confiance : un ruban centré, logos sans cadre, qui défile doucement */
.who__logos{padding:clamp(56px,7vw,104px) 0 calc(var(--sec-r) + clamp(56px,6vw,96px));text-align:center}
.who__logos .kicker{justify-content:center;margin-bottom:clamp(24px,3vw,36px)}
.trust{--g:clamp(48px,5vw,88px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.trust .marq__run{gap:var(--g);align-items:center;animation:trustRun 55s linear infinite}
.trust .marq:hover .marq__run{animation-play-state:paused}
.trust .lg{flex:none;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none}
.trust .lg img{height:clamp(34px,3vw,46px);max-height:none;width:auto;max-width:clamp(120px,11vw,170px)}
@keyframes trustRun{to{transform:translateX(calc(-50% - var(--g) / 2))}}
@media (prefers-reduced-motion:reduce){.trust .marq__run{animation:none}}
/* Tous les écrans : l'exemple tiré de nos produits */
/* Notre méthode : titre, trois temps expliqués, appel à l'action */
#methode .close__img::after{background:linear-gradient(180deg,rgba(8,6,4,calc(var(--dim) + .1)),rgba(8,6,4,var(--dim)) 40%,rgba(8,6,4,calc(var(--dim) + .3)))}
#methode .close__lines{max-width:none;width:100%;padding-top:clamp(72px,9vh,96px);padding-bottom:calc(var(--sec-r) + 24px)}
.close__h{font-weight:700;font-size:clamp(36px,5vw,80px);letter-spacing:-.05em;line-height:1;color:#fff}
.close__h span{color:rgba(255,255,255,.5)}
.close__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,5vh,56px);color:#fff}
.close__steps li{padding-top:18px;border-top:1px solid rgba(255,255,255,.3)}
.close__steps b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#8cc2ff}
.close__steps h3{margin:10px 0 8px;font-size:clamp(22px,2vw,32px);letter-spacing:-.03em}
.close__steps p{font-family:var(--ui);font-size:clamp(15px,1.1vw,17px);line-height:1.5;color:rgba(255,255,255,.75);max-width:36ch}
.close__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,4.5vh,48px)}
.close__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
@media (max-width:860px){
  .close__steps{grid-template-columns:1fr;gap:14px;margin-top:20px}
  .close__steps li{padding-top:10px}.close__steps h3{margin:4px 0 2px;font-size:19px}.close__steps p{font-size:14px;line-height:1.4}
  .close__h{font-size:clamp(26px,7.4vw,36px)}
  #methode .close__lines{padding-top:68px;padding-bottom:calc(var(--sec-r) + 8px)}
  .close__steps{gap:10px;margin-top:16px}.close__steps p{font-size:13px}
  .close__cta{margin-top:16px}.close__cta .btn--ghost{display:none}
}
.morph .h2{font-size:clamp(34px,4.3vw,70px)}

/* Notre méthode : la sécurité mise en avant */
@media (min-width:1101px){.close__steps{grid-template-columns:repeat(4,1fr)}}
.close__steps li.is-sec{border-top:2px solid #30d158}
.close__steps li.is-sec b{color:#30d158}
.close__steps li.is-sec h3{color:#fff}
.close__steps li.is-sec b em{font-style:normal;margin-left:10px;padding:2px 8px;border-radius:999px;background:rgba(48,209,88,.16);color:#30d158;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:1100px) and (min-width:861px){.close__steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.close__steps{gap:8px;margin-top:14px}.close__steps li{padding-top:8px}.close__steps p{font-size:12.5px}.close__steps h3{font-size:17px}}
/* Études de cas : onglets avec icônes, en-tête, grande scène teintée, récit en trois temps */
.cases__tabs{gap:6px;padding:6px;width:max-content;max-width:100%;border-radius:999px;background:var(--card);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.cases__tab{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 8px;border:0;background:none}
.cases__tab img{width:26px;height:26px;border-radius:8px;object-fit:contain;background:#fff}
.cases__tab[aria-selected=true]{background:#fff;color:var(--fg);box-shadow:0 4px 16px rgba(10,10,10,.1)}
.case{display:block;margin-top:clamp(28px,4vw,48px)}
.case__hd{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.case__ico{width:clamp(52px,4.4vw,64px);height:clamp(52px,4.4vw,64px);border-radius:16px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.case__ico.is-logo{padding:8px}
.case__hd>div{flex:1;min-width:0}
.case .case__hd h3{font-size:clamp(30px,3.2vw,48px);line-height:1}
.case__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.case .case__meta span{border:0;padding:0;border-radius:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case__stage{position:relative;margin-top:clamp(20px,2.6vw,32px);height:clamp(320px,42vw,600px);border-radius:var(--r);overflow:hidden;padding:clamp(28px,4vw,56px) 14% 0;
  background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--case-c,var(--blue)) 34%,transparent),transparent 70%),linear-gradient(180deg,#f6f6f8,color-mix(in srgb,var(--case-c,var(--blue)) 10%,#f1f1f3))}
.case__stage .cs__win{height:calc(100% + 40px)}
.case__stage .cs__phone{right:7%;bottom:-8%;width:clamp(110px,15%,200px)}
.case__story{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.case__story>div{padding-top:16px;border-top:1px solid var(--line)}
.case__story dt{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case__story dt b{color:var(--case-c,var(--blue));filter:brightness(.8)}
.case__story dd{margin-top:8px;font-family:var(--ui);font-size:clamp(15px,1.15vw,18px);line-height:1.5}
.case.is-swap .case__hd,.case.is-swap .case__story{animation:caseIn .7s var(--ease) both}
.case.is-swap .case__story{animation-delay:.12s}
@media (max-width:860px){
  .case__hd .btn{order:3;width:100%;justify-content:center}
  .case__stage{height:300px;padding:24px 8% 0}
  .case__stage .cs__phone{width:30%;right:5%}
  .case__story{grid-template-columns:1fr;gap:14px}
}
/* Actualités : un titre court */
.journal__t{margin-top:10px;font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.04em;line-height:1}
@media (max-width:860px){#methode{height:auto}#methode .close__pin{position:relative;height:auto;min-height:100svh}#methode .close__lines{padding-top:96px;padding-bottom:calc(var(--sec-r) + 48px)}#methode .close__img::after{--dim:.6}}

/* Tous les écrans, défilement naturel : le texte et la photo restent en place, les appareils passent un par un */
.morph{height:auto}
.morph__pin{position:relative;top:auto;height:auto;overflow:clip;align-items:start}
.morph__bg{position:sticky;inset:auto;top:0;height:100svh;grid-column:1/-1;grid-row:1;margin:0 calc(var(--gut) * -1)}
.morph__pin>div:not(.morph__bg):not(.morph__stage){grid-column:1;grid-row:1;position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}
.morph__stage{grid-column:2;grid-row:1;height:auto;perspective:none}
.morph__dvs{position:static;display:block}
.morph__dv{position:relative;inset:auto;height:100svh;display:grid;place-items:center;opacity:.3;transform:scale(.94);transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1);will-change:auto}
.morph__dv.on{opacity:1;transform:none}
.morph__cap{display:none}
@media (max-width:860px){
  .morph__pin{grid-template-columns:1fr;align-content:start;padding:96px 16px calc(var(--sec-r) + 32px)}
  .morph__bg{grid-row:1 / span 2;grid-column:1;margin:0 -16px}
  .morph__pin>div:not(.morph__bg):not(.morph__stage){position:relative;height:auto;grid-row:1}
  .morph__lead{display:block}.morph__steps{display:none}
  .morph__stage{grid-column:1;grid-row:2;height:auto}
  .morph__dv{height:auto;padding:56px 0 8px;opacity:1;transform:none}
  .morph .dv-phone{--w:220px}.morph .dv-watch{--w:150px}
  .morph__cap{display:block;margin-top:22px;max-width:34ch;text-align:center;font-family:var(--ui);font-size:15px;line-height:1.45;color:var(--muted)}
  .morph__cap b{display:block;margin-bottom:4px;color:var(--fg);font-family:var(--display);font-size:22px;letter-spacing:-.02em}
}
/* Montre : l'heure s'écarte du bord arrondi */
.ui-w--live{padding:1.25em 1.5em .9em}

/* =====================================================================
   Étude de cas (etude.html) : contexte, ce que nous avons fait, identité, interfaces, téléphone, démarche
   ===================================================================== */
.cx{--cc:var(--blue)}
.cx-hero{position:relative;padding:clamp(120px,13vw,170px) var(--gut) 0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 9%,#fff),#fff 60%)}
.cx-back{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.cx-back:hover{color:var(--fg)}
.cx-id{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,4vw,48px)}
.cx-ico{width:56px;height:56px;border-radius:16px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 30px -10px rgba(0,0,0,.2)}
.cx-ico.is-logo{padding:8px}
.cx-id .kicker{margin:0}
.cx-hero h1{margin-top:18px;font-size:clamp(52px,9vw,150px);letter-spacing:-.06em;line-height:.92}
.cx-hero .lead{margin-top:22px;max-width:46ch}
.cx-meta{display:flex;flex-wrap:wrap;gap:16px clamp(24px,4vw,56px);margin-top:clamp(28px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.cx-meta dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cx-meta dd{margin-top:6px;font-family:var(--ui);font-weight:600;font-size:clamp(15px,1.15vw,18px)}
.cx-stage{position:relative;margin-top:clamp(40px,5vw,72px);height:clamp(300px,46vw,700px);padding:clamp(28px,4vw,64px) 10% 0;border-radius:var(--sec-r) var(--sec-r) 0 0;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--cc) 40%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--cc) 14%,#f4f4f6),color-mix(in srgb,var(--cc) 26%,#eef))}
.cx-stage .cs__win{height:calc(100% + 40px)}
.cx-stage .cs__phone{right:5%;bottom:-6%;width:clamp(110px,16%,230px)}
.cx-ctx{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6vw,110px);align-items:start}
.cx-txt{display:grid;gap:26px;font-family:var(--ui);font-size:clamp(18px,1.5vw,23px);line-height:1.5}
.cx-txt b{display:block;margin-bottom:8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cc)}
.cx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(32px,4vw,56px)}
.cx-chips li{display:flex;align-items:center;gap:12px;padding:14px 22px 14px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-family:var(--ui);font-weight:600;font-size:clamp(15px,1.2vw,19px)}
.cx-chips b{font-family:var(--mono);font-size:11px;font-weight:500;color:color-mix(in srgb,var(--cc) 55%,#fff)}
.cx-concept{margin-top:clamp(48px,6vw,96px);max-width:820px;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 60%,#0a0a0a),#111)}
.cx-concept h3{margin-top:12px;font-size:clamp(28px,3vw,48px);letter-spacing:-.04em;line-height:1.02}
.cx-concept p:not(.kicker){margin-top:14px;font-family:var(--ui);font-size:clamp(16px,1.25vw,20px);line-height:1.5;color:rgba(255,255,255,.8);max-width:52ch}
.cx-idn .lead{margin-top:20px;max-width:56ch}
.cx-brand{display:grid;grid-template-columns:1fr 1fr 1.2fr;grid-template-rows:auto auto;gap:14px;margin-top:clamp(32px,4vw,56px)}
.cx-logo{display:grid;place-items:center;aspect-ratio:1.3;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cx-logo img{width:38%;max-height:55%;object-fit:contain}
.cx-logo.is-neg{background:var(--cc)}
.cx-logo.is-neg img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.3))}
.cx-type{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,2.6vw,36px);border-radius:var(--r);background:#0a0a0a;color:#fff}
.cx-type span{font-size:clamp(110px,13vw,220px);line-height:.9;font-weight:700;letter-spacing:-.04em}
.cx-type p{font-family:var(--ui);color:rgba(255,255,255,.6);font-size:14px}
.cx-type p b{display:block;color:#fff;font-size:clamp(20px,1.8vw,28px);font-weight:700}
.cx-pal{grid-column:span 2;list-style:none;display:flex;border-radius:var(--r);overflow:hidden;min-height:150px}
.cx-pal li{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:var(--sw)}
.cx-pal li span{align-self:start;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.88);color:#0a0a0a;font-family:var(--mono);font-size:11px}
.cx-pal i{display:none}
.cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.cx-grid .cx-win:first-child{grid-column:1/-1}
.cx-win{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -30px rgba(0,0,0,.35)}
.cx-win .wk__bar span{margin:0 auto;translate:-24px 0;padding:3px 14px;border-radius:7px;background:#fff;font:500 11px var(--ui);color:#6f6f6f}
.cx-win img{display:block;width:100%;height:auto}
.cx-win figcaption{padding:14px 18px;font-family:var(--ui);font-weight:600;font-size:15px;border-top:1px solid var(--line)}
.cx-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,64px);margin-top:clamp(36px,5vw,72px);justify-items:center}
.cx-phones figure{margin:0;width:100%;max-width:300px;text-align:center}
.cx-phone{aspect-ratio:9/19.4;padding:8px;border-radius:44px;background:#1b1b1d;box-shadow:inset 0 0 0 2px #3a3a3d,0 40px 80px -30px color-mix(in srgb,var(--cc) 70%,transparent)}
.cx-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px}
.cx-phones figcaption{margin-top:18px;font-family:var(--ui);color:rgba(255,255,255,.7);font-size:15px}
.cx-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(32px,4vw,56px)}
.cx-steps li{padding-top:18px;border-top:2px solid var(--cc)}
.cx-steps b{font-family:var(--mono);font-size:12px;color:var(--cc)}
.cx-steps h3{margin:10px 0 8px;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em}
.cx-steps p{font-family:var(--ui);color:var(--muted);font-size:16px;line-height:1.5;max-width:36ch}
.cx-res{margin:clamp(56px,7vw,110px) 0 0;max-width:1000px}
.cx-res p:not(.kicker){margin-top:14px;font-weight:700;font-size:clamp(30px,3.8vw,60px);letter-spacing:-.045em;line-height:1.04}
.cx-way .btns{margin-top:clamp(28px,3vw,44px)}
.cx-next{display:grid;gap:14px;padding:clamp(64px,9vw,140px) var(--gut);background:#0a0a0a;color:#fff;position:relative}
.cx-next::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 50%,color-mix(in srgb,var(--nc) 45%,transparent),transparent 70%);opacity:.7;transition:opacity .5s}
.cx-next:hover::before{opacity:1}
.cx-next>*{position:relative}
.cx-next__n{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-weight:700;font-size:clamp(44px,8vw,130px);letter-spacing:-.06em;line-height:1}
.cx-next__n img{width:clamp(48px,6vw,96px);height:clamp(48px,6vw,96px);border-radius:22%;object-fit:contain;background:#fff;padding:4px}
.cx-next__go{position:absolute;right:var(--gut);bottom:clamp(64px,9vw,140px);font-size:clamp(36px,5vw,72px);transition:transform .4s var(--ease)}
.cx-next:hover .cx-next__go{transform:translate(8px,-8px)}
@media (max-width:860px){
  .cx-ctx{grid-template-columns:1fr}
  .cx-brand{grid-template-columns:1fr 1fr}
  .cx-type{grid-row:auto;grid-column:1/-1;flex-direction:row;align-items:end;gap:20px}.cx-type span{font-size:96px}
  .cx-pal{grid-column:1/-1;min-height:110px}.cx-pal li{padding:8px}.cx-pal li span{font-size:9px;padding:3px 6px}
  .cx-grid{grid-template-columns:1fr}
  .cx-phones{grid-template-columns:repeat(3,72%);overflow-x:auto;justify-items:stretch;scroll-snap-type:x mandatory;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .cx-phones figure{scroll-snap-align:start}
  .cx-steps{grid-template-columns:1fr}
  .cx-stage{height:320px;padding:22px 6% 0}.cx-stage .cs__phone{width:30%}
  .cx-next__go{bottom:auto;top:clamp(64px,9vw,140px)}
}

/* Notre méthode : plus de section figée, un voile plus sombre pour bien lire */
#methode{height:auto}
#methode .close__pin{position:relative;height:auto;min-height:100svh}
#methode .close__img{--dim:.62}
#methode .close__img::after{background:linear-gradient(180deg,rgba(8,6,4,.55),rgba(8,6,4,.68) 45%,rgba(8,6,4,.86))}
#methode .close__lines{padding-top:clamp(120px,14vh,160px);padding-bottom:calc(var(--sec-r) + clamp(64px,9vh,110px))}
#methode .close__k{color:#ffcf73}
#methode .close__h span{color:rgba(255,255,255,.62)}
#methode .close__steps p{color:rgba(255,255,255,.86)}
#methode .close__steps li{border-top-color:rgba(255,255,255,.4)}
#methode .close__lines{text-shadow:0 1px 18px rgba(0,0,0,.35)}
/* Études de cas sur téléphone : la capture ordinateur se voit en entier, le téléphone se pose en dessous, à droite */
@media (max-width:860px){
  .case__stage,.cx-stage{height:auto;padding:16px 16px 40%}
  .case__stage .cs__win,.cx-stage .cs__win{height:auto;border-radius:10px}
  .case__stage .wk__shot,.cx-stage .wk__shot{height:auto}
  .case__stage .wk__shot img,.cx-stage .wk__shot img{height:auto}
  .case__stage .cs__phone,.cx-stage .cs__phone{top:auto;right:16px;bottom:16px;width:22%}
}
.cx-logo.is-wide img{width:66%}
@media (max-width:860px){.cx-type{flex-wrap:wrap;gap:12px 24px}.cx-type span{flex-basis:100%}}
/* Méthode détaillée (page Services) : ce que contient chaque étape */
.close__steps--full ul{list-style:none;display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.close__steps--full ul li{display:flex;gap:10px;align-items:baseline;font-family:var(--ui);font-size:14px;color:#fff}
#methode .close__steps--full ul li{padding:0;border:0}

/* =====================================================================
   Services : mosaïque de tête, cartes cliquables, page de chaque service
   ===================================================================== */
.sv{color:inherit}
.sv__more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--mc)}
.sv__more i{transition:transform .3s var(--ease)}

/* =====================================================================
   Démarrer un projet : formulaire pas à pas, une question par écran
   ===================================================================== */
.bf-page{position:relative;min-height:100svh;padding:clamp(110px,12vw,150px) var(--gut) clamp(80px,9vw,130px);overflow:hidden;
  background:radial-gradient(40% 50% at 8% 10%,rgba(0,118,255,.12),transparent 70%),radial-gradient(35% 45% at 95% 30%,rgba(136,63,240,.1),transparent 70%),radial-gradient(40% 40% at 60% 100%,rgba(0,157,50,.08),transparent 70%),#fbfbfc}
.bf-head{max-width:820px}
.bf-head h1{margin-top:0;font-size:clamp(44px,6.4vw,104px);letter-spacing:-.055em;line-height:.95}
.bf-head .lead{margin-top:18px;max-width:46ch}
.bf-time{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:500 14px var(--ui);color:var(--fg)}
.bf-time svg{width:18px;height:18px;fill:none;stroke:#0076ff;stroke-width:2;stroke-linecap:round}
.bf-wrap{margin-top:clamp(36px,5vw,64px);background:none}
.bf{scroll-margin-top:96px;border-radius:calc(var(--r) + 8px);background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 0 0 1px var(--line),0 40px 100px -50px rgba(10,20,60,.35);padding:clamp(22px,3vw,44px)}
.bf-top{display:flex;align-items:center;gap:16px;min-height:36px}
.bf-back{display:inline-flex;align-items:center;gap:4px;padding:6px 8px 6px 0;font:500 14px var(--ui);color:var(--muted);transition:color .2s}
.bf-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bf-back:hover{color:var(--fg)}
.bf-back[hidden],.bf-nav[hidden],.bf-other[hidden],.bf-msg[hidden],.bf-err[hidden]{display:none}
.bf-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.bf-bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.bf-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#0076ff,#883ff0,#009d32,#ffa900);background-size:100vw 100%;transition:width .7s cubic-bezier(.22,1,.36,1)}
.bf-q{margin-top:clamp(26px,3.4vw,44px)}
.bf-q.in{animation:bfIn .6s cubic-bezier(.22,1,.36,1)}.bf-q.in-back{animation:bfBack .6s cubic-bezier(.22,1,.36,1)}
@keyframes bfIn{from{opacity:0;transform:translateY(34px)}}@keyframes bfBack{from{opacity:0;transform:translateY(-34px)}}
.bf-t{font-size:clamp(30px,3.6vw,56px);letter-spacing:-.045em;line-height:1.02;font-weight:700;max-width:none;text-wrap:balance}
.bf-h{margin-top:12px;font-family:var(--ui);color:var(--muted);font-size:clamp(16px,1.2vw,19px)}
.bf-body{margin-top:clamp(22px,3vw,36px)}
.bf-svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bf-card,.bf-opt{position:relative;isolation:isolate;overflow:hidden;display:flex;gap:14px;text-align:left;border-radius:var(--r);background:#f5f5f7;box-shadow:inset 0 0 0 1px transparent;font-family:var(--ui);color:var(--fg);cursor:pointer;transition:box-shadow .3s,background .3s}
.bf-card{flex-direction:column;gap:6px;padding:20px 48px 20px 56px;min-height:100px}
.bf-card b{font-size:17px;letter-spacing:-.01em}
.bf-card small{font-size:13px;line-height:1.4;color:var(--muted)}
.bf-card kbd,.bf-opt kbd{position:absolute;left:16px;top:19px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:600 11px var(--mono);color:var(--muted);background:#fff}
.bf-card i,.bf-opt i{position:absolute;right:14px;top:50%;translate:0 -50%;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:13px;color:#fff;background:var(--mc,var(--blue));opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.bf-card:hover,.bf-opt:hover{background:#efeff2}
.bf-card.on,.bf-opt.on{box-shadow:inset 0 0 0 1.5px var(--mc,var(--blue));background:color-mix(in srgb,var(--mc,var(--blue)) 7%,#fff)}
.bf-card.on i,.bf-opt.on i{opacity:1;transform:none}
.bf-card.on kbd,.bf-opt.on kbd{background:var(--mc,var(--blue));color:#fff;box-shadow:none}
.bf-card kbd,.bf-opt kbd{transition:background .3s,color .3s,box-shadow .3s}
.bf-card::before,.bf-opt::before,.bf-pill::before,.bf-day::before,.bf-slot::before{content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--mc,#0076ff);opacity:0;pointer-events:none}
.pop{animation:bfPress .5s cubic-bezier(.3,1.5,.5,1)}
.pop::before{animation:bfRipple .7s cubic-bezier(.22,1,.36,1)}
@keyframes bfPress{30%{transform:scale(.97)}}
@keyframes bfRipple{from{opacity:.25;transform:scale(0)}to{opacity:0;transform:scale(70)}}
.bf-other{margin-top:12px;max-width:560px;animation:bfIn .45s cubic-bezier(.22,1,.36,1)}
.bf-opts{display:flex;flex-wrap:wrap;gap:10px}
.bf-opt{align-items:center;min-height:56px;padding:0 50px 0 54px;border-radius:999px;font-size:16px;font-weight:500}
.bf-opt kbd{top:50%;translate:0 -50%}
.bf-budget{display:grid;gap:22px;max-width:640px}
.bf-cur{display:flex;gap:6px}
.bf-pill{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:9px 16px;border-radius:999px;background:#f5f5f7;box-shadow:inset 0 0 0 1px transparent;font:500 14px var(--ui);color:var(--muted);transition:box-shadow .3s,color .3s,background .3s}
.bf-pill:hover{color:var(--fg)}
.bf-pill.on{color:#0076ff;background:rgba(0,118,255,.06);box-shadow:inset 0 0 0 1.5px #0076ff}
.bf-unsure{text-align:left}
.bf-unsure i{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);font-style:normal;font-size:11px;color:transparent;transition:background .3s,color .3s,box-shadow .3s}
.bf-unsure.on i{background:#0076ff;color:#fff;box-shadow:none}
.bf-bv{display:block;font-family:var(--display,inherit);font-weight:700;font-size:clamp(26px,3.2vw,46px);letter-spacing:-.04em;line-height:1.05;color:#0076ff;transition:opacity .3s}
.bf-budget input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;margin:6px 0;border-radius:10px;outline:0;cursor:pointer;background:linear-gradient(90deg,#0076ff,#883ff0) 0/var(--p,40%) 100% no-repeat,var(--line);transition:opacity .3s}
.bf-budget input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0076ff,0 6px 16px rgba(0,118,255,.35);cursor:grab}
.bf-budget input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0076ff,0 6px 16px rgba(0,118,255,.35);cursor:grab}
.bf-budget input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #0076ff}
.bf-budget.is-off .bf-bv{color:var(--fg)}
.bf-budget.is-off input[type=range]{opacity:.35}
.bf-check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;font-family:var(--ui);font-size:15px;line-height:1.45;cursor:pointer}.bf-check span{flex:1}.bf-check .bf-err{flex-basis:100%;margin-left:32px}
.bf-check input{-webkit-appearance:none;appearance:none;display:grid;place-items:center;flex:none;width:24px;height:24px;margin:0;border-radius:50%;background:#f5f5f7;box-shadow:inset 0 0 0 1.5px #d4d4d8;cursor:pointer;transition:background .25s,box-shadow .25s}
.bf-check input::after{content:"";width:10px;height:5px;margin-top:-3px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bf-check input:checked{background:#0076ff;box-shadow:none}.bf-check input:checked::after{transform:rotate(-45deg) scale(1)}
.bf-check input:focus-visible{box-shadow:0 0 0 4px rgba(0,118,255,.2)}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bf-field{display:grid;gap:8px;margin-bottom:14px;font:500 14px var(--ui);color:var(--muted)}
.bf-field input,.bf-field textarea,.bf-field select{width:100%;padding:16px 22px;border:0;border-radius:999px;background:#f5f5f7;box-shadow:inset 0 0 0 1px transparent;font:17px var(--ui);color:var(--fg);outline:0;transition:box-shadow .2s}
.bf-field input:focus,.bf-field textarea:focus,.bf-field select:focus,.bf-other input:focus{background:#fff;box-shadow:inset 0 0 0 1.5px #0076ff,0 0 0 4px rgba(0,118,255,.08)}
.bf-field em{font-style:normal;color:var(--dim)}
.bf-field select{-webkit-appearance:none;appearance:none;padding-right:48px;cursor:pointer;background:#f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 20px center/18px no-repeat}
.bf-tel{position:relative;display:block}
.bf-dial{position:absolute;left:22px;top:50%;translate:0 -50%;font:500 17px var(--ui);color:var(--fg);pointer-events:none}
.bf-tel input{padding-left:76px}
.bf-link{font:600 14px var(--ui);color:#0076ff;padding:8px 4px}.bf-link:hover{color:var(--fg)}.bf-link[hidden],.bf-datebox[hidden]{display:none}
.bf-datebox{margin-top:14px;animation:bfIn .45s cubic-bezier(.22,1,.36,1)}
.bf-when{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.bf-cal{max-width:360px;padding:16px 18px 18px;border-radius:var(--r);background:#f5f5f7;font-family:var(--ui)}
.bf-cal__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bf-cal__h b{font-size:15px;font-weight:600;text-transform:capitalize}
.bf-cal__h button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;font-size:22px;line-height:1;color:var(--fg);transition:opacity .2s}
.bf-cal__h button:disabled{opacity:.3;cursor:default}
.bf-cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.bf-cal__g i{padding:6px 0;font:500 11px var(--mono);font-style:normal;color:var(--muted);text-transform:uppercase}
.bf-day{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;border-radius:50%;font:500 14px var(--ui);color:var(--fg);transition:background .25s,color .25s}
.bf-day:hover:not(:disabled){background:#fff}.bf-day:disabled{color:#c4c4c8;cursor:default}
.bf-day.on{background:#0076ff;color:#fff}
.bf-slots__l{display:flex;flex-wrap:wrap;gap:8px}
.bf-slot{position:relative;isolation:isolate;overflow:hidden;min-width:86px;padding:12px 18px;border-radius:999px;background:#f5f5f7;font:500 15px var(--ui);color:var(--fg);transition:background .25s,color .25s;animation:bfIn .4s cubic-bezier(.22,1,.36,1)}
.bf-slot:hover{background:#efeff2}.bf-slot.on{background:#0076ff;color:#fff}
.bf-hint{padding:18px 0;font:400 15px var(--ui);color:var(--muted)}
.bf-tz{margin-top:16px;font:400 13px var(--ui);color:var(--muted)}
.bf-up{margin-top:6px}
.bf-drop{display:grid;justify-items:center;gap:6px;padding:clamp(26px,3.4vw,40px) 24px;border-radius:var(--r);background:#f5f5f7;box-shadow:inset 0 0 0 1.5px transparent;text-align:center;font-family:var(--ui);cursor:pointer;outline:0;transition:background .3s,box-shadow .3s}
.bf-drop:hover,.bf-drop:focus-visible,.bf-drop.over{background:rgba(0,118,255,.06);box-shadow:inset 0 0 0 1.5px #0076ff}
.bf-drop svg{width:30px;height:30px;margin-bottom:4px;fill:none;stroke:#0076ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bf-drop b{font-size:17px;font-weight:600}
.bf-drop span{font-size:14px;line-height:1.45;color:var(--muted);max-width:44ch}
.bf-files{list-style:none;display:grid;gap:8px;margin-top:10px}.bf-files:empty{display:none}
.bf-files li{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;border-radius:999px;background:#f5f5f7;font:500 14px var(--ui);animation:bfIn .4s cubic-bezier(.22,1,.36,1)}
.bf-files span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-files small{color:var(--muted)}
.bf-files button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--muted);font-size:18px;line-height:1;transition:color .2s}
.bf-files button:hover{color:#d70015}
.bf-up .bf-err{white-space:pre-line;margin-top:10px}
.bf-other input{width:100%;padding:15px 22px;border:0;border-radius:999px;background:#f5f5f7;box-shadow:inset 0 0 0 1px transparent;font:16px var(--ui);color:var(--fg);outline:0;transition:box-shadow .2s}
.bf-err{display:block;margin-top:2px;font:500 13px/1.4 var(--ui);color:#d70015;animation:bfIn .35s cubic-bezier(.22,1,.36,1)}
.err input,.err textarea,.err select{box-shadow:inset 0 0 0 1.5px #d70015 !important;background:#fff5f5}
.bf-msg{margin-top:16px;font:500 14px var(--ui);color:#d70015;animation:bfIn .35s cubic-bezier(.22,1,.36,1)}
.bf-field--big textarea{border-radius:var(--r);padding:20px 24px;min-height:190px;resize:vertical;font-size:clamp(18px,1.5vw,22px);line-height:1.45}
.bf-sub{margin:10px 0 12px;font:500 14px var(--ui);color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bf-recap{display:grid;gap:0;margin-bottom:22px;border-radius:var(--r);background:#f5f5f7;overflow:hidden}
.bf-recap>div{display:grid;grid-template-columns:170px 1fr auto;gap:14px;align-items:baseline;padding:16px 24px;border-bottom:1px solid var(--line)}
.bf-recap>div:last-child{border-bottom:0}
.bf-recap dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bf-recap dd{font-family:var(--ui);font-size:15px;line-height:1.45;white-space:pre-line}
.bf-edit{font:600 13px var(--ui);color:#0076ff}
.bf-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,32px)}
.bf-key{font-family:var(--ui);font-size:13px;color:var(--muted)}
.bf-key kbd{margin-left:4px;padding:3px 8px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);font:500 12px var(--mono)}
.bf-done{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,90px) 0;text-align:center;animation:bfIn .8s cubic-bezier(.22,1,.36,1)}
.bf-done__ico{display:inline-grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:0 20px 60px -20px rgba(0,118,255,.5);animation:bfPop 1s cubic-bezier(.3,1.5,.5,1)}
.bf-done__ico img{width:56px;height:56px;animation:icoSpin 1.4s .3s cubic-bezier(.22,1,.36,1)}
@keyframes bfPop{from{transform:scale(.3);opacity:0}}
.bf-done h2{margin-top:28px}.bf-done .lead{margin:20px auto 30px}
@media (max-width:640px){
  .bf-svc,.bf-row{grid-template-columns:1fr}.bf-card{min-height:0}
  .bf-key{display:none}.bf-recap>div{grid-template-columns:1fr auto}.bf-recap dt{grid-column:1/-1}
  .bf-opt{width:100%}.bf-nav [data-next]{flex:1}
  .bf-bv{font-size:24px}.bf-when{grid-template-columns:1fr}.bf-cal{max-width:none}.bf-tel input{padding-left:68px}
}
@media (prefers-reduced-motion:reduce){.pop,.pop::before,.bf-other,.bf-err,.bf-msg,.bf-q.in,.bf-q.in-back,.bf-done,.bf-done__ico,.bf-done__ico img{animation:none}}

/* Services : huit cartes nettes, chacune ouvre le formulaire de projet */
.sv-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:0}
.sv-list .sv{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:clamp(22px,2.2vw,30px);border:0;border-radius:var(--r);background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s,background .5s}
.sv-list .sv:hover{transform:translateY(-4px);background:color-mix(in srgb,var(--mc) 5%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc) 45%,var(--line)),0 24px 50px -30px color-mix(in srgb,var(--mc) 70%,transparent)}
.sv-list .sv__n{position:absolute;top:clamp(22px,2.2vw,30px);right:clamp(22px,2.2vw,30px);padding:0}
.sv-list .sv .qi{display:block;width:40px;height:40px}
.sv-list .sv>div{flex:1;display:flex;flex-direction:column;margin-top:16px}
.sv-list .sv h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.035em;line-height:1.08}
.sv-list .sv p{font-size:15px;line-height:1.45;margin-top:8px}
.sv-list .sv .tags{margin-top:12px;gap:6px}
.sv-list .sv .tags li{font-size:11px;padding:5px 10px}
.sv-list .sv__more{margin-top:auto;padding-top:14px}
@media (max-width:1100px){.sv-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sv-list{grid-template-columns:1fr;gap:10px}.sv-list .sv{padding:20px}.sv-list .sv__n{top:20px;right:20px}.sv-list .sv .qi{width:34px;height:34px}.sv-list .sv>div{margin-top:12px}.sv-list .sv p{font-size:14.5px}}
.crumbs span::before{content:"/";width:auto;height:auto;border-radius:0;background:none;color:var(--muted)} /* pas de point séparateur */
.bf-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;pointer-events:none}

/* Formulaire : univers visuels en vignettes, nuancier et roue des couleurs (identité visuelle) */
.bf-moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.bf-moods{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bf-mood{position:relative;isolation:isolate;display:grid;gap:10px;padding:8px 8px 14px;border-radius:var(--r);background:#f5f5f7;text-align:left;font-family:var(--ui);color:var(--fg);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .3s,background .3s}
.bf-mood:hover{background:#efeff2}
.bf-mood.on{background:rgba(0,118,255,.07);box-shadow:inset 0 0 0 1.5px #0076ff}
.bf-mood__n{display:flex;align-items:center;gap:10px;padding:0 8px;font-size:16px;font-weight:600}
.bf-mood__n kbd{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font:600 11px var(--mono);color:var(--muted);transition:background .3s,color .3s}
.bf-mood.on .bf-mood__n kbd{background:#0076ff;color:#fff}
.bf-mood__p{position:relative;display:block;aspect-ratio:4/3;border-radius:calc(var(--r) - 8px);overflow:hidden;background:linear-gradient(135deg,#eef1f6,#dfe5ef)}
.bf-mood__p i{position:absolute;display:block}
.bf-mood.pop .bf-mood__p{animation:bfPress .5s cubic-bezier(.3,1.5,.5,1)}
/* épuré : beaucoup d'air, une ligne, un point */
.mo-pure{background:#f6f5f1}.mo-pure i:nth-child(1){left:14%;top:30%;width:42%;height:6px;border-radius:6px;background:#1b1b1b}
.mo-pure i:nth-child(2){left:14%;top:44%;width:28%;height:4px;border-radius:4px;background:#bdbab2}.mo-pure i:nth-child(3){right:14%;bottom:18%;width:14px;height:14px;border-radius:50%;background:#0076ff}
/* minimaliste : noir et blanc, un seul geste */
.mo-min{background:#fff;box-shadow:inset 0 0 0 1px #ececec}.mo-min i:nth-child(1){left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;box-shadow:inset 0 0 0 3px #0a0a0a}
.mo-min i:nth-child(2){left:14%;bottom:16%;width:22%;height:3px;background:#0a0a0a}.mo-min i:nth-child(3){display:none}
/* saturé : couleurs franches qui se répondent */
.mo-sat{background:#ff2d55}.mo-sat i:nth-child(1){left:-8%;top:-14%;width:62%;aspect-ratio:1;border-radius:50%;background:#ffd60a}
.mo-sat i:nth-child(2){right:-6%;bottom:-10%;width:58%;height:58%;border-radius:22px;background:#0076ff;rotate:18deg}.mo-sat i:nth-child(3){right:30%;top:24%;width:22%;aspect-ratio:1;border-radius:50%;background:#00c853}
/* fun : formes rondes et décalées */
.mo-fun{background:#ffe14d}.mo-fun i:nth-child(1){left:10%;top:16%;width:38%;aspect-ratio:1;border-radius:50%;background:#ff4fa3}
.mo-fun i:nth-child(2){right:8%;top:28%;width:42%;height:34%;border-radius:999px;background:#6c5ce7;rotate:-14deg}.mo-fun i:nth-child(3){left:38%;bottom:10%;width:18%;aspect-ratio:1;border-radius:36% 64% 50% 50%;background:#00b3ff}
/* élégant : fond profond, filet doré, lettre à empattements */
.mo-ele{background:#141414}.mo-ele i:nth-child(1){left:14%;right:14%;bottom:24%;height:1px;background:#c9a96e}
.mo-ele i:nth-child(2){left:14%;top:16%;font:italic 400 clamp(30px,4vw,44px)/1 Georgia,'Times New Roman',serif;color:#f1e6cf}.mo-ele i:nth-child(2)::before{content:"Aa"}
.mo-ele i:nth-child(3){right:14%;bottom:14%;width:8px;height:8px;border-radius:50%;background:#c9a96e}
/* organique : matières naturelles, formes souples */
.mo-org{background:#efe6d8}.mo-org i:nth-child(1){left:8%;top:14%;width:56%;height:64%;border-radius:62% 38% 46% 54%/55% 48% 52% 45%;background:#6b8f5e}
.mo-org i:nth-child(2){right:12%;bottom:14%;width:30%;aspect-ratio:1;border-radius:50%;background:#c97b4a}.mo-org i:nth-child(3){right:20%;top:16%;width:16%;aspect-ratio:1;border-radius:50%;background:#e9c46a}
/* tech : nuit, grille, lumière */
.mo-tech{background:#0b1020}.mo-tech i:nth-child(1){inset:0;background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(0,229,255,.16) 17px 18px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(0,229,255,.16) 17px 18px)}
.mo-tech i:nth-child(2){left:50%;top:50%;width:30%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:#00e5ff;box-shadow:0 0 30px 8px rgba(0,229,255,.55)}.mo-tech i:nth-child(3){left:12%;bottom:14%;width:26%;height:4px;border-radius:4px;background:#7c4dff}
.mo-def i{display:none}
.bf-colors{display:grid;gap:18px;max-width:720px}
.bf-colors.is-off .bf-picked,.bf-colors.is-off .bf-sw,.bf-colors.is-off .bf-wheelbox{opacity:.35;pointer-events:none}
.bf-picked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px}
.bf-picked small{margin-left:auto;font:500 13px var(--mono);color:var(--muted)}
.bf-pick{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:999px;background:#f5f5f7;font:600 14px var(--mono);animation:bfIn .4s cubic-bezier(.22,1,.36,1)}
.bf-pick i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bf-pick button{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--muted);font-size:17px}
.bf-pick button:hover{color:#d70015}
.bf-pick--empty{padding:10px 16px;font:400 14px var(--ui);color:var(--muted)}
.bf-sw{display:flex;flex-wrap:wrap;gap:10px}
.bf-swatch{position:relative;isolation:isolate;overflow:hidden;width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s}
.bf-swatch:hover{transform:scale(1.08)}
.bf-swatch.on{box-shadow:0 0 0 3px #fff,0 0 0 5px #0a0a0a}
.bf-swatch.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.bf-swatch--wheel{background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.bf-swatch--wheel::before{content:"+";position:absolute;inset:11px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#0a0a0a;font:500 18px/1 var(--ui)}
.bf-wheelbox{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,36px);padding:clamp(16px,2.4vw,24px);border-radius:var(--r);background:#f5f5f7;animation:bfIn .45s cubic-bezier(.22,1,.36,1)}
.bf-wheelbox[hidden]{display:none}
.bf-wheel{position:relative;flex:none;width:clamp(170px,22vw,210px);aspect-ratio:1;border-radius:50%;cursor:crosshair;touch-action:none;outline:0;background:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 72%),conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.bf-wheel::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ov,transparent);pointer-events:none}
.bf-wheel:focus-visible{box-shadow:0 0 0 4px rgba(0,118,255,.25)}
.bf-wheel__dot{position:absolute;z-index:1;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.25);pointer-events:none}
.bf-wheel__side{display:grid;gap:12px;flex:1;min-width:200px}
.bf-wheel__now{display:block;width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bf-wheel__hex{font:700 18px var(--mono)}
.bf-light{display:grid;gap:8px;font:500 13px var(--ui);color:var(--muted)}
.bf-light input{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:10px;background:linear-gradient(90deg,#111,#888,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);outline:0}
.bf-light input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0a0a0a,0 4px 10px rgba(0,0,0,.2);cursor:grab}
.bf-light input::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0a0a0a;cursor:grab}
.bf-wheel__side .btn{justify-self:start}
@media (max-width:640px){.bf-moods{grid-template-columns:1fr 1fr;gap:10px}.bf-mood__n{font-size:14px}.bf-wheelbox{flex-direction:column;align-items:center}.bf-wheel{width:min(230px,70vw)}.bf-wheel__side{width:100%;min-width:0;grid-template-columns:auto 1fr;align-items:center}.bf-wheel__now{width:48px;height:48px}.bf-light,.bf-wheel__side .btn{grid-column:1/-1}.bf-wheel__side .btn{justify-self:stretch}}
@media (prefers-reduced-motion:reduce){.bf-pick,.bf-wheelbox,.bf-mood.pop .bf-mood__p{animation:none}}