:root{--ease:cubic-bezier(.2,.8,.2,1)}
/* =========================================================
   LE CONSEIL — « Que dirait… de mon projet ? »
   ========================================================= */
.council{padding:0;overflow:hidden}
.council-in{display:grid;grid-template-columns:1fr 1.05fr;min-height:620px}
.council-ask{padding:40px;border-right:1px solid var(--glass-line);display:flex;flex-direction:column;gap:22px}
.council-ask h3{font-size:30px;letter-spacing:-.04em}
.field{position:relative}
.field textarea{width:100%;min-height:150px;resize:vertical;padding:16px 16px 48px;border-radius:14px;background:var(--glass-in);border:1px solid var(--glass-border);font-size:16px;line-height:1.55;transition:border-color .2s,box-shadow .2s}
.field textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.field textarea::placeholder{color:var(--ink-3)}
.field-tools{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mic{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11.5px;padding:6px 10px;border-radius:8px;background:var(--glass-2);border:1px solid var(--glass-line);color:var(--ink-2)}
.mic svg{width:14px;height:14px}
.mic.rec{color:var(--peach);border-color:color-mix(in srgb,var(--peach) 50%,transparent)}
.mic.rec svg{animation:blink 1s infinite}
.count{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.examples{display:flex;flex-wrap:wrap;gap:8px}
.examples button{font-size:13px;padding:7px 11px;border-radius:9px;background:var(--glass-in);border:1px solid var(--glass-line);color:var(--ink-2);text-align:left;transition:border-color .2s,color .2s}
.examples button:hover{color:var(--ink);border-color:var(--glass-border)}
.label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;display:block}
.voices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.voice{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--glass-in);border:1px solid var(--glass-line);text-align:left;transition:border-color .2s,background .2s,transform .2s}
.voice:hover{transform:translateY(-1px)}
.voice[aria-pressed="true"]{border-color:color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.voice b{display:block;font-size:14px;line-height:1.2}
.voice small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.25}
.voice.all{grid-column:1 / -1;justify-content:center;font-weight:600;font-size:14px}
.avatar{--s:38px;width:var(--s);height:var(--s);border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:calc(var(--s)*.38);letter-spacing:-.02em;position:relative;
  color:color-mix(in srgb,var(--c) 40%,#0A0A10);
  background:radial-gradient(circle at 30% 25%,#fff 0%,var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 0 24px -4px var(--c)}
.avatar.talking::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--c);animation:ring 1.2s ease-out infinite}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.tone{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--glass-in);border:1px solid var(--glass-line)}
.tone button{flex:1;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.tone button[aria-pressed="true"]{background:var(--glass-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--glass-border)}
.council-go{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:auto}
.council-go .btn{flex:1}
.fineprint{font-size:12px;color:var(--ink-3);line-height:1.5}
.fineprint b{color:var(--ink-2);font-weight:500}

.council-out{padding:28px;display:flex;flex-direction:column;gap:14px;contain:size;overflow:auto;scrollbar-width:thin;background:color-mix(in srgb,var(--bg) 40%,transparent)}
.empty{margin:auto;text-align:center;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--ink-2);padding:30px 0}
.wz-orbit{position:relative;width:200px;height:200px}
.wz-orbit .avatar{position:absolute;--s:46px;left:50%;top:50%;margin:-23px 0 0 -23px;
  transform:rotate(calc(var(--i)*45deg)) translate(80px) rotate(calc(var(--i)*-45deg));animation:wzorb 48s linear infinite}
