:root{
  --navy-deep:#031B2D;
  --navy:#04253F;
  --navy-mid:#062A45;
  --navy-soft:#23415B;
  --steel:#60778A;
  --steel-light:#C9D2DA;
  --offwhite:#EBECEC;
  --white:#F8F8F8;
  --green:#1490EF;
  --green-dark:#0956B0;
  --green-soft:#DCE8F3;
  --ink:#062A45;
  --muted:#526B80;
  --line-light:#B2BBC3;
  --radius:22px;
  --shadow:0 22px 60px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--white);background:var(--navy);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.eyebrow{display:inline-flex;gap:.55rem;align-items:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:850;color:var(--green)}
.eyebrow:before{content:"";width:30px;height:2px;background:currentColor;border-radius:99px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:999px;font-weight:850;border:1px solid transparent;transition:.2s ease;cursor:pointer}
.btn-primary{background:var(--green);color:var(--navy-deep);box-shadow:0 12px 30px rgba(20,144,239,.24)}
.btn-primary:hover{transform:translateY(-1px);background:#48BDF3}
.btn-secondary{border-color:rgba(255,255,255,.35);color:var(--white);background:rgba(255,255,255,.06)}
.btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-light{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:var(--white)}
.btn-light:hover{border-color:var(--green);background:rgba(20,144,239,.10)}

.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:.25s;background:linear-gradient(to bottom,rgba(3,27,45,.98),rgba(3,27,45,.88) 76%,transparent);backdrop-filter:saturate(120%) blur(4px);transform:translateZ(0);will-change:transform;isolation:isolate}
.site-header.scrolled{background:rgba(8,13,23,.98);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;min-height:88px;align-items:center;justify-content:space-between;gap:22px}
.logo{display:flex;align-items:center;color:var(--white);font-weight:900;letter-spacing:.02em;background:transparent;border-radius:0;padding:0;box-shadow:none;flex:0 0 auto;max-width:min(42vw,340px)}
.brand-logo{width:330px;max-width:100%;height:auto;display:block;filter:drop-shadow(0 5px 16px rgba(0,0,0,.28))}
.site-header .brand-logo{filter:none}
.site-header .logo{overflow:hidden}
.footer .logo{display:inline-flex;background:transparent}
.footer .brand-logo{width:360px}
.nav-links{display:flex;align-items:center;gap:27px;color:#E2E9EF;font-weight:750;font-size:.93rem}
.nav-links a:hover{color:var(--green)}
.nav-toggle{display:none;border:0;background:none;color:var(--white);font-size:1.5rem}

.hero{position:relative;overflow:hidden;background:
radial-gradient(circle at 85% 15%,rgba(20,144,239,.16),transparent 34%),
radial-gradient(circle at 12% 70%,rgba(59,82,110,.30),transparent 38%),
linear-gradient(135deg,var(--navy-deep) 0%,var(--navy-mid) 58%,var(--navy) 100%);color:var(--white);padding:155px 0 88px;min-height:780px;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 85%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px}
.hero h1{font-size:clamp(2.8rem,6vw,5.4rem);line-height:.98;letter-spacing:-.055em;margin:16px 0 24px;max-width:820px;color:var(--white)}
.hero h1 span{color:var(--green)}
.hero-message{margin:0 0 16px;font-size:1.05rem;font-weight:750;letter-spacing:.01em;color:#DDE5EC}.hero-message strong{color:var(--white)}
.hero p{font-size:1.15rem;color:#D5DEE7;max-width:690px;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px 30px;color:#D5DEE7;font-size:.92rem;font-weight:650}.hero-meta span{display:flex;align-items:center;gap:9px}.dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(20,144,239,.18)}
.hero-card{position:relative;border-radius:30px;padding:28px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);box-shadow:0 36px 85px rgba(0,0,0,.32);backdrop-filter:blur(12px)}
.screen{background:var(--offwhite);border-radius:20px;padding:18px;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,29,48,.10)}
.screen-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.screen-title{font-size:.8rem;color:var(--steel);font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.status{font-size:.72rem;padding:5px 8px;border-radius:999px;background:var(--green);color:var(--navy-deep);font-weight:900}
.metric{padding:15px 0;border-top:1px solid var(--line-light);display:flex;align-items:center;gap:14px}.metric:first-of-type{border-top:0}.metric-icon{width:42px;height:42px;border-radius:13px;background:var(--green-soft);display:grid;place-items:center;font-size:1.15rem}.metric strong{display:block;font-size:.97rem;color:var(--ink)}.metric small{color:var(--muted)}
.floating-note{position:absolute;right:-24px;bottom:-28px;background:var(--white);color:var(--ink);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);font-size:.84rem;font-weight:850;display:flex;align-items:center;gap:10px}.pulse{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 7px rgba(20,144,239,.18)}

.section{padding:95px 0;background:var(--navy-mid);color:var(--white)}
.section-soft{background:var(--navy)}
#services{background:var(--navy-mid)}
#expertise{background:var(--navy)}
#methode{background:var(--navy-mid)}
#contact{background:var(--navy)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:42px}.section-head h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.08;letter-spacing:-.045em;margin:10px 0 0;max-width:740px;color:var(--white)}.section-head p{max-width:530px;color:var(--steel-light);margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:var(--offwhite);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px;box-shadow:0 12px 34px rgba(0,0,0,.16);transition:.22s;color:var(--ink)}.card:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(0,0,0,.24)}.card-icon{width:52px;height:52px;border-radius:16px;background:var(--green-soft);display:grid;place-items:center;font-size:1.35rem;margin-bottom:18px}.card h3{font-size:1.18rem;margin:0 0 10px;color:var(--ink)}.card p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.visual-panel{position:relative;background:linear-gradient(140deg,var(--navy-mid),var(--navy-soft));min-height:500px;border-radius:30px;overflow:hidden;padding:30px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.visual-panel:before,.visual-panel:after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}.visual-panel:before{width:300px;height:300px;right:-100px;top:-80px;background:rgba(20,144,239,.15)}.visual-panel:after{width:250px;height:250px;left:-90px;bottom:-100px;background:rgba(59,82,110,.24)}
.rack{position:absolute;inset:70px 65px 65px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:22px;backdrop-filter:blur(8px)}.rack-row{height:56px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:12px;margin:12px 0;display:flex;align-items:center;padding:0 14px;gap:10px}.rack-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}.rack-line{height:6px;border-radius:999px;background:rgba(255,255,255,.20);flex:1}.rack-line.short{flex:.35}.visual-label{position:absolute;left:34px;bottom:34px;color:var(--white);font-weight:850}.visual-label small{display:block;color:var(--steel-light);font-weight:600;margin-top:2px}
#expertise h2{color:var(--white)}
#expertise .split>div:last-child>p{color:var(--steel-light)!important}
.checklist{display:grid;gap:14px;margin:26px 0}.check{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}.check-badge{width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--navy-deep);display:grid;place-items:center;font-weight:950}.check p{margin:0;color:var(--steel-light)}.check strong{display:block;color:var(--white);margin-bottom:2px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{padding:25px 23px;border-top:3px solid var(--green);background:var(--navy-soft);border-radius:0 0 18px 18px;box-shadow:0 12px 30px rgba(0,0,0,.15)}.step-num{font-size:.75rem;color:var(--green);font-weight:900;letter-spacing:.12em}.step h3{margin:9px 0 7px;font-size:1.06rem;color:var(--white)}.step p{margin:0;color:var(--steel-light);font-size:.93rem}

.cta{background:linear-gradient(135deg,var(--navy-deep),var(--navy-soft));color:var(--white);border-radius:32px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:35px;box-shadow:var(--shadow);border:1px solid rgba(20,144,239,.24)}.cta h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 12px;max-width:700px;color:var(--white)}.cta p{margin:0;color:var(--steel-light);max-width:660px}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:34px}.contact-info{background:var(--navy-deep);color:var(--white);border-radius:25px;padding:32px;border:1px solid rgba(255,255,255,.08)}.contact-info h3{font-size:1.55rem;margin:0 0 12px;color:var(--white)}.contact-info p{color:var(--steel-light)}.contact-line{padding:17px 0;border-top:1px solid rgba(255,255,255,.10)}.contact-line strong{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--green);margin-bottom:5px}.form-card{border:1px solid rgba(255,255,255,.12);border-radius:25px;padding:32px;background:var(--offwhite);color:var(--ink);box-shadow:0 16px 40px rgba(0,0,0,.14)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:850;font-size:.87rem;color:var(--ink)}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line-light);border-radius:12px;padding:13px 14px;font:inherit;background:var(--white);color:var(--ink);outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(20,144,239,.18)}.field textarea{min-height:130px;resize:vertical}.hint{font-size:.8rem;color:var(--muted);margin-top:10px}.hint a{color:var(--green-dark)}.hidden{display:none!important}

