/* ChantierBot — direction artistique éditoriale du hero, référence 01/11/2026.
   Typographie et interface restent en HTML pour préserver lisibilité, responsive et SEO. */
:root{--brand-navy:#0B1C2B;--brand-yellow:#FFBB0C}
.site-header{background:rgba(255,253,250,.98);border-bottom-color:transparent;box-shadow:none}
.site-header .container{max-width:1480px}
.header-inner{min-height:88px;gap:30px}
.brand-mark{width:48px;height:48px}
.brand-text{font-size:29px;font-weight:800;letter-spacing:-.07em}
.desktop-nav{gap:38px;font-size:13px;color:#0B1C2B;font-weight:650}
.header-cta{min-height:52px;font-size:13px;padding:14px 23px;border-radius:15px;gap:25px;background:#FFBB0C;box-shadow:0 5px 14px #D79C0011}
.header-cta .icon{width:18px;height:18px}
.hero{isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#FFFCF9 0%,#FBF7F3 57%,#FFFFFF 95%);position:relative}
.hero-content{max-width:1480px;min-height:516px;text-align:left;padding-top:51px;padding-bottom:24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;z-index:2}
.hero-art{position:absolute;z-index:1;top:5px;right:0;width:min(49vw,800px);height:540px;overflow:hidden;pointer-events:none}
.hero-art picture{display:block;width:100%;height:100%}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;mask-image:linear-gradient(to right,transparent 0%,#000 11%,#000 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 11%,#000 100%)}
.hero-pill{padding:8px 15px;border:1px solid #E8AB16;background:#FFF9EE;box-shadow:none;font-size:10px;letter-spacing:.075em;font-weight:800;color:#0B1C2B;white-space:nowrap}
.pill-dot{width:9px;height:9px;background:#FFB900;box-shadow:none}
.hero h1{font-size:clamp(53px,5.3vw,88px);max-width:850px;line-height:1.025;letter-spacing:-.072em;font-weight:800;margin:32px 0 18px}
.hero h1 span{color:#E9A700;background:linear-gradient(105deg,#D99D00 7%,#FFBF12 58%,#E9A100);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-content>p{font-size:18px;line-height:1.5;max-width:715px;margin:0;color:#162B3C;font-weight:450}
.hero-content>p strong{font-weight:750;color:#0B1C2B}
.hero-actions{margin-top:34px;justify-content:flex-start;gap:14px}
.hero-actions .btn{min-height:54px;border-radius:12px;padding:15px 25px;gap:18px;font-size:14px}
.hero-actions .btn-red{background:#FFBA18;color:#0B1C2B}
.hero-actions .btn-outline{background:#fffaf8;border-color:#BDC9D4;color:#0B1C2B}
.hero-actions .btn:hover{box-shadow:0 8px 24px #0B1C2B17}
.hero-trust{justify-content:flex-start;gap:17px;margin:26px 0 0;font-size:12px;font-weight:500;color:#5F6E7E}
.hero-trust i{width:4px;height:4px;background:#617386}
.hero-stage-wrap{max-width:1280px;z-index:4;margin-top:-9px;padding-bottom:88px;position:relative}
.hero-stage{min-height:600px;background:linear-gradient(135deg,#14344B,#102B41 80%);border:6px solid #fff;border-radius:43px;box-shadow:0 18px 62px #0B1C2B24;overflow:visible}
.stage-orbit{display:none}
.hero-dashboard{top:31px;width:88%;max-width:1060px;min-height:495px;transform:none;border-radius:16px;border:1px solid #D6E1E8;box-shadow:0 18px 50px #0003}
.dash-side{background:linear-gradient(180deg,#0A2438,#102E43);width:200px;flex-basis:200px;padding-top:20px}
.dash-brand{padding-bottom:29px}
.dash-brand b{font-size:17px}
.dash-item{font-size:10px;padding:12px 10px}
.dash-item.dash-active{background:#ffffff18}
.dash-head small{color:#E9AA00}
.dash-head h3{font-size:21px}
.dash-head h3 span{color:#FFB900}
.dash-stats strong{font-size:34px;color:#0B1C2B}
.dash-stats span{color:#228A67}
.dash-stats>div{border-radius:13px}
.dash-panel{border-radius:12px}
.float-photo{right:-70px;bottom:auto;top:132px;width:245px;transform:rotate(2deg);border-radius:17px;box-shadow:0 16px 42px #09152233}
.float-photo img{border-radius:11px;height:141px}
.float-note{left:-110px;top:153px;padding:12px 16px;border-radius:15px;box-shadow:0 15px 35px #102D4228}
.float-note-icon{background:#FFF4D4;color:#D89900}
.float-note-check{background:#EAF9F2;color:#238C69}
.stage-caption{bottom:19px;left:46px;color:#A8BBC6;font-size:9px}
.eyebrow{letter-spacing:.11em}
.section-heading-row h2,.section-intro h2{letter-spacing:-.063em}
.btn-red{background:#FFBB0C}
@media(max-width:1250px){
  .hero-content{min-height:506px}
  .hero-art{width:49vw;height:495px;top:45px}
  .hero h1{font-size:clamp(55px,6.15vw,76px);max-width:690px}
  .hero-content>p{max-width:610px}
  .hero-stage-wrap{max-width:1120px;margin-top:0}
  .float-note{left:-10px;top:175px}
  .float-photo{right:-5px;width:214px}
  .hero-dashboard{width:89%}
}
@media(max-width:950px){
  .site-header .container{max-width:100%}
  .header-inner{min-height:78px}
  .brand-mark{width:41px;height:41px}
  .brand-text{font-size:25px}
  .desktop-nav{gap:18px;font-size:11px}
  .header-cta{padding:12px 14px;gap:8px}
  .hero-content{min-height:475px;padding-top:65px}
  .hero-art{width:51vw;height:410px;top:40px;opacity:.95}
  .hero h1{font-size:clamp(46px,6.4vw,63px);max-width:600px}
  .hero-content>p{max-width:545px;font-size:16px}
  .hero-actions .btn{font-size:12px;padding:14px 17px}
  .hero-stage-wrap{padding-bottom:60px}
  .hero-stage{min-height:480px}
  .hero-dashboard{top:25px;width:91%;min-height:405px}
  .dash-side{width:150px;flex-basis:150px}
  .dash-body{padding:20px}
  .float-photo{width:180px;right:-1%;top:220px}
  .float-note{transform:scale(.82);transform-origin:left center;left:-5px;top:175px}
}
@media(max-width:1180px){
  .hero{display:flex;flex-direction:column}
  .hero-content{order:0;min-height:0;padding-top:50px;padding-bottom:15px;text-align:left;display:block}
  .hero-art{order:1;position:relative;top:auto;right:auto;display:block;width:min(100%,720px);height:auto;aspect-ratio:772/506;margin:10px auto 0;opacity:1}
  .hero-art img{width:100%;height:100%;object-fit:cover;mask-image:none;-webkit-mask-image:none}
  .hero-stage-wrap{order:2;margin-top:-24px}
  .hero h1{font-size:clamp(54px,7.4vw,75px);max-width:840px}
  .hero-content>p{max-width:725px}
}
@media(max-width:740px){
  .hero{background:linear-gradient(180deg,#FFFCF9 0%,#FBF8F5 63%,#fff 100%)}
  .hero-content{min-height:0;padding-top:54px;padding-bottom:0;display:block;text-align:left}
  .hero-art{position:relative;top:auto;right:auto;width:calc(100% + 36px);height:auto;aspect-ratio:772/506;margin:12px -18px 0 auto;overflow:hidden;opacity:1}
  .hero-art img{mask-image:linear-gradient(to bottom,#000 0%,#000 100%);-webkit-mask-image:none}
  .hero{display:flex;flex-direction:column}
  .hero-content{order:0}
  .hero-art{order:1}
  .hero-stage-wrap{order:2;margin-top:-26px}
  .hero h1{font-size:clamp(45px,10vw,67px);margin-top:26px;line-height:1.07;max-width:640px}
  .hero-content>p{max-width:100%;font-size:16px;line-height:1.6}
  .hero-pill{font-size:9px;white-space:normal;line-height:1.4}
  .hero-actions{gap:10px;flex-wrap:wrap}
  .hero-trust{font-size:10px;gap:8px 12px;line-height:1.5}
  .hero-stage{min-height:400px;border-radius:24px;border-width:4px}
  .hero-dashboard{width:96%;top:19px}
  .float-note,.float-photo{display:none}
  .stage-caption{left:20px}
}
@media(max-width:550px){
  .header-inner{min-height:70px}
  .brand-mark{height:36px;width:36px}
  .brand-text{font-size:23px}
  .hero-content{padding-top:34px}
  .hero h1{font-size:clamp(42px,10.1vw,59px);letter-spacing:-.068em}
  .hero-actions .btn{min-height:50px;flex:1 1 auto;justify-content:space-between}
  .hero-trust{margin-top:22px}
  .hero-stage-wrap{padding-inline:12px;padding-bottom:42px}
  .hero-stage{min-height:320px}
  .hero-dashboard{width:98%;min-height:295px;top:13px}
  .dash-side{width:108px;flex-basis:108px;padding:10px 5px}
  .dash-brand{gap:2px;padding:0 2px 15px}
  .dash-brand b{font-size:11px}
  .dash-brand img{width:17px;height:17px}
  .dash-item{padding:8px 3px;gap:4px;font-size:7px}
  .dash-item .icon{width:12px;height:12px}
  .dash-body{padding:13px 10px}
  .dash-head h3{font-size:13px}
  .dash-head p{font-size:8px}
  .dash-head small{font-size:7px}
  .dash-today,.dash-search,.dash-side-foot{display:none}
  .dash-stats{margin:15px 0;gap:5px}
  .dash-stats>div{padding:8px;gap:4px}
  .dash-stats strong{font-size:20px}
  .dash-stats small,.dash-stats span{font-size:7px}
  .dash-panel-head{padding:8px}
  .dash-table-head,.dash-table-row{padding:7px 8px;font-size:6px;gap:4px}
  .dash-table-head{font-size:5px}
  .dash-table-row b{font-size:6px}
  .dash-table-row small{font-size:5px}
  .chip{font-size:5px;padding:3px}
}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-dashboard{transition:none}}