@keyframes wzorb{to{transform:rotate(calc(var(--i)*45deg + 360deg)) translate(80px) rotate(calc(var(--i)*-45deg - 360deg))}}
.wz-orbit .core{position:absolute;inset:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  border:1px dashed var(--glass-border)}
.answer{padding:20px 22px;border-radius:16px;animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.answer header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.answer header b{display:block;font-size:15px}
.answer header small{display:block;font-size:12px;color:var(--ink-3)}
.answer header .acts{margin-left:auto;display:flex;gap:6px}
.answer header .acts button{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--glass-in);border:1px solid var(--glass-line);color:var(--ink-2)}
.answer header .acts button:hover{color:var(--ink)}
.answer header .acts svg{width:15px;height:15px}
.answer .txt{font-size:15.5px;line-height:1.65;color:var(--ink)}
.answer .txt p+p{margin-top:10px}
.answer .txt strong{font-weight:600;color:color-mix(in srgb,var(--c) var(--tint-mix),var(--tint))}
.answer .txt ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:4px}
.answer .wz-caret{display:inline-block;width:8px;height:1.05em;vertical-align:text-bottom;background:var(--c);margin-left:2px;animation:blink .8s infinite;border-radius:1px}
.answer.thinking .txt{color:var(--ink-3);font-family:var(--f-mono);font-size:13px}
.answer .wz-q{margin-top:14px;padding-top:12px;border-top:1px dashed var(--glass-line);font-size:14px;color:var(--ink-2)}
.answer .wz-q b{color:var(--ink);font-weight:600}
.synth{padding:22px;border-radius:16px}
.synth h4{font-size:18px;margin-bottom:12px}
.synth .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.synth .cols div{font-size:14px;color:var(--ink-2)}
.synth .cols b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:500}
.meter{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.meter div{display:grid;grid-template-columns:150px 1fr 38px;gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.meter i{height:6px;border-radius:6px;background:var(--glass-2);overflow:hidden;position:relative}
.meter i::after{content:"";position:absolute;inset:0;width:var(--v);background:linear-gradient(90deg,var(--lav),var(--mint));border-radius:6px;transition:width 1s var(--ease)}
.meter em{font-style:normal;font-family:var(--f-mono);font-size:12px;text-align:right}
.handoff{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.source-note{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.source-note i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}


/* Accueil : entrée vers La Fabrique */
.fab-teaser{display:grid;grid-template-columns:1.05fr 1fr;gap:0;overflow:hidden;padding:0}
.fab-teaser .l{padding:48px;display:flex;flex-direction:column;gap:18px}
.fab-teaser h2{font-size:clamp(32px,3.8vw,50px)}
.fab-teaser form{display:flex;gap:8px;padding:6px;border-radius:14px;background:var(--glass-in);border:1px solid var(--glass-border)}
.fab-teaser input{flex:1;min-width:0;background:transparent;border:0;padding:10px 12px;font-size:15.5px}
.fab-teaser input:focus{outline:none}
.fab-teaser .r{position:relative;min-height:440px;background:radial-gradient(70% 70% at 60% 40%,color-mix(in srgb,var(--lav) 22%,transparent),transparent 70%);border-left:1px solid var(--glass-line);overflow:hidden}
.wz-mini{position:absolute;border-radius:16px;background:#fff;color:#11131A;box-shadow:0 30px 60px -25px rgba(0,0,0,.5);font-size:11px;overflow:hidden}
.wz-mini.d{left:8%;top:14%;width:74%;height:64%;animation:bob 7s ease-in-out infinite}
.wz-mini.p{right:7%;top:30%;width:31%;height:62%;border-radius:22px;border:6px solid #0B0C10;animation:bob 7s 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.wz-mini .bar{height:18px;background:#E9EBF1;display:flex;gap:4px;align-items:center;padding:0 8px}
.wz-mini .bar i{width:6px;height:6px;border-radius:50%;background:#FF5F57}.wz-mini .bar i:nth-child(2){background:#FEBC2E}.wz-mini .bar i:nth-child(3){background:#28C840}
.wz-mini .body{display:grid;grid-template-columns:28% 1fr;height:calc(100% - 18px)}
.wz-mini .sd{background:#F6F7FB;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.wz-mini .sd span{height:7px;border-radius:4px;background:#E2E4EC}
.wz-mini .sd span.on{background:var(--mc,#7C5CFA);opacity:.5}
.wz-mini .ct{padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-content:start}
.wz-mini .ct .hi{grid-column:1/-1;font-weight:700;font-size:12px;letter-spacing:-.02em}
.wz-mini .ct b{border-radius:9px;background:#F1F2F7;padding:7px 8px;font-size:15px;letter-spacing:-.03em;line-height:1.1}
.wz-mini .ct b small{display:block;font-size:8.5px;font-weight:500;color:#7A7F8F;letter-spacing:0}
.wz-mini .ct b.k1{background:var(--mc,#7C5CFA);color:#fff}
.wz-mini .ct b.k1 small{color:rgba(255,255,255,.8)}
.wz-mini .ct em svg{width:100%;height:100%}
.wz-mini .ct em{padding:8px}
.wz-mini .ct .ai{grid-column:1/-1;font-style:normal;font-size:9.5px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--mc) 12%,#fff);border:1px solid color-mix(in srgb,var(--mc) 30%,#fff);color:#2A2D3A}
.wz-mini .ct em{grid-column:1/-1;height:70px;border-radius:9px;background:linear-gradient(180deg,color-mix(in srgb,var(--mc,#7C5CFA) 25%,#fff),#fff);border:1px solid #EEF0F5}
.wz-mini.p .ct{grid-template-columns:1fr 1fr;padding:22px 8px 8px}
.wz-mini.p .ct em{height:60px}
.wz-chip{position:absolute;left:12%;bottom:10%;padding:9px 13px;border-radius:12px;font-family:var(--f-mono);font-size:11.5px;display:flex;gap:8px;align-items:center;animation:bob 6s .6s ease-in-out infinite}
.wz-chip i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
@media (max-width:900px){.fab-teaser{grid-template-columns:1fr}.fab-teaser .r{min-height:320px;border-left:0;border-top:1px solid var(--glass-line)}.fab-teaser .l{padding:30px 22px}}

/* =========================================================
   Ajouts à la base : Le Conseil, La Fabrique, Guides & outils
   (classes préfixées wz- pour ne rien changer au style d'origine)
   ========================================================= */
.wz-sec .council{margin-top:8px}
.wz-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wz-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.wz-card{padding:28px;display:flex;flex-direction:column;gap:12px;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.wz-card:hover{transform:translateY(-3px)}
.wz-card h3{font-size:24px;letter-spacing:-.035em}
.wz-card p{color:var(--ink-2);font-size:15px}
.wz-card .wz-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.wz-card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.wz-card li{font-size:14px;color:var(--ink-2);display:flex;gap:10px}
.wz-card li::before{content:"";width:5px;height:5px;border-radius:1px;margin-top:9px;flex-shrink:0;background:var(--c);box-shadow:0 0 8px 1px var(--c)}
.wz-card .wz-go{margin-top:auto;font-weight:600;font-size:14.5px}
.wz-card .wz-go::after{content:" →";transition:margin .25s}
.wz-card:hover .wz-go::after{margin-left:4px}
.wz-tools .wz-card{padding:20px}
.wz-tools .wz-card h3{font-size:18px}
.wz-head{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}
.avatar{--s:38px}
@media (max-width:1000px){.wz-guides{grid-template-columns:1fr}.wz-tools{grid-template-columns:1fr 1fr}.wz-head{grid-template-columns:1fr;gap:16px}}
@media (max-width:560px){.wz-tools{grid-template-columns:1fr}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.council textarea,.fab-teaser input{font-family:var(--f)}
.council textarea,.fab-teaser input,.council input{color:var(--ink);caret-color:var(--accent)}
.council textarea::placeholder,.fab-teaser input::placeholder{color:var(--ink-3)}
.council textarea,#projet,#dm-projet{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}

/* =========================================================
   Le trajet de votre donnée, en direct (préfixe tr-)
   ========================================================= */
.tr{position:sticky;top:0;z-index:3;padding:14px 16px 12px;border-radius:16px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;
  background:color-mix(in srgb,var(--bg) 78%,transparent)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.tr-head{display:flex;align-items:center;gap:10px}
.tr-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tr-what{font-size:12.5px;color:var(--ink-2);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tr-q{width:22px;height:22px;border-radius:50%;flex-shrink:0;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);background:var(--glass-in);border:1px solid var(--glass-border)}
.tr-q:hover,.tr-q[aria-expanded="true"]{color:var(--ink);border-color:color-mix(in srgb,var(--mint) 55%,var(--glass-border))}
.tr-help{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0}
.tr-help[hidden]{display:none}
.tr-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:relative}
.tr-path::before{content:"";position:absolute;left:12.5%;right:12.5%;top:6px;height:1px;background:linear-gradient(90deg,var(--lav),var(--sky),var(--mint),var(--peach));opacity:.45}
.tr.live .tr-path::after{content:"";position:absolute;top:3px;left:12.5%;width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 2px var(--mint);animation:trpkt 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes trpkt{0%{left:12.5%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(87.5% - 7px);opacity:0}}
.tr-path li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0;position:relative;z-index:1}
.tr-path i{width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--glass-border);transition:all .4s}
.tr-path b{font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.25;transition:color .4s}
.tr-path span{font-family:var(--f-mono);font-size:10.5px;line-height:1.35;color:var(--ink-3);min-height:1.35em;overflow-wrap:anywhere}
.tr-path li.go i{border-color:var(--mint);animation:trpulse 1s ease-in-out infinite}
.tr-path li.on i{background:var(--mint);border-color:var(--mint);box-shadow:0 0 12px -2px var(--mint)}
.tr-path li.on b{color:var(--ink)}
.tr-path li.on span{color:var(--ink-2)}
.tr-path li.off{opacity:.45}
@keyframes trpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 22%,transparent)}}
.tr-foot{margin:0;font-family:var(--f-mono);font-size:10.5px;line-height:1.5;color:var(--ink-3);border-top:1px dashed var(--glass-line);padding-top:8px}
.tr-foot:empty{display:none}
.tr.local .tr-path li.on i{background:var(--butter);border-color:var(--butter);box-shadow:0 0 12px -2px var(--butter)}
@media (max-width:640px){
  .tr-path{grid-template-columns:1fr;gap:6px}
  .tr-path::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--lav),var(--sky),var(--mint),var(--peach))}
  .tr.live .tr-path::after{display:none}
  .tr-path li{display:grid;grid-template-columns:13px auto 1fr;align-items:center;text-align:left;gap:10px}
  .tr-path span{text-align:right}
  .tr-what{display:none}
}
@media (prefers-reduced-motion:reduce){.tr.live .tr-path::after{display:none}.tr-path li.go i{animation:none}}

/* Le Conseil sur tablette et mobile (règles perdues lors du retour à la base) */
@media (max-width:1080px){
  .council-in{grid-template-columns:1fr}
  .council-ask{border-right:0;border-bottom:1px solid var(--glass-line)}
  .council-out{contain:none;max-height:none;overflow:visible}
  .tr{position:relative}
}
@media (max-width:560px){
  .council-ask,.council-out{padding:22px 16px}
  .voices{grid-template-columns:1fr 1fr}
  .voice.all{grid-column:span 2}
  .synth .cols{grid-template-columns:1fr}
  .meter div{grid-template-columns:110px 1fr 34px}
}

/* Menu « Guides » de la barre du haut */
.nav-dd{position:relative;display:inline-flex}
.nav-dd-btn{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:inherit;font-weight:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:inherit;opacity:.85}
.nav-dd-btn svg{width:14px;height:14px;transition:transform .25s}
.nav-dd:hover .nav-dd-btn,.nav-dd.open .nav-dd-btn{opacity:1}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 14px);left:50%;width:340px;translate:-50% 6px;padding:8px;border-radius:18px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s,translate .25s,visibility .2s;z-index:90;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--glass-border);box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd:hover .nav-menu,.nav-dd.open .nav-menu,.nav-dd:focus-within .nav-menu{opacity:1;visibility:visible;translate:-50% 0}
.nav-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;text-align:left;white-space:normal;transition:background .2s}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--glass-2)}
.nav-menu b{font-size:14px;font-weight:600;color:var(--ink)}
.nav-menu small{font-size:12px;color:var(--ink-3);line-height:1.35}
.nav-menu .nav-sep{height:1px;background:var(--glass-line);margin:4px 8px}
.nav-menu .nav-cta b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links .nav-dd-btn{font-size:13.5px;color:rgba(255,255,255,.62);padding:7px 12px;letter-spacing:-.005em;opacity:1;border-radius:999px}
.nav-links .nav-dd-btn:hover,.nav-links .nav-dd.open .nav-dd-btn{color:#fff}
[data-theme="light"] .nav-links .nav-dd-btn{color:rgba(14,16,22,.6)}
[data-theme="light"] .nav-links .nav-dd-btn:hover{color:#0E1016}
.nav-links .nav-menu a{font-size:inherit;color:inherit;padding:10px 12px;letter-spacing:0}

/* Menu « Guides » : version placée hors de la barre */
.nav-menu.nav-menu-fixed{position:fixed;z-index:200;translate:-50% 6px}
.nav-menu.nav-menu-fixed.on{opacity:1;visibility:visible;translate:-50% 0}
.nav-menu.nav-menu-fixed::before{top:-14px;height:14px}
.nav-menu.nav-menu-fixed a{font-size:inherit;color:inherit;padding:10px 12px;letter-spacing:0}

@media (max-width:1180px) and (min-width:561px){.voices{grid-template-columns:repeat(2,1fr)}}
/* 8 membres : deux colonnes lisibles */
.council .voices{grid-template-columns:repeat(2,minmax(0,1fr))}
.council .voice small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.council .voice > span:last-child{min-width:0}

/* Lien néon vers les outils (héros de l'accueil) */
@property --nl-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.neon-link{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:11px 18px 11px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:#fff;isolation:isolate;
  background:rgba(10,10,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px rgba(155,232,212,.55),0 0 18px rgba(155,232,212,.55),0 0 46px rgba(187,168,248,.45),inset 0 0 14px rgba(155,232,212,.18);
  text-shadow:0 0 8px rgba(155,232,212,.8);animation:nlPulse 2.6s ease-in-out infinite;transition:transform .25s}
.neon-link::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--nl-a),#9BE8D4,#BBA8F8,#F8B597,#E2F38E,#9BE8D4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:nlSpin 4s linear infinite;filter:blur(.4px)}
.neon-link i{width:8px;height:8px;border-radius:50%;background:#9BE8D4;box-shadow:0 0 6px #9BE8D4,0 0 14px #9BE8D4;animation:nlBlink 1.4s steps(2) infinite}
.neon-link span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:#0A0A10;background:#9BE8D4;text-shadow:none;box-shadow:0 0 12px #9BE8D4}
.neon-link b{font-weight:600;transition:transform .25s}
.neon-link:hover{transform:translateY(-2px)}
.neon-link:hover b{transform:translateX(4px)}
@keyframes nlSpin{to{--nl-a:360deg}}
@keyframes nlPulse{50%{box-shadow:0 0 0 1px rgba(155,232,212,.8),0 0 26px rgba(155,232,212,.75),0 0 70px rgba(187,168,248,.6),inset 0 0 18px rgba(155,232,212,.25)}}
@keyframes nlBlink{50%{opacity:.35}}
[data-theme="light"] .neon-link{color:#0E1016;background:rgba(255,255,255,.75);text-shadow:none}
@media (prefers-reduced-motion:reduce){.neon-link,.neon-link::before,.neon-link i{animation:none}}
@media (max-width:600px){.neon-link{font-size:13px;flex-wrap:wrap;justify-content:center;text-align:center}}

/* Curseur plus discret */
.cursor-ring{width:16px;height:16px;margin:-8px 0 0 -8px;border-width:1px;border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.cursor-ring.hot{width:28px;height:28px;margin:-14px 0 0 -14px;background:color-mix(in srgb,var(--lav) 12%,transparent)}
.cursor-glow{width:360px;height:360px;margin:-180px 0 0 -180px;opacity:.7}
.council textarea::placeholder,#projet::placeholder,#dm-projet::placeholder{color:var(--ink-3)!important;-webkit-text-fill-color:var(--ink-3)!important;opacity:.8}

/* =========================================================
   Lisibilité : aucun petit texte sous ~12 px à l'écran.
   La base rend le site à 90 % sur ordinateur (--z) : on compense uniquement les petits textes.
   ========================================================= */
.eyebrow,.label,.fq-k,.st-kick,.vs-c,.vs-tag,.db-k,.wz-k,.pi,.ax,.num,.n,.dg-mk,.dg-w,.dg-ck,.fb-k,.fb-hint,.stack-k,.proc-cap,.days-cap,.answered,.private,.ot-meta,.foot-note,.tm-name,.ct-k,.ct-q,.pill,.crumbs,.fineprint,.dm-note,.source-note,.mic,.count,.tag{font-size:max(1em,calc(12px / var(--z,1)))!important}
main dt,main small,main .xsmall,footer h4,footer small{font-size:max(1em,calc(12.5px / var(--z,1)))!important}
main dd,main summary,footer a,footer p,.foot-bottom p{font-size:max(1em,calc(13.5px / var(--z,1)))!important}
.qz-opt,.door-for,.door-go{font-size:max(1em,calc(13px / var(--z,1)))!important}
.door-tag,.vr-bigl,.vr-sub,.pick-q,.brands-note,.ph-badge,.kind,.pillz,.pq-tag,.bb-note,.mb-node,.rb-li{font-size:max(1em,calc(12px / var(--z,1)))!important}
main dt,main dt *{font-size:max(1em,calc(12px / var(--z,1)))!important}
#mt-list button,.tone button,.examples button,.voice small{font-size:max(1em,calc(13px / var(--z,1)))!important}

/* Lisibilité, 2e passe : textes courants à 16 px minimum à l'écran, libellés à 13 px */
main :is(p,li,dd):not(.tm-bubble *):not([class*="izy-"]):not([class*="wf-"]):not(.scene *):not(.vr-stage *):not(.qz *):not(.st2-n):not(.n90-num):not(.ap2-l):not(.bb-q){font-size:max(1em,calc(16px / var(--z,1)))}
main :is(.sp-card,.cy-tile,[class*="card"],.pain,.pillar,.usecase,.principle,.sovereign,.lab,.deep) :is(span,small):not([class*="tag"]):not([class*="k"]):not(.n){font-size:max(1em,calc(15px / var(--z,1)))}
main :is(.sp-card,[class*="card"],.pain,.pillar,.usecase,.cy-tile) h3{font-size:max(1em,calc(19px / var(--z,1)))}
.eyebrow,.label,.fq-k,.ax,.num,.n,.dg-mk,.dg-w,.dg-ck,.stack-k,.answered,.private,.ot-meta,.foot-note,.ct-k,.crumbs,.fineprint,.dm-note,.tag,main dt,main dt *{font-size:max(1em,calc(13px / var(--z,1)))!important}

/* Marges latérales réduites : le contenu prend plus de largeur */
html:root{--wrap:1380px}
@media (min-width:901px){html body .wrap{padding-left:32px;padding-right:32px}}

/* Un seul fond continu du héro aux « Trois offres » : le canevas des bulles est fixé à l'écran,
   puis s'efface (opacité pilotée par le script) avant la technologie. */
#marques{position:relative;isolation:isolate}
.hero-sticky .stars.bg-fixed{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none;opacity:var(--bgf,1)!important;transition:none}
.hero-sticky .stars.bg-fixed.bg-off{visibility:hidden}

/* Héro sans l'illustration (fenêtre, pastille, cartes de chiffres) : le texte seul, centré, s'estompe sur un défilement plus court */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  /* Plus d'épinglage : le héro fait un écran et défile normalement, son texte s'estompe en remontant,
     et « Trois offres » le suit sans écran vide entre les deux */
  .hero-pin:not(:has(.scene)){height:calc(100 * 1vh / var(--z,1))}
  .hero-pin:not(:has(.scene)) .hero-copy{opacity:calc(1 - var(--hp,0) * 1.15);translate:0 calc(var(--hp,0) * 40px);filter:blur(calc(var(--hp,0) * 2.5px))}
  .hero-pin.hp0:not(:has(.scene)) .hero-copy{filter:none}
  #marques{padding-top:12px!important}
}

/* Fluidité : le texte du héro n'est flouté qu'une fois le défilement commencé, et moins fort */
.hero-pin.hp0 .hero-copy{filter:none}
.hero-copy{filter:blur(calc(var(--hp,0) * 6px))}
@media (max-width:900px){.hero-copy{filter:none}}

/* Portes des offres : les cartes de côté sont pivotées et débordent d'environ 85 px de leur colonne.
   Sur les écrans moyens, on réserve cette place pour qu'elles ne touchent plus les bords. */
@media (min-width:901px) and (max-width:1599px){.doors{padding-inline:clamp(24px,calc((1600px - 100vw) * .27),84px)}}

/* « Trois offres pour répondre à vos besoins » : même apparition que le reste du site, mais sur une course 2,4 fois plus courte */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .js #marques .sec-head.reveal{--k:min(1,calc(var(--sp,0) * 2.4));opacity:var(--k);translate:0 calc((1 - var(--k)) * 50px);scale:calc(.95 + var(--k) * .05);
    rotate:x calc((1 - var(--k)) * 12deg);filter:blur(calc((1 - var(--k)) * 5px))}
}

/* ===== Logos clients plus en avant ===== */
/* 1. Dès le premier écran : une rangée fixe en bas du héro, qui s'estompe au défilement avec le texte */
.hero-trust{position:absolute;left:0;right:0;bottom:calc(clamp(16px,3vh,32px) + 56px);z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px;
  opacity:calc(1 - var(--hp,0) * 1.4);translate:0 calc(var(--hp,0) * 30px)}
.hero-trust-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hero-trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(22px,4.2vw,64px)}
.htl{display:flex;align-items:center;height:44px}
.htl img{display:block;height:28px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8;transition:opacity .3s,transform .4s cubic-bezier(.2,1.4,.4,1)}
.htl:nth-child(3) img{height:24px}.htl:nth-child(5) img{height:38px}
.htl:hover img{opacity:1;transform:translateY(-2px) scale(1.04)}
[data-theme="light"] .htl img{filter:brightness(0);opacity:.7}
/* le bloc du héro commence ~50 px sous le haut de l'écran : on remonte la rangée d'autant et on lui garde la place sous le texte */
@media (min-width:901px) and (min-height:721px){.hero-pin:not(:has(.scene)) .hero-sticky > .wrap{translate:0 -48px}}
@media (min-width:901px) and (max-height:720px){.hero-trust{display:none}}
@media (max-width:900px){
  .hero-sticky:has(.hero-trust){flex-wrap:wrap}
  .hero-trust{position:static;flex:0 0 100%;opacity:1;translate:none;margin-top:44px}
  .hero-trust-row{gap:18px 30px}.htl{height:34px}.htl img{height:22px}.htl:nth-child(5) img{height:30px}
}

/* 2. Dans les références : un intitulé et des logos plus grands, plus nets */
.ref-logos-k{text-align:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 14px}
.tr-sec .ref-logos .rlg{height:110px;padding:0 clamp(32px,4.5vw,64px)}
.tr-sec .ref-logos .rlg img{height:40px;max-width:200px;opacity:.85}
.tr-sec .ref-logos .rlg:nth-child(5n+3) img{height:34px}
.tr-sec .ref-logos .rlg:nth-child(5n) img{height:54px}
.tr-sec .ref-logos .rlg:hover img{opacity:1}
[data-theme="light"] .tr-sec .ref-logos .rlg img{opacity:.75}

/* ===== « Trois offres » : les portes restent épinglées au défilement =====
   Elles arrivent empilées et à plat au centre, puis s'écartent à leur place en s'ouvrant (inclinaison 3D).
   Le script assets/marques-pin.js pose --f (0 → 1) et la position de chaque carte. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .mq-pin{position:relative;height:calc(200 * 1vh / var(--z,1))}
  .mq-on .mq-in{position:sticky;top:0;height:calc(100 * 1vh / var(--z,1));display:flex;flex-direction:column;justify-content:center;padding-top:56px}
  .mq-on .pick-q.reveal{opacity:var(--f,1);translate:0 calc((1 - var(--f,1)) * 14px);scale:none;rotate:none;filter:none}
  .mq-on .doors .door.reveal{position:relative;opacity:var(--fo,1);translate:var(--fx,0px) var(--fy,0px);rotate:z var(--fr,0deg);scale:none;filter:none}
  .mq-on .doors .door.d-factory{z-index:2;transform:rotateY(calc(18deg * var(--f,1))) translateZ(calc(-40px * var(--f,1) - 70px * (1 - var(--f,1)))) scale(calc(1 - .04 * var(--f,1)))}
  .mq-on .doors .door.d-studio{z-index:1;transform:rotateY(calc(-18deg * var(--f,1))) translateZ(calc(-40px * var(--f,1) - 70px * (1 - var(--f,1)))) scale(calc(1 - .04 * var(--f,1)))}
  /* en 3D, c'est la profondeur qui décide qui passe devant : la carte du centre avance tant que les cartes sont empilées */
  .mq-on .doors .door.d-solutions{z-index:3;transform:translateZ(calc(40px * (1 - var(--f,1)))) scale(calc(.94 + .06 * var(--f,1)))}
}

/* ===== Contact + maquette : une seule section =====
   À gauche, on raconte son projet (maquette) ; à droite, on écrit ou on appelle l'équipe. */
.ct-copy:has(.ct-maquette) > .h2s-p{display:none}
.ct-maquette{margin-top:20px}
.ct-mq-k{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;max-width:46ch}
.ct-mq-k b{color:var(--ink);font-weight:600}
.ct-maquette .fb-prompt{margin:0;max-width:none}
.ct-maquette .fb-ideas{justify-content:flex-start;margin:14px 0 0}
.ct-or{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--glass-line)}
.ct-copy{min-width:0}
.ct-maquette .fb-prompt{width:100%;box-sizing:border-box}
@media (max-width:700px){
  .ct-maquette .fb-hint{display:none}
  .ct-maquette .fb-prompt-bar{justify-content:stretch}
  .ct-maquette .fb-prompt-bar .btn{width:100%;justify-content:center;border-radius:999px;height:auto;aspect-ratio:auto;padding:13px 18px}
  .ct-maquette .fb-ideas{flex-wrap:wrap}
  .ct-maquette .fb-ideas button{font-size:12.5px}
}
/* Carte de contact sur mobile : la colonne ne doit jamais dépasser la carte (la marge de droite disparaissait) */
@media (max-width:900px){#contact .ct-card{display:flex!important;flex-direction:column;align-items:stretch}#contact .ct-card > .ct-copy,#contact .ct-card > .ct-box{width:auto;min-width:0;max-width:100%}#contact .ct-k{max-width:100%;white-space:normal}}

/* ===== « Ils nous font confiance » : bloc fixé, logos qui défilent au rythme du défilement ===== */
.tr-head{display:none}
.tr-bar{display:none}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .tr-on .tr-pin{position:relative;height:calc(300 * 1vh / var(--z,1));margin-top:40px}
  .tr-on .tr-in{position:sticky;top:0;height:calc(100 * 1vh / var(--z,1));display:flex;flex-direction:column;justify-content:center;gap:clamp(36px,6vh,64px);padding-top:56px}
  .tr-on .tr-head{display:block;text-align:center}
  .tr-on .tr-head .eyebrow{margin-bottom:16px}
  .tr-on .tr-head .h2s-title{font-size:clamp(40px,calc(4.6 * 1vw / var(--z,1)),72px)}
  .tr-on .ref-logos-k{display:none}
  .tr-sec.tr-on .ref-logos,.tr-on .ref-logos{opacity:1!important;margin:0!important;border:0;overflow:visible;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .tr-on .ref-logos .track{animation:none!important;gap:22px;transform:translateX(var(--tx,0px));will-change:transform}
  .tr-sec.tr-on .ref-logos .rlg{height:auto;width:clamp(170px,14.5vw,230px);aspect-ratio:16/10;padding:0;border-radius:24px;
    background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--glass-border),0 30px 60px -40px rgba(0,0,0,.8);
    scale:var(--ts,1);opacity:var(--to,1);transition:box-shadow .4s}
  .tr-sec.tr-on .ref-logos .rlg img{height:40px;max-width:74%;opacity:1}
  .tr-sec.tr-on .ref-logos .rlg:nth-child(5n+3) img{height:34px}
  .tr-sec.tr-on .ref-logos .rlg:nth-child(5n) img{height:52px}
  .tr-sec.tr-on .ref-logos .rlg.near{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mint) 45%,transparent),0 0 60px -14px color-mix(in srgb,var(--mint) 55%,transparent)}
  [data-theme="light"] .tr-sec.tr-on .ref-logos .rlg{background:#fff;box-shadow:inset 0 0 0 1px rgba(14,16,22,.08),0 20px 40px -28px rgba(14,16,22,.3)}
  .tr-on .tr-bar{display:block;width:min(280px,40%);height:3px;margin:0 auto;border-radius:3px;background:var(--glass-border);overflow:hidden}
  .tr-on .tr-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--tp,0));background:linear-gradient(90deg,var(--lav),var(--mint),var(--lime))}
}

/* ===== Héro : arrêt sur « Ils nous font confiance » =====
   Le héro reste fixé : le texte s'efface, la rangée de logos monte au centre et grandit,
   puis les logos défilent d'une série au rythme du défilement (assets/hero-trust.js). */
@media (min-width:901px) and (min-height:721px) and (prefers-reduced-motion:no-preference){
  .ht-on .hero-pin:not(:has(.scene)),.hero-pin.ht-on:not(:has(.scene)){height:calc(210 * 1vh / var(--z,1))}
  .hero-pin.ht-on:not(:has(.scene)) .hero-copy{opacity:calc(1 - var(--hp,0) * 3);translate:0 calc(var(--hp,0) * -70px);filter:blur(calc(var(--hp,0) * 4px))}
  .hero-pin.ht-on .hero-trust{opacity:var(--hto,0);translate:0 var(--hty,0px);scale:var(--hts,1);transform-origin:50% 50%}
  /* le texte du héro reprend sa place centrée : les logos n'arrivent qu'après lui */
  .hero-pin.ht-on:not(:has(.scene)) .hero-sticky > .wrap{translate:none}
  .hero-pin.ht-on .hero-trust-k{font-size:calc(11px + var(--htr,0) * 3px);color:color-mix(in srgb,var(--ink) calc(40% + var(--htr,0) * 50%),var(--ink-3))}
  .hero-pin.ht-on .hero-trust-row{display:block;width:min(1100px,100%);overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .hero-pin.ht-on .ht-track{display:flex;align-items:center;gap:clamp(40px,5vw,72px);width:max-content;transform:translateX(var(--htx,0px));will-change:transform}
}
.ht-track{display:contents}
.hero-pin:not(.ht-on) .ht-track > [aria-hidden="true"]{display:none}
.hero-pin.ht-on .ht-track > [aria-hidden="true"]{opacity:var(--htc,0);transition:opacity .3s}

/* ===== « Ils nous font confiance », juste après le héro ===== */
.tr-sec{position:relative;z-index:2;padding:clamp(56px,9vh,110px) 0}
.tr-sec .tr-head{display:block;text-align:center;margin-bottom:28px}
.tr-sec .tr-head .eyebrow{margin-bottom:16px}
.tr-sec .ref-logos-k{display:none}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.tr-sec.tr-on{padding:0}.tr-sec.tr-on .tr-pin{margin-top:0}}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .tr-sec.tr-on .tr-pin{height:calc(230 * 1vh / var(--z,1))}
  .tr-sec.tr-on .tr-head .h2s-title{font-size:clamp(38px,calc(3.9 * 1vw / var(--z,1)),62px)}
}

/* ===== Mode clair de l'accueil : de la matière, pas un gris ===== */
[data-theme="light"] body:not(.diving){
  --bg:#F6F4FC;
  background:
    radial-gradient(70vw 55vh at 8% 6%,color-mix(in srgb,var(--lav) 55%,transparent),transparent 70%),
    radial-gradient(60vw 50vh at 96% 18%,color-mix(in srgb,var(--mint) 50%,transparent),transparent 70%),
    radial-gradient(55vw 45vh at 70% 92%,color-mix(in srgb,var(--lime) 45%,transparent),transparent 70%),
    radial-gradient(50vw 40vh at 4% 88%,color-mix(in srgb,var(--peach) 40%,transparent),transparent 70%),
    linear-gradient(180deg,#F7F3FF,#F2F8F7 55%,#FAFAEF);
  background-attachment:fixed}
[data-theme="light"] body:not(.diving) .aura i{opacity:.7}
[data-theme="light"] .hero h1 .grad,[data-theme="light"] .hero .grad{background-image:linear-gradient(92deg,#3A1FB8 0%,#6B4BEA 45%,#0F9A80 100%)}
[data-theme="light"] .hero .pill{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 70%,transparent)}
[data-theme="light"] .hero .btn.ghost{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 80%,transparent)}
/* les ombres et halos des logos ne sont plus coupés par le masque de la bande */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .tr-sec.tr-on .ref-logos{padding:56px 0!important;margin:-56px 0!important}
}
.tr-sec .ref-logos{padding-block:32px;margin-block:-32px}
/* Moins de vide entre le héro et « Ils nous font confiance » : la section remonte sous le lien néon et son titre se place en haut de l'écran fixé */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #confiance.tr-sec{margin-top:calc(-24 * 1vh / var(--z,1))}
  .tr-sec.tr-on .tr-in{justify-content:flex-start;padding-top:calc(20 * 1vh / var(--z,1))}
}
@media (max-width:900px){#confiance.tr-sec{padding-top:24px}}

/* ===== Accueil : plus d'air sur les côtés, partout ===== */
:root{--side:clamp(24px,5.5vw,96px)}
main .wrap,footer .wrap,.site-foot .wrap{padding-inline:var(--side)!important;max-width:calc(var(--wrap) + 2 * var(--side))!important}
@media (max-width:760px){:root{--side:20px}}

/* ===== « Trois offres » : le titre se bloque en haut, les offres arrivent dessous =====
   --rise (0 → 1) : les cartes montent du bas de l'écran ; --f (0 → 1) : elles s'écartent et s'ouvrent. */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .mq-pin{height:calc(180 * 1vh / var(--z,1))}
  .mq-on .mq-in{justify-content:flex-start;padding-top:calc(13 * 1vh / var(--z,1));gap:0}
  .mq-on .mq-head.reveal{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important;margin:0 0 calc(3 * 1vh / var(--z,1))!important;text-align:center}
  .mq-on .mq-head h2{font-size:clamp(34px,calc(4 * 1vw / var(--z,1)),60px)!important;line-height:1.04}
  .mq-on .mq-head .lead{margin:12px auto 0!important;font-size:15.5px;max-width:58ch}
  .mq-on .mq-head .eyebrow{margin-bottom:14px}
  .mq-on .pick-q.reveal{margin:0 0 calc(1.6 * 1vh / var(--z,1))!important}
  .mq-on .doors{translate:0 calc((1 - var(--rise,1)) * 60vh);opacity:calc(.15 + .85 * var(--rise,1))}
  .mq-on .doors{scale:var(--dz,1);transform-origin:50% 0}
}
@media (min-width:901px) and (max-height:820px) and (prefers-reduced-motion:no-preference){
  .mq-on .mq-head .lead{display:none}
}

