/* NØDE — feuille de style du site.
Sortie de index.html le 30/07/2026 : le site est découpé en vraies
pages pour que Google puisse les indexer séparément, et ce fichier
est partagé par toutes. Une correction ici vaut pour tout le site. */
/* ---------- Polices auto-hébergées (RGPD : aucun appel aux serveurs Google) ----------
Fichiers "variables" : un seul .woff2 par famille couvre toutes les graisses.
⚠️ Chemins ABSOLUS (/fonts/…) et non relatifs : les six pages HTML préchargent
ces mêmes fichiers via . Si les deux
écritures diffèrent, le navigateur les considère comme deux ressources
distinctes et télécharge chaque police DEUX FOIS. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
src:url("/fonts/space-grotesk-var.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
src:url("/fonts/inter-var.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;background:#EAEAEA;color:#0A0A0A;font-size:16px;line-height:1.6;font-weight:400;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;color:#0A0A0A;letter-spacing:-0.02em;line-height:1.05;font-weight:700}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:#0A0A0A;color:#EAEAEA}
:root{
--bg:#EAEAEA;--bg-white:#FFFFFF;--bg-dark:#0A0A0A;
/* --text-2 sert le texte secondaire sur fond CLAIR (.lede, .eyebrow, les
paragraphes des cartes) : 39 usages. Il valait #888780, soit 3,00:1 sur
--bg — sous le minimum WCAG AA de 4,5:1 pour du texte courant, alors que
c'est le texte le plus lu du site après les titres. Assombri au strict
nécessaire, teinte d'origine conservée : #6B6A63 donne 4,51:1.
⚠️ Ne PAS toucher au #9A9A95 écrit en dur ailleurs dans ce fichier : il
ne s'applique qu'aux sections .section-white, qui sont NOIRES malgré leur
nom (voir l'inversion l.854). Il y donne 7:1 et passe déjà. */
--text:#0A0A0A;--text-2:#6B6A63;
--border:#D3D1C7;
--accent:#FF3B20;
--radius:20px;
--ease:cubic-bezier(0.16, 1, 0.3, 1);
}
.container{max-width:1320px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:840px;margin:0 auto;padding:0 24px}
/* ---------- Navigation (floating card with invisible top mask) ---------- */
/* Mask = bg color at top of page, fades to transparent when scrolling so
content scrolls naturally behind/around the floating nav card. */
.nav-mask{position:fixed;top:0;left:0;right:0;height:108px;background:var(--bg);z-index:99;pointer-events:none;transition:opacity .35s var(--ease)}
body.is-scrolled .nav-mask{opacity:0}
.nav{position:fixed;top:36px;left:24px;right:24px;z-index:100;height:64px;background:#FFFFFF;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px -12px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.04);transition:top .3s var(--ease),box-shadow .3s var(--ease)}
.nav.scrolled{top:24px;box-shadow:0 16px 40px -10px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06)}
.nav-inner{height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1280px;margin:0 auto}
.nav-logo{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--text);display:inline-flex;align-items:center;gap:0}
.nav-logo .dot{width:0.42em;height:0.42em;border-radius:50%;background:var(--accent);margin:0 0.1em;flex:none;box-shadow:0 0 10px rgba(255,59,32,.45)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--text);transition:opacity .2s ease;position:relative;padding:6px 0}
.nav-links a:hover{opacity:.6}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--text)}
.nav-cta{padding:10px 18px;border:1px solid var(--text);border-radius:980px;font-size:13px;font-weight:500;background:transparent;color:var(--text);position:relative;overflow:hidden;transition:color .4s var(--ease)}
.nav-cta::before{content:"";position:absolute;inset:0;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.nav-cta:hover{color:#fff}
.nav-cta:hover::before{transform:scaleX(1)}
/* Bascule de langue : deux drapeaux ronds, l'inactif passe en gris. Le
visiteur voit donc toujours dans quelle langue il peut passer.
Le rond est un choix de charte : il réduit la surface de bleu, une couleur
qui n'existe nulle part ailleurs sur le site.
15px de marge verticale : la zone tactile atteint 44 px de haut, la taille
minimale confortable au doigt, sans agrandir les drapeaux. */
.lang-switch{display:inline-flex;align-items:center;gap:8px;padding:15px 6px;line-height:1;flex:none}
/* preserveAspectRatio="slice" dans le SVG recadre le drapeau comme une photo
dans un cadre rond, au lieu de l'écraser. */
.lang-switch svg{display:block;width:16px;height:16px;border-radius:50%;transition:filter .25s var(--ease),opacity .25s var(--ease)}
/* Gris plutôt que simple transparence : la transparence délave les couleurs
sans que l'on comprenne lequel des deux est actif. */
.lang-switch .ls-off{filter:grayscale(1);opacity:.5}
.lang-switch:hover .ls-off{filter:grayscale(.25);opacity:.9}
.nav-toggle{display:none;width:32px;height:32px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{width:18px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;background:rgba(234,234,234,.98);backdrop-filter:blur(20px);z-index:99;display:none;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;transition:opacity .25s ease}
.mobile-menu.open{display:flex;opacity:1}
.mobile-menu a{font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
/* ---------- SPA ---------- */
/* Clears the floating nav (top:36 + height:64 = 100, +24 breathing) */
#app{padding-top:124px;min-height:100vh}
.page{display:none;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease), transform .35s var(--ease)}
.page.active{display:block;opacity:1;transform:translateY(0)}
/* ---------- HERO with shader card ---------- */
.hero-wrap{padding:0 20px 64px}
.hero{position:relative;width:100%;height:min(80vh, 760px);min-height:520px;background:#0A0A0A;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.06)}
#shader-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero-fallback{position:absolute;inset:0;z-index:0;background:
radial-gradient(60% 50% at 30% 40%, rgba(255,60,30,.35), transparent 60%),
radial-gradient(50% 40% at 70% 60%, rgba(60,140,255,.3), transparent 60%),
linear-gradient(125deg, transparent 30%, rgba(255,80,200,.15) 45%, rgba(80,255,200,.15) 55%, transparent 70%),
#0A0A0A;display:none}
.no-webgl .hero-fallback{display:block}
.no-webgl #shader-canvas{display:none}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
/* Ø as light — SVG with shape-following halo, RGB chroma, 3D fill */
.node-o-test{display:none}
.o-svg{width:100%;height:100%;overflow:visible}
.o-svg .o-layer{transform-origin:50% 50%;transform-box:fill-box}
/* Halo layer: born tiny+bright, expands into wide warm halo */
.o-svg .halo{opacity:0;transform:scale(.05);animation:haloGrow 1.8s cubic-bezier(.4,0,.2,1) .2s forwards, haloPulse 4s ease-in-out 2.8s infinite}
@keyframes haloGrow{
0% {opacity:0; transform:scale(.05)}
20% {opacity:1; transform:scale(.25)}
60% {opacity:1; transform:scale(.85)}
100% {opacity:.95; transform:scale(1)}
}
@keyframes haloPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* Chroma RGB layer: appears with the character */
.o-svg .chroma{opacity:0;animation:chromaIn 1s ease-out 1.4s forwards}
@keyframes chromaIn{to{opacity:1}}
/* Character: materializes from blur+small into sharp full size */
.o-svg .char{opacity:0;transform:scale(.2);filter:blur(40px);animation:charMaterialize 1.4s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
@keyframes charMaterialize{
0% {opacity:0; transform:scale(.15); filter:blur(50px)}
35% {opacity:.7; transform:scale(.6); filter:blur(28px)}
65% {opacity:.95; transform:scale(1.08);filter:blur(6px)}
85% {opacity:1; transform:scale(.98); filter:blur(1.5px)}
100% {opacity:1; transform:scale(1); filter:blur(0)}
}
.node-logo{position:relative;display:inline-flex;align-items:baseline;font-family:"Space Grotesk",sans-serif;font-weight:700;color:#fff;line-height:.85;letter-spacing:-0.04em;opacity:0;transform:translateY(20px);animation:logoIn 1.2s var(--ease) .3s forwards}
.node-logo .n{font-size:clamp(120px,22vw,300px)}
.node-logo .o{font-size:clamp(96px,17.6vw,240px)}
.node-logo .d{font-size:clamp(74px,13.6vw,186px)}
.node-logo .e{font-size:clamp(53px,9.7vw,132px)}
@keyframes logoIn{to{opacity:1;transform:translateY(0)}}
.node-stroke{position:absolute;left:-4%;right:-4%;top:45%;width:108%;height:auto;transform:translateY(-50%) rotate(-7deg);pointer-events:none;z-index:3}
.node-stroke path{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:strokeIn 1.1s var(--ease) 1s forwards;filter:drop-shadow(0 0 12px rgba(255,59,32,.4))}
@keyframes strokeIn{to{stroke-dashoffset:0}}
.hero-tag{position:absolute;bottom:24px;left:24px;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);z-index:4}
@media (max-width:860px){.hero .hero-tag{display:none}}
/* ============================================================
HERO — texte centré, shader flouté en fond, maquette inclinée.
Le shader n'est plus une image qui concurrence le texte : flouté,
il devient une lueur. C'est ce qui rend la superposition lisible.
============================================================ */
.hero{display:flex;flex-direction:column;align-items:center;overflow:hidden}
.hero #shader-canvas{filter:blur(46px) saturate(.72);transform:scale(1.12)}
/* Voile : sans lui, les zones claires du shader mangent le titre. */
.hero-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.40) 38%,rgba(10,10,10,.95) 100%)}
.hero-glow{position:absolute;z-index:2;left:50%;top:34%;width:min(1100px,120vw);height:620px;
transform:translateX(-50%);pointer-events:none;filter:blur(18px);
background:radial-gradient(50% 50% at 50% 50%,
rgba(255,59,32,.22) 0%,rgba(255,59,32,.07) 42%,transparent 72%)}
.hero-pitch{position:relative;z-index:3;max-width:920px;margin:0 auto;padding:0 24px;
display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
animation:heroPitchIn 1s var(--ease) .35s both}
@keyframes heroPitchIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-pitch h1{color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:700;
font-size:clamp(38px,6.2vw,76px);line-height:1.02;letter-spacing:-0.04em;max-width:14em;margin:0;
text-shadow:0 2px 40px rgba(10,10,10,.6)}
.hero-pitch h1 .red{color:var(--accent)}
/* Crème à 88 % plutôt qu'un gris : au-dessus du shader, un gris passe
sous le seuil de lisibilité dès que le fond s'éclaircit. */
.hero-pitch p{margin:26px 0 0;max-width:52ch;color:rgba(234,234,234,.88);
font-size:clamp(15px,1.45vw,18px);line-height:1.6;
text-shadow:0 1px 24px rgba(10,10,10,.75)}
.hero-cta{display:inline-flex;align-items:center;gap:9px;margin-top:34px;padding:14px 28px;
border-radius:980px;background:var(--cream);color:#0A0A0A;border:1px solid var(--cream);
font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;
transition:background .35s var(--ease),transform .35s var(--ease)}
.hero-cta:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
/* Lien secondaire volontairement discret : un seul bouton porte l'action. */
.hero-lien{margin-top:16px;font-size:14px;color:rgba(234,234,234,.62);
text-decoration:underline;text-underline-offset:4px;transition:color .3s var(--ease)}
.hero-lien:hover{color:var(--cream)}
/* La scène inclinée : perspective sur le parent, rotateX sur l'enfant.
Le masque en dégradé dissout le bas de la maquette dans la page —
c'est lui qui fait tout l'effet. */
.hero-scene{position:relative;z-index:3;width:100%;max-width:1080px;margin:56px auto 0;
padding:0 24px;perspective:1600px;perspective-origin:50% 0;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 92%);
mask-image:linear-gradient(to bottom,#000 0%,#000 46%,transparent 92%)}
/* L'inclinaison est pilotée par le défilement via la variable --rx :
34° en haut de page, 0° une fois descendu. Le JS ne fait que mettre
à jour ce nombre ; si le JS ne tourne pas, la valeur par défaut tient. */
.hero-frame{--rx:34deg;transform:rotateX(var(--rx)) scale(.96);transform-origin:50% 0;
border:1px solid rgba(0,0,0,.14);border-radius:14px;overflow:hidden;background:var(--cream);
box-shadow:0 60px 130px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);
transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){
.hero-frame{--rx:0deg!important;transition:none}
}
/* ---- contenu de la maquette : un site vitrine, pas un tableau de bord ---- */
.hf-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#DEDEDA;
border-bottom:1px solid rgba(0,0,0,.10)}
.hf-bar i{width:9px;height:9px;border-radius:50%;display:block;background:#C9C9C3}
.hf-bar i:first-child{background:#FF5F57}.hf-bar i:nth-child(2){background:#FEBC2E}
.hf-bar i:nth-child(3){background:#28C840}
.hf-url{margin-left:12px;font-family:"Space Grotesk",sans-serif;font-size:11px;color:#6E6E68}
.hf-nav{display:flex;align-items:center;justify-content:space-between;background:#FBFBF9;
padding:15px 26px;border-bottom:1px solid rgba(0,0,0,.07)}
.hf-logo{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:700;
letter-spacing:-0.01em;color:#14140F}
.hf-links{display:flex;gap:20px}
.hf-links i{display:block;width:38px;height:7px;border-radius:4px;background:rgba(0,0,0,.14)}
.hf-links i:nth-child(2){width:30px}.hf-links i:nth-child(3){width:44px}.hf-links i:nth-child(4){width:26px}
.hf-cta{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;
padding:7px 15px;border-radius:100px;background:#14140F;color:#FBFBF9}
/* La « photo » est un dégradé : aucune image à charger. */
.hf-hero{position:relative;height:196px;overflow:hidden;
background:
radial-gradient(120% 90% at 78% 18%,rgba(255,196,120,.85) 0%,transparent 58%),
radial-gradient(110% 100% at 12% 88%,rgba(150,58,30,.92) 0%,transparent 62%),
linear-gradient(150deg,#8A3A1E 0%,#B4552A 42%,#6E2C18 100%)}
.hf-hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(10,8,6,.68) 0%,rgba(10,8,6,.20) 62%,transparent 100%)}
.hf-hero-txt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
align-items:flex-start;justify-content:center;gap:11px;padding:0 30px;color:#fff;text-align:left}
.hf-kicker{font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;opacity:.86}
.hf-hero-txt strong{font-family:"Space Grotesk",sans-serif;font-size:27px;font-weight:700;
line-height:1.1;letter-spacing:-0.025em}
.hf-btn{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;
padding:8px 17px;border-radius:100px;background:#FBFBF9;color:#14140F}
.hf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;
padding:22px 26px 26px;background:#FBFBF9}
.hf-card{display:flex;flex-direction:column;gap:8px}
.hf-thumb{height:76px;border-radius:9px}
.hf-thumb.a{background:linear-gradient(145deg,#D8C6A8,#B49A72)}
.hf-thumb.b{background:linear-gradient(145deg,#C7D4C0,#93A88B)}
.hf-thumb.c{background:linear-gradient(145deg,#E0C3BC,#B98376)}
.hf-card b{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;color:#14140F}
.hf-card i{display:block;height:6px;border-radius:3px;background:rgba(0,0,0,.11)}
.hf-card i + i{width:64%;margin-top:5px}
@media (max-width:760px){
.hero-frame{transform:rotateX(22deg) scale(.98)}
.hf-links,.hf-cards{display:none}
}
/* ---------- Page légale ---------- */
.legal-content{padding-top:8px;padding-bottom:104px}
.legal-content h2{font-size:clamp(26px,3vw,38px);margin:56px 0 18px;letter-spacing:-0.02em}
.legal-content h3{font-size:17px;margin:30px 0 8px}
.legal-content p,.legal-content li{font-size:15px;color:#55544E;line-height:1.75}
.legal-content ul{padding-left:20px;margin:8px 0 16px}
.legal-content .todo{display:inline-block;border:1px dashed var(--accent);border-radius:8px;padding:0 8px;color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap}
/* Notice RGPD sous les formulaires */
.form-consent{font-size:12.5px;color:#9A9A95;line-height:1.6;margin-top:14px}
.form-consent a{text-decoration:underline;cursor:pointer}
/* ---------- Sections ---------- */
section{padding:120px 0;position:relative}
.section-white{background:var(--bg-white)}
.section-light{background:var(--bg)}
.eyebrow{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.h-display{font-size:clamp(48px,7vw,96px);font-weight:700;letter-spacing:-0.04em;line-height:.95}
.h-section{font-size:clamp(36px,5vw,68px);font-weight:700;letter-spacing:-0.03em;line-height:1}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--text-2);line-height:1.55;max-width:560px}
.section-header{margin-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.section-header .eyebrow{grid-column:1/-1;margin-bottom:16px}
.section-header h2{margin:0}
.section-header .lede{margin:0}
@media (max-width:900px){.section-header{grid-template-columns:1fr}}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:500;line-height:1;padding:16px 28px;border-radius:980px;transition:color .4s var(--ease),border-color .3s var(--ease);white-space:nowrap;position:relative;overflow:hidden;border:1px solid var(--text);background:transparent;color:var(--text)}
.btn::before{content:"";position:absolute;inset:0;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:#fff}
.btn:hover::before{transform:scaleX(1)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-dark{background:var(--text);color:#fff;border-color:var(--text)}
.btn-dark::before{background:var(--bg-white)}
.btn-dark:hover{color:var(--text)}
.btn-block{width:100%}
/* ---------- Intro section (after hero) ---------- */
.intro{padding:140px 0 120px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.intro-grid h1{font-size:clamp(40px,5.5vw,76px);font-weight:700;letter-spacing:-0.03em;line-height:1}
.intro-grid h1 .red{color:var(--accent)}
.intro-meta{display:flex;flex-direction:column;gap:28px}
.intro-meta p{font-size:18px;color:var(--text-2);line-height:1.55}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr;gap:40px}}
/* ---------- 3D Scene — floating browser mockups ---------- */
.scene-3d{margin-top:96px;display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:center}
@media (max-width:900px){.scene-3d{grid-template-columns:1fr;gap:48px}}
.scene-3d-inner{position:relative;perspective:1800px;perspective-origin:50% 40%;height:clamp(380px,42vw,520px)}
.scene-floor{position:absolute;left:5%;right:5%;bottom:-20px;height:60px;
background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0%,transparent 70%);
filter:blur(10px)}
.browser-mock{position:absolute;border-radius:14px;overflow:hidden;background:#fff;
box-shadow:
0 30px 60px -20px rgba(0,0,0,.25),
0 10px 30px -10px rgba(0,0,0,.15),
0 0 0 1px rgba(0,0,0,.04);
transform-style:preserve-3d;
will-change:transform;
animation:floatBack 9s ease-in-out infinite alternate}
.browser-mock[data-layer="back"]{
top:0;left:0;width:62%;height:78%;
transform:rotateY(22deg) rotateX(-6deg) translateZ(-60px);
opacity:.85;
filter:saturate(.9)}
.browser-mock[data-layer="front"]{
bottom:0;right:0;width:78%;height:92%;
transform:rotateY(-14deg) rotateX(-3deg) translateZ(40px);
animation:floatFront 8s ease-in-out infinite alternate}
@keyframes floatBack{
0% {transform:rotateY(22deg) rotateX(-6deg) translateZ(-60px) translateY(0)}
100% {transform:rotateY(20deg) rotateX(-7deg) translateZ(-60px) translateY(-8px)}
}
@keyframes floatFront{
0% {transform:rotateY(-14deg) rotateX(-3deg) translateZ(40px) translateY(0)}
100% {transform:rotateY(-12deg) rotateX(-4deg) translateZ(40px) translateY(-6px)}
}
/* Browser toolbar */
.bm-bar{height:30px;background:linear-gradient(180deg,#f6f6f6,#ececec);
border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:5px;padding:0 12px}
.bm-bar i{width:9px;height:9px;border-radius:50%;background:#d8d8d8;display:block}
.bm-bar i:nth-child(1){background:#ff5f57}
.bm-bar i:nth-child(2){background:#febc2e}
.bm-bar i:nth-child(3){background:#28c840}
.bm-bar .bm-url{margin-left:14px;font-family:"Space Grotesk",sans-serif;font-size:10px;color:#888780;background:#fff;padding:2px 10px;border-radius:6px;letter-spacing:.02em}
.bm-bar .bm-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(255,59,32,.6)}
/* Browser body */
.bm-body{padding:24px;display:flex;flex-direction:column;gap:10px;background:#fff;height:calc(100% - 30px)}
.bm-block{background:#0A0A0A;border-radius:3px}
.bm-block.h-2{height:6px}
.bm-block.h-3{height:10px}
.bm-block.h-5{height:18px;background:#0A0A0A}
.bm-block.w-30{width:30%}
.bm-block.w-50{width:50%}
.bm-block.w-60{width:60%}
.bm-block.w-70{width:70%}
.bm-block.w-85{width:85%}
.bm-block.w-90{width:90%}
.bm-tag{font-family:"Space Grotesk",sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#888780;margin-bottom:4px}
.bm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.bm-card{aspect-ratio:1.2/1;background:linear-gradient(135deg,#f4f4f4,#eaeaea);border-radius:6px;border:1px solid #e6e6e6}
.bm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid #eee}
.bm-cell{display:flex;flex-direction:column;gap:2px}
.bm-cell strong{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;color:#0A0A0A;letter-spacing:-0.02em;line-height:1}
.bm-cell strong span{color:#888780;font-weight:500}
.bm-cell > span{font-family:"Space Grotesk",sans-serif;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#888780}
.bm-cta{height:28px;width:140px;border:1px solid #0A0A0A;border-radius:980px;margin-top:8px}
.bm-cta.solid{background:#0A0A0A;color:#fff;font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 16px;letter-spacing:.04em}
.bm-glow{position:absolute;inset:-30%;z-index:-1;pointer-events:none;
background:
radial-gradient(40% 30% at 20% 0%, rgba(255,80,30,.18), transparent 70%),
radial-gradient(40% 30% at 100% 100%, rgba(80,140,255,.15), transparent 70%);
filter:blur(20px)}
/* Caption next to scene */
.scene-caption{display:flex;flex-direction:column;gap:16px}
.scene-caption .eyebrow{display:block}
.scene-caption p{font-size:16px;color:var(--text-2);line-height:1.6;max-width:380px}
/* ---------- Offers / Products cards ---------- */
.offers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.offer-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:40px;display:flex;flex-direction:column;gap:20px;min-height:320px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.offer-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.12)}
.offer-card .num{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--text-2)}
.offer-card h3{font-size:clamp(28px,2.8vw,40px);font-weight:700;letter-spacing:-0.025em;line-height:1}
.offer-card p{color:var(--text-2);font-size:15px;line-height:1.6;flex:1}
.offer-card .features{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text)}
.offer-card .features li{display:flex;gap:8px;align-items:baseline}
.offer-card .features li::before{content:"—";color:var(--text-2)}
@media (max-width:768px){.offers-grid{grid-template-columns:1fr}}
/* ---------- Accueil : prix sous les portes d'entrée ---------- */
.offer-price{margin-top:auto;padding-top:18px;font-family:"Space Grotesk",sans-serif;font-size:15px;color:var(--text-2)}
.offer-price strong{font-size:24px;font-weight:700;color:var(--accent);letter-spacing:-0.02em}
.offer-price span{display:block;font-size:13px;opacity:.75;margin-top:2px}
.offer-card .btn{margin-top:16px;align-self:flex-start}
/* ---------- Pictogrammes des cartes ----------
Dessinés à la main en SVG : rien à télécharger, et ils prennent
automatiquement la couleur du texte autour. */
.card-ico{width:26px;height:26px;color:var(--accent);margin-bottom:14px;flex:none;
opacity:.9;transition:transform .4s var(--ease)}
.offer-card:hover .card-ico{transform:translateY(-2px) scale(1.06)}
/* ---------- Casser la symétrie ----------
Quatre sections sur cinq avaient le même squelette : en-tête centré
puis grille. On alterne désormais les formes pour que l'œil ne
rencontre pas quatre fois de suite la même composition. */
/* En-tête sur deux colonnes : titre à gauche, phrase à droite. */
.section-header.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:24px 48px;
align-items:end;text-align:left;max-width:none}
.section-header.duo .eyebrow{grid-column:1/-1}
.section-header.duo .h-section{margin:0}
.section-header.duo .lede{margin:0;max-width:46ch;padding-bottom:6px}
@media (max-width:900px){
.section-header.duo{grid-template-columns:1fr;align-items:start;gap:18px}
}
/* Cartes décalées verticalement : la régularité parfaite d'une grille
est ce qui trahit le plus une page générée.
On décale avec une MARGE, pas avec transform : les révélations au
défilement pilotent déjà transform, et leur règle passe après
celle-ci dans la feuille — elle écraserait le décalage. */
@media (min-width:901px){
.offers-grid.decale{grid-template-columns:repeat(3,1fr)}
.offers-grid.decale > *:nth-child(2){margin-top:38px}
.offers-grid.decale > *:nth-child(3){margin-top:14px}
}
/* ---------- Accueil : les 4 étapes du déroulé ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:32px;
display:flex;flex-direction:column;gap:8px}
.step-card .num{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.step-card h3{font-size:20px;letter-spacing:-0.02em;line-height:1.15}
.step-card .meta{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.04em;
text-transform:uppercase;color:var(--text-2);opacity:.8}
.step-card > p:last-child{font-size:15px;color:var(--text-2);line-height:1.55}
@media (max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps-grid{grid-template-columns:1fr}.step-card{padding:26px}}
/* Variante chronologie : les étapes se lisent de haut en bas, reliées par
un trait. Quatre colonnes égales suggéraient des options au choix ;
ici l'ordre compte, et la forme le dit. Calée à gauche pour prolonger
l'en-tête sur deux colonnes. */
.steps-grid.chrono{grid-template-columns:1fr;gap:0;max-width:780px;position:relative}
.steps-grid.chrono::before{content:"";position:absolute;left:23px;top:20px;bottom:26px;
width:1px;background:var(--border)}
.steps-grid.chrono .step-card{background:none;border:0;border-radius:0;
padding:0 0 38px 70px;position:relative;gap:6px}
.steps-grid.chrono .step-card:last-child{padding-bottom:0}
.steps-grid.chrono .step-card .num{position:absolute;left:0;top:-4px;
width:47px;height:47px;border-radius:50%;border:1px solid var(--border);
background:var(--bg);display:flex;align-items:center;justify-content:center;
font-size:13px;letter-spacing:0;transition:border-color .4s var(--ease),color .4s var(--ease)}
.steps-grid.chrono .step-card:hover .num{border-color:var(--accent)}
@media (max-width:600px){
.steps-grid.chrono .step-card{padding:0 0 32px 54px}
.steps-grid.chrono .step-card .num{width:38px;height:38px;font-size:12px}
.steps-grid.chrono::before{left:18.5px}
}
/* ---------- Accueil : questions fréquentes ----------
natif : l'ouverture/fermeture fonctionne sans JavaScript. */
.faq{display:flex;flex-direction:column;gap:0;max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
font-family:"Space Grotesk",sans-serif;font-size:clamp(17px,1.6vw,20px);font-weight:500;
letter-spacing:-0.01em;transition:color .25s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);opacity:.55}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);opacity:1}
.faq-item[open] summary{color:var(--accent)}
.faq-item > p{padding:0 44px 26px 0;margin:0;color:var(--text-2);font-size:16px;line-height:1.65;max-width:70ch}
/* ---------- Accueil : bloc d'appel à l'action final ---------- */
.home-cta{margin-top:72px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.home-cta h3{font-size:clamp(24px,3vw,36px);letter-spacing:-0.03em;line-height:1.1;max-width:16em}
.home-cta > p{color:var(--text-2);max-width:46ch;margin:0}
.home-cta-alt{font-size:14px;opacity:.85;margin-top:8px!important}
.home-cta-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* ---------- Studio : les deux associés ---------- */
.studio-people{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:28px;
padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.studio-people .person{display:flex;flex-direction:column;gap:2px}
.studio-people strong{font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.studio-people span{font-size:13px;opacity:.62;letter-spacing:.01em}
/* ---------- Products page list ---------- */
.product-row{display:grid;grid-template-columns:80px 1fr 1fr 120px;gap:40px;align-items:center;padding:32px 0;border-bottom:1px solid var(--border);transition:padding .3s var(--ease)}
.product-row:first-child{border-top:1px solid var(--border)}
.product-row:hover{padding-left:8px}
.product-row .num{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:500;color:var(--text-2);letter-spacing:.04em}
.product-row h3{font-size:clamp(24px,2.5vw,36px);font-weight:700;letter-spacing:-0.02em;line-height:1}
.product-row p{color:var(--text-2);font-size:14px;line-height:1.55}
.product-row .arrow{justify-self:end;width:48px;height:48px;border:1px solid var(--text);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .4s var(--ease),color .4s var(--ease)}
.product-row:hover .arrow{background:var(--text);color:#fff}
.product-row .arrow svg{transition:transform .3s var(--ease)}
.product-row:hover .arrow svg{transform:translateX(3px)}
@media (max-width:768px){.product-row{grid-template-columns:40px 1fr 48px;gap:16px}.product-row p{display:none}}
/* ---------- Product feature blocks ---------- */
.product-feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:80px 0;border-bottom:1px solid var(--border)}
.product-feature:last-child{border-bottom:none}
.product-feature.reverse{direction:rtl}
.product-feature.reverse > *{direction:ltr}
.pf-text{display:flex;flex-direction:column;gap:20px}
.pf-num{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.pf-text h2{font-size:clamp(36px,4.5vw,64px);font-weight:700;letter-spacing:-0.03em;line-height:.95;margin:0}
.pf-desc{font-size:16px;color:var(--text-2);line-height:1.6;max-width:480px}
.pf-features{list-style:none;display:flex;flex-direction:column;gap:6px;margin:8px 0}
.pf-features li{font-size:14px;color:var(--text);display:flex;gap:10px;line-height:1.5}
.pf-features li::before{content:"—";color:var(--text-2);flex-shrink:0}
.pf-meta{display:flex;align-items:baseline;gap:12px;font-family:"Space Grotesk",sans-serif;font-size:13px;color:var(--text-2);letter-spacing:.02em;margin-top:8px}
.pf-meta strong{font-weight:700;color:var(--text);font-size:15px}
/* Tier cards inside each product feature */
.pf-tiers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;padding-top:32px;border-top:1px solid var(--border)}
@media (max-width:768px){.pf-tiers{grid-template-columns:1fr}}
.pf-tier{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;gap:14px;transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);cursor:pointer;text-align:left}
.pf-tier:hover{transform:translateY(-6px);border-color:var(--text)}
.pf-tier.featured{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.pf-tier-label{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.pf-tier.featured .pf-tier-label{color:#F5F5F5}
.pf-tier-desc{font-size:13.5px;color:var(--text-2);line-height:1.55;margin:0}
.pf-tier-price{font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:700;letter-spacing:-0.04em;line-height:1;color:var(--text)}
.pf-tier.featured .pf-tier-price{color:#fff}
.pf-tier-price .from{font-size:11px;font-weight:500;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:6px}
.pf-tier-note{font-size:12px;color:var(--text-2);margin:0}
.pf-tier-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:12px 18px;border-radius:980px;border:1px solid var(--text);color:var(--text);font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pf-tier:hover .pf-tier-cta{background:var(--text);color:#fff}
.pf-tier-sep{border:none;border-top:1px solid var(--border);margin:6px 0 0}
.pf-tier-list{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--text);line-height:1.5;flex:1}
.pf-tier-list li{display:flex;gap:10px;align-items:baseline}
.pf-tier-list li::before{content:"✓";color:var(--accent);font-weight:700;flex-shrink:0;font-size:12px}
.pf-tier.featured .pf-tier-list{color:#F5F5F5}
.pf-badge{position:absolute;top:-13px;right:22px;background:var(--accent);color:#fff;font-family:"Space Grotesk",sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:980px;box-shadow:0 6px 18px -4px rgba(255,59,32,.55)}
/* price tables (Produits page — on the inverted dark section) */
.price-block{max-width:820px;margin:0 auto 48px}
.price-block .pf-num{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.price-table{width:100%;border-collapse:collapse}
.price-table th{text-align:left;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding:12px 0;border-bottom:1px solid var(--border)}
.price-table th:last-child{text-align:right}
.price-table td{padding:16px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--text)}
.price-table td:first-child{font-weight:500}
.price-table td:last-child{text-align:right;font-family:"Space Grotesk",sans-serif;color:var(--text-2);white-space:nowrap}
.price-table tr:last-child td{border-bottom:none}
/* Le tableau vit dans une carte arrondie, cohérente avec les formules */
.price-card{border:1px solid var(--border);border-radius:var(--radius);padding:10px 28px;background:transparent}
/* dark-section overrides */
.section-white .price-card{border-color:#2A2A2A;background:rgba(255,255,255,.025)}
.section-white .price-table th{color:#9A9A95;border-bottom-color:#2A2A2A}
.section-white .price-table td{color:#F5F5F5;border-bottom-color:#2A2A2A;transition:color .25s ease}
.section-white .price-table td:last-child{color:#9A9A95;font-weight:600}
.section-white .price-table tr:hover td{color:#fff}
.section-white .price-table tr:hover td:last-child{color:var(--accent)}
/* Invert overrides for product tiers on dark section */
.section-white .pf-tiers{border-top-color:#2A2A2A}
.section-white .pf-tier{background:rgba(255,255,255,.025);border-color:#2A2A2A;color:#F5F5F5}
.section-white .pf-tier:hover{border-color:rgba(255,255,255,.5);box-shadow:0 28px 56px -28px rgba(0,0,0,.65)}
.section-white .pf-tier-label,.section-white .pf-tier-price .from,.section-white .pf-tier-desc,.section-white .pf-tier-note{color:#9A9A95}
.section-white .pf-tier-price{color:#F5F5F5}
.section-white .pf-tier-list{color:#F5F5F5}
.section-white .pf-tier-sep{border-top-color:#2A2A2A}
.section-white .pf-tier-cta{border-color:rgba(255,255,255,.4);color:#F5F5F5}
.section-white .pf-tier:hover .pf-tier-cta{background:#F5F5F5;color:#0A0A0A;border-color:#F5F5F5}
/* Formule mise en avant : carte claire sur fond sombre + halo rouge */
.section-white .pf-tier.featured{background:#F5F5F5;border-color:#F5F5F5;color:#0A0A0A;
box-shadow:0 0 0 1px rgba(255,59,32,.25),0 20px 70px -20px rgba(255,59,32,.28)}
.section-white .pf-tier.featured:hover{box-shadow:0 0 0 1px rgba(255,59,32,.4),0 30px 80px -24px rgba(255,59,32,.38)}
.section-white .pf-tier.featured .pf-tier-label,
.section-white .pf-tier.featured .pf-tier-price,
.section-white .pf-tier.featured .pf-tier-list{color:#0A0A0A}
.section-white .pf-tier.featured .pf-tier-desc,
.section-white .pf-tier.featured .pf-tier-note,
.section-white .pf-tier.featured .pf-tier-price .from{color:#6a6a65}
.section-white .pf-tier.featured .pf-tier-sep{border-top-color:#D3D1C7}
.section-white .pf-tier.featured .pf-tier-cta{background:#0A0A0A;border-color:#0A0A0A;color:#fff}
.section-white .pf-tier.featured:hover .pf-tier-cta{background:var(--accent);border-color:var(--accent)}
/* Ligne de réassurance sous le titre de la page tarifs */
.price-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:-20px auto 64px;font-family:"Space Grotesk",sans-serif;font-size:12.5px;letter-spacing:.04em;color:#9A9A95}
.price-trust span{display:inline-flex;align-items:center;gap:8px}
.price-trust span::before{content:"✓";color:var(--accent);font-weight:700;font-size:11px}
/* Product feature with tiers becomes a 2-column then full-width tiers row */
.product-feature{grid-template-columns:1fr 1fr;grid-template-areas:"text mock" "tiers tiers"}
.product-feature .pf-text{grid-area:text}
.product-feature .pf-mock{grid-area:mock}
.product-feature .pf-tiers{grid-area:tiers}
@media (max-width:900px){.product-feature{grid-template-areas:"text" "mock" "tiers"}}
.pf-text .btn{align-self:flex-start;margin-top:12px}
/* Mockup card shared */
.pf-mock{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;box-shadow:0 20px 50px -20px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);will-change:transform;transition:transform .6s var(--ease)}
.product-feature:hover .pf-mock{transform:translateY(-4px)}
.pf-mock .bm-body{padding:24px;flex:1;background:#fff}
/* 01 Vitrine mock */
.pf-mock-vitrine{display:flex;flex-direction:column;gap:10px}
/* 02 Shop mock */
.pf-mock-shop{display:flex;flex-direction:column;gap:14px}
.pf-shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pf-shop-item{background:#f6f6f6;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:4px;border:1px solid #eee}
.pf-shop-img{height:60px;background:linear-gradient(135deg,#1c1c1c,#3a3a3a);border-radius:6px;margin-bottom:6px}
.pf-shop-img.alt{background:linear-gradient(135deg,#888780,#c9c7be)}
.pf-shop-name{font-family:"Space Grotesk",sans-serif;font-size:10px;color:#0A0A0A;font-weight:500}
.pf-shop-price{font-family:"Space Grotesk",sans-serif;font-size:11px;color:#0A0A0A;font-weight:700;letter-spacing:-.02em}
/* 03 Blog mock */
.pf-mock-blog{display:flex;flex-direction:column;gap:0}
.pf-blog-item{padding:14px 0;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:4px}
.pf-blog-item:last-child{border-bottom:none}
.pf-blog-date{font-family:"Space Grotesk",sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#888780}
.pf-blog-title{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:700;color:#0A0A0A;letter-spacing:-.01em;line-height:1.2}
/* 04 App mock */
.pf-mock-app{display:flex;flex-direction:column;gap:14px}
.pf-app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-app-stat{background:#f6f6f6;border:1px solid #eee;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.pf-app-stat strong{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;color:#0A0A0A;letter-spacing:-.02em;line-height:1}
.pf-app-stat span{font-family:"Space Grotesk",sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#888780}
.pf-app-chart{flex:1;min-height:80px;background:
linear-gradient(180deg, rgba(10,10,10,.08), transparent),
repeating-linear-gradient(90deg, transparent 0 18%, rgba(10,10,10,.06) 18% 18.5%);
border-radius:6px;position:relative;overflow:hidden}
.pf-app-chart::after{content:"";position:absolute;left:0;right:0;bottom:30%;height:1px;background:#0A0A0A;
clip-path:polygon(0 60%, 15% 30%, 28% 70%, 45% 20%, 60% 55%, 75% 10%, 90% 45%, 100% 25%);
box-shadow:0 0 0 1px #0A0A0A}
/* 05 Portfolio mock */
.pf-mock-portfolio{padding:14px}
.pf-port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:100%}
.pf-port-tile{background:linear-gradient(135deg,#1c1c1c,#3a3a3a);border-radius:4px;aspect-ratio:1/1}
.pf-port-tile.alt{background:linear-gradient(135deg,#c9c7be,#888780)}
/* Invert overrides for products page on dark section */
.section-white .pf-text h2{color:#F5F5F5}
.section-white .pf-desc{color:#9A9A95}
.section-white .pf-features li{color:#F5F5F5}
.section-white .pf-features li::before{color:#9A9A95}
.section-white .pf-num{color:#9A9A95}
.section-white .pf-meta{color:#9A9A95}
.section-white .pf-meta strong{color:#F5F5F5}
.section-white .product-feature{border-color:#2A2A2A}
/* Mock stays light (it's a real-site preview) */
@media (max-width:900px){
.product-feature{grid-template-columns:1fr;gap:40px;padding:48px 0}
.product-feature.reverse{direction:ltr}
}
/* ---------- Quote QCM — split layout ---------- */
.quote-split{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){.quote-split{grid-template-columns:1fr;gap:32px}}
.quote-left{display:flex;flex-direction:column;gap:0}
.quote-right{position:sticky;top:96px}
@media (max-width:900px){.quote-right{position:relative;top:0}}
/* Progress pill (left top) */
.quote-progress-pill{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.qp-step{color:#F5F5F5;font-weight:600}
.qp-count{color:#9A9A95}
/* Live summary card (right) */
.quote-card{background:#141414;border:1px solid #2A2A2A;border-radius:18px;padding:32px;color:#F5F5F5;display:flex;flex-direction:column;gap:20px}
.qc-head{display:flex;justify-content:space-between;align-items:center}
.qc-label{font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9A9A95;font-weight:600}
.qc-progress{font-family:"Space Grotesk",sans-serif;font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.04em}
.qc-price{display:flex;flex-direction:column;gap:4px;padding:8px 0}
.qc-from{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A95}
.qc-amount{font-family:"Space Grotesk",sans-serif;font-size:clamp(36px,4.5vw,56px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:#F5F5F5;display:flex;align-items:baseline;gap:4px;transition:color .3s ease,transform .3s ease}
.qc-amount.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.04);color:var(--accent)}100%{transform:scale(1);color:#F5F5F5}}
.qc-amount .red{color:var(--accent)}
.qc-note{font-family:"Space Grotesk",sans-serif;font-size:11px;color:#9A9A95;letter-spacing:.02em}
/* Abonnement mensuel : affiché à part du total, car on n'additionne pas un
prix ponctuel et un prix récurrent. Masqué tant qu'aucune formule n'est choisie. */
.qc-monthly{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);
font-family:"Space Grotesk",sans-serif;font-size:13px;color:#9A9A95;letter-spacing:.01em}
.qc-monthly[hidden]{display:none}
.qc-monthly strong{color:#F5F5F5;font-size:17px;font-weight:700}
.qc-divider{height:1px;background:#2A2A2A}
.qc-summary{display:flex;flex-direction:column;gap:10px;min-height:80px}
.qc-empty{font-size:13px;color:#6a6a65;line-height:1.5}
.qc-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;animation:rowIn .35s var(--ease)}
@keyframes rowIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.qc-row .k{font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A95;flex-shrink:0}
.qc-row .v{color:#F5F5F5;font-weight:500;text-align:right}
.qc-row.multi .v{font-size:12px;line-height:1.5}
.qc-row .p{font-family:"Space Grotesk",sans-serif;color:var(--accent);font-size:11px;font-weight:600;margin-left:4px}
.qc-meta{display:flex;flex-direction:column;gap:8px}
.qc-meta-row{display:flex;justify-content:space-between;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.06em}
.qc-meta-row span:first-child{color:#9A9A95;text-transform:uppercase}
.qc-meta-row span:last-child{color:#F5F5F5;font-weight:500}
/* Multi-select choices */
.quote-choices.multi{grid-template-columns:repeat(2,1fr)}
.quote-choice.selected::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);position:absolute;top:14px;right:14px;box-shadow:0 0 0 3px rgba(255,59,32,.2)}
.quote-choice{position:relative}
.quote-choices{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.quote-choices,.quote-choices.multi{grid-template-columns:1fr}}
.quote-shell{max-width:760px;margin:0 auto}
.quote-progress{display:flex;justify-content:space-between;margin-bottom:48px;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.quote-bar{height:1px;background:var(--border);position:relative;margin-bottom:64px}
.quote-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--text);width:0;transition:width .5s var(--ease)}
.quote-step{display:none}
.quote-step.active{display:block;animation:stepIn .4s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.quote-step h3{font-size:clamp(28px,3.5vw,44px);font-weight:700;letter-spacing:-0.025em;margin-bottom:12px}
.quote-step .sub{color:var(--text-2);margin-bottom:40px;font-size:15px}
.quote-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:48px}
.quote-choice{padding:24px;background:var(--bg-white);border:1px solid var(--border);border-radius:12px;text-align:left;font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:500;color:var(--text);cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease);display:flex;flex-direction:column;gap:6px}
.quote-choice:hover{border-color:var(--text)}
.quote-choice.selected{background:var(--text);color:#fff;border-color:var(--text)}
.quote-choice .sub{font-family:"Inter",sans-serif;font-size:13px;color:var(--text-2);font-weight:400;margin:0}
.quote-choice.selected .sub{color:rgba(255,255,255,.6)}
@media (max-width:600px){.quote-choices{grid-template-columns:1fr}}
.quote-nav{display:flex;justify-content:space-between;gap:12px}
.quote-result{display:none;text-align:center;padding:40px 0}
.quote-result.active{display:block;animation:stepIn .4s var(--ease)}
.quote-result h3{font-size:clamp(32px,4vw,56px);font-weight:700;letter-spacing:-0.03em;margin-bottom:20px}
.quote-result .price{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,8vw,96px);font-weight:700;letter-spacing:-0.04em;line-height:1;margin:32px 0;color:var(--text)}
.quote-result .price .red{color:var(--accent)}
.quote-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:32px 0;border-top:1px solid var(--border);text-align:left}
.quote-summary .row{padding:16px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;font-size:14px}
.quote-summary .row span:first-child{color:var(--text-2);font-family:"Space Grotesk",sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.quote-summary .row span:last-child{font-weight:500;text-align:right}
@media (max-width:600px){.quote-summary{grid-template-columns:1fr}}
/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.form{display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:"Space Grotesk",sans-serif;font-size:11px;color:var(--text-2);font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.field input,.field textarea,.field select{background:transparent;border:none;border-bottom:1px solid var(--border);padding:8px 0;font-size:17px;color:var(--text);transition:border-color .2s ease;width:100%;font-family:inherit}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--text)}
.field textarea{resize:vertical;min-height:100px;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-status{display:none;padding:12px 16px;border-radius:8px;font-size:13px;text-align:center;font-family:"Space Grotesk",sans-serif;letter-spacing:.04em}
.form-status.success{display:block;background:var(--text);color:#fff}
.form-status.error{display:block;background:var(--accent);color:#fff}
.contact-info{display:flex;flex-direction:column;gap:32px;padding:40px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius)}
.contact-info h4{font-family:"Space Grotesk",sans-serif;font-size:11px;color:var(--text-2);font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.contact-info .block p{font-size:16px;color:var(--text);line-height:1.5}
.contact-info .block a{border-bottom:1px solid var(--text)}
/* ---------- Footer ---------- */
footer{background:var(--bg-dark);color:#fff;padding:0;margin:64px 20px 20px;border-radius:var(--radius);overflow:hidden}
.footer-big{padding:80px 48px 40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-big .footer-wordmark{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(64px,14vw,200px);font-weight:700;letter-spacing:-0.05em;line-height:.85;color:#fff;text-transform:uppercase}
.footer-big .footer-wordmark .red{color:var(--accent)}
.footer-inner{padding:24px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:"Space Grotesk",sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.footer-nav{display:flex;gap:24px;list-style:none}
.footer-nav a{transition:color .2s ease}
.footer-nav a:hover{color:#fff}
@media (max-width:600px){.footer-big{padding:48px 24px 32px}.footer-inner{padding:20px 24px}}
/* ---------- Page hero (sub-pages) ---------- */
.page-hero{padding:48px 0 32px;text-align:center}
.page-hero + .section-light, .page-hero + .section-white{padding-top:48px}
.page-hero .eyebrow{margin-bottom:24px;display:block}
.page-hero h1{margin-bottom:24px;font-size:clamp(44px,6vw,92px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.page-hero .lede{margin-left:auto;margin-right:auto}
/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
/* ---------- Subtle prism divider ---------- */
.prism-line{height:1px;border:none;background:linear-gradient(90deg,transparent,rgba(255,59,32,.15),rgba(80,140,255,.15),rgba(140,80,255,.15),transparent);max-width:1280px;margin:0 auto}
/* ---------- 3D ORB — small glowing sphere (echo of the hero Ø) ---------- */
.orb{position:relative;display:inline-block;width:14px;height:14px;border-radius:50%;
background:
radial-gradient(circle at 35% 30%, #ffffff 0%, #fff3e0 18%, #ffb872 45%, #c2541a 80%, #5a1a04 100%);
box-shadow:
0 0 12px rgba(255,140,60,.55),
0 0 24px rgba(255,80,30,.25),
inset -2px -3px 5px rgba(60,15,0,.6),
inset 1px 2px 3px rgba(255,255,255,.5);
vertical-align:middle;flex-shrink:0}
.orb.sm{width:10px;height:10px}
.orb.lg{width:20px;height:20px}
.orb.cool{background:radial-gradient(circle at 35% 30%, #ffffff 0%, #e0f0ff 18%, #6aa3ff 45%, #1c4ba3 80%, #061a3f 100%);box-shadow:0 0 12px rgba(80,160,255,.55),0 0 24px rgba(40,100,255,.25),inset -2px -3px 5px rgba(0,15,40,.6),inset 1px 2px 3px rgba(255,255,255,.5)}
/* eyebrow with leading orb */
.eyebrow-3d{display:inline-flex;align-items:center;gap:10px}
/* ---------- 3D STAT NUMBERS — gradient depth ---------- */
.stat-num{background:linear-gradient(180deg,#0A0A0A 0%,#0A0A0A 45%,#3a3a3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- OFFER CARDS — premium inner highlight ---------- */
.offer-card{background:
radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,1), rgba(255,255,255,0) 70%),
radial-gradient(80% 40% at 100% 100%, rgba(234,234,234,.6), transparent 60%),
#FFFFFF;
box-shadow:inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.02)}
.offer-card .num{display:inline-flex;align-items:center;gap:10px}
.offer-card .num::before{content:"";width:8px;height:8px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #fff 0%, #e8e6dc 35%, #888780 70%, #2a2a2a 100%);
box-shadow:inset -1px -1px 2px rgba(0,0,0,.35), inset 1px 1px 1px rgba(255,255,255,.6)}
/* ---------- PRODUCT ROW — orb marker on hover ---------- */
.product-row .num{display:inline-flex;align-items:center;gap:10px;position:relative}
.product-row .num::before{content:"";width:6px;height:6px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #fff, #c9c7be 40%, #6a6960 80%, #2a2a2a 100%);
opacity:.5;transition:opacity .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease)}
.product-row:hover .num::before{opacity:1;
background:radial-gradient(circle at 35% 30%, #ffffff, #fff3e0 30%, #ffb872 60%, #c2541a 100%);
box-shadow:0 0 10px rgba(255,140,60,.65)}
/* ---------- QUOTE CHOICE — depth on selected ---------- */
.quote-choice.selected{box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 24px -10px rgba(0,0,0,.4)}
/* ---------- HERO TAG with orb ---------- */
.hero-tag, .hero-tag-r{display:inline-flex;align-items:center;gap:8px}
.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;
background:radial-gradient(circle at 35% 30%, #fff, #fff3e0 30%, #ffb872 60%, #c2541a 100%);
box-shadow:0 0 8px rgba(255,140,60,.7);animation:tagPulse 3s ease-in-out infinite}
@keyframes tagPulse{0%,100%{opacity:.7}50%{opacity:1}}
/* footer NØDE styling now handled in invert override below */
.page-hero{position:relative}
/* ---------- Responsive ---------- */
@media (max-width:900px){
.nav-links,.nav-cta{display:none}
.nav-toggle{display:flex}
/* Sur mobile il ne reste que le logo, la langue et le menu : on colle
la langue au menu plutôt que de la laisser flotter au centre. */
.lang-switch{margin-left:auto;margin-right:10px}
.hero-wrap{padding:0 12px 40px}
.hero{height:min(70vh, 600px);min-height:440px;border-radius:14px}
.node-stroke{stroke-width:10}
section{padding:80px 0}
.intro{padding:80px 0}
.section-header{margin-bottom:48px}
.offer-card{padding:28px}
.stats{grid-template-columns:repeat(2,1fr)}
.stat{padding:24px 16px}
footer{margin:32px 12px 12px}
.footer-big{padding:48px 24px 28px}
.footer-inner{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 24px}
body{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ============================================================
BLACK ↔ WHITE INVERT (gray background stays)
============================================================ */
/* Sections that were white → become dark */
.section-white{background:#0A0A0A;color:#F5F5F5}
.section-white h1,.section-white h2,.section-white h3,.section-white h4{color:#F5F5F5}
.section-white .lede,.section-white .sub,.section-white .quote-step .sub{color:#9A9A95}
.section-white .eyebrow{color:#9A9A95}
/* Cards & panels that were white → become dark */
.offer-card{background:
radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.05), transparent 70%),
radial-gradient(80% 40% at 100% 100%, rgba(255,255,255,.02), transparent 60%),
#141414;
border-color:#2A2A2A;
color:#F5F5F5;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.4)}
.offer-card h3{color:#F5F5F5}
.offer-card p{color:#9A9A95}
.offer-card .features{color:#F5F5F5}
.offer-card .features li::before{color:#9A9A95}
.offer-card .num{color:#9A9A95}
.offer-card .num::before{background:radial-gradient(circle at 35% 30%, #fff 0%, #e8e6dc 35%, #888780 70%, #2a2a2a 100%)}
.contact-info{background:#141414;border-color:#2A2A2A;color:#F5F5F5}
.contact-info h4{color:#9A9A95}
.contact-info .block p{color:#F5F5F5}
.contact-info .block a{color:#F5F5F5;border-bottom-color:#F5F5F5}
/* Product rows on dark section */
.section-white .product-row{border-color:#2A2A2A}
.section-white .product-row:first-child{border-top-color:#2A2A2A}
.section-white .product-row p{color:#9A9A95}
.section-white .product-row .num{color:#9A9A95}
.section-white .product-row h3{color:#F5F5F5}
.section-white .product-row .arrow{border-color:#F5F5F5;color:#F5F5F5}
.section-white .product-row:hover .arrow{background:#F5F5F5;color:#0A0A0A}
/* Quote QCM choices on dark section */
.section-white .quote-choice{background:#141414;border-color:#2A2A2A;color:#F5F5F5}
.section-white .quote-choice:hover{border-color:#F5F5F5}
.section-white .quote-choice .sub{color:#9A9A95}
.section-white .quote-choice.selected{background:#F5F5F5;color:#0A0A0A;border-color:#F5F5F5}
.section-white .quote-choice.selected .sub{color:rgba(10,10,10,.6)}
.section-white .quote-bar{background:#2A2A2A}
.section-white .quote-bar span{background:#F5F5F5}
.section-white .quote-progress{color:#9A9A95}
.section-white .quote-summary,.section-white .quote-summary .row{border-color:#2A2A2A}
.section-white .quote-summary .row span:first-child{color:#9A9A95}
.section-white .quote-result h3,.section-white .quote-result .price{color:#F5F5F5}
/* Form fields on dark section */
.section-white .field input,.section-white .field textarea,.section-white .field select{color:#F5F5F5;border-bottom-color:#2A2A2A;background:transparent}
.section-white .field input:focus,.section-white .field textarea:focus,.section-white .field select:focus{border-bottom-color:#F5F5F5}
.section-white .field label{color:#9A9A95}
.section-white .field select option{background:#0A0A0A;color:#F5F5F5}
/* Buttons on dark sections */
.section-white .btn{border-color:#F5F5F5;color:#F5F5F5}
.section-white .btn::before{background:#F5F5F5}
.section-white .btn:hover{color:#0A0A0A}
.section-white .btn-dark{background:#F5F5F5;color:#0A0A0A;border-color:#F5F5F5}
.section-white .btn-dark::before{background:#0A0A0A}
.section-white .btn-dark:hover{color:#F5F5F5}
/* Prism line softer on dark */
.prism-line{background:linear-gradient(90deg,transparent,rgba(255,59,32,.25),rgba(80,140,255,.25),rgba(140,80,255,.25),transparent)}
/* Footer was black → becomes white */
footer{background:#FFFFFF;color:#0A0A0A;box-shadow:inset 0 0 0 1px var(--border)}
.footer-big{border-bottom-color:var(--border)}
.footer-big h2{color:#0A0A0A;background:none;-webkit-background-clip:initial;background-clip:initial}
.footer-big h2 .red{color:var(--accent)}
.footer-inner{color:#888780}
.footer-nav a:hover{color:#0A0A0A}
/* 3D scene browsers stay white (real-site preview) — that's fine */
/* ============================================================
STUDIO PAGE — 3D core (real geometry, GPU-light)
============================================================ */
.page[data-page="studio"]{margin:0;padding:0;background:var(--bg)}
/* transform:none so the fixed canvas is viewport-relative, not page-relative */
.page[data-page="studio"].active{transform:none}
body.studio-active{background:var(--bg)}
/* padding-top:0 retiré avec le hero plein écran : la page studio dégage
maintenant la nav flottante comme toutes les autres pages. */
/* Fixed WebGL canvas behind everything — même fond que le reste du site (var(--bg)) */
.studio-canvas-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
/* Canvas du nœud 3D — plein écran, fixe : la corde reste à l'écran pendant
que la page défile, c'est le défilement qui la fait avancer. */
#rope-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#studio-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#demo-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:3;pointer-events:none}
/* Piste de défilement : sa hauteur donne la longueur de corde à dérouler,
et elle porte les fiches. La perspective est posée ici pour que les
fiches pivotent légèrement dans l'espace en apparaissant. */
.rope-track{position:relative;padding:14vh 0 18vh;perspective:1400px;perspective-origin:50% 50%}
.studio-card{position:relative;width:min(392px,84vw);margin-bottom:16vh;padding:26px 28px 28px;
background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);
box-shadow:0 34px 70px -34px rgba(0,0,0,.30),0 3px 10px rgba(0,0,0,.045);
transform-style:preserve-3d}
.studio-card:last-child{margin-bottom:0}
/* Alternance pilotée par le rang, pas par une classe posée à la main :
insérer ou retirer une fiche ne demande plus de tout reprendre. */
.rope-track .studio-card:nth-of-type(odd){margin-left:max(5vw,32px);margin-right:auto;transform-origin:left center}
.rope-track .studio-card:nth-of-type(even){margin-left:auto;margin-right:max(5vw,32px);transform-origin:right center}
/* Couleur : une seule, l'orange de la marque, et toujours en petite dose —
une barre de 30px en tête de fiche et un point devant le libellé. */
.studio-card::before{content:"";position:absolute;top:0;left:28px;width:30px;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
.studio-card .sc-k{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:14px}
.studio-card .sc-k::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.studio-card h2{font-size:clamp(21px,2.1vw,27px);margin-bottom:12px}
.studio-card p{font-size:15px;line-height:1.62;color:#3a3a38}
/* Emplacement d'une démo 3D. Le canvas partagé ne dessine que dans ce
rectangle (voir le module DEMOS et son test de ciseaux). Le fond en creux
tient le cadre même sans WebGL. */
/* Trois tailles, pour casser la régularité de la colonne */
.studio-card.sc-sm{width:min(310px,80vw);padding:22px 24px 24px}
.studio-card.sc-lg{width:min(486px,88vw);padding:30px 32px 32px}
.studio-card.sc-3d{width:min(452px,86vw)}
.studio-card.sc-3d.sc-lg{width:min(520px,90vw)}
/* Fiche sombre : l'encre de la marque, texte clair. Les vignettes 3D y
ressortent nettement mieux que sur fond blanc. */
.studio-card.sc-dark{background:rgba(14,14,13,.88);border-color:rgba(255,255,255,.10);
box-shadow:0 40px 80px -36px rgba(0,0,0,.62),0 3px 10px rgba(0,0,0,.20)}
.studio-card.sc-dark h2{color:#F4F3F0}
.studio-card.sc-dark p{color:#B4B2AB}
.studio-card.sc-dark .sc-k,.studio-card.sc-dark .sc-tag{color:#8C8A84}
.studio-card.sc-dark ul{border-top-color:rgba(255,255,255,.14)}
.studio-card.sc-dark ul li{border-bottom-color:rgba(255,255,255,.14)}
.studio-card.sc-dark ul li b{color:#F4F3F0}
.studio-card.sc-dark ul li span{color:#8C8A84}
.studio-card.sc-dark .sc-demo{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09)}
/* ---------- Clôture ----------
L'appel à l'action n'est plus une fiche : c'est un bloc noir arrondi qui
occupe le bas de la page, avec le nœud blanc à droite. Les marges
latérales reprennent celles du pied de page pour que les deux cartes
s'alignent. */
.studio-outro{position:relative;min-height:90vh;display:flex;align-items:center;
margin:0 20px;border-radius:var(--radius);
/* Le noir gris des fiches sombres. Celles-ci l'obtiennent par transparence
(rgba(14,14,13,.88) sur le fond clair) ; ici la teinte est posée en dur
à sa valeur équivalente : sur 90vh, laisser la corde transparaître en
flou donnait des taches qui se déplaçaient au défilement. */
background:#282828;
border:1px solid rgba(255,255,255,.10);color:#fff;overflow:hidden}
@media (max-width:600px){.studio-outro{margin:0 12px}}
.so-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,80px);
align-items:center;width:100%;max-width:1240px;margin:0 auto;padding:clamp(64px,9vh,110px) clamp(24px,5vw,56px)}
.so-k{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:26px}
.so-k::before{content:"";width:26px;height:1px;background:rgba(255,255,255,.7);flex:none}
.studio-outro h2{font-size:clamp(40px,5.6vw,82px);color:#fff;letter-spacing:-0.042em;line-height:1;margin-bottom:26px}
.so-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.58;color:rgba(255,255,255,.9);max-width:430px}
.so-cta{display:inline-flex;align-items:center;gap:11px;margin-top:40px;padding:15px 26px;
background:#fff;color:var(--bg-dark);border-radius:980px;font-size:14px;font-weight:500;
transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.so-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,0,0,.42)}
.so-cta svg{transition:transform .35s var(--ease)}
.so-cta:hover svg{transform:translateX(4px)}
/* le cadre en creux des vignettes n'a pas lieu d'être sur l'aplat */
.so-demo.sc-demo{height:min(56vh,480px);margin:0;background:none;border:none;border-radius:0}
/* Apparition : le texte monte par paliers, le nœud se déplie ensuite. */
.studio-content .studio-outro.reveal{opacity:1;transform:none}
.studio-outro .so-k,.studio-outro h2,.studio-outro .so-lede,.studio-outro .so-cta{
opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.studio-outro.in .so-k,.studio-outro.in h2,.studio-outro.in .so-lede,.studio-outro.in .so-cta{
opacity:1;transform:none}
.studio-outro.in h2{transition-delay:.10s}
.studio-outro.in .so-lede{transition-delay:.20s}
.studio-outro.in .so-cta{transition-delay:.30s}
/* Le pied de page garde son apparence des autres pages. Seul le z-index est
ajouté, et il est indispensable : le canvas de la corde est un élément
positionné en z-index:0, il se peignait donc par-dessus le footer, qui
n'est pas positionné. C'est ce qui faisait passer la corde dans le bas
de page. */
body.studio-active footer{position:relative;z-index:4}
@media (max-width:900px){
.so-inner{grid-template-columns:1fr;gap:8px}
.so-demo.sc-demo{order:-1;height:min(38vh,300px)}
.so-lede{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.studio-outro .so-k,.studio-outro h2,.studio-outro .so-lede,.studio-outro .so-cta{
opacity:1;transform:none;transition:none}
}
.sc-demo{position:relative;width:100%;height:210px;margin:4px 0 10px;border-radius:12px;
background:rgba(10,10,10,.038);border:1px solid rgba(10,10,10,.05);overflow:hidden}
/* Légende hors du cadre : le canvas des démos est au-dessus de la fiche,
un ::after à l'intérieur du cadre passerait dessous. */
.sc-tag{display:flex;align-items:center;gap:7px;margin-bottom:14px;font-size:10px;
font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.sc-tag::before{content:"";width:14px;height:1px;background:var(--accent);flex:none}
.no-webgl .sc-demo::before{content:"Aperçu 3D indisponible";position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-2)}
@media (max-width:768px){.sc-demo{height:180px}}
.studio-card ul{list-style:none;margin-top:16px;border-top:1px solid var(--border)}
.studio-card ul li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--border)}
.studio-card ul li b{font-weight:500;font-size:14px}
.studio-card ul li span{font-size:12px;color:var(--text-2);text-align:right}
.studio-card .btn{margin-top:20px}
@media (max-width:768px){
.rope-track{padding:10vh 0 14vh}
.studio-card{margin-bottom:11vh;padding:22px 22px 24px}
.studio-card.sc-sm,.studio-card.sc-lg{width:min(392px,86vw);padding:22px 22px 24px}
.rope-track .studio-card:nth-of-type(odd),
.rope-track .studio-card:nth-of-type(even){margin-left:auto;margin-right:auto}
/* en colonne : sur 315 px la ligne nom + rôle se comprimait et coupait
les noms sur deux lignes */
.studio-card ul li{flex-direction:column;align-items:flex-start;gap:2px}
.studio-card ul li span{text-align:left}
}
/* Apparition : la fiche pivote depuis son bord d'ancrage puis se stabilise
à un léger angle, ce qui lui donne son épaisseur sans gêner la lecture.
Plus spécifique que « .studio-content .reveal » pour conserver le rotateY. */
.studio-content .studio-card.reveal{opacity:0;transform:translateY(30px) rotateY(-18deg) scale(.97)}
.studio-content .rope-track .studio-card:nth-of-type(even).reveal{transform:translateY(30px) rotateY(18deg) scale(.97)}
.studio-content .studio-card.reveal.in{opacity:1;transform:translateY(0) rotateY(-5deg) scale(1)}
.studio-content .rope-track .studio-card:nth-of-type(even).reveal.in{transform:translateY(0) rotateY(5deg) scale(1)}
@media (prefers-reduced-motion:reduce){
.studio-content .studio-card.reveal,
.studio-content .rope-track .studio-card:nth-of-type(even).reveal,
.studio-content .studio-card.reveal.in,
.studio-content .rope-track .studio-card:nth-of-type(even).reveal.in{opacity:1;transform:none}
}
/* Content above the 3D scene */
.studio-content{position:relative;z-index:2}
.studio-section{position:relative;display:flex;flex-direction:column;justify-content:center;padding:160px 32px 120px;max-width:1180px;margin:0 auto}
@media (max-width:768px){.studio-section{padding:120px 22px 80px}}
/* Hero — title over the rotating core */
.studio-hero{min-height:100vh;align-items:center;text-align:center;justify-content:center}
.studio-eyebrow{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:28px}
.studio-title{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(52px,10vw,150px);letter-spacing:-0.05em;line-height:.88;text-transform:uppercase;color:#fff;text-shadow:0 8px 60px rgba(0,0,0,.5)}
.studio-title .red{color:var(--accent)}
.studio-lede{font-size:clamp(17px,1.6vw,21px);max-width:600px;margin:32px auto 0;line-height:1.55;color:rgba(255,255,255,.7)}
.studio-scrollcue{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:10px}
.studio-scrollcue::after{content:"";width:1px;height:40px;background:currentColor;animation:cuedrop 2s ease-in-out infinite}
@keyframes cuedrop{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
/* Animatable ring radius (for the emerge-from-core effect) */
@property --R{syntax:'';inherits:false;initial-value:0px}
/* Hero: minimal at first — just the core + caption */
.studio-hero{justify-content:center;text-align:center}
/* vertical side captions — short studio info on the left & right edges */
.studio-side{position:fixed;top:50%;transform:translateY(-50%);z-index:4;display:flex;gap:18px;
writing-mode:vertical-rl;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:#6E6E69;pointer-events:none}
.studio-side span{white-space:nowrap}
.studio-side span:last-child{color:#A4A29A}
.studio-side.left{left:26px;transform:translateY(-50%) rotate(180deg)} /* reads upward */
.studio-side.right{right:26px}
@media (max-width:900px){.studio-side{display:none}}
/* Invisible clickable zone over the 3D core, centered on screen */
.core-trigger{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:240px;height:240px;border-radius:50%;background:none;border:none;cursor:pointer;z-index:4}
@media (max-width:768px){.core-trigger{width:170px;height:170px}}
body.studio-open .core-trigger{pointer-events:none}
/* Caption + tabs under the core */
.core-caption{position:absolute;top:calc(50% + 175px);left:50%;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:16px;transition:opacity .5s var(--ease);width:max-content;max-width:92vw}
@media (max-width:768px){.core-caption{top:calc(50% + 140px)}}
.core-caption .studio-title{font-size:clamp(30px,5vw,60px);line-height:1;color:#0A0A0A;text-shadow:none}
.core-subtitle{font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.06em;color:#6E6E69}
/* Studio page: replace every orange accent with a cool chrome silver */
.page[data-page="studio"] .studio-title .red,
.page[data-page="studio"] .panel-statement h2 .red,
.page[data-page="studio"] .panel-final h2 .red,
.page[data-page="studio"] .studio-head .e,
.page[data-page="studio"] .studio-values-head .e,
.page[data-page="studio"] .studio-value .vn,
.page[data-page="studio"] .panel-k{
color:#c6cdd8 !important;
background:linear-gradient(180deg,#ffffff,#aeb6c4);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* tab number: graphite chrome, visible on the light page */
.page[data-page="studio"] .core-tab .ct-k{
background:linear-gradient(180deg,#8b93a0,#3a3f47);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#5a6068;
}
/* 4 tabs row */
.core-tabs{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.core-tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:980px;cursor:pointer;
border:1px solid rgba(10,10,10,.2);background:rgba(255,255,255,.55);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
/* chrome fill that fades in on hover */
.core-tab::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s var(--ease);
background:linear-gradient(135deg,#f3f5f9 0%,#c2cad6 38%,#ffffff 50%,#aeb6c4 62%,#e9edf3 100%)}
/* light sweep that crosses the tab on hover */
.core-tab::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:2;pointer-events:none;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);opacity:0}
.core-tab > *{position:relative;z-index:1}
.core-tab:hover{transform:translateY(-3px);border-color:#0A0A0A;box-shadow:0 10px 26px -12px rgba(0,0,0,.35)}
.core-tab:hover::before{opacity:1}
.core-tab:hover::after{animation:tabSheen .75s var(--ease)}
@keyframes tabSheen{0%{left:-70%;opacity:0}25%{opacity:1}100%{left:130%;opacity:0}}
.core-tab .ct-k{font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.1em;color:var(--accent);transition:color .35s var(--ease)}
.core-tab .ct-t{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;color:#0A0A0A;letter-spacing:-0.01em;transition:color .35s var(--ease)}
/* on hover the text turns dark to read on the chrome fill */
.core-tab:hover .ct-t{color:#0a0a0a}
.page[data-page="studio"] .core-tab:hover .ct-k{-webkit-text-fill-color:#0a0a0a;color:#0a0a0a;background:none}
@media (max-width:560px){.core-tab{padding:10px 16px}.core-tab .ct-t{font-size:13px}}
.core-hint{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
display:inline-flex;align-items:center;gap:8px;animation:hintPulse 2.4s ease-in-out infinite}
.core-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* once opened, caption slides down and hint disappears */
body.studio-open .core-caption{transform:translateX(-50%) translateY(40px);opacity:.85}
body.studio-open .core-hint{opacity:0;pointer-events:none;height:0;margin:0;overflow:hidden}
/* Interactive orbit hub — nodes ring the centered 3D core */
.core-nodes{position:absolute;top:50%;left:50%;width:0;height:0;z-index:3;pointer-events:none}
.core-node{position:absolute;top:0;left:0;pointer-events:none;background:none;border:none;cursor:pointer;
/* collapsed at the core center initially (R = 0) */
--R:0px;
--Rfull:230px;
opacity:0;
transform:rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)));
transform-origin:0 0;
transition:--R .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
@media (max-width:768px){.core-node{--Rfull:140px}}
/* emerge: nodes fly out from the core to their ring position */
body.studio-open .core-node{--R:var(--Rfull);opacity:1;pointer-events:auto;animation:nodeFloat 6s ease-in-out infinite}
body.studio-open .core-node:nth-child(2){transition-delay:.05s}
body.studio-open .core-node:nth-child(3){transition-delay:.12s}
body.studio-open .core-node:nth-child(4){transition-delay:.19s}
body.studio-open .core-node:nth-child(5){transition-delay:.26s}
@keyframes nodeFloat{0%,100%{margin-top:0}50%{margin-top:-6px}}
.core-node .cn-line{position:absolute;top:50%;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent);
width:var(--R);right:50%;transform-origin:right center;opacity:.4;transition:opacity .3s var(--ease)}
.core-node .cn-dot{position:relative;display:block;width:12px;height:12px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 0 rgba(255,59,32,.5);margin:0 auto;
animation:nodePulse 2.6s ease-in-out infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,32,.5)}50%{box-shadow:0 0 0 8px rgba(255,59,32,0)}}
.core-node .cn-card{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding:8px 14px;border-radius:10px;
background:rgba(14,14,18,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.core-node .cn-k{font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.1em;color:var(--accent)}
.core-node .cn-t{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;color:#fff;letter-spacing:-0.01em}
.core-node:hover .cn-card{border-color:#fff;transform:translateY(-2px);background:rgba(20,20,26,.85)}
.core-node:hover .cn-line{opacity:1}
.core-node:hover .cn-dot{background:#fff}
@media (max-width:560px){.core-node .cn-card{padding:6px 10px}.core-node .cn-t{font-size:12px}}
/* no scroll cue — the studio page is a locked fullscreen experience */
.studio-hero .studio-scrollcue{display:none}
/* ---- Emerging 3D panels (content comes out of the core) ---- */
.core-panels{position:fixed;inset:0;z-index:6;pointer-events:none;perspective:1300px}
/* dim backdrop when any panel is open */
.core-panels::before{content:"";position:absolute;inset:0;background:rgba(5,5,7,.55);
opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
body.panel-open .core-panels{pointer-events:auto}
body.panel-open .core-panels::before{opacity:1}
.core-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
padding:110px 24px 56px;opacity:0;pointer-events:none;perspective:1500px;
transition:opacity .3s ease}
.core-panel.open,.core-panel.closing{opacity:1;pointer-events:auto}
.core-panel.closing{pointer-events:none}
.core-panel-inner{position:relative;max-width:1080px;width:100%;max-height:82vh;overflow-y:auto;
transform-origin:center center;will-change:transform,opacity,filter;
background:rgba(13,13,17,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(36px,5vw,64px);
box-shadow:0 40px 120px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset}
/* === emerge from the core: a point at center → bursts toward the viewer === */
@keyframes panelEmerge{
0% {opacity:0; transform:translateZ(-1300px) scale(.02) rotateX(34deg); filter:blur(24px)}
30% {opacity:1; filter:blur(8px)}
62% {transform:translateZ(80px) scale(1.05) rotateX(-3deg); filter:blur(0)}
82% {transform:translateZ(-18px) scale(.99) rotateX(1deg)}
100% {opacity:1; transform:translateZ(0) scale(1) rotateX(0deg); filter:blur(0)}
}
.core-panel.open .core-panel-inner{animation:panelEmerge .95s cubic-bezier(.16,1,.3,1) both}
/* === reabsorb back into the core === */
@keyframes panelReabsorb{
0% {opacity:1; transform:translateZ(0) scale(1) rotateX(0deg); filter:blur(0)}
100% {opacity:0; transform:translateZ(-1100px) scale(.03) rotateX(30deg); filter:blur(18px)}
}
.core-panel.closing .core-panel-inner{animation:panelReabsorb .6s cubic-bezier(.7,0,.84,0) both}
/* === staggered reveal of inner content once the panel lands === */
@keyframes itemUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.core-panel .studio-head,.core-panel .studio-values-head,
.core-panel .studio-step,.core-panel .studio-value,
.core-panel .panel-k,.core-panel .panel-statement h2,.core-panel .panel-statement .panel-sub,
.core-panel .panel-final h2,.core-panel .panel-final .panel-sub,.core-panel .panel-final .btn{opacity:0}
.core-panel.open .studio-head{animation:itemUp .6s var(--ease) .45s both}
.core-panel.open .studio-step{animation:itemUp .55s var(--ease) both}
.core-panel.open .studio-step:nth-child(1){animation-delay:.55s}
.core-panel.open .studio-step:nth-child(2){animation-delay:.64s}
.core-panel.open .studio-step:nth-child(3){animation-delay:.73s}
.core-panel.open .studio-step:nth-child(4){animation-delay:.82s}
.core-panel.open .studio-step:nth-child(5){animation-delay:.91s}
.core-panel.open .studio-values-head{animation:itemUp .6s var(--ease) .45s both}
.core-panel.open .studio-value{animation:itemUp .55s var(--ease) both}
.core-panel.open .studio-value:nth-child(1){animation-delay:.6s}
.core-panel.open .studio-value:nth-child(2){animation-delay:.72s}
.core-panel.open .studio-value:nth-child(3){animation-delay:.84s}
.core-panel.open .panel-k{animation:itemUp .5s var(--ease) .45s both}
.core-panel.open .panel-statement h2{animation:itemUp .6s var(--ease) .55s both}
.core-panel.open .panel-statement .panel-sub{animation:itemUp .6s var(--ease) .7s both}
.core-panel.open .panel-final h2{animation:itemUp .6s var(--ease) .5s both}
.core-panel.open .panel-final .panel-sub{animation:itemUp .6s var(--ease) .64s both}
.core-panel.open .panel-final .btn{animation:itemUp .6s var(--ease) .78s both}
@media (prefers-reduced-motion:reduce){
.core-panel.open .core-panel-inner,.core-panel.closing .core-panel-inner,
.core-panel.open *{animation:none!important;opacity:1!important;transform:none!important}
}
.panel-close{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:20;overflow:hidden;display:inline-flex;align-items:center;gap:9px;
padding:13px 26px;border-radius:980px;border:1px solid rgba(255,255,255,.35);background:rgba(18,18,24,.7);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
color:#fff;font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.7);
transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.panel-close::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s var(--ease);
background:linear-gradient(135deg,#f3f5f9,#c2cad6 40%,#ffffff 50%,#aeb6c4 60%,#e9edf3)}
.panel-close::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;z-index:2;pointer-events:none;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg);opacity:0}
.panel-close > *{position:relative;z-index:1;transition:color .3s var(--ease)}
.panel-close:hover{border-color:#fff;transform:translateX(-50%) translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.7)}
.panel-close:hover::before{opacity:1}
.panel-close:hover::after{animation:tabSheen .75s var(--ease)}
.panel-close:hover > *{color:#0a0a0a}
.panel-close svg{transition:transform .3s var(--ease)}
.panel-close:hover svg{transform:translateX(-3px)}
@media (max-width:768px){.panel-close{top:84px}}
/* Le bouton Fermer n'apparaît que lorsqu'un panneau est ouvert */
.panel-close{display:none}
body.panel-open .panel-close{display:inline-flex}
.panel-k{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:20px}
.panel-statement{text-align:center}
.panel-statement h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(30px,4.5vw,64px);letter-spacing:-0.03em;line-height:1.06;color:#fff}
.panel-statement h2 .red{color:var(--accent)}
.panel-statement .panel-sub{font-size:17px;color:rgba(255,255,255,.65);margin:28px auto 0;max-width:620px;line-height:1.6}
.panel-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.panel-final h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(36px,6vw,88px);letter-spacing:-0.04em;line-height:.92;color:#fff;text-transform:uppercase}
.panel-final h2 .red{color:var(--accent)}
.panel-final .panel-sub{color:rgba(255,255,255,.6);font-size:18px;max-width:460px}
.panel-final .btn{border-color:#fff;color:#fff}
.panel-final .btn::before{background:#fff}
.panel-final .btn:hover{color:#0A0A0A}
/* when a panel is open, fade the orbit nodes + caption so they don't clash */
body.panel-open .core-nodes,
body.panel-open .core-caption{opacity:.12;pointer-events:none;transition:opacity .4s var(--ease)}
/* Big statement */
.studio-statement{align-items:center;text-align:center;min-height:80vh}
.studio-statement h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(32px,5vw,80px);letter-spacing:-0.03em;line-height:1.05;color:#fff;max-width:1000px}
.studio-statement h2 .red{color:var(--accent)}
.studio-statement .sub{font-size:18px;color:rgba(255,255,255,.6);margin-top:32px;max-width:520px;line-height:1.6}
/* Process — animated step cards on a glass panel */
.studio-panel{background:rgba(14,14,18,.55);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:clamp(32px,5vw,72px)}
.studio-head{margin-bottom:56px}
.studio-head .e{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block}
.studio-head h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(34px,5vw,68px);letter-spacing:-0.04em;line-height:.95;color:#fff;text-transform:uppercase}
.studio-head p{color:rgba(255,255,255,.6);font-size:16px;line-height:1.6;max-width:520px;margin-top:18px}
.studio-steps{display:flex;flex-direction:column}
.studio-step{display:grid;grid-template-columns:90px 1fr 1.1fr;gap:32px;align-items:start;padding:32px 0;border-top:1px solid rgba(255,255,255,.12);transition:padding-left .4s var(--ease),background .4s var(--ease)}
.studio-step:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.studio-step:hover{padding-left:14px}
.studio-step .n{font-family:"Space Grotesk",sans-serif;font-size:clamp(34px,4vw,56px);font-weight:700;letter-spacing:-0.04em;line-height:1;background:linear-gradient(180deg,#fff,rgba(255,255,255,.25));-webkit-background-clip:text;background-clip:text;color:transparent}
.studio-step h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-0.02em;color:#fff}
.studio-step .meta{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:10px;display:inline-block}
.studio-step p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6)}
@media (max-width:768px){.studio-step{grid-template-columns:1fr;gap:10px;padding:26px 0}}
/* Values grid */
.studio-values-head{margin-bottom:48px;text-align:center}
.studio-values-head .e{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block}
.studio-values-head h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(34px,5vw,68px);letter-spacing:-0.04em;color:#fff;text-transform:uppercase}
.studio-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:768px){.studio-values-grid{grid-template-columns:1fr}}
.studio-value{background:rgba(14,14,18,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:36px;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.studio-value:hover{border-color:rgba(255,255,255,.3);transform:translateY(-4px)}
.studio-value .vn{font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.1em;color:var(--accent)}
.studio-value h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-0.02em;color:#fff;margin-top:20px}
.studio-value p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);margin-top:14px}
/* Final CTA */
.studio-final{align-items:center;text-align:center;gap:28px;min-height:90vh;justify-content:center}
.studio-final h2{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(40px,7vw,110px);letter-spacing:-0.05em;line-height:.9;color:#fff;text-transform:uppercase}
.studio-final h2 .red{color:var(--accent)}
.studio-final p{color:rgba(255,255,255,.6);font-size:18px;max-width:480px}
.studio-final .btn{border-color:#fff;color:#fff}
.studio-final .btn::before{background:#fff}
.studio-final .btn:hover{color:#0A0A0A}
/* reveal for studio steps/values */
.studio-content .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.studio-content .reveal.in{opacity:1;transform:translateY(0)}
/* ---------- Quote send form (inside result) ---------- */
.quote-send-form{display:flex;flex-direction:column;gap:16px}
.quote-send-form .field input{color:#F5F5F5;border-bottom-color:#2A2A2A;background:transparent}
.quote-send-form .field input:focus{border-bottom-color:#F5F5F5}
.quote-send-form .field label{color:#9A9A95}
.quote-send-status{font-family:"Space Grotesk",sans-serif;font-size:12px;padding:10px 14px;margin-top:8px;display:none;letter-spacing:.04em;text-transform:uppercase;border-radius:8px}
.quote-send-status.error{display:block;background:rgba(255,59,32,.15);color:var(--accent)}
.quote-send-status.success{display:block;background:rgba(80,255,160,.12);color:#5dff9a}
/* ---------- Tier selection modal ---------- */
.tier-modal-overlay{position:fixed;inset:0;background:rgba(10,10,10,.85);backdrop-filter:blur(14px);z-index:9998;display:none;align-items:center;justify-content:center;padding:24px}
.tier-modal-overlay.open{display:flex}
.tier-modal{background:#141414;color:#F5F5F5;border:1px solid #2A2A2A;border-radius:18px;padding:40px;max-width:560px;width:100%;position:relative;box-shadow:0 40px 100px -20px rgba(0,0,0,.5)}
.tier-modal .qd-close{position:absolute;top:16px;right:16px;border-color:#F5F5F5;color:#F5F5F5}
.tier-modal .qd-close:hover{background:#F5F5F5;color:#0A0A0A}
.tier-modal-price .from{display:block;font-size:11px;font-weight:500;color:#9A9A95;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.tier-modal .field input{color:#F5F5F5;border-bottom-color:#2A2A2A;background:transparent}
.tier-modal .field input:focus{border-bottom-color:#F5F5F5}
.tier-modal .field label{color:#9A9A95}
/* Make tier cards clickable */
.pf-tier{cursor:pointer}
/* ---------- Professional quote document (modal) ---------- */
.quote-doc-overlay{position:fixed;inset:0;background:rgba(10,10,10,.85);backdrop-filter:blur(14px);z-index:9999;display:none;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto}
.quote-doc-overlay.open{display:flex}
.quote-doc{background:#fff;color:#0A0A0A;max-width:820px;width:100%;border-radius:18px;position:relative;box-shadow:0 40px 100px -20px rgba(0,0,0,.5)}
.qd-actions{position:sticky;top:0;background:#F5F5F5;border-bottom:1px solid var(--border);padding:14px 20px;display:flex;gap:10px;align-items:center;border-radius:18px 18px 0 0;z-index:2}
.qd-actions .btn{font-size:11px;padding:10px 18px}
.qd-close{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid #0A0A0A;font-size:20px;line-height:1;background:transparent;color:#0A0A0A;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.qd-close:hover{background:#0A0A0A;color:#fff}
.qd-page{padding:48px 56px 56px;font-family:"Inter",sans-serif;font-size:14px;line-height:1.55;color:#0A0A0A}
@media (max-width:600px){.qd-page{padding:32px 24px}}
/* ⚠️ La règle globale `section{padding:120px 0}` (l. 255) vise les sections de
page, mais le devis se sert aussi de : il héritait de 120 px de
vide entre chaque bloc, soit deux pages de blanc à l'impression. Chaque
bloc du devis remet donc `padding:0` explicitement — un sélecteur de classe
suffit à battre `section`. Ne PAS neutraliser via `.qd-page section`, qui
écraserait aussi le padding voulu de .qd-totals. */
/* En-tête : marque à gauche, nature du document à droite. */
.qd-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:20px;border-bottom:2px solid #0A0A0A;margin-bottom:28px}
.qd-brand .qd-logo{font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:700;letter-spacing:-0.04em;display:inline-flex;align-items:center;gap:8px}
.qd-brand .qd-logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.qd-brand .qd-studio{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-top:6px}
.qd-doctype{font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap}
/* Émetteur | Destinataire, côte à côte. C'est la mise en page attendue sur un
devis : qui émet, à qui, avant tout chiffre. */
.qd-parties{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px;padding:0}
.qd-party h4{font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#888;font-weight:600;margin-bottom:10px}
.qd-ident{font-style:normal;font-size:12px;line-height:1.65;color:#555}
.qd-ident span{display:block}
.qd-ident .qd-ident-name{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:700;color:#0A0A0A;letter-spacing:-.01em;margin-bottom:2px}
.qd-client > div{font-size:14px;line-height:1.6;color:#555}
.qd-client > div:first-child{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;color:#0A0A0A;letter-spacing:-.01em;margin-bottom:2px}
/* Société, email et téléphone sont facultatifs : sans ça, les div vides
laissaient des trous dans le bloc destinataire. */
.qd-client > div:empty{display:none}
@media (max-width:600px){.qd-parties{grid-template-columns:1fr;gap:24px}.qd-head{gap:16px}.qd-doctype{font-size:20px}}
/* Références du document, en bande horizontale. */
.qd-refs{display:flex;flex-wrap:wrap;gap:8px 40px;padding:12px 16px;margin-bottom:32px;background:#F5F5F5;border-radius:8px;font-family:"Space Grotesk",sans-serif;font-size:12px}
.qd-refs > div{display:flex;gap:10px;align-items:baseline}
.qd-refs span{color:#888;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.qd-refs strong{font-weight:600;letter-spacing:-.01em}
.qd-section{margin-bottom:28px;padding:0}
.qd-section h4{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#888;font-weight:600;margin-bottom:12px}
.qd-table{width:100%;border-collapse:collapse;margin-top:4px}
.qd-table th{text-align:left;padding:10px 12px;background:#F5F5F5;font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#666;font-weight:600;border-bottom:1px solid var(--border)}
.qd-table th:last-child{text-align:right}
.qd-table td{padding:14px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.qd-table td:last-child{text-align:right;font-family:"Space Grotesk",sans-serif;font-weight:600;white-space:nowrap}
.qd-table tr:last-child td{border-bottom:none}
.qd-table td .det{display:block;color:#888;font-size:12px;margin-top:2px}
.qd-totals{background:#F5F5F5;padding:24px 28px;border-radius:12px}
.qd-total-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:14px}
.qd-total-row span{color:#666}
.qd-total-row strong{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.01em}
.qd-total-row.big{padding-top:16px;margin-top:8px;border-top:1px solid var(--border);font-size:22px;align-items:baseline}
.qd-total-row.big span{color:#0A0A0A;font-weight:600}
.qd-total-row.big strong{font-size:28px;color:var(--accent);font-weight:700}
.qd-note{margin-top:16px;font-size:12px;color:#888;line-height:1.5}
.qd-terms,.qd-steps{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0}
.qd-terms li,.qd-steps li{display:flex;gap:12px;font-size:14px}
.qd-terms li strong{min-width:120px;flex-shrink:0;font-family:"Space Grotesk",sans-serif;font-weight:600}
.qd-steps{counter-reset:s}
.qd-steps li{counter-increment:s}
.qd-steps li::before{content:counter(s,decimal-leading-zero);font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--accent);min-width:32px;flex-shrink:0}
/* Pied : la ligne d'identité légale est reprise ici pour qu'elle figure aussi
sur la dernière page à l'impression.
⚠️ C'est un