/* ============================================================
   NUOPS — version alternative « carte blanche »
   Seules les couleurs sont imposées (DA série CAS). Tout le reste —
   typographie, mise en page, mouvement — est réinventé.
   ============================================================ */

@font-face{font-family:"Syne"; src:url(fonts/syne.woff2) format("woff2"); font-weight:400 800; font-display:swap}
@font-face{font-family:"Instrument Serif"; src:url(fonts/instrument-serif.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Instrument Serif"; src:url(fonts/instrument-serif-italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap}
@font-face{font-family:"Manrope"; src:url(fonts/manrope.woff2) format("woff2"); font-weight:400 800; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight:400 500; font-display:swap}

:root{
  /* Couleurs : la palette de la marque, inchangée */
  --navy:#001F3F; --deep:#00172F; --abyss:#000F20; --panel:#03234A; --bg3:#062E59;
  --line:#123A61; --line2:#1C4875; --ink:#FFFFFF; --ink2:#9DB4C9; --mute:#5D7A94;
  --cyan:#00D1B2; --cyan-2:#2FE0C4; --mint:#7DEFD6; --carbon:#2E2E2E;
  --grad:linear-gradient(115deg, #00C2D8 0%, var(--cyan) 45%, var(--mint) 100%);

  /* Typographie : un grotesque expressif, une serif italique, un mono */
  --display:"Syne", "Manrope", sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --body:"Manrope", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --pad:clamp(20px, 4vw, 64px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--deep); -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; color:var(--ink); background:var(--deep); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip}
img,video,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
::selection{background:var(--cyan); color:var(--deep)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:4px}

.skip{position:fixed; left:16px; top:-80px; z-index:200; padding:12px 18px; border-radius:100px; background:var(--cyan); color:var(--deep); font-weight:700}
.skip:focus{top:16px}

/* Grain : un voile de bruit très léger sur toute la page */
body::after{content:""; position:fixed; inset:-50%; z-index:150; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}}

/* Scène WebGL, derrière tout le contenu */
#gl{position:fixed; inset:0; z-index:0; width:100vw; height:100vh; pointer-events:none}
main, .foot{position:relative; z-index:1}
/* Halo de fond : la profondeur du navy, avant même que la 3D ne charge */
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 75% 40%, rgba(0,209,178,.10), transparent 70%), radial-gradient(50% 60% at 10% 90%, rgba(28,72,117,.55), transparent 70%), var(--deep)}

.tag{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}

/* ---------- Chargement ---------- */
.loader{position:fixed; inset:0; z-index:180; display:none; place-items:center; background:var(--abyss)}
.js .loader{display:grid}
.js.seen .loader{display:none}
.loader-inner{display:grid; justify-items:center; gap:22px}
.loader-mark{width:84px; height:84px; fill:none; stroke:var(--cyan); stroke-width:2}
.loader-mark rect{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.3s var(--ease) forwards}
.loader-mark rect + rect{animation-delay:.25s}
@keyframes draw{to{stroke-dashoffset:0}}
.loader-count{font-family:var(--display); font-weight:800; font-size:clamp(64px, 12vw, 160px); line-height:.9; letter-spacing:-.05em; overflow:hidden; font-variant-numeric:tabular-nums}
.loader-lbl{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2)}
.loaded .loader{pointer-events:none}

/* ---------- Barre de navigation ---------- */
.hud{position:fixed; top:0; left:0; right:0; z-index:100; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:18px var(--pad);}
.hud::before{content:""; position:absolute; inset:0 0 -24px; z-index:-1; background:linear-gradient(180deg, rgba(0,23,47,.94) 40%, rgba(0,23,47,0)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); pointer-events:none}
.hud-logo{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.02em}
.hud-chapter{display:inline-flex; gap:10px; white-space:nowrap; overflow:hidden; max-width:40vw; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.hud-chapter .hc-num{color:var(--cyan)}
.hud-right{display:flex; align-items:center; justify-content:flex-end; gap:10px}
.hud-menu{display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 16px; border-radius:100px; border:1px solid var(--line2); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); transition:border-color .2s, color .2s}
.hud-menu:hover{border-color:var(--cyan); color:var(--ink)}
kbd{display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:6px; border:1px solid var(--line2); background:rgba(255,255,255,.04); font-family:var(--mono); font-size:11px; color:var(--ink2)}
.hud-cta{display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:100px; background:var(--grad); color:var(--deep); font-weight:800; font-size:13px; letter-spacing:.02em; text-transform:uppercase; transition:translate .3s var(--ease), box-shadow .3s}
.hud-cta:hover{box-shadow:0 12px 30px -10px rgba(0,209,178,.7)}
.progress{position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent}
.progress i{display:block; height:100%; background:var(--grad); transform-origin:0 50%; transform:scaleX(0)}

/* ---------- Boutons et liens ---------- */
.btn-x{position:relative; display:inline-flex; align-items:center; gap:14px; height:58px; padding:0 10px 0 26px; border-radius:100px; overflow:hidden; isolation:isolate;
  background:var(--grad); color:var(--deep); font-weight:800; font-size:14px; letter-spacing:.04em; text-transform:uppercase; transition:translate .35s var(--ease), box-shadow .3s}
.btn-x i{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--deep); color:var(--cyan); font-style:normal; font-size:16px; transition:transform .4s var(--ease)}
.btn-x::before{content:""; position:absolute; inset:0; z-index:-1; background:#fff; transform:translateY(101%); transition:transform .5s var(--ease)}
.btn-x:hover::before{transform:none}
.btn-x:hover i{transform:rotate(-45deg)}
.btn-x:hover{box-shadow:0 18px 40px -14px rgba(0,209,178,.8)}
.btn-x.big{height:74px; padding-left:34px; font-size:16px}
.btn-x.big i{width:54px; height:54px; font-size:20px}
.btn-x.as-span{pointer-events:none}
.link-x{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 0; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.link-x::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--cyan); transform:scaleX(.25); transform-origin:0 50%; transition:transform .5s var(--ease)}
.link-x:hover::after{transform:scaleX(1)}

/* ---------- 01 · Intro ---------- */
.intro{position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; padding:110px var(--pad) 34px}
/* Accueil : le nom de la société rappelé au-dessus du titre (prend la ligne extensible, le titre reste collé dessous). */
.intro:has(.intro-brand){grid-template-rows:auto 1fr auto auto}
.intro-brand{align-self:end; display:flex; align-items:center; gap:.42em; margin:6vh 0 0; font-family:var(--display); font-weight:700; font-size:clamp(26px, 2.6vw, 46px); line-height:1; letter-spacing:.02em}
.intro-brand-mark{width:1.05em; height:1.05em; flex:none}
.intro-brand + .intro-title{margin-top:2.4vh}
.intro-top{display:flex; flex-wrap:wrap; gap:8px 34px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.intro-top .tag{color:var(--cyan)}
.intro-tags{margin-left:auto}
.intro-title{align-self:end; margin:6vh 0 4vh; font-family:var(--display); font-weight:700; font-size:clamp(46px, 7.6vw, 150px); line-height:.9; letter-spacing:-.045em}
.intro-title em{font-size:1.08em; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em}
/* Masque vertical seulement : les lignes montent de sous leur cadre sans être rognées en largeur. */
.line{display:block; overflow-x:visible; overflow-y:clip; padding-bottom:.08em; margin-bottom:-.08em}
.ln{display:inline-block; white-space:nowrap}
.js .ln{transform:translateY(110%)}
.intro-bottom{display:grid; grid-template-columns:minmax(0,1.1fr) auto auto; align-items:end; gap:24px 56px}
.intro-sub{margin:0; max-width:44ch; font-size:clamp(16px, 1.25vw, 19px); color:var(--ink2)}
.intro-cta{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.scroll-cue{display:grid; justify-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2)}
.scroll-cue i{width:1px; height:56px; background:linear-gradient(var(--cyan), transparent); transform-origin:50% 0; animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)} 50%{transform:scaleY(1); transform-origin:50% 0} 51%{transform-origin:50% 100%} 100%{transform:scaleY(0); transform-origin:50% 100%}}
.gl-fallback{position:absolute; right:4vw; top:22vh; width:min(36vw, 520px); height:auto; z-index:-1; filter:drop-shadow(0 40px 80px rgba(0,209,178,.35)); animation:float 9s ease-in-out infinite}
.js .gl-fallback, .has-gl .gl-fallback{display:none}
.js.no-gl .gl-fallback{display:block}
@keyframes float{50%{transform:translateY(-18px) rotate(3deg)}}

/* ---------- Bandeau géant ---------- */
.mega{position:relative; overflow:hidden; padding:4vh 0; border-block:1px solid var(--line)}
.mega-track{display:flex; align-items:center; gap:4vw; width:max-content; animation:mega 38s linear infinite; will-change:transform}
.mega span{font-family:var(--display); font-weight:800; font-size:clamp(56px, 11vw, 200px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; white-space:nowrap}
.mega span.o{color:transparent; -webkit-text-stroke:1.5px rgba(125,239,214,.55)}
.mega b{font-size:clamp(28px, 4vw, 70px); color:var(--cyan); font-weight:400}
@keyframes mega{to{transform:translateX(-50%)}}

/* ---------- 02 · Manifeste ---------- */
.manifesto{min-height:110vh; display:grid; align-content:center; gap:5vh; padding:16vh var(--pad)}
.mani-text{margin:0; max-width:22ch; font-family:var(--display); font-weight:600; font-size:clamp(34px, 5.2vw, 96px); line-height:1.02; letter-spacing:-.035em}
.mani-text em{color:var(--mint)}
.js .mani-text .w{opacity:.14; transition:none}

/* ---------- 03 · Expertises : panneau épinglé, sculpture à droite ---------- */
.xp{position:relative}
.xp-pin{padding:12vh var(--pad); display:grid; gap:5vh}
.xp-head{display:flex; align-items:baseline; justify-content:space-between; max-width:640px}
.xp-panels{display:grid; gap:12vh; max-width:640px}
.xp-panel h2{margin:14px 0 18px; font-family:var(--display); font-weight:700; font-size:clamp(34px, 4.3vw, 72px); line-height:.98; letter-spacing:-.04em}
.xp-panel h2 em{color:var(--mint)}
.xp-panel p{margin:0; max-width:46ch; font-size:18px; color:var(--ink2)}
.xp-kicker{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan)}
.xp-panel ul{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.xp-panel li{display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); font-size:16px}
.xp-panel li::before{content:"↳"; font-family:var(--mono); color:var(--cyan)}
.xp-links{display:flex; flex-wrap:wrap; gap:4px 28px; margin-top:20px}
/* Les panneaux se lisent l'un après l'autre ; celui qui passe au centre de l'écran
   s'éclaire et donne sa forme à la sculpture. */