/* ===== Contact : deux portes, un formulaire à la fois ===== */
#contact .ctx{display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:clamp(48px,6vw,88px) clamp(28px,5vw,80px)}
.ctx-head{text-align:center;max-width:780px;margin:0 auto}
.ctx-head .ct-k{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.ctx-head .h2s-title{font-size:clamp(40px,calc(4.6 * 1vw / var(--z,1)),72px)!important;line-height:1.02}
.ctx-q{margin-top:26px;font-size:17px;color:rgba(255,255,255,.8)}
.ctx-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px auto 0;width:100%;max-width:920px;perspective:1100px}
.ctx-door{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:250px;padding:30px 30px 26px;border-radius:30px;text-align:left;color:#fff;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.35),0 30px 60px -34px rgba(10,0,60,.8);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,1,.3,1),box-shadow .4s,opacity .45s,scale .5s cubic-bezier(.2,1,.3,1)}
.ctx-door::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from var(--ctx-a,0deg),var(--c),var(--c2),#fff,var(--c));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ctxSpin 4s linear infinite}
@property --ctx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ctxSpin{to{--ctx-a:360deg}}
.ctx-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--c) 55%,transparent),transparent 65%)}
.ctx-door:hover .ctx-glow,.ctx-door[aria-selected="true"] .ctx-glow{opacity:1}
.ctx-door:hover::before,.ctx-door[aria-selected="true"]::before{opacity:1}
.ctx-door:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 40px 70px -30px color-mix(in srgb,var(--c) 70%,transparent)}
.ctx-door > *{position:relative}
.ctx-t{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:auto}
.ctx-d{font-size:15px;line-height:1.55;color:rgba(255,255,255,.78);max-width:38ch}
.ctx-m{margin-top:6px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 70%,#fff)}
.ctx-m b{display:inline-block;margin-left:6px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ctx-door:hover .ctx-m b{transform:translateX(5px)}
/* pictos animés */
.ctx-ic{position:relative;width:64px;height:52px;margin-bottom:22px}
.ctx-ic i{position:absolute;border-radius:9px;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 85%,#fff),color-mix(in srgb,var(--c2) 70%,transparent));box-shadow:0 10px 24px -10px var(--c);animation:ctxFloat 4s ease-in-out infinite}
.ctx-ic i:nth-child(1){left:0;top:6px;width:34px;height:44px;border-radius:10px}
.ctx-ic i:nth-child(2){left:30px;top:0;width:30px;height:22px;animation-delay:-1.3s;opacity:.9}
.ctx-ic i:nth-child(3){left:30px;top:28px;width:22px;height:22px;border-radius:50%;animation-delay:-2.6s;opacity:.8}
.ctx-ic2 i:nth-child(1){left:0;top:4px;width:46px;height:32px;border-radius:14px 14px 14px 4px}
.ctx-ic2 i:nth-child(2){left:22px;top:22px;width:40px;height:28px;border-radius:12px 12px 4px 12px;animation-delay:-2s;opacity:.85}
@keyframes ctxFloat{50%{translate:0 -5px}}
/* choix fait : la porte choisie avance, l'autre recule */
.ctx[data-pick] .ctx-door[aria-selected="false"]{opacity:.55;scale:.96}
.ctx[data-pick] .ctx-door[aria-selected="false"]:hover{opacity:.85}
.ctx[data-pick] .ctx-door[aria-selected="true"]{scale:1.02}
/* panneau du formulaire */
.ctx-panels{width:100%;max-width:920px;margin:0 auto}
.ctx-p{margin-top:22px;padding:28px;border-radius:28px;background:rgba(10,6,40,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  opacity:0;translate:0 18px;transition:opacity .45s,translate .55s cubic-bezier(.2,1,.3,1)}
.ctx-p.in{opacity:1;translate:0 0}
.ctx-p .ct-maquette{margin:0}
.ctx-p .ct-box{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;width:auto!important;max-width:none!important}
.ctx-p .ct-q{margin-top:0}
.ctx-p .ct-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
.ctx-p .ct-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
@media (max-width:900px){
  .ctx-doors{grid-template-columns:1fr;gap:14px}
  .ctx-door{min-height:0;padding:24px}
  .ctx-ic{margin-bottom:10px}
  .ctx-p{padding:20px}
  .ctx-p .ct-chips{grid-template-columns:1fr 1fr}
  .ctx-p .ct-ways{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ctx-door,.ctx-door::before,.ctx-ic i{animation:none!important;transition:none!important}}
.ctx .ctx-t{font-size:clamp(24px,calc(2.1 * 1vw / var(--z,1)),32px)!important;font-weight:600!important;letter-spacing:-.035em;line-height:1.1!important}
.ctx .ctx-d{font-size:15.5px!important;line-height:1.55!important}
.ctx .ctx-q{font-size:18px!important}
.ctx .ctx-m{font-size:11.5px!important}
.ctx-doors{margin-top:44px}
.ctx-p{margin-top:28px}
.ctx-p .ct-box,.ctx-p .ct-chips{min-width:0;max-width:100%}
.ctx-p .ct-chips button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.ctx-p{padding:16px}.ctx-p .ct-chips button{padding:11px 10px;font-size:13.5px}}
/* Offres : cartes plus grandes, titre plus compact */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .mq-in{padding-top:calc(11 * 1vh / var(--z,1))}
  .mq-on .mq-head{margin-bottom:calc(2 * 1vh / var(--z,1))!important}
  .mq-on .doors{width:min(1320px,calc(100vw / var(--z,1) - 2 * var(--side,24px)));margin-inline:auto;position:relative;left:50%;translate:-50% calc((1 - var(--rise,1)) * 60vh)!important;gap:26px}
}
/* cartes plus larges : la rangée est élargie d'autant qu'elle est réduite (--dz), elle garde donc toute la largeur à l'écran */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .doors{width:calc(min(1400px,calc(100vw / var(--z,1) - 2 * var(--side,24px))) / var(--dz,1));gap:calc(24px / var(--dz,1))}
}

/* ===== Contact en texte : plus de grand cadre, le titre sur le fond de la page, les deux propositions montent dessous ===== */
#contact .ctx{background:none!important;box-shadow:none!important;padding:clamp(40px,8vh,90px) 0 0!important;border-radius:0!important;overflow:visible!important;color:var(--ink)}
#contact .ctx::after,#contact .ctx .ct-mesh,#contact .ctx .ct-ring,#contact .ctx .ct-spot{display:none!important}
#contact .ctx .h2s-title{color:var(--ink)!important}
#contact .ctx .h2s-title span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#contact .ctx .ct-k{color:var(--ink-3)!important}
#contact .ctx .ctx-q{color:var(--ink-2)!important}
.ctx-doors{margin-top:clamp(48px,8vh,80px)}
.ctx-door{color:var(--ink);opacity:var(--in,1);translate:0 calc((1 - var(--in,1)) * 120px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,var(--glass-2)),var(--glass) 70%)!important;
  box-shadow:inset 0 0 0 1px var(--glass-border),var(--shadow)!important}
.ctx-door:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 40px 70px -30px color-mix(in srgb,var(--c) 70%,transparent)!important}
.ctx .ctx-d{color:var(--ink-2)}
.ctx .ctx-m{color:color-mix(in srgb,var(--c) var(--tint-mix),var(--tint))}
.ctx[data-pick] .ctx-door[aria-selected="false"]{opacity:calc(var(--in,1) * .55)}
.ctx-p{background:var(--glass)!important;box-shadow:inset 0 0 0 1px var(--glass-border),var(--shadow)!important}
[data-theme="light"] .ctx-p .ct-chips button{color:var(--ink)!important;background:rgba(255,255,255,.6)}
[data-theme="light"] .ctx-p .ct-q,[data-theme="light"] .ctx-p .ct-ways a,[data-theme="light"] .ctx-p .ct-ways small{color:var(--ink)!important}
[data-theme="light"] .ctx-p .ct-ways i{color:var(--ink);background:rgba(255,255,255,.7)}
#contact .ct-card.ctx,#contact .ct-card.ctx.grow{background:none!important;background-image:none!important;border:0!important;outline:0!important;filter:none!important;clip-path:none!important;max-width:none!important;width:auto!important;scale:none!important;transform:none!important}
#contact .ct-card.ctx::before,#contact .ct-card.ctx::after{display:none!important;content:none!important}
html body #contact .ct-card.ctx{box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ===== Contact : plus de blocs. Le texte, puis deux propositions ouvertes ===== */
#contact{padding-block:clamp(110px,16vh,190px)!important}
#contact .ctx{padding-top:0!important}
#contact .ctx-head{max-width:900px}
#contact .ctx-head .h2s-title{font-size:clamp(46px,calc(5.6 * 1vw / var(--z,1)),92px)!important;line-height:1!important}
#contact .ctx .ctx-q{margin-top:34px;font-size:19px!important}
.ctx-doors{gap:0!important;max-width:1040px!important;margin-top:clamp(80px,13vh,140px)!important;perspective:none}
.ctx-door{min-height:0!important;padding:8px clamp(28px,4vw,64px) 22px!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;gap:14px!important;overflow:visible!important}
.ctx-door + .ctx-door{border-left:1px solid var(--glass-line)}
.ctx-door::before,.ctx-glow{display:none!important}
.ctx-door .ctx-ic{margin-bottom:18px;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.ctx-door:hover .ctx-ic{transform:translateY(-6px) scale(1.08)}
.ctx .ctx-t{font-size:clamp(28px,calc(2.6 * 1vw / var(--z,1)),40px)!important;margin-top:0!important;position:relative;display:inline-block}
.ctx .ctx-t::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--c),var(--c2));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,1,.3,1)}
.ctx-door:hover .ctx-t::after,.ctx-door[aria-selected="true"] .ctx-t::after{transform:scaleX(1)}
.ctx .ctx-d{font-size:16.5px!important;max-width:34ch}
.ctx .ctx-m{margin-top:10px!important}
.ctx[data-pick] .ctx-door[aria-selected="false"]{opacity:calc(var(--in,1) * .45);scale:1!important}
.ctx[data-pick] .ctx-door[aria-selected="true"]{scale:1!important}
.ctx-p{margin-top:clamp(48px,7vh,72px)!important;padding:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;max-width:820px;margin-inline:auto}
@media (max-width:900px){.ctx-door{padding:28px 0!important}.ctx-door + .ctx-door{border-left:0;border-top:1px solid var(--glass-line)}}
.ctx-door:focus{outline:0}
.ctx-door:focus-visible .ctx-t::after{transform:scaleX(1)}
#contact .ctx .ctx-door,#contact .ctx .ctx-door:hover,#contact .ctx .ctx-door[aria-selected="true"]{box-shadow:none!important;background:none!important;outline:0!important}