.footer{background:var(--navy-deep);color:var(--steel-light);padding:52px 0 25px}.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px}.footer h4{color:var(--white);margin:0 0 12px}.footer a:hover{color:var(--green)}.footer-links{display:grid;gap:8px}.footer .logo{margin-bottom:15px}.legal-note{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:.78rem;color:#A8B6C3;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.page-hero{background:linear-gradient(135deg,var(--navy-deep),var(--navy-soft));color:var(--white);padding:145px 0 65px}.page-hero h1{font-size:clamp(2.4rem,5vw,4.2rem);margin:12px 0 0;letter-spacing:-.045em;color:var(--white)}.legal-content{padding:70px 0;background:var(--offwhite);color:var(--ink)}.legal-content article{max-width:900px}.legal-content h2{margin-top:34px;color:var(--ink)}.legal-content p,.legal-content li{color:var(--muted)}.legal-content a{color:var(--green-dark);text-decoration:underline}
.notice{padding:12px 14px;border-radius:12px;margin:0 0 16px;font-size:.9rem}.notice.ok{background:var(--green-soft);color:var(--navy-deep)}.notice.err{background:var(--steel-light);color:var(--navy-deep)}



/* V23 tweaks: blue accent, centered pro popup, improved anchor navigation */
html{scroll-padding-top:0}
section[id]{scroll-margin-top:14px}
.expertise-head{margin-bottom:28px}
.expertise-head .eyebrow{font-size:.82rem}

body.pro-gate-open{overflow:hidden}
.pro-gate{position:fixed;inset:0;z-index:120;background:rgba(8,13,23,.78);display:grid;place-items:center;padding:24px}
.pro-gate[hidden]{display:none !important}
.pro-gate-card{width:min(1120px,calc(100vw - 48px));background:#334554;color:#fff;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 90px rgba(0,0,0,.45)}
.pro-gate-head{padding:30px 32px 0}
.pro-gate-head h2,.pro-gate-head .pro-gate-title{margin:0;color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.02em}
.pro-gate-body{padding:22px 32px 30px}
.pro-gate-body p{margin:0 0 18px;color:#F4F7FA;font-size:1rem;line-height:1.55;max-width:980px}
.pro-gate-note{margin-top:20px !important;color:#D5DEE7 !important;font-size:.9rem !important;text-align:center}
.pro-gate-actions{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.pro-gate-btn{min-width:118px;padding:14px 28px;border-radius:0;font-size:1rem;font-weight:800;cursor:pointer;transition:.2s ease;font-family:inherit}
.pro-gate-btn.yes{background:#FFFFFF;color:#141D30;border:1px solid #FFFFFF}
.pro-gate-btn.yes:hover{transform:translateY(-1px);background:#F4F7FA}
.pro-gate-btn.no{background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.82)}
.pro-gate-btn.no:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}

@media(max-width:940px){
  .brand-logo{width:320px}
  .nav{min-height:84px}
  .nav-links{display:none;position:absolute;top:78px;left:20px;right:20px;background:var(--navy-deep);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .hero{padding-top:130px}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .hero-grid{gap:45px}
  .hero-card{max-width:620px}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .section-head{align-items:start;flex-direction:column}
  .cta{align-items:flex-start;flex-direction:column}
  .cta-actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  section[id]{scroll-margin-top:0}
  .expertise-head{margin-bottom:22px}
  .pro-gate-card{width:min(100%,calc(100vw - 28px))}
}
@media(max-width:620px){
  .brand-logo{width:260px}
  .logo{padding:0}
  .nav{min-height:76px}
  .container{width:min(100% - 26px,1160px)}
  .hero{min-height:auto;padding-bottom:70px}
  .hero h1{font-size:2.75rem}
  .hero-meta{display:grid;gap:10px}
  .floating-note{position:static;margin-top:14px}
  .cards,.steps,.form-grid,.footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
  .section{padding:72px 0}
  .visual-panel{min-height:410px}
  .rack{inset:55px 28px 70px}
  .cta{padding:32px 24px}
  .form-card,.contact-info{padding:24px}
  section[id]{scroll-margin-top:6px}
  .expertise-head{margin-bottom:18px}
  .pro-gate{padding:14px}
  .pro-gate-head{padding:22px 20px 0}
  .pro-gate-body{padding:18px 20px 24px}
  .pro-gate-body p{font-size:.96rem}
  .pro-gate-actions{gap:12px}
  .pro-gate-btn{min-width:104px;padding:13px 22px}
}

/* V24 — palette aligned to the business card */
:root{
  --card-navy:#04253F;
  --card-navy-deep:#031B2D;
  --card-navy-mid:#062A45;
  --card-slate:#23415B;
  --card-blue:#1490EF;
  --card-blue-dark:#0956B0;
  --card-blue-light:#48BDF3;
  --card-silver:#B2BBC3;
  --card-paper:#EBECEC;
}
.site-header{
  background:linear-gradient(to bottom,rgba(3,27,45,.98),rgba(3,27,45,.86) 72%,transparent);
}
.site-header.scrolled{background:rgba(3,27,45,.985)}
.hero{
  background:
    radial-gradient(circle at 88% 18%,rgba(20,144,239,.18),transparent 31%),
    radial-gradient(circle at 14% 72%,rgba(35,65,91,.36),transparent 38%),
    linear-gradient(135deg,#031B2D 0%,#04253F 55%,#062A45 100%);
}
.hero h1 span,.eyebrow,.nav-links a:hover,.contact-line strong,.step-num{
  color:var(--card-blue);
}
.btn-primary{
  background:var(--card-blue);
  color:#F8F8F8;
  box-shadow:0 12px 30px rgba(20,144,239,.23);
}
.btn-primary:hover{background:#1473D3}
.section,#services,#methode{background:#062A45}
.section-soft,#expertise,#contact{background:#04253F}
.card,.form-card,.screen{
  background:#EBECEC;
  border-color:#B2BBC3;
}
.card-icon,.metric-icon{
  background:#DCE8F3;
}
.step{
  background:#23415B;
  border-top-color:#1490EF;
}
.visual-panel{
  background:linear-gradient(140deg,#04253F,#23415B);
}
.cta,.page-hero{
  background:linear-gradient(135deg,#031B2D,#062A45);
}
.footer,.contact-info{background:#031B2D}
.pro-gate-card{
  background:linear-gradient(135deg,#23415B,#062A45);
  border-color:rgba(178,187,195,.35);
}
.pro-gate-btn.yes{
  background:#1490EF;
  color:#fff;
  border-color:#1490EF;
}
.pro-gate-btn.yes:hover{background:#1473D3}
.pro-gate-btn.no{
  border-color:#B2BBC3;
  color:#F8F8F8;
}


/* V26 header logo correction */
@media (max-width: 1100px){.brand-logo{width:280px}.nav{min-height:80px;gap:16px}}
@media (max-width: 820px){.brand-logo{width:220px}.nav{min-height:74px}.logo{max-width:62vw}}


/* V27 — application complète des ajustements proposés */
:root{
  --navy-deep:#02192C;
  --navy:#04233C;
  --navy-mid:#062845;
  --navy-soft:#1D3750;
  --steel:#617789;
  --steel-light:#D0D8DF;
  --offwhite:#E1E5E9;
  --white:#F7F9FB;
  --green:#1F8EE8;
  --green-dark:#0D66C2;
  --green-soft:#D8E5F2;
  --ink:#07263D;
  --muted:#5D6F7F;
  --line-light:#BBC4CC;
}

.site-header{
  background:linear-gradient(to bottom,rgba(2,25,44,.98),rgba(2,25,44,.90) 72%,transparent);
}
.site-header.scrolled{background:rgba(2,25,44,.985)}
.nav{min-height:88px;gap:24px}
.logo{max-width:min(49vw,405px)}
.brand-logo{
  width:390px;
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 7px 18px rgba(0,0,0,.30));
}

.hero{
  background:
    radial-gradient(circle at 86% 14%,rgba(31,142,232,.16),transparent 33%),
    radial-gradient(circle at 12% 74%,rgba(40,62,88,.34),transparent 38%),
    linear-gradient(135deg,#02192C 0%,#04233C 54%,#062845 100%);
}
.hero h1 span,
.eyebrow,
.nav-links a:hover,
.contact-line strong,
.step-num{color:#1F8EE8}
.hero-message{color:#E4ECF2}
.hero p{color:#D7E0E8}
.btn-primary{
  background:#2093F1;
  color:#F7F9FB;
  box-shadow:0 12px 30px rgba(32,147,241,.24);
}
.btn-primary:hover{background:#187DDA}
.btn-light:hover{border-color:#1F8EE8;background:rgba(31,142,232,.10)}
.dot,.pulse,.rack-dot{background:#1F8EE8}
.dot{box-shadow:0 0 0 5px rgba(31,142,232,.18)}
.pulse{box-shadow:0 0 0 7px rgba(31,142,232,.18)}

.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.screen,
.card,
.form-card{
  background:#E1E5E9;
  border-color:#BBC4CC;
  color:#07263D;
}
.screen{box-shadow:inset 0 0 0 1px rgba(20,29,48,.11)}
.screen-title{color:#6B7F90}
.metric{border-top:1px solid #BBC4CC}
.metric-icon,
.card-icon{background:#D8E5F2}
.metric strong,.card h3{color:#07263D}
.metric small,.card p,.field label,.hint,.field input,.field textarea,.field select{color:#5D6F7F}
.field input,.field textarea,.field select{background:#F8FAFB;border-color:#BBC4CC}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#0D66C2;box-shadow:0 0 0 3px rgba(31,142,232,.18)}
.status{
  background:#2093F1;
  color:#F7F9FB;
}
.floating-note{background:#F7F9FB;color:#07263D}

.section,#services,#methode{background:#052640}
.section-soft,#expertise,#contact{background:#04233C}
.visual-panel{background:linear-gradient(140deg,#052640,#1D3750)}
.cta,.page-hero{background:linear-gradient(135deg,#02192C,#052640)}
.contact-info,.footer{background:#02192C}
.step{background:#26415A;border-top-color:#1F8EE8}

@media (max-width: 1100px){
  .brand-logo{width:340px}
  .logo{max-width:50vw}
}
@media (max-width: 820px){
  .brand-logo{width:275px}
  .logo{max-width:63vw}
}
@media (max-width: 620px){
  .brand-logo{width:240px}
}


/* V28 — mise en page inspirée du visuel validé */
.hero{min-height:760px;padding:150px 0 72px}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:58px}
.hero h1{font-size:clamp(3rem,5.6vw,5.15rem);max-width:760px}
.hero p{max-width:720px}
.hero-actions{margin-bottom:28px}
.hero-benefits{gap:22px 32px}
.hero-benefits span{color:#E4ECF2;font-size:.9rem}
.benefit-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#1F8EE8;color:#fff;font-style:normal;font-weight:900;box-shadow:0 0 0 4px rgba(31,142,232,.12)}
.hero-card{padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.04))}
.hero-values{position:absolute;right:-2px;top:-58px;display:grid;gap:2px;color:#DCE7EF;text-transform:uppercase;font-size:.74rem;letter-spacing:.07em;font-weight:800}
.hero-values span{display:block}
.screen{background:linear-gradient(180deg,#EDF0F2,#DDE3E8)}

.service-band{background:linear-gradient(180deg,#031B2D,#052640);border-top:1px solid rgba(79,156,220,.34);border-bottom:1px solid rgba(79,156,220,.16);padding:28px 0 22px}
.service-band-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.service-band article{padding:10px 24px 14px;text-align:center;position:relative}
.service-band article:not(:last-child)::after{content:"";position:absolute;right:0;top:12px;bottom:12px;width:1px;background:rgba(203,219,232,.26)}
.service-band-icon{font-size:2rem;display:block;margin-bottom:10px;filter:grayscale(1) brightness(1.45)}
.service-band h3{margin:0 0 6px;color:#F5F8FA;text-transform:uppercase;font-size:.84rem;line-height:1.2;letter-spacing:.015em}
.service-band p{margin:0;color:#C8D4DE;font-size:.78rem;line-height:1.45}
.service-band-tagline{text-align:center;color:#7BBBF2;text-transform:uppercase;font-size:.68rem;letter-spacing:.22em;margin-top:16px}

@media(max-width:940px){
  .hero-values{position:static;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px;margin-top:16px}
  .service-band-grid{grid-template-columns:repeat(2,1fr)}
  .service-band article:nth-child(2n)::after{display:none}
}
@media(max-width:620px){
  .hero{padding-top:120px}
  .service-band-grid{grid-template-columns:1fr}
  .service-band article{padding:16px 8px}
  .service-band article::after{display:none!important}
  .service-band-tagline{padding:0 18px;line-height:1.5}
}


/* V29 — rapprochement du dernier visuel validé */
.site-header{
  background:rgba(3,27,45,.985);
  border-bottom:1px solid rgba(80,166,238,.22);
}
.nav{min-height:92px}
.brand-logo{width:360px}
.nav-links{gap:24px}
.nav-links .nav-home{color:#36A6FF}
.nav-links .nav-home::after{
  content:"";display:block;height:2px;background:#36A6FF;margin-top:8px;border-radius:2px
}

.hero-v29{
  min-height:585px;
  padding:118px 0 0;
  background:linear-gradient(90deg,#031B2D 0%,#062A45 43%,#0A3150 100%);
  overflow:hidden;
}
.hero-v29::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:58px 58px;
  pointer-events:none;
}
.hero-grid-v29{
  width:min(100%,1600px);
  max-width:none;
  padding-left:max(5vw,40px);
  padding-right:0;
  grid-template-columns:minmax(470px,.9fr) minmax(620px,1.15fr);
  gap:0;
  align-items:stretch;
}
.hero-copy-v29{
  position:relative;
  z-index:2;
  padding:62px 54px 46px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-copy-v29 h1{
  font-size:clamp(3.2rem,5.25vw,5.55rem);
  line-height:.99;
  letter-spacing:-.055em;
  margin:18px 0 22px;
  max-width:820px;
}
.hero-copy-v29 h1 span{color:#178FF1}
.hero-copy-v29>p{
  max-width:620px;
  font-size:1.1rem;
  line-height:1.62;
  color:#E0E7ED;
}
.hero-v29 .hero-actions{margin:5px 0 28px}
.hero-v29 .btn-primary{padding:1rem 1.5rem}
.hero-v29 .btn-secondary{padding:1rem 1.5rem}
.hero-v29 .hero-benefits{gap:18px 26px;margin-bottom:20px}
.hero-v29 .hero-benefits span{font-size:.88rem}
.hero-visual-v29{
  min-height:585px;
  position:relative;
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.06);
}
.hero-visual-v29::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(3,27,45,.32),rgba(3,27,45,0) 24%);
  pointer-events:none;
}
.hero-visual-v29 img{
  width:100%;
  height:100%;
  min-height:585px;
  object-fit:cover;
  object-position:center;
  display:block;
}
.service-band{padding-top:24px}
.service-band-grid{width:min(1500px,calc(100% - 48px))}
.service-band-tagline{margin-top:12px}

@media(max-width:1180px){
  .brand-logo{width:310px}
  .nav-links{gap:17px;font-size:.86rem}
  .hero-grid-v29{grid-template-columns:1fr 1fr;padding-left:34px}
  .hero-copy-v29{padding-right:34px}
}
@media(max-width:940px){
  .nav-links .nav-home::after{display:none}
  .hero-v29{padding-top:105px}
  .hero-grid-v29{
    grid-template-columns:1fr;
    padding:0;
  }
  .hero-copy-v29{
    padding:50px 28px 40px;
    width:min(100%,760px);
    margin:auto;
  }
  .hero-visual-v29{min-height:420px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .hero-visual-v29 img{min-height:420px}
}
@media(max-width:620px){
  .brand-logo{width:235px}
  .hero-copy-v29{padding:38px 20px 32px}
  .hero-copy-v29 h1{font-size:2.85rem}
  .hero-visual-v29{min-height:320px}
  .hero-visual-v29 img{min-height:320px}
}


/* V30 — accueil desktop fidèle au dernier visuel validé */
.desktop-visual-home{
  position:relative;
  width:100%;
  background:#031b2d;
  line-height:0;
  overflow:hidden;
}
.desktop-visual-home>img{
  width:100%;
  height:auto;
  display:block;
}
.desktop-visual-home .hotspot{
  position:absolute;
  display:block;
  z-index:4;
  background:transparent;
}
.hs-accueil{left:37.6%;top:3.0%;width:5.2%;height:7.2%}
.hs-services{left:43.4%;top:3.0%;width:5.4%;height:7.2%}
.hs-expertise{left:49.1%;top:3.0%;width:6.0%;height:7.2%}
.hs-methode{left:55.0%;top:3.0%;width:5.4%;height:7.2%}
.hs-apropos{left:60.9%;top:3.0%;width:5.8%;height:7.2%}
.hs-contact{left:67.1%;top:3.0%;width:5.3%;height:7.2%}
.hs-intervention{left:73.5%;top:2.1%;width:20.0%;height:7.7%}
.hs-besoin{left:5.2%;top:61.7%;width:19.2%;height:7.2%}
.hs-decouvrir{left:25.0%;top:61.7%;width:15.4%;height:7.2%}

.mobile-site-shell{display:none}
.desktop-content{display:block}
.desktop-content .section:first-child{scroll-margin-top:10px}

@media(max-width:940px){
  .desktop-visual-home{display:none}
  .mobile-site-shell{display:block}
  .desktop-content{display:block}
}


/* V31 — nuances de gris argenté inspirées de la carte de visite */
:root{
  --silver-white:#F7F9FB;
  --silver-50:#F1F4F7;
  --silver-100:#E8EDF1;
  --silver-150:#E1E7EC;
  --silver-200:#D4DCE3;
  --silver-300:#C1CBD4;
  --silver-400:#AAB6C1;
  --steel-blue:#7F92A4;
}

body{
  background:linear-gradient(180deg,#031B2D 0%,#062845 46%,#041F35 100%);
}

.section,#services,#methode{
  background:
    radial-gradient(circle at 84% 12%,rgba(193,203,212,.08),transparent 22%),
    linear-gradient(180deg,#062845 0%,#082E4D 100%);
}
.section-soft,#expertise,#contact{
  background:
    radial-gradient(circle at 16% 18%,rgba(193,203,212,.06),transparent 20%),
    linear-gradient(180deg,#04233C 0%,#052841 100%);
}

.section-head p,
.hero p,
.hero-message,
.check p,
.contact-info p,
.service-band p,
.step p{
  color:#D9E2E9;
}

.card,
.form-card,
.screen{
  background:linear-gradient(180deg,var(--silver-white) 0%,var(--silver-100) 52%,var(--silver-150) 100%);
  border:1px solid rgba(170,182,193,.7);
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(170,182,193,.28);
}
.screen{
  background:linear-gradient(180deg,#F7F9FB 0%,#EAEFF3 50%,#DEE5EA 100%);
}
.card:hover,
.form-card:hover{
  box-shadow:
    0 24px 56px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(170,182,193,.3);
}

.card h3,
.metric strong,
.field label,
.form-card h3,
.screen-title{
  color:#102A44;
}
.card p,
.metric small,
.hint,
.field input,
.field textarea,
.field select{
  color:#5D7284;
}

.metric,
.contact-line,
.legal-note,
.service-band article:not(:last-child)::after{
  border-color:rgba(161,176,189,.42);
}
.metric{border-top:1px solid rgba(161,176,189,.62)}

.card-icon,
.metric-icon{
  background:linear-gradient(180deg,#E7EEF4 0%,#D3DDE6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.floating-note{
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF2F5 100%);
  border:1px solid rgba(170,182,193,.5);
  color:#102A44;
}

.btn-secondary,
.btn-light{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(185,197,207,.05));
  border-color:rgba(193,203,212,.38);
  color:#F5F8FA;
}
.btn-secondary:hover,
.btn-light:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(193,203,212,.08));
}

.visual-panel{
  background:
    linear-gradient(155deg,#0A3150 0%,#1F3E59 58%,#2B4A66 100%);
  border:1px solid rgba(193,203,212,.22);
}
.rack{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(220,229,236,.08));
  border:1px solid rgba(193,203,212,.22);
}
.rack-row{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(193,203,212,.06));
  border:1px solid rgba(193,203,212,.12);
}
.rack-line{background:rgba(235,240,244,.28)}
.visual-label small{color:#D7E0E8}

.step{
  background:linear-gradient(180deg,#35526E 0%,#29445D 100%);
  border-top-color:#1F8EE8;
  border-left:1px solid rgba(193,203,212,.10);
  border-right:1px solid rgba(193,203,212,.08);
  border-bottom:1px solid rgba(193,203,212,.08);
}
.step h3{color:#F7FAFC}

.service-band{
  background:
    linear-gradient(180deg,#041F35 0%,#09304F 100%);
  border-top:1px solid rgba(193,203,212,.18);
  border-bottom:1px solid rgba(193,203,212,.12);
}
.service-band h3{color:#F6F9FB}
.service-band p{color:#D0DBE4}
.service-band-icon{filter:grayscale(1) brightness(1.7)}

.contact-info{
  background:linear-gradient(180deg,#041D33 0%,#082A45 100%);
  border:1px solid rgba(193,203,212,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.form-card{
  background:linear-gradient(180deg,#F7F9FB 0%,#E9EEF2 55%,#DDE4E9 100%);
}
.field input,.field textarea,.field select{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F4F7 100%);
  border-color:rgba(170,182,193,.75);
}

.cta,.page-hero{
  background:linear-gradient(135deg,#031B2D 0%,#0B2E4C 55%,#214560 100%);
  border:1px solid rgba(193,203,212,.14);
}

.footer{
  background:linear-gradient(180deg,#031B2D 0%,#041C30 100%);
  border-top:1px solid rgba(193,203,212,.10);
}
.footer h4{color:#F7F9FB}
.footer,.legal-note{color:#BCC8D2}

.pro-gate-card{
  background:linear-gradient(145deg,#34475A 0%,#294154 100%);
  border:1px solid rgba(193,203,212,.22);
  box-shadow:0 34px 92px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
.pro-gate-note{color:#D7E1E9 !important}

.notice.ok{
  background:linear-gradient(180deg,#EAF1F6 0%,#DDE7EE 100%);
  color:#10304C;
}
.notice.err{
  background:linear-gradient(180deg,#E9EDF1 0%,#DCE3E9 100%);
  color:#102A44;
}


/* V32 — accueil sobre premium validé */
.premium-v32{
  background:#02182a;
}
.premium-v32>img{
  width:100%;
  height:auto;
  display:block;
}
.premium-v32 .hotspot{
  position:absolute;
  z-index:5;
  display:block;
  background:transparent;
}

/* Navigation du visuel premium */
.hs32-accueil{left:37.2%;top:3.2%;width:4.8%;height:7.1%}
.hs32-services{left:42.3%;top:3.2%;width:6.0%;height:7.1%}
.hs32-expertise{left:49.2%;top:3.2%;width:7.4%;height:7.1%}
.hs32-methode{left:57.4%;top:3.2%;width:5.3%;height:7.1%}
.hs32-apropos{left:63.0%;top:3.2%;width:5.3%;height:7.1%}
.hs32-contact{left:68.5%;top:3.2%;width:5.0%;height:7.1%}
.hs32-intervention{left:74.8%;top:2.4%;width:19.5%;height:8.0%}

/* CTA du hero */
.hs32-besoin{left:5.0%;top:71.7%;width:20.2%;height:8.5%}
.hs32-decouvrir{left:25.3%;top:71.7%;width:16.2%;height:8.5%}

/* Bloc services premium */
.hs32-card{left:53.0%;top:40.7%;width:37.4%;height:44.8%}

/* Transition premium entre l'accueil et le reste du site */
.desktop-content{
  background:linear-gradient(180deg,#041d32 0%,#062845 30%,#041f35 100%);
}
.desktop-content::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(193,203,212,.35),transparent);
}


/* V33 — header desktop fixe, textes HTML nets, bouton net */
.desktop-premium-v33{
  display:block;
  background:#02182a;
}

.premium-header-v33{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:108px;
  background:rgba(3,24,42,.985);
  border-bottom:1px solid rgba(192,204,214,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  isolation:isolate;
}

.premium-header-inner{
  width:min(1540px,calc(100% - 64px));
  height:100%;
  margin:auto;
  display:grid;
  grid-template-columns:370px 1fr auto;
  align-items:center;
  gap:28px;
}

.premium-logo-v33{
  display:flex;
  align-items:center;
  min-width:0;
  overflow:hidden;
}
.premium-logo-v33 img{
  width:350px;
  height:auto;
  max-height:92px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

.premium-nav-v33{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  white-space:nowrap;
  font-size:.95rem;
  font-weight:760;
  color:#F1F5F8;
}
.premium-nav-v33 a{
  position:relative;
  padding:12px 0;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
}
.premium-nav-v33 a:hover,
.premium-nav-v33 a.active{
  color:#37A7FF;
}
.premium-nav-v33 a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:2px;
  background:#37A7FF;
  border-radius:999px;
}

.premium-intervention-v33{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 24px;
  border-radius:999px;
  background:linear-gradient(180deg,#9AA6B4 0%,#79889A 100%);
  border:1px solid rgba(255,255,255,.18);
  color:#ffffff;
  font-size:.95rem;
  font-weight:850;
  white-space:nowrap;
  box-shadow:
    0 10px 24px rgba(9,19,30,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-font-smoothing:antialiased;
}
.premium-intervention-v33:hover{
  background:linear-gradient(180deg,#A8B4C0 0%,#8393A5 100%);
  transform:translateY(-1px);
}

.premium-hero-image-v33{
  position:relative;
  padding-top:108px;
  line-height:0;
  overflow:hidden;
  background:#02182a;
}
.premium-hero-image-v33>img{
  width:100%;
  height:auto;
  display:block;
  image-rendering:auto;
}

.premium-hero-image-v33 .hotspot{
  position:absolute;
  z-index:4;
  display:block;
  background:transparent;
}
.hs33-besoin{left:4.6%;top:64.9%;width:21.8%;height:7.2%}
.hs33-decouvrir{left:27.1%;top:64.9%;width:17.3%;height:7.2%}
.hs33-card{left:53.8%;top:30.2%;width:36.6%;height:61.0%}

/* En desktop, on remplace l'ancien header raster par le header HTML ci-dessus. */
@media(min-width:941px){
  .mobile-site-shell{display:none!important}
  .desktop-premium-v33{display:block}
  .desktop-content{display:block}
  html{scroll-padding-top:108px}
  #services,#expertise,#methode,#contact{scroll-margin-top:108px}
}

/* Tablette : réduire proprement le header avant de basculer sur le responsive mobile. */
@media(min-width:941px) and (max-width:1250px){
  .premium-header-inner{
    width:min(100% - 34px,1200px);
    grid-template-columns:285px 1fr auto;
    gap:16px;
  }
  .premium-logo-v33 img{width:275px}
  .premium-nav-v33{gap:16px;font-size:.86rem}
  .premium-intervention-v33{padding:13px 18px;font-size:.86rem}
}

@media(max-width:940px){
  .desktop-premium-v33{display:none!important}
  .mobile-site-shell{display:block!important}
}


/* V34 — état actif navigation */
.nav-links a.active{color:#37A7FF!important}
.premium-nav-v33 a.active{color:#37A7FF!important}


/* V35 — gris premium métallisé + header compact + hover élégant */
.premium-header-v33{
  height:94px;
  background:linear-gradient(180deg,rgba(3,24,42,.995) 0%,rgba(4,30,50,.985) 100%);
  border-bottom:1px solid rgba(199,208,217,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.premium-header-inner{
  width:min(1500px,calc(100% - 56px));
  grid-template-columns:345px 1fr auto;
  gap:24px;
}
.premium-logo-v33 img{
  width:330px;
  max-height:80px;
}
.premium-nav-v33{
  gap:26px;
  font-size:.93rem;
}
.premium-nav-v33 a{
  color:#E7EDF2;
  padding:10px 0;
  transition:color .2s ease, transform .2s ease;
}
.premium-nav-v33 a::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#9AA8B6,#DCE3E9,#8C9AA8);
  transform:translateX(-50%);
  transition:width .22s ease;
  opacity:.9;
}
.premium-nav-v33 a:hover{
  color:#FFFFFF;
  transform:translateY(-1px);
}
.premium-nav-v33 a:hover::before{
  width:100%;
}
.premium-nav-v33 a.active{
  color:#F7FAFC!important;
}
.premium-nav-v33 a.active::after{
  background:linear-gradient(90deg,#B6C2CD,#F4F7F9,#9AA8B6);
  bottom:2px;
}

.premium-intervention-v33{
  padding:13px 22px;
  border-radius:999px;
  background:
    linear-gradient(180deg,#AEB8C2 0%,#8F9BA8 48%,#788694 100%);
  border:1px solid rgba(245,248,250,.32);
  color:#FFFFFF;
  font-size:.92rem;
  box-shadow:
    0 8px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(45,59,72,.22);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.premium-intervention-v33:hover{
  background:
    linear-gradient(180deg,#C1C9D1 0%,#A3AFBA 48%,#8B99A7 100%);
  transform:translateY(-2px);
  box-shadow:
    0 13px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(45,59,72,.20);
}
.premium-intervention-v33:active{
  transform:translateY(0);
  filter:brightness(.97);
}

.premium-hero-image-v33{
  padding-top:94px;
}

/* gris argenté premium cohérent avec la carte de visite */
.card,.form-card,.screen{
  background:linear-gradient(160deg,#F7F9FA 0%,#E9EDF0 48%,#D6DDE3 100%);
  border:1px solid rgba(172,184,194,.62);
  box-shadow:
    0 16px 38px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(115,130,143,.12);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 24px 50px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(115,130,143,.14);
}
.card-icon,.metric-icon{
  background:linear-gradient(145deg,#EFF3F6 0%,#D8E0E6 100%);
  border:1px solid rgba(157,171,183,.22);
}
.step{
  background:linear-gradient(180deg,#3B556C 0%,#2C455B 100%);
  border-left:1px solid rgba(202,211,219,.12);
  border-right:1px solid rgba(202,211,219,.08);
  border-bottom:1px solid rgba(202,211,219,.08);
}

@media(min-width:941px){
  html{scroll-padding-top:94px}
  #services,#expertise,#methode,#contact{scroll-margin-top:94px}
}
@media(min-width:941px) and (max-width:1250px){
  .premium-header-inner{grid-template-columns:270px 1fr auto;gap:14px}
  .premium-logo-v33 img{width:260px}
  .premium-nav-v33{gap:14px;font-size:.84rem}
  .premium-intervention-v33{padding:12px 17px;font-size:.84rem}
}


/* V36 — boutons harmonisés en gris premium + logo footer identique au header */
:root{
  --premium-silver-1:#C6D0D8;
  --premium-silver-2:#AAB5C0;
  --premium-silver-3:#8A97A5;
  --premium-silver-4:#6E7C8B;
  --premium-silver-glow:rgba(164,176,189,.24);
}
.btn{
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.btn-primary,
.mobile-site-shell .btn-primary,
button.btn-primary,
input.btn-primary{
  background:linear-gradient(180deg,var(--premium-silver-2) 0%,var(--premium-silver-3) 48%,var(--premium-silver-4) 100%);
  border:1px solid rgba(245,248,250,.30);
  color:#FFFFFF;
  box-shadow:0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(45,59,72,.18);
}
.btn-primary:hover,
.mobile-site-shell .btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#D4DCE3 0%,#B7C2CC 48%,#96A3B0 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(45,59,72,.16);
  color:#FFFFFF;
}
.btn-secondary,
.mobile-site-shell .btn-secondary{
  background:linear-gradient(180deg,rgba(174,184,194,.16) 0%,rgba(143,155,168,.12) 100%);
  border:1px solid rgba(198,208,216,.55);
  color:#F4F7FA;
  box-shadow:0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-secondary:hover,
.mobile-site-shell .btn-secondary:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(198,208,216,.24) 0%,rgba(159,171,183,.16) 100%);
  border-color:rgba(223,230,236,.76);
  color:#FFFFFF;
}
.btn-light{
  border-color:rgba(198,208,216,.52);
  background:linear-gradient(180deg,rgba(174,184,194,.14) 0%,rgba(143,155,168,.10) 100%);
  color:#F4F7FA;
}
.btn-light:hover{
  border-color:rgba(223,230,236,.72);
  background:linear-gradient(180deg,rgba(198,208,216,.22) 0%,rgba(159,171,183,.14) 100%);
}
.pro-gate-btn.yes{
  background:linear-gradient(180deg,var(--premium-silver-2) 0%,var(--premium-silver-3) 48%,var(--premium-silver-4) 100%);
  color:#fff;
  border:1px solid rgba(245,248,250,.30);
}
.pro-gate-btn.yes:hover{background:linear-gradient(180deg,#D4DCE3 0%,#B7C2CC 48%,#96A3B0 100%)}
.footer-logo-premium .brand-logo,
.footer .brand-logo{
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.24));
}
.footer .footer-logo-premium{max-width:min(49vw,405px)}


/* V37 — version encore plus premium / sobre */
:root{
  --navy-deep:#03101C;
  --navy:#071A2B;
  --navy-mid:#0A2135;
  --navy-soft:#1E3448;
  --steel:#7D90A1;
  --steel-light:#D4DDE5;
  --offwhite:#EEF2F5;
  --white:#FAFBFC;
  --green:#3B95E6;
  --green-dark:#2B6FAF;
  --green-soft:#E4EBF1;
  --ink:#0B2235;
  --muted:#607485;
  --line-light:#BEC8D1;
  --shadow:0 22px 60px rgba(0,0,0,.26);
  --premium-silver-1:#D0D6DC;
  --premium-silver-2:#A3AFBA;
  --premium-silver-3:#808D9A;
  --premium-silver-4:#606D7B;
}
body{
  background:linear-gradient(180deg,#051322 0%,#081B2D 100%);
  color:var(--white);
}
.hero{
  background:
  radial-gradient(circle at 82% 16%,rgba(59,149,230,.10),transparent 32%),
  radial-gradient(circle at 10% 72%,rgba(96,109,123,.18),transparent 38%),
  linear-gradient(135deg,#03101C 0%,#082036 56%,#0A2741 100%);
}
.hero:before{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
}
.hero-message{color:#D7E0E8}
.hero p,.hero-meta,.section-head p,.check p,.step p,.contact-info p,.cta p{color:#CFD8E1}
.hero h1 span{
  color:#2E96F0;
  text-shadow:0 8px 24px rgba(46,150,240,.10);
}
.dot,.pulse{background:#4B9BE2}
.dot{box-shadow:0 0 0 5px rgba(75,155,226,.14)}
.pulse{box-shadow:0 0 0 7px rgba(75,155,226,.14)}

.site-header,
.premium-header-v33{
  background:linear-gradient(180deg,rgba(3,17,28,.995) 0%,rgba(5,20,33,.985) 100%);
  border-bottom:1px solid rgba(204,214,223,.14);
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.site-header.scrolled{background:rgba(4,18,30,.985);border-bottom:1px solid rgba(204,214,223,.12)}
.nav-links a,.premium-nav-v33 a{color:#E8EEF3}
.nav-links a:hover,.premium-nav-v33 a:hover{color:#FFFFFF}
.premium-nav-v33 a::before{
  background:linear-gradient(90deg,rgba(181,191,201,.92),rgba(238,243,247,.98),rgba(160,172,184,.92));
  height:2px;
}
.premium-nav-v33 a.active{color:#FFFFFF!important}
.premium-nav-v33 a.active::after{background:linear-gradient(90deg,#B8C4CF,#F4F7FA,#A2B0BC)}

.premium-intervention-v33,
.btn-primary,
.mobile-site-shell .btn-primary,
button.btn-primary,
input.btn-primary,
.pro-gate-btn.yes{
  background:linear-gradient(180deg,#9BA8B4 0%,#7F8C99 52%,#616D7B 100%);
  border:1px solid rgba(246,249,251,.24);
  color:#FFFFFF;
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(33,45,57,.18);
}
.premium-intervention-v33:hover,
.btn-primary:hover,
.mobile-site-shell .btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.pro-gate-btn.yes:hover{
  background:linear-gradient(180deg,#A8B4BE 0%,#8A97A4 52%,#6B7886 100%);
  color:#FFFFFF;
  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(33,45,57,.16);
}
.btn-secondary,
.mobile-site-shell .btn-secondary,
.btn-light{
  background:linear-gradient(180deg,rgba(167,178,188,.10) 0%,rgba(117,129,142,.08) 100%);
  border:1px solid rgba(196,206,214,.36);
  color:#F3F6F8;
  box-shadow:0 6px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-secondary:hover,
.mobile-site-shell .btn-secondary:hover,
.btn-light:hover{
  background:linear-gradient(180deg,rgba(188,198,206,.16) 0%,rgba(136,148,160,.12) 100%);
  border-color:rgba(224,230,235,.58);
  color:#FFFFFF;
}

.card,.form-card,.screen{
  background:linear-gradient(160deg,#F8FAFB 0%,#EEF2F5 50%,#DEE5EA 100%);
  border:1px solid rgba(183,194,203,.66);
  box-shadow:
    0 16px 36px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(112,127,140,.14);
}
.card:hover{
  box-shadow:
    0 22px 46px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(112,127,140,.16);
}
.card-icon,.metric-icon{
  background:linear-gradient(145deg,#F2F5F7 0%,#DCE3E8 100%);
  border:1px solid rgba(166,178,190,.24);
}
.hero-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(210,220,228,.12);
  box-shadow:0 28px 72px rgba(0,0,0,.30);
}
.floating-note{
  background:linear-gradient(160deg,#F8FAFB 0%,#EFF3F5 100%);
  box-shadow:0 16px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.90);
}
.step{
  background:linear-gradient(180deg,#31485D 0%,#253B4E 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.status{
  background:linear-gradient(180deg,#63AFFF 0%,#2E96F0 100%);
  color:#FFFFFF;
  box-shadow:0 8px 20px rgba(46,150,240,.18);
}
.cta{
  background:linear-gradient(135deg,#051525 0%,#10283C 100%);
  border:1px solid rgba(183,194,203,.18);
}
.contact-info{background:linear-gradient(180deg,#081929 0%,#0D2235 100%)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#3B95E6;
  box-shadow:0 0 0 3px rgba(59,149,230,.14);
}
.footer{
  background:linear-gradient(180deg,#03101C 0%,#051525 100%);
}
.footer h4,.cta h2,#expertise h2,.section-head h2{color:#FFFFFF}
.footer a:hover,.contact-line strong,.eyebrow,.step-num{color:#4DA4ED}

/* ensemble plus discret sur mobile également */
@media(max-width:940px){
  .nav-links{background:rgba(5,19,31,.98)}
}


/* V38 — second bouton bleu + section A propos depuis CV */
.btn-secondary-blue{
  background:linear-gradient(180deg,#3DA4F7 0%,#2F8FF0 52%,#2375D9 100%);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;
  box-shadow:0 12px 28px rgba(35,117,217,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-secondary-blue:hover{
  background:linear-gradient(180deg,#4AAEF9 0%,#3697F3 52%,#2A7FE3 100%);
  border-color:rgba(255,255,255,.20);
  color:#FFFFFF;
  transform:translateY(-1px);
}
.section-about{
  background:linear-gradient(180deg,#071A2B 0%,#0B2337 100%);
}
.about-grid,
.about-columns{
  display:grid;
  gap:24px;
}
.about-grid{
  grid-template-columns:1.45fr .85fr;
  margin-top:14px;
  margin-bottom:24px;
}
.about-columns{
  grid-template-columns:1fr 1fr;
}
.about-card{
  background:linear-gradient(160deg,#F8FAFB 0%,#EEF3F6 58%,#DEE7ED 100%);
  border:1px solid rgba(184,194,203,.68);
  border-radius:28px;
  padding:28px;
  box-shadow:0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.94);
  color:#10273A;
}
.about-profile h3,
.about-card strong,
.about-card h3{
  color:#0C2133;
}
.about-card p{
  color:#516779;
}
.about-kicker{
  display:inline-block;
  margin-bottom:12px;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#318EEA;
}
.about-highlights,
.about-skills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.about-highlights{margin-top:18px}
.about-highlights span,
.about-skills span{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF 0%,#E8EEF3 100%);
  border:1px solid rgba(177,188,198,.58);
  color:#14324B;
  font-weight:600;
}
.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:22px;
}
.about-stats{
  display:grid;
  gap:14px;
  align-content:start;
}
.about-stat{
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg,#FFFFFF 0%,#E9EFF4 100%);
  border:1px solid rgba(177,188,198,.54);
}
.about-stat strong{
  display:block;
  font-size:1rem;
  margin-bottom:4px;
}
.about-stat span{
  color:#516779;
  line-height:1.45;
}
.about-timeline{
  display:grid;
  gap:16px;
}
.about-item{
  position:relative;
  padding-left:18px;
  border-left:2px solid rgba(49,142,234,.30);
}
.about-item:before{
  content:"";
  position:absolute;
  left:-6px;
  top:5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#318EEA;
  box-shadow:0 0 0 4px rgba(49,142,234,.12);
}
.about-item strong{
  display:block;
  margin-bottom:6px;
}
@media (max-width: 980px){
  .about-grid,.about-columns{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .about-card{padding:22px;border-radius:22px}
  .about-actions .btn{width:100%;justify-content:center}
}


/* V40 — bouton hero gris + A propos condensé depuis le parcours */
/* Le bouton bleu est intégré à l'image desktop : cette couche HTML opaque le recouvre proprement. */
.premium-hero-image-v33 .hs33-besoin{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  background:linear-gradient(180deg,#A9B4BE 0%,#8995A1 50%,#697583 100%);
  border:1px solid rgba(246,249,251,.34);
  color:#FFFFFF;
  border-radius:999px;
  font-size:clamp(.82rem,1.08vw,1.06rem);
  font-weight:850;
  line-height:1;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(33,45,57,.18);
  text-decoration:none;
  overflow:hidden;
  white-space:nowrap;
  backdrop-filter:none;
}
.premium-hero-image-v33 .hs33-besoin::before{content:"🔧";font-size:1.08em}
.premium-hero-image-v33 .hs33-besoin::after{content:"Parler de votre besoin  →"}
.premium-hero-image-v33 .hs33-besoin:hover{
  background:linear-gradient(180deg,#A8B4BE 0%,#8A97A4 52%,#6B7886 100%);
  transform:translateY(-1px);
}

.section-about{
  background:linear-gradient(180deg,#071A2B 0%,#091F32 100%);
}
.about-head-compact{margin-bottom:28px}
.about-summary-v40{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:stretch;
}
.about-intro-v40{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-intro-v40>p{
  font-size:1rem;
  line-height:1.72;
  margin:0 0 15px;
}
.about-brands-v41{
  padding-top:14px;
  margin-top:3px!important;
  border-top:1px solid rgba(127,140,153,.24);
  color:#D9E3EB;
}
.about-brands-v41 strong{
  color:#FFFFFF;
}
.about-pillars-v40{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.about-pillar-v40{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:15px;
  align-items:start;
  padding:18px 20px;
  border-radius:20px;
  background:linear-gradient(160deg,#F7F9FA 0%,#E8EDF1 100%);
  border:1px solid rgba(181,192,201,.60);
  box-shadow:0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.90);
}
.about-pillar-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#9BA8B4 0%,#788695 100%);
  color:#FFFFFF;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
}
.about-pillar-v40 h3{
  margin:1px 0 5px;
  color:#10273A;
  font-size:1rem;
}
.about-pillar-v40 p{
  margin:0;
  color:#586E80;
  font-size:.9rem;
  line-height:1.55;
}
@media(max-width:980px){
  .about-summary-v40{grid-template-columns:1fr}
}
@media(max-width:620px){
  .about-pillar-v40{grid-template-columns:40px 1fr;padding:16px}
  .about-pillar-icon{width:36px;height:36px}
}


/* V42 — harmonisation premium finale */
:root{
  --v42-silver-top:#A8B2BC;
  --v42-silver-mid:#87929E;
  --v42-silver-bottom:#697582;
  --v42-silver-border:rgba(240,244,247,.30);
}
.premium-intervention-v33,
.btn-primary,
.mobile-site-shell .btn-primary,
button.btn-primary,
input.btn-primary,
.pro-gate-btn.yes,
.premium-hero-image-v33 .hs33-besoin{
  background:linear-gradient(180deg,var(--v42-silver-top) 0%,var(--v42-silver-mid) 52%,var(--v42-silver-bottom) 100%)!important;
  border:1px solid var(--v42-silver-border)!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(28,39,50,.18)!important;
}
.premium-intervention-v33:hover,
.btn-primary:hover,
.mobile-site-shell .btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.pro-gate-btn.yes:hover,
.premium-hero-image-v33 .hs33-besoin:hover{
  background:linear-gradient(180deg,#B6C0C9 0%,#959FA9 52%,#74808C 100%)!important;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.premium-hero-image-v33 .hs33-besoin{
  left:4.25%!important;
  top:67.7%!important;
  width:22.9%!important;
  height:11.0%!important;
  z-index:9!important;
}
.btn-secondary,
.mobile-site-shell .btn-secondary,
.btn-light{
  border-color:rgba(194,204,213,.42)!important;
  background:linear-gradient(180deg,rgba(170,181,191,.12),rgba(115,127,140,.08))!important;
  box-shadow:0 6px 14px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.card,.form-card,.screen,.about-card,.about-pillar-v40{
  box-shadow:0 14px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.about-brands-v41{
  background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(232,238,243,.72));
  border:1px solid rgba(176,188,198,.42);
  border-radius:18px;
  padding:15px 17px!important;
  margin-top:8px!important;
  color:#435C70!important;
}
.about-brands-v41 strong{color:#173149!important}
.about-pillar-icon{
  background:linear-gradient(180deg,#A3AEB8,#7C8996)!important;
}


/* V43 — bouton hero propre, sans bouton bleu raster en dessous */
.hs33-besoin{
  left:5.15%!important;
  top:69.15%!important;
  width:19.75%!important;
  height:8.25%!important;
}
.premium-hero-image-v33 .hs33-besoin{
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.55rem!important;
  padding:0 1.1rem!important;
  background:linear-gradient(180deg,#A6B1BB 0%,#88949F 52%,#687582 100%)!important;
  border:1px solid rgba(247,249,251,.36)!important;
  border-radius:999px!important;
  color:#FFFFFF!important;
  font-size:clamp(.78rem,1.02vw,1rem)!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(31,43,54,.18)!important;
  transform:none!important;
}
.premium-hero-image-v33 .hs33-besoin::before{content:"🔧"!important;font-size:1.02em!important}
.premium-hero-image-v33 .hs33-besoin::after{content:"Parler de votre besoin  →"!important}
.premium-hero-image-v33 .hs33-besoin:hover{
  background:linear-gradient(180deg,#B4BEC7 0%,#96A2AD 52%,#74818E 100%)!important;
  box-shadow:0 13px 28px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.34)!important;
  transform:translateY(-1px)!important;
}


/* V44 — bouton placé dans l'espace libre + logo header agrandi */
@media(min-width:941px){

  .premium-header-v33{
    height:116px!important;
  }

  .premium-header-inner{
    width:min(1600px,calc(100% - 54px))!important;
    grid-template-columns:500px 1fr auto!important;
    gap:24px!important;
  }

  .premium-logo-v33 img{
    width:470px!important;
    max-height:104px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .premium-nav-v33{
    gap:24px!important;
    font-size:.92rem!important;
  }

  .premium-intervention-v33{
    padding:13px 22px!important;
    font-size:.91rem!important;
  }

  .premium-hero-image-v33{
    padding-top:116px!important;
    position:relative!important;
  }

  .premium-hero-stage-v44{
    position:relative!important;
    width:100%!important;
    line-height:0!important;
    overflow:hidden!important;
    background:#031522!important;
  }

  .premium-hero-stage-v44 > img{
    display:block!important;
    width:100%!important;
    height:auto!important;
  }

  .premium-hero-stage-v44 .hotspot{
    position:absolute!important;
    z-index:8!important;
  }

  /* V45 — nouvelle photo hero : les deux boutons sont désormais intégrés à l'image,
     donc les deux hotspots redeviennent de simples zones cliquables invisibles. */
  .premium-hero-stage-v44 .hs33-besoin{
    left:4.66%!important;
    top:73.5%!important;
    width:18.66%!important;
    height:6.86%!important;
    display:block!important;
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:0!important;
    gap:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  .premium-hero-stage-v44 .hs33-besoin::before,
  .premium-hero-stage-v44 .hs33-besoin::after{
    content:none!important;
  }

  .premium-hero-stage-v44 .hs33-besoin:hover{
    background:transparent!important;
    transform:none!important;
    box-shadow:none!important;
  }

  .premium-hero-stage-v44 .hs33-decouvrir{
    left:25.1%!important;
    top:73.5%!important;
    width:15.55%!important;
    height:6.86%!important;
  }

  .premium-hero-stage-v44 .hs33-card{
    left:57.0%!important;
    top:29.4%!important;
    width:43.0%!important;
    height:62.9%!important;
  }

  html{scroll-padding-top:116px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:116px!important}
}

/* Réduction progressive sur écrans intermédiaires (étendu à 1450px : à 1350px,
   des résolutions très courantes comme 1366×768 gardaient la taille "grand écran"
   et le bouton d'en-tête débordait hors de l'écran, invisible car coupé). */
@media(min-width:941px) and (max-width:1450px){
  .premium-header-v33{height:106px!important}
  .premium-header-inner{
    grid-template-columns:390px 1fr auto!important;
    gap:15px!important;
  }
  .premium-logo-v33 img{
    width:375px!important;
    max-height:94px!important;
  }
  .premium-nav-v33{
    gap:14px!important;
    font-size:.82rem!important;
  }
  .premium-intervention-v33{
    padding:11px 16px!important;
    font-size:.82rem!important;
  }
  .premium-hero-image-v33{padding-top:106px!important}
  html{scroll-padding-top:106px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:106px!important}
}


/* V66 — nouveau hero sans header rasterisé.
   Les boutons sont intégrés à l'image : hotspots transparents uniquement. */
@media (min-width:941px){
  .premium-hero-stage-v44::before{
    content:none!important;
    display:none!important;
  }

  .premium-hero-stage-v44 .hs33-besoin,
  .premium-hero-stage-v44 .hs33-decouvrir{
    display:block!important;
    position:absolute!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
    overflow:hidden!important;
    z-index:10!important;
  }

  .premium-hero-stage-v44 .hs33-besoin::before,
  .premium-hero-stage-v44 .hs33-besoin::after,
  .premium-hero-stage-v44 .hs33-decouvrir::before,
  .premium-hero-stage-v44 .hs33-decouvrir::after{
    content:none!important;
    display:none!important;
  }

  /* Bouton "Parlez-nous de votre besoin" intégré au visuel */
  .premium-hero-stage-v44 .hs33-besoin{
    left:4.2%!important;
    top:58.9%!important;
    width:20.0%!important;
    height:6.6%!important;
  }

  /* Bouton "Découvrir nos services" intégré au visuel */
  .premium-hero-stage-v44 .hs33-decouvrir{
    left:24.9%!important;
    top:58.9%!important;
    width:16.0%!important;
    height:6.6%!important;
  }

  /* La grande carte "Nos services" reste cliquable */
  .premium-hero-stage-v44 .hs33-card{
    left:49.5%!important;
    top:27.0%!important;
    width:34.0%!important;
    height:55.5%!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    z-index:6!important;
  }

  .premium-hero-stage-v44 .hs33-besoin:hover,
  .premium-hero-stage-v44 .hs33-decouvrir:hover,
  .premium-hero-stage-v44 .hs33-card:hover{
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
}


/* V68 — hero desktop redimensionné pour tenir sur un écran Full HD.
   On limite la largeur de la scène en fonction de la hauteur disponible
   afin que tout le visuel reste visible sans être trop grand. */
@media (min-width:941px){
  .premium-hero-image-v33{
    text-align:center!important;
  }

  .premium-hero-stage-v44{
    display:inline-block!important;
    width:min(100%, calc((100vh - 128px) * 1.7777778))!important;
    max-width:100%!important;
    margin:0 auto!important;
    vertical-align:top!important;
  }

  .premium-hero-stage-v44 > img{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
  }
}

@media (min-width:941px) and (max-width:1350px){
  .premium-hero-stage-v44{
    width:min(100%, calc((100vh - 118px) * 1.7777778))!important;
  }
}


/* V69 — hero plus compact pour écran Full HD et contenu visuel légèrement remonté.
   Objectifs :
   1) rapprocher le texte de gauche du header,
   2) réduire la hauteur du hero sur desktop,
   3) conserver une largeur cohérente sur écran Full HD. */
@media (min-width:941px){
  .premium-hero-image-v33{
    padding-top:108px!important;
    text-align:center!important;
  }

  .premium-hero-stage-v44{
    display:inline-block!important;
    width:min(100%, 1540px, calc((100vh - 170px) * 1.7777778))!important;
    max-width:100%!important;
    aspect-ratio:1672 / 941!important;
    height:auto!important;
    margin:0 auto!important;
    overflow:hidden!important;
    vertical-align:top!important;
  }

  .premium-hero-stage-v44 > img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    transform:translateY(-18px) scale(1.018)!important;
    transform-origin:center top!important;
  }

  /* Hotspots remontés pour rester alignés avec les boutons/carte dans l'image */
  .premium-hero-stage-v44 .hs33-besoin{
    left:4.2%!important;
    top:56.9%!important;
    width:20.0%!important;
    height:6.8%!important;
  }

  .premium-hero-stage-v44 .hs33-decouvrir{
    left:24.9%!important;
    top:56.9%!important;
    width:16.0%!important;
    height:6.8%!important;
  }

  .premium-hero-stage-v44 .hs33-card{
    left:49.5%!important;
    top:25.3%!important;
    width:34.0%!important;
    height:56.0%!important;
  }

  html{scroll-padding-top:108px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:108px!important}
}

@media (min-width:941px) and (max-width:1350px){
  .premium-hero-image-v33{
    padding-top:104px!important;
  }

  .premium-hero-stage-v44{
    width:min(100%, calc((100vh - 155px) * 1.7777778))!important;
  }

  .premium-hero-stage-v44 > img{
    transform:translateY(-14px) scale(1.014)!important;
  }

  .premium-hero-stage-v44 .hs33-besoin,
  .premium-hero-stage-v44 .hs33-decouvrir{
    top:57.4%!important;
  }

  .premium-hero-stage-v44 .hs33-card{
    top:25.9%!important;
  }

  html{scroll-padding-top:104px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:104px!important}
}


/* V70 — correction visible : image plus haute dans le cadre, texte de gauche remonté,
   largeur mieux adaptée au Full HD et cache navigateur neutralisé via ?v=70 dans le HTML. */
@media (min-width: 941px){
  .premium-hero-image-v33{
    padding-top: 92px !important;
    text-align: center !important;
  }

  .premium-hero-stage-v44{
    display: inline-block !important;
    width: min(100%, 1480px, calc((100vh - 145px) * 1.7777778)) !important;
    max-width: 100% !important;
    aspect-ratio: 1672 / 941 !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    vertical-align: top !important;
  }

  .premium-hero-stage-v44 > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: translateY(-56px) scale(1.055) !important;
    transform-origin: center top !important;
  }

  .premium-hero-stage-v44 .hs33-besoin{
    left: 4.2% !important;
    top: 50.4% !important;
    width: 20.0% !important;
    height: 7.0% !important;
  }

  .premium-hero-stage-v44 .hs33-decouvrir{
    left: 24.9% !important;
    top: 50.4% !important;
    width: 16.0% !important;
    height: 7.0% !important;
  }

  .premium-hero-stage-v44 .hs33-card{
    left: 49.5% !important;
    top: 18.8% !important;
    width: 34.0% !important;
    height: 59.0% !important;
  }

  html{scroll-padding-top: 92px !important;}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top: 92px !important;}
}

@media (min-width: 941px) and (max-width: 1350px){
  .premium-hero-image-v33{
    padding-top: 88px !important;
  }

  .premium-hero-stage-v44{
    width: min(100%, calc((100vh - 138px) * 1.7777778)) !important;
  }

  .premium-hero-stage-v44 > img{
    transform: translateY(-46px) scale(1.045) !important;
  }

  .premium-hero-stage-v44 .hs33-besoin,
  .premium-hero-stage-v44 .hs33-decouvrir{
    top: 51.3% !important;
  }

  .premium-hero-stage-v44 .hs33-card{
    top: 20.0% !important;
  }

  html{scroll-padding-top: 88px !important;}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top: 88px !important;}
}


/* V71 — hero plein largeur sans marges latérales */
@media (min-width: 941px){
  .premium-hero-image-v33{
    padding-top: 92px !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .premium-hero-stage-v44{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 92px) !important;
    min-height: 720px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .premium-hero-stage-v44 > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }
}

@media (min-width: 941px) and (max-width: 1350px){
  .premium-hero-image-v33{
    padding-top: 88px !important;
  }

  .premium-hero-stage-v44{
    height: calc(100vh - 88px) !important;
    min-height: 640px !important;
  }
}


/* V72 — version Full HD : hero plein écran en largeur, hauteur plus compacte, cadrage haut */
@media (min-width: 941px){
  .premium-hero-image-v33{
    padding-top: 92px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: hidden !important;
    background: #07233b !important;
  }

  .premium-hero-stage-v44{
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(calc(100vh - 92px), 820px) !important;
    min-height: 620px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .premium-hero-stage-v44 > img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }

  html{scroll-padding-top: 92px !important;}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top: 92px !important;}
}

@media (min-width: 1600px){
  .premium-hero-stage-v44{
    height: min(calc(100vh - 92px), 840px) !important;
  }
}

@media (min-width: 941px) and (max-width: 1350px){
  .premium-hero-image-v33{
    padding-top: 88px !important;
  }

  .premium-hero-stage-v44{
    height: min(calc(100vh - 88px), 700px) !important;
    min-height: 560px !important;
  }

  html{scroll-padding-top: 88px !important;}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top: 88px !important;}
}


/* V75 — l'image complète du hero doit toujours être visible : la V73 limitait la
   hauteur à 700px et rognait le bas de la photo (object-fit:cover), ce qui coupait
   les boutons et la carte "Nos services". On affiche maintenant l'image entière,
   mise à l'échelle par sa largeur, quitte à nécessiter un léger défilement. */
html, body{
  overflow-x:hidden!important;
}

@media (min-width:941px){
  .premium-hero-image-v33{
    padding-top:92px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    overflow:hidden!important;
    background:#07233b!important;
  }

  .premium-hero-stage-v44{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    aspect-ratio:1672 / 941!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  .premium-hero-stage-v44 > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    margin:0!important;
  }

  /* hotzones recalées sur le visuel plein écran */
  .premium-hero-stage-v44 .hs33-besoin{
    left:4.55%!important;
    top:66.2%!important;
    width:20.4%!important;
    height:7.4%!important;
  }
  .premium-hero-stage-v44 .hs33-decouvrir{
    left:25.8%!important;
    top:66.2%!important;
    width:16.5%!important;
    height:7.4%!important;
  }
  .premium-hero-stage-v44 .hs33-card{
    left:53.0%!important;
    top:31.0%!important;
    width:36.5%!important;
    height:61.0%!important;
  }
}

@media (min-width:1600px){
  .premium-hero-stage-v44{
    height:auto!important;
    max-height:none!important;
  }
}

@media (min-width:941px) and (max-width:1350px){
  .premium-hero-image-v33{padding-top:88px!important;}
  .premium-hero-stage-v44{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
  }
}

/* V74 — correctif accessibilité : le titre de la fenêtre pro-gate n'est plus un <h2>,
   pour ne pas apparaître dans le plan de titres du document avant le vrai <h1>. */

/* V78 — correction du bug racine du hero desktop (bandeau noir à droite/en bas de
   l'image + carte "Nos services" qui débordait de l'écran d'accueil).
   Cause réelle : depuis la V44, toutes les règles ".premium-hero-stage-v44 > img"
   utilisaient le combinateur d'enfant direct ">", alors que l'image réelle est
   imbriquée dans un <picture> (ajouté pour servir un visuel allégé sur mobile) :
   <div class="premium-hero-stage-v44"><picture><img></picture>...</div>.
   L'image n'était donc JAMAIS l'enfant direct visé par ces règles : aucune des
   dimensions/recadrages empilés sur 8 versions (V44 à V75) ne s'appliquait à l'image
   réellement affichée. Elle restait donc affichée à sa taille naturelle (1672×941px)
   à l'intérieur d'un cadre rendu plus grand par les règles (qui, elles, ciblaient
   correctement .premium-hero-stage-v44) : d'où l'espace vide à droite et en dessous
   de l'image (visible comme un bandeau sombre), et un cadre plus haut que l'écran
   (la carte "Nos services" située en bas de l'image passait alors sous la ligne de
   flottaison). Un second écart, sans lien avec le premier mais qui rognait aussi le
   haut de l'image derrière le header fixe, a été corrigé au passage : le padding-top
   réservé pour le header (92/88px) ne correspondait plus à sa hauteur réelle
   (116/106px) depuis la V69.
   Correction initiale (toujours en place ci-dessous comme solution de repli sans
   JavaScript) : sélecteur qui vise réellement l'image (dans <picture>), cadre
   contraint à la fois en largeur (100% max) et en hauteur disponible
   (100vh − hauteur réelle du header) tout en conservant exactement le ratio natif
   1672/941 de l'image — elle remplit donc le cadre bord à bord sans recadrage ni
   bandeau, et tient toujours entièrement dans la fenêtre visible, sans défilement.
   Hotspots recalculés au pixel près directement sur hero-premium-v73.jpg (mesure de
   contraste sur les bords réels des boutons et de la carte) : ces pourcentages
   restent valables à toute taille d'écran puisque l'image n'est plus jamais déformée
   ni rognée. */
@media (min-width:941px){
  .premium-header-v33{height:116px!important}

  .premium-hero-image-v33{
    padding-top:116px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    text-align:center!important;
    overflow:hidden!important;
    background:#07233b!important;
  }

  .premium-hero-stage-v44{
    display:inline-block!important;
    width:min(100%, calc((100vh - 116px) * 1.7777778))!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    aspect-ratio:1672 / 941!important;
    margin:0 auto!important;
    border-radius:0!important;
    overflow:hidden!important;
    vertical-align:top!important;
  }

  .premium-hero-stage-v44 picture{
    display:block!important;
    width:100%!important;
    height:100%!important;
  }

  /* Sélecteur correct : l'image est un enfant du <picture>, pas de .premium-hero-stage-v44 */
  .premium-hero-stage-v44 picture img,
  .premium-hero-stage-v44 > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    margin:0!important;
  }

  .premium-hero-stage-v44 .hs33-besoin{
    left:4.6%!important;
    top:64.9%!important;
    width:21.8%!important;
    height:7.2%!important;
  }
  .premium-hero-stage-v44 .hs33-decouvrir{
    left:27.1%!important;
    top:64.9%!important;
    width:17.3%!important;
    height:7.2%!important;
  }
  .premium-hero-stage-v44 .hs33-card{
    left:53.8%!important;
    top:30.2%!important;
    width:36.6%!important;
    height:61.0%!important;
  }

  html{scroll-padding-top:116px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:116px!important}
}

@media (min-width:941px) and (max-width:1450px){
  .premium-header-v33{height:106px!important}
  .premium-hero-image-v33{padding-top:106px!important}
  .premium-hero-stage-v44{
    width:min(100%, calc((100vh - 106px) * 1.7777778))!important;
  }
  html{scroll-padding-top:106px!important}
  #services,#expertise,#methode,#apropos,#contact{scroll-margin-top:106px!important}
}

/* V79 — sur demande : l'image du hero doit toujours toucher les 4 bords de la fenêtre
   (plus de bande de couleur possible sur un écran très large/bas type ultra-wide, ou
   une fenêtre inhabituellement haute), sans jamais déformer/étirer la photo. On passe
   donc de "toute l'image visible, quitte à laisser une bande" (V78 ci-dessus) à
   "l'image remplit toujours l'écran, recadrée si besoin" (object-fit:cover), avec une
   marge de sécurité calculée pour ne JAMAIS rogner les boutons ni la carte "Nos
   services" : le cadre est autorisé à s'écarter du ratio natif de l'image (1672/941)
   uniquement dans les limites où le recadrage reste hors de la zone utile (mesurée sur
   hero-premium-v73.jpg : boutons entre 4,7% et 44,3% en largeur / 65,1%-71,8% en
   hauteur ; carte "Nos services" entre 53,9% et 90,3% en largeur / 30,3%-91,1% en
   hauteur). Au-delà de ces bornes (cas extrême, improbable en usage réel), le cadre
   n'est plus étiré davantage : un léger défilement ou une fine marge est accepté plutôt
   que de rogner un bouton ou la carte.
   Les hotspots ne peuvent plus être de simples pourcentages fixes puisque la zone de
   recadrage varie avec la forme de la fenêtre : ils sont recalculés en JavaScript
   (voir script.js, fonction placeHeroHotspots) à partir des coordonnées exactes des
   boutons/carte dans l'image source et de la même formule de recadrage que
   object-fit:cover. Les pourcentages ci-dessus restent en place comme solution de
   repli si JavaScript est désactivé. */
@media (min-width:941px){
  .premium-hero-stage-v44{
    display:block!important;
    width:100%!important;
    aspect-ratio:auto!important;
    height:min( max( calc(100vh - 116px), calc(100vw / 2.19) ), calc(100vw / 1.57) )!important;
    margin:0!important;
  }

  .premium-hero-stage-v44 picture img,
  .premium-hero-stage-v44 > img{
    object-fit:cover!important;
    object-position:32% 62%!important;
  }
}

@media (min-width:941px) and (max-width:1450px){
  .premium-hero-stage-v44{
    height:min( max( calc(100vh - 106px), calc(100vw / 2.19) ), calc(100vw / 1.57) )!important;
  }
}

/* V80 — le logo hexagonal "LV" intégré dans hero-premium-v73.jpg dépasse plus haut
   (sommet réel à y=138px) que la marge de sécurité utilisée en V79, qui se basait sur
   le texte d'accroche au-dessus des boutons (y=196px). Sur les écrans très larges/bas,
   le recadrage object-fit:cover pouvait donc rogner le haut du logo sans toucher le
   texte ni les boutons. Bornes de ratio et point d'ancrage recalculés à partir du
   sommet réel du logo, avec une marge de sécurité resserrée à 80% (au lieu de 85%) :
   ratio du cadre limité entre 1,57 et 2,19 (était 1,56–2,38), object-position
   verticale ramenée à 62% (était 70%). Le logo, les boutons et la carte "Nos services"
   restent tous hors de la zone recadrée à ces bornes. script.js (POS_Y) mis à jour en
   conséquence pour que les hotspots invisibles restent alignés. */

/* V80 — soulignement au survol manquant sur l'en-tête simple (pages Mentions légales
   et Confidentialité) : ces pages utilisent le header .site-header/.nav-links (celui
   normalement réservé au menu mobile de l'accueil), qui n'avait jamais reçu le petit
   trait blanc qui apparaît sous "Services"/"Contact" au survol sur le header premium
   de l'accueil (.premium-nav-v33). Ajouté ici pour les écrans desktop uniquement, avec
   le même style, afin que le comportement soit cohérent sur tout le site. */
@media(min-width:941px){
  .nav-links a:not(.btn){
    position:relative;
    padding:12px 0;
  }
  .nav-links a:not(.btn)::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:2px;
    width:0;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#9AA8B6,#DCE3E9,#8C9AA8);
    transform:translateX(-50%);
    transition:width .22s ease;
    opacity:.9;
  }
  .nav-links a:not(.btn):hover::before{
    width:100%;
  }
}