.js .xp-panel{opacity:.28; transition:opacity .7s var(--ease)}
.js .xp-panel.is-active{opacity:1}
@media (min-width:901px){
  .xp-panels{gap:0}
  .xp-panel{min-height:78vh; display:grid; align-content:center}
}

/* ---------- 04 · Workflow interactif ---------- */
.wf{padding:16vh var(--pad); display:grid; gap:5vh}
.wf-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:16px 6vw; align-items:end}
.wf-head .tag{grid-column:1 / -1}
.wf-head h2, .pj-head h2, .method-aside h2{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(40px, 5.6vw, 104px); line-height:.94; letter-spacing:-.045em}
.wf-head h2 em, .pj-head h2 em, .method-aside h2 em{color:var(--mint)}
.wf-head p{margin:0; font-size:18px; color:var(--ink2); max-width:46ch}
.wf-stage{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px}
.wf-canvas{border-radius:28px; overflow:hidden; border:1px solid var(--line2); background:var(--bg3); min-height:300px}
.wf-console{display:flex; flex-direction:column; border-radius:28px; overflow:hidden; border:1px solid var(--line2); background:var(--abyss); min-height:300px}
.wf-bar{display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--mute)}
.wf-bar i{width:10px; height:10px; border-radius:50%; background:var(--line2)}
.wf-bar span{margin-left:8px}
.wf-bar em{margin-left:auto; font-family:var(--mono); font-style:normal; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan); padding:3px 8px; border:1px solid rgba(0,209,178,.35); border-radius:100px}
.wf-log{list-style:none; margin:0; padding:16px 18px; display:grid; align-content:start; gap:8px; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--ink2); flex:1; overflow:auto; max-height:360px}
.wf-log li{display:grid; grid-template-columns:auto 1fr; gap:12px}
.wf-log time{color:var(--mute)}
.wf-log .ok{color:var(--mint)}
.wf-log .muted{display:block; color:var(--mute)}
.wf-log .caret::after{content:"▍"; color:var(--cyan); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.wf-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.wf-kpis{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:16px 44px}
.wf-kpis li{display:grid; gap:2px; font-size:14px; color:var(--ink2)}
.wf-kpis b{font-family:var(--display); font-weight:800; font-size:clamp(34px, 3.4vw, 54px); letter-spacing:-.04em; line-height:1; color:var(--ink)}
.wf-kpis li:first-child b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
/* Le graphe : nœuds, liens et impulsions */
.flow{width:100%; height:100%}
.flow .dots circle{fill:var(--line2)}
.flow .edge{fill:none; stroke:#2A5585; stroke-width:2}
.flow .edge-run{fill:none; stroke:var(--cyan); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .6s var(--ease)}
.flow .edge-run.is-on{stroke-dashoffset:0}
.flow .node rect, .flow .node path.shape{fill:#0A2547; stroke:#2A5585; stroke-width:1.5; transition:fill .35s, stroke .35s}
.flow .node .ico{color:var(--ink2); transition:color .35s}
.flow .node.is-run rect, .flow .node.is-run path.shape{fill:#0E3A63; stroke:var(--cyan)}
.flow .node.is-done rect, .flow .node.is-done path.shape{fill:url(#fhot); stroke:none}
.flow .node.is-done .ico{color:#00172F}
.flow .node .ok{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.4); transition:opacity .3s, transform .4s var(--ease)}
.flow .node.is-done .ok{opacity:1; transform:none}
.flow .ok circle{fill:var(--cyan)} .flow .ok path{fill:none; stroke:#00172F; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.flow .lbl{font:600 12.5px var(--body); fill:#fff; text-anchor:middle}
.flow .sub{font:500 10px var(--mono); fill:var(--mute); text-anchor:middle}
.flow .tagt{font:500 9.5px var(--mono); fill:var(--ink2)}
.flow .bolt circle{fill:var(--mint)} .flow .bolt path{fill:#00172F}
.flow .pulse{fill:var(--mint); filter:drop-shadow(0 0 6px var(--cyan))}

/* ---------- 05 · Projets : galerie horizontale ---------- */
.pj{position:relative}
.pj-pin{padding:14vh 0 10vh; overflow:hidden}
.pj-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px 40px; padding:0 var(--pad) 6vh}
.pj-head .tag{flex-basis:100%}
.pj-track{display:grid; gap:28px; padding:0 var(--pad)}
.pj-card a{display:grid; gap:20px}
.pj-media{position:relative; aspect-ratio:16/10; border-radius:24px; overflow:hidden; background:var(--bg3); border:1px solid var(--line2)}
.pj-media video, .pj-media > img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s}
.pj-scroll img{height:auto; object-fit:initial; transition:transform 5s cubic-bezier(.45,.05,.35,1)}
.pj-card:hover .pj-scroll img{transform:translateY(calc(-100% + 62%))}
.pj-maia{display:grid; place-items:center; background:radial-gradient(60% 70% at 40% 40%, rgba(0,209,178,.25), transparent 70%), var(--bg3)}
.pj-maia img{width:52%; height:auto; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,209,178,.35)); animation:float 8s ease-in-out infinite}
.pj-maia-kpi{position:absolute; left:24px; bottom:22px; display:grid; gap:4px}
.pj-maia-kpi b{font-family:var(--display); font-weight:800; font-size:56px; letter-spacing:-.04em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.pj-maia-kpi span{font-size:14px; color:var(--ink2)}
.pj-meta{display:grid; grid-template-columns:auto 1fr; gap:4px 20px; align-items:baseline}
.pj-i{grid-row:1 / 4; font-family:var(--serif); font-style:italic; font-size:44px; line-height:1; color:var(--cyan)}
.pj-meta h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(28px, 2.6vw, 44px); letter-spacing:-.035em; line-height:1}
.pj-meta p{margin:0; color:var(--ink2); max-width:48ch}
.pj-tags{display:flex; gap:8px; list-style:none; margin:8px 0 0; padding:0}
.pj-tags li{padding:4px 11px; border-radius:100px; border:1px solid var(--line2); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.pj-next a{display:grid; align-content:center; gap:28px; height:100%; min-height:320px; padding:40px; border-radius:24px; border:1px dashed var(--line2)}
.pj-next-k{font-family:var(--serif); font-style:italic; font-size:44px; color:var(--cyan)}
.pj-next-t{font-family:var(--display); font-weight:700; font-size:clamp(36px, 4vw, 68px); line-height:.98; letter-spacing:-.04em}
.pj-next-t em{color:var(--mint)}
/* Grille de projets (ordinateur) : deux colonnes, la carte « le prochain » en bandeau */
@media (min-width:901px){
  .pj-track{grid-template-columns:repeat(2, minmax(0,1fr)); gap:7vh 3vw}
  .pj-next{grid-column:1 / -1}
  .pj-next a{min-height:0; grid-template-columns:auto 1fr auto; align-items:center; gap:24px 40px}
}

/* ---------- 06 · Chiffres ---------- */
.nums{padding:14vh var(--pad); display:grid; gap:6vh}
.nums ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line)}
.nums li{display:grid; align-content:start; gap:6px; padding:5vh 2vw 0 0; border-left:1px solid var(--line); padding-left:2vw}
.nums li:first-child{border-left:0; padding-left:0}
.nums b{font-family:var(--display); font-weight:800; font-size:clamp(64px, 7.6vw, 150px); line-height:.85; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.nums li:first-child b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nums em{font-size:clamp(24px, 2.2vw, 38px); color:var(--mint)}
.nums span{max-width:22ch; color:var(--ink2); font-size:15px}

/* ---------- 07 · Méthode ---------- */
.method{padding:14vh var(--pad); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:8vw}
.method-aside{align-self:start; position:sticky; top:120px; display:grid; gap:24px}
.method-aside p{margin:0; color:var(--ink2); font-size:18px; max-width:44ch}
.method-eng{font-family:var(--mono); font-size:12px !important; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan) !important; padding-top:20px; border-top:1px solid var(--line)}
.method-steps{position:relative; padding-left:44px}
.method-line{position:absolute; left:6px; top:12px; bottom:12px; width:2px; height:calc(100% - 24px); overflow:visible}
.method-line path{fill:none; stroke:var(--cyan); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke}
.method-steps::before{content:""; position:absolute; left:6px; top:12px; bottom:12px; width:2px; background:var(--line)}
.method-steps ol{list-style:none; margin:0; padding:0; display:grid; gap:12vh}
.method-steps li{position:relative}
.method-steps li::before{content:""; position:absolute; left:-44px; top:14px; width:14px; height:14px; border-radius:50%; background:var(--deep); border:2px solid var(--cyan); box-shadow:0 0 0 6px var(--deep)}
.ms-n{font-family:var(--serif); font-style:italic; font-size:clamp(56px, 6vw, 110px); line-height:.9; color:var(--cyan)}
.method-steps h3{margin:12px 0 10px; font-family:var(--display); font-weight:700; font-size:clamp(26px, 2.4vw, 40px); letter-spacing:-.03em; line-height:1.05}
.method-steps p{margin:0; color:var(--ink2); max-width:48ch; font-size:17px}

/* ---------- 08 · Avis ---------- */
.quotes{padding:16vh var(--pad); display:grid; gap:6vh}
.q-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.q-tabs{display:inline-flex; padding:5px; border-radius:100px; border:1px solid var(--line2); gap:4px}
.q-tabs button{height:40px; padding:0 18px; border-radius:100px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink2); transition:background .3s, color .3s}
.q-tabs button[aria-selected="true"]{background:var(--grad); color:var(--deep); font-weight:500}
.q{margin:0; display:grid; gap:5vh}
.q blockquote{margin:0; font-family:var(--serif); font-size:clamp(38px, 5.4vw, 104px); line-height:1.02; letter-spacing:-.02em; max-width:20ch}
.q blockquote em{color:var(--mint)}
.q figcaption{display:flex; align-items:center; gap:20px}
.q figcaption img{width:72px; height:72px; border-radius:50%; object-fit:cover}
.q-logo{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--bg3); border:1px solid var(--line2)}
.q-logo img{width:78% !important; height:auto !important; border-radius:0 !important; filter:invert(1)}
.q figcaption span{display:grid; gap:2px; color:var(--ink2); font-size:15px}
.q figcaption b{font-family:var(--display); font-size:22px; color:var(--ink); letter-spacing:-.02em}
.q[hidden]{display:none}
.q.is-active blockquote{animation:qin .9s var(--ease)}
@keyframes qin{from{opacity:0; transform:translateY(30px)}}

/* ---------- 09 · Contact ---------- */
.contact{min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); align-content:center; justify-items:center; text-align:center; gap:4vh; padding:16vh var(--pad) 10vh}
.contact-title{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(72px, 14vw, 290px); line-height:.8; letter-spacing:-.07em; display:flex; flex-wrap:wrap; justify-content:center}
.contact-title span{display:inline-block; will-change:transform}
.contact-title em{font-weight:400; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em}
.contact-sub{margin:0; max-width:52ch; color:var(--ink2); font-size:19px}
.contact-actions{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px}
.copy-mail{display:inline-flex; align-items:center; gap:14px; height:74px; padding:0 14px 0 28px; border-radius:100px; border:1px solid var(--line2); font-family:var(--mono); font-size:15px; transition:border-color .3s, background .3s}
.copy-mail small{padding:8px 12px; border-radius:100px; background:rgba(255,255,255,.06); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.copy-mail:hover{border-color:var(--cyan); background:rgba(0,209,178,.06)}
.contact-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin-top:4vh; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.contact-meta a:hover{color:var(--cyan)}


/* ---------- Transitions entre pages (navigateurs qui savent le faire) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.45s var(--ease) both vtOut}
::view-transition-new(root){animation:.65s var(--ease) both vtIn}
@keyframes vtOut{to{opacity:0; transform:translateY(-24px); filter:blur(6px)}}
@keyframes vtIn{from{opacity:0; transform:translateY(24px); filter:blur(6px)}}

/* ---------- Pages intérieures ---------- */
.crumb{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.crumb a{padding:8px 0; color:var(--ink2)} .crumb a:hover{color:var(--cyan)}
.crumb [aria-current]{color:var(--cyan)}
.page-hero{min-height:92svh}
.page-hero .intro-title{font-size:clamp(44px, 7vw, 132px)}
.hero-line{grid-column:1 / -1; margin:22px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mint)}
.page-hero .hero-line{position:absolute; left:var(--pad); top:150px}

.sec{position:relative; padding:14vh var(--pad); display:grid; gap:7vh}
.sec-head{display:grid; gap:18px; max-width:1100px}
.sec-head h2{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(38px, 5.2vw, 96px); line-height:.95; letter-spacing:-.045em}
.sec-head.wide h2{font-size:clamp(34px, 4.4vw, 80px); max-width:20ch}
.sec-head h2 em{color:var(--mint)}
.sec-head p{margin:0; max-width:56ch; font-size:18px; color:var(--ink2)}

/* Cartes à filet, numérotées */
.cards-x{display:grid; gap:0; border-top:1px solid var(--line)}
.cards-x.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.cards-x.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.cards-x.four{grid-template-columns:repeat(4, minmax(0,1fr))}
.card-x{position:relative; display:grid; align-content:start; gap:12px; padding:34px 30px 40px 0; border-bottom:1px solid var(--line); transition:background .4s}
.cards-x .card-x + .card-x{padding-left:30px; border-left:1px solid var(--line)}
.cards-x.two .card-x:nth-child(2n+1), .cards-x.three .card-x:nth-child(3n+1), .cards-x.four .card-x:nth-child(4n+1){padding-left:0; border-left:0}
.card-x::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.card-x:hover::before{transform:scaleX(1)}
.cx-n{font-family:var(--serif); font-style:italic; font-size:38px; line-height:1; color:var(--cyan)}
.cx-when{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint)}
.card-x h3{margin:6px 0 0; font-family:var(--display); font-weight:700; font-size:clamp(22px, 1.9vw, 30px); line-height:1.05; letter-spacing:-.03em}
.card-x p{margin:0; color:var(--ink2); font-size:16px}
.card-x a, .note-x a, .split-txt p a:not(.link-x){color:var(--mint); text-decoration:underline; text-underline-offset:3px}