/* ===== Transition équipe → contact : un temps de respiration, puis le titre se révèle mot à mot ===== */
#contact{padding-top:clamp(120px,18vh,220px)!important}
.ctx-stick{position:relative}
.ctx-orb,.ctx-beam{display:none}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #contact.ctxi-on{padding-top:0!important}
  .ctxi-on .ctx-intro{height:calc(230 * 1vh / var(--z,1))}
  .ctxi-on .ctx-stick{position:sticky;top:0;height:calc(100 * 1vh / var(--z,1));display:grid;place-items:center;overflow:visible}
  .ctxi-on .ctx-orb{display:block;position:absolute;left:50%;top:50%;width:min(1100px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
    translate:-50% -50%;scale:calc(.15 + .85 * var(--orb,0));opacity:calc(var(--orb,0) * (1 - .55 * var(--rest,0)));filter:blur(70px);
    background:conic-gradient(from calc(var(--p,0) * 220deg),color-mix(in srgb,var(--lav) 70%,transparent),color-mix(in srgb,var(--mint) 55%,transparent),color-mix(in srgb,var(--peach) 50%,transparent),color-mix(in srgb,var(--lav) 70%,transparent));
    -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%)}
  .ctxi-on .ctx-beam{display:block;position:absolute;left:50%;top:0;width:1px;height:46%;translate:-50% 0;pointer-events:none;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lav) 80%,transparent) 70%,transparent);transform-origin:50% 0;scale:1 calc(min(1,var(--p,0) * 3.2));opacity:calc(1 - min(1,var(--p,0) * 2.2))}
  .ctxi-on .ctx-head{margin:0 auto}
  .ctxi-on .ctx-head .ct-k,.ctxi-on .ctx-head .ctx-q{opacity:var(--rest,0);translate:0 calc((1 - var(--rest,0)) * 18px)}
  .ctxi-on .ctx-w{display:inline-block;opacity:var(--k,0);translate:0 calc((1 - var(--k,0)) * .55em);filter:blur(calc((1 - var(--k,0)) * 14px));scale:calc(1.18 - .18 * var(--k,0))}
  .ctxi-on .ctx-head .h2s-title span .ctx-w{background:inherit;-webkit-background-clip:text;background-clip:text}
  .ctxi-on .ctx-doors{margin-top:0!important}
}
/* le dégradé ne s'applique qu'à la seconde ligne du titre, pas aux mots de la première */
#contact .ctx .h2s-title > .ctx-w{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--ink)!important}
#contact .ctx .h2s-title > span:not(.ctx-w){background:none!important;color:inherit!important}
#contact .ctx .h2s-title > span:not(.ctx-w) .ctx-w{background:var(--grad-text);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important}
#contact .ctx .h2s-title > span:not(.ctx-w) .ctx-w:nth-child(1){background-position:0% 0}
#contact .ctx .h2s-title > span:not(.ctx-w) .ctx-w:nth-child(2){background-position:45% 0}
#contact .ctx .h2s-title > span:not(.ctx-w) .ctx-w:nth-child(3){background-position:100% 0}
@media (max-width:900px){.ctx .ctx-t{font-size:clamp(24px,7vw,32px)!important;max-width:100%}.ctx-door{max-width:100%;min-width:0}}
/* Lien néon des outils, aligné à côté de « Découvrir nos marques » */
.hero .actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.hero .actions .neon-link{margin:0!important}
@media (max-width:700px){
  .hero .actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero .actions .btn,.hero .actions .neon-link{width:100%;justify-content:center}
  .hero .actions .neon-link{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;align-items:center;gap:8px;padding:12px 16px!important;font-size:13px!important;line-height:1.3;text-align:left;border-radius:999px!important}
  .hero .actions .neon-link > i{display:none}
  .hero .actions .neon-link > span{flex:none}
}

/* ===== Contact : le texte reste fixé, puis les deux propositions apparaissent dessous, dans le même écran ===== */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .ctxi-on .ctx-intro{height:calc(300 * 1vh / var(--z,1))}
  .ctxi-on .ctx-stick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
  .ctxi-on .ctx-head{translate:0 calc((1 - var(--in2,0)) * 0px)}
  .ctxi-on .ctx-stick .ctx-doors{margin-top:clamp(36px,6vh,70px)!important;width:100%}
  .ctxi-on .ctx-door{translate:0 calc((1 - var(--in,0)) * 90px)!important;opacity:var(--in,0)!important}
  .ctxi-on .ctx-head .h2s-title{font-size:clamp(40px,calc(4.8 * 1vw / var(--z,1)),80px)!important}
  .ctxi-on .ctx-panels{margin-top:0}
}
@media (min-width:901px) and (max-height:820px) and (prefers-reduced-motion:no-preference){
  .ctxi-on .ctx-stick{zoom:.86}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.ctxi-on .ctx-stick{padding-top:70px;box-sizing:border-box}}

