:root{--navy:#050d28;--ink:#0a1230;--purple:#7040ef;--lav:#f4f2ff;--line:#e7e8f2;--heading:'Poppins',Inter,Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,.logo,.btn,.eyebrow,.hero-chip strong,.process h3,.process-step,.stat strong,.stat b,.step-item h3,.step-num,.domain-title,.talents>b,.expertise-card b{font-family:var(--heading)}.wrap{width:min(1216px,calc(100% - 68px));margin:auto}.hero{min-height:820px;color:#fff;background:radial-gradient(ellipse at 49% 53%,#121e52 0,#071332 41%,#030a20 78%);overflow:hidden}.nav{height:84px;display:flex;align-items:center;gap:32px}.logo{font-size:27px;letter-spacing:.2px;line-height:1;color:white;text-decoration:none;white-space:nowrap;font-weight:900}.logo b{font-size:16px;color:#8258ff;letter-spacing:2px;margin-left:5px}.nav-links{display:flex;gap:40px;margin-left:auto}.nav a{font-size:14px;font-weight:700;color:#fff;text-decoration:none}.btn{font:700 14px inherit;border:0;border-radius:9px;padding:15px 20px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;transition:transform .2s,filter .2s;white-space:nowrap}.btn:hover,.expertise-card:hover,.resources a:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #b29cff;outline-offset:3px}.btn-purple{background:linear-gradient(115deg,#8055ff,#5c2cdb)}.btn-dark{background:#07142f;font-size:11px;padding:12px 14px}.btn svg,.play svg,.resources svg,.proof svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}.eyebrow{display:inline-block;border:1px solid #8054ff;border-radius:20px;padding:5px 11px;color:#ad95ff;font-size:11px;font-weight:700}.hero h1{font-size:66px;font-weight:800;line-height:.98;letter-spacing:-2.6px;margin:28px 0 25px}.hero h1 em,.lead b,em{font-style:normal;color:#7a4df4}.lead{font-size:17px;line-height:1.52;margin:0;font-weight:700}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:32px}.play{width:40px;height:40px;border:1px solid #7649ef;border-radius:50%;display:grid;place-items:center;color:#885dff}.play svg{width:15px;height:15px;fill:currentColor;stroke:none}.card{background:#111e3d;border:1px solid #26355b;border-radius:13px;box-shadow:0 12px 30px #0002}.process{background:#fff;color:var(--ink);overflow:hidden}.process h3{font-size:14px;margin:21px 21px 13px}.process-step{height:35px;padding:0 20px;display:flex;align-items:center;gap:11px;font-size:10.5px;font-weight:600}.process-step>span:nth-child(2){flex:1}.mini-icon{width:20px;height:20px;padding:4px;border:1px solid #d9d6f3;border-radius:50%;color:#6d45e7}.mini-icon svg,.check svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}.check{width:13px;color:#7247e7}.pending{width:10px;height:10px;border:1.5px solid #a98cf5;border-radius:50%}.current .mini-icon{border-color:#7a48ff;color:#7040ef}.progress{display:flex;gap:10px;align-items:center;padding:14px 21px}.progress>span{height:6px;border-radius:6px;background:#e5e1fb;flex:1;overflow:hidden}.progress i{display:block;height:100%;width:78%;background:#7040ef;border-radius:inherit}.progress b{font-size:11px;color:#7040ef}.talents{padding:17px 21px;background:#fafaff}.talents>b{font-size:11px}.avatars{display:flex;align-items:center;margin-top:10px}.avatar,.avatars strong{display:block;width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-5px;background-size:cover;background-position:center}.avatar-one{background:radial-gradient(circle at 50% 35%,#9b593c 0 17%,transparent 18%),radial-gradient(circle at 50% 38%,#1d1b27 0 28%,transparent 29%),linear-gradient(135deg,#1c244c 48%,#e2a16f 49% 63%,#874478 64%)}.avatar-two{background:radial-gradient(circle at 50% 34%,#d59162 0 17%,transparent 18%),radial-gradient(circle at 50% 30%,#38231e 0 29%,transparent 30%),linear-gradient(135deg,#704d55 48%,#f3b181 49% 63%,#222d5c 64%)}.avatar-three{background:radial-gradient(circle at 50% 35%,#a36745 0 17%,transparent 18%),radial-gradient(circle at 50% 30%,#1c1825 0 28%,transparent 29%),linear-gradient(135deg,#32395f 48%,#dd9c6f 49% 63%,#6f4967 64%)}.avatars strong{display:grid;place-items:center;width:37px;background:#f0effb;color:var(--ink);font-size:10px}.stat{padding:18px 20px;min-height:88px;display:flex;align-items:center;gap:17px}.stat-icon{width:43px;height:43px;color:#7d49ef}.stat-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8}.pink{color:#e650db}.stat strong{display:block;font-size:30px;line-height:1}.stat b{font-size:13px;display:block;margin-bottom:10px}.stat small{font-size:12px;font-weight:700;line-height:1.6}.section{padding:34px 0 52px}.section h2{font-size:22px;line-height:1.08;margin:0 0 25px}.expertise-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:8px}.expertise-card{min-height:180px;padding:15px 10px 13px;border:1px solid #eef0f8;border-radius:12px;box-shadow:0 8px 20px #19245b0e;display:flex;flex-direction:column;justify-content:flex-end;position:relative;color:var(--ink);text-decoration:none;transition:transform .2s,filter .2s}.expertise-card .domain-art{height:78px;margin-bottom:7px;display:grid;place-items:center;color:#252a63}.domain-art svg{width:62px;height:62px;stroke:currentColor;fill:none;stroke-width:1.65}.expertise-card b{font-size:11px;line-height:1.4}.circle{display:grid;place-items:center;border:1px solid #7040ef;border-radius:50%;color:#7040ef;width:21px;height:21px;margin:17px 2px 0 auto}.circle svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}.approach{background:var(--lav);border-radius:14px;padding:36px 30px;display:grid;grid-template-columns:25% 75%;align-items:center}.approach-intro h2{font-size:22px;line-height:1.15;margin:0 0 18px}.approach-intro p{font-size:13px;line-height:1.8;margin:0 0 20px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}.steps:before{content:"";position:absolute;top:59px;left:8%;right:8%;border-top:2px dotted #8664f3}.step-item{position:relative;z-index:1}.step-num{width:27px;height:27px;display:grid;place-items:center;margin:auto;border-radius:50%;background:#7040ef;color:#fff;font-size:11px;font-weight:700}.step-icon{width:67px;height:67px;display:grid;place-items:center;margin:8px auto 14px;border-radius:50%;background:#fff;box-shadow:0 7px 16px #26308a18;color:#111b47}.step-icon svg{width:31px;height:31px;stroke:currentColor;fill:none;stroke-width:1.75}.step-item h3{font-size:14px;margin:0 0 8px}.step-item p{margin:0;font-size:11px;line-height:1.5}.proof{margin:52px auto 0;padding:32px 36px;border-radius:14px;background:linear-gradient(115deg,#081430,#172965);color:#fff;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:35px}.proof h2{font-size:24px;line-height:1.12;margin:14px 0 0}.proof p{font-size:13px;line-height:1.7;margin:0}.proof a{color:#fff;font-size:12px;font-weight:700;text-decoration:none;display:flex;gap:10px;align-items:center}.light{border-color:#514e98;color:#b6b1de}.difference{text-align:center}.difference h2{margin-bottom:35px}.difference-grid{display:grid;grid-template-columns:repeat(5,1fr);text-align:left}.diff-item{padding:0 18px;border-right:1px solid var(--line);font-size:11px;line-height:1.65}.diff-item:last-child{border:0}.diff-icon{width:42px;height:42px;color:#222b64;float:left;margin:0 13px 8px 0}.diff-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}.diff-item b{display:block;line-height:1.5}.diff-item p{clear:both;padding-top:9px;margin:0}.resources{padding:30px 0 55px;text-align:center}.resources h2{font-size:22px;margin:0 0 6px}.resources p{font-size:13px}.resources>div{display:flex;justify-content:center;gap:10px;margin-top:22px}.resources a{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:13px 16px;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;transition:transform .2s,filter .2s}.cta{position:relative;overflow:hidden;background:linear-gradient(105deg,#081330,#0a1638);border-radius:14px;min-height:145px;color:#fff;display:flex;align-items:center;gap:30px;padding:22px 76px 22px 238px;margin-bottom:40px}.cta>img{position:absolute;left:0;bottom:-8px;width:225px;height:145px;object-fit:contain;object-position:left bottom;z-index:1;filter:drop-shadow(0 10px 18px rgba(113,64,239,.35));pointer-events:none}.cta>div{position:relative;z-index:2}.cta>.btn{position:relative;z-index:3}.cta h2{font-size:23px;margin:0 0 12px}.cta p{font-size:13px;line-height:1.7;margin:0}.cta .btn{margin-left:auto}dialog{border:0;border-radius:16px;padding:30px;width:min(455px,calc(100% - 30px));color:var(--ink);box-shadow:0 20px 80px #05102c55}dialog::backdrop{background:#02071db8}.close{position:absolute;right:17px;top:14px}.icon-button{width:30px;height:30px;border:0;background:transparent;color:inherit;cursor:pointer}.icon-button svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}.close svg{width:20px;height:20px}dialog h2{margin:0 0 9px}dialog>p{font-size:13px;line-height:1.55}form label{display:block;font-size:12px;font-weight:700;margin:15px 0}input,textarea{display:block;width:100%;margin-top:6px;border:1px solid #dfe1ef;border-radius:7px;padding:10px;font:inherit}.form-note{color:#4335a5}.menu-toggle{display:none}
@media(max-width:1080px){.nav-links{gap:21px}.hero h1{font-size:50px}.expertise-grid{grid-template-columns:repeat(6,1fr)}.approach{grid-template-columns:1fr}.approach-intro{margin-bottom:28px}.proof{grid-template-columns:1fr 1fr}.proof a{grid-column:1/-1}.difference-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:700px){.wrap{width:calc(100% - 32px)}.hero{min-height:auto}.nav{height:72px}.nav-links{display:none;position:absolute;top:65px;left:16px;right:16px;flex-direction:column;padding:20px;background:#0d193d;border-radius:12px;z-index:20}.nav-links.open{display:flex}.header-cta{display:none}.menu-toggle{display:block;margin-left:auto}.hero h1{font-size:52px}.process{grid-column:1/-1}.stat{min-height:95px;padding:14px;gap:9px}.stat-icon{width:34px}.stat strong{font-size:24px}.stat small,.stat b{font-size:10px}.section{padding-top:42px}.expertise-grid{grid-template-columns:repeat(2,1fr);gap:10px}.expertise-card{min-height:165px}.approach{padding:30px 23px}.steps{grid-template-columns:1fr 1fr;gap:25px}.steps:before{display:none}.proof{grid-template-columns:1fr;gap:18px;padding:28px}.proof a{grid-column:auto}.difference-grid{grid-template-columns:1fr 1fr}.diff-item{margin-bottom:20px}.resources>div{flex-direction:column}.cta{padding:26px 20px 26px 145px;min-height:185px;gap:15px;align-items:flex-start;flex-direction:column}.cta>img{width:150px;height:125px;left:-8px;bottom:-1px}.cta h2{font-size:21px}.cta p br{display:none}.cta .btn{margin-left:0}.hero-actions{flex-wrap:wrap}}.cta>img{mix-blend-mode:multiply}

/* === STARK TALENT — EXPERTISE EXPERIENCE === */
.expertise-card{cursor:pointer;background:#fff;overflow:hidden}
.expertise-card::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,#7040ef,#b68cff);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.expertise-card:hover::after{transform:scaleX(1)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}
.expertise-card:nth-child(2n){transition-delay:.05s}.expertise-card:nth-child(3n){transition-delay:.1s}
.sector-dialog{border:0;padding:0;width:min(1000px,calc(100% - 30px));max-height:calc(100vh - 40px);border-radius:20px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 30px 100px #02071d77}
.sector-dialog::backdrop{background:rgba(3,8,28,.78);backdrop-filter:blur(6px)}
.sector-panel{display:grid;grid-template-columns:34% 66%;min-height:620px}
.sector-aside{padding:48px 40px;background:radial-gradient(circle at 25% 18%,#25377a 0,transparent 28%),linear-gradient(145deg,#07142f,#111f50);color:#fff;position:relative;overflow:hidden}
.sector-aside::after{content:"";position:absolute;width:340px;height:340px;border:1px solid #6f5de0;opacity:.35;border-radius:48% 52% 55% 45%;right:-160px;bottom:-150px}
.sector-kicker{font-size:11px;letter-spacing:1.4px;color:#b7a8ff;font-weight:800}.sector-icon{width:72px;height:72px;border:1px solid #7062c6;border-radius:22px;display:grid;place-items:center;margin:28px 0;color:#b99fff;background:#ffffff0b}.sector-icon svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:1.6}.sector-aside h2{font-size:34px;line-height:1.08;margin:0 0 18px}.sector-aside p{font-size:14px;line-height:1.75;color:#d6daf0;max-width:310px}.sector-main{padding:48px 50px;overflow:auto}.sector-close{position:absolute;right:18px;top:16px;z-index:5;color:#fff}.sector-story{font-size:16px;line-height:1.75;margin:0 0 28px}.sector-block{border-top:1px solid var(--line);padding:24px 0}.sector-block h3{margin:0 0 13px;font-size:15px}.sector-block p{font-size:13px;line-height:1.7;margin:0}.job-list{display:flex;flex-wrap:wrap;gap:9px}.job-pill{border:1px solid #e2def8;background:#f8f7ff;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:700;color:#292354}.sector-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:8px}.sector-footer small{font-size:11px;color:#68708a;line-height:1.5}.sector-contact{border:0;border-radius:9px;background:linear-gradient(115deg,#8055ff,#5c2cdb);color:#fff;padding:13px 17px;font-weight:800;cursor:pointer;white-space:nowrap}.process,.stat,.proof,.cta{transition:transform .25s ease,box-shadow .25s ease}.process:hover,.stat:hover{transform:translateY(-3px);box-shadow:0 16px 38px #0003}
@media(max-width:700px){.sector-panel{grid-template-columns:1fr}.sector-aside{padding:40px 28px 32px}.sector-main{padding:30px 25px}.sector-aside h2{font-size:29px}.sector-dialog{max-height:calc(100vh - 20px);width:calc(100% - 18px)}.sector-close{color:#fff}.sector-footer{align-items:flex-start;flex-direction:column}.sector-contact{width:100%}}

/* --- PATCH VISIBILITÉ & PICTOGRAMMES --- */
/* La fusée ne doit jamais se fondre dans le fond sombre. */
.cta>img{
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.48)) drop-shadow(0 0 20px rgba(112,64,239,.32));
  z-index:2;
}
.cta>div,.cta>.btn{position:relative;z-index:3}
.cta::before{
  content:"";position:absolute;left:0;bottom:0;width:360px;height:100%;
  background:radial-gradient(circle at 25% 72%,rgba(112,64,239,.24),transparent 58%);
  pointer-events:none;
}

/* Pictogrammes des expertises : plus premium, plus lisibles, plus présents. */
.expertise-card .domain-art{
  width:72px;height:72px;margin:0 0 12px;display:grid;place-items:center;
  border-radius:22px;background:linear-gradient(145deg,#f7f6ff,#eceaff);
  border:1px solid rgba(112,64,239,.14);
  box-shadow:0 10px 24px rgba(26,32,78,.10),inset 0 1px 0 rgba(255,255,255,.9);
  color:#2b3168;transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease;
}
.domain-art svg{width:42px;height:42px;stroke-width:1.9}
.expertise-card:hover .domain-art,.expertise-card.active .domain-art{
  transform:translateY(-5px) scale(1.05);
  background:linear-gradient(145deg,#8258ff,#5b31db);color:#fff;
  box-shadow:0 14px 28px rgba(92,44,219,.28);
}
.expertise-card{padding:18px 12px 15px}
.expertise-card b{font-size:11.5px;line-height:1.45;min-height:34px}
.expertise-card .circle{box-shadow:0 5px 14px rgba(82,65,180,.12)}
.expertise-card:hover .circle{background:#7040ef;color:#fff;border-color:#7040ef}

@media(max-width:700px){
  .cta>img{width:205px !important;left:-18px !important;bottom:-8px !important}
  .cta::before{width:250px}
}

/* === STARK TALENT — MOTION & CAROUSEL UPGRADE === */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
.nav{position:relative;z-index:25}.nav-links a{position:relative}.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:#8b68ff;border-radius:2px;transition:right .3s var(--ease)}.nav-links a:hover::after{right:0}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes heroVisualIn{from{opacity:0;transform:translateX(22px) scale(.98)}to{opacity:1;transform:none}}@keyframes heroSideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes orbDrift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(7px,-8px) rotate(3deg)}}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-head h2{margin-bottom:0}.carousel-controls{display:flex;align-items:center;gap:10px}.carousel-status{font-size:11px;font-weight:800;color:#6d6d8f;min-width:52px;text-align:center}.carousel-btn{width:36px;height:36px;border-radius:50%;border:1px solid #dcdcf0;background:#fff;color:#7040ef;display:grid;place-items:center;cursor:pointer;transition:all .25s var(--ease);box-shadow:0 7px 18px rgba(45,38,106,.08)}.carousel-btn:hover{transform:translateY(-2px);background:#7040ef;color:#fff;border-color:#7040ef;box-shadow:0 10px 22px rgba(112,64,239,.25)}.carousel-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.expertise-carousel{overflow:hidden;position:relative;margin:0 -4px;padding:3px 4px 12px}.expertise-grid{display:flex;gap:12px;transition:transform .65s var(--ease);will-change:transform}.expertise-card{flex:0 0 calc((100% - 48px)/5);min-width:0}.expertise-card:focus-visible{transform:translateY(-3px)}
.expertise-card{box-shadow:0 10px 24px rgba(25,36,91,.08)}.expertise-card:hover{box-shadow:0 16px 34px rgba(25,36,91,.13)}
.stat strong,.progress b{font-variant-numeric:tabular-nums}.stat[data-animate-number]{overflow:hidden}.stat .stat-icon{transition:transform .35s var(--ease)}.stat:hover .stat-icon{transform:rotate(-5deg) scale(1.06)}
.reveal.is-visible{animation:revealUp .7s var(--ease) both}.expertise-card.is-visible{animation:cardIn .65s var(--ease) both}.expertise-card.is-visible:nth-child(2){animation-delay:.05s}.expertise-card.is-visible:nth-child(3){animation-delay:.1s}.expertise-card.is-visible:nth-child(4){animation-delay:.15s}.expertise-card.is-visible:nth-child(5){animation-delay:.2s}@keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.step-item{transition:transform .3s var(--ease)}.step-item:hover{transform:translateY(-6px)}.step-item:hover .step-icon{box-shadow:0 14px 30px rgba(112,64,239,.18);color:#7040ef}.step-icon{transition:box-shadow .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}.step-item:hover .step-icon{transform:scale(1.04)}
.proof{position:relative;overflow:hidden}.proof::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(131,106,255,.15) 50%,transparent 70%);transform:translateX(-120%);animation:shine 7s 1.5s ease-in-out infinite;pointer-events:none}@keyframes shine{0%,65%,100%{transform:translateX(-120%)}78%{transform:translateX(120%)}}
.resources a{position:relative;overflow:hidden}.resources a::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(112,64,239,.09),transparent);transform:translateX(-120%);transition:transform .55s var(--ease)}.resources a:hover::after{transform:translateX(120%)}
.cta>img{animation:rocketFloat 5.5s ease-in-out infinite}@keyframes rocketFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(-1deg)}}
.sector-dialog[open]{animation:dialogIn .35s var(--ease) both}.sector-panel{animation:panelIn .45s .04s var(--ease) both}@keyframes dialogIn{from{opacity:0}to{opacity:1}}@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}.job-pill{transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}.job-pill:hover{transform:translateY(-2px);background:#efeaff;border-color:#b29af8}
@media(max-width:1080px){.expertise-card{flex-basis:calc((100% - 24px)/3)}.carousel-controls{display:flex}}
@media(max-width:700px){.section-head{align-items:center}.carousel-controls{gap:7px}.carousel-status{font-size:10px;min-width:48px}.carousel-btn{width:32px;height:32px}.expertise-carousel{margin-right:-16px;padding-right:16px}.expertise-grid{overflow:visible;gap:10px}.expertise-card{flex-basis:calc((100% - 10px)/1.2);min-height:170px}.reveal{transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.hero-art img{image-rendering:auto;-webkit-font-smoothing:antialiased;backface-visibility:hidden;transform:translateZ(0);}


/* === STARK TALENT 2.1 — hero, gradients, sectors, annonces === */
.hero{position:relative;background:radial-gradient(ellipse at 50% 52%,#18255a 0,#071432 44%,#030a20 79%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:115px;background:linear-gradient(to bottom,rgba(3,10,32,0) 0%,rgba(3,10,32,.28) 42%,rgba(255,255,255,.88) 100%);pointer-events:none;z-index:10}
.sector-main{display:flex;flex-direction:column}.sector-footer{margin-top:auto;padding-top:22px}.sector-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:205px;height:auto;padding:13px 18px;border-radius:12px;background:linear-gradient(125deg,#855dff,#5e32df);box-shadow:0 13px 25px rgba(94,50,223,.24);font-size:12px;transition:transform .25s ease,box-shadow .25s ease}.sector-contact:hover{transform:translateY(-3px);box-shadow:0 18px 30px rgba(94,50,223,.3)}.sector-contact svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.opportunities{padding-top:18px}.opportunities-head{align-items:flex-end}.opportunities-head h2{margin-bottom:8px}.opportunities-head p{margin:0;max-width:650px;font-size:13px;line-height:1.7;color:#66708a}.opportunity-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}.job-filter{border:1px solid #dedff0;background:#fff;color:#30345d;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:800;cursor:pointer;transition:.2s ease}.job-filter:hover,.job-filter.active{background:#7040ef;color:#fff;border-color:#7040ef;transform:translateY(-1px)}.opportunity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.job-card{position:relative;padding:20px;border:1px solid #e7e8f2;border-radius:15px;background:linear-gradient(180deg,#fff,#fbfbff);box-shadow:0 12px 25px rgba(25,36,91,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.job-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(25,36,91,.11);border-color:#d4cdf8}.job-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.job-tag{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f1efff;color:#6940db;font-size:10px;font-weight:800}.job-index{font-size:10px;color:#9aa1b7;font-weight:800}.job-card h3{font-size:16px;line-height:1.25;margin:18px 0 7px;color:#111836}.job-meta{font-size:10.5px;color:#6d758d;font-weight:700;line-height:1.45}.job-card p{font-size:11.5px;line-height:1.6;color:#525a74;min-height:55px;margin:12px 0 18px}.job-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.job-link,.job-contact,.text-action{border:0;background:none;color:#5f34d8;font-size:11px;font-weight:800;cursor:pointer;padding:0}.job-link{display:inline-flex;align-items:center;gap:6px}.job-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}.job-contact{padding:9px 11px;border-radius:9px;background:#07142f;color:#fff}.job-detail-dialog{border:0;border-radius:18px;padding:32px;width:min(620px,calc(100% - 26px));color:#101733;box-shadow:0 30px 100px rgba(2,7,29,.35)}.job-detail-dialog::backdrop{background:rgba(3,8,28,.76);backdrop-filter:blur(5px)}.job-detail-dialog h2{font-size:28px;line-height:1.1;margin:15px 0 6px}.job-detail-meta{color:#6d758d;font-size:12px;font-weight:700}.job-detail-block{border-top:1px solid #e7e8f2;padding-top:18px;margin-top:18px}.job-detail-block h3{font-size:14px;margin:0 0 7px}.job-detail-block p{font-size:13px;line-height:1.7;margin:0;color:#4f5871}.job-detail-actions{display:flex;align-items:center;gap:18px;margin-top:25px}
.contact-kicker{font-size:10px;letter-spacing:1.2px;font-weight:900;color:#7040ef;margin-bottom:8px}.contact-intro{color:#616a82!important;margin-bottom:20px!important}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}select{display:block;width:100%;margin-top:6px;border:1px solid #dfe1ef;border-radius:7px;padding:10px;background:#fff;font:inherit;color:#111733}.form-actions{display:flex;align-items:center;gap:15px;margin-top:20px}.form-actions .btn{margin:0}.form-note{font-size:12px;line-height:1.5}
@media(max-width:1080px){.opportunity-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hero::after{height:90px}.opportunities-head{align-items:flex-start;flex-direction:column}.opportunities-head .btn{width:100%}.opportunity-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column;align-items:stretch}.form-actions .btn,.text-action{width:100%}}

/* FINAL POLISH: clean hero image, natural color transition, missing sector icons */
.hero::after{
  height:190px !important;
  bottom:-1px !important;
  z-index:1 !important;
  background:linear-gradient(to bottom,
    rgba(5,13,40,0) 0%,
    rgba(12,22,54,.05) 24%,
    rgba(45,54,91,.14) 46%,
    rgba(110,116,139,.28) 68%,
    rgba(221,223,231,.70) 90%,
    rgba(255,255,255,1) 100%) !important;
}
.domain-art svg{width:44px !important;height:44px !important;stroke-width:1.8}
.sector-contact-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:15px 16px;border-radius:16px;background:linear-gradient(135deg,#f5f2ff 0%,#fff 58%,#f0ecff 100%);border:1px solid #ddd7fb;box-shadow:0 12px 28px rgba(42,36,115,.08)}
.sector-contact-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#835bff,#5c31db);box-shadow:0 10px 22px rgba(94,50,223,.2)}
.sector-contact-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.sector-contact-card strong{display:block;font-size:13px;margin-bottom:3px}.sector-contact-card small{display:block;color:#68708a;font-size:11px;line-height:1.45}.sector-contact-card .sector-contact{justify-self:end;white-space:nowrap}
@media(max-width:700px){.hero::after{height:115px !important}.sector-contact-card{grid-template-columns:44px 1fr}.sector-contact-card .sector-contact{grid-column:1/-1;justify-self:stretch}}

/* === STARK TALENT 3.0 — HERO TRANSITION + EXPERTISE UX + JOBS PORTAL === */
.hero{
  min-height:700px;
  background:
    radial-gradient(650px 420px at 58% 44%, rgba(92,72,214,.24), transparent 65%),
    radial-gradient(520px 340px at 24% 82%, rgba(18,43,102,.32), transparent 72%),
    linear-gradient(180deg,#050d28 0%,#071432 58%,#08163a 88%,#08183d 100%);
}
.hero::before{
  content:"";
  position:absolute;left:-10%;right:-10%;bottom:-120px;height:260px;
  background:radial-gradient(ellipse at 50% 0%,rgba(124,80,248,.34) 0%,rgba(124,80,248,.16) 32%,rgba(124,80,248,0) 70%);
  filter:blur(14px);pointer-events:none;z-index:0;
}
.hero::after{
  height:145px !important;bottom:-1px !important;z-index:1 !important;
  background:linear-gradient(to bottom,
    rgba(8,22,58,0) 0%,
    rgba(8,22,58,.05) 18%,
    rgba(8,22,58,.16) 42%,
    rgba(8,22,58,.34) 66%,
    rgba(255,255,255,.52) 89%,
    #fff 100%) !important;
  filter:blur(.1px);
}
@keyframes heroFloatPro{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
@keyframes heroCopyPro{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes heroSidePro{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.process{animation:cardInPro .8s .2s both cubic-bezier(.22,.75,.18,1)}
.stat{animation:cardInPro .8s .3s both cubic-bezier(.22,.75,.18,1)}
.stat:nth-child(3){animation-delay:.4s}.stat:nth-child(4){animation-delay:.5s}
@keyframes cardInPro{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.expertise-carousel{position:relative;overflow:hidden;border-radius:16px}
.expertise-carousel::before,.expertise-carousel::after{content:"";position:absolute;top:0;bottom:0;width:30px;z-index:2;pointer-events:none}
.expertise-carousel::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.expertise-carousel::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
.expertise-grid{will-change:transform;transition:transform .72s cubic-bezier(.22,.75,.18,1) !important}
.expertise-carousel.is-dragging .expertise-grid{transition:none !important;cursor:grabbing}
.expertise-carousel.is-dragging{cursor:grabbing}
.expertise-card{flex-shrink:0}
.expertise-card::after{content:"";position:absolute;inset:auto 12px 0;height:3px;border-radius:999px;background:linear-gradient(90deg,#7040ef,#b38bff);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.expertise-card:hover::after{transform:scaleX(1)}
.section-kicker{display:block;font-size:10px;letter-spacing:1.6px;color:#7040ef;font-weight:900;margin-bottom:10px}
.opportunities{padding-top:66px !important}
.opportunities-head{display:flex;justify-content:space-between;gap:34px;align-items:flex-end;margin-bottom:22px}
.opportunities-head h2{font-size:32px !important;line-height:1.05;margin:0 0 12px !important;letter-spacing:-.8px}
.opportunities-head p{max-width:680px !important;font-size:13px !important}
.opportunities-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.btn-dark-outline{background:#fff;color:#0a1230;border:1px solid #d9dced}
.jobs-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px;border:1px solid #e6e7f0;border-radius:16px;background:#f8f8fc;
  box-shadow:0 10px 28px rgba(21,32,80,.05);
}
.jobs-search{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  padding:0 14px;height:44px;background:#fff;border:1px solid #e2e4ef;border-radius:11px;
}
.jobs-search svg{width:18px;height:18px;stroke:#6d7390;fill:none;stroke-width:2}
.jobs-search input{border:0;margin:0;padding:0;width:100%;font:500 13px inherit;color:#141b39;outline:none}
.jobs-search input::placeholder{color:#9298ac}
.jobs-toolbar-meta{display:flex;align-items:center;gap:16px;white-space:nowrap}
.jobs-toolbar-meta span{font-size:11px;font-weight:800;color:#59617a}
.jobs-reset{border:0;background:none;color:#7040ef;font-size:11px;font-weight:800;cursor:pointer}
.jobs-layout{display:grid;grid-template-columns:225px 1fr;gap:22px;margin-top:22px}
.jobs-filters{
  position:sticky;top:18px;align-self:start;padding:18px;border:1px solid #e7e8f2;border-radius:16px;background:#fbfbfe;
}
.jobs-filter-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid #eaebf2}
.jobs-filter-head strong{font-size:13px}.jobs-filter-head span{font-size:10px;color:#7e8498}
.filter-group{padding-top:16px}.filter-label{display:block;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#8a90a3;font-weight:900;margin-bottom:9px}
.filter-options{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow:auto;padding-right:3px}
.filter-choice{
  border:0;background:transparent;text-align:left;padding:8px 9px;border-radius:8px;font-size:11px;color:#323857;font-weight:700;cursor:pointer;transition:.2s ease
}
.filter-choice:hover{background:#efedff;color:#5f34d8}.filter-choice.active{background:#151d43;color:#fff;box-shadow:0 5px 12px rgba(8,20,48,.16)}
.jobs-results{min-width:0}
.jobs-featured{margin-bottom:18px}
.job-featured-card{
  display:grid;grid-template-columns:1fr 215px;gap:20px;padding:22px;border-radius:18px;
  background:linear-gradient(120deg,#081530,#151f53);color:#fff;box-shadow:0 18px 44px rgba(9,18,53,.18);overflow:hidden;position:relative
}
.job-featured-card::before{content:"";position:absolute;width:280px;height:280px;right:-100px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(126,81,255,.33),transparent 68%)}
.job-featured-main,.job-featured-side{position:relative;z-index:1}
.job-featured-main h3{font-size:23px;line-height:1.18;margin:16px 0 8px}.job-featured-main p{max-width:690px;font-size:12px;line-height:1.65;color:#dbe0f5;margin:0 0 14px}
.job-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;background:#ebe9ff;color:#7040ef;font-size:9px;font-weight:900}
.job-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#24c98a;box-shadow:0 0 0 3px rgba(36,201,138,.14)}
.job-status--light{background:rgba(255,255,255,.11);color:#c9beff}.job-status--light::before{background:#67e3b1;box-shadow:0 0 0 3px rgba(103,227,177,.11)}
.job-featured-card .job-tag{background:rgba(255,255,255,.11);color:#d6ceff}
.job-featured-card .job-facts span{color:#d9def0}
.job-featured-side{display:flex;flex-direction:column;justify-content:center;gap:9px;border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
.job-featured-side>span{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:rgba(132,95,255,.18);color:#c9beff}.job-featured-side svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.job-featured-side strong{font-size:13px}.job-featured-side small{font-size:11px;line-height:1.55;color:#bfc7df}
.jobs-list-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:24px 2px 11px}.jobs-list-head h3{font-size:16px;margin:0}.jobs-list-head span{font-size:10px;color:#7b8298}
.opportunity-grid{grid-template-columns:repeat(3,1fr) !important;gap:14px}
.job-card--premium{padding:18px;opacity:0;transform:translateY(12px);animation:jobIn .5s calc(var(--i)*45ms) cubic-bezier(.22,.75,.18,1) forwards}
@keyframes jobIn{to{opacity:1;transform:none}}
.job-context{min-height:58px !important;margin:12px 0 14px !important}
.job-facts{display:flex;flex-wrap:wrap;gap:7px 12px;margin:13px 0 18px}.job-facts span{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#6d758d;font-weight:800}.job-facts svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.job-detail-dialog--premium{width:min(720px,calc(100% - 26px));padding:34px}.job-detail-kicker{font-size:10px;letter-spacing:1.1px;color:#7040ef;font-weight:900}.job-statusline{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:11px;color:#727990}.job-detail-dialog--premium h2{font-size:32px;margin:13px 0 8px}.job-detail-lead{font-size:14px;line-height:1.7;color:#4e566e;margin:0}.job-detail-facts{display:flex;flex-wrap:wrap;gap:15px;margin:20px 0;color:#5d647c;font-size:11px;font-weight:800}.job-detail-facts svg{width:16px;height:16px;margin-left:8px;stroke:#7040ef;fill:none;stroke-width:1.8}.job-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.job-detail-grid .job-detail-block{margin:0}.jobs-empty{text-align:center;padding:48px 28px;border:1px dashed #d8d9e7;border-radius:18px;background:#fbfbfe}.jobs-empty-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 14px;border-radius:15px;background:#f0edff;color:#7040ef}.jobs-empty-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}.jobs-empty h3{margin:0 0 8px}.jobs-empty p{max-width:480px;margin:0 auto 18px;font-size:12px;color:#68708a;line-height:1.6}
@media(max-width:1080px){
  .jobs-layout{grid-template-columns:190px 1fr}.opportunity-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){
  .hero{min-height:auto}
  .hero::after{height:105px !important;background:linear-gradient(to bottom,rgba(8,22,58,0) 0%,rgba(8,22,58,.1) 40%,rgba(255,255,255,.45) 80%,#fff 100%) !important}
  .opportunities{padding-top:44px !important}.opportunities-head{align-items:flex-start;flex-direction:column}.opportunities-actions{width:100%;flex-direction:column}.opportunities-actions .btn{width:100%}
  .jobs-toolbar{flex-direction:column;align-items:stretch}.jobs-toolbar-meta{justify-content:space-between}
  .jobs-layout{grid-template-columns:1fr}.jobs-filters{position:static}.filter-options{display:grid;grid-template-columns:repeat(2,1fr);max-height:none}
  .job-featured-card{grid-template-columns:1fr}.job-featured-side{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding:15px 0 0}.jobs-list-head{align-items:flex-start;flex-direction:column}
  .opportunity-grid{grid-template-columns:1fr!important}.job-detail-grid{grid-template-columns:1fr}.opportunities-head h2{font-size:27px !important}
}

/* === FINAL VISUAL POLISH 3.1 === */
.hero::after{
  height:150px !important;
  background:linear-gradient(180deg,
    rgba(8,22,58,0) 0%,
    rgba(17,29,76,.20) 28%,
    rgba(70,67,139,.32) 58%,
    rgba(206,201,235,.52) 82%,
    #fff 100%) !important;
}
.hero::before{bottom:-150px;height:320px;background:radial-gradient(ellipse at 50% 10%,rgba(119,82,240,.33),rgba(70,67,139,.16) 34%,transparent 72%);filter:blur(18px)}
.expertise-carousel{box-shadow:inset 22px 0 22px -22px rgba(33,41,92,.18),inset -22px 0 22px -22px rgba(33,41,92,.18)}
.expertise-card{transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .35s ease,background .35s ease}
.expertise-card:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 22px 42px rgba(26,34,95,.13);border-color:#d8d0ff;background:linear-gradient(180deg,#fff,#faf9ff)}
.expertise-card .domain-art{transition:transform .35s cubic-bezier(.2,.75,.2,1),color .35s ease}
.expertise-card:hover .domain-art{transform:translateY(-5px) scale(1.05);color:#7040ef}
.carousel-btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.carousel-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.04);box-shadow:0 10px 22px rgba(112,64,239,.16);background:#f7f4ff}
.jobs-toolbar{background:linear-gradient(135deg,#fafaff,#f5f3ff)}
.opportunities-head{padding-bottom:6px}.opportunities-actions{flex-wrap:wrap;justify-content:flex-end}.btn-ghost-purple{background:#f2efff;color:#5e39c9;border:1px solid #ded5ff}
.job-featured-card{transition:transform .35s ease,box-shadow .35s ease}.job-featured-card:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(9,18,53,.21)}
.job-card--premium{transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease,border-color .35s ease,background .35s ease}.job-card--premium:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(25,36,91,.13);border-color:#cfc6ff;background:linear-gradient(180deg,#fff,#faf9ff)}
.job-card--premium .job-status{transition:transform .25s ease}.job-card--premium:hover .job-status{transform:translateX(2px)}
.jobs-list-head{padding-bottom:8px;border-bottom:1px solid #ececf4}
.jobs-filters{box-shadow:0 12px 26px rgba(25,36,91,.04)}
.jobs-filters::-webkit-scrollbar,.filter-options::-webkit-scrollbar{width:6px}.jobs-filters::-webkit-scrollbar-thumb,.filter-options::-webkit-scrollbar-thumb{background:#d8d7e7;border-radius:20px}
.job-detail-dialog--premium{animation:jobDialogIn .35s cubic-bezier(.2,.75,.2,1) both}.job-detail-dialog--premium::backdrop{animation:backdropIn .25s ease both}
@keyframes jobDialogIn{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:none}}@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.opportunities-actions{justify-content:flex-start}}
@media(max-width:700px){.hero::after{height:110px !important}.opportunities-actions{width:100%;flex-direction:column}.opportunities-actions .btn{width:100%}}


/* ================= STARK TALENT 3.4 — VISUAL QA & UX POLISH ================= */
:root{--stark-purple:#7444ff;--stark-purple-2:#9b7bff;--stark-ink:#07112f;--stark-muted:#66708e;--stark-line:#e7e9f3}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-quick-btn{height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(133,101,255,.55);background:rgba(17,25,58,.74);color:#fff;font:800 11px/1 inherit;cursor:pointer;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.nav-quick-btn:hover{transform:translateY(-2px);background:rgba(113,64,239,.16);border-color:#8e6dff;box-shadow:0 12px 26px rgba(80,50,180,.18)}
.section-head{align-items:end}
.section-subtitle{margin:7px 0 0;color:#717993;font-size:13px;max-width:520px;line-height:1.55}
/* hero: premium composition without the broken low-res cutout */
.hero{overflow:hidden}
.hero-visual--refined{position:relative;min-height:610px;display:grid;place-items:end center;isolation:isolate;transform-origin:center 80%;will-change:transform}
.hero-image-shell{position:relative;width:min(520px,100%);height:470px;overflow:visible}
.hero-image-shell::before{content:"";position:absolute;inset:-18px -18px 18px -18px;border-radius:42px;background:radial-gradient(circle at 52% 40%,rgba(135,86,255,.34),rgba(78,62,196,.16) 40%,transparent 68%);filter:blur(8px);z-index:-2}
.hero-image-shell::after{display:none}
.hero-image-shell img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;border-radius:0!important;display:block;filter:saturate(1.05) contrast(1.02) drop-shadow(0 26px 38px rgba(0,0,0,.28))!important;position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;transform:none!important;animation:heroImageFloat 8s ease-in-out infinite!important}
.hero-glow{position:absolute;border-radius:999px;filter:blur(30px);pointer-events:none;opacity:.55}
.hero-glow-a{width:230px;height:230px;background:rgba(123,75,255,.28);left:4%;top:34%}.hero-glow-b{width:180px;height:180px;background:rgba(77,107,255,.18);right:2%;top:14%}
.hero-chip{position:absolute;display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:center;min-width:155px;padding:10px 11px;border-radius:15px;background:rgba(8,16,44,.88);border:1px solid rgba(150,132,255,.4);box-shadow:0 16px 36px rgba(3,9,33,.3);backdrop-filter:blur(12px);color:#fff;z-index:3;animation:chipFloat 6.5s ease-in-out infinite}
.hero-chip strong{font-size:11px}.hero-chip small{grid-column:2;color:#b7bde0;font-size:9px;margin-top:-2px}.hero-chip--left{left:-52px;top:70px}.hero-chip--right{right:-54px;top:178px;animation-delay:1.2s}.hero-chip-dot{width:10px;height:10px;border-radius:50%;background:#65f2b6;box-shadow:0 0 12px #65f2b6}.hero-chip-icon{width:20px;height:20px;display:grid;place-items:center;color:#a88cff}.hero-chip-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}.hero-scroll-cue{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:#a9afd0;opacity:.78;z-index:4}.hero-scroll-cue small{font-size:7px;letter-spacing:2px}.scroll-dot{width:7px;height:12px;border:1px solid rgba(255,255,255,.6);border-radius:7px;position:relative}.scroll-dot::after{content:"";position:absolute;width:2px;height:3px;border-radius:2px;background:#fff;left:50%;top:3px;transform:translateX(-50%);animation:scrollDot 1.6s infinite}.scroll-line{width:1px;height:16px;background:linear-gradient(#fff,transparent);position:relative}.scroll-line::after{content:"";position:absolute;left:-3px;bottom:1px;width:6px;height:6px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg)}
@keyframes heroImageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes scrollDot{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,4px)}}
/* hero to white transition: layered and natural */
.hero::after{height:120px!important;bottom:-1px!important;background:linear-gradient(180deg,rgba(7,18,48,0) 0%,rgba(31,38,75,.08) 24%,rgba(87,77,134,.16) 43%,rgba(168,164,201,.26) 63%,rgba(239,238,247,.66) 84%,#fff 100%)!important;filter:blur(.25px)!important}
.hero::before{height:170px;bottom:-85px;background:radial-gradient(ellipse at 50% 25%,rgba(116,68,255,.32),rgba(116,68,255,.09) 34%,transparent 68%);filter:blur(22px)}
/* expertise cards: image-like visual tile treatment */
.expertise-card{position:relative;overflow:hidden;border:1px solid #e8eaf3!important;background:linear-gradient(180deg,#fff 0%,#fcfcff 100%)!important;box-shadow:0 10px 28px rgba(24,31,75,.05)!important;transition:transform .38s cubic-bezier(.22,.75,.18,1),box-shadow .38s ease,border-color .38s ease}
.expertise-card:hover{transform:translateY(-8px);box-shadow:0 22px 52px rgba(28,26,84,.14)!important;border-color:#d8d2ff!important}
.expertise-card .domain-art{width:78px!important;height:78px!important;border-radius:24px!important;display:grid!important;place-items:center!important;background:radial-gradient(circle at 30% 25%,#f3f0ff 0%,#e9e4ff 52%,#f7f7ff 100%)!important;border:1px solid #ddd6ff!important;box-shadow:inset 0 1px 0 #fff,0 16px 28px rgba(93,64,205,.09)!important}
.expertise-card:hover .domain-art{background:linear-gradient(135deg,#7d52ff,#5f35dd)!important;border-color:#7d52ff!important;box-shadow:0 16px 34px rgba(97,59,228,.22)!important}
.expertise-card .domain-art svg{width:41px!important;height:41px!important;stroke:#24306a!important;stroke-width:1.7!important;fill:none!important;transition:transform .35s ease,stroke .35s ease}
.expertise-card:hover .domain-art svg{stroke:#fff!important;transform:scale(1.08)}
.expertise-card .domain-title{font-weight:900!important;letter-spacing:-.2px}
.expertise-card .domain-meta{color:#7b8297!important;font-size:9.5px!important;line-height:1.4!important}
.expertise-card .domain-jobs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.expertise-card .domain-job-pill{padding:5px 7px;border-radius:999px;background:#f1efff;color:#5f43c9;font-size:8.5px;font-weight:800;border:1px solid #e0dbff}
.expertise-card .domain-count{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:5px 8px!important;border-radius:999px!important;background:#f2efff!important;color:#5f43c9!important;font-size:9px!important;font-weight:900!important}
.expertise-card:hover .domain-count{background:#171f49!important;color:#fff!important}
/* keep job board stable; just polish spacing */
.opportunities{position:relative}
.prospect-quickbar{margin:18px 0 22px;padding:14px 16px;border:1px solid #e7e2ff;border-radius:18px;background:linear-gradient(90deg,#f7f4ff,#fff 60%,#f5f3ff);display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 16px 34px rgba(64,44,151,.07)}
.prospect-quick-copy{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}.prospect-quick-copy .section-kicker{grid-column:1/-1;margin-bottom:2px}.prospect-quick-copy strong{font-size:14px;color:#131a3e}.prospect-quick-copy>span:last-child{color:#6f7690;font-size:11px}
.prospect-quickbar .btn{flex:0 0 auto}
/* appointment */
.contact-dialog--refined{width:min(860px,calc(100vw - 28px));border:0;border-radius:24px;padding:0;background:#fff;box-shadow:0 36px 100px rgba(7,15,48,.32);overflow:hidden}
/* Le dialogue n'avait pas de hauteur maximale : combiné à overflow:hidden, le
   bas du formulaire (dont le bouton d'envoi) était coupé sur les écrans courts
   sans possibilité de défiler. En-tête et onglets restent fixes, seul le
   panneau défile. */
/* [open] obligatoire : sans lui, display:flex écrase la règle navigateur
   dialog:not([open]){display:none} et le dialogue fermé occupait ~685px
   sous le footer. */
/* Garde-fou : un dialogue fermé ne doit jamais occuper de place dans le flux.
   Sans cela, une règle display: sur un dialogue l'emportait sur la règle
   navigateur dialog:not([open]){display:none} et laissait un grand bloc blanc
   après le footer. */
dialog:not([open]){display:none!important}

.contact-dialog--refined[open]{
  display:flex;flex-direction:column;
  max-height:min(92dvh,900px);
  margin:auto;
}
.contact-dialog--refined .contact-kicker,
.contact-dialog--refined .contact-mode-tabs{flex:none}
.contact-dialog--refined .contact-mode-panel.is-active{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.contact-dialog--refined .contact-mode-tabs{flex-wrap:wrap}
@supports not (height:1dvh){.contact-dialog--refined{max-height:92vh}}
@media(max-width:720px){
  .contact-dialog--refined{width:calc(100vw - 16px);max-height:94dvh;border-radius:18px}
  .contact-dialog--refined .contact-mode-panel{padding:18px 16px 22px}
  .contact-dialog--refined .contact-kicker{padding:16px 16px 0}
  .contact-dialog--refined .contact-mode-tabs{padding:12px 16px 0;gap:4px}
  .contact-dialog--refined .contact-mode{font-size:11px;padding:9px 8px}
  .contact-dialog--refined h2{font-size:22px}
  .form-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn,.form-actions .text-action{width:100%}
}
/* États d'envoi */
.form-note{margin:14px 0 0;font-size:12px;line-height:1.5}
.form-note.is-error{color:#b3261e}
.form-note.is-success{color:#1b7f4b}
.form-note.is-pending{color:#5730dc}
.btn[data-busy="1"]{opacity:.72;pointer-events:none}
.field-invalid input,.field-invalid select,.field-invalid textarea,
input.field-invalid,select.field-invalid,textarea.field-invalid{border-color:#b3261e!important}
.form-hint{display:block;margin-top:5px;font-size:11px;color:#7d8498;font-weight:500}
/* Pot de miel anti-spam. `form label{display:block}` du site l'emportait sur
   le [hidden] du navigateur : le champ restait visible. */
.hp{display:none!important}.contact-dialog--refined::backdrop{background:rgba(4,9,27,.66);backdrop-filter:blur(7px)}
.contact-dialog--refined .contact-kicker{padding:20px 26px 0;color:#6f45ea;font-weight:900;font-size:10px;letter-spacing:1.5px}.contact-mode-tabs{display:flex;gap:8px;padding:18px 26px 0;border-bottom:1px solid #ececf5}.contact-mode{border:0;background:transparent;color:#737b94;font-weight:900;font-size:12px;padding:10px 12px;border-bottom:2px solid transparent;cursor:pointer}.contact-mode.is-active{color:#5730dc;border-color:#7040ef}.contact-mode-panel{padding:22px 26px 26px}.contact-dialog--refined h2{font-size:28px;margin:2px 0 8px;color:#0a1130}.contact-intro{color:#6b728b;line-height:1.6;font-size:12px;max-width:700px}.appointment-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:8px;padding:14px 0 4px}.appointment-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#8a90a3;font-weight:900;margin-bottom:8px}.appointment-days{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.appointment-day,.appointment-slot{border:1px solid #e1e3ee;background:#fff;border-radius:12px;cursor:pointer;transition:.2s ease}.appointment-day{padding:8px 5px}.appointment-day b{display:block;font-size:9px;color:#8a90a3;text-transform:uppercase}.appointment-day span{display:block;font-size:18px;font-weight:900;color:#151c3d;margin-top:3px}.appointment-day small{display:block;color:#7d8498;font-size:8px}.appointment-day:hover,.appointment-slot:hover{border-color:#bcb0ff;transform:translateY(-2px)}.appointment-day.is-active,.appointment-slot.is-active{background:#6e40ea;color:#fff;border-color:#6e40ea;box-shadow:0 12px 24px rgba(104,58,231,.18)}.appointment-day.is-active b,.appointment-day.is-active span,.appointment-day.is-active small{color:#fff}.appointment-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.appointment-slot{padding:10px 7px;font-weight:900;font-size:10px;color:#4d5572}.appointment-slot.is-active{color:#fff}
/* CTA network */
.cta-refined{position:relative;overflow:hidden}.cta-visual{width:170px;height:110px;position:relative;flex:none}.cta-core{position:absolute;left:44px;top:27px;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#8459ff,#5532db);box-shadow:0 18px 34px rgba(79,43,204,.28);z-index:3}.cta-core svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8}.cta-node{position:absolute;width:16px;height:16px;border-radius:50%;background:#c6b7ff;box-shadow:0 0 0 7px rgba(149,120,255,.12)}.cta-node-a{left:5px;top:14px}.cta-node-b{right:16px;top:10px}.cta-node-c{right:2px;bottom:7px}.cta-visual i{position:absolute;height:1px;background:linear-gradient(90deg,rgba(143,110,255,.1),rgba(126,92,255,.65));transform-origin:left center}.cta-visual i:nth-of-type(1){width:47px;left:20px;top:27px;transform:rotate(14deg)}.cta-visual i:nth-of-type(2){width:65px;left:80px;top:43px;transform:rotate(-26deg)}.cta-visual i:nth-of-type(3){width:56px;left:76px;top:78px;transform:rotate(17deg)}
@media(max-width:980px){.nav-actions{gap:6px}.nav-quick-btn{display:none}.hero-visual--refined{min-height:540px}.hero-image-shell{height:410px;width:min(500px,94%)}.hero-chip--left{left:-10px}.hero-chip--right{right:-8px}.prospect-quickbar{align-items:flex-start;flex-direction:column}.prospect-quickbar .btn{width:100%}.appointment-grid{grid-template-columns:1fr}}
@media(max-width:720px){.hero-image-shell{height:350px}.hero-chip{min-width:135px}.hero-chip--left{top:38px}.hero-chip--right{top:150px}.section-subtitle{max-width:none}.prospect-quick-copy{grid-template-columns:1fr}.prospect-quick-copy .section-kicker{margin-top:0}.appointment-days{grid-template-columns:repeat(5,1fr);gap:4px}.appointment-day span{font-size:15px}.appointment-slots{grid-template-columns:repeat(2,1fr)}.cta-visual{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 3.4 final component geometry */
.expertise-grid{display:flex!important;gap:14px!important;align-items:stretch!important}
.expertise-card{width:calc((100% - 56px)/5);min-width:calc((100% - 56px)/5);min-height:225px!important;padding:18px!important;justify-content:flex-start!important;text-align:left!important}
.expertise-card .domain-art{flex:none;margin-bottom:14px!important}
.domain-copy{display:flex;flex-direction:column;gap:6px;min-height:80px}
.domain-title{font-size:13px!important;line-height:1.25!important}
.domain-meta{display:block;min-height:27px}
.domain-jobs{margin-top:3px!important}
.domain-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.domain-bottom .circle{margin:0!important;flex:none}
.expertise-carousel{overflow:hidden!important;padding:2px 1px 8px}
.expertise-card::after{left:18px!important;right:18px!important}
.carousel-status{font-variant-numeric:tabular-nums;font-weight:800}
@media(max-width:1080px){.expertise-card{width:calc((100% - 28px)/3);min-width:calc((100% - 28px)/3)}}
@media(max-width:700px){.expertise-card{width:100%;min-width:100%}.section-head{align-items:flex-start;gap:16px}.section-subtitle{font-size:12px}}
/* appointment affordance */
[data-open-prospect]{cursor:pointer}.prospect-quickbar .section-kicker{margin-bottom:4px}

/* ===== Stark Talent v4 — polish pass ===== */
:root{
  --st-transition: cubic-bezier(.22,.75,.18,1);
  --st-fast: 180ms;
  --st-med: 360ms;
}
/* scroll-behavior:auto — le défilement des ancres est désormais animé en JS
   (script.js), avec une durée plus longue que celle, fixe et non réglable,
   du navigateur. scroll-padding-top reste actif pour le repère d'ancrage. */
html{scroll-behavior:auto;scroll-padding-top:76px}
body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#ded6ff;color:#17123b}
:focus-visible{outline:3px solid rgba(112,64,239,.55);outline-offset:4px}
.btn,.nav-quick-btn,.carousel-btn,.filter-choice,.job-link,.job-contact,.text-action,.play-link,.jobs-reset,.contact-mode,.appointment-day,.appointment-slot,.icon-button{transition:transform var(--st-fast) var(--st-transition),box-shadow var(--st-fast) ease,background-color var(--st-fast) ease,border-color var(--st-fast) ease,color var(--st-fast) ease,opacity var(--st-fast) ease}
.btn:hover,.nav-quick-btn:hover,.job-link:hover,.job-contact:hover,.text-action:hover{transform:translateY(-2px)}
.btn:active,.nav-quick-btn:active,.job-link:active,.job-contact:active,.text-action:active,.carousel-btn:active{transform:translateY(0) scale(.985)}
.icon-button:hover{transform:translateY(-1px) rotate(2deg)}

/* Navigation: compact reveal + mobile state */
.nav{position:relative;z-index:50}
.nav-links a{position:relative;transition:color var(--st-fast) ease}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:999px;background:#7040ef;transform:scaleX(0);transform-origin:center;transition:transform var(--st-med) var(--st-transition)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-toggle-bounce{animation:navNudge .35s var(--st-transition)}
@keyframes navNudge{50%{transform:scale(.93) rotate(-3deg)}}

/* Hero motion that stays cheap: transform/opacity only */
.hero-copy,.hero-side,.hero-image-shell,.hero-chip,.section-head,.approach-intro,.steps>*{will-change:transform,opacity}
.hero-image-shell{transition:transform .7s var(--st-transition)}
.hero-image-shell:hover{transform:translateY(-5px)}
.hero-chip{transition:transform .45s var(--st-transition),box-shadow .35s ease}
.hero-chip:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 22px 44px rgba(32,28,85,.18)}
.hero-chip--right:hover{transform:translateY(-6px) rotate(.5deg)}

/* Better reveal: slight slide instead of abrupt fade */
.reveal{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .65s ease,transform .65s var(--st-transition)}
.reveal.is-visible{opacity:1;transform:none}
.expertise-card.reveal{transition-delay:calc(var(--i,0) * 55ms)}

/* Expertise interaction */
.expertise-card{cursor:pointer;isolation:isolate}
.expertise-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 5%,rgba(122,91,255,.16),transparent 38%);opacity:0;transition:opacity .45s ease;z-index:-1}
.expertise-card:hover::before{opacity:1}
.expertise-card:hover .domain-title{color:#4d2fbb}
.domain-count{transition:transform .35s var(--st-transition),background-color .25s ease,color .25s ease}
.expertise-card:hover .domain-count{transform:translateX(2px)}

/* Jobs: stronger hierarchy */
.job-card--premium{transition:transform .35s var(--st-transition),box-shadow .35s ease,border-color .35s ease,opacity .35s ease}
.job-card--premium:hover{transform:translateY(-7px);box-shadow:0 24px 54px rgba(32,28,83,.12);border-color:#d9d0ff}
.job-tag,.job-status,.filter-choice{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--st-transition)}
.filter-choice:hover{transform:translateX(2px)}
.job-card--premium .job-link svg,.job-featured-actions .btn svg,.resources a svg{transition:transform .25s var(--st-transition)}
.job-card--premium .job-link:hover svg,.job-featured-actions .btn:hover svg,.resources a:hover svg{transform:translateX(4px)}

/* Featured job */
.job-featured-card{transition:transform .45s var(--st-transition),box-shadow .45s ease}
.job-featured-card:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(27,23,80,.13)}
.job-featured-side>span{position:relative;animation:softPulse 2.8s ease-in-out infinite}.job-featured-side>span::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 9px rgba(112,64,239,.06);opacity:0;pointer-events:none;animation:softHalo 2.8s ease-in-out infinite}
@keyframes softPulse{50%{transform:scale(1.06)}}@keyframes softHalo{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.34)}}

/* Process feedback */
.process-step{transition:background-color .25s ease,transform .25s var(--st-transition)}
.process-step:hover{transform:translateX(4px);background:rgba(112,64,239,.035)}
.check{animation:checkPop .45s var(--st-transition)}
@keyframes checkPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}

/* CTA network */
.cta-node{animation:nodeFloat 3.5s ease-in-out infinite}.cta-node::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 10px rgba(149,120,255,.08);opacity:0;pointer-events:none;animation:nodeHalo 3.5s ease-in-out infinite}
.cta-node-b{animation-delay:.6s}.cta-node-c{animation-delay:1.2s}
@keyframes nodeFloat{50%{transform:translateY(-5px)}}@keyframes nodeHalo{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Dialog entrance */
dialog{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .28s ease,transform .28s var(--st-transition),display .28s allow-discrete,overlay .28s allow-discrete}
dialog[open]{opacity:1;transform:none}
@starting-style{dialog[open]{opacity:0;transform:translateY(18px) scale(.975)}}
dialog::backdrop{background:rgba(4,9,27,.56);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s ease,display .28s allow-discrete,overlay .28s allow-discrete}
dialog[open]::backdrop{opacity:1}

/* Mobile navigation fallback */
@media(max-width:1000px){
  .nav{padding-inline:18px}
  .menu-toggle{display:grid!important}
  .nav-links{position:absolute;top:calc(100% + 10px);left:18px;right:18px;display:grid!important;gap:8px;padding:10px;background:rgba(11,18,43,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 22px 50px rgba(0,0,0,.25);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s ease,transform .3s var(--st-transition)}
  .nav.is-menu-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:10px 12px;color:#f8f8ff!important;border-radius:10px}
  .nav-links a:hover{background:rgba(255,255,255,.06)}
  .nav-actions{display:none}
}

/* Touch safety */
@media (hover:none){.hero-image-shell:hover,.expertise-card:hover,.job-card--premium:hover,.job-featured-card:hover{transform:none;box-shadow:inherit}.btn:hover,.job-link:hover,.job-contact:hover{transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-image-shell,.hero-chip,.expertise-card,.job-card--premium,.job-featured-card,.btn,.nav-quick-btn{transition:none!important}
  .hero-image-shell:hover,.hero-chip:hover,.expertise-card:hover,.job-card--premium:hover,.job-featured-card:hover,.btn:hover,.nav-quick-btn:hover{transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
}


/* ===== STARK TALENT — FINAL APPROVED VISUAL SYSTEM ===== */
:root{
  --st-navy:#07102f;
  --st-navy-2:#0c1850;
  --st-purple:#6f3ff0;
  --st-purple-2:#8a5cff;
  --st-magenta:#dc48df;
  --st-lilac:#f2eeff;
  --st-line:#e3e5f1;
  --st-text:#101836;
}

/* Header / logo */
.logo{display:flex!important;align-items:center!important;gap:10px!important;font-size:inherit!important;letter-spacing:0!important}
.logo-mark{width:34px;height:38px;display:grid;place-items:center;font-size:26px;font-weight:1000;line-height:1;color:#fff;border-radius:10px 4px 10px 4px;background:linear-gradient(145deg,#9a67ff 0%,#6135e8 54%,#3c21a9 100%);box-shadow:0 10px 24px rgba(112,64,239,.26);transform:skewY(-5deg)}
.logo-word{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;line-height:1}
.logo-word>span,.logo-word>b{font-size:22px;font-weight:900;letter-spacing:.2px;color:#fff}
.logo-word>b{color:#8b5aff;letter-spacing:1px}
.logo-word small{flex-basis:100%;font-size:9px;font-weight:600;color:#aeb8d7;margin-top:4px;letter-spacing:.1px}
.header-cta{min-height:56px;border-radius:12px;padding:0 20px;background:linear-gradient(120deg,#8d56ff,#5d2fe1);box-shadow:0 10px 28px rgba(98,46,227,.27)}
.header-cta:hover{box-shadow:0 14px 32px rgba(98,46,227,.35)}

/* Hero polish */
.hero{position:relative;background:
  radial-gradient(580px 360px at 54% 44%,rgba(110,68,240,.35),transparent 67%),
  radial-gradient(360px 250px at 82% 88%,rgba(75,50,182,.20),transparent 70%),
  linear-gradient(180deg,#050c26 0%,#081338 56%,#111652 88%,#20236d 100%)!important}
.hero::before{height:320px!important;bottom:-180px!important;background:radial-gradient(ellipse at 50% 0%,rgba(126,76,255,.5) 0%,rgba(126,76,255,.28) 28%,rgba(126,76,255,0) 70%)!important;filter:blur(16px)!important}
.hero::after{height:150px!important;background:linear-gradient(180deg,rgba(10,20,55,0) 0%,rgba(85,68,166,.16) 34%,rgba(152,133,216,.32) 55%,rgba(229,226,248,.78) 82%,#fff 100%)!important;filter:blur(.3px)!important}
.hero h1{font-size:64px!important;line-height:.96!important;letter-spacing:-3px!important;margin:20px 0 24px!important}
.lead{font-size:18px!important;line-height:1.48!important}
.hero-actions{gap:22px!important;margin-top:30px!important}
.hero-scroll-cue{display:none!important}

/* Expertise — premium icon cards */
.expertise-grid{gap:14px!important}
.expertise-card{min-height:250px!important;padding:18px!important;border:1px solid #e7e7f3!important;border-radius:16px!important;background:linear-gradient(180deg,#fff 0%,#fcfbff 100%)!important;box-shadow:0 14px 34px rgba(40,29,105,.07)!important}
.expertise-card .domain-art{width:86px!important;height:86px!important;border-radius:50%!important;margin:0 0 15px!important;display:grid!important;place-items:center!important;color:#6e42ed!important;background:radial-gradient(circle at 50% 45%,rgba(123,89,255,.18),rgba(242,239,255,.75) 62%,rgba(255,255,255,.95) 100%)!important;border:1px solid #ded7ff!important;box-shadow:0 0 0 8px rgba(123,89,255,.03),0 10px 22px rgba(107,70,230,.08)!important}
.expertise-card .domain-art svg{width:48px!important;height:48px!important;stroke-width:1.65!important}
.expertise-card[data-sector="2"]{border-color:#8b68f3!important;box-shadow:0 20px 46px rgba(94,54,214,.14)!important;transform:translateY(-2px)}
.expertise-card[data-sector="2"] .domain-art{color:#fff!important;background:linear-gradient(145deg,#8754ff,#6030db)!important;border-color:transparent!important;box-shadow:0 16px 28px rgba(103,58,232,.25)!important}
.expertise-card .domain-title{font-size:15px!important}
.expertise-card .domain-meta{font-size:11px!important;line-height:1.45!important;color:#66708c!important}
.domain-job-pill{background:#f3efff!important;border-color:#e1d8ff!important;color:#5a35d4!important;font-size:9.5px!important}
.expertise-card[data-sector="2"] .domain-count{background:#16204a!important;color:#fff!important}
.expertise-card .circle{width:24px!important;height:24px!important}

/* Approach block */
.approach{background:linear-gradient(135deg,#f4f0ff,#faf9ff)!important;border:1px solid #ebe6ff!important;box-shadow:0 18px 45px rgba(48,35,120,.06)!important}
.step-icon{background:linear-gradient(145deg,#fff,#f2eeff)!important;color:#6037d6!important;border:1px solid #e7e0ff}
.step-num{background:linear-gradient(145deg,#8350ff,#6030dc)!important;box-shadow:0 6px 16px rgba(100,54,222,.22)}

/* Proof strip */
.proof{margin-top:26px!important;padding:30px 38px!important;border-radius:18px!important;background:linear-gradient(120deg,#07122f 0%,#152866 55%,#4d22ca 130%)!important;box-shadow:0 20px 50px rgba(8,16,53,.16)!important}
.proof h2{font-size:28px!important}.proof p{font-size:14px!important}.proof a{font-size:13px!important;padding:12px 14px;border-radius:11px;background:linear-gradient(120deg,rgba(132,84,255,.35),rgba(107,56,230,.22));border:1px solid rgba(185,161,255,.25)}

/* Difference — tighter, colorful cards */
.difference{padding-top:30px!important;padding-bottom:28px!important}
.difference h2{font-size:27px!important;margin-bottom:24px!important;text-align:center}
.difference h2 em{color:#6f3ff0!important}
.difference h2::after{content:"";display:block;width:58px;height:3px;border-radius:999px;margin:12px auto 0;background:linear-gradient(90deg,#6f3ff0,#b56aff)}
.difference-grid{gap:10px!important;grid-template-columns:repeat(5,1fr)!important;text-align:center!important}
.diff-item{position:relative;min-height:190px;padding:14px 18px 16px!important;border:1px solid #e9e6f5!important;border-radius:16px!important;background:linear-gradient(180deg,#fff 0%,#fbf9ff 100%)!important;box-shadow:0 10px 28px rgba(39,27,102,.045)!important;overflow:visible!important}
.diff-item::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:42px;height:3px;border-radius:999px;background:linear-gradient(90deg,#6f3ff0,#ad70ff)}
.diff-icon{float:none!important;width:58px!important;height:58px!important;margin:-38px auto 11px!important;border-radius:50%!important;display:grid!important;place-items:center!important;color:#6338e1!important;background:radial-gradient(circle,#fff 35%,#f1edff 100%)!important;border:1px solid #e0d7ff!important;box-shadow:0 10px 22px rgba(111,63,240,.09)!important}
.diff-icon svg{width:31px!important;height:31px!important;stroke-width:1.8!important}
.diff-item:nth-child(4) .diff-icon{color:#c34ecb!important}.diff-item:nth-child(5) .diff-icon{color:#5d3be0!important}
.diff-item b{font-size:13px!important;line-height:1.35!important}.diff-item p{font-size:11px!important;line-height:1.55!important;color:#636c86!important;padding-top:7px!important}

/* Resources — compact colorful panel */
.resources{padding:12px 0 34px!important}
.resources h2{font-size:27px!important;margin:0 0 4px!important}.resources>p{margin:0!important;color:#64708c}
.resources>div{margin-top:18px!important;gap:14px!important;padding:14px 18px;border:1px solid #e7e3f7;border-radius:18px;background:linear-gradient(100deg,#f8f5ff,#ffffff 52%,#f2efff);box-shadow:0 14px 34px rgba(48,35,120,.055)}
.resources a{min-width:190px;padding:12px 16px!important;border:1px solid #e4ddfb!important;border-radius:12px!important;background:rgba(255,255,255,.9)!important;box-shadow:0 7px 18px rgba(60,41,141,.05)!important;color:#1b2450!important}
.resources a::before{content:"";width:28px;height:28px;border-radius:8px;background:#efeaff;box-shadow:inset 0 0 0 1px #e2d7ff;flex:none}
.resources a svg{color:#6f3ff0!important}

/* Opportunities heading to match approved visual system */
.opportunities{padding-top:50px!important}
.opportunities-head{margin-bottom:18px!important}
.opportunities-head h2{font-size:36px!important}.opportunities-head h2 em{color:#6f3ff0!important}
.jobs-toolbar{border-color:#e4e5f1!important;background:linear-gradient(180deg,#fafaff,#f6f6fb)!important}
.jobs-filters{background:linear-gradient(180deg,#fff,#fbfaff)!important;border-color:#e3ddfa!important;box-shadow:0 12px 30px rgba(49,32,122,.05)}
.filter-choice.active{background:linear-gradient(120deg,#7440ef,#5e31dc)!important}
.job-card--premium{border-color:#e9e9f3!important;border-radius:16px!important;background:linear-gradient(180deg,#fff,#fcfbff)!important}
.job-card--premium .job-tag{background:#f1ecff!important;color:#5d35d5!important}
.job-card--premium .job-status{background:#f3f7ef!important;color:#4b3c74!important}
.job-card--premium .job-link{color:#5b34d5!important}
.job-card--premium .job-contact{background:linear-gradient(120deg,#7744ef,#5729d4)!important;box-shadow:0 9px 22px rgba(97,44,213,.18)}

/* Footer CTA / contact */
.cta-refined{min-height:168px!important;padding:24px 78px 24px 250px!important;border-radius:18px!important;background:
 radial-gradient(420px 180px at 74% 45%,rgba(122,68,246,.24),transparent 75%),
 linear-gradient(110deg,#07112e,#111b48 58%,#2c1877 130%)!important;box-shadow:0 20px 48px rgba(11,17,51,.16)!important}
.cta-refined::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 30%,rgba(167,126,255,.17) 0 2px,transparent 2.5px);background-size:16px 16px;opacity:.35;pointer-events:none}
.cta-visual{width:190px!important;height:120px!important;left:12px;flex:none}
.cta-core{width:64px!important;height:64px!important;left:62px!important;top:28px!important;border-radius:20px!important;background:linear-gradient(145deg,#8754ff,#6030dc)!important;box-shadow:0 16px 34px rgba(97,48,222,.32)!important}
.cta-core svg{width:30px!important;height:30px!important}
.cta-node{width:15px!important;height:15px!important;background:#cbbaff!important;box-shadow:0 0 0 8px rgba(156,124,255,.10)!important}
.cta h2{font-size:27px!important;margin-bottom:9px!important}.cta p{font-size:13px!important;color:#e0e4f4}.cta .btn{min-width:240px!important;min-height:56px!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(102,49,221,.28)}

/* mobile */
@media(max-width:1080px){
  .logo-word small{display:none}.hero h1{font-size:56px!important}.expertise-card{min-height:235px!important}.difference-grid{grid-template-columns:repeat(5,1fr)!important}.cta-refined{padding-left:205px!important}
}
@media(max-width:820px){
  .logo-mark{width:31px;height:34px;font-size:23px}.logo-word>span,.logo-word>b{font-size:18px}.hero h1{font-size:52px!important}.difference-grid{grid-template-columns:1fr 1fr!important}.resources>div{flex-wrap:wrap}.resources a{flex:1;min-width:0}.cta-refined{padding:28px 24px 28px 160px!important}.cta-refined .cta-visual{left:-8px!important}.cta-refined .btn{min-width:0!important;width:100%}
}
@media(max-width:560px){
  .logo-word small{display:none}.hero h1{font-size:46px!important}.difference-grid{grid-template-columns:1fr!important}.diff-item{min-height:165px}.resources>div{flex-direction:column}.resources a{width:100%}.cta-refined{padding:26px 20px 26px 20px!important}.cta-refined .cta-visual{display:none!important}.opportunities-head h2{font-size:30px!important}
}

/* === APPROVED EXPERTISE VISUAL — exact reference treatment === */
.expertise-carousel{overflow:hidden!important;padding:0 0 10px!important;border-radius:0!important;box-shadow:none!important}
.expertise-carousel::before,.expertise-carousel::after{display:none!important}
.expertise-grid{display:flex!important;gap:16px!important;transform:translate3d(0,0,0);transition:transform .65s cubic-bezier(.22,.75,.18,1)!important}
.expertise-card{position:relative!important;flex:0 0 calc((100% - 64px)/5)!important;width:calc((100% - 64px)/5)!important;min-width:calc((100% - 64px)/5)!important;height:472px!important;min-height:472px!important;padding:20px 22px 22px!important;border:1px solid #e6e4f4!important;border-radius:20px!important;background:linear-gradient(180deg,#ffffff 0%,#fdfcff 100%)!important;box-shadow:0 14px 36px rgba(30,29,78,.07)!important;justify-content:flex-start!important}
.expertise-card:hover{transform:translateY(-4px)!important;box-shadow:0 22px 44px rgba(51,37,123,.12)!important;border-color:#d9d0ff!important}
.expertise-card[data-sector="2"]{border-color:#bba4ff!important;box-shadow:0 20px 44px rgba(104,66,228,.14)!important;transform:translateY(0)!important}
.expertise-card[data-sector="2"]::after{content:""!important;position:absolute!important;left:20px!important;right:20px!important;bottom:0!important;height:4px!important;border-radius:999px 999px 0 0!important;background:linear-gradient(90deg,#6a3ff0,#a46cff)!important;transform:none!important}
.expertise-card[data-sector="2"] .domain-title{color:#693be6!important}
.expertise-card .domain-art{width:118px!important;height:118px!important;border-radius:50%!important;margin:0 0 24px!important;display:grid!important;place-items:center!important;flex:none!important;background:radial-gradient(circle at 50% 45%,#f1edff 0%,#f8f6ff 64%,#fff 100%)!important;border:1px solid #d8d0ff!important;box-shadow:0 0 0 8px rgba(123,89,255,.035),0 12px 26px rgba(107,70,230,.08)!important;color:#322c72!important}
.expertise-card .domain-art svg{width:64px!important;height:64px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.65!important}
.expertise-card[data-sector="2"] .domain-art{color:#fff!important;background:linear-gradient(145deg,#8754ff 0%,#5e2dde 100%)!important;border-color:transparent!important;box-shadow:0 16px 32px rgba(103,58,232,.23)!important}
.expertise-card .domain-copy{gap:10px!important;min-height:0!important}
.expertise-card .domain-title{font-size:21px!important;line-height:1.15!important;letter-spacing:-.5px!important;font-weight:900!important}
.expertise-card .domain-meta{font-size:12px!important;line-height:1.5!important;min-height:55px!important;color:#68718a!important}
.expertise-card .domain-jobs{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:4px!important}
.expertise-card .domain-job-pill{padding:8px 11px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:800!important;border:1px solid #dfd7ff!important}
.expertise-card .domain-bottom{margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.expertise-card .domain-count{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:900!important}
.expertise-card[data-sector="2"] .domain-count{background:#151e46!important;color:#fff!important}
.expertise-card .circle{width:40px!important;height:40px!important;border-radius:50%!important;margin:0!important;border:1px solid #8f6bff!important;color:#7544ef!important;background:#fff!important}
.expertise-card .circle svg{width:18px!important;height:18px!important}
.expertise-card[data-sector="2"] .circle{color:#fff!important;background:linear-gradient(135deg,#8c5cff,#6135e3)!important;border-color:transparent!important;box-shadow:0 10px 20px rgba(103,58,232,.18)!important}
.carousel-status{font-size:14px!important;min-width:62px!important;color:#1f2856!important}
.section-head{align-items:flex-end!important;margin-bottom:38px!important}
.section h2{font-size:35px!important;line-height:1.08!important;letter-spacing:-1.1px!important;margin:0 0 18px!important}
.section h2 em{color:#7040ef!important}
.section-subtitle{font-size:14px!important;color:#6e7792!important;max-width:720px!important;margin-top:0!important}
.carousel-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e1dcf4!important;color:#7544ef!important;box-shadow:0 8px 18px rgba(34,27,82,.05)!important}
.carousel-btn svg{width:18px!important;height:18px!important}
@media(max-width:1080px){.expertise-card{flex-basis:calc((100% - 32px)/3)!important;width:calc((100% - 32px)/3)!important;min-width:calc((100% - 32px)/3)!important}}
@media(max-width:700px){.expertise-card{flex-basis:100%!important;width:100%!important;min-width:100%!important;height:430px!important;min-height:430px!important}.section h2{font-size:28px!important}.section-head{align-items:flex-start!important}}

/* === APPROVED EXPERTISE VISUAL === */
.expertise-carousel{overflow:hidden!important;padding:0 0 10px!important;border-radius:0!important;box-shadow:none!important}
.expertise-carousel::before,.expertise-carousel::after{display:none!important}
.expertise-grid{display:flex!important;gap:16px!important;transform:translate3d(0,0,0);transition:transform .65s cubic-bezier(.22,.75,.18,1)!important}
.expertise-card{position:relative!important;flex:0 0 calc((100% - 64px)/5)!important;width:calc((100% - 64px)/5)!important;min-width:calc((100% - 64px)/5)!important;height:472px!important;min-height:472px!important;padding:20px 22px 22px!important;border:1px solid #e6e4f4!important;border-radius:20px!important;background:linear-gradient(180deg,#fff 0%,#fdfcff 100%)!important;box-shadow:0 14px 36px rgba(30,29,78,.07)!important;justify-content:flex-start!important}
.expertise-card:hover{transform:translateY(-4px)!important;box-shadow:0 22px 44px rgba(51,37,123,.12)!important;border-color:#d9d0ff!important}
.expertise-card[data-sector="2"]{border-color:#bba4ff!important;box-shadow:0 20px 44px rgba(104,66,228,.14)!important;transform:translateY(0)!important}
.expertise-card[data-sector="2"]::after{content:""!important;position:absolute!important;left:20px!important;right:20px!important;bottom:0!important;height:4px!important;border-radius:999px 999px 0 0!important;background:linear-gradient(90deg,#6a3ff0,#a46cff)!important;transform:none!important}
.expertise-card[data-sector="2"] .domain-title{color:#693be6!important}
.expertise-card .domain-art{width:118px!important;height:118px!important;border-radius:50%!important;margin:0 0 24px!important;display:grid!important;place-items:center!important;flex:none!important;background:radial-gradient(circle at 50% 45%,#f1edff 0%,#f8f6ff 64%,#fff 100%)!important;border:1px solid #d8d0ff!important;box-shadow:0 0 0 8px rgba(123,89,255,.035),0 12px 26px rgba(107,70,230,.08)!important;color:#322c72!important}
.expertise-card .domain-art svg{width:64px!important;height:64px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.65!important}
.expertise-card[data-sector="2"] .domain-art{color:#fff!important;background:linear-gradient(145deg,#8754ff 0%,#5e2dde 100%)!important;border-color:transparent!important;box-shadow:0 16px 32px rgba(103,58,232,.23)!important}
.expertise-card .domain-copy{gap:10px!important;min-height:0!important}
.expertise-card .domain-title{font-size:21px!important;line-height:1.15!important;letter-spacing:-.5px!important;font-weight:900!important}
.expertise-card .domain-meta{font-size:12px!important;line-height:1.5!important;min-height:55px!important;color:#68718a!important}
.expertise-card .domain-jobs{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:4px!important}
.expertise-card .domain-job-pill{padding:8px 11px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:800!important;border:1px solid #dfd7ff!important}
.expertise-card .domain-bottom{margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.expertise-card .domain-count{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:900!important}
.expertise-card[data-sector="2"] .domain-count{background:#151e46!important;color:#fff!important}
.expertise-card .circle{width:40px!important;height:40px!important;border-radius:50%!important;margin:0!important;border:1px solid #8f6bff!important;color:#7544ef!important;background:#fff!important}
.expertise-card .circle svg{width:18px!important;height:18px!important}
.expertise-card[data-sector="2"] .circle{color:#fff!important;background:linear-gradient(135deg,#8c5cff,#6135e3)!important;border-color:transparent!important;box-shadow:0 10px 20px rgba(103,58,232,.18)!important}
.carousel-status{font-size:14px!important;min-width:62px!important;color:#1f2856!important}
.section-head{align-items:flex-end!important;margin-bottom:38px!important}
.section h2{font-size:35px!important;line-height:1.08!important;letter-spacing:-1.1px!important;margin:0 0 18px!important}
.section-subtitle{font-size:14px!important;color:#6e7792!important;max-width:720px!important}
.carousel-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e1dcf4!important;color:#7544ef!important;box-shadow:0 8px 18px rgba(34,27,82,.05)!important}
.carousel-btn svg{width:18px!important;height:18px!important}
@media(max-width:1080px){.expertise-card{flex-basis:calc((100% - 32px)/3)!important;width:calc((100% - 32px)/3)!important;min-width:calc((100% - 32px)/3)!important}}
@media(max-width:700px){.expertise-card{flex-basis:100%!important;width:100%!important;min-width:100%!important;height:430px!important;min-height:430px!important}.section h2{font-size:28px!important}.section-head{align-items:flex-start!important}}

/* === APPROVED EXPERTISE VISUAL === */
.expertise-carousel{overflow:hidden!important;padding:0 0 10px!important;border-radius:0!important;box-shadow:none!important}
.expertise-carousel::before,.expertise-carousel::after{display:none!important}
.expertise-grid{display:flex!important;gap:16px!important;transform:translate3d(0,0,0);transition:transform .65s cubic-bezier(.22,.75,.18,1)!important}
.expertise-card{position:relative!important;flex:0 0 calc((100% - 64px)/5)!important;width:calc((100% - 64px)/5)!important;min-width:calc((100% - 64px)/5)!important;height:472px!important;min-height:472px!important;padding:20px 22px 22px!important;border:1px solid #e6e4f4!important;border-radius:20px!important;background:linear-gradient(180deg,#fff 0%,#fdfcff 100%)!important;box-shadow:0 14px 36px rgba(30,29,78,.07)!important;justify-content:flex-start!important}
.expertise-card:hover{transform:translateY(-4px)!important;box-shadow:0 22px 44px rgba(51,37,123,.12)!important;border-color:#d9d0ff!important}
.expertise-card[data-sector="2"]{border-color:#bba4ff!important;box-shadow:0 20px 44px rgba(104,66,228,.14)!important;transform:translateY(0)!important}
.expertise-card[data-sector="2"]::after{content:""!important;position:absolute!important;left:20px!important;right:20px!important;bottom:0!important;height:4px!important;border-radius:999px 999px 0 0!important;background:linear-gradient(90deg,#6a3ff0,#a46cff)!important;transform:none!important}
.expertise-card[data-sector="2"] .domain-title{color:#693be6!important}
.expertise-card .domain-art{width:118px!important;height:118px!important;border-radius:50%!important;margin:0 0 24px!important;display:grid!important;place-items:center!important;flex:none!important;background:radial-gradient(circle at 50% 45%,#f1edff 0%,#f8f6ff 64%,#fff 100%)!important;border:1px solid #d8d0ff!important;box-shadow:0 0 0 8px rgba(123,89,255,.035),0 12px 26px rgba(107,70,230,.08)!important;color:#322c72!important}
.expertise-card .domain-art svg{width:64px!important;height:64px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.65!important}
.expertise-card[data-sector="2"] .domain-art{color:#fff!important;background:linear-gradient(145deg,#8754ff 0%,#5e2dde 100%)!important;border-color:transparent!important;box-shadow:0 16px 32px rgba(103,58,232,.23)!important}
.expertise-card .domain-copy{gap:10px!important;min-height:0!important}
.expertise-card .domain-title{font-size:21px!important;line-height:1.15!important;letter-spacing:-.5px!important;font-weight:900!important}
.expertise-card .domain-meta{font-size:12px!important;line-height:1.5!important;min-height:55px!important;color:#68718a!important}
.expertise-card .domain-jobs{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:4px!important}
.expertise-card .domain-job-pill{padding:8px 11px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:800!important;border:1px solid #dfd7ff!important}
.expertise-card .domain-bottom{margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
.expertise-card .domain-count{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:8px 12px!important;border-radius:999px!important;background:#f4f1ff!important;color:#6542ce!important;font-size:11px!important;font-weight:900!important}
.expertise-card[data-sector="2"] .domain-count{background:#151e46!important;color:#fff!important}
.expertise-card .circle{width:40px!important;height:40px!important;border-radius:50%!important;margin:0!important;border:1px solid #8f6bff!important;color:#7544ef!important;background:#fff!important}
.expertise-card .circle svg{width:18px!important;height:18px!important}
.expertise-card[data-sector="2"] .circle{color:#fff!important;background:linear-gradient(135deg,#8c5cff,#6135e3)!important;border-color:transparent!important;box-shadow:0 10px 20px rgba(103,58,232,.18)!important}
.carousel-status{font-size:14px!important;min-width:62px!important;color:#1f2856!important}
.section-head{align-items:flex-end!important;margin-bottom:38px!important}
.section h2{font-size:35px!important;line-height:1.08!important;letter-spacing:-1.1px!important;margin:0 0 18px!important}
.section-subtitle{font-size:14px!important;color:#6e7792!important;max-width:720px!important}
.carousel-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:#fff!important;border:1px solid #e1dcf4!important;color:#7544ef!important;box-shadow:0 8px 18px rgba(34,27,82,.05)!important}
.carousel-btn svg{width:18px!important;height:18px!important}
@media(max-width:1080px){.expertise-card{flex-basis:calc((100% - 32px)/3)!important;width:calc((100% - 32px)/3)!important;min-width:calc((100% - 32px)/3)!important}}
@media(max-width:700px){.expertise-card{flex-basis:100%!important;width:100%!important;min-width:100%!important;height:430px!important;min-height:430px!important}.section h2{font-size:28px!important}.section-head{align-items:flex-start!important}}

/* === FINAL: curved hero-to-white transition (replaces flat fade) === */
.hero::before{
  content:"" !important;
  position:absolute !important;left:0 !important;right:0 !important;bottom:-1px !important;
  height:150px !important;
  background:url('../img/hero-curve-glow.svg') no-repeat bottom center/100% 100% !important;
  filter:none !important;
  opacity:1 !important;
  pointer-events:none !important;
  z-index:1 !important;
}
.hero::after{
  content:"" !important;
  position:absolute !important;left:0 !important;right:0 !important;bottom:-1px !important;
  height:150px !important;
  background:url('../img/hero-curve-fill.svg') no-repeat bottom center/100% 100% !important;
  filter:none !important;
  pointer-events:none !important;
  z-index:2 !important;
}
@media(max-width:700px){
  .hero::before,.hero::after{height:90px !important}
}

/* === STARK TALENT — PREMIUM ICON SYSTEM === */
/* Global crispness: rounded joins/caps on every inline icon */
svg{stroke-linecap:round!important;stroke-linejoin:round!important}
.domain-art svg,.diff-icon svg,.step-icon svg,.sector-icon svg,.stat-icon svg,.job-facts svg,.mini-icon svg{vector-effect:non-scaling-stroke}
/* Subtle per-sector accent on the expertise icons (rest state only; hover stays crisp white on purple).
   Set on the container color — the icons use stroke:currentColor, so this tints them reliably. */
.expertise-card[data-sector="0"]:not(:hover) .domain-art{color:#2f6bff!important}
.expertise-card[data-sector="1"]:not(:hover) .domain-art{color:#5b6b86!important}
.expertise-card[data-sector="3"]:not(:hover) .domain-art{color:#e05a97!important}
.expertise-card[data-sector="4"]:not(:hover) .domain-art{color:#12a89f!important}
.expertise-card[data-sector="5"]:not(:hover) .domain-art{color:#f0902a!important}
.expertise-card[data-sector="6"]:not(:hover) .domain-art{color:#6d3ff0!important}
.expertise-card[data-sector="7"]:not(:hover) .domain-art{color:#2fa36b!important}
.expertise-card[data-sector="8"]:not(:hover) .domain-art{color:#2f8c78!important}
.expertise-card[data-sector="9"]:not(:hover) .domain-art{color:#8a6d3f!important}
.expertise-card[data-sector="10"]:not(:hover) .domain-art{color:#c79a1f!important}
.expertise-card[data-sector="11"]:not(:hover) .domain-art{color:#d64ec9!important}
.expertise-card[data-sector="12"]:not(:hover) .domain-art{color:#e05a97!important}
.expertise-card[data-sector="13"]:not(:hover) .domain-art{color:#4f5bd5!important}
.expertise-card[data-sector="14"]:not(:hover) .domain-art{color:#e0714e!important}
/* also drive the stroke directly so the tint is guaranteed (icons use stroke:currentColor) */
.expertise-grid .expertise-card[data-sector="0"]:not(:hover) .domain-art svg{stroke:#2f6bff!important}
.expertise-grid .expertise-card[data-sector="1"]:not(:hover) .domain-art svg{stroke:#5b6b86!important}
.expertise-grid .expertise-card[data-sector="3"]:not(:hover) .domain-art svg{stroke:#e05a97!important}
.expertise-grid .expertise-card[data-sector="4"]:not(:hover) .domain-art svg{stroke:#12a89f!important}
.expertise-grid .expertise-card[data-sector="5"]:not(:hover) .domain-art svg{stroke:#f0902a!important}
.expertise-grid .expertise-card[data-sector="6"]:not(:hover) .domain-art svg{stroke:#6d3ff0!important}
.expertise-grid .expertise-card[data-sector="7"]:not(:hover) .domain-art svg{stroke:#2fa36b!important}
.expertise-grid .expertise-card[data-sector="8"]:not(:hover) .domain-art svg{stroke:#2f8c78!important}
.expertise-grid .expertise-card[data-sector="9"]:not(:hover) .domain-art svg{stroke:#8a6d3f!important}
.expertise-grid .expertise-card[data-sector="10"]:not(:hover) .domain-art svg{stroke:#c79a1f!important}
.expertise-grid .expertise-card[data-sector="11"]:not(:hover) .domain-art svg{stroke:#d64ec9!important}
.expertise-grid .expertise-card[data-sector="12"]:not(:hover) .domain-art svg{stroke:#e05a97!important}
.expertise-grid .expertise-card[data-sector="13"]:not(:hover) .domain-art svg{stroke:#4f5bd5!important}
.expertise-grid .expertise-card[data-sector="14"]:not(:hover) .domain-art svg{stroke:#e0714e!important}

/* ===================== STARK TALENT — FINAL PREMIUM PASS ===================== */

/* 1. Job cards: apply icon + featured "Postuler directement" button + skill tags */
.job-card-bottom{align-items:center}
.job-contact{display:inline-flex;align-items:center;gap:7px}
.job-contact svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.job-featured-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.job-apply-direct{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#3a1d9e;border:0;border-radius:11px;padding:13px 18px;font:800 12px inherit;cursor:pointer;box-shadow:0 12px 26px rgba(4,10,40,.28)}
.job-apply-direct:hover{background:#f3efff;color:#4b23c7;transform:translateY(-2px);box-shadow:0 16px 30px rgba(4,10,40,.34)}
.job-apply-direct svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.job-apply-direct:hover svg{transform:translateX(3px)}
.job-skills{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.job-skill{font:800 9.5px inherit;color:#5d43c4;background:#f2efff;border:1px solid #e2dbff;border-radius:999px;padding:4px 9px;letter-spacing:.2px}
.job-featured-card .job-skill{background:rgba(255,255,255,.12);color:#d9d1ff;border-color:rgba(255,255,255,.18)}

/* 2. BTP (sector 2): align with the standard light sector-icon system (no heavy purple fill) */
.expertise-card[data-sector="2"]{border-color:#e6e4f4!important;box-shadow:0 14px 36px rgba(30,29,78,.07)!important;transform:none!important}
.expertise-card[data-sector="2"]:hover{transform:translateY(-4px)!important;box-shadow:0 22px 44px rgba(51,37,123,.12)!important;border-color:#d9d0ff!important}
.expertise-card[data-sector="2"] .domain-art{background:radial-gradient(circle at 50% 45%,#f1edff 0%,#f8f6ff 64%,#fff 100%)!important;border:1px solid #d8d0ff!important;box-shadow:0 0 0 8px rgba(123,89,255,.035),0 12px 26px rgba(107,70,230,.08)!important;color:#e0851e!important}
.expertise-card[data-sector="2"]:hover .domain-art{background:linear-gradient(145deg,#8754ff 0%,#5e2dde 100%)!important;border-color:transparent!important;color:#fff!important}
.expertise-card[data-sector="2"] .domain-art svg{stroke:currentColor!important}
.expertise-card[data-sector="2"]:hover .domain-art svg{stroke:#fff!important}
.expertise-card[data-sector="2"]::after{background:linear-gradient(90deg,#e0851e,#f0b45e)!important}
.expertise-card[data-sector="2"] .domain-title{color:#1f2856!important}
.expertise-card[data-sector="2"] .domain-count{background:#f4f1ff!important;color:#6542ce!important}
.expertise-card[data-sector="2"] .circle{color:#7544ef!important;background:#fff!important;border-color:#8f6bff!important}
.expertise-grid .expertise-card[data-sector="2"]:not(:hover) .domain-art svg{stroke:#e0851e!important}

/* 3. Hero: tighten empty vertical space, balance the composition.
   The right-hand column is the tallest; stretch the grid, top-align the copy and
   ground the illustration at the bottom so it fills the column instead of floating. */
.hero{min-height:0!important}
.hero h1{margin:16px 0 20px!important}
/* Compact the right-hand cards so the hero is denser and shorter (less void, smaller people) */
.hero-side{justify-content:center!important;gap:11px!important;padding-top:0!important}
.hero-side .stat{min-height:0!important;padding:13px 16px!important}
.hero-side .process h3{margin:16px 18px 10px!important}
.hero-side .process-step{height:31px!important}
.hero-side .talents{padding:13px 20px!important}
.hero-visual--refined{min-height:0!important;align-self:stretch!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;place-items:unset!important}
.hero-image-shell{height:auto!important;align-self:flex-end!important;width:min(470px,100%)!important;margin-bottom:-4px}
.hero-image-shell img{height:498px!important;max-height:520px!important;width:auto!important;max-width:100%!important}
.hero-glow-a{top:26%!important;width:200px!important;height:200px!important}.hero-glow-b{top:12%!important;width:160px!important;height:160px!important}
@media(max-width:980px){.hero-image-shell img{height:430px!important}}
@media(max-width:700px){.hero-image-shell img{height:380px!important}.hero-image-shell{margin-bottom:0}}

/* 4. Logo: cleaner mark, refined wordmark, better spacing */
.logo{gap:12px!important;align-items:center!important}
.logo-mark{width:40px!important;height:42px!important;font-size:25px!important;border-radius:13px 5px 13px 5px!important;background:linear-gradient(145deg,#9a67ff 0%,#6135e8 52%,#3c21a9 100%)!important;box-shadow:0 10px 24px rgba(112,64,239,.32),inset 0 1px 0 rgba(255,255,255,.45)!important;transform:none!important}
.logo-word{row-gap:2px}
.logo-word>span,.logo-word>b{font-size:20px!important;letter-spacing:.5px!important}
.logo-word>b{color:#9a78ff!important;letter-spacing:1.6px!important}
.logo-word small{font-size:8.5px!important;letter-spacing:.7px!important;color:#aeb8d7!important;margin-top:5px!important;font-weight:600}

/* 5. Resources: premium action cards */
.resources{padding:14px 0 48px!important}
.resources-head{max-width:720px;margin:0 0 26px}
.resources-head h2{font-size:30px!important;line-height:1.08;letter-spacing:-.8px;margin:6px 0 10px!important}
.resources-head h2 em{color:#7040ef!important}
.resources-head .section-subtitle{margin:0!important}
.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.resource-card{display:grid;grid-template-columns:52px 1fr 22px;align-items:center;gap:16px;text-align:left;width:100%;cursor:pointer;padding:20px;border:1px solid #e7e3f7;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfaff);box-shadow:0 12px 30px rgba(48,35,120,.055);color:#141b3d;text-decoration:none;font-family:inherit;transition:transform .3s var(--st-transition),box-shadow .3s ease,border-color .3s ease}
.resource-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(48,35,120,.12);border-color:#d6ccff}
.resource-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#6f3ff0;background:radial-gradient(circle at 30% 25%,#f3f0ff,#e9e4ff);border:1px solid #ded7ff;box-shadow:inset 0 1px 0 #fff;transition:background .3s ease,color .3s ease,transform .3s var(--st-transition)}
.resource-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.resource-card:hover .resource-icon{background:linear-gradient(135deg,#7d52ff,#5f35dd);color:#fff;border-color:#7d52ff;transform:translateY(-2px)}
.resource-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.resource-body strong{font-size:15px;font-weight:800;letter-spacing:-.2px}
.resource-body small{font-size:11.5px;color:#68708c;line-height:1.5}
.resource-go{width:22px;height:22px;display:grid;place-items:center;color:#7040ef;transition:transform .3s var(--st-transition)}
.resource-go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.resource-card:hover .resource-go{transform:translateX(4px)}
@media(max-width:900px){.resources-grid{grid-template-columns:1fr}}

/* 6. Closing "rappel" band + premium footer */
.closing{margin:26px auto 0}
.closing-inner{position:relative;overflow:hidden;border-radius:22px;padding:46px 40px;text-align:center;background:radial-gradient(600px 260px at 50% -12%,rgba(122,68,246,.28),transparent 70%),linear-gradient(120deg,#07112e,#141f52 60%,#2c1877 130%);color:#fff;box-shadow:0 24px 60px rgba(9,16,48,.2)}
.closing-inner .section-kicker{color:#b7a8ff!important}
.closing-inner h2{font-size:32px;letter-spacing:-1px;margin:8px 0 10px}
.closing-inner h2 em{color:#b79bff}
.closing-inner p{max-width:520px;margin:0 auto;color:#d7dbf0;font-size:14px;line-height:1.6}
.closing-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.btn-light-outline{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-light-outline:hover{background:rgba(255,255,255,.16)}
.site-footer{margin-top:42px;background:linear-gradient(180deg,#060d24,#0a1330);color:#c7cde3;padding:54px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.3fr 1fr;gap:34px}
.footer-brand p{font-size:12px;line-height:1.65;color:#8f98ba;margin:16px 0 0;max-width:300px}
.footer-logo{margin:0}
.site-footer .logo-word>span,.site-footer .logo-word>b{color:#fff!important}
.site-footer .logo-word>b{color:#9a78ff!important}
.footer-col h4{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#8b93b6;margin:0 0 14px;font-weight:800}
.footer-col a,.footer-link{display:block;background:none;border:0;padding:0 0 11px;text-align:left;color:#c7cde3;font:600 13px inherit;text-decoration:none;cursor:pointer;transition:color .2s ease,transform .2s ease}
.footer-col a:hover,.footer-link:hover{color:#fff;transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#7c85a8}
.footer-tagline{color:#9aa2c4}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.closing-inner{padding:34px 24px}.closing-inner h2{font-size:26px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}

/* 7. Legal dialog */
.legal-dialog{width:min(600px,calc(100% - 28px));border:0;border-radius:20px;padding:30px 32px;color:#101733;background:#fff;box-shadow:0 30px 90px rgba(4,9,27,.4)}
.legal-dialog .contact-kicker{margin-bottom:6px}
.legal-dialog h2{font-size:24px;margin:2px 0 16px}
.legal-body p{font-size:13px;line-height:1.7;color:#4b5470;margin:0 0 12px}
.legal-body .legal-note{font-size:11.5px;color:#8a8fa6;font-style:italic;border-top:1px solid #ececf4;padding-top:12px;margin-top:4px}

/* 8. Global premium touch: consistent icon stroke in buttons */
.btn svg{stroke-width:2}
.header-cta svg,.closing-actions .btn svg{width:16px;height:16px}

/* 9. Contact dialog tabs: equal-width, readable labels */
.contact-mode-tabs{gap:6px!important;flex-wrap:wrap}
.contact-mode{flex:1 1 0;min-width:130px;text-align:center;justify-content:center;font-size:12.5px!important;padding:11px 10px!important;line-height:1.25;white-space:normal}
@media(max-width:560px){.contact-mode{flex:1 1 100%;min-width:0;font-size:12px!important;border-bottom:1px solid #ececf5}.contact-mode.is-active{border-bottom:2px solid #7040ef}}
/* Feature (difference) icons — category accents */
.diff-item:nth-child(1) .diff-icon{color:#6d3ff0!important}
.diff-item:nth-child(2) .diff-icon{color:#2f6bff!important}
.diff-item:nth-child(3) .diff-icon{color:#12a89f!important}
/* Icon polish for containers: smoother transition + centering */
.domain-art svg,.diff-icon svg,.step-icon svg{transition:stroke .35s ease,color .35s ease,transform .35s cubic-bezier(.22,.75,.18,1)}
.step-item:hover .step-icon svg,.diff-item:hover .diff-icon svg{transform:scale(1.06)}
/* Job fact + toolbar icons: consistent accent tint (premium cards only; featured stays light) */
.job-card--premium .job-facts svg{stroke:#7a54e8}
.jobs-search svg{stroke:#7040ef}

/* ==================== STARK TALENT — SESSION REFINEMENT PASS ==================== */

/* 2. Expertises — remove the orange/static bar on BTP; align it with the standard hover underline.
   Higher specificity (.expertise-grid …) to beat the earlier data-sector="2" transform:none rules. */
.expertise-grid .expertise-card[data-sector="2"]::after{
  content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:0!important;
  height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,#7040ef,#b38bff)!important;
  transform:scaleX(0)!important;transform-origin:left!important;transition:transform .3s var(--st-transition)!important;
}
.expertise-grid .expertise-card[data-sector="2"]:hover::after{transform:scaleX(1)!important}

/* 4. Resources — kill the legacy square (::before) and shine (::after) leaking onto the anchor card */
.resources .resource-card::before,.resources .resource-card::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important}
/* 3. Resources — de-frame the head/grid wrappers and unify the anchor card with the button cards */
.resources>.resources-head,.resources>.resources-grid{border:0!important;background:none!important;box-shadow:none!important;padding:0!important}
/* Force identical GRID layout on all 3 cards (a legacy `.resources a` rule made the
   middle anchor card display:flex, collapsing its icon square to 37px). */
.resources .resource-card{display:grid!important;grid-template-columns:52px 1fr 22px!important;align-items:center!important;gap:16px!important;padding:20px!important;min-width:0!important;border:1px solid #e7e3f7!important;border-radius:18px!important;background:linear-gradient(180deg,#fff,#fbfaff)!important;box-shadow:0 12px 30px rgba(48,35,120,.06)!important;color:#141b3d!important;overflow:visible!important;text-decoration:none!important}
.resources .resource-card .resource-icon{width:52px!important;height:52px!important;flex:none!important;place-self:center start!important}
.resources .resource-card .resource-go{width:22px!important;height:22px!important;place-self:center end!important}
/* Sober, premium: only the WHOLE card lifts. Icon and arrow stay IDENTICAL and static
   across all 3 cards in every state (rest / hover / active / focus) — no inconsistent flip. */
.resources .resource-card:hover{border-color:#d6ccff!important;box-shadow:0 20px 40px rgba(48,35,120,.1)!important;transform:translateY(-4px)!important}
.resources .resource-card:active{transform:translateY(-2px)!important}
.resources .resource-card:hover .resource-icon,
.resources .resource-card:active .resource-icon,
.resources .resource-card:focus-visible .resource-icon{
  background:radial-gradient(circle at 30% 25%,#f3f0ff,#e9e4ff)!important;
  border:1px solid #ded7ff!important;color:#6f3ff0!important;transform:none!important;
  box-shadow:inset 0 1px 0 #fff!important;
}
.resources .resource-card .resource-icon svg,
.resources .resource-card:hover .resource-icon svg,
.resources .resource-card:active .resource-icon svg,
.resources .resource-card:focus-visible .resource-icon svg{stroke:#6f3ff0!important;transform:none!important}
.resources .resource-card .resource-go,
.resources .resource-card:hover .resource-go,
.resources .resource-card:active .resource-go{transform:none!important}
.resources .resource-card .resource-go svg{stroke:#7040ef!important}
.resources-head{max-width:760px;margin:0 0 22px!important}
.resources{padding-top:6px!important}

/* 5. Interaction polish — no jump/duplicate on click; smooth press states */
.expertise-card{-webkit-tap-highlight-color:transparent}
.expertise-card:active{transform:translateY(-4px) scale(.997)!important}
.resource-card,.job-card--premium,.job-featured-card{-webkit-tap-highlight-color:transparent}
.reveal{backface-visibility:hidden}
.hero-visual--refined{z-index:4!important}
/* people image — crisp render + clean shadow (no contrast/saturate artefacts), grounded over the fade */
.hero-image-shell img{
  height:498px!important;max-height:520px!important;width:auto!important;image-rendering:auto!important;
  filter:drop-shadow(0 22px 30px rgba(6,10,35,.34))!important;content:normal!important;
}
.hero-image-shell{margin-bottom:-18px!important}
.hero-image-shell::before{filter:blur(10px)!important;opacity:.85!important}
/* floating cards — rest naturally at the image corners (no far-floating negative offsets) */
.hero-chip{z-index:5!important}
.hero-chip--left{left:-12px!important;top:auto!important;bottom:78px!important}
.hero-chip--right{right:-12px!important;top:54px!important}
@media(max-width:980px){.hero-chip--left{left:0!important;bottom:60px!important}.hero-chip--right{right:0!important;top:40px!important}.hero-image-shell img{height:440px!important}}
@media(max-width:700px){.hero-image-shell img{height:400px!important;max-height:420px!important}.hero-image-shell{margin-bottom:0!important}}

/* 6. Logo — subtle premium refinement (identity unchanged: mark + STARK TALENT + tagline) */
.logo{gap:11px!important;align-items:center!important}
.logo-mark{border-radius:11px 4px 11px 4px!important;box-shadow:0 8px 20px rgba(112,64,239,.3),inset 0 1px 0 rgba(255,255,255,.5)!important}
.logo-word{row-gap:3px!important}
.logo-word>span{color:#fff!important;letter-spacing:.8px!important;font-weight:900!important}
.logo-word>b{letter-spacing:1.5px!important}
.logo-word small{font-size:9px!important;opacity:.85!important;letter-spacing:.5px!important;color:#b4bcda!important;font-weight:500!important}

/* 6. Typography polish — within the Stark Talent identity */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.4px}
.section-subtitle{line-height:1.6!important}
.job-context,.job-detail-lead,.sector-story{line-height:1.65!important}
.filter-label,.appointment-label{letter-spacing:.6px!important}
.contact-intro{line-height:1.65!important}
.lead{letter-spacing:.1px}

/* ==================== FIX PASS (ciblé) ==================== */

/* 2. Fiche expertise (sector dialog) : une seule entrée fluide et premium.
   L'ancien double-jeu (animation dialogIn + animation panelIn + transition globale)
   donnait une impression de bug. On unifie en une seule animation propre. */
.sector-dialog[open]{animation:sectorDialogIn .66s cubic-bezier(.22,.72,.2,1) both!important}
.sector-dialog .sector-panel{animation:none!important}
@keyframes sectorDialogIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* 3. Hero : fondu plus naturel derrière les pieds des personnages (ombre de contact douce).
   La courbe et le dégradé d'origine ne sont PAS modifiés. */
.hero-image-shell::after{
  content:""!important;display:block!important;position:absolute!important;
  left:50%!important;bottom:-8px!important;transform:translateX(-50%)!important;
  width:82%!important;height:76px!important;
  background:radial-gradient(ellipse at 50% 62%,rgba(7,12,40,.5),rgba(9,14,44,.26) 44%,transparent 72%)!important;
  filter:blur(13px)!important;z-index:-1!important;pointer-events:none!important;
}
/* léger halo de raccord bas (côté 72h) : adoucit la jonction bleu/violet → clair, sans toucher la courbe */
.hero-visual::after{opacity:.9!important;filter:blur(6px)!important}

/* ==================== HERO — REFONTE PREMIUM ==================== */
/* Fond plus profond avec une lueur focale derrière le duo (désormais centré) */
.hero{
  background:
    radial-gradient(720px 480px at 50% 40%, rgba(126,86,255,.30), transparent 64%),
    radial-gradient(560px 380px at 82% 82%, rgba(64,44,170,.2), transparent 72%),
    linear-gradient(180deg,#070d2a 0%,#0a1443 52%,#0d1a55 100%)!important;
}
/* Centrer l'illustration dans sa colonne (elle était calée à gauche → cartes flottant dans le vide) */
.hero-visual--refined{align-items:flex-end!important;justify-content:center!important}
.hero-image-shell{width:auto!important;max-width:100%!important;margin-bottom:-16px!important}
.hero-image-shell img{height:516px!important;max-height:534px!important;width:auto!important}
/* Lueur focale + ombre de contact resserrées autour du duo */
.hero-image-shell::before{inset:-26px -34px 6px -34px!important;background:radial-gradient(circle at 52% 42%,rgba(140,96,255,.34),rgba(84,64,205,.14) 42%,transparent 70%)!important;filter:blur(14px)!important;opacity:.92!important}
.hero-image-shell::after{width:72%!important;height:66px!important;bottom:-6px!important}
/* Cartes flottantes en verre, épousant les personnages, entièrement visibles, en diagonale */
.hero-chip{min-width:158px!important;background:rgba(10,17,46,.82)!important;border:1px solid rgba(150,132,255,.42)!important;box-shadow:0 18px 40px rgba(4,9,33,.4)!important;backdrop-filter:blur(14px)!important}
.hero-chip--left{left:-32px!important;right:auto!important;top:auto!important;bottom:140px!important}
.hero-chip--right{right:-32px!important;left:auto!important;top:150px!important;bottom:auto!important}
.hero-side .stat{min-height:0!important;padding:13px 16px!important}
.hero-side .stat strong{font-size:26px!important}
.hero-side .process h3{margin:15px 18px 9px!important}
@media(max-width:980px){
  .hero-image-shell img{height:440px!important}
  .hero-chip--left{left:0!important;bottom:118px!important}.hero-chip--right{right:0!important;top:78px!important}
}
@media(max-width:700px){
  .hero-image-shell img{height:400px!important}
  .hero-chip--left{bottom:92px!important}.hero-chip--right{top:40px!important}
}

/* ==================== HERO v2 — COMPOSITION (réf. cliente) ==================== */
.hero2{position:relative;z-index:3;display:grid;grid-template-columns:0.82fr 1.18fr;gap:20px;align-items:end;padding:26px 0 44px}
.hero2-copy{max-width:560px;align-self:center;position:relative;z-index:6}
.hero2-copy h1{font-family:var(--heading)!important;font-size:62px!important;line-height:1!important;letter-spacing:-2.4px!important;font-weight:800!important;color:#fff!important;margin:20px 0 22px!important}
.hero2-copy h1 em{font-style:normal;color:#a98bff!important}
.hero2-copy .lead{font-size:18px!important;line-height:1.5!important;font-weight:600;color:#c8cef0!important;margin:0!important}
.hero2-copy .lead b{color:#fff}
/* Scène : personnages intégrés au fond + arc orbital + halo */
.hero2-stage{position:relative;min-height:600px;align-self:end}
.hero2-people{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:616px;width:auto;max-width:none;object-fit:contain;object-position:center bottom;z-index:2;filter:saturate(1.03) drop-shadow(0 26px 42px rgba(0,0,0,.5))}
/* Cartes flottantes en verre */
.h2card{position:absolute;z-index:5;background:rgba(9,14,40,.74);border:1px solid rgba(150,132,255,.36);backdrop-filter:blur(14px);box-shadow:0 18px 42px rgba(3,8,30,.44);border-radius:16px}
.h2card--targeted,.h2card--valid{display:flex;align-items:center;gap:11px;padding:12px 15px;min-width:186px;animation:hero2Float 6.8s ease-in-out infinite}
.h2card--valid{animation-delay:1.1s}
.h2card-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#8a5cff,#5f35dd);flex:none}
.h2card-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h2card-tx strong{display:flex;align-items:center;gap:8px;font-family:var(--heading);font-size:13px;color:#fff}
.h2card-tx small{display:block;font-size:10.5px;color:#b8bee2;margin-top:2px}
.h2dot{width:8px;height:8px;border-radius:50%;background:#54e6a0;box-shadow:0 0 0 3px rgba(84,230,160,.18)}
.h2card--valid{bottom:150px;left:-18px}
/* badge check violet du "Profil validé" */
.h2check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#8a5cff,#5f35dd)}
.h2check svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Carte "Recherche en cours" — barre de progression horizontale */
.h2card--live{bottom:2px;right:-14px;width:392px;padding:16px 18px;animation:hero2Float 7.4s .5s ease-in-out infinite}
.h2live-head{display:flex;align-items:center;gap:9px;font-family:var(--heading);font-weight:800;font-size:13.5px;color:#fff}
.h2live-dot{width:9px;height:9px;border-radius:50%;background:#a98bff;box-shadow:0 0 0 4px rgba(138,92,255,.18)}
.h2live-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0 9px;font-size:12.5px;color:#c3c9ea}
.h2live-row b{color:#a98bff;font-size:13.5px;font-family:var(--heading)}
.h2live-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.h2live-bar i{display:block;height:100%;width:78%;border-radius:inherit;background:linear-gradient(90deg,#8a5cff,#bb90ff)}
.h2live-foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.h2avatars{display:flex}
.h2avatars i{width:27px;height:27px;border-radius:50%;border:2px solid #0c1338;margin-left:-8px;background-size:cover}
.h2avatars i:first-child{margin-left:0}
.h2avatars .a1{background:linear-gradient(135deg,#6b4d55,#e2a16f)}
.h2avatars .a2{background:linear-gradient(135deg,#3a3f6a,#d59162)}
.h2avatars .a3{background:linear-gradient(135deg,#5a3a5f,#a36745)}
.h2avatars .a4{background:linear-gradient(135deg,#4a3f6a,#c98f6a)}
.h2live-foot span{font-size:11px;font-weight:800;color:#cfd4f0}
.h2card--valid::after{content:"";position:absolute;right:20px;top:-28px;width:1px;height:28px;background:linear-gradient(0deg,rgba(160,130,255,.55),transparent)}
@keyframes hero2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero2-copy{animation:hero2CopyIn .8s cubic-bezier(.22,.75,.18,1) both}
.hero2-stage{animation:hero2VisualIn .9s .08s cubic-bezier(.22,.75,.18,1) both}
@keyframes hero2CopyIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hero2VisualIn{from{opacity:0;transform:translateY(24px) scale(.99)}to{opacity:1;transform:none}}
@media(max-width:980px){
  .hero2{grid-template-columns:1fr;gap:24px;padding:24px 0 30px}
  .hero2-copy{max-width:none;align-self:auto}
  .hero2-stage{min-height:520px}
  .hero2-people{height:520px}
  .h2card--valid{left:8px}
  .h2card--live{right:0}
}
@media(max-width:560px){
  .hero2-copy h1{font-size:44px!important;letter-spacing:-1.4px!important}
  .hero2-copy .lead{font-size:16px!important}
  .hero2-stage{min-height:440px}
  .hero2-people{height:440px}
  .h2card--valid{bottom:120px;left:0;transform:scale(.9);transform-origin:bottom left}
  .h2card--live{width:300px;right:0;transform:scale(.92);transform-origin:bottom right}
}
@media(prefers-reduced-motion:reduce){
  .hero2-copy,.hero2-stage,.h2card,.h2av{animation:none!important}
}

/* === HERO — RESPONSIVE REBUILD (self-contained scene) ============ */

/* 1) Grid + copy column: fluid type, no overflow */
.hero2{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;
  gap:clamp(16px,3vw,40px)!important;
  align-items:center!important;
  padding:clamp(24px,4vw,44px) 0!important;
  overflow:hidden;
}
.hero2-copy{max-width:min(560px,100%)!important;min-width:0}
.hero2-copy h1{font-size:clamp(38px,4.6vw,62px)!important;letter-spacing:clamp(-1.2px,-.2vw,-2.4px)!important;line-height:1.02!important}
.hero2-copy .lead{font-size:clamp(15px,1.2vw,18px)!important}

/* 2) Trust stats — bordered glass, keep on one line */
.hero2-trust{
  display:flex!important;flex-wrap:nowrap!important;
  gap:clamp(10px,1.4vw,20px)!important;
  margin-top:clamp(22px,3vw,34px)!important;
  padding-top:clamp(18px,2.4vw,26px)!important;
}
/* Both glyphs are drawn to an identical 16.4x16.4 optical box centred on
   (12,12), so they render at exactly the same visual size. */
.hero2-trust .trust-ic svg{
  width:66%;height:66%;display:block;overflow:visible;
  stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  shape-rendering:geometricPrecision;
}
/* on the shapes, not the <svg>: vector-effect does not inherit */
.hero2-trust .trust-ic svg>*{vector-effect:non-scaling-stroke}

/* 3) STAGE — self-contained scene.
   container-type:inline-size makes 1cqw = 1% of the stage width, so every
   card size, padding and font inside scales with the scene instead of
   staying at a fixed px value while the % positions move underneath it. */
.hero2-stage{
  position:relative;
  container-type:inline-size;
  width:100%;
  max-width:600px;
  /* slightly taller than square: reserves a clean band under the feet for the
     "Recherche en cours" card without shrinking the characters */
  aspect-ratio:1 / 1.08;
  min-height:0!important;
  margin-inline:auto;
  justify-self:end;
}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero2-people{
  position:absolute!important;
  /* 47.5% instead of dead-centre: frees the top-right corner so the
     "Recherche ciblée" card clears the man's head at every stage size.
     bottom:20% drops the figure so the live card can hide the feet without
     leaving dead space under the card. */
  left:47.5%!important;bottom:20%!important;
  transform:translateX(-50%)!important;
  height:75%!important;width:auto!important;max-width:88%!important;
  object-fit:contain;object-position:center bottom;
  z-index:2;
  image-rendering:-webkit-optimize-contrast;
  -webkit-font-smoothing:antialiased;
  backface-visibility:hidden;
  will-change:transform;
  /* softened: the old 56px/.55 shadow pooled into a grey smudge over the
     card sitting below the feet */
  filter:saturate(1.14) contrast(1.08) brightness(1.03)
         drop-shadow(0 16px 26px rgba(0,0,0,.32))
         drop-shadow(0 0 38px rgba(138,92,255,.22))!important;
}

/* 4) Floating cards — balanced composition, everything sized in cqw.
   Vertical lanes never intersect:  targeted 3–14% | valid 44–55% | live 72–99% */
.h2card{position:absolute!important;z-index:5;min-width:0!important}
.h2card--targeted,.h2card--valid{
  padding:clamp(10px,2.05cqw,14px) clamp(11px,2.5cqw,16px)!important;
  gap:clamp(8px,1.75cqw,12px)!important;
  border-radius:clamp(12px,2.5cqw,16px)!important;
}
.h2card-ic{
  width:clamp(27px,5.9cqw,37px)!important;height:clamp(27px,5.9cqw,37px)!important;
  border-radius:clamp(8px,1.85cqw,11px)!important;
}
.h2card-ic svg{width:52%!important;height:52%!important}
.h2card-tx{min-width:0}
.h2card-tx strong{font-size:clamp(11px,2.15cqw,13.5px)!important;gap:clamp(5px,1.2cqw,8px)!important}
.h2card-tx small{font-size:clamp(9.5px,1.75cqw,11px)!important}
.h2check{width:clamp(14px,2.9cqw,18px)!important;height:clamp(14px,2.9cqw,18px)!important}
.h2check svg{width:66%!important;height:66%!important}

/* narrowed to 38% so its left edge (and the purple icon) clears the man's
   head, which reaches ~59% of the stage width at this height */
.h2card--targeted{top:2%!important;right:0!important;left:auto!important;bottom:auto!important;width:36%!important}
/* Décalée vers la gauche : à left:0 elle recouvrait le personnage (43 % du
   panneau, dont son visage). Taille, style et animation inchangés. */
.h2card--valid{top:44%!important;left:-10%!important;right:auto!important;bottom:auto!important;width:44%!important}

/* centred under the figure, raised so its top edge sits above the ankles and
   the feet are hidden behind it.
   left/right instead of width+transform so the float animation stays free. */
.h2card--live{
  bottom:4%!important;left:16.5%!important;right:21.5%!important;top:auto!important;
  width:auto!important;
  padding:clamp(12px,2.7cqw,18px) clamp(13px,3cqw,19px)!important;
  border-radius:clamp(12px,2.6cqw,16px)!important;
  box-shadow:0 10px 26px rgba(3,8,30,.24)!important;
}
.h2live-head{font-size:clamp(11.5px,2.25cqw,14px)!important;gap:clamp(6px,1.5cqw,9px)!important}
.h2live-dot{width:clamp(7px,1.5cqw,9px)!important;height:clamp(7px,1.5cqw,9px)!important;flex:none}
.h2live-row{font-size:clamp(10.5px,2.1cqw,12.5px)!important;margin:clamp(9px,2.3cqw,14px) 0 clamp(6px,1.5cqw,9px)!important}
.h2live-row b{font-size:clamp(11px,2.25cqw,13.5px)!important}
.h2live-bar{height:clamp(6px,1.35cqw,8px)!important}
.h2live-foot{gap:clamp(8px,2cqw,12px)!important;margin-top:clamp(9px,2.3cqw,14px)!important}
.h2live-foot span{font-size:clamp(9.5px,1.85cqw,11px)!important}

.h2card--targeted::after,.h2card--valid::after{display:none}

/* 5) Animations — smoother, no vertical slide-in */
@keyframes hero2CopyIn{from{opacity:0;transform:translateX(-20px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hero2VisualIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes hero2Float{0%,100%{transform:translate(0,0)}35%{transform:translate(2px,-4px)}65%{transform:translate(-2px,3px)}}
.hero2-copy{animation:hero2CopyIn 1s cubic-bezier(.16,1,.3,1) both!important}
.hero2-stage{animation:hero2VisualIn 1.1s .12s cubic-bezier(.16,1,.3,1) both!important}
/* No idle motion on the three cards — they react only to the cursor. */
.h2card--targeted,.h2card--valid,.h2card--live{
  animation:none!important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s ease;
}
.h2card--targeted:hover,.h2card--valid:hover,.h2card--live:hover{
  transform:translateY(-3px);
  border-color:rgba(169,139,255,.55)!important;
  box-shadow:0 18px 38px rgba(3,8,30,.32)!important;
}
.hero2-people{animation:heroPeopleBreathe 8s ease-in-out infinite}
@keyframes heroPeopleBreathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.012)}}

/* 6) Avatar characters in "+127" card */
.h2avatars{display:flex;align-items:center}
.h2av{
  width:clamp(21px,4.6cqw,29px);height:clamp(21px,4.6cqw,29px);
  border-radius:50%;
  border:2px solid #131a44;margin-left:clamp(-8px,-1.3cqw,-6px);
  overflow:hidden;display:block;background:#1a2250;flex:none;
  /* Slow organic drift rather than a throb: 11s loop on an ease-in-out-sine
     curve, sub-5% scale and sub-degree rotation, first and last keyframes
     identical so the loop never steps. */
  transform-origin:50% 60%;
  will-change:transform;
  animation:avDrift 11s cubic-bezier(.37,0,.63,1) infinite;
}
.h2av:first-child{margin-left:0}
/* Negative delays: each avatar is already mid-motion on the first frame, so
   they never start in lockstep and there is no jump on load. */
.h2av:nth-child(1){animation-delay:0s}
.h2av:nth-child(2){animation-delay:-2.75s}
.h2av:nth-child(3){animation-delay:-5.5s}
.h2av:nth-child(4){animation-delay:-8.25s}
.h2av svg{width:100%;height:100%;display:block}
@keyframes avDrift{
  0%  {transform:scale(1)     rotate(0deg)}
  25% {transform:scale(1.035) rotate(.55deg)}
  50% {transform:scale(1.012) rotate(0deg)}
  75% {transform:scale(1.042) rotate(-.55deg)}
  100%{transform:scale(1)     rotate(0deg)}
}

/* === HERO — mention expertise =============================================
   Occupe la bande vide sous les statistiques, à gauche de l'illustration.
   Reprend le vocabulaire visuel des cartes de confiance : verre teinté,
   filet violet, pastille dégradée. */
.hero2-expertise{
  /* Enfant direct de la grille .hero2 : sans cette contrainte, la carte
     occupait la 2e colonne et renvoyait l'illustration à la ligne suivante.
     Ignoré quand la carte est en position absolue. */
  grid-column:1;
  justify-self:start;
  /* Style repris à l'identique des cartes « Recherche ciblée » et
     « Profil validé » (.h2card / .h2card--targeted / .h2card--valid).
     Celles-ci sont dimensionnées en cqw, relatives au conteneur .hero2-stage ;
     cette carte étant hors de ce conteneur, les mêmes valeurs sont exprimées
     en vw équivalents (1cqw ≈ 0.408vw au format deux colonnes). */
  display:inline-flex;align-items:center;
  gap:clamp(8px,.737vw,12px);
  margin-top:clamp(16px,2.2vw,26px);
  padding:clamp(10px,.863vw,14px) clamp(11px,1.053vw,16px);
  border:1px solid rgba(150,132,255,.36);
  border-radius:clamp(12px,1.053vw,16px);
  background:rgba(9,14,40,.74);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 42px rgba(3,8,30,.44);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s ease;
}
/* Placée dans l'espace libre entre le texte de gauche et l'illustration,
   bord droit calé juste à gauche de l'image. La bande verticale exploitable
   va de la fin du paragraphe d'accroche au haut des boutons ; le repère est
   pris sur .hero2 (position:relative) pour suivre la largeur de la scène. */
/* Seuil 1180px : en dessous, les deux colonnes se rapprochent et l'espace
   libre entre la fin du texte et l'image descend sous la largeur de la carte
   (mesuré : OK à 1145px de viewport, chevauchement du texte à 1085px).
   La carte reprend alors sa place dans le flux, sous les statistiques. */
@media(min-width:1180px){
  /* Repère : .hero2-copy (position:relative). Ancrage par le bord DROIT pour
     que la carte reste collée à l'image quelle que soit sa largeur de rendu.
     right négatif = la carte déborde de la colonne de texte, dans la
     gouttière, jusqu'à ~13px du bord gauche de l'image. */
  .hero2-expertise{
    position:absolute;
    right:-64%;
    top:-7.5%;
    margin-top:0;
    z-index:6;
  }
}
@media(max-width:1000px){
  /* Mise en page empilée : la carte redevient un élément de flux, centré
     entre le texte et l'illustration. */
  .hero2-expertise{margin-left:auto;margin-right:auto;justify-self:center}
}


/* === VISUEL CTA — illustration pleine hauteur =============================
   Remplace le graphisme décoratif dessiné en CSS. L'image occupe toute la
   hauteur de la bande CTA, calée à gauche. object-fit:cover recadre sans
   jamais déformer ; object-position garde le personnage dans le cadre.
   Texte, titre et bouton conservent leur position. */
/* La bande CTA réserve déjà une gouttière à gauche (padding-left) pour un
   visuel : on la réutilise telle quelle. Le visuel est positionné en absolu
   sur toute la hauteur, donc il sort du flux et ne déplace ni le texte ni le
   bouton, dont les positions restent identiques.
   Sélecteur à deux classes : une règle .cta-visual{height:120px} définie plus
   bas dans la feuille l'emporterait sinon à spécificité égale. */
.cta-refined{overflow:hidden}
.cta-refined .cta-visual--photo{
  position:absolute;
  left:0;top:0;bottom:0;
  /* !important nécessaire : une règle .cta-visual plus bas dans la feuille
     impose width/height en !important, ce qu'aucune spécificité ne contourne. */
  width:212px!important;height:auto!important;
  margin:0;flex:none;
  border-radius:14px 0 0 14px;
  overflow:hidden;
  z-index:1;
}
.cta-refined .cta-visual--photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;                /* recadre, ne déforme jamais */
  object-position:38% center;      /* garde le personnage dans le cadre */
  display:block;
}
/* Raccord dégradé vers le fond de la bande, pour éviter une coupe nette. */
.cta-refined .cta-visual--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,19,48,0) 52%,rgba(9,22,56,.96) 100%);
}
/* Entre 721 et 820px la gouttière gauche de la bande passe à 160px : le visuel
   doit rentrer dedans, sinon le texte passe dessous.
   En dessous de 720px, la règle existante .cta-visual{display:none} masque le
   visuel — le comportement responsive d'origine est conservé tel quel. */
@media(max-width:820px){
  .cta-refined .cta-visual--photo{width:138px!important}
}

/* === VISUEL HERO — panneau image ==========================================
   Le visuel n'est plus un détourage vertical transparent mais une illustration
   au format paysage et opaque. Elle est présentée en panneau à coins arrondis,
   à ses proportions exactes (aucune déformation, aucun recadrage), à
   l'intérieur de la scène existante. L'anneau, le halo et les trois cartes
   flottantes conservent leur position et repassent au-dessus. */
.hero2-people{
  top:19%!important;
  bottom:auto!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:88%!important;
  height:auto!important;      /* hauteur déduite du ratio : jamais étirée */
  max-width:88%!important;
  max-height:none!important;
  object-fit:contain;
  border-radius:20px;
  border:1px solid rgba(169,139,255,.22);
  box-shadow:0 26px 60px rgba(3,8,30,.5);
  filter:saturate(1.04) contrast(1.02)!important;
}
@keyframes heroPeopleBreathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.008)}}

/* Copy column sat vertically centred against the much taller stage, which left
   ~129px of dead space above the eyebrow. Top-align it instead so the hero
   composition reads tighter. Scoped to the two-column layout only — the
   stacked layout below 1000px keeps its own centred alignment. */
@media(min-width:1001px){
  .hero2-copy{
    align-self:start!important;
    margin-top:clamp(18px,2.4vw,36px)!important;
  }
}

/* 7) BREAKPOINTS */

/* Tablet: the stage just gets smaller — cqw keeps the whole scene in proportion */
@media(max-width:1080px){
  .hero2-stage{max-width:520px}
}

/* 701–940px: the burger menu has not kicked in yet (that happens at 700px) but
   logo + links + CTA need ~840px, so the CTA was being clipped by the hero's
   overflow. Tighten the bar so it fits instead of overflowing. */
@media(min-width:701px) and (max-width:940px){
  .hero .nav{gap:18px}
  .hero .nav-links{gap:14px}
  .hero .nav a{font-size:13px}
  .hero .header-cta{padding:12px 14px;font-size:12.5px;gap:9px}
}

/* Below 1000px the cards LEAVE the overlay and become a grid under the
   characters. Overlap is then structurally impossible instead of tuned away.
   Threshold is 1000px because the cards have px readability floors: under a
   ~440px stage they occupy too much of the scene for any % position to clear
   the figure (measured: clean at 441px, colliding at 402px). */
@media(max-width:1000px){
  .hero2{grid-template-columns:1fr!important;gap:26px!important;padding:20px 0 30px!important}
  /* copy is centred here, so fade in place instead of sliding sideways
     (the sideways slide briefly pushed the column past the left edge) */
  .hero2-copy{
    max-width:none!important;text-align:center;margin-inline:auto;
    animation:hero2CopyFade .9s cubic-bezier(.16,1,.3,1) both!important;
  }
  .hero2-copy h1 br{display:none}

  .hero2-stage{
    max-width:min(560px,100%);
    justify-self:center;
    aspect-ratio:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  /* row 1 = the character scene, its height set by the image */
  .hero2-orbit{
    grid-area:1/1/2/3;
    width:auto!important;height:86%!important;aspect-ratio:1!important;
  }
  .hero2-people{
    grid-area:1/1/2/3;
    position:relative!important;
    left:auto!important;bottom:auto!important;
    transform:none!important;
    justify-self:center;align-self:end;
    /* Panneau image : largeur pilotée, hauteur déduite du ratio. Une hauteur
       imposée laisserait des bandes vides dans le cadre arrondi, car l'image
       est en object-fit:contain. */
    width:min(100%,520px)!important;
    height:auto!important;
    max-width:100%!important;
    animation:heroPeopleFlat 8s ease-in-out infinite!important;
  }
  /* cards in normal flow — transform:none kills the legacy scale(.9) rules
     further up the sheet that were shrinking each card by a different amount */
  .h2card{
    position:relative!important;
    inset:auto!important;
    width:auto!important;max-width:none!important;
    transform:none!important;
    animation:none!important;
    padding:11px 13px!important;
  }
  .h2card--valid{grid-area:2/2/3/3}
  .h2card--live{grid-area:3/1/4/3;padding:15px 16px!important}
  .h2card-ic{width:32px!important;height:32px!important;border-radius:9px!important}
  .h2card-tx strong{font-size:12.5px!important}
  .h2card-tx small{font-size:10px!important}
  .h2check{width:17px!important;height:17px!important}
  .h2live-head{font-size:13px!important}
  .h2live-row{font-size:12px!important;margin:12px 0 8px!important}
  .h2live-bar{height:7px!important}
  .h2live-foot{margin-top:12px!important;gap:11px!important}
  .h2live-foot span{font-size:10.5px!important}
  .h2av{width:26px!important;height:26px!important;margin-left:-7px!important}
}
@keyframes heroPeopleFlat{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes hero2CopyFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Phone: one card per row so nothing is cramped */
@media(max-width:560px){
  .hero2{padding:16px 0 24px!important;gap:22px!important}
  .hero2-copy h1{font-size:clamp(32px,9vw,42px)!important}
  .hero2-stage{grid-template-columns:1fr!important}
  .h2card--valid{grid-area:3/1/4/2}
  .h2card--live{grid-area:4/1/5/2}
}

@media(prefers-reduced-motion:reduce){
  .hero2-copy,.hero2-stage,.h2card,.h2av,.hero2-people,.hero2-orbit{animation:none!important}
}

/* === TRANSITION HERO → NOS EXPERTISES ====================================
   Le blanc entre la courbe basse du hero et « NOS EXPERTISES » est réduit
   uniquement par le rembourrage haut de la section. La géométrie du hero
   (hauteur, courbe, pseudo-éléments, cartes, image) reste strictement
   inchangée. Les autres sections ne sont pas touchées : .difference partage
   la classe .section mais garde son propre rembourrage. */
.expertises{padding-top:4px}
@media(max-width:700px){
  .expertises{padding-top:16px}
}

/* Lien « Mon espace » dans la navigation (ajout, aucune règle existante
   modifiée). Discret, aligné sur le bouton violet voisin. */
.nav-account{display:inline-flex;align-items:center;font:700 13px Inter,Arial,sans-serif;
  color:#c9b8ff;text-decoration:none;padding:8px 4px;margin-right:14px;white-space:nowrap;
  transition:color .25s ease}
.nav-account:hover{color:#fff}
@media(max-width:940px){.nav-account{margin-right:10px;font-size:12.5px}}
@media(max-width:700px){.nav-account{margin-right:auto;margin-left:14px}}

/* Sous 820px, .nav-actions est masqué : le lien « Mon espace » deviendrait
   inaccessible sur mobile. On réaffiche uniquement ce lien (le bouton violet
   reste masqué comme avant) et le burger conserve sa place à droite. */
@media(max-width:1000px){
  .nav-actions{display:flex;order:1;margin-left:auto;gap:0}
  .nav-actions .header-cta{display:none}
  .nav-account{margin:0;font-size:12.5px}
  .menu-toggle{order:2;margin-left:14px}
}

/* ==========================================================================
   HERO — refonte d'apres la maquette de reference.
   Bloc ajoute en fin de feuille : aucune regle existante n'est reecrite, et
   la courbe de transition .hero::after (150px) reste celle du site.
   Deux zones : en haut le discours + l'illustration encadree, en bas la
   rangee de quatre cartes d'indicateurs.
   ========================================================================== */

.hero{min-height:0!important}
.hero2{display:block!important;padding:22px 0 148px!important}

/* Lueur d'ambiance derriere la colonne visuelle. */
.hero2::before{content:"";position:absolute;right:-6%;top:6%;width:56%;height:64%;
  background:radial-gradient(ellipse at 50% 50%,rgba(122,80,255,.30),rgba(60,40,160,.10) 46%,transparent 72%);
  filter:blur(46px);pointer-events:none;z-index:0}

.hero2-main{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.55fr;
  gap:44px;align-items:center}

/* ------------------------------------------------------------------ Texte */
.hero2-copy{max-width:none;align-self:center;animation:none!important}
.hero2-copy .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:999px;border:1px solid rgba(150,118,255,.55);color:#c3b1ff;
  background:rgba(88,60,190,.16);font-size:11px;letter-spacing:.6px}
.hero2-copy .eyebrow-ic{width:14px;height:14px;display:block}
.hero2-copy .eyebrow-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.hero2-copy h1{font-size:59px!important;margin:26px 0 24px!important;letter-spacing:-2.2px!important}
.hero2-actions .btn-purple{padding:17px 26px;border-radius:12px;font-size:15px;
  box-shadow:0 14px 34px rgba(96,50,225,.42);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,filter .3s ease}
.hero2-actions .btn-purple:hover{transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(120,70,255,.55),0 0 0 1px rgba(178,150,255,.4)}
.hero2-actions .btn-purple svg{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.hero2-actions .btn-purple:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------- Colonne visuelle */
.hero2-visual{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px}

/* Surface commune des cartes : bordure violette lisible, jamais sombre. */
.h2chip,.h2kpi,.h2card--valid{
  background:linear-gradient(160deg,rgba(26,35,80,.94),rgba(14,21,54,.92));
  border:1px solid rgba(139,116,246,.34);border-radius:16px;
  box-shadow:0 18px 40px rgba(4,10,32,.5),inset 0 1px 0 rgba(255,255,255,.06)}

.hero2-chips{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.h2chip{display:flex;align-items:center;gap:14px;padding:14px 18px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s ease,box-shadow .35s ease}
.h2chip:hover{transform:translateY(-3px);border-color:rgba(168,140,255,.62);
  box-shadow:0 24px 50px rgba(4,10,32,.58),0 0 0 1px rgba(168,140,255,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.h2chip-ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(150deg,#8b5cff,#5b2fdd);
  box-shadow:0 8px 20px rgba(110,64,240,.45);transition:box-shadow .35s ease}
.h2chip-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.h2chip-ic--ring{background:radial-gradient(circle at 50% 40%,#7b4cf0,#3a1fa6);
  border:1px solid rgba(178,150,255,.5)}
.h2chip:hover .h2chip-ic{box-shadow:0 10px 26px rgba(130,80,255,.62),0 0 0 4px rgba(122,80,255,.16)}
.h2chip-ic--ring svg{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.h2chip:hover .h2chip-ic--ring svg{transform:rotate(90deg)}
.h2chip-tx{min-width:0}
.h2chip-tx strong{display:block;font-family:var(--heading);font-size:13.8px;line-height:1.3;color:#fff}
.h2chip-tx small{display:block;margin-top:3px;font-size:12px;color:#9aa3cc}

/* Cadre de l'illustration : proportions d'origine, aucun recadrage. */
.hero2-frame{position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:1200/727;
  border:1px solid rgba(139,116,246,.38);
  box-shadow:0 30px 70px rgba(3,9,30,.62),0 0 0 1px rgba(120,96,225,.16),
    inset 0 1px 0 rgba(255,255,255,.07)}
.hero2-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(94,60,200,.10),transparent 42%,rgba(4,10,32,.34));
  transition:opacity .5s ease}
.hero2-frame:hover::after{opacity:.55}
/* L'ancienne image flottante devient le contenu du cadre : on neutralise
   explicitement les regles historiques en !important (positionnement,
   largeur bridee a 88%, bordure, respiration) que le cadre reprend a son
   compte. Aucune deformation : la hauteur reste deduite du ratio. */
.hero2-people{position:static!important;inset:auto!important;transform:none!important;
  height:auto!important;width:100%!important;max-width:100%!important;max-height:none!important;
  display:block;object-fit:cover;object-position:center;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  animation:none!important;filter:saturate(1.03)!important;
  transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.hero2-frame:hover .hero2-people{transform:scale(1.015)!important}

/* Carte « Profil valide » posee sur l'illustration. */
.hero2-frame .h2card--valid{position:absolute!important;left:18px!important;bottom:18px!important;
  right:auto!important;top:auto!important;width:auto!important;max-width:none!important;
  display:flex;align-items:center;gap:12px;padding:13px 17px!important;min-width:0;z-index:3;
  backdrop-filter:blur(8px);
  transition:border-color .35s ease,box-shadow .35s ease}
.hero2-frame .h2card--valid:hover{border-color:rgba(178,150,255,.66);
  box-shadow:0 24px 52px rgba(4,10,32,.6),0 0 0 1px rgba(178,150,255,.24)}
.hero2-frame .h2card-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(150deg,#8b5cff,#5b2fdd);
  box-shadow:0 8px 20px rgba(110,64,240,.42);transition:box-shadow .35s ease}
.hero2-frame .h2card-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.hero2-frame .h2card--valid:hover .h2card-ic{box-shadow:0 10px 26px rgba(130,80,255,.66),
  0 0 0 4px rgba(122,80,255,.18)}
.hero2-frame .h2card-tx strong{display:flex;align-items:center;gap:8px;font-family:var(--heading);
  font-size:14.5px;color:#fff}
.hero2-frame .h2card-tx small{display:block;margin-top:3px;font-size:12px;color:#9aa3cc}
.hero2-frame .h2check{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:#3b82f6;color:#fff;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease}
.hero2-frame .h2check svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}
.hero2-frame .h2card--valid:hover .h2check{transform:scale(1.14);
  box-shadow:0 0 0 4px rgba(59,130,246,.24)}

/* ------------------------------------------------------ Rangee d'indicateurs */
.hero2-kpis{position:relative;z-index:2;display:grid;
  grid-template-columns:1.62fr .8fr .88fr 1.04fr;gap:16px;margin-top:26px}
.h2kpi{position:relative;padding:20px 22px;display:flex;flex-direction:column;min-width:0;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),border-color .35s ease,box-shadow .35s ease}
.h2kpi:hover{transform:translateY(-4px);border-color:rgba(168,140,255,.6);
  box-shadow:0 28px 56px rgba(4,10,32,.6),0 0 0 1px rgba(168,140,255,.2),
    inset 0 1px 0 rgba(255,255,255,.08)}
.h2kpi-value{font-family:var(--heading);font-weight:800;color:#fff;line-height:1;
  letter-spacing:-1.4px;font-size:38px;transition:transform .35s cubic-bezier(.2,.8,.3,1),
  text-shadow .35s ease}
.h2kpi-label{display:block;font-size:13px;line-height:1.45;color:#c3c9e6;font-weight:600}
.h2kpi-sub{display:block;margin-top:6px;font-size:11.5px;color:#8c95bd}
.h2kpi-head{display:flex;align-items:center;gap:14px}
.h2kpi-headtx{min-width:0}
.h2kpi-ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  color:#fff;transition:box-shadow .35s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
.h2kpi-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.h2kpi-ic--violet{background:linear-gradient(150deg,rgba(139,92,255,.28),rgba(70,40,180,.3));
  border:1px solid rgba(168,140,255,.55);color:#c8b4ff;
  box-shadow:0 0 18px rgba(122,80,255,.22) inset}
.h2kpi-ic--teal{background:linear-gradient(150deg,rgba(45,196,190,.24),rgba(24,110,150,.28));
  border:1px solid rgba(80,214,205,.5);color:#67e3d6;
  box-shadow:0 0 18px rgba(45,196,190,.2) inset}
.h2kpi--delay:hover .h2kpi-ic--violet{transform:translateY(-2px) rotate(-4deg);
  box-shadow:0 0 22px rgba(122,80,255,.42) inset,0 0 0 4px rgba(122,80,255,.14)}
.h2kpi--gain:hover .h2kpi-ic--teal{box-shadow:0 0 22px rgba(45,196,190,.4) inset,
  0 0 0 4px rgba(45,196,190,.13)}
.h2tag{align-self:flex-start;margin-top:auto;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(139,116,246,.4);background:rgba(60,44,140,.24);
  font-size:11.5px;font-weight:700;color:#c3c9e6;transition:border-color .35s ease,color .35s ease}
.h2kpi--delay:hover .h2tag{border-color:rgba(168,140,255,.7);color:#e6e2ff}

/* Carte « Recherche en cours » */
.h2kpi--live{padding:20px 24px}
.h2kpi-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.h2kpi--live .h2live-head{display:flex;align-items:center;gap:10px;font-family:var(--heading);
  font-size:15px;font-weight:700;color:#fff}
.h2kpi--live .h2live-dot{position:relative;width:11px;height:11px;border-radius:50%;flex:none;
  background:#8b5cff;box-shadow:0 0 0 4px rgba(139,92,255,.2)}
/* Le halo pulsé est un pseudo-élément à ombre fixe dont on anime l'échelle et
   l'opacité : plus aucun repaint image par image dans le hero. */
.h2kpi--live .h2live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 7px rgba(139,92,255,.05);opacity:0;pointer-events:none;
  animation:h2Pulse 2.6s ease-in-out infinite}
.h2pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(139,116,246,.42);background:rgba(60,44,140,.26);
  font-size:11.5px;font-weight:700;color:#c3c9e6;white-space:nowrap}
.h2pill-ic{width:13px;height:13px;display:block;color:#a98bff}
.h2pill-ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.h2kpi--live .h2live-row{display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;color:#c3c9e6;margin-bottom:10px}
.h2kpi--live .h2live-row b{font-family:var(--heading);font-size:16px;color:#b79dff}
.h2kpi--live .h2live-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.09);
  overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.h2kpi--live .h2live-bar i{display:block;height:100%;width:78%;border-radius:inherit;
  background:linear-gradient(90deg,#6f3ff0,#a983ff 62%,#c9b6ff);
  box-shadow:0 0 12px rgba(140,96,255,.5);transition:box-shadow .4s ease}
.h2kpi--live:hover .h2live-bar i{animation:h2Fill 1.1s cubic-bezier(.22,.75,.18,1);
  box-shadow:0 0 20px rgba(160,120,255,.75)}
.h2live-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
/* Les quatre personnages illustres remplacent les anciennes pastilles.
   L'image est utilisee telle quelle, fond transparent d'origine, en
   object-fit:contain : proportions conservees, aucun recadrage. */
.h2team{flex:none;width:142px;height:auto;max-width:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(3,9,30,.45));
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.h2kpi--live:hover .h2team{transform:translateY(-2px)}
.h2count{flex:none;display:grid;place-items:center;min-width:52px;height:38px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(168,140,255,.5);background:rgba(70,48,160,.28);
  font-family:var(--heading);font-size:14px;font-weight:800;color:#c8b4ff}
.h2live-tx{min-width:0}
.h2live-tx strong{display:block;font-size:13px;font-weight:700;color:#fff}
.h2live-tx small{display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:#8c95bd}

/* Jauge 96% */
.h2kpi--gauge{align-items:center;text-align:center;padding:18px 18px 20px}
.h2gauge{position:relative;width:124px;height:124px;margin-bottom:10px}
.h2gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.h2gauge-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:9}
.h2gauge-arc{fill:none;stroke:url(#h2gaugeGrad);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.73;stroke-dashoffset:13.07;
  filter:drop-shadow(0 0 6px rgba(139,92,255,.45));transition:filter .4s ease}
.h2kpi--gauge:hover .h2gauge-arc{animation:h2Sweep 1.25s cubic-bezier(.22,.75,.18,1);
  filter:drop-shadow(0 0 12px rgba(160,120,255,.8))}
.h2gauge-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;display:grid;place-items:center;color:#b79dff;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.h2gauge-ic svg{width:100%;height:100%;transform:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.h2kpi--gauge:hover .h2gauge-ic{transform:translate(-50%,-50%) scale(1.06)}
.h2kpi--gauge .h2kpi-value{font-size:44px}
.h2kpi--gauge:hover .h2kpi-value{transform:scale(1.05);text-shadow:0 0 26px rgba(150,110,255,.6)}
.h2kpi--gauge .h2kpi-label{margin-top:8px}

/* Carte 72h */
.h2kpi--delay .h2kpi-value{font-size:40px}
.h2kpi--delay .h2kpi-label{margin-top:14px}

/* Carte +35% et son graphique */
.h2kpi--gain .h2kpi-value{font-size:34px}
.h2kpi--gain .h2kpi-label{margin-top:6px;font-size:12.5px}
.h2graph{width:100%;height:88px;margin-top:auto;padding-top:14px;display:block;overflow:visible}
.h2graph-grid path{stroke:rgba(255,255,255,.07);stroke-width:1;fill:none}
.h2graph-line{fill:none;stroke:#5b9dff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(91,157,255,.4));transition:filter .4s ease,stroke .4s ease}
.h2graph-dots circle{fill:#5b9dff;stroke:rgba(10,18,48,.9);stroke-width:2;
  transition:fill .4s ease,r .35s cubic-bezier(.2,.8,.3,1)}
.h2graph-last{fill:#7fc0ff;stroke:rgba(10,18,48,.9);stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(127,192,255,.6))}
.h2kpi--gain:hover .h2graph-line{stroke:#8fc4ff;filter:drop-shadow(0 0 9px rgba(127,192,255,.75));
  animation:h2Draw 1.4s cubic-bezier(.22,.75,.18,1)}
.h2kpi--gain:hover .h2graph-dots circle{fill:#9fd0ff;r:4.6}
.h2kpi--gain:hover .h2graph-last{animation:h2Ping 1.6s ease-in-out infinite}

/* ------------------------------------------------------------- Animations */
@keyframes h2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes h2Pulse{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
@keyframes h2Fill{from{width:0}to{width:78%}}
@keyframes h2Sweep{from{stroke-dashoffset:326.73}to{stroke-dashoffset:13.07}}
@keyframes h2Draw{from{stroke-dasharray:340;stroke-dashoffset:340}
  to{stroke-dasharray:340;stroke-dashoffset:0}}
@keyframes h2Ping{0%,100%{r:5;filter:drop-shadow(0 0 6px rgba(127,192,255,.6))}
  50%{r:6.4;filter:drop-shadow(0 0 13px rgba(127,192,255,.95))}}
@keyframes h2In{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Entree progressive : atmosphere, badge, titre, sous-titre, boutons,
   illustration, cartes flottantes, puis indicateurs. */
.hero2-copy .eyebrow,.hero2-copy h1,.hero2-copy .lead,.hero2-approach,
.hero2-chips,.hero2-frame,.h2kpi{animation:h2In .72s cubic-bezier(.22,.75,.18,1) both}
.hero2-copy .eyebrow{animation-delay:.05s}
.hero2-copy h1{animation-delay:.13s}
.hero2-copy .lead{animation-delay:.21s}
.hero2-approach{animation-delay:.29s}
.hero2-frame{animation-delay:.36s}
.hero2-chips{animation-delay:.44s}
.h2kpi--live{animation-delay:.52s}
.h2kpi--gauge{animation-delay:.58s}
.h2kpi--delay{animation-delay:.64s}
.h2kpi--gain{animation-delay:.70s}
.hero2-frame .h2card--valid{animation:h2In .72s .5s cubic-bezier(.22,.75,.18,1) both,
  h2Float 7.2s .5s ease-in-out infinite}

/* -------------------------------------------------------------- Responsive */
@media(max-width:1080px){
  /* Une regle plus haut dans la feuille masquait le <br> du titre sous
     1000px : les deux morceaux se collaient (« choixcommence »). Dans la
     nouvelle mise en page la colonne est pleine largeur, le retour a la
     ligne de la maquette est donc retabli. */
  .hero2-copy h1 br{display:inline!important}
  .hero2-main{grid-template-columns:1fr;gap:32px}
  .hero2-copy h1{font-size:52px!important}
  .hero2::before{right:-20%;width:80%}
  .hero2-kpis{grid-template-columns:1fr 1fr;gap:14px}
  /* Sur deux colonnes, les cartes larges occupent la rangee entiere :
     aucune cellule vide ne subsiste a cote du graphique. */
  .h2kpi--live,.h2kpi--gain{grid-column:1/-1}
  .h2kpi--gain .h2graph{height:104px}
}
@media(max-width:700px){
  .hero2{padding:16px 0 104px!important}
  .hero2-copy h1{font-size:40px!important;letter-spacing:-1.2px!important;margin:20px 0 18px!important}
  .hero2-copy .lead{font-size:15.5px!important}
  .hero2-actions .btn-purple{width:100%}
  .hero2-chips{grid-template-columns:1fr}
  .h2chip{padding:12px 14px}
  .hero2-frame{border-radius:14px}
  .hero2-frame .h2card--valid{left:10px!important;bottom:10px!important;right:10px!important;
    padding:10px 12px!important}
  .hero2-frame .h2card-ic{width:36px!important;height:36px!important;border-radius:10px!important}
  .hero2-kpis{grid-template-columns:1fr;margin-top:18px}
  .h2kpi{padding:18px}
  .h2kpi--gauge .h2kpi-value{font-size:38px}
  .h2live-foot{flex-wrap:wrap;gap:10px}
  /* Le <br> reste actif : le masquer collait « qualifiescorrespondant ». */
  .h2team{width:128px}
}

/* La courbe de transition reste identique sur toutes les tailles ; on la
   place simplement au-dessus du fond et sous les cartes. */
.hero::after{z-index:1!important}

/* --------------------------------------------------------- Navigation
   Alignement sur une meme ligne de base : les libelles ne se coupent plus
   ("Notre approche" tenait sur deux lignes), l'espacement est regulier et
   le logo, les liens et le bouton sont centres verticalement. */
.nav{align-items:center;flex-wrap:nowrap}
.nav-links{display:flex;align-items:center;gap:34px;margin-left:auto;flex-wrap:nowrap}
.nav-links a{display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.nav-actions{display:flex;align-items:center;flex:none}
.nav-account{display:inline-flex;align-items:center;line-height:1;white-space:nowrap}
.header-cta{flex:none;align-self:center}
/* Sous 1180px les libelles n'ont plus la place a cote du bouton : on
   resserre l'espacement avant de basculer sur le menu burger. */
@media(max-width:1180px){.nav{gap:20px}.nav-links{gap:22px}.nav-links a{font-size:13.5px}
  .nav-account{margin-right:10px}}
@media(max-width:1000px){.nav-links{gap:16px}.nav-links a{font-size:13px}
  .header-cta{padding:12px 16px;font-size:13px}}

@media(prefers-reduced-motion:reduce){
  .hero2-copy .eyebrow,.hero2-copy h1,.hero2-copy .lead,.hero2-approach,.hero2-chips,
  .hero2-frame,.h2kpi,.hero2-frame .h2card--valid,.h2kpi--live .h2live-dot,
  .h2kpi--gauge:hover .h2gauge-arc,.h2kpi--live:hover .h2live-bar i,
  .h2kpi--gain:hover .h2graph-line,.h2kpi--gain:hover .h2graph-last{animation:none!important}
  .hero2-copy .eyebrow,.hero2-copy h1,.hero2-copy .lead,.hero2-approach,.hero2-chips,
  .hero2-frame,.h2kpi,.hero2-frame .h2card--valid{opacity:1!important;transform:none!important}
  .h2kpi:hover,.h2chip:hover{transform:none!important}
}

/* -------------------------------------------------- Bloc « Notre approche »
   Remplace les deux anciens boutons du hero. Accordeon en CSS pur : la case a
   cocher masquee porte l'etat ouvert/ferme, le libelle est la zone cliquable.
   Aucun JavaScript ajoute, et la fermeture s'anime aussi bien que l'ouverture
   grace a la transition grid-template-rows 0fr -> 1fr. */
.hero2-approach{margin-top:34px;max-width:470px;
  border:1px solid rgba(139,116,246,.34);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(26,35,80,.86),rgba(14,21,54,.84));
  box-shadow:0 18px 40px rgba(4,10,32,.42),inset 0 1px 0 rgba(255,255,255,.06)}
.h2acc{border-bottom:1px solid rgba(139,116,246,.2)}
.h2acc:last-child{border-bottom:0}

/* La case a cocher reste focalisable au clavier : Espace ouvre et ferme. */
.h2acc-in{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}

.h2acc-head{display:flex;align-items:center;gap:9px;padding:14px 16px;cursor:pointer;
  user-select:none;transition:background .3s ease}
.h2acc-head:hover{background:rgba(122,80,255,.09)}
.h2acc-num{font-family:var(--heading);font-size:12px;font-weight:800;letter-spacing:.6px;
  color:#a98bff;transition:color .3s ease}
.h2acc-sep{color:#6d76a3;font-size:12px}
.h2acc-title{flex:1;min-width:0;font-family:var(--heading);font-size:14.5px;font-weight:700;
  color:#e9ebf7;transition:color .3s ease}
.h2acc-ic{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#b7a4ff;border:1px solid rgba(146,116,255,.42);background:rgba(70,48,160,.2);
  transition:transform .38s cubic-bezier(.2,.8,.3,1),border-color .3s ease,
    background .3s ease,box-shadow .3s ease}
.h2acc-ic svg{width:14px;height:14px;display:block}
.h2acc-head:hover .h2acc-ic{border-color:rgba(178,150,255,.7);box-shadow:0 0 0 4px rgba(122,80,255,.12)}

/* Corps replie : hauteur nulle mais contenu conserve, donc animable. */
.h2acc-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.3,1)}
.h2acc-in2{overflow:hidden;min-height:0}
.h2acc-body p{margin:0;padding:0 16px 15px 51px;font-size:12.8px;line-height:1.68;
  color:#aab2d8;opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease .06s,transform .38s cubic-bezier(.2,.8,.3,1) .06s}

/* Etat ouvert */
.h2acc-in:checked ~ .h2acc-body{grid-template-rows:1fr}
.h2acc-in:checked ~ .h2acc-body p{opacity:1;transform:none}
.h2acc-in:checked ~ .h2acc-head{background:rgba(122,80,255,.1)}
.h2acc-in:checked ~ .h2acc-head .h2acc-title{color:#fff}
.h2acc-in:checked ~ .h2acc-head .h2acc-num{color:#c8b4ff}
.h2acc-in:checked ~ .h2acc-head .h2acc-ic{transform:rotate(180deg);color:#fff;
  border-color:rgba(178,150,255,.75);background:rgba(122,80,255,.32)}

/* Focus clavier visible, porte par le libelle. */
.h2acc-in:focus-visible ~ .h2acc-head{outline:3px solid #b29cff;outline-offset:-3px;
  border-radius:12px}

@media(max-width:1080px){
  .hero2-approach{max-width:560px;margin-left:auto;margin-right:auto;text-align:left}
}
@media(max-width:700px){
  .hero2-approach{margin-top:26px;max-width:none}
  .h2acc-head{padding:13px 14px}
  .h2acc-title{font-size:14px}
  .h2acc-body p{padding:0 14px 14px 47px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .h2acc-body,.h2acc-body p,.h2acc-ic,.h2acc-head{transition:none!important}
}

/* ============================================================================
   Colonne gauche du hero — finition des petits elements.
   Portee strictement limitee au badge « CABINET DE RECRUTEMENT » et au bloc
   « Notre approche » (bordures, numeros, chevrons, profondeur). Aucune regle
   de mise en page, de texte ou d'espacement n'est touchee : seules les
   proprietes de surface changent (fond, bordure, ombre, couleur).
   ============================================================================ */

/* -------------------------------------------------- Badge du haut de colonne */
.hero2-copy .eyebrow{
  /* Bordure violette lumineuse mais retenue, doublee d'un liseré interne
     clair : c'est ce contraste haut/bas qui donne le relief. */
  border:1px solid rgba(163,134,255,.46);
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 46%),
    linear-gradient(150deg,rgba(112,78,224,.34),rgba(48,32,112,.26));
  color:#cfc0ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(6,12,38,.34),
    0 1px 0 rgba(255,255,255,.03),
    0 8px 20px rgba(6,12,38,.38),
    0 0 0 1px rgba(122,80,255,.08);
  backdrop-filter:blur(7px);
  transition:border-color .35s ease,box-shadow .35s ease,color .35s ease}
.hero2-copy .eyebrow:hover{
  border-color:rgba(186,162,255,.66);color:#e4dcff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(6,12,38,.34),
    0 10px 26px rgba(6,12,38,.44),
    0 0 0 4px rgba(122,80,255,.11)}

/* L'icone n'est plus un trait isole : elle est posee sur une petite plaque
   violette assortie, ce qui l'integre au badge. */
.hero2-copy .eyebrow-ic{
  /* Meme encombrement qu'avant (14px) : la plaque ne decale rien. */
  width:14px;height:14px;border-radius:5px;display:grid;place-items:center;
  color:#e6dcff;
  background:linear-gradient(150deg,rgba(150,112,255,.62),rgba(84,50,205,.5));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(6,12,38,.3),
    0 2px 5px rgba(8,14,42,.4);
  transition:box-shadow .35s ease}
.hero2-copy .eyebrow-ic svg{width:9px;height:9px;stroke-width:2.3}
.hero2-copy .eyebrow:hover .eyebrow-ic{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(6,12,38,.3),
    0 2px 8px rgba(122,80,255,.5)}

/* ------------------------------------------- Bloc « Notre approche » : cadre */
.hero2-approach{
  border:1px solid rgba(150,124,250,.4);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 22%),
    linear-gradient(160deg,rgba(30,40,90,.9),rgba(14,21,54,.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(6,12,38,.4),
    0 16px 38px rgba(4,10,32,.46),
    0 0 0 1px rgba(122,80,255,.07);
  backdrop-filter:blur(7px)}

/* Separateur a deux tons : une ligne sombre surmontee d'un fil clair. */
.h2acc{border-bottom:1px solid rgba(8,14,42,.55);
  box-shadow:0 1px 0 rgba(163,134,255,.14)}
.h2acc:last-child{border-bottom:0;box-shadow:none}

/* --------------------------------------------------------- Numeros 01/02/03 */
.h2acc-num{
  /* Degrade applique au texte : le chiffre prend du volume sans qu'aucune
     dimension ne change. */
  background:linear-gradient(160deg,#e0d4ff,#9b7bff 58%,#7048e6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(6,12,38,.5));
  transition:filter .35s ease}
.h2acc-sep{color:rgba(150,124,250,.42)}

/* ------------------------------------------------------------- Chevron rond */
.h2acc-ic{
  color:#cdbcff;
  border:1px solid rgba(163,134,255,.4);
  background:
    linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 52%),
    linear-gradient(150deg,rgba(104,72,214,.34),rgba(44,30,104,.3));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(6,12,38,.34),
    0 3px 8px rgba(6,12,38,.36)}

/* -------------------------------------------------------------- Survol ligne */
.h2acc-head:hover{
  background:linear-gradient(180deg,rgba(139,100,255,.13),rgba(139,100,255,.05))}
.h2acc-head:hover .h2acc-num{filter:drop-shadow(0 1px 0 rgba(6,12,38,.5))
  drop-shadow(0 0 7px rgba(150,110,255,.4))}
.h2acc-head:hover .h2acc-ic{
  border-color:rgba(196,174,255,.6);color:#f0eaff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(6,12,38,.34),
    0 4px 12px rgba(6,12,38,.4),
    0 0 0 4px rgba(122,80,255,.12)}

/* ----------------------------------------------------------- Ligne ouverte */
.h2acc-in:checked ~ .h2acc-head{
  background:linear-gradient(180deg,rgba(139,100,255,.16),rgba(139,100,255,.06))}
.h2acc-in:checked ~ .h2acc-head .h2acc-num{
  background:linear-gradient(160deg,#f2ecff,#b9a0ff 60%,#8b5cff);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(6,12,38,.5)) drop-shadow(0 0 9px rgba(150,110,255,.42))}
.h2acc-in:checked ~ .h2acc-head .h2acc-ic{
  color:#fff;border-color:rgba(196,174,255,.68);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 52%),
    linear-gradient(150deg,rgba(146,104,255,.6),rgba(78,44,196,.52));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(6,12,38,.34),
    0 4px 14px rgba(96,50,225,.4)}

@media(prefers-reduced-motion:reduce){
  .hero2-copy .eyebrow,.hero2-copy .eyebrow-ic,.h2acc-num{transition:none!important}
}

/* ============================================================================
   Accordeon « Notre approche » — calage du texte et lisibilite.

   Les chiffres etaient a chasse proportionnelle : « 01 » mesurait 13,73 px,
   « 02 » 15,92 px et « 03 » 16,41 px. Le tiret et le titre heritaient de cet
   ecart et derivaient jusqu'a 2,7 px d'une ligne a l'autre. Largeur fixe et
   chiffres tabulaires : les trois lignes se superposent exactement.
   Une hauteur de ligne commune pose numero, tiret et titre sur la meme ligne.
   Icones, bordures, couleurs de fond et structure restent inchanges.
   ============================================================================ */

.h2acc-num{
  flex:none;
  width:17px;                    /* largeur fixe : le tiret part au meme x */
  text-align:left;
  line-height:20px;              /* meme boite de ligne que le titre */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  /* Contraste releve : le degrade precedent partait trop sombre pour un texte
     de 12px sur fond navy. Meme famille violette, simplement plus lumineuse. */
  background:linear-gradient(160deg,#f7f4ff,#cbb6ff 58%,#a98bff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(4,9,28,.7))}

.h2acc-sep{
  flex:none;
  width:12px;
  text-align:center;
  line-height:20px;
  font-family:var(--heading);    /* memes metriques que le numero et le titre */
  color:rgba(163,140,255,.55)}

.h2acc-title{line-height:20px}

/* Etats : on conserve la mise en valeur existante, avec le meme gain de
   luminosite que l'etat au repos. */
.h2acc-head:hover .h2acc-num,
.h2acc-in:checked ~ .h2acc-head .h2acc-num{
  background:linear-gradient(160deg,#ffffff,#ddd0ff 58%,#b79dff);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 1px rgba(4,9,28,.7)) drop-shadow(0 0 8px rgba(150,110,255,.45))}

/* --------------------------------- Accordeon : lisibilite des descriptions
   Le corps de texte etait trop en retrait sur le fond navy. Teinte eclaircie,
   graisse portee a 500 et interligne legerement aere : plus lisible sans
   devenir lourd. Aucune autre propriete n'est touchee (retraits, marges,
   taille, alignement et animations restent ceux d'avant). */
.h2acc-body p{color:#ccd4ee;font-weight:500;line-height:1.72}

/* --------------------------------- Accordeon : respiration des descriptions
   Le texte etait tasse contre son titre et contre le bas de la ligne.
   On ajoute une amorce au-dessus du paragraphe, on aere l'interligne et on
   augmente la marge basse et la marge droite. Le retrait gauche (51px) ne
   bouge pas : l'alignement sous le titre est conserve. */
.h2acc-body p{padding:8px 22px 20px 51px;line-height:1.85}
@media(max-width:700px){
  .h2acc-body p{padding:7px 18px 18px 47px;line-height:1.85}
}

/* ==========================================================================
   Actions sur les offres : sauvegarder + etat « candidature envoyee ».
   Reprend exactement les jetons existants (violet, rayons, ombres) : aucun
   nouveau langage visuel n'est introduit.
   ========================================================================== */
.job-card-acts{display:inline-flex;align-items:center;gap:8px}
.job-save{width:38px;height:38px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:#6b7189;cursor:pointer;
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s ease}
.job-save svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.job-save:hover{border-color:#b9a6ff;color:var(--purple);transform:translateY(-1px)}
.job-save:focus-visible{outline:3px solid #b29cff;outline-offset:2px}
.job-save.is-saved{background:#f1efff;border-color:#b9a6ff;color:var(--purple)}
.job-save.is-saved svg{fill:currentColor}
.job-save--wide{width:auto;height:auto;gap:9px;display:inline-flex;align-items:center;
  padding:14px 18px;border-radius:9px;font:700 13px Inter,Arial,sans-serif}
.job-contact.is-applied{background:#e7f7ee;color:#1b7f4b;cursor:default}
.job-contact:disabled{opacity:1}

/* Bandeau de confirmation, aligne sur les modales du site. */
.st-toast{position:fixed;left:50%;bottom:26px;z-index:70;transform:translate(-50%,14px);
  max-width:min(460px,calc(100% - 32px));padding:14px 18px;border-radius:12px;
  background:linear-gradient(160deg,#101a3f,#0a1230);color:#fff;
  border:1px solid rgba(139,116,246,.4);
  box-shadow:0 20px 44px rgba(4,10,32,.4),inset 0 1px 0 rgba(255,255,255,.08);
  font:600 13px Inter,Arial,sans-serif;line-height:1.5;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.8,.3,1)}
.st-toast.is-in{opacity:1;transform:translate(-50%,0)}
.st-toast--error{border-color:rgba(240,140,140,.5);background:linear-gradient(160deg,#3a1220,#2a0d18)}

@media(max-width:700px){
  .job-card-bottom{flex-wrap:wrap;gap:8px}
  .job-card-acts{width:100%;justify-content:space-between}
  .job-contact{flex:1;justify-content:center}
  .st-toast{bottom:96px}
}
@media(prefers-reduced-motion:reduce){
  .job-save,.st-toast{transition:none!important}
  .job-save:hover{transform:none!important}
}

/* Créneau déjà réservé : visible mais hors d'atteinte, pour que le visiteur
   comprenne avant d'envoyer plutôt qu'après. */
.appointment-slot.is-taken{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.appointment-slot.is-taken:hover{transform:none}
.appointment-full{flex-basis:100%;margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#8a7fb5}

/* ============== Offres : blocs ajoutés (recommandations, détail) =========
   Reprend les cartes et la palette existantes : aucune nouvelle identité. */

.jobs-reco{margin:0 0 26px;padding:22px 24px;border-radius:20px;
  border:1px solid #e6e1f8;background:linear-gradient(160deg,#fbfaff,#f5f1ff)}
.jobs-reco-head h3{margin:0;font:800 19px var(--heading,'Manrope',sans-serif);color:#0a1130}
.jobs-reco-head p{margin:5px 0 16px;font-size:12.6px;line-height:1.6;color:#6b728b}
.jobs-reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.reco-card{display:flex;flex-direction:column;gap:6px;padding:16px 17px;border-radius:16px;
  background:#fff;border:1px solid #ebe7f8;transition:border-color .18s ease,transform .18s ease}
.reco-card:hover{border-color:#c9bcff;transform:translateY(-2px)}
.reco-badge{align-self:flex-start;padding:3px 10px;border-radius:99px;background:#efe9ff;
  color:#5730dc;font:800 10px Inter,Arial,sans-serif;letter-spacing:.3px}
.reco-card h4{margin:2px 0 0;font:800 14.5px var(--heading,'Manrope',sans-serif);color:#0a1130;line-height:1.35}
.reco-meta{margin:0;font-size:11.8px;color:#7d8498}
.reco-why{margin:2px 0 0;font-size:11.6px;line-height:1.5;color:#6f45ea}
.reco-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.reco-acts .job-link,.reco-acts .job-contact{font-size:12px;padding:7px 12px}

/* Note sous un groupe de filtres */
.filter-note{margin:7px 0 0;font-size:10.8px;line-height:1.5;color:#8a90a3}
.jobs-reset.is-idle{opacity:.5;cursor:default}

/* Fiche offre : faits, compétences, offres similaires */
.job-detail-keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px 18px;margin:16px 0 4px;padding:16px 18px;border-radius:14px;background:#f8f7fd}
.job-detail-keyfacts dt{font:700 10.5px Inter,Arial,sans-serif;letter-spacing:.4px;
  text-transform:uppercase;color:#8a90a3}
.job-detail-keyfacts dd{margin:3px 0 0;font-size:13px;font-weight:700;color:#151c3d}
.job-detail-skills{margin:14px 0 0}
.job-detail-skills h3{margin:0 0 7px;font:800 13px var(--heading,'Manrope',sans-serif);color:#0a1130}
.job-detail-skills p{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.job-similar{margin-top:20px;padding-top:18px;border-top:1px solid #ececf5}
.job-similar h3{margin:0 0 10px;font:800 13px var(--heading,'Manrope',sans-serif);color:#0a1130}
.job-similar-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.job-similar-card{display:block;text-align:left;padding:12px 14px;border-radius:13px;cursor:pointer;
  border:1px solid #e6e3f2;background:#fff;transition:border-color .18s ease,transform .18s ease}
.job-similar-card:hover{border-color:#bcb0ff;transform:translateY(-2px)}
.job-similar-card strong{display:block;font:800 12.8px var(--heading,'Manrope',sans-serif);color:#151c3d}
.job-similar-card span{display:block;margin-top:3px;font-size:11.4px;color:#7d8498}

@media (max-width:640px){
  .jobs-reco{padding:18px 16px;border-radius:16px}
  .jobs-reco-grid{grid-template-columns:1fr}
  .job-detail-keyfacts{grid-template-columns:repeat(2,1fr);padding:14px}
  .job-similar-list{grid-template-columns:1fr}
}

/* Rangee d'actions des opportunites : entre 821 px et 1000 px, la boite
   portait flex:0 0 auto et gardait donc sa largeur intrinseque, ce qui
   sortait 62 px hors de la page malgre le flex-wrap deja present. On
   autorise le retrecissement pour que le retour a la ligne se declenche.
   Au-dela de 1000 px la place suffit : le rendu est inchange. */
@media(max-width:1000px){
  .opportunities-actions{flex:0 1 auto;min-width:0}
}

/* ==========================================================================
   « Mon espace » — micro-interaction de l'en-tete.

   Le lien restait purement statique (simple passage de #c9b8ff a #fff) alors
   que le bouton violet voisin se souleve. On l'aligne sur ce langage, sans
   rien changer a sa position, son texte, sa typographie ni son espacement :
   l'etat de repos est exactement celui d'avant.

   Uniquement transform et opacity : rien ne declenche de recalcul de mise en
   page, et aucune animation ne tourne en continu.
   ========================================================================== */
.nav-account{
  position:relative;
  /* Confine le halo (z-index:-1) au lien : il ne peut pas passer derriere
     l'en-tete ni au-dessus du texte. */
  isolation:isolate;
  transition:color .25s ease,transform .3s var(--st-transition);
}

/* Halo violet, tres discret. Peint une seule fois ; seule son opacite change,
   donc aucun flou ni recalcul de peinture au survol. */
.nav-account::before{
  content:"";
  position:absolute;
  inset:-5px -11px;
  z-index:-1;
  border-radius:11px;
  background:radial-gradient(64% 130% at 50% 50%,
    rgba(140,96,255,.30) 0%,rgba(140,96,255,.14) 46%,rgba(140,96,255,0) 76%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}

/* Soulignement qui se trace depuis la gauche. scaleX est composite : la
   hauteur reservee ne bouge jamais, donc aucun decalage. */
.nav-account::after{
  content:"";
  position:absolute;
  left:4px;right:4px;bottom:4px;
  height:1.5px;
  border-radius:2px;
  background:linear-gradient(90deg,#8055ff,#c9b8ff);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .34s var(--st-transition);
  pointer-events:none;
}

.nav-account:hover,
.nav-account:focus-visible{
  color:#fff;
  transform:translateY(-1px);
}
.nav-account:hover::before,
.nav-account:focus-visible::before{opacity:1}
.nav-account:hover::after,
.nav-account:focus-visible::after{transform:scaleX(1)}

/* Ecrans tactiles : pas de survol persistant, comme pour les autres
   composants du site (bloc « Touch safety » plus haut). */
@media (hover:none){
  .nav-account:hover{transform:none}
  .nav-account:hover::before{opacity:0}
  .nav-account:hover::after{transform:scaleX(0)}
}

/* Mouvement reduit : on garde le changement d'etat, on retire le mouvement.
   Le soulignement et le halo apparaissent alors instantanement. */
@media(prefers-reduced-motion:reduce){
  .nav-account,
  .nav-account::before,
  .nav-account::after{transition:none}
  .nav-account:hover,
  .nav-account:focus-visible{transform:none}
}

/* ==========================================================================
   BADGES DE COMPÉTENCES — .job-skill

   Correction de fond : la règle d'origine portait « font:800 9.5px inherit ».
   `inherit` n'étant pas une famille valide dans le raccourci `font`, le
   parseur rejetait la déclaration entière : les badges s'affichaient en 16px
   graisse normale au lieu de 9.5px en 800. D'où des pastilles surdimensionnées
   et mal cadrées. On repose ici une typographie valide, puis on ajuste les
   proportions.

   Le rayon 999px est conservé : c'est la forme de toutes les pastilles du
   site (.job-tag, .domain-job-pill, .job-pill). Les teintes restent celles
   de la palette violette existante.

   Deux tailles, une seule famille : compacte dans les cartes, légèrement plus
   généreuse dans la fiche détaillée.
   ========================================================================== */

/* --- Rangée dans les cartes ------------------------------------------------ */
.job-skills{
  display:flex;
  flex-wrap:wrap;
  align-items:center;      /* les badges restent alignés entre eux */
  gap:5px 6px;             /* interligne resserré quand ça passe à la ligne */
  margin:2px 0 6px;
}

/* --- Le badge -------------------------------------------------------------- */
.job-skill{
  display:inline-flex;
  align-items:center;      /* centrage vertical exact du texte */
  justify-content:center;
  max-width:100%;          /* ne peut jamais déborder de sa rangée */
  box-sizing:border-box;
  padding:4px 10px;
  border-radius:999px;
  font-family:Inter,Arial,Helvetica,sans-serif;
  font-size:10.5px;
  font-weight:700;
  line-height:1.1;         /* centrage optimal mesuré, et propre sur 2 lignes */
  letter-spacing:.15px;
  text-align:center;
  color:#5b3fc4;
  background:#f6f4ff;      /* teinte violette plus discrète qu'auparavant */
  border:1px solid #e6e1fb;/* filet plus fin à l'œil, moins contrasté */
}

/* --- Variante sur la carte à la une (fond sombre) --------------------------- */
.job-featured-card .job-skill{
  color:#d9d1ff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
}

/* --- Fiche détaillée : même composant, une échelle au-dessus ---------------- */
.job-detail-skills p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 7px;
  margin:0;
}
.job-detail-skills .job-skill{
  padding:6px 12px;
  font-size:11px;
  letter-spacing:.2px;
}

/* ==========================================================================
   RESSOURCES — centrage du bloc de titre.

   La section déclare text-align:center, mais .resources-head porte
   max-width:760px avec une marge horizontale nulle : la boîte restait collée
   à gauche et le texte se centrait à l'intérieur d'elle. Le titre tombait
   donc sur x=352 quand les trois cartes se centrent sur x=713 — 361 px
   d'écart, alors que les sections voisines (Expertises, Opportunités)
   alignent exactement leur bloc de titre sur leur section.

   On rétablit le centrage que la règle annonçait déjà. Rien d'autre ne
   change : ni couleur, ni police, ni carte, ni grille.
   ========================================================================== */
.resources-head{
  /* Le bloc de titre n'est pas une rangee : il empile sur-titre, titre
     et paragraphe, comme dans toutes les autres sections. Sans cela il
     heritait du display:flex de « .resources > div », ecrit pour la
     rangee de boutons, et le h2 tombait sur 4 lignes a 281 px. */
  flex-direction:column!important;
  /* La regle annoncait text-align:center mais la boite restait collee a
     gauche (marge horizontale nulle sous max-width:760px). */
  margin-left:auto!important;
  margin-right:auto!important;
  /* Le paragraphe porte max-width:720px : sans cela il se calait sur le
     bord gauche du bloc et son texte tombait 20 px a cote de l'axe. */
  align-items:center;
}

/* ==========================================================================
   Barre de defilement du panneau de filtres — .jobs-filters / .filter-options

   Portée strictement limitée à ces deux conteneurs : la barre de la page
   (html/body) n'est pas concernée.

   Chromium/WebKit : la largeur reste à 6 px — elle était déjà posée, et y
   toucher modifierait la largeur utile du panneau. On ajoute seulement ce qui
   manquait : une piste transparente (la piste grise par défaut restait
   visible) et un état de survol.

   Firefox : scrollbar-width/-color valaient « auto », d'où la barre système
   épaisse. Ces propriétés sont placées derrière @supports not
   selector(::-webkit-scrollbar) — vrai sur Firefox, faux sur Chromium, où
   `scrollbar-width:thin` ferait au contraire passer la barre de 6 à 10 px.

   Aucune ombre, aucune lueur, aucune transition.
   ========================================================================== */
.jobs-filters::-webkit-scrollbar,
.filter-options::-webkit-scrollbar{width:6px;height:6px}

.jobs-filters::-webkit-scrollbar-track,
.filter-options::-webkit-scrollbar-track{background:transparent}

.jobs-filters::-webkit-scrollbar-thumb,
.filter-options::-webkit-scrollbar-thumb{background:#d9d4ec;border-radius:999px}

.jobs-filters::-webkit-scrollbar-thumb:hover,
.filter-options::-webkit-scrollbar-thumb:hover{background:#bfb6de}

@supports not selector(::-webkit-scrollbar){
  .jobs-filters,
  .filter-options{scrollbar-width:thin;scrollbar-color:#d9d4ec transparent}
}

/* ==========================================================================
   Indicateur de focus du champ de recherche d'offres

   `.jobs-search input` porte `outline:none` (styles.css, règle du champ nu).
   Sa spécificité (0,1,1) l'emporte sur la règle globale `:focus-visible`
   (0,1,0) : ce champ était le seul contrôle du site sans indicateur de focus
   au clavier — WCAG 2.4.7. Vérifié en direct : champ focalisé, outline
   « none » ; la même règle globale forcée en !important fait apparaître
   l'anneau.

   On repose donc l'anneau maison — mêmes trait, teinte et décalage que la
   règle globale — sur `.jobs-search`, le conteneur réellement visible : il
   porte la bordure et le rayon de 11 px, et l'anneau en épouse la forme.
   Le champ lui-même garde `outline:none`, ce qui évite tout anneau double.

   Rien ne change au repos : ces styles n'existent qu'au focus.
   ========================================================================== */
.jobs-search:focus-within{
  outline:3px solid rgba(112,64,239,.55);
  outline-offset:4px;
}

/* ==========================================================================
   Bornage du défilement en haut et en bas de page

   La mise en page ne comporte aucun espace mort : le pied de page se termine
   exactement sur scrollHeight et rien ne dépasse au-dessus de y=0 (vérifié à
   1440, 834 et 390 px). La bande blanche visible lors d'un défilement brusque
   n'était donc pas un défaut du site, mais le rebond élastique natif du
   navigateur, qui laisse voir le canevas — blanc, parce que body{background:#fff}
   se propage au canevas alors que html n'a aucun fond. Aux deux extrémités le
   contenu est navy foncé, d'où un aplat blanc très visible.

   overscroll-behavior-y neutralise ce dépassement vertical : la page s'arrête
   net en haut et en bas. Forme axiale volontaire — l'axe horizontal est déjà
   neutre (body{overflow-x:hidden}, débordement mesuré nul).

   Aucun script n'intervient : pas d'écouteur wheel, pas de preventDefault,
   pas de scrollTo artificiel. Le défilement reste natif, sur le compositeur.
   Aucun effet au repos : la propriété n'agit qu'au moment de franchir une borne.
   ========================================================================== */
html{overscroll-behavior-y:none}

/* ==========================================================================
   Liens legaux du pied de page + mention d'information des formulaires

   Les liens legaux etaient des <button> ; ils deviennent des liens reels vers
   les pages legales. La regle commune `.footer-col a,.footer-link` porte un
   raccourci `font:600 13px inherit` invalide, donc ignore : le rendu approuve
   etait celui de la police par defaut des boutons (Arial 13,33 px, graisse
   400). Un lien heriterait sinon d'Inter 16 px. On fige donc ce rendu mesure.
   ========================================================================== */
.footer-col .footer-link{font:400 13.3333px/normal Arial,sans-serif}

p.form-hint.form-privacy{display:block;margin:12px 0 0;font-size:11px;line-height:1.55;
  font-weight:500;color:#7d8498}
p.form-hint.form-privacy a{color:inherit;font-weight:600;text-decoration:underline}
p.form-hint.form-privacy a:hover{color:var(--purple)}

/* ==========================================================================
   Liens reels vers les pages d'offres (/offres/…)

   « Voir le poste » et « Voir l’opportunité » etaient des <button>. Ils
   deviennent des liens quand l'offre a une page publique. Un bouton prend la
   police par defaut du navigateur (mesuree : Arial 11 px pour .job-link, et
   13,33 px pour .btn) ; un lien heriterait d'Inter 16 px. On fige donc le
   rendu mesure, pour que les cartes restent identiques.
   ========================================================================== */
a.job-link{font-family:Arial;line-height:normal;text-align:center;text-decoration:none}
.job-featured-actions a.btn{font-size:13.3333px;font-weight:400;line-height:normal;text-align:center;text-decoration:none}

/* Bloc « Un cabinet engage » : lignes equilibrees, sans mot isole. */
.proof>p{text-wrap:balance}

/* ==========================================================================
   RESPONSIVE MOBILE (360-430 px) — correctifs cibles, ajoutes en fin de
   feuille. Aucune regle existante n'est reecrite ; le bureau (> 1000 px)
   n'est pas concerne. Couleurs, polices, textes et animations inchanges.
   ========================================================================== */

/* 1. Burger : zone tactile 44x44 qui ne retrecit plus. Le pictogramme garde
   sa taille (18 px) et sa position : les marges compensent l'agrandissement. */
@media(max-width:1000px){
  .menu-toggle{flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:0;place-items:center;margin-left:7px;margin-right:-7px}
  .menu-toggle svg{width:18px;height:18px}
  .job-save{width:44px;height:44px;min-width:44px}
}
@media(max-width:700px){
  .nav{gap:8px}
  /* La regle <=1180 px repose 10 px a droite du lien apres le correctif
     mobile. Les retirer ici rend exactement cette marge au burger. */
  .nav-account{margin-right:0}

  /* 2. Fenetre « expertise » : la fenetre elle-meme defile. Le bouton ferme
     reste un enfant direct sticky du scroller, sans reserver de hauteur. */
  .sector-dialog{max-height:calc(100vh - 20px);max-height:calc(100svh - 20px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .sector-close{position:sticky;top:max(8px,env(safe-area-inset-top,0px));display:grid;place-items:center;width:44px;height:44px;margin:8px 8px -52px auto;border-radius:50%;background:rgba(5,13,40,.78);backdrop-filter:blur(8px);color:#fff;z-index:20}
  .sector-close svg{width:20px;height:20px}
  dialog .close{display:grid;place-items:center;width:44px;height:44px;right:10px;top:7px}

  /* 3. Fiche offre : actions empilees en pleine largeur, sans debordement. */
  .job-detail-dialog{max-height:calc(100vh - 38px);max-height:calc(100svh - 38px)}
  .job-detail-actions{flex-direction:column;align-items:stretch;gap:10px}
  .job-detail-actions>*{width:100%;min-width:0}
  .job-detail-actions .btn{white-space:normal;text-align:center;gap:10px;padding-inline:16px}
  .job-detail-actions .job-save--wide{justify-content:center}
  .job-detail-actions .text-action{min-height:44px;padding:10px 0}
  /* 4. En-tete « Nos expertises » : titre sur toute la largeur, fleches du
     carrousel sur une seconde ligne. */
  .expertises .section-head{flex-direction:column!important;align-items:stretch!important}
  .expertises .section-head>div:first-child{width:100%;min-width:0}
  .expertises .carousel-controls{align-self:flex-start}

  /* 5. Cartes d'expertise : hauteur libre (fin du 430 px fige). */
  .expertise-card{height:auto!important;min-height:0!important}

  /* 6. Deux corrections optiques mesurees dans le viewBox des pictogrammes. */
  .expertise-card[data-sector="5"] .domain-art svg{transform:translateX(-3px)}
  .expertise-card[data-sector="15"] .domain-art svg{transform:translateY(5px)}

  /* 7. Zone de securite iPhone pour le toast fixe en bas d'ecran. */
  .st-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* A 320 px seulement, les trois controles ne tiennent pas sans compacter le
   logo. Les tailles habituelles restent strictement inchangees des 341 px. */
@media(max-width:340px){
  .nav{padding-inline:6px;gap:4px}
  .logo-mark{width:34px!important;height:36px!important;font-size:22px!important}
  .logo-word>span,.logo-word>b{font-size:17px!important;letter-spacing:.2px!important}
  .logo-word>b{letter-spacing:.8px!important}
  .nav-account{font-size:11.5px}
  .menu-toggle{margin-left:2px}
}

/* IPHONE SAFARI POLISH — cadrage du canevas et du footer sur mobile uniquement. */
@media(max-width:560px){
  html{background:#07102f}
  .site-footer{padding:32px 0 calc(16px + env(safe-area-inset-bottom,0px))}
  .footer-grid{gap:14px}
  .footer-brand p{margin-top:10px}
  .footer-col h4{margin-bottom:8px}
  .footer-col a,.footer-link{padding-bottom:9px}
  .footer-bottom{margin-top:18px;padding-top:12px;gap:6px}
}

/* ========================================================================== 
   FINAL RESPONSIVE ARCHITECTURE — mobile et tablette uniquement.
   Le seuil desktop commence volontairement a 1024 px : aucune regle de ce
   bloc ne peut modifier les rendus 1024/1280/1440/1920 approuves.
   ========================================================================== */
.domain-meta-full{display:none}
.jobs-mobile-controls,.jobs-filter-close,.jobs-filters-backdrop{display:none}

@media(max-width:1023px){
  /* Le menu tablette suit le meme modele que le menu mobile jusqu'a 1023 px. */
  .nav{padding-inline:18px}
  .menu-toggle{display:grid!important;order:2;flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:0;place-items:center;margin-left:14px}
  .menu-toggle svg{width:18px;height:18px}
  .nav-links{position:absolute;top:calc(100% + 10px);left:18px;right:18px;display:grid!important;gap:8px;padding:10px;background:rgba(11,18,43,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 22px 50px rgba(0,0,0,.25);opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s ease,transform .3s var(--st-transition)}
  .nav.is-menu-open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:10px 12px;color:#f8f8ff!important;border-radius:10px}
  .nav-actions{display:flex;order:1;margin-left:auto;gap:0}
  .nav-actions .header-cta{display:none}
  .nav-account{margin:0;font-size:12.5px}
  .sector-close,dialog .close{width:46px;height:46px;min-width:46px;display:grid;place-items:center}

  /* Cartes statistiques : leur hauteur depend de leur propre contenu, pas de
     la carte la plus haute de la rangee. */
  .hero2-kpis{align-items:start}
  .h2kpi{height:auto;align-self:start}
  .h2kpi--gauge{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:18px;text-align:left!important}
  .h2kpi--gauge .h2gauge{grid-row:1/4;width:104px;height:104px;margin:0}
  .h2kpi--gauge .h2kpi-value{grid-column:2;font-size:40px}
  .h2kpi--gauge .h2kpi-label,.h2kpi--gauge .h2kpi-sub{grid-column:2}
  .h2kpi--gauge .h2kpi-label{margin-top:6px}

  /* La grille a cinq colonnes devenait trop dense entre 821 et 1023 px. */
  .difference-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .difference-grid .diff-item{min-width:0}

  /* Expertises : deux cartes lisibles sur tablette, une description complete
     et des hauteurs dictees par le contenu. */
  .expertises .section-head{margin-bottom:28px!important}
  .expertise-grid{align-items:stretch!important}
  .expertise-card{flex-basis:calc((100% - 16px)/2)!important;width:calc((100% - 16px)/2)!important;min-width:calc((100% - 16px)/2)!important;height:auto!important;min-height:0!important;padding:18px 20px 18px!important}
  .expertise-card .domain-art{width:82px!important;height:82px!important;margin:0 0 18px!important}
  .expertise-card .domain-art svg{width:45px!important;height:45px!important}
  .expertise-card .domain-copy{gap:8px!important;min-height:0!important}
  .expertise-card .domain-meta{min-height:0!important;font-size:12px!important;line-height:1.55!important}
  .domain-meta-short{display:none}
  .domain-meta-full{display:inline}
  .expertise-card .domain-jobs{gap:7px!important;margin-top:4px!important}
  .expertise-card .domain-job-pill{padding:7px 9px!important;font-size:10.5px!important;white-space:normal}
  .expertise-card .domain-bottom{margin-top:18px!important;gap:12px}
  .expertise-card .domain-count{min-height:36px}
  .expertise-card .circle{flex:0 0 40px}

  /* L'espace entre Ressources et Opportunites reste dans la cible 48–72 px
     sur les tablettes, sans marge negative ni hauteur artificielle. */
  .resources{margin-bottom:26px;padding-bottom:0!important}

  /* Recherche et commandes : hauteur tactile stable et aucun flex-shrink. */
  .jobs-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border-color:#ded8f5!important;background:linear-gradient(145deg,#fbfaff,#f5f1ff)!important}
  .jobs-search{width:100%;height:54px;min-height:54px;flex:none;padding:0 16px;border-color:#d9d1f6;background:#fff;box-shadow:0 7px 18px rgba(76,52,164,.055)}
  .jobs-search input{min-width:0;font-size:13px}
  .jobs-mobile-controls{display:flex;align-items:stretch;gap:8px}
  .jobs-mobile-control{min-height:48px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dcd4f8;border-radius:12px;background:#fff;color:#302858;font:800 12px Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer}
  .jobs-mobile-control svg{width:17px;height:17px;stroke:#7040ef;fill:none;stroke-width:2}
  .jobs-mobile-control b{min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:#eee8ff;color:#6540dc;font-size:10px}
  .jobs-toolbar-meta{grid-column:1/-1;min-height:24px}

  /* Le panneau conserve exactement les controles et l'etat existants, mais
     quitte le flux de page sous 1024 px. */
  .jobs-layout{grid-template-columns:1fr;margin-top:20px}
  .jobs-filters{display:block!important;position:fixed!important;top:auto;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:18px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:92;border-radius:20px!important;box-shadow:0 26px 80px rgba(4,9,31,.34)!important;opacity:0;visibility:hidden;transform:translateY(calc(100% + 28px));pointer-events:none;transition:transform .32s cubic-bezier(.22,.75,.18,1),opacity .25s ease,visibility .25s step-end}
  .jobs-filters.is-mobile-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:transform .32s cubic-bezier(.22,.75,.18,1),opacity .25s ease,visibility 0s}
  .jobs-filter-head{position:sticky;top:-18px;z-index:4;display:grid;grid-template-columns:1fr auto 44px;align-items:center;min-height:62px;margin:-18px -18px 0;padding:9px 10px 9px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid #e8e3f7}
  .jobs-filter-close{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#f2edff;color:#5f35d6;place-items:center;cursor:pointer}
  .jobs-filter-close svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
  .jobs-filters.is-mobile-open .jobs-filter-close{display:grid}
  .filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:none;overflow:visible;padding-right:0}
  .filter-choice{min-height:44px;padding:9px 10px;text-align:center;overflow-wrap:anywhere}
  .jobs-filters-backdrop{position:fixed;inset:0;z-index:91;border:0;background:rgba(4,9,28,.58);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s step-end}
  .jobs-filters-backdrop.is-open{display:block;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease,visibility 0s}
  body.jobs-filters-open{overflow:hidden}
}

@media(min-width:768px) and (max-width:1023px){
  .jobs-filters{left:auto;width:min(440px,calc(100% - 32px));top:16px;bottom:auto;height:calc(100vh - 32px);height:calc(100dvh - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
}

@media(max-width:767px){
  .jobs-toolbar{grid-template-columns:1fr}
  .jobs-search,.jobs-mobile-controls,.jobs-toolbar-meta{grid-column:1}
  .jobs-mobile-controls{width:100%}
  .jobs-mobile-control{flex:1;min-width:0;padding-inline:10px}
  .resources{margin-bottom:6px;padding-bottom:14px!important}
  .expertise-carousel{margin-right:0!important;padding-right:0!important}
  .expertise-card{flex-basis:100%!important;width:100%!important;min-width:100%!important;padding:18px!important}
  .expertise-card .domain-art{width:76px!important;height:76px!important;margin-bottom:16px!important}
  .expertise-card .domain-art svg{width:42px!important;height:42px!important}
  .expertise-card .domain-title{font-size:19px!important}
  .h2kpi{padding:16px!important}
  .h2kpi--gauge{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:16px;text-align:left!important}
  .h2kpi--gauge .h2gauge{grid-row:1/4;width:96px;height:96px;margin:0}
  .h2kpi--gauge .h2kpi-value{grid-column:2;font-size:38px}
  .h2kpi--gauge .h2kpi-label,.h2kpi--gauge .h2kpi-sub{grid-column:2}
  .h2kpi--gauge .h2kpi-label{margin-top:6px}
  .h2kpi--delay .h2tag{margin-top:18px}
  .h2kpi--gain .h2graph{height:72px;margin-top:14px;padding-top:0}
}

@media(max-width:359px){
  .jobs-mobile-control{font-size:11px;gap:5px;padding-inline:7px}
  .jobs-mobile-control svg{width:15px;height:15px}
  .filter-options{grid-template-columns:1fr}
  .expertise-card .domain-bottom{align-items:flex-end}
}

@media(prefers-reduced-motion:reduce){
  .jobs-filters,.jobs-filters-backdrop{transition:none!important}
}

/* ==========================================================================
   IPHONE EDGE-TO-EDGE + ROTATION STABILITY

   Le canevas garde la teinte du haut et du pied de page derrière les zones
   sûres. Les sections conservent leur propre fond : aucun padding n'est posé
   sur html/body, afin que leurs aplats continuent jusqu'aux bords physiques.
   ========================================================================== */
html{
  background:#07102f;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media(max-width:1023px){
  /* Même géométrie quand les insets valent zéro ; sur iPhone paysage, seule
     la marge nécessaire au notch remplace la gouttière habituelle. */
  .wrap{
    width:auto;
    max-width:1216px;
    margin-left:max(34px,env(safe-area-inset-left,0px));
    margin-right:max(34px,env(safe-area-inset-right,0px));
  }

  /* Les fonds restent portés par les éléments pleine largeur. Seul le début
     de leur contenu est repoussé sous la zone sûre supérieure. */
  .hero,.acc-top{padding-top:env(safe-area-inset-top,0px)}

  /* Les grandes fenêtres restent centrées à l'intérieur des deux insets. */
  dialog{max-width:calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 18px)}
}

@media(max-width:700px){
  .wrap{
    margin-left:max(16px,env(safe-area-inset-left,0px));
    margin-right:max(16px,env(safe-area-inset-right,0px));
  }
}

/* En paysage iPhone, la largeur dépasse 560px : on protège donc le contenu
   inférieur ici, tandis que la règle mobile existante couvre le portrait. */
@media(min-width:561px) and (max-width:1023px){
  .site-footer{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}

/* ========================================================================== 
   IPHONE SAFARI — CANVAS + ROTATION ROOT-CAUSE FIX

   Safari peut peindre les zones physiques hors du layout viewport avec le
   fond du scrollport/body. Le contenu central reste blanc via main, tandis
   que le canevas expose la meme teinte que le hero et le footer.

   WebKit conservait aussi la largeur paysage de la piste implicite `1fr` du
   hero au retour portrait. Une borne minimale explicite force la piste a se
   recalculer sur la largeur disponible, sans toucher au rendu desktop.
   ========================================================================== */
@media(max-width:1023px){
  body.home-page{background:#07102f}
  body.home-page>main{background:#fff}
  .hero2-main{grid-template-columns:minmax(0,1fr)!important}
}

/* ========================================================================== 
   MOBILE / TABLET — WHITE CLOSING SECTION BACKDROP

   `.closing` sits outside the white `main`. After the iPhone root-canvas fix,
   its side gutters and the footer's top margin therefore exposed the dark
   body canvas. Convert those unchanged spaces to white section padding while
   keeping `.closing-inner` and the desktop layout strictly untouched.
   ========================================================================== */
@media(max-width:1023px){
  body.home-page>main{display:flow-root}
  body.home-page>.closing{
    width:100%;
    max-width:none;
    margin:0;
    padding-top:0;
    padding-right:max(34px,env(safe-area-inset-right,0px));
    padding-bottom:42px;
    padding-left:max(34px,env(safe-area-inset-left,0px));
    background:#fff;
  }
  body.home-page>.closing+.site-footer{margin-top:0}
}

@media(max-width:700px){
  body.home-page>.closing{
    padding-right:max(16px,env(safe-area-inset-right,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px));
  }
}

/* ========================================================================== 
   KPI 72H — PREMIUM V3

   Composition autonome : le contenu reste ancré en haut, tandis que la
   timeline utilise la respiration basse sans changer les cartes voisines.
   ========================================================================== */
.h2kpi--delay{justify-content:flex-start}
.h2kpi-delay-main{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;align-content:start}
.h2kpi--delay .h2kpi-head{display:contents}
.h2kpi--delay .h2kpi-ic{grid-column:1;grid-row:1/3;align-self:center}
.h2kpi--delay .h2kpi-value{grid-column:2;grid-row:1}
.h2kpi--delay .h2kpi-label{grid-column:2;grid-row:2;margin-top:10px;font-size:11.5px;line-height:1.35}
.h2kpi--delay .h2tag{grid-column:1/-1;grid-row:3;justify-self:start;margin-top:14px;white-space:nowrap}
.h2kpi-delay-timeline{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;margin-top:18px;padding-top:1px;color:#aeb7dc}
.h2kpi-delay-timeline::before{content:"";position:absolute;z-index:0;top:5px;right:5px;left:5px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(91,157,255,.32),rgba(139,92,255,.78) 58%,#a983ff);box-shadow:0 0 8px rgba(139,92,255,.28)}
.h2kpi-delay-step{position:relative;z-index:1;display:grid;justify-items:center;gap:9px;font-size:11.5px;line-height:1;font-weight:700;color:#aeb7dc}
.h2kpi-delay-step::before{content:"";width:10px;height:10px;border:2px solid #8ca9e9;border-radius:50%;background:#d7ddff;box-shadow:0 0 0 3px #17204b,0 0 8px rgba(104,129,255,.42)}
.h2kpi-delay-step:first-child{justify-items:start}
.h2kpi-delay-step:last-child{justify-items:end}
.h2kpi-delay-step.is-current{color:#fff}
.h2kpi-delay-step.is-current::before{width:14px;height:14px;margin-top:-2px;border-color:#bca7ff;background:#d8cbff;box-shadow:0 0 0 3px #30226d,0 0 0 7px rgba(112,72,220,.22),0 0 18px rgba(155,112,255,.78)}

@media(min-width:1024px){
  .h2kpi--delay{padding-top:13px}
  .h2kpi--delay .h2kpi-label{margin-top:14px}
  .h2kpi--delay .h2tag{margin-top:18px}
  .h2kpi-delay-timeline{margin-top:auto}
}

@media(max-width:767px){
  .h2kpi--delay .h2tag{margin-top:10px}
  .h2kpi-delay-timeline{margin-top:10px}
  .h2kpi-delay-step{gap:5px}
}

/* ========================================================================== 
   PREMIUM MODAL FRAME — LOCAL VISUAL MICRO-ADJUSTMENT

   The frame uses painted rings and shadows so dialog dimensions, scrolling,
   content placement and backdrop behaviour remain unchanged.
   ========================================================================== */
.sector-dialog{
  background:#07142f;
  box-shadow:
    0 0 0 1px rgba(160,120,255,.50),
    0 30px 88px rgba(3,7,28,.44),
    0 0 34px rgba(111,66,255,.13);
}

.sector-main{background:#fff}

.contact-dialog--refined,
.job-detail-dialog{
  box-shadow:
    0 0 0 1px rgba(125,92,255,.32),
    0 30px 88px rgba(4,10,35,.28),
    0 10px 34px rgba(82,50,170,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.sector-close,
.contact-dialog--refined>.close,
.job-detail-dialog>.close{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:13px;
}

.sector-close{
  border:1px solid rgba(190,166,255,.46);
  background:rgba(11,21,56,.90);
  color:#fff;
  box-shadow:0 8px 24px rgba(2,7,29,.28),0 0 16px rgba(126,82,255,.16),inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
}

.contact-dialog--refined>.close,
.job-detail-dialog>.close{
  border:1px solid rgba(125,92,255,.34);
  background:rgba(255,255,255,.95);
  color:#35266f;
  box-shadow:0 8px 22px rgba(14,20,59,.13),0 0 16px rgba(112,64,239,.12),inset 0 1px 0 rgba(255,255,255,.96);
}

.sector-close svg,
.contact-dialog--refined>.close svg,
.job-detail-dialog>.close svg{
  width:18px;
  height:18px;
  stroke-width:1.8;
}

@media(max-width:1023px){
  .sector-close,
  .contact-dialog--refined>.close,
  .job-detail-dialog>.close{
    width:46px;
    height:46px;
    min-width:46px;
  }
}

.sector-close:focus-visible{
  outline:none;
  border-color:rgba(205,187,255,.68);
  box-shadow:0 8px 24px rgba(2,7,29,.28),0 0 18px rgba(126,82,255,.22),inset 0 1px 0 rgba(255,255,255,.13);
}

.contact-dialog--refined>.close:focus-visible,
.job-detail-dialog>.close:focus-visible{
  outline:none;
  border-color:rgba(125,92,255,.50);
  box-shadow:0 8px 22px rgba(14,20,59,.13),0 0 18px rgba(112,64,239,.16),inset 0 1px 0 rgba(255,255,255,.96);
}

@media(hover:hover) and (pointer:fine){
  .sector-close,
  .contact-dialog--refined>.close,
  .job-detail-dialog>.close{
    transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease,color .18s ease;
  }
  .sector-close:hover{
    border-color:rgba(205,187,255,.62);
    background:rgba(14,25,64,.94);
    box-shadow:0 9px 24px rgba(2,7,29,.28),0 0 16px rgba(130,87,255,.12),inset 0 1px 0 rgba(255,255,255,.14);
  }
  .contact-dialog--refined>.close:hover,
  .job-detail-dialog>.close:hover{
    border-color:rgba(121,92,255,.42);
    background:#fff;
    color:#6135e8;
    box-shadow:0 8px 22px rgba(14,20,59,.13),0 0 14px rgba(112,64,239,.08),inset 0 1px 0 #fff;
  }
}

/* ========================================================================== 
   IOS / WEBKIT — REVEAL FAIL-SAFE

   Sur Safari iOS, un retour BFCache, une rotation ou une reprise d'onglet peut
   laisser les callbacks IntersectionObserver en attente. Les blocs auxquels
   le JavaScript ajoute `.reveal` resteraient alors a opacity:0 sur le fond
   blanc du main, tandis que le chatbot (cycle de rendu separe) reste visible.

   Le contenu reste donc immediatement visible sur WebKit tactile sous 1024px.
   Seule l'animation d'entree est neutralisee : geometrie et desktop inchanges.
   ========================================================================== */
@media(max-width:1023px) and (hover:none) and (pointer:coarse){
  body.home-page .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* Les offres sont reconstruites une premiere fois avec le jeu local, puis
     une seconde fois quand jobs.php repond. Leur animation jobIn repartait a
     chaque reconstruction et pouvait faire reclignoter cartes et SVG pendant
     un scroll Safari. Sur tactile, le rendu final est affiche directement. */
  body.home-page .job-card--premium{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
}

/* FINAL QA HARDENING — mobile only: prevent iOS focus zoom and keep touch
   targets usable without changing desktop geometry. */
@media(max-width:767px){
  body.home-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#stb-input),
  body.home-page select,
  body.home-page textarea{
    font-size:16px;
  }
  body.home-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#stb-input),
  body.home-page select{
    min-height:45px;
  }
}

@media(max-width:1023px) and (hover:none) and (pointer:coarse){
  body.home-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(#stb-input),
  body.home-page select,
  body.home-page textarea{
    font-size:16px;
  }
}

@media(max-width:1023px){
  .nav-links a{
    min-height:45px;
    display:flex;
    align-items:center;
  }
}