/* Liste à flèches, commune aux pages */
.arrows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.arrows li{position:relative; padding:13px 0 13px 28px; border-bottom:1px solid var(--line); font-size:16px; color:var(--ink2)}
.arrows li::before{content:"↳"; position:absolute; left:0; top:13px; font-family:var(--mono); color:var(--cyan)}
.arrows b{color:var(--ink)}

/* Offres */
.plans-x{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch}
.plan-x{position:relative; display:flex; flex-direction:column; gap:16px; padding:34px 30px; border-radius:26px; border:1px solid var(--line2); background:rgba(3,35,74,.45); backdrop-filter:blur(6px)}
.plan-x h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(26px, 2.2vw, 36px); letter-spacing:-.035em; line-height:1}
.plan-x > p{margin:0; color:var(--ink2)}
.plan-x .arrows{flex:1}
.plan-x .btn-x{align-self:flex-start}
.plan-x.is-hot{border-color:transparent; background:linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; border:1.5px solid transparent; box-shadow:0 30px 90px -30px rgba(0,209,178,.45)}
.plan-badge{position:absolute; top:-14px; left:30px; padding:6px 12px; border-radius:100px; background:var(--grad); color:var(--deep); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase}
.btn-x.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line2)}
.btn-x.ghost i{background:rgba(255,255,255,.06); color:var(--cyan)}
.btn-x.ghost::before{background:var(--grad)}
.btn-x.ghost:hover{color:var(--deep)}
.aside-x{margin:0; max-width:60ch; color:var(--ink2); font-size:16px}
.aside-x b{color:var(--ink)}