/* ===== Contact : surtitre comme les autres sections, propositions centrées et plus soignées ===== */
#contact .ctx-eb{display:inline-flex;margin-bottom:22px}
.ctx-doors{max-width:1000px!important}
.ctx-door{align-items:center!important;text-align:center!important;padding:34px clamp(24px,3.5vw,56px) 30px!important;border-radius:32px!important;transition:background .45s,box-shadow .45s,opacity .45s!important}
#contact .ctx .ctx-door:hover,#contact .ctx .ctx-door[aria-selected="true"]{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 70%)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent)!important}
.ctx-door + .ctx-door{border-left:0!important}
.ctx-doors{position:relative}
.ctx-doors::before{content:"";position:absolute;left:50%;top:14%;bottom:14%;width:1px;background:linear-gradient(180deg,transparent,var(--glass-border),transparent)}
.ctx-door .ctx-ic{margin:0 auto 22px!important;width:84px!important;height:84px!important;display:grid;place-items:center;border-radius:26px;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.ctx-door .ctx-ic i{transform:scale(.8);transform-origin:0 0;left:auto}
.ctx-door .ctx-ic{position:relative}
.ctx-door .ctx-ic i:nth-child(1){left:18px;top:18px}.ctx-door .ctx-ic i:nth-child(2){left:46px;top:14px}.ctx-door .ctx-ic i:nth-child(3){left:46px;top:42px}
.ctx-door .ctx-ic2 i:nth-child(1){left:14px;top:20px}.ctx-door .ctx-ic2 i:nth-child(2){left:34px;top:36px}
.ctx .ctx-t{text-align:center}
.ctx .ctx-t::after{left:20%;right:20%}
.ctx .ctx-d{margin-inline:auto;text-align:center;max-width:32ch}
.ctx .ctx-m{display:flex!important;flex-direction:column;align-items:center;gap:16px;margin-top:14px!important}
.ctx .ctx-m > span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ctx-go{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-family:var(--f);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  color:#0A0A10;background:linear-gradient(120deg,var(--c),var(--c2));box-shadow:0 14px 30px -14px var(--c);transition:transform .35s cubic-bezier(.2,1.4,.4,1),box-shadow .35s}
.ctx-go i{font-style:normal;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ctx-door:hover .ctx-go{transform:translateY(-2px);box-shadow:0 20px 36px -14px var(--c)}
.ctx-door:hover .ctx-go i{transform:translateX(4px)}
.ctx-door .ctx-m b{margin-left:0!important}
@media (max-width:900px){.ctx-doors::before{display:none}.ctx-door + .ctx-door{border-top:1px solid var(--glass-line)}}
#contact .ctx-head .h2s-title{text-align:center!important}
#contact .ctx-head .h2s-title > span:not(.ctx-w){display:block}
.ctx .ctx-m > span{font-size:11px!important;letter-spacing:.12em!important}
.ctx-door{justify-content:flex-start}
.ctx .ctx-m{margin-top:auto!important;padding-top:14px}
.ctx-door .ctx-ic{width:72px!important;height:72px!important;margin-bottom:16px!important}
.ctx .ctx-t{font-size:clamp(26px,calc(2.3 * 1vw / var(--z,1)),36px)!important}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .ctxi-on .ctx-stick .ctx-doors{margin-top:clamp(20px,3.5vh,44px)!important}
  .ctxi-on .ctx-door{padding:24px clamp(24px,3vw,48px) 22px!important}
  .ctxi-on .ctx .ctx-q,#contact.ctxi-on .ctx .ctx-q{margin-top:22px}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.ctxi-on .ctx-stick{padding-top:96px}}

/* ===== Plus d'air entre les offres, « Vous hésitez ? » et la technologie ===== */
#marques .quiz-cta{margin-top:clamp(90px,14vh,160px)!important}
#marques .brands-note{margin-top:28px!important}
#marques{padding-bottom:clamp(140px,22vh,260px)!important}
#technologie{margin-top:clamp(40px,8vh,100px)}

/* ===== Fenêtre des deux parcours (maquette / sujet précis) ===== */
html.ctx-lock{overflow:hidden}
.ctx-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.ctx-modal[hidden]{display:none}
.ctx-mbg{position:absolute;inset:0;background:rgba(6,6,14,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .3s}
.ctx-mbox{position:relative;width:min(820px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:34px clamp(22px,4vw,44px) 36px;border-radius:30px;color:var(--ink);
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),color-mix(in srgb,var(--bg) 92%,#fff 3%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,var(--glass-border)),0 40px 100px -30px rgba(0,0,0,.7);
  opacity:0;translate:0 24px;scale:.97;transition:opacity .35s,translate .45s cubic-bezier(.2,1,.3,1),scale .45s cubic-bezier(.2,1,.3,1)}
.ctx-modal.in .ctx-mbg{opacity:1}
.ctx-modal.in .ctx-mbox{opacity:1;translate:0 0;scale:1}
.ctx-mx{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink-2);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-border);transition:background .2s,color .2s}
.ctx-mx:hover{color:var(--ink);background:var(--glass-2)}
.ctx-mk{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--c) var(--tint-mix),var(--tint))}
.ctx-mt{margin:8px 0 24px;font-size:clamp(26px,3vw,36px);letter-spacing:-.035em;line-height:1.1;padding-right:44px}
.ctx-modal .ctx-panels{max-width:none;margin:0}
.ctx-modal .ctx-p{margin:0!important;padding:0!important;background:none!important;box-shadow:none!important}
@media (max-width:700px){.ctx-modal{padding:0;place-items:end stretch}.ctx-mbox{border-radius:26px 26px 0 0;max-height:92dvh;padding:28px 18px 24px}}
@media (prefers-reduced-motion:reduce){.ctx-mbg,.ctx-mbox{transition:none}}
html.ctx-lock .izy-launch,html.ctx-lock .to-top{opacity:0!important;pointer-events:none!important}

/* ===== 05 / Nos convictions : le manifeste ===== */
#convictions.cvm{padding:clamp(100px,14vh,160px) 0}
.cvm-eb{display:inline-flex;margin-bottom:34px}
.cvm-txt{font-size:clamp(36px,calc(4.4 * 1vw / var(--z,1)),72px);font-weight:600;letter-spacing:-.045em;line-height:1.08;max-width:22ch}
.cvm-w{color:color-mix(in srgb,var(--ink) calc(22% + var(--k,1) * 78%),transparent);transition:color .15s}
.cvm-s:nth-child(2) .cvm-w{color:color-mix(in srgb,var(--ink-3) calc(30% + var(--k,1) * 70%),transparent)}
.cvm-c .cvm-w{color:color-mix(in srgb,color-mix(in srgb,var(--c) var(--tint-mix),var(--tint)) calc(15% + var(--k,1) * 85%),transparent)}
.cvm-g .cvm-w{background:linear-gradient(92deg,color-mix(in srgb,var(--mint) var(--tint-mix),var(--tint)),color-mix(in srgb,var(--lime) var(--tint-mix),var(--tint)));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:calc(.18 + var(--k,1) * .82)}
/* Dégradé continu sur toute la phrase : chaque mot montre sa tranche (--gi / --gn posés par convictions.js) */
.cvm-g .cvm-w{background-size:calc(var(--gn,1) * 100%) 100%;background-position:calc(var(--gi,0) / max(var(--gn,1) - 1, 1) * 100%) 0}
.cvm-w{display:inline-block;translate:0 calc((1 - var(--k,1)) * .12em)}
.cvm-sig{margin-top:30px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);opacity:var(--k,1)}
.cvm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vh,64px)}
.cvm-card{padding:20px 22px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-border);opacity:var(--k,1);translate:0 calc((1 - var(--k,1)) * 40px)}
.cvm-card b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.cvm-card b i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.cvm-card p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #convictions.cvm-on{padding:0}
  .cvm-on .cvm-pin{height:calc(180 * 1vh / var(--z,1))}
  .cvm-on .cvm-stick{position:sticky;top:0;height:calc(100 * 1vh / var(--z,1));display:flex;align-items:center;padding-top:50px;box-sizing:border-box}
  .cvm-on .cvm-stick > .wrap{width:100%}
}
@media (max-width:900px){.cvm-cards{grid-template-columns:1fr}}
#convictions .cvm-txt{font-size:clamp(38px,calc(4.6 * 1vw / var(--z,1)),76px)!important;font-weight:600!important;letter-spacing:-.045em!important;line-height:1.06!important;max-width:24ch!important}
#convictions .cvm-sig{font-size:12px!important}
#convictions .cvm-card p{font-size:14.5px!important}
#convictions .cvm-card b{font-size:15.5px!important}

/* Lien néon du héro : texte plus petit */
.hero .neon-link{font-size:13.5px!important}
.hero .neon-link > span{font-size:10px!important;padding:3px 9px!important}
@media (min-width:701px){.hero .neon-link{padding-block:9px!important}}

/* « Choisissez votre porte d'entrée » : moins de marge au-dessus */
#marques .pick-q{margin-top:0!important;padding-top:0!important}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.mq-on .mq-head{margin-bottom:calc(.6 * 1vh / var(--z,1))!important}.mq-on .mq-head + .pick-q{margin-top:-6px!important}}

/* « Vous hésitez ? » mis en valeur */
#marques .quiz-cta{position:relative;max-width:900px!important;padding:24px 24px 24px 28px!important;border-radius:28px!important;gap:22px!important;overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--lav) 22%,transparent),color-mix(in srgb,var(--mint) 14%,transparent) 55%,color-mix(in srgb,var(--lime) 16%,transparent))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 45%,transparent),0 30px 70px -40px color-mix(in srgb,var(--lav) 90%,transparent)!important}
#marques .quiz-cta::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--qa,0deg),var(--lav),var(--mint),var(--lime),var(--peach),var(--lav));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:qaSpin 6s linear infinite}
@property --qa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes qaSpin{to{--qa:360deg}}
#marques .quiz-cta p{font-size:15.5px!important;color:var(--ink-2)!important}
#marques .quiz-cta p b{font-size:clamp(22px,2vw,28px)!important;letter-spacing:-.03em!important;margin-bottom:4px}
#marques .quiz-cta .qc-orb{transform:scale(1.25)}
#marques #quizStart{padding:15px 24px!important;font-size:15.5px!important;box-shadow:0 14px 34px -14px var(--lav)}
@media (prefers-reduced-motion:reduce){#marques .quiz-cta::before{animation:none}}

/* ===== Les deux parcours s'ouvrent dans un panneau à droite ===== */
.ctx-modal{place-items:stretch end!important;padding:0!important}
.ctx-mbox{width:min(560px,100vw)!important;max-height:none!important;height:100dvh;border-radius:28px 0 0 28px!important;padding:40px 36px 30px!important;display:flex;flex-direction:column;overflow:auto;
  translate:100% 0!important;scale:1!important;opacity:1!important;transition:translate .5s cubic-bezier(.2,1,.3,1)!important}
.ctx-modal.in .ctx-mbox{translate:0 0!important}
.ctx-mbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--c),var(--c2))}
.ctx-mt{font-size:clamp(28px,2.6vw,38px)!important;margin:10px 0 12px!important}
.ctx-mlead{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:26px}
.ctx-modal .ctx-mbody{flex:1}
.ctx-modal .ct-chips{grid-template-columns:1fr 1fr!important}
.ctx-modal .ct-ways{display:none!important}
.ctx-mfoot{margin-top:30px;padding-top:22px;border-top:1px solid var(--glass-line);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctx-mfk{grid-column:1/-1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ctx-mfoot a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-border);transition:box-shadow .25s}
.ctx-mfoot a:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent)}
.ctx-mfoot b{font-size:14.5px;font-weight:600;color:var(--ink)}.ctx-mfoot span{font-size:12px;color:var(--ink-3)}
.ctx-modal .fb-ideas{flex-wrap:wrap}
@media (max-width:700px){.ctx-mbox{border-radius:0!important;padding:30px 20px 24px!important}.ctx-mfoot{grid-template-columns:1fr}}
.ctx-mbox{height:calc(100dvh / var(--z,1))!important}
.ctx-modal .fb-hint{display:none}
.ctx-modal .fb-prompt-bar{justify-content:flex-end}

/* ===== 04 / Références allégées : une seule carte, pas d'arc, pas de sol, pas de reflets ===== */
@media (min-width:901px){
  #references .vr-room,#references .vr-sub{display:none!important}
  #references .vr-scr:not(.on){opacity:0!important;pointer-events:none}
  #references .vr-scr{transition:opacity .5s,filter .5s!important}
  #references .vr-img{-webkit-box-reflect:none!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,var(--glass-border)),0 30px 60px -40px color-mix(in srgb,var(--c) 70%,transparent)!important;border:0!important}
  #references .vr-cap em,#references .vr-play{display:none!important}
  #references .vr-tabs{margin-top:28px}
  #references .vr-tabs button.on,#references .vr-tabs button[aria-pressed="true"]{box-shadow:none!important}
  #references .vr-ped-top{display:none!important}
  #references .vr-ped-front{background:none!important;box-shadow:none!important;border:0!important;padding:10px 0 0!important;min-height:0!important}
  #references .vr-ped-front::before,#references .vr-ped-front::after,#references .vr-ped::before,#references .vr-ped::after{display:none!important}
  #references .vr-name{display:none}
  #references .vr-dl > div{border-color:var(--glass-line)!important}
  #references .vr-head{margin-bottom:10px}
}
@media (min-width:901px){#references .vr-scr,#references .vr-scr *{-webkit-box-reflect:none!important}}

/* Références : les autres cas restent visibles, atténués, avant et après */
@media (min-width:901px){
  #references .vr-scr:not(.on){opacity:.28!important;filter:saturate(.5) brightness(.7)!important;pointer-events:auto}
}

/* Panneau maquette : l'analyse puis le récit s'affichent dedans */
.ctx-modal .fb-craft{position:static!important;inset:auto!important;z-index:auto!important;display:block!important;padding:4px 0 0!important;background:none!important;opacity:1!important;backdrop-filter:none!important}
.ctx-modal .fb-craft[hidden]{display:none!important}
.ctx-modal .fb-craft-in{width:100%!important;gap:20px!important}
.ctx-modal .fb-quote{font-size:clamp(20px,1.7vw,24px)!important;line-height:1.45!important}
.ctx-modal .dm-result{width:100%!important;margin:0!important}
.ctx-modal .dm-story{padding:20px!important}
.ctx-modal:has(.fb-craft:not([hidden])) #ctx-p-maq,.ctx-modal:has(.dm-result:not([hidden])) #ctx-p-maq,
.ctx-modal:has(.fb-craft:not([hidden])) .ctx-mlead,.ctx-modal:has(.dm-result:not([hidden])) .ctx-mlead{display:none!important}
.ctx-modal:has(.fb-craft:not([hidden])) .ctx-mfoot,.ctx-modal:has(.dm-result:not([hidden])) .ctx-mfoot{margin-top:24px}
.ctx-modal .dm-form2 .dm-main{flex-direction:column;border-radius:20px}
.ctx-modal .dm-form2 .dm-main .btn{width:100%;justify-content:center}

/* ===== Offres : la pile de départ, propre et en verre ===== */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .doors .door.reveal{scale:var(--fs,1)}
  .mq-on .doors .door.d-factory > *:not(.door-glow),.mq-on .doors .door.d-studio > *:not(.door-glow){opacity:var(--fc,1);transition:none}
  .mq-on .doors .door{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035) 55%,rgba(255,255,255,.015))!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5)!important;backdrop-filter:blur(22px) saturate(1.5)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.10),0 40px 80px -40px rgba(0,0,0,.85)!important}
  .mq-on .doors .door.d-factory,.mq-on .doors .door.d-studio{filter:brightness(calc(.72 + .28 * var(--f,1)))}
}
[data-theme="light"] .mq-on .doors .door{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.5) 60%)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(14,16,22,.06),0 40px 80px -44px rgba(40,30,90,.35)!important}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .mq-on .doors .door.d-solutions{background:linear-gradient(160deg,rgba(40,40,52,.82),rgba(18,18,26,.78))!important}
  [data-theme="light"] .mq-on .doors .door.d-solutions{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.8))!important}
}

