:root{
  --navy:#1B2C44;
  --blue:#4AA1E2;
  --blue-txt:#4AA1E2;
  --gray:#7a7a7a;
  --bg:#ffffff;
  --r:15px;
  --font:'Signika','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--gray);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ================= EN-TÊTE ================= */
.site-header{position:relative;z-index:10;isolation:isolate}
.site-header::before{content:"";position:absolute;top:0;bottom:0;left:1.2%;right:-8%;background:var(--navy);
  transform:skewX(15deg);transform-origin:top left;border-bottom-left-radius:38px;z-index:-1;box-shadow:0 7px 9px rgba(0,0,0,.38)}
.hd{max-width:1480px;margin:0 auto;padding:28px 20px 24px;display:grid;grid-template-columns:250px minmax(0,1000px) 64px;justify-content:center;column-gap:18px;align-items:start}
.logo img{width:100%;height:auto;margin-top:6px}
.hd-main{min-width:0}
.strip{background:var(--blue);border-radius:20px;transform:skewX(15deg);padding:11px 30px;display:flex;gap:6px;overflow:hidden;margin-right:18px}
.strip img{flex:1 1 0;min-width:0;aspect-ratio:128/91;height:auto;object-fit:cover;transform:skewX(-15deg)}
.tabs{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0 40px}
.tab{position:relative;display:block;flex:0 0 auto;width:172px;height:48px;text-decoration:none;color:var(--blue-txt);
  font-weight:500;font-size:19px;line-height:1;padding:1px 0 0 30px;white-space:nowrap}
.tab.long{width:218px;padding-left:30px}
.shp{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;transition:filter .2s}
.tab{isolation:isolate}
.tab span{position:relative}
.tab:hover .shp,.tab.cur .shp{filter:brightness(0) saturate(100%) invert(55%) sepia(68%) saturate(560%) hue-rotate(175deg) brightness(93%) contrast(91%)}
.tab:hover,.tab.cur{color:#fff}
.tab-contact{position:relative;display:block;flex:0 0 auto;width:165px;height:44px;padding:1px 0 0 16px;text-decoration:none;color:var(--blue-txt);font-weight:500;font-size:19px;line-height:1}
.tab-contact::before{content:"";position:absolute;left:4px;right:0;bottom:0;height:24px;border-left:5px solid var(--blue);border-bottom:8px solid var(--blue);border-radius:0 0 0 10px;transform:skewX(-15deg);transition:border-color .2s}
.tab-contact:hover,.tab-contact.cur{color:#fff}
.tab-contact:hover::before,.tab-contact.cur::before{border-color:#fff}
.badge55{width:64px;height:auto;align-self:end;margin-bottom:6px;margin-left:26px}

.burger{display:none;width:46px;height:46px;border:0;border-radius:10px;background:var(--blue);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;align-self:center}
.burger span{display:block;width:22px;height:2px;background:#fff;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;background:var(--navy)}
.mobile-menu ul{list-style:none}
.mobile-menu a{display:block;padding:14px 22px;color:#fff;text-decoration:none;font-weight:500;border-top:1px solid rgba(255,255,255,.1)}
.mobile-menu a[aria-current]{color:var(--blue)}
.mobile-menu.open{display:block}

/* ================= COMMUN ================= */
main{padding:62px 0 120px}
.wrap{width:min(1500px,100% - 40px);margin:0 auto}
.ptitle{color:var(--blue-txt);font-weight:500;font-size:21px;line-height:1.35;margin-bottom:18px}
.ph{width:100%;height:100%;object-fit:cover;border:2px solid var(--blue);border-radius:var(--r)}
.txt{font-size:20px;line-height:1.5;color:var(--gray);text-align:justify}
.txt p+p{margin-top:12px}
.stack{display:flex;flex-direction:column;gap:28px;min-height:0}
.stack .ph{flex:1;min-height:0}

/* ================= ACCUEIL ================= */
.home3{width:min(1720px,100% - 40px);margin:0 auto;display:grid;grid-template-columns:282px minmax(0,1fr) 245px;
  grid-template-areas:"tg in tr" "gal vid ref";column-gap:46px;row-gap:18px;align-items:end}
.t-gal{grid-area:tg}.intro{grid-area:in}.t-ref{grid-area:tr}
.ctitle{color:var(--blue-txt);font-weight:500;font-size:22px;text-align:center;line-height:1}
.intro{text-align:center;color:var(--blue-txt);font-weight:500;font-size:20px;line-height:1.65}
.box{border:1px solid var(--blue);border-radius:var(--r);background:#fff;height:580px;align-self:stretch}
.vscroll{grid-area:gal;overflow:hidden;padding:0 15px}
.vscroll .track{display:flex;flex-direction:column;gap:26px;padding-top:8px;animation:vscroll 45s linear infinite}
.vscroll:hover .track{animation-play-state:paused}
.vscroll img{width:100%;aspect-ratio:250/165;object-fit:cover}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 13px))}}
.logos{grid-area:ref;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:20px 18px}
.logos img{max-width:100%;max-height:112px;width:auto;height:auto}
.video-thumb{grid-area:vid;position:relative;display:block;width:100%;height:580px;border:1px solid var(--blue);border-radius:var(--r);overflow:hidden;padding:0;background:none;cursor:pointer}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.vbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;background:#fff;color:var(--blue-txt);
  font:500 24px var(--font);padding:10px 40px 10px 32px;border-radius:14px;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:.2s}
.tri{width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent}
.video-thumb:hover .vbtn{background:var(--blue);color:#fff;transform:translate(-50%,-50%) scale(1.05)}

/* ================= HISTORIQUE ================= */
.histo{display:grid;grid-template-columns:655px 85px 440px 215px;justify-content:center;column-gap:26px;align-items:start}
.h-row{display:grid;grid-template-columns:172px 1fr;column-gap:44px;align-items:end;margin-bottom:26px}
.h-portrait{height:205px}
.h-old{height:162px}
.h-aerial{height:328px}
.h-badge{width:85px;height:auto;margin-top:0}
.histo .txt{font-size:19px;margin-top:-6px}
.h-tall{height:340px}

/* ================= ATOUTS / MARCHÉS ================= */
.tri-col{display:grid;column-gap:34px;height:590px}
.atouts{grid-template-columns:345px 570px 465px}
.marches{grid-template-columns:430px 465px 430px;column-gap:52px;height:596px}
.tri-col .tall{height:100%}
.txt-col{justify-content:space-between}
.atouts .txt-col .ph{flex:0 0 298px}
.marches .txt-col .ph{flex:0 0 332px}
.atouts .stack .ph:first-child{flex:0 0 214px}
.list{text-align:left;line-height:1.5}

/* ================= PARC ================= */
.parc{display:grid;grid-template-columns:722px 1fr;column-gap:38px;align-items:start}
.p-left .ptitle{margin-bottom:28px}
.p-wide{height:340px;margin-bottom:16px}
.p-row{display:grid;grid-template-columns:286px 1fr;gap:16px}
.p-row .ph{height:354px}
.machines{font-size:20px;line-height:1.5;color:var(--gray);padding-top:6px}
.machines p{margin:0}
.mrows{display:grid;grid-template-columns:230px 270px auto;row-gap:0;margin:2px 0 34px 4px}
.mrows span{line-height:1.52}
.b{color:var(--blue-txt);font-weight:500}
.machines .tight{margin-top:-30px;margin-bottom:34px}
.machines p.b{margin-top:16px}

/* ================= CONTACT ================= */
.contact{display:grid;grid-template-columns:585px 1fr 588px;column-gap:20px;align-items:start}
.contact .stack{gap:34px}
.contact .stack .ph{height:276px;flex:none}
.addr{text-align:center;color:var(--blue-txt);font-weight:500;font-size:21px;line-height:1.45;padding-top:110px}
.addr a{text-decoration:none}
.map .ph{height:604px;object-fit:contain;background:#d9dadd}
.map p{text-align:center;color:var(--blue-txt);font-weight:500;font-size:21px;margin-top:10px}
.map a{text-decoration:none}

/* ================= GALERIE / MENTIONS ================= */
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.grid4 a{overflow:hidden;aspect-ratio:3/2;display:block;border-radius:var(--r);border:2px solid var(--blue)}
.grid4 img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.grid4 a:hover img{transform:scale(1.06)}
.legal{max-width:1000px}
.legal h2{font-size:19px;margin:26px 0 8px;color:var(--blue-txt);font-weight:500}
.legal p,.legal li{margin-bottom:8px;font-size:17px}
.legal ul{padding-left:22px}

/* ================= PIED DE PAGE ================= */
.site-footer{background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;gap:28px;padding:22px 40px;
  clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);margin-right:4.6%;text-align:center;font-weight:600}
.flogo{width:190px;height:auto}
.site-footer p{font-size:19px;line-height:1.45}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ================= LIGHTBOX ================= */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,12,35,.92);display:flex;align-items:center;justify-content:center;padding:4vw}
.lightbox[hidden]{display:none}
.lb-body{max-width:1100px;width:100%}
.lb-body img,.lb-body video{max-height:86vh;margin:0 auto;width:auto;max-width:100%;border-radius:10px}
.lb-close{position:absolute;top:14px;right:20px;font-size:2.6rem;line-height:1;color:#fff;background:none;border:0;cursor:pointer}

/* ================= ÉCRANS MOYENS ================= */
@media (max-width:1560px){
  .histo{grid-template-columns:minmax(0,1.5fr) 70px minmax(0,1fr) minmax(0,.5fr);column-gap:20px}
  .h-row{grid-template-columns:.36fr 1fr;column-gap:24px}
  .atouts{grid-template-columns:.75fr 1.25fr 1fr}
  .marches{grid-template-columns:1fr 1.08fr 1fr;column-gap:30px}
  .parc{grid-template-columns:1fr 1fr}
  .p-row{grid-template-columns:.65fr 1fr}
  .mrows{grid-template-columns:auto auto auto;column-gap:22px}
  .contact{grid-template-columns:1fr .55fr 1fr}
}
@media (max-width:1320px){
  .hd{grid-template-columns:200px minmax(0,1fr) 56px}
  .tabs{margin-left:30px;gap:8px}
  .tab{width:150px;height:42px;font-size:16px;padding-left:24px}
  .tab.long{width:170px;padding-left:26px}
  .tab-contact{width:150px;font-size:16px}
  .badge55{width:56px}
  .home3{grid-template-columns:230px minmax(0,1fr) 200px;column-gap:28px}
  .intro{font-size:17px}
}

/* ================= TABLETTE / MOBILE ================= */
@media (max-width:1050px){
  .site-header::before{left:0;transform:none;border-radius:0}
  .hd{grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;padding:16px}
  .logo img{width:190px}
  .tabs,.badge55{display:none}
  .burger{display:flex}
  .strip{padding:6px 20px}
  .strip img:nth-child(n+6){display:none}
  main{padding:40px 0 70px}
  .home3{grid-template-columns:1fr;grid-template-areas:"in" "vid" "tg" "gal" "tr" "ref";max-width:760px;row-gap:16px}
  .ctitle{margin-top:20px}
  .box,.video-thumb{height:auto}
  .video-thumb{aspect-ratio:16/10}
  .vscroll{padding:12px}
  .vscroll .track{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;animation:none;padding:0}
  .vscroll .track a:nth-child(n+9){display:none}
  .logos{flex-direction:row;flex-wrap:wrap;gap:24px}
  .logos img{max-height:70px;max-width:40%}
  .histo,.parc,.contact{grid-template-columns:1fr;row-gap:26px}
  .h-badge{display:none}
  .h-tall,.h-aerial,.p-wide{height:300px}
  .tri-col,.marches{height:auto;grid-template-columns:1fr;row-gap:26px}
  .stack .ph,.tri-col .tall,.atouts .txt-col .ph,.marches .txt-col .ph,.atouts .stack .ph:first-child{flex:none;height:280px}
  .txt-col{gap:22px}
  .mrows{grid-template-columns:1fr 1fr auto}
  .machines .tight{margin-top:0}
  .addr{padding-top:0}
  .map .ph{height:auto}
  .site-footer{flex-direction:column;gap:12px;margin-right:0;clip-path:none}
}
@media (max-width:560px){
  .hd{grid-template-columns:1fr auto}
  .hd-main{grid-column:1/-1;grid-row:2;margin-top:12px}
  .logo img{width:170px}
  .strip img:nth-child(n+4){display:none}
  .txt,.machines{font-size:17px}
  .mrows{grid-template-columns:1fr;margin-bottom:22px}
  .mrows span:nth-child(3n+1){margin-top:8px}
  .p-row{grid-template-columns:1fr}
  .vbtn{font-size:19px;padding:8px 26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}