/* Comparatif */
.cmp-x{overflow-x:auto; border-top:1px solid var(--line)}
.cmp-x table{width:100%; min-width:620px; border-collapse:collapse}
.cmp-x th, .cmp-x td{padding:24px 20px 24px 0; text-align:left; border-bottom:1px solid var(--line); font-size:clamp(16px, 1.3vw, 20px); color:var(--ink2); vertical-align:top}
.cmp-x thead th{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.cmp-x tbody th{font-weight:500; color:var(--ink)}
.cmp-x .us{color:var(--ink); font-family:var(--display); font-weight:700; letter-spacing:-.02em}
.cmp-x thead .us{color:var(--cyan); font-family:var(--mono)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Études de cas */
.case-x{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:5vw; align-items:center; padding:7vh 0; border-top:1px solid var(--line)}
.case-x.rev .case-x-media{order:2}
.case-x-media{position:relative; aspect-ratio:16/10; border-radius:26px; overflow:hidden; border:1px solid var(--line2); background:var(--bg3)}
.case-x-media > video{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.case-x-body{display:grid; gap:14px; align-content:start}
.case-x-body h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(36px, 4vw, 72px); letter-spacing:-.045em; line-height:.95}
.case-x-body .pj-i{font-size:52px}
.case-x-lead{margin:0; font-size:20px; color:var(--ink); font-weight:600}
.case-x-body > p{margin:0; color:var(--ink2)}
.case-x-body .link-x{justify-self:start}
.mia-win{position:absolute; inset:7% 16% 0 6%; border-radius:16px 16px 0 0; overflow:hidden; background:#F1F0EE; box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.mia-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 14px; background:var(--carbon)}
.mia-bar i{width:9px; height:9px; border-radius:50%; background:#454545}
.mia-bar span{margin-left:8px; padding:2px 10px; border-radius:100px; background:#454545; color:#A8A8A8; font-family:var(--mono); font-size:10.5px}
.mia-view{position:absolute; inset:30px 0 0; overflow:hidden; container-type:size}
.mia-view img{width:100%; height:auto; transition:transform 6s cubic-bezier(.45,.05,.35,1)}
.case-x:hover .mia-view img{transform:translateY(calc(-100% + 100cqh))}
.mia-phone{position:absolute; right:4%; bottom:-6%; width:22%; aspect-ratio:390 / 844; overflow:hidden; border-radius:20px; border:5px solid var(--carbon); background:#F1F0EE; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); transition:transform .8s var(--ease)}
.case-x:hover .mia-phone{transform:translateY(-14px) rotate(-3deg)}
.case-x-media .pj-maia{position:absolute; inset:0}

/* Projets à venir */
.soon-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3vw}
.soon-x{display:grid; gap:12px}
.soon-x h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(28px, 2.6vw, 44px); letter-spacing:-.035em}
.soon-x p{margin:0; color:var(--ink2)}
.soon-x .pj-i{font-size:44px}
.soon-x-media{position:relative; aspect-ratio:16/10; display:grid; place-items:center; border-radius:26px; border:1px dashed var(--line2); background:radial-gradient(60% 70% at 50% 40%, rgba(0,209,178,.12), transparent 70%), var(--bg3); overflow:hidden}
.sk-win{width:66%; border-radius:14px; overflow:hidden; border:1.5px dashed var(--line2); background:var(--deep)}
.sk-body{display:grid; gap:12px; padding:18px}
.sk-body i{display:block; height:10px; border-radius:100px; background:var(--line); animation:skp 1.8s ease-in-out infinite}
.sk-body .w40{width:40%} .sk-body .w60{width:60%} .sk-body .w80{width:80%}
.sk-body span{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.sk-body span i{height:44px; border-radius:10px}
.sk-body span i.on{background:rgba(0,209,178,.28)}
@keyframes skp{50%{opacity:.45}}
.soon-pill{position:absolute; right:7%; top:10%; padding:9px 16px; border-radius:14px; background:var(--grad); color:var(--deep); font-weight:800; font-size:14px; transform:rotate(4deg)}

/* Texte + visuel */
.split-x{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:6vw; align-items:center}
.split-x.rev .split-txt{order:2}
.split-txt{display:grid; gap:20px}
.split-txt h2{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(34px, 4.2vw, 76px); line-height:.96; letter-spacing:-.045em}
.split-txt h2 em{color:var(--mint)}
.split-txt p{margin:0; max-width:56ch; color:var(--ink2); font-size:17px}
.split-txt b{color:var(--ink)}
.note-x{padding:18px 22px; border-left:2px solid var(--cyan); background:rgba(0,209,178,.06); border-radius:0 16px 16px 0}
.files-x{position:relative; min-height:380px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:14px}
.files-x span{padding:12px 18px; border-radius:14px; border:1.5px dashed var(--line2); background:var(--deep); font-family:var(--mono); font-size:13px; color:var(--ink2)}
.files-x span:nth-child(odd){transform:rotate(-4deg)} .files-x span:nth-child(even){transform:rotate(3deg)}
.files-x b{flex-basis:100%; text-align:center; margin-top:18px; padding:16px 22px; border-radius:16px; background:var(--grad); color:var(--deep); font-family:var(--display); font-size:22px; letter-spacing:-.02em; transform:rotate(-2deg); box-shadow:0 24px 60px -20px rgba(0,209,178,.6)}
.chat-x{display:grid; gap:14px; padding:34px; border-radius:26px; border:1px solid var(--line2); background:rgba(3,35,74,.5)}
.cx-q{justify-self:end; max-width:80%; padding:14px 18px; border-radius:18px 18px 6px 18px; background:var(--deep); border:1px solid var(--line2)}
.cx-a{max-width:88%; padding:16px 18px; border-radius:18px 18px 18px 6px; border:1px solid rgba(0,209,178,.4); background:var(--panel); color:var(--ink2)}
.cx-a b{color:var(--ink)}
.cx-src{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.cx-src span{padding:4px 10px; border-radius:100px; background:rgba(0,209,178,.14); color:var(--mint); font-family:var(--mono); font-size:11px}
.cx-ok{justify-self:start; padding:10px 16px; border-radius:14px; background:var(--grad); color:var(--deep); font-weight:800; transform:rotate(-2deg)}
.shot-x{margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}

/* Écran « vidéo à venir » */
.screen-x{position:relative; margin:0; aspect-ratio:16/9; border-radius:28px; overflow:hidden; display:grid; place-items:center; border:1px solid rgba(0,209,178,.35);
  background:radial-gradient(55% 65% at 50% 42%, rgba(0,209,178,.16), transparent 70%), linear-gradient(180deg, #03234A, #00152B);
  box-shadow:0 0 0 1px rgba(125,239,214,.2), 0 30px 140px -30px rgba(0,209,178,.5)}
.screen-x::after{content:""; position:absolute; left:0; right:0; top:-30%; height:30%; background:linear-gradient(180deg, transparent, rgba(0,209,178,.1) 80%, rgba(125,239,214,.3) 99%, transparent); animation:scan 5.5s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes scan{to{top:110%}}
.screen-x > img{width:min(26%, 300px); margin-bottom:9%; filter:drop-shadow(0 30px 50px rgba(0,209,178,.35)); animation:float 9s ease-in-out infinite}
.screen-x-hud{position:absolute; inset:22px 26px; display:grid; grid-template-columns:1fr 1fr; align-content:space-between; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2)}
.screen-x-hud span:nth-child(even){text-align:right}
.screen-x-hud .rec{display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:blink 1.6s steps(1) infinite}
.screen-x figcaption{position:absolute; left:0; right:0; bottom:13%; display:grid; justify-items:center; gap:10px; text-align:center}
.screen-x-t{font-family:var(--display); font-weight:700; font-size:clamp(22px, 2.8vw, 44px); letter-spacing:-.035em}
.screen-x-t em{color:var(--mint)}

/* Équipe et bureau */
.team-x{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid var(--line)}
.member-x{display:grid; align-content:start; gap:12px; padding:34px 30px 34px 0; border-bottom:1px solid var(--line)}
.member-x + .member-x{padding-left:30px; border-left:1px solid var(--line)}
.mx-ini{font-family:var(--display); font-weight:800; font-size:clamp(70px, 8vw, 140px); line-height:.85; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px var(--mint)}
.member-x h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(22px, 1.9vw, 30px); letter-spacing:-.03em}
.member-x p{margin:0; color:var(--ink2)}
.office-x{display:grid; gap:6px; justify-items:start}
.office-x b{font-family:var(--display); font-weight:800; font-size:clamp(80px, 11vw, 200px); line-height:.85; letter-spacing:-.06em}
.office-x .clock.big{font-family:var(--display); font-weight:700; font-size:clamp(64px, 8vw, 150px); line-height:.9; letter-spacing:-.05em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums}
.office-x address{margin-top:14px; font-style:normal; color:var(--ink2)}

/* Grande liste de liens */
.biglinks{display:grid; border-top:1px solid var(--line)}
.biglinks a{display:grid; grid-template-columns:auto 1fr auto auto; align-items:baseline; gap:10px 30px; padding:26px 0; border-bottom:1px solid var(--line); transition:padding .5s var(--ease), color .3s}
.biglinks b{font-family:var(--display); font-weight:700; font-size:clamp(30px, 4.2vw, 76px); letter-spacing:-.045em; line-height:1}
.biglinks small{color:var(--ink2); font-size:15px}
.biglinks i{font-style:normal; font-size:28px; color:var(--cyan); transition:transform .5s var(--ease)}
.biglinks a:hover{padding-left:24px; color:var(--mint)}
.biglinks a:hover i{transform:translateX(10px) rotate(-45deg)}
.biglinks.small a{grid-template-columns:1fr auto; padding:16px 0}
.biglinks.small b{font-size:clamp(24px, 2.6vw, 40px)}

/* FAQ */
.fq-list{border-top:1px solid var(--line)}
.fq-list details{border-bottom:1px solid var(--line)}
.fq-list summary{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:24px; padding:26px 0; cursor:pointer; list-style:none}
.fq-list summary::-webkit-details-marker{display:none}
.fq-n{font-family:var(--serif); font-style:italic; font-size:28px; color:var(--cyan)}
.fq-q{font-family:var(--display); font-weight:700; font-size:clamp(20px, 2vw, 32px); letter-spacing:-.03em; line-height:1.15}
.fq-list summary i{position:relative; width:30px; height:30px; border-radius:50%; border:1px solid var(--line2); transition:transform .5s var(--ease), background .3s}
.fq-list summary i::before, .fq-list summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--cyan)}
.fq-list summary i::after{transform:rotate(90deg)}
.fq-list details[open] summary i{transform:rotate(45deg); background:rgba(0,209,178,.12)}
.fq-a{padding:0 0 30px 64px; max-width:78ch; color:var(--ink2); font-size:17px}
.fq-a p{margin:0}
.fq-list details[open] .fq-a{animation:fqin .6s var(--ease)}
@keyframes fqin{from{opacity:0; transform:translateY(-8px)}}

/* Bandeau « Parlons-en » en fin de page */
.cta-x{position:relative; display:grid; justify-items:center; gap:3vh; padding:18vh var(--pad); text-align:center}
.cta-x-title{display:flex; flex-wrap:wrap; justify-content:center; font-family:var(--display); font-weight:800; font-size:clamp(64px, 12vw, 230px); line-height:.82; letter-spacing:-.07em; transition:letter-spacing .8s var(--ease)}
.cta-x-title em{font-weight:400; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.05em}
.cta-x-title:hover{letter-spacing:-.05em}
.cta-x p{margin:0; max-width:52ch; color:var(--ink2); font-size:18px}

/* Contact */
.page-contact{min-height:100svh; padding-top:130px}
.rdv-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:5vw; align-items:start}
.rdv-side{display:grid; gap:22px; position:sticky; top:110px}
.rdv-side h2{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(36px, 4vw, 72px); letter-spacing:-.045em; line-height:.95}
.rdv-side h2 em{color:var(--mint)}
.rdv-meta{display:grid; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)}
.rdv-meta a:hover{color:var(--cyan)}
.cal-x{position:relative; min-height:760px; border-radius:28px; overflow:hidden; border:1px solid var(--line2); background:var(--panel); display:grid}
.cal-x > *{grid-area:1 / 1}
.cal-x-wait{display:grid; place-content:center; justify-items:center; gap:20px}
.cal-x .calendly-inline-widget{width:100%; height:760px; position:relative; z-index:1}

/* 404 */
.err-x{grid-template-rows:auto auto auto; align-content:center; gap:5vh}
.err-x .intro-title{margin:0}

/* ---------- Bandeau des clients ---------- */
.logos{position:relative; padding:9vh 0; border-block:1px solid var(--line); overflow:hidden}
.logos-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:0 var(--pad) 5vh}
.logos-band{-webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.logos-track{display:flex; align-items:center; gap:clamp(56px, 11vw, 200px); width:max-content; margin:0; padding:0; list-style:none; animation:mega 42s linear infinite}
.logos-track li{display:flex; align-items:center; color:var(--ink2); transition:color .4s, opacity .4s}
.logos-track li{opacity:.78}
.logos-track li:hover{opacity:1; color:var(--ink)}
.lg{display:inline-flex; align-items:center; gap:16px}
.lg img{height:clamp(48px, 6vw, 92px); width:auto}
.lg-peak{height:clamp(56px, 7vw, 108px); width:auto}
.lg-estampe{font-family:var(--body); font-weight:600; font-size:clamp(40px, 5vw, 78px); letter-spacing:-.04em; line-height:1}
.lg-estampe-mark{width:clamp(40px, 5vw, 76px); height:auto}

/* ---------- Pied de page ---------- */
.foot{position:relative; z-index:1; padding:10vh var(--pad) 28px; border-top:1px solid var(--line); background:linear-gradient(180deg, transparent, rgba(0,15,32,.7))}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:8vh}
.foot-brand p{margin:18px 0 0; color:var(--ink2); max-width:30ch}
.foot nav, .foot-contact{display:grid; align-content:start; gap:4px}
.foot nav .tag, .foot-contact .tag{margin-bottom:12px}
.foot nav a, .foot-contact a{padding:6px 0; color:var(--ink2); transition:color .2s}
.foot nav a:hover, .foot-contact a:hover{color:var(--cyan)}
.foot-contact > span:not(.tag){color:var(--ink2); font-size:15px}
.foot-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 30px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink2)}
.foot-bot nav{display:flex; gap:20px}
.foot-bot a{padding:6px 0}
.foot-bot a:hover{color:var(--cyan)}