/* ===== Panneau : chaque parcours ne montre que ce qui le concerne ===== */
.ctx-modal[data-k="pro"] .fb-craft,.ctx-modal[data-k="pro"] .dm-result{display:none!important}
.ctx-modal[data-k="pro"] .ctx-mlead{display:block!important}
.ctx-modal[data-k="pro"] #ctx-p-pro{display:block!important}

/* ===== Formulaire de contact intégré au panneau (ses champs .dm-f sont dans demande.css) ===== */
.ctx-cf{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.ctx-cg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctx-cfull{grid-column:1/-1}
.ctx-ok{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-3);cursor:pointer}
.ctx-ok input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--accent)}
.ctx-err{font-size:13px;color:#F3A3A3}
.ctx-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;margin-top:10px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mint) 40%,transparent)}
.ctx-dck{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#0A0A10;background:var(--mint);margin-bottom:6px}
.ctx-done b{font-size:22px;letter-spacing:-.02em}.ctx-done p{color:var(--ink-2);font-size:14.5px;max-width:34ch}
[data-theme="light"] .ctx-err{color:#B42318}
@media (max-width:640px){.ctx-cg{grid-template-columns:1fr}}
.ctx-done[hidden],.ctx-cf[hidden],#ctx-p-pro .ct-go[hidden],#ctx-p-pro .ct-ways[hidden],#ctx-p-pro [hidden]{display:none!important}
/* Héro : contenu centré verticalement dans l'écran (sous la barre de navigation) */
@media (min-width:901px){
  .hero-pin .hero-sticky{align-items:center!important;padding-top:84px!important;padding-bottom:0!important;box-sizing:border-box}
  .hero-pin .hero-sticky > .wrap{translate:0 -54px!important;width:100%}
  .hero-pin .hero-grid{display:flex!important;justify-content:center;text-align:center}
}

/* ===== Pied de page : plus de carte claire, il prolonge la page ===== */
footer{padding:clamp(80px,12vh,140px) 0 34px!important;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border) 20%,var(--glass-border) 80%,transparent)}
footer::after{content:"";position:absolute;left:50%;top:0;width:min(900px,80vw);height:260px;translate:-50% 0;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 60% at 50% 0%,color-mix(in srgb,var(--lav) 14%,transparent),transparent 75%)}
footer .foot-card{background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;border-radius:0!important}
footer .foot-card::before,footer .foot-card::after{display:none!important}
footer .foot{grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:48px}
footer .foot .brand .w{background:var(--ink);color:var(--bg);border-radius:10px;width:36px;height:36px}
footer .foot .brand b{font-size:17px}
footer .foot .brand small{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}
footer .foot .desc{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:32ch}
footer .foot h4{color:var(--ink-3)!important;margin-bottom:18px}
footer .foot ul{gap:11px;font-size:14.5px}
footer .foot ul a{color:var(--ink-2);position:relative}
footer .foot ul a:hover{color:var(--ink)}
footer .foot-bottom{margin-top:64px;border-top:1px solid var(--glass-line);color:var(--ink-3)}
@media (max-width:900px){footer .foot{grid-template-columns:1fr 1fr;gap:32px}footer .foot > div:first-child{grid-column:1/-1}}
footer .foot{grid-template-columns:1.4fr 1.6fr 1fr 1fr!important}
footer .foot > div:nth-child(2) ul{display:grid!important;grid-template-columns:1fr 1fr;column-gap:28px}
footer .foot .brand small{font-size:10px!important}
@media (max-width:900px){footer .foot{grid-template-columns:1fr 1fr!important}footer .foot > div:nth-child(2){grid-column:1/-1}}