/* ---------- Palette de commandes ---------- */
.palette{width:min(640px, calc(100vw - 32px)); max-height:min(70vh, 560px); margin:14vh auto auto; padding:0; border:1px solid var(--line2); border-radius:22px; background:rgba(3,35,74,.92); color:var(--ink); backdrop-filter:blur(24px); box-shadow:0 40px 120px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,209,178,.15)}
.palette::backdrop{background:rgba(0,15,32,.55); backdrop-filter:blur(6px)}
.palette[open]{animation:palIn .35s var(--ease)}
@keyframes palIn{from{opacity:0; transform:translateY(-12px) scale(.98)}}
.pal-box{display:flex; flex-direction:column; max-height:inherit}
.pal-in{display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line)}
.pal-in span{font-family:var(--mono); color:var(--cyan); font-size:20px}
.pal-in input{flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink); font-family:var(--body); font-size:18px}
.pal-in input::placeholder{color:var(--mute)}
.pal-list{list-style:none; margin:0; padding:8px; overflow:auto; flex:1}
.pal-list .grp{padding:12px 14px 6px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.pal-list .it{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:12px; cursor:pointer}
.pal-list .it small{font-family:var(--mono); font-size:11px; color:var(--mute)}
.pal-list .it[aria-selected="true"]{background:rgba(0,209,178,.12); color:var(--ink)}
.pal-list .it[aria-selected="true"] small{color:var(--cyan)}
.pal-foot{display:flex; gap:18px; padding:12px 22px; border-top:1px solid var(--line); font-size:12px; color:var(--mute)}
.pal-foot kbd{margin-right:4px}

/* ---------- Curseur ---------- */
.cursor{display:none}
.has-cursor, .has-cursor *{cursor:none !important}
.has-cursor .cursor{display:block}
.c-dot, .c-ring{position:fixed; left:0; top:0; z-index:190; pointer-events:none; border-radius:50%}
.c-dot{width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--cyan)}
.c-ring{display:grid; place-items:center; width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(125,239,214,.6); transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, border-color .3s}
.c-ring span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--deep); opacity:0; transition:opacity .2s}
.cursor.is-hover .c-ring{width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--cyan); background:rgba(0,209,178,.08)}
.cursor.is-label .c-ring{width:96px; height:96px; margin:-48px 0 0 -48px; background:var(--cyan); border-color:var(--cyan)}
.cursor.is-label .c-ring span{opacity:1}
.cursor.is-label .c-dot{opacity:0}

.toast{position:fixed; left:50%; bottom:28px; z-index:170; transform:translate(-50%, calc(100% + 48px)); padding:14px 22px; border-radius:100px; background:var(--grad); color:var(--deep); font-weight:700; font-size:14px; transition:transform .5s var(--ease)}
.toast.is-on{transform:translate(-50%, 0)}
.beta-tag{position:fixed; right:16px; bottom:16px; z-index:160; margin:0; padding:8px 14px; border-radius:100px; background:#FFD166; color:#2E2E2E; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em}

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .hud{grid-template-columns:1fr auto}
  .hud-chapter, .hud-cta{display:none}
  .intro{padding-top:96px}
  .intro-tags{margin-left:0}
  .intro-title{font-size:clamp(38px, 11.5vw, 96px); max-width:none}
  .ln{white-space:normal}
  .intro-bottom{grid-template-columns:1fr}
  .scroll-cue{display:none}
  .gl-fallback{width:58vw; right:-6vw; top:16vh; opacity:.5}
  .wf-head, .wf-stage, .method{grid-template-columns:1fr}
  .method-aside{position:static}
  .nums ul{grid-template-columns:repeat(2, minmax(0,1fr))}
  .nums li:nth-child(3){border-left:0; padding-left:0}
  .nums li{padding-bottom:4vh}
  .pj-track{gap:56px}
  .contact-title{font-size:17vw}
  .btn-x.big, .copy-mail{height:62px}
  .beta-tag{font-size:10px; right:8px; bottom:8px}
  .page-hero .hero-line{position:static}
  .cards-x.two, .cards-x.three, .cards-x.four, .team-x, .plans-x, .soon-grid, .split-x, .case-x, .rdv-grid, .foot-grid{grid-template-columns:1fr}
  .cards-x .card-x + .card-x, .member-x + .member-x{padding-left:0; border-left:0}
  .case-x.rev .case-x-media, .split-x.rev .split-txt{order:0}
  .rdv-side{position:static}
  .biglinks a{grid-template-columns:auto 1fr auto}
  .biglinks small{display:none}
  .fq-a{padding-left:0}
  .cal-x{min-height:680px}
  .files-x{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  .js .ln{transform:none}
  .js .mani-text .w{opacity:1}
  .js .loader{display:none}
  body::after{animation:none}
}

@media (hover: none), (pointer: coarse){ .foot-k{display:none} }

/* Comparatif sur téléphone : chaque critère devient une carte, les deux réponses côte à côte. */
@media (max-width: 640px){
  .cmp-x table{min-width:0}
  .cmp-x thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .cmp-x tbody, .cmp-x tr{display:block}
  .cmp-x tr{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; padding:20px 0; border-bottom:1px solid var(--line)}
  .cmp-x th, .cmp-x td{display:block; padding:0; border:0}
  .cmp-x tbody th{grid-column:1 / -1; font-size:17px; margin-bottom:4px}
  .cmp-x td::before{content:attr(data-label); display:block; margin-bottom:4px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); font-weight:400}
  .cmp-x td.us::before{color:var(--cyan)}
}

/* ==========================================================================
   Version « lisible » : sur ordinateur (> 900 px), toute la typographie est
   ramenée d'environ un quart et les espaces verticaux suivent. Le mobile
   (≤ 900 px) garde exactement les réglages de la carte blanche.
   ========================================================================== */
@media (min-width:901px){
  /* Hero */
  .intro-title{font-size:clamp(44px, 5.4vw, 100px)}
  .page-hero .intro-title{font-size:clamp(42px, 5vw, 92px)}
  .intro-brand{font-size:clamp(22px, 1.9vw, 34px); margin-top:5vh}
  .intro-sub{font-size:clamp(15px, 1.05vw, 17px)}
  .scroll-cue i{height:44px}

  /* Titres de sections */
  .mani-text{font-size:clamp(30px, 3.6vw, 64px); max-width:24ch}
  .wf-head h2, .pj-head h2, .method-aside h2{font-size:clamp(34px, 3.9vw, 72px)}
  .sec-head h2{font-size:clamp(34px, 3.7vw, 68px)}
  .sec-head.wide h2{font-size:clamp(30px, 3.2vw, 58px)}
  .xp-panel h2{font-size:clamp(30px, 3vw, 52px); margin:12px 0 14px}
  .split-txt h2{font-size:clamp(30px, 3.1vw, 56px)}
  .case-x-body h3{font-size:clamp(30px, 3vw, 52px)}
  .rdv-side h2{font-size:clamp(32px, 3vw, 54px)}
  .pj-meta h3{font-size:clamp(24px, 2vw, 34px)}
  .pj-next-t{font-size:clamp(30px, 3vw, 50px)}
  .soon-x h3{font-size:clamp(24px, 2vw, 34px)}
  .method-steps h3{font-size:clamp(22px, 1.9vw, 31px)}
  .card-x h3, .member-x h3{font-size:clamp(20px, 1.6vw, 25px)}
  .plan-x h3{font-size:clamp(22px, 1.8vw, 30px)}
  .screen-x-t{font-size:clamp(20px, 2.1vw, 34px)}
  .fq-q{font-size:clamp(18px, 1.5vw, 24px)}
  .q blockquote{font-size:clamp(32px, 3.8vw, 70px)}
  .q figcaption b{font-size:20px}

  /* Très grands caractères */
  .contact-title{font-size:clamp(64px, 10vw, 200px)}
  .cta-x-title{font-size:clamp(60px, 9vw, 170px)}
  .nums b{font-size:clamp(52px, 5.4vw, 104px)}
  .nums em{font-size:clamp(20px, 1.7vw, 30px)}
  .office-x b{font-size:clamp(64px, 8vw, 144px)}
  .office-x .clock.big{font-size:clamp(54px, 6vw, 110px)}
  .mx-ini{font-size:clamp(60px, 6vw, 104px)}
  .biglinks b{font-size:clamp(26px, 3vw, 54px)}
  .biglinks.small b{font-size:clamp(22px, 2vw, 32px)}
  .biglinks i{font-size:24px}
  .wf-kpis b{font-size:clamp(28px, 2.5vw, 42px)}
  .pj-maia-kpi b{font-size:44px}
  .ms-n{font-size:clamp(44px, 4.2vw, 76px)}
  .pj-i, .pj-next-k, .soon-x .pj-i{font-size:36px}
  .case-x-body .pj-i{font-size:42px}
  .cx-n{font-size:32px}
  .fq-n{font-size:24px}

  /* Texte courant */
  .xp-panel p, .wf-head p, .sec-head p, .method-aside p, .cta-x p{font-size:16.5px}
  .contact-sub{font-size:17px}
  .method-steps p, .split-txt p, .fq-a{font-size:16px}
  .case-x-lead{font-size:18px}
  .xp-panel li, .card-x p, .arrows li, .aside-x{font-size:15.5px}
  .xp-panel li{padding:11px 0}
  .nums span, .q figcaption span, .biglinks small, .wf-kpis li{font-size:14px}
  .cmp-x th, .cmp-x td{font-size:clamp(15px, 1.1vw, 17px); padding:20px 18px 20px 0}
  .fq-a{padding:0 0 26px 52px}

  /* Logos clients */
  .lg img{height:clamp(44px, 4.6vw, 72px)}
  .lg-peak{height:clamp(50px, 5.4vw, 84px)}
  .lg-estampe{font-size:clamp(36px, 3.8vw, 60px)}
  .lg-estampe-mark{width:clamp(36px, 3.8vw, 58px)}

  /* Espaces : nettement resserrés entre les blocs */
  .page-hero{min-height:80svh}
  .manifesto{min-height:68vh; gap:3vh; padding:8vh var(--pad)}
  .xp-pin{padding:7vh var(--pad); gap:3vh}
  .xp-panels{gap:5vh; max-width:580px}
  .xp-panel{min-height:58vh}
  .wf, .quotes{padding:8vh var(--pad); gap:3.5vh}
  .wf-head{gap:12px 5vw}
  .pj-pin{padding:8vh 0 5vh}
  .pj-head{padding:0 var(--pad) 3.5vh}
  .pj-track{gap:4.5vh 3vw}
  .nums{padding:8vh var(--pad); gap:3.5vh}
  .nums li{padding-top:3vh}
  .method{padding:8vh var(--pad); gap:5vw}
  .method-steps ol{gap:6vh}
  .q{gap:3vh}
  .sec{padding:8vh var(--pad); gap:4.5vh}
  .case-x{padding:4.5vh 0}
  .contact{gap:2.5vh; padding:11vh var(--pad) 6vh}
  .cta-x{padding:10vh var(--pad); gap:2vh}
  .logos{padding:5vh 0}
  .logos-head{padding:0 var(--pad) 3vh}
  .foot{padding:6vh var(--pad) 28px}
}