/* ===== Pied de page minimal, centré, sans blocs ===== */
footer{padding:clamp(90px,14vh,150px) 0 30px!important}
.ft2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.ft2-brand{display:inline-flex;align-items:center;gap:12px;font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ft2-brand .w{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:700;background:var(--ink);color:var(--bg)}
.ft2-tag{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;color:var(--ink-2);max-width:30ch}
.ft2-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:10px;font-size:14.5px}
.ft2-nav a,.ft2-contact a,.ft2-bot a{color:var(--ink-2);transition:color .2s}
.ft2-nav a:hover,.ft2-contact a:hover,.ft2-bot a:hover{color:var(--ink)}
.ft2-contact{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:14.5px;color:var(--ink-3)}
.ft2-bot{width:100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:46px;padding-top:20px;border-top:1px solid var(--glass-line);font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.ft2-bot a{color:var(--ink-3)}
@media (max-width:700px){.ft2-bot{justify-content:center;text-align:center}}
footer .ft2-brand{font-size:28px!important;font-weight:600!important}
footer .ft2-tag{font-size:clamp(20px,1.8vw,26px)!important;line-height:1.3!important;max-width:none!important;color:var(--ink)!important;letter-spacing:-.03em}
footer .ft2-nav,footer .ft2-contact{font-size:14.5px!important}
footer .ft2-bot,footer .ft2-bot a{font-size:11.5px!important;font-family:var(--f-mono)!important}

/* ===== Arrêt sur « Vous hésitez ? » ===== */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #marques .qc-pin.on{height:calc(170 * 1vh / var(--z,1));margin-top:clamp(40px,8vh,90px)}
  #marques .qc-pin.on .qc-stick{position:sticky;top:0;height:calc(100 * 1vh / var(--z,1));display:grid;place-items:center}
  #marques .qc-pin.on .quiz-cta{margin:0 auto!important;scale:calc(.92 + .14 * var(--qk,0));opacity:calc(.35 + .65 * var(--qk,0));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 45%,transparent),0 30px 90px -30px color-mix(in srgb,var(--lav) calc(40% + 50% * var(--qk,0)),transparent)!important}
  #marques .qc-pin.on .quiz-cta.reveal{translate:none!important;filter:none!important}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){#marques .qc-pin.on{margin-top:-6vh}}
/* « Pensées pour vos équipes. » : dégradé plus marqué (lavande → bleu ciel → menthe → citron) */
.hero h1 .grad,.hero h1 .grad > i{background-image:linear-gradient(92deg,#B9A2FF 0%,#8FB8FF 30%,#7FE3CC 62%,#E2F38E 100%)!important;background-size:200% 100%!important}
[data-theme="light"] .hero h1 .grad,[data-theme="light"] .hero h1 .grad > i{background-image:linear-gradient(92deg,#4B2BD6 0%,#2F6FE0 35%,#0E9C82 70%,#6A8F00 100%)!important}
/* « Vous hésitez ? » arrive juste après les offres, vite */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #marques .qc-pin.on{margin-top:calc(-34 * 1vh / var(--z,1))!important;height:calc(140 * 1vh / var(--z,1))}
  #marques .qc-pin.on .quiz-cta{transition:scale .35s cubic-bezier(.2,1.3,.4,1),opacity .3s}
}

/* Logos clients : chacun une seule fois. Sans doublon, plus de défilement en boucle : la rangée est centrée, et passe à la ligne sur petit écran. */
.ref-logos .track{animation:none!important}
@media (max-width:900px),(prefers-reduced-motion:reduce){.ref-logos .track{width:auto;flex-wrap:wrap;justify-content:center;transform:none!important}}

/* izy Factory : violet plus vif et plus moderne sur les titres de la plongée (mode sombre) */
html:not([data-theme="light"]) .dive .w-factory .w-title span,html:not([data-theme="light"]) .dive.o-factory .fx-title span{background-image:linear-gradient(100deg,#C9B8FF 0%,#A58BFF 45%,#7B4DFF 100%)!important}

/* Plongée des 3 offres : le haut de chaque offre occupe l'écran sous la barre, contenu centré verticalement */
@media (min-width:901px) and (min-height:600px){
  .dive .world > .fx-hero{min-height:calc(100dvh - 66px)!important;align-content:center;box-sizing:border-box;padding-top:140px!important}
  /* Studio, Solutions : centrés par assets/offres-wahou.js (bloc + chiffres collés, ensemble au milieu de l'écran) */
}

/* ===== Plongée des offres : effet d'entrée « wahou » (assets/offres-wahou.js) ===== */
.fac-visual,.stu-visual,.so-illu{isolation:isolate;transition:rotate .5s cubic-bezier(.2,.8,.2,1)}
.wow-halo{position:absolute;inset:-18% -14%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--oc) 55%,transparent),color-mix(in srgb,var(--oc2,var(--oc)) 22%,transparent) 55%,transparent 75%);
  filter:blur(40px);opacity:.75;animation:wowBreath 6s ease-in-out infinite}
[data-theme="light"] .wow-halo{opacity:.45}
@keyframes wowBreath{50%{scale:1.12;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .world.wow-in :is(.fx-copy,.w-copy) > *{animation:wowRise .9s cubic-bezier(.2,.9,.2,1) both}
  .world.wow-in :is(.fx-copy,.w-copy) > :nth-child(2){animation-delay:.08s}
  .world.wow-in :is(.fx-copy,.w-copy) > :nth-child(3){animation-delay:.2s}
  .world.wow-in :is(.fx-copy,.w-copy) > :nth-child(n+4){animation-delay:.3s}
  .world.wow-in :is(.fx-title,.w-title) span{background-size:220% 100%!important;animation:wowSheen 2.4s cubic-bezier(.3,.7,.2,1) .35s both}
  .world.wow-in :is(.fac-visual,.stu-visual,.so-illu){animation:wowFly 1.2s cubic-bezier(.16,1,.3,1) .15s both}
  .world.wow-in .fx-kpis > *{animation:wowRise .8s cubic-bezier(.2,.9,.2,1) both}
  .world.wow-in .fx-kpis > :nth-child(1){animation-delay:.4s}
  .world.wow-in .fx-kpis > :nth-child(2){animation-delay:.52s}
  .world.wow-in .fx-kpis > :nth-child(3){animation-delay:.64s}
}
@keyframes wowRise{from{opacity:0;translate:0 34px;filter:blur(12px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes wowSheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes wowFly{0%{opacity:0;translate:120px 30px;scale:.86;filter:blur(10px)}60%{opacity:1;filter:none}100%{opacity:1;translate:0 0;scale:1}}
/* Tailles des logos ajoutés (SmartDiet est carré, CyberLeague large) */
.ref-logos .rlg img[alt="SmartDiet"]{height:64px!important}
.ref-logos .rlg img[alt="Klesia"]{height:30px!important}
.ref-logos .rlg img[alt="CyberLeague"]{height:38px!important}

/* « Vous hésitez ? » : son conteneur fixé (plein écran) chevauche le bas des 3 portes et avalait le clic sur « Plonger ».
   Le conteneur laisse passer les clics ; seul l'encart reste cliquable. */
.qc-stick,.qc-pin{pointer-events:none}
.qc-stick .quiz-cta,.qc-stick .quiz-cta *{pointer-events:auto}

/* ===== « Vous hésitez ? » : conclusion des trois portes, plus d'arrêt plein écran ===== */
#marques .qc-pin,#marques .qc-pin.on{height:auto!important;margin-top:0!important}
#marques .qc-pin .qc-stick,#marques .qc-pin.on .qc-stick{position:relative!important;top:auto!important;height:auto!important;display:block!important}
#marques .qc-pin .quiz-cta,#marques .qc-pin.on .quiz-cta{--qk:1!important;scale:1!important;opacity:1!important;margin-top:0!important}


/* Encart moderne : bordure lumineuse aux couleurs des 3 marques qui tourne, puces des marques qui s'allument à tour de rôle */
@property --qa{syntax:"<angle>";inherits:false;initial-value:0deg}
#marques .quiz-cta{margin-top:clamp(48px,8vh,88px)!important;max-width:880px!important;padding:26px 26px 26px 30px!important;border-radius:26px!important;isolation:isolate;
  background:color-mix(in srgb,var(--bg,#07080B) 78%,transparent)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 80px -40px rgba(91,67,214,.55)!important}
#marques .quiz-cta::before{content:""!important;position:absolute;inset:0;border-radius:inherit;padding:1.5px!important;pointer-events:none;
  background:conic-gradient(from var(--qa),#BBA8F8,#9BE8D4,#E2F38E,#BBA8F8)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:qcSpin 6s linear infinite}
[data-theme="light"] #marques .quiz-cta{background:rgba(255,255,255,.88)!important;box-shadow:0 24px 60px -34px rgba(91,67,214,.45)!important}
[data-theme="light"] #marques .quiz-cta::before{background:conic-gradient(from var(--qa),#6B4EE6,#13A38A,#9AB52A,#6B4EE6)!important}
@keyframes qcSpin{to{--qa:360deg}}
#marques .quiz-cta p b{font-size:clamp(22px,2vw,28px)!important}
.qc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.qc-chips i{font-style:normal;font:500 12.5px/1 var(--f-mono,"Geist Mono",monospace);letter-spacing:.02em;padding:7px 11px;border-radius:999px;color:var(--ink-2);
  background:var(--glass-in,rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px var(--glass-border,rgba(255,255,255,.1));animation:qcChip 4.5s ease-in-out infinite}
.qc-chips .c1{--cc:#BBA8F8}.qc-chips .c2{--cc:#9BE8D4;animation-delay:1.5s}.qc-chips .c3{--cc:#E2F38E;animation-delay:3s}
[data-theme="light"] .qc-chips .c1{--cc:#6B4EE6}[data-theme="light"] .qc-chips .c2{--cc:#13A38A}[data-theme="light"] .qc-chips .c3{--cc:#7E9A12}
[data-theme="light"] .qc-chips i{background:#F6F6F9;box-shadow:inset 0 0 0 1px rgba(14,16,22,.08)}
@keyframes qcChip{0%,40%,100%{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--glass-border,rgba(14,16,22,.08))}12%,28%{color:var(--cc);box-shadow:inset 0 0 0 1.5px var(--cc),0 0 22px -6px var(--cc)}}
@media (prefers-reduced-motion:reduce){#marques .quiz-cta::before,.qc-chips i{animation:none}}
@media (max-width:900px){#marques .quiz-cta{margin-top:40px!important}}

/* Références : le reflet (-webkit-box-reflect) sur les cartes 3D faisait tomber la page à ~15 images/s.
   On le remplace par une ombre douce au sol, quasi gratuite pour le navigateur. */
.vr-img{-webkit-box-reflect:none!important}
.vr-scr::after{content:"";position:absolute;left:10%;right:10%;bottom:-34px;height:34px;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent)}
[data-theme="light"] .vr-scr::after{background:radial-gradient(closest-side,rgba(40,36,90,.16),transparent)}

/* Portes des marques : les portes latérales sont reculées en 3D, derrière le plan de leur conteneur, qui avalait le clic
   (sur « Plonger » notamment). Le conteneur laisse passer les clics, les portes restent cliquables partout. */
#marques,#marques *{pointer-events:none}
#marques :is(a,button,input,select,textarea,label,[role="button"],[tabindex],.door,.door *,.quiz-cta,.quiz-cta *){pointer-events:auto}

/* Cartes des 3 marques : le flou d'arrière-plan est ignoré par le navigateur sur des éléments en 3D.
   On donne un vrai verre dépoli par l'opacité pour garder la lecture nette au-dessus des bulles. */
#marques .door{background:linear-gradient(160deg,rgba(44,42,62,.86),rgba(16,15,24,.9) 60%)!important}
[data-theme="light"] #marques .door{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(248,248,252,.9) 60%)!important}

/* Plongée : bulles de verre légères aussi sur izy Studio (Factory et Solutions les avaient déjà) */
.dive.o-studio.settled .dv-bub{opacity:1}

/* ===== Plongée : la barre prend le style de celle de la page d'accueil (pilule de verre flottante) ===== */
.dive .dive-bar{width:min(1240px,calc(100% - 32px))!important;height:56px;margin:11px auto 0!important;top:11px!important;padding:0 6px 0 14px!important;border-radius:999px!important;
  background-image:linear-gradient(rgba(255,255,255,.075),rgba(255,255,255,.03))!important;border:0!important;
  backdrop-filter:blur(22px) saturate(1.6)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.28),inset 0 0 0 .5px rgba(255,255,255,.1),0 8px 32px -10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.25)!important}
[data-theme="light"] .dive .dive-bar{background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.55))!important;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(14,16,22,.08),0 8px 32px -14px rgba(40,36,90,.28),0 1px 2px rgba(14,16,22,.06)!important}
/* Onglets : sélecteur discret, l'actif souligné par la couleur de sa marque (plus de gros bouton lumineux) */
.dive .dive-tabs{background:transparent!important;border:0!important;padding:3px!important;gap:2px!important}
.dive .dive-tabs button{padding:7px 14px!important;font-size:13.5px!important;color:rgba(255,255,255,.62)!important;box-shadow:none!important;background:transparent!important}
.dive .dive-tabs button:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
.dive .dive-tabs button.on{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--oc) 55%,transparent)!important}
.dive .dive-tabs button.on em{color:var(--oc)!important}
.dive .dive-tabs button.on i{background:var(--oc)!important;opacity:1;box-shadow:0 0 10px var(--oc)}
[data-theme="light"] .dive .dive-tabs button{color:#4B5060!important}
[data-theme="light"] .dive .dive-tabs button:hover{color:#0E1016!important;background:rgba(14,16,22,.05)!important}
[data-theme="light"] .dive .dive-tabs button.on{background:#fff!important;color:#0E1016!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--oc2,var(--oc)) 60%,transparent),0 2px 8px -2px rgba(14,16,22,.12)!important}
[data-theme="light"] .dive .dive-tabs button.on em{color:var(--oc2,var(--oc))!important}
/* Boutons ronds (thème, fermer) : comme ceux de l'accueil */
.dive .dive-bar .icon-btn{width:40px;height:40px;background:transparent!important;border:0!important;box-shadow:none!important}
.dive .dive-bar .icon-btn:hover{background:rgba(255,255,255,.08)!important}
[data-theme="light"] .dive .dive-bar .icon-btn:hover{background:rgba(14,16,22,.06)!important}
@media (max-width:760px){.dive .dive-bar{height:52px;width:calc(100% - 24px)!important;top:8px!important;margin-top:8px!important}}

/* Barre des offres compactée au défilement de la plongée */
.dive .dive-bar{transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),margin .45s,top .45s}
.dive .dive-bar.slim{width:min(1040px,calc(100% - 32px))!important;height:46px;top:8px!important;margin-top:8px!important}
.dive .dive-bar.slim .dive-tabs button{padding:5px 12px!important;font-size:13px!important}
.dive .dive-bar.slim .icon-btn{width:34px;height:34px}
.dive .dive-bar.slim .brand img{width:26px;height:26px}

/* Bulles de fond animées (héro de l'accueil et plongée des offres) : plus discrètes */
html body .hero-sticky canvas.stars.bg-fixed,html body canvas.stars{opacity:calc(var(--bgf,1) * .35)!important}
.dive.settled .dv-bub{opacity:.32!important}

/* ===== Apparitions sobres « à la Apple » : court glissement depuis le côté du bloc, léger flou qui se dissipe,
   décélération longue, sans rotation ni rebond ===== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal:not(.door):not(.quiz-cta){translate:calc((1 - var(--sp,0)) * var(--dx,0) * 48px) calc((1 - var(--sp,0)) * var(--dy,1) * 32px)}
  .wow-side{opacity:0;filter:blur(8px);transition:opacity 1s cubic-bezier(.16,1,.3,1),translate 1.2s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)}
  .wow-side[data-from="L"]{translate:-48px 0}
  .wow-side[data-from="R"]{translate:48px 0}
  .wow-side[data-from="B"]{translate:0 32px}
  .wow-side.in{opacity:1;translate:0 0;filter:none}
  .wow-side.reveal:not(.in){opacity:0!important}
  .wow-side.reveal.in{opacity:1!important;translate:0 0!important;filter:none!important}
  .wow-side.reveal[data-from="L"]:not(.in){translate:-48px 0!important}
  .wow-side.reveal[data-from="R"]:not(.in){translate:48px 0!important}
  #entreprise .eq-head > .wow-side{transition:opacity 1s cubic-bezier(.16,1,.3,1),translate 1.2s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1)!important}
  #entreprise .eq-head > .wow-side[data-from="L"]:not(.in){translate:-48px 0!important;opacity:0!important;filter:blur(8px)!important}
  #entreprise .eq-head > .wow-side[data-from="R"]:not(.in){translate:48px 0!important;opacity:0!important;filter:blur(8px)!important}
  #entreprise .eq-head > .wow-side.in{translate:0 0!important;opacity:1!important;filter:none!important}
  /* Convictions : les cartes latérales glissent légèrement depuis leur côté */
  .cvm-cards .cvm-card:nth-child(1){translate:calc((1 - var(--k,1)) * -48px) 0!important}
  .cvm-cards .cvm-card:nth-child(3){translate:calc((1 - var(--k,1)) * 48px) 0!important}
}

/* ===== « Nos clients » : le chiffre (assets/clients-chiffre.js) ===== */
.cf-sec{position:relative}
.cf-pin{height:250vh}
.cf-st{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0 20px}
.cf-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.cf-num{font-size:clamp(170px,28vw,400px);font-weight:700;letter-spacing:-.08em;line-height:.8;margin-top:10px;
  background:linear-gradient(180deg,#fff 30%,#6E6E73);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:scale(calc(1.2 - .2 * var(--q,1)));font-variant-numeric:tabular-nums}
[data-theme="light"] .cf-num{background-image:linear-gradient(180deg,#0E1016 30%,#848999)}
.cf-lead{margin-top:22px;font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;max-width:760px}
.cf-lead span{color:var(--ink-3)}
.cf-lead .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cf-row{margin-top:56px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 46px;max-width:1040px}
.cf-lg{height:24px;max-width:130px;object-fit:contain;filter:brightness(0) invert(1);opacity:0;translate:0 14px;transition:opacity .8s cubic-bezier(.16,1,.3,1),translate 1s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] .cf-lg{filter:brightness(0)}
.cf-lg.in{opacity:.7;translate:0 0}
.cf-lg.in:hover{opacity:1}
.cf-lg[alt="SmartDiet"]{height:40px}.cf-lg[alt="Klesia"]{height:20px}.cf-lg[alt="Entreprise du Futur"]{height:28px}.cf-lg[alt="OPNR"]{height:30px}
.cf-still .cf-pin{height:auto}.cf-still .cf-st{position:relative;height:auto;padding:110px 20px}.cf-still .cf-num{transform:none}
/* Le dégradé est découpé au texte : on laisse de la place aux glyphes (sinon le dernier chiffre est rogné) */
.cf-num{padding:0 .12em .04em;letter-spacing:-.06em;max-width:100%;white-space:nowrap}
.cf-lead{max-width:min(760px,100%);text-wrap:balance}
/* Le chiffre ne dépasse jamais sa taille finale (il ne passe plus par-dessus « Nos clients ») et garde sa marge */
.cf-num{transform:scale(calc(.92 + .08 * var(--q,1)))!important;transform-origin:50% 100%;margin-top:clamp(28px,5vh,56px)!important}
/* Logos clients un peu plus grands */
.cf-row{gap:26px 56px!important;max-width:1180px!important}
.cf-lg{height:32px!important;max-width:180px!important}
.cf-lg[alt="SmartDiet"]{height:54px!important}.cf-lg[alt="Klesia"]{height:27px!important}.cf-lg[alt="Entreprise du Futur"]{height:38px!important}
.cf-lg[alt="OPNR"]{height:40px!important}.cf-lg[alt="CyberLeague"]{height:40px!important;max-width:200px!important}.cf-lg[alt="ABGI"]{height:30px!important}

/* ===== « Nos marques » : la gamme à la Apple ===== */
#marques{padding:clamp(110px,16vh,180px) 0 clamp(60px,10vh,120px)}
.gm-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.gm-h{font-size:clamp(40px,6vw,88px);font-weight:650;letter-spacing:-.055em;line-height:1;text-align:center;margin-top:14px}
.gm-h span{color:var(--ink-3)}
.gm-row{margin:clamp(60px,9vh,96px) auto 0;max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr)}
.gm-col{padding:10px 30px 30px;text-align:center;border-left:1px solid var(--glass-line,rgba(255,255,255,.08))}
.gm-col:first-child{border-left:0}
.gm-bub{display:block;position:relative;width:120px;height:120px;margin:0 auto 34px;border-radius:44% 56% 52% 48%/48% 42% 58% 52%;animation:gmMor 9s ease-in-out infinite;
  background:radial-gradient(circle at 50% 50%,rgba(14,16,22,.2) 0,color-mix(in srgb,var(--c) 16%,#15171f) 70%,color-mix(in srgb,var(--c) 50%,#fff) 100%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,#fff),0 0 40px -6px color-mix(in srgb,var(--c) 45%,transparent)}
.gm-bub::after{content:"";position:absolute;inset:8% 40% 52% 14%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%)}
.gm-col:nth-child(2) .gm-bub{animation-delay:-3s}.gm-col:nth-child(3) .gm-bub{animation-delay:-6s}
@keyframes gmMor{50%{border-radius:56% 44% 40% 60%/55% 58% 42% 45%}}
[data-theme="light"] .gm-bub{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6) 0,color-mix(in srgb,var(--c) 26%,#fff) 70%,color-mix(in srgb,var(--c) 70%,#5B6070) 100%);
  box-shadow:inset 0 0 0 1.5px #fff,0 18px 40px -16px color-mix(in srgb,var(--c) 70%,transparent)}
.gm-tag{display:block;margin-bottom:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.gm-col h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;font-weight:650}
.gm-col h3 em{font-style:normal;font-weight:400;color:var(--c)}
[data-theme="light"] .gm-col h3 em{color:color-mix(in srgb,var(--c) 55%,#000)}
.gm-col p{margin:14px auto 22px;color:var(--ink-2);font-size:17px;line-height:1.45;max-width:280px}
.gm-go{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;font:500 17px var(--f,"Geist",sans-serif);color:var(--c)}
[data-theme="light"] .gm-go{color:color-mix(in srgb,var(--c) 55%,#000)}
.gm-go::after{content:"›";font-size:22px;line-height:1;transition:translate .3s}
.gm-go:hover::after{translate:3px 0}
@media (prefers-reduced-motion:no-preference){
  .gm-col{opacity:0;translate:0 30px;transition:opacity 1s cubic-bezier(.16,1,.3,1),translate 1.2s cubic-bezier(.16,1,.3,1)}
  .gm-row.in .gm-col{opacity:1;translate:0 0}
  .gm-row.in .gm-col:nth-child(2){transition-delay:.16s}.gm-row.in .gm-col:nth-child(3){transition-delay:.32s}
}
@media (max-width:860px){.gm-row{grid-template-columns:1fr}.gm-col{border-left:0;border-top:1px solid var(--glass-line,rgba(255,255,255,.08));padding-top:44px}.gm-col:first-child{border-top:0}}
#marques .doors[hidden]{display:none!important}
.gm-col,.gm-col .gm-tag{text-align:center!important}
.gm-col .gm-tag{width:100%}
.gm-col .gm-tag{justify-content:center!important;display:flex!important}

/* Bulles de la gamme : elles flottent, respirent et se déforment, chacune à son rythme ; au survol elles s'animent davantage */
@media (prefers-reduced-motion:no-preference){
  .gm-bub{animation:gmMor2 7s ease-in-out infinite,gmFloat 6s ease-in-out infinite,gmBreath 5s ease-in-out infinite!important;
    transition:scale .8s cubic-bezier(.16,1,.3,1),box-shadow .6s,translate .9s cubic-bezier(.16,1,.3,1)}
  .gm-col:nth-child(2) .gm-bub{animation-delay:-2.4s,-1.8s,-3s!important;animation-duration:8s,7s,6s!important}
  .gm-col:nth-child(3) .gm-bub{animation-delay:-4.8s,-3.6s,-1.2s!important;animation-duration:6.5s,5.5s,5.5s!important}
  .gm-col:hover .gm-bub{animation-duration:3s,3.2s,2.4s!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 60%,#fff),0 0 60px -4px color-mix(in srgb,var(--c) 70%,transparent)}
}
@keyframes gmMor2{0%,100%{border-radius:44% 56% 52% 48%/48% 42% 58% 52%}33%{border-radius:58% 42% 40% 60%/55% 60% 40% 45%}66%{border-radius:46% 54% 62% 38%/40% 52% 48% 60%}}
@keyframes gmFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:6deg}}
@keyframes gmBreath{0%,100%{scale:1}50%{scale:1.07}}
.gm-bub{transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s!important}

/* Logos clients : une seule ligne qui défile en continu (la série est doublée pour boucler sans trou) */
.cf-rail{width:100vw!important;max-width:none!important;display:block!important;margin-top:60px!important;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1)}
.cf-rail.in{opacity:1}
.cf-track{display:flex;align-items:center;gap:72px;width:max-content;padding:10px 0;animation:cfRail 38s linear infinite}
.cf-rail:hover .cf-track{animation-play-state:paused}
@keyframes cfRail{to{translate:calc(-50% - 36px) 0}}
.cf-rail .cf-lg{opacity:.7!important;translate:none!important;flex:none}
.cf-rail .cf-lg:hover{opacity:1!important}
.cf-lg[data-alt="SmartDiet"]{height:54px!important}.cf-lg[data-alt="Klesia"]{height:27px!important}.cf-lg[data-alt="Entreprise du Futur"]{height:38px!important}
.cf-lg[data-alt="OPNR"]{height:40px!important}.cf-lg[data-alt="CyberLeague"]{height:40px!important;max-width:200px!important}.cf-lg[data-alt="ABGI"]{height:30px!important}
@media (prefers-reduced-motion:reduce){.cf-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.cf-track .cf-lg[aria-hidden="true"]{display:none}}

/* « Vous hésitez entre les trois ? » : verre dépoli (translucide, reflet, lueurs pastel), bordure plus fine et plus douce */
#marques .quiz-cta{
  background:
    linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.06) 100%),
    radial-gradient(60% 120% at 0% 100%,rgba(187,168,248,.20),transparent 60%),
    radial-gradient(50% 120% at 100% 0%,rgba(155,232,212,.16),transparent 60%),
    rgba(18,18,26,.42)!important;
  backdrop-filter:blur(26px) saturate(1.5)!important;-webkit-backdrop-filter:blur(26px) saturate(1.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06),0 30px 80px -40px rgba(91,67,214,.55)!important}
#marques .quiz-cta::before{padding:1px!important;opacity:.7}
#marques .quiz-cta .qc-orb{background:rgba(255,255,255,.06)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08)!important;backdrop-filter:blur(10px)}
#marques .quiz-cta .qc-chips i{background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
[data-theme="light"] #marques .quiz-cta{
  background:
    linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.7) 100%),
    radial-gradient(60% 120% at 0% 100%,rgba(187,168,248,.35),transparent 60%),
    radial-gradient(50% 120% at 100% 0%,rgba(155,232,212,.3),transparent 60%)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 24px 60px -34px rgba(91,67,214,.4)!important}

/* ===== « Nos clients » : les métiers qui défilent ===== */
.cf-metiers .cf-st{position:relative;height:auto;padding:clamp(110px,16vh,170px) 20px clamp(80px,12vh,130px)}
.cf-roll{margin-top:18px;font-size:clamp(32px,4.4vw,64px);font-weight:650;letter-spacing:-.05em;line-height:1.1;text-align:center}
.cf-sl{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;text-align:left;transition:width .8s cubic-bezier(.76,0,.24,1)}
.cf-words{display:block;transition:translate .9s cubic-bezier(.76,0,.24,1)}
.cf-words b{display:block;width:max-content;height:1.1em;font-weight:650;background:linear-gradient(92deg,#D4C8FF,#A6F0DC);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
[data-theme="light"] .cf-words b{background-image:linear-gradient(92deg,#6B4EE6,#13A38A)}
.cf-metiers .cf-rail{margin-top:clamp(56px,8vh,90px)!important}
.cf-metiers .cf-roll{font-size:clamp(32px,4.4vw,64px)!important;line-height:1.1!important}
.cf-metiers .cf-roll{font-size:clamp(40px,6vw,92px)!important}
#marques .qc-pin .quiz-cta,#marques .qc-pin.on .quiz-cta,#marques .quiz-cta{margin-top:clamp(100px,14vh,170px)!important}

/* ===== Entrée des 3 marques : les bulles éclosent (flou → net, petit → grand, léger rebond), puis le texte monte élément par élément ===== */
@media (prefers-reduced-motion:no-preference){
  .gm-row .gm-col{opacity:1!important;translate:none!important}
  .gm-row .gm-bub{opacity:0;filter:blur(14px);transform:scale(.3) translateY(50px)}
  .gm-row .gm-col > :not(.gm-bub){opacity:0;translate:0 22px;filter:blur(6px)}
  .gm-row.in .gm-bub{opacity:1;filter:none;transform:none;
    transition:transform 1.4s cubic-bezier(.34,1.45,.64,1),filter 1s cubic-bezier(.16,1,.3,1),opacity .8s ease,box-shadow .6s!important}
  .gm-row.in .gm-col > :not(.gm-bub){opacity:1;translate:0 0;filter:none;transition:opacity .9s cubic-bezier(.16,1,.3,1),translate 1.1s cubic-bezier(.16,1,.3,1),filter .9s}
  /* cascade : colonne par colonne, puis élément par élément dans la colonne */
  .gm-row.in .gm-col:nth-child(1) .gm-bub{transition-delay:0s}
  .gm-row.in .gm-col:nth-child(2) .gm-bub{transition-delay:.18s!important}
  .gm-row.in .gm-col:nth-child(3) .gm-bub{transition-delay:.36s!important}
  .gm-row.in .gm-col > .gm-tag{transition-delay:calc(var(--d) + .35s)}
  .gm-row.in .gm-col > h3{transition-delay:calc(var(--d) + .45s)}
  .gm-row.in .gm-col > p{transition-delay:calc(var(--d) + .55s)}
  .gm-row.in .gm-col > .gm-go{transition-delay:calc(var(--d) + .65s)}
  .gm-col:nth-child(1){--d:0s}.gm-col:nth-child(2){--d:.18s}.gm-col:nth-child(3){--d:.36s}
  /* une fois entrées, le suivi de la souris reste doux */
  .gm-row.in.done .gm-bub{transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s!important}
}

/* Bulles des marques : formes beaucoup plus changeantes (galet, poire, haricot…), plus vivantes */
@media (prefers-reduced-motion:no-preference){
  .gm-bub{animation:gmMor3 5s ease-in-out infinite,gmFloat 6s ease-in-out infinite,gmBreath 4.5s ease-in-out infinite!important}
  .gm-col:nth-child(2) .gm-bub{animation-duration:5.8s,7s,5.2s!important;animation-delay:-1.9s,-1.8s,-3s!important}
  .gm-col:nth-child(3) .gm-bub{animation-duration:4.6s,5.5s,4.8s!important;animation-delay:-3.4s,-3.6s,-1.2s!important}
  .gm-col:hover .gm-bub{animation-duration:2.4s,3s,2.2s!important}
}
@keyframes gmMor3{
  0%,100%{border-radius:44% 56% 52% 48%/48% 42% 58% 52%}
  20%{border-radius:68% 32% 46% 54%/38% 60% 40% 62%}
  40%{border-radius:36% 64% 70% 30%/56% 34% 66% 44%}
  60%{border-radius:58% 42% 32% 68%/66% 52% 48% 34%}
  80%{border-radius:30% 70% 56% 44%/44% 70% 30% 56%}}
/* Moins de marge avant « Vous hésitez entre les trois ? » */
#marques .qc-pin .quiz-cta,#marques .qc-pin.on .quiz-cta,#marques .quiz-cta{margin-top:clamp(56px,8vh,90px)!important}

/* ===== Même espace entre les 3 premiers blocs : héro → « Nos clients » → « Trois marques » (--sec-gap) ===== */
:root{--sec-gap:clamp(320px,50vh,540px);--hero-top:calc(clamp(180px,26vh,300px) + 40px)}
.hero.hero-pin,.hero-pin .hero-sticky{height:auto!important;min-height:0!important}
.hero-pin .hero-sticky{padding:var(--hero-top) 0 var(--sec-gap)!important}
#confiance{margin-top:0!important}
.cf-metiers .cf-st{padding:0 20px var(--sec-gap)!important}
#marques{padding-top:0!important}
.hb-blob{width:min(80vmin,760px)!important}
#confiance.cf-sec{padding:0!important}
/* compensations mesurées (hauteur de ligne de l'intitulé, rembourrage de la ligne de logos) pour des écarts strictement égaux */
.hero-pin .hero-sticky{padding-bottom:calc(var(--sec-gap) - 25px)!important}
.cf-metiers .cf-st{padding-bottom:calc(var(--sec-gap) + 28px)!important}
/* la bulle reste centrée sur le contenu du héro, pas sur le héro agrandi par l'espace du bas */
.hero-pin .hb-blob{top:calc(50% + (var(--hero-top) - var(--sec-gap) + 25px) / 2)!important}
/* encart « Vous hésitez » : plus d'ombre violette, une ombre neutre légère */
:root:not([data-theme="light"]) #marques .quiz-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06),0 24px 50px -30px rgba(0,0,0,.6)!important}
:root:not([data-theme="light"]) #marques #quizStart{box-shadow:0 10px 24px -14px rgba(0,0,0,.5)!important}
/* « Vous vous reconnaissez… » : plus d'arrêt au défilement, la section défile normalement */
#pour-qui .ss-pin{height:auto!important}
#pour-qui .ss-stk{position:static!important;height:auto!important;padding-top:0!important}
/* souris normale : plus d'anneau ni de halo qui suivent le curseur avec retard (décalage au clic) */
.cursor-ring,.cursor-glow{display:none!important}
/* encart « Vous hésitez » : vrai effet de verre — des taches de couleur flottent derrière, la carte les dépolit */
#marques .qc-stick{position:relative;isolation:isolate}
#marques .qc-stick::before{content:"";position:absolute;inset:-40px 6%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(30% 60% at 18% 60%,rgba(165,139,255,.55),transparent 70%),
    radial-gradient(28% 70% at 52% 40%,rgba(155,232,212,.45),transparent 70%),
    radial-gradient(26% 60% at 84% 62%,rgba(226,243,142,.4),transparent 70%);
  filter:blur(26px);animation:qcBlobs 12s ease-in-out infinite alternate}
@keyframes qcBlobs{to{transform:translateX(4%) scale(1.06);filter:blur(30px) hue-rotate(25deg)}}
:root:not([data-theme="light"]) #marques .quiz-cta{
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 62%,rgba(255,255,255,.09) 100%),rgba(20,20,30,.32)!important;
  backdrop-filter:blur(30px) saturate(1.8) brightness(1.05)!important;-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.05)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 40px rgba(255,255,255,.04),0 24px 50px -30px rgba(0,0,0,.6)!important}
[data-theme="light"] #marques .qc-stick::before{opacity:.6}
@media (prefers-reduced-motion:reduce){#marques .qc-stick::before{animation:none}}
#marques .qc-stick::before{inset:-24px auto!important;left:50%!important;width:min(820px,92%);translate:-50% 0}
/* R-14 : « Parlons de ce que nous pouvons construire. » — hors animation (mobile, mouvement réduit), les mots découpés
   héritaient du display:block de « .h2s-title span » (un mot par ligne) ; sur mobile le titre tient en 3 lignes */
.ctx-head .h2s-title .ctx-w{display:inline-block}
@media (max-width:720px){#contact .ct-card .ctx-head .h2s-title{font-size:clamp(28px,8.2vw,38px)!important}}
/* R-15 : plongée izy Factory — la vitrine des références prenait 100vw, soit la largeur de la barre de défilement
   de l'overlay en trop (8 px, barre horizontale) ; elle s'étend désormais sur la largeur réelle de la plongée */
.dive .factory-more{container-type:inline-size}
@media (min-width:901px){.dive .factory-more .showcase.vr{width:100cqw;margin-left:calc(50% - 50cqw)}}