/* ==========================================================================
   Version « lisible » · hero recomposé sur ordinateur (toutes les pages).
   Le bloc nom + titre + texte + boutons est centré dans la hauteur de l'écran
   (au lieu d'être collé en bas, ce qui laissait un grand vide en haut à
   gauche) ; la sculpture lui fait face à droite. Mobile inchangé.
   ========================================================================== */
@media (min-width:901px){
  .intro:not(.err-x){grid-template-rows:auto minmax(4vh, 1fr) auto auto auto auto minmax(4vh, 1.15fr); padding-bottom:40px}
  .intro:not(.err-x) > .intro-top{grid-row:1}
  .intro-brand{grid-row:3; align-self:auto; margin:0 0 2.6vh}
  .intro:not(.err-x) > .intro-title{grid-row:4; align-self:auto; margin:0; font-size:clamp(46px, 5.9vw, 106px)}
  .page-hero.intro > .intro-title{font-size:clamp(44px, 5.5vw, 98px)}
  .intro-brand + .intro-title{margin-top:0}
  .intro:not(.err-x) > .intro-bottom{grid-row:5; display:grid; grid-template-columns:minmax(0, 1fr); justify-items:start; gap:3.4vh; margin-top:4vh}
  .intro:not(.err-x) .intro-sub{max-width:46ch; font-size:clamp(16px, 1.15vw, 18px)}
  .intro:not(.err-x) .scroll-cue{position:absolute; right:var(--pad); bottom:40px}
  .page-hero .hero-line{grid-row:6; position:static; margin:3.2vh 0 0}
  .page-hero{min-height:86svh}
}

/* ==========================================================================
   Avis de l'accueil : carrousel simple, centré, qui tourne tout seul.
   Les diapositives sont empilées (même case de grille) : la hauteur est celle
   de l'avis le plus long, rien ne saute pendant le fondu.
   ========================================================================== */
.testi{position:relative; display:grid; justify-items:center; gap:4.5vh; padding:12vh var(--pad); text-align:center}
.testi-stage{width:min(860px, 100%); display:grid; justify-items:center; gap:clamp(28px, 5vh, 44px)}
.testi-track{display:grid; width:100%}
.testi-slide{grid-area:1 / 1; margin:0; display:grid; justify-items:center; align-content:center; gap:26px; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .8s var(--ease), transform .8s var(--ease), visibility 0s .8s}
.testi-slide.is-active{opacity:1; visibility:visible; transform:none; transition:opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s, visibility 0s}
.testi-slide blockquote{margin:0; max-width:32ch; font-family:var(--serif); font-size:clamp(24px, 2.4vw, 38px); line-height:1.22; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.testi-slide blockquote em{color:var(--mint)}
.testi-slide figcaption{display:flex; align-items:center; gap:14px; text-align:left}
.testi-slide figcaption > img{width:52px; height:52px; border-radius:50%; object-fit:cover}
.testi-slide .q-logo{width:52px; height:52px}
.testi-slide figcaption > span:last-child{display:grid; gap:1px; color:var(--ink2); font-size:14px}
.testi-slide figcaption b{font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.testi-nav{display:flex; align-items:center; gap:18px}
.testi-arrow{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line2); color:var(--ink2); font-size:16px; transition:border-color .3s, color .3s}
.testi-arrow:hover, .testi-arrow:focus-visible{border-color:var(--cyan); color:var(--ink)}
.testi-dots{display:flex; gap:8px}
.testi-dots button{display:grid; align-items:center; width:44px; height:44px}
.testi-dots i{display:block; height:3px; border-radius:3px; background:var(--line2); overflow:hidden}
.testi-dots i::after{content:""; display:block; height:100%; width:0; background:var(--grad)}
.testi-dots [aria-current="true"] i::after{width:100%}
.testi.is-auto .testi-dots [aria-current="true"] i::after{width:0; animation:testiFill var(--testi-dur, 7s) linear forwards}
@keyframes testiFill{to{width:100%}}
@media (max-width:900px){ .testi{padding:9vh var(--pad); gap:3.5vh} .testi-slide{gap:20px} }
@media (prefers-reduced-motion:reduce){ .testi-slide, .testi-slide.is-active{transition:none; transform:none} }

/* ==========================================================================
   Menu classique (remplace l'indicateur de chapitre et le bouton ⌘K ;
   le raccourci ⌘K reste disponible au clavier).
   ========================================================================== */
.hud-nav{display:flex; align-items:center; gap:4px}
.hud-nav > a, .dd-btn{position:relative; display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 15px; border-radius:100px; font-family:var(--body); font-weight:600; font-size:14.5px; color:var(--ink2); transition:color .25s, background .25s}
.hud-nav > a:hover, .dd-btn:hover, .dd.is-open .dd-btn{color:var(--ink); background:rgba(255,255,255,.05)}
.hud-nav > a[aria-current="page"], .dd.is-current .dd-btn{color:var(--ink)}
.hud-nav > a[aria-current="page"]::after, .dd.is-current .dd-btn::after{content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--cyan)}
.dd-btn svg{transition:transform .3s var(--ease)}
.dd.is-open .dd-btn svg{transform:rotate(180deg)}
.dd{position:relative}
.dd-panel{position:absolute; top:calc(100% + 12px); left:50%; width:440px; margin-left:-220px; padding:8px; display:grid; gap:2px; border-radius:20px; border:1px solid var(--line2); background:rgba(3,35,74,.97); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s}
.dd-panel::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.dd.is-open .dd-panel{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .3s var(--ease), visibility 0s}
@media (hover:hover) and (pointer:fine){ .dd:hover .dd-panel{opacity:1; visibility:visible; transform:none; transition:opacity .25s, transform .3s var(--ease), visibility 0s} .dd:hover .dd-btn svg{transform:rotate(180deg)} }
.dd-panel a{display:grid; grid-template-columns:38px 1fr; column-gap:14px; align-items:center; padding:10px 12px; border-radius:14px; transition:background .2s}
.dd-panel a:hover, .dd-panel a:focus-visible, .dd-panel a[aria-current="page"]{background:rgba(255,255,255,.06)}
.dd-ico{grid-row:1 / 3; display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:rgba(0,209,178,.12); color:var(--cyan)}
.dd-panel b{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink)}
.dd-panel small{font-size:13px; color:var(--ink2)}
.hud-burger{display:none; align-items:center; gap:12px; height:42px; padding:0 16px 0 18px; border-radius:100px; border:1px solid var(--line2); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.hud-burger i{position:relative; width:16px; height:8px}
.hud-burger i::before, .hud-burger i::after{content:""; position:absolute; left:0; right:0; height:1.5px; border-radius:2px; background:currentColor; transition:transform .35s var(--ease), top .35s var(--ease)}
.hud-burger i::before{top:0} .hud-burger i::after{top:6.5px}
.hud-burger[aria-expanded="true"] i::before{top:3.25px; transform:rotate(45deg)}
.hud-burger[aria-expanded="true"] i::after{top:3.25px; transform:rotate(-45deg)}
.mnav{position:fixed; inset:0; z-index:99; display:grid; align-content:start; gap:14px; padding:96px var(--pad) 40px; overflow-y:auto; background:var(--deep); opacity:0; transition:opacity .3s}
.mnav.is-open{opacity:1}
.mnav[hidden]{display:none}
.mnav .tag{margin-top:14px}
.mnav-xp, .mnav-main{display:grid}
.mnav-xp a, .mnav-main a{padding:10px 0; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.025em; color:var(--ink)}
.mnav a[aria-current="page"]{color:var(--cyan)}
.mnav .btn-x{justify-self:start; margin-top:22px}
.menu-open, .menu-open body{overflow:hidden}
@media (max-width:1080px) and (min-width:901px){ .hud-nav > a, .dd-btn{padding:0 11px; font-size:14px} .hud-cta{padding:0 16px; font-size:12px} }
@media (max-width:900px){ .hud-nav{display:none} .hud-burger{display:inline-flex} }

/* Bandeau clients « discret » (accueil, avant les avis) : sans filets, une seule mention centrée. */
.logos.discret{border-block:0; padding:7vh 0 5vh}
.logos.discret .logos-head{justify-content:center; margin:0; padding:0 var(--pad) 3.5vh}
.logos.discret .logos-head .tag{color:var(--mute); font-size:11px; letter-spacing:.14em}
.logos.discret .lg img{height:clamp(40px, 4vw, 64px)}
.logos.discret .lg-peak{height:clamp(46px, 4.6vw, 74px)}
.logos.discret .lg-estampe{font-size:clamp(32px, 3.3vw, 52px)}
.logos.discret .lg-estampe-mark{width:clamp(32px, 3.3vw, 50px)}

/* Vidéo de présentation (page SaaS) : cadre réduit et centré */
.video-x{margin:0 auto; width:min(880px, 100%); display:grid; gap:16px}
.video-x-frame{position:relative; aspect-ratio:16 / 9; border-radius:22px; overflow:hidden; border:1px solid var(--line2); background:var(--abyss); box-shadow:0 40px 90px -40px rgba(0,209,178,.35)}
.video-x video{display:block; width:100%; height:100%; object-fit:cover}
.video-x-play{position:absolute; left:50%; top:50%; display:grid; place-items:center; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%; background:var(--grad); color:var(--deep); box-shadow:0 18px 40px -12px rgba(0,209,178,.7); transition:transform .4s var(--ease)}
.video-x-play svg{margin-left:4px}
.video-x-play:hover{transform:scale(1.08)}
.video-x.is-playing .video-x-play{opacity:0; pointer-events:none}
.video-x figcaption{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; font-size:14.5px; color:var(--ink2)}
@media (max-width:900px){ .video-x-frame{border-radius:16px} .video-x-play{width:62px; height:62px; margin:-31px 0 0 -31px} }

/* Adresse, heure de Lyon et réseaux (accueil et page Contact) en cyan ; survol en blanc. */
.contact-meta, .rdv-meta{color:var(--cyan)}
.contact-meta a:hover, .rdv-meta a:hover{color:var(--ink)}

/* Prix des offres SaaS (seule page du site avec des prix) */
.plan-price{margin:4px 0 2px; font-family:var(--body); font-weight:800; font-size:clamp(32px, 2.6vw, 42px); line-height:1; letter-spacing:-.035em; color:var(--ink); font-variant-numeric:tabular-nums}
.plan-x.is-hot > .plan-price{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.plan-x > .plan-price.is-quote{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--mint)}
.plan-x > .plan-price{color:var(--ink)}

/* ==========================================================================
   Essai d'aplats (respirations) en teintes douces : une section par page.
   <html data-aplat="nuit|perle|menthe"> ; sans attribut, aucun aplat.
   ========================================================================== */
[data-aplat-on] [data-aplat]{position:relative; z-index:1; margin-inline:clamp(8px, 1.2vw, 20px); border-radius:clamp(22px, 2.4vw, 36px)}
/* 1 · Bleu nuit éclairci : on reste en sombre, une marche plus claire */
[data-aplat-on="nuit"] [data-aplat]{background:linear-gradient(180deg, #0A3360, #072B52); border:1px solid #1C4875; --line:#1E4A78; --line2:#2A5888}
[data-aplat-on="nuit"] [data-aplat] .method-steps li::before{background:#082F59; box-shadow:0 0 0 6px #082F59}
/* 2 · Gris perle et 3 · Menthe pâle : clairs mais adoucis */
[data-aplat-on="perle"] [data-aplat], [data-aplat-on="menthe"] [data-aplat]{color-scheme:light; color:var(--ink)}
[data-aplat-on="perle"] [data-aplat]{background:#E4EAF1; --ink:#0B2440; --ink2:#43607A; --mute:#62798F; --line:#C9D4DF; --line2:#B7C5D3; --bg3:#D7E0EA; --cyan:#00806F; --mint:#007F70}
[data-aplat-on="menthe"] [data-aplat]{background:#D9EFEA; --ink:#05283A; --ink2:#335C62; --mute:#557A7E; --line:#B9DDD5; --line2:#A3D0C6; --bg3:#C8E7E0; --cyan:#007A69; --mint:#00796A}
[data-aplat-on="perle"] [data-aplat] .method-steps li::before{background:#E4EAF1; box-shadow:0 0 0 6px #E4EAF1}
[data-aplat-on="menthe"] [data-aplat] .method-steps li::before{background:#D9EFEA; box-shadow:0 0 0 6px #D9EFEA}
[data-aplat-on="perle"] [data-aplat] .q-logo img, [data-aplat-on="menthe"] [data-aplat] .q-logo img{filter:none}
[data-aplat-on="perle"] [data-aplat] .link-x, [data-aplat-on="menthe"] [data-aplat] .link-x{color:var(--ink)}
.aplat-toggle{position:fixed; left:16px; bottom:16px; z-index:160; padding:8px 14px; border-radius:100px; border:1px solid var(--line2); background:rgba(0,23,47,.92); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.aplat-toggle b{color:#2FE0C4; font-weight:500}
@media (max-width:900px){ .aplat-toggle{font-size:10px; left:8px; bottom:8px} }

/* Réalisations « Applications métier » : Taido et Régie avec leur film */
.film-x{display:grid; align-content:start; gap:12px}
.film-x h3{margin:0; font-family:var(--display); font-weight:700; font-size:clamp(28px, 2.6vw, 44px); letter-spacing:-.035em}
.film-x > p{margin:0; color:var(--ink2); max-width:56ch}
.film-x .pj-i{font-size:44px}
.film-x-media{position:relative; aspect-ratio:16 / 9; margin-bottom:10px; border-radius:24px; overflow:hidden; border:1px solid var(--line2); background:var(--abyss)}
.film-x-media video{display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.film-x.is-playing .film-x-media video, [data-film].is-playing .case-x-media > video{transform:none}
.film-x-play{position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 8px; border-radius:100px; background:rgba(0,15,32,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:13.5px; transition:background .3s, opacity .3s}
.film-x-play i{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--grad); color:var(--deep); font-style:normal; font-size:11px}
.film-x-play:hover{background:rgba(0,15,32,.92)}
[data-film].is-playing .film-x-play{opacity:0; pointer-events:none}
@media (max-width:900px){ .film-x-play{left:12px; bottom:12px} }

/* ---------- Curseur : variantes (html[data-cursor-mode]) ---------- */
[data-cursor-mode="classique"] .cursor{display:none !important}
/* Point seul : grossit sur les éléments cliquables, sans anneau ni étiquette */
[data-cursor-mode="point"] .c-ring{display:none}
[data-cursor-mode="point"] .c-dot{width:10px; height:10px; margin:-5px 0 0 -5px; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s}
[data-cursor-mode="point"] .cursor.is-hover .c-dot, [data-cursor-mode="point"] .cursor.is-label .c-dot{width:26px; height:26px; margin:-13px 0 0 -13px; opacity:.55}
/* Halo : curseur du système + lueur douce qui suit */
[data-cursor-mode="halo"] .cursor{display:block}
[data-cursor-mode="halo"] .c-dot{display:none}
[data-cursor-mode="halo"] .c-ring{width:260px; height:260px; margin:-130px 0 0 -130px; border:0; background:radial-gradient(closest-side, rgba(0,209,178,.16), rgba(0,209,178,0)); z-index:0}
[data-cursor-mode="halo"] .c-ring span{display:none}
[data-cursor-mode="halo"] .cursor.is-hover .c-ring, [data-cursor-mode="halo"] .cursor.is-label .c-ring{width:260px; height:260px; margin:-130px 0 0 -130px; background:radial-gradient(closest-side, rgba(0,209,178,.26), rgba(0,209,178,0))}
.cursor-toggle{position:fixed; left:16px; bottom:56px; z-index:160; padding:8px 14px; border-radius:100px; border:1px solid var(--line2); background:rgba(0,23,47,.92); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.cursor-toggle b{color:#2FE0C4; font-weight:500}
.cursor-toggle[hidden]{display:none}

/* ==========================================================================
   Mobile (≤ 900 px) : rythme vertical resserré.
   Les marges en vh et les hauteurs d'écran minimales pensées pour l'ordinateur
   laissaient jusqu'à 300 px de vide entre deux sections sur téléphone.
   Échelle : 64 px entre sections, 32 à 40 px entre groupes, 14 à 20 px dans un groupe.
   L'ordinateur (> 900 px) n'est pas concerné.
   ========================================================================== */
@media (max-width:900px){
  /* En-têtes : l'accueil garde un plein écran (première impression), les pages intérieures s'ajustent au contenu */
  .intro{padding-bottom:40px}
  .page-hero{min-height:0}
  .page-hero .intro-title{margin:56px 0 24px}
  .intro-bottom{gap:22px}

  /* Sections */
  .sec{padding:64px var(--pad); gap:36px}
  .sec-head{gap:14px}
  .manifesto{min-height:0; padding:64px var(--pad); gap:18px}
  .xp-pin{padding:64px var(--pad) 32px; gap:28px}
  .xp-panels{gap:56px}
  .xp-panel{min-height:0}
  .wf, .quotes{padding:64px var(--pad); gap:28px}
  .wf-head{gap:14px}
  .pj-pin{padding:64px 0 40px}
  .pj-head{padding:0 var(--pad) 28px}
  .nums{padding:64px var(--pad); gap:28px}
  .method{padding:64px var(--pad); gap:40px}
  .method-steps ol{gap:44px}
  .q{gap:24px}
  .testi{padding:56px var(--pad); gap:24px}
  .case-x{padding:36px 0; gap:24px}
  .cards-x .card-x{padding-top:26px; padding-bottom:28px}
  .logos{padding:40px 0}
  .logos-head{padding:0 var(--pad) 22px}
  .logos.discret{padding:40px 0 28px}

  /* Contact et appel à l'action : plus de plein écran pour deux lignes */
  .contact{min-height:0; padding:72px var(--pad) 56px; gap:22px}
  .page-contact{min-height:0; padding-top:112px}
  .contact-meta{margin-top:12px}
  .cta-x{padding:72px var(--pad); gap:18px}
  .err-x{gap:32px}

  /* Pied de page : les deux listes de liens côte à côte */
  .foot{padding:56px var(--pad) 28px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px 20px; padding-bottom:36px}
  .foot-brand, .foot-contact{grid-column:1 / -1}
}

/* « Voir le film » partout : cartes de l'accueil et cadre de présentation */
.pj-card[data-film]{display:grid; gap:20px; align-content:start}
.pj-card[data-film] .pj-media, .video-x-frame{position:relative}
.pj-card[data-film].is-playing .pj-media video{transform:none}
.video-x .film-x-play{left:20px; bottom:20px}

/* Téléphone du site de Mickaël Iachini : le site mobile défile, comme la fenêtre d'ordinateur */
.mia-phone-view{position:absolute; inset:0; overflow:hidden; container-type:size}
.mia-phone-view img{display:block; width:100%; height:auto; transition:transform 6s cubic-bezier(.45,.05,.35,1)}
.case-x:hover .mia-phone-view img{transform:translateY(calc(-100% + 100cqh))}
/* Accueil : la carte du projet reprend la même mise en scène (fenêtre + téléphone), au survol de la carte */
.pj-card:hover .mia-view img, .pj-card:hover .mia-phone-view img{transform:translateY(calc(-100% + 100cqh))}
.pj-card:hover .mia-phone{transform:translateY(-14px) rotate(-3deg)}
/* Écrans tactiles (pas de survol) : le site défile seul, lentement, en aller-retour, tant qu'il est à l'écran
   (classe is-inview posée par alt.js, comme l'aperçu des vidéos) ; il repart du haut quand on y revient.
   Pages Projets et Sites web : fenêtre d'ordinateur + téléphone ; accueil : la carte du projet. */
@media (hover:none){
  .pj-scroll{container-type:size}
  .is-inview .mia-view img, .pj-scroll.is-inview img{animation:miaScroll 16s cubic-bezier(.45,.05,.35,1) .6s infinite alternate}
  .is-inview .mia-phone-view img{animation:miaScroll 14s cubic-bezier(.45,.05,.35,1) 1s infinite alternate}
}
@keyframes miaScroll{0%, 8%{transform:none} 92%, 100%{transform:translateY(calc(-100% + 100cqh))}}
@media (prefers-reduced-motion:reduce){ .mia-view img, .mia-phone-view img{animation:none !important; transition:none} }
.shot-x img{display:block; width:100%; height:auto}

/* ==========================================================================
   Essai : présentation des offres (section Expertises de l'accueil).
   html[data-offres="g"] grille 2×2 + sculpture en fond ; "i" grille 2×2 + icônes 3D.
   html[data-titres="n"] : le nom de l'expertise devient le titre, l'accroche passe dessous.
   ========================================================================== */
.xp-title, .xp-ico, .xp-name{display:none}
[data-offres="g"] .xp-head, [data-offres="i"] .xp-head{display:grid; gap:14px; max-width:none}
[data-offres="g"] .xp-title, [data-offres="i"] .xp-title{display:block; margin:0; font-family:var(--display); font-weight:700; font-size:clamp(32px, 3.4vw, 60px); line-height:1; letter-spacing:-.04em}
.xp-title em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--mint)}
[data-offres="g"] .xp-panels, [data-offres="i"] .xp-panels{max-width:none; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px}
[data-offres="g"] .xp-panel, [data-offres="i"] .xp-panel{position:relative; min-height:0; display:block; opacity:1; padding:34px 34px 30px; border:1px solid var(--line2); border-radius:24px; background:linear-gradient(160deg, rgba(6,46,89,.42), rgba(3,35,74,.16)); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transition:border-color .4s, transform .5s var(--ease)}
[data-offres="g"] .xp-panel:hover, [data-offres="i"] .xp-panel:hover, [data-offres="g"] .xp-panel:focus-within, [data-offres="i"] .xp-panel:focus-within{border-color:rgba(0,209,178,.55); transform:translateY(-4px)}
[data-offres="g"] .xp-panel h2, [data-offres="i"] .xp-panel h2{font-size:clamp(24px, 2.1vw, 34px); margin:12px 0; max-width:20ch}
[data-offres="g"] .xp-panel p, [data-offres="i"] .xp-panel p{font-size:15.5px}
[data-offres="g"] .xp-panel ul, [data-offres="i"] .xp-panel ul{margin-top:20px}
[data-offres="g"] .xp-panel li, [data-offres="i"] .xp-panel li{font-size:14.5px; padding:9px 0}
[data-offres="i"] .xp-ico{display:block; position:absolute; top:22px; right:22px; width:92px; height:92px; filter:drop-shadow(0 18px 30px rgba(0,209,178,.28)); transition:transform .6s var(--ease)}
[data-offres="i"] .xp-panel:hover .xp-ico{transform:translateY(-4px) rotate(-4deg)}
[data-offres="i"] .xp-panel h2{padding-right:96px}
/* Nom de l'expertise en avant */
[data-titres="n"] .xp-kicker{display:none}
[data-titres="n"] .xp-name{display:flex; align-items:baseline; gap:14px; margin:0; font-family:var(--display); font-weight:700; font-size:clamp(38px, 4vw, 70px); line-height:1; letter-spacing:-.04em; color:var(--ink)}
.xp-num{font-family:var(--mono); font-weight:400; font-size:13px; letter-spacing:.08em; color:var(--cyan); transform:translateY(-.2em)}
[data-titres="n"] .xp-panel h2{margin:14px 0; font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(21px, 1.8vw, 29px); line-height:1.2; letter-spacing:-.005em; color:var(--ink2); max-width:30ch}
[data-titres="n"] .xp-panel h2 em{color:var(--mint)}
[data-titres="n"][data-offres="g"] .xp-name, [data-titres="n"][data-offres="i"] .xp-name{font-size:clamp(30px, 2.6vw, 44px)}
[data-titres="n"][data-offres="g"] .xp-panel h2, [data-titres="n"][data-offres="i"] .xp-panel h2{font-size:clamp(19px, 1.45vw, 23px); margin:10px 0 12px; padding-right:0; max-width:34ch}
[data-titres="n"][data-offres="i"] .xp-name{padding-right:100px}
@media (max-width:900px){
  [data-offres="g"] .xp-panels, [data-offres="i"] .xp-panels{grid-template-columns:minmax(0, 1fr)}
  [data-offres="g"] .xp-panel, [data-offres="i"] .xp-panel{padding:26px 22px}
  [data-offres="i"] .xp-ico{width:64px; height:64px; top:18px; right:16px}
  [data-offres="i"] .xp-panel h2, [data-titres="n"][data-offres="i"] .xp-name{padding-right:70px}
  [data-titres="n"] .xp-name{font-size:clamp(32px, 9vw, 44px)}
}
.offres-toggle, .titres-toggle{position:fixed; left:16px; z-index:160; padding:8px 14px; border-radius:100px; border:1px solid var(--line2); background:rgba(0,23,47,.92); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.offres-toggle{bottom:96px} .titres-toggle{bottom:136px}
.offres-toggle b, .titres-toggle b{color:#2FE0C4; font-weight:500}
@media (max-width:900px){ .offres-toggle, .titres-toggle, .cursor-toggle{font-size:10px; left:8px} .offres-toggle{bottom:48px} .titres-toggle{bottom:88px} }

/* Hero de l'accueil sans ligne d'infos ni logo : titre et bas de hero gardent leur place dans la grille */
.intro > .intro-title{grid-row:2}
.intro > .intro-bottom{grid-row:3}
@media (max-width:900px){ .page-hero .hero-line{grid-row:4} }
.titres-toggle{bottom:16px}
@media (max-width:900px){ .titres-toggle{bottom:8px} }

/* Projets de l'accueil : trois par ligne sur grand écran, la carte « Le prochain » reste en bandeau */
@media (min-width:1101px){
  .pj-track{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5vh 2vw}
  .pj-card a, .pj-card[data-film]{gap:16px}
  .pj-meta{gap:4px 14px}
  .pj-meta h3{font-size:clamp(22px, 1.75vw, 30px)}
  .pj-meta p{font-size:15px}
  .pj-meta .pj-i{font-size:30px}
  .pj-card .film-x-play{left:12px; bottom:12px; height:38px; font-size:12.5px; padding:0 14px 0 6px}
  .pj-card .film-x-play i{width:26px; height:26px}
}

/* Encart MAIA : fond teinté menthe pour se détacher du bleu nuit du site */
.pj-maia{background:radial-gradient(70% 80% at 70% 30%, rgba(125,239,214,.35), transparent 65%), linear-gradient(150deg, #0F6A78 0%, #0B4F70 45%, #0A3560 100%); border-color:rgba(125,239,214,.35)}
.pj-maia-kpi span{color:#D3F5EE}
/* Ancres des projets : arrivée sous la barre du haut */
.sec [id]:empty{scroll-margin-top:96px}

/* Encart MAIA : mini workflow animé à la place de l'icône 3D, chiffre-clé en bas à gauche */
.pj-maia{place-items:stretch}
.maia-flow{position:absolute; inset:8% 6% 24% 6%}
.maia-flow .flow{width:100%; height:100%}
.flow-mini .node rect, .flow-mini .node path.shape{fill:rgba(0,23,47,.55); stroke:rgba(125,239,214,.45)}
.flow-mini .node .ico{color:#D3F5EE}
.flow-mini .edge{stroke:rgba(125,239,214,.3)}
.flow-mini .edge-run{stroke:#7DEFD6}
.flow-mini .lbl{font-size:13.5px}
.flow-mini .sub{fill:#9FD9CF; font-size:10.5px}
.pj-maia .pj-maia-kpi{left:22px; bottom:18px}
.pj-maia .pj-maia-kpi b{font-size:clamp(34px, 3vw, 46px)}
@media (max-width:900px){ .maia-flow{inset:6% 3% 26% 3%} .flow-mini .sub{display:none} }
/* Chiffre-clé en étiquette en haut, workflow dessous : plus de chevauchement */
.pj-maia .maia-flow{inset:20% 5% 5% 5%}
.pj-maia .pj-maia-kpi{left:20px; top:18px; bottom:auto; display:flex; align-items:baseline; gap:10px; padding:8px 14px; border-radius:100px; background:rgba(0,23,47,.45); border:1px solid rgba(125,239,214,.3)}
.pj-maia .pj-maia-kpi b{font-size:22px; letter-spacing:-.02em}
.pj-maia .pj-maia-kpi span{font-size:13px}
@media (max-width:900px){ .pj-maia .maia-flow{inset:22% 3% 4% 3%} .pj-maia .pj-maia-kpi{left:12px; top:12px; padding:6px 12px} .pj-maia .pj-maia-kpi b{font-size:18px} .pj-maia .pj-maia-kpi span{font-size:12px} }

/* ==========================================================================
   Projets : type de projet mis en avant (mêmes mots que le menu Expertises)
   ========================================================================== */
/* 1 · Étiquette principale au-dessus du nom, en turquoise avec l'icône de l'expertise */
.pj-kind{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan)}
.pj-kind svg{flex:none}
.pj-meta .pj-kind{grid-column:2; margin-bottom:2px}
.pj-meta .pj-i{grid-row:1 / 5}
.case-x-body .pj-kind{margin-bottom:-4px}
/* 3 · Détails en texte simple, discrets, séparés par des points */
.pj-tags{display:flex; flex-wrap:wrap; gap:0; margin:6px 0 0}
.pj-tags li{padding:0; border:0; border-radius:0; font-size:11px; letter-spacing:.06em; color:var(--mute)}
.pj-tags li + li::before{content:"·"; margin:0 8px; color:var(--line2)}
@media (max-width:900px){ .sec{grid-template-columns:minmax(0, 1fr)} .biglinks b{overflow-wrap:anywhere} }

/* ==========================================================================
   Langue : bouton ENG / FR (barre du haut sur ordinateur, menu sur mobile)
   Comme sur l'ancien site, le drapeau et le code annoncent la langue VERS laquelle on bascule.
   ========================================================================== */
.lang{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:100px; border:1px solid var(--line2); font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--ink2); transition:border-color .2s, color .2s}
.lang:hover{border-color:var(--cyan); color:var(--ink)}
.lang:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.lang i{width:16px; height:11px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12);
  background:linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 40% 54% no-repeat, repeating-linear-gradient(#b22234 0 14.29%, #fff 14.29% 28.57%)}
html[lang="en"] .lang i{background:linear-gradient(90deg, #2c3e94 33%, #fff 33% 66%, #d5233a 66%)}
.mnav .lang{justify-self:start; margin-top:6px; height:46px; padding:0 18px; font-size:13px; color:var(--ink)}
@media (max-width:900px){ .hud-right .lang{display:none} }
/* Anglais : « Let's » et « talk. » sont deux mots, il leur faut un espace (en français « Parlons-en » est soudé). */
html[lang="en"] .contact-title, html[lang="en"] .cta-x-title{column-gap:.2em}