*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
--navy:#0b1c35;--blue:#1a3a6e;
--accent:#e8342a;--ad:#c02820;
--sky:#2a7fd4;--off:#f7f8fa;
--gray:#8a93a2;--gd:#4a5568;
--border:#e2e6ed;--text:#1a202c;
}
body{font-family:'Open Sans',sans-serif;color:var(--text);overflow-x:hidden}
/* TOPBAR */
.topbar{background:var(--navy);padding:9px 0}
.ti{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.tl{display:flex;gap:20px}
.tl a{color:rgba(255,255,255,.6);font-size:11.5px;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:500;transition:color .2s}
.tl a:hover{color:#fff}
.ts{display:flex;gap:7px}
.ts a{width:26px;height:26px;background:rgba(255,255,255,.1);border-radius:3px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:11px;font-weight:800;font-family:'Montserrat',sans-serif;text-decoration:none;transition:background .2s}
.ts a:hover{background:var(--accent);color:#fff}
/* NAV */
nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,0,0,.07)}
.ni{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{text-decoration:none;display:flex;align-items:center;gap:14px}
.logo-icon{height:46px;width:auto;display:block;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;justify-content:center}
.logo-name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:15px;color:var(--navy);letter-spacing:.3px;line-height:1;white-space:nowrap}
.logo-name span{color:var(--accent)}
.logo-sub{font-family:'Montserrat',sans-serif;font-weight:600;font-size:9px;color:var(--gray);letter-spacing:3.5px;text-transform:uppercase;margin-top:4px;text-align:center}
.nlinks{display:flex;gap:0}
.nlinks a{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--text);text-decoration:none;padding:8px 13px;border-radius:4px;transition:background .15s;white-space:nowrap}
.nlinks a:hover{background:var(--off)}
.nr{display:flex;align-items:center;gap:16px}
.ntel{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--navy);text-decoration:none;white-space:nowrap}
.nbt{background:var(--accent);color:#fff;padding:11px 24px;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-decoration:none;transition:background .2s;white-space:nowrap}
.nbt:hover{background:var(--ad)}
/* TICKER */
.ticker{background:var(--navy);padding:11px 0;overflow:hidden}
.tw{display:flex;animation:tick 34s linear infinite;white-space:nowrap}
@keyframes tick{to{transform:translateX(-50%)}}
.tit{display:inline-flex;align-items:center;gap:10px;padding:0 38px;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.82)}
.tdot{width:5px;height:5px;background:var(--accent);border-radius:50%;flex-shrink:0}
/* HERO */
.hero{display:grid;grid-template-columns:repeat(3,1fr);height:540px}
.panel{
position:relative;overflow:hidden;cursor:pointer;
display:flex;flex-direction:column;justify-content:flex-end;
padding:44px 38px;
}
/* Photos de fond — vraies photos pro */
.p1{background:url('../images/hero-port.jpg') center/cover no-repeat}
.p2{background:url('../images/hero-stockage.jpg') center 30%/cover no-repeat}
.p3{background:url('../images/hero-livraison.jpg') center/cover no-repeat}
/* Séparateur vertical entre panneaux */
.p1::after,.p2::after{content:'';position:absolute;right:0;top:8%;bottom:8%;width:1px;background:rgba(255,255,255,.15);z-index:3}
/* Texture subtile pour renforcer la lisibilité */
.panel::before{
content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(to right, rgba(0,0,0,.18) 0%, transparent 100%);
}
/* Overlay pour lisibilité texte sur photo réelle */
.pov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.15) 100%)}
.pc{position:relative;z-index:4}
.pey{font-family:'Montserrat',sans-serif;font-weight:600;font-size:10.5px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:3.5px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.pey::before{content:'';display:inline-block;width:24px;height:2px;background:var(--accent);border-radius:1px;flex-shrink:0}
.pt{font-family:'Montserrat',sans-serif;font-weight:900;font-size:30px;line-height:1.14;color:#fff;margin-bottom:12px}
.pt span{display:block;font-size:15px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:1.5px;margin-top:6px;text-transform:none}
.ps{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.65;margin-bottom:30px;max-width:300px}
.bw{display:inline-block;background:#fff;color:var(--navy);padding:14px 30px;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-decoration:none;transition:transform .25s,box-shadow .25s;letter-spacing:.3px}
.bw:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.36)}
.bb{display:inline-block;border:2px solid rgba(255,255,255,.75);color:#fff;padding:14px 30px;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-decoration:none;transition:transform .25s,background .25s,border-color .25s;letter-spacing:.3px}
.bb:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,1);transform:translateY(-3px)}
/* SECTIONS */
.sec{padding:80px 24px}
.cw{max-width:1240px;margin:0 auto}
.sh{text-align:center;margin-bottom:56px}
.sh h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:34px;color:var(--navy);margin-bottom:18px;line-height:1.15;letter-spacing:-.5px}
.sh h2 span{color:var(--accent)}
.sep{width:44px;height:4px;background:var(--accent);border-radius:2px;margin:0 auto 22px}
.sh p{font-size:15px;color:var(--gd);max-width:560px;margin:0 auto;line-height:1.75}
/* PRODUITS */
.pb{background:#f0f3f8}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pcard{
background:#fff;border-radius:12px;
border:1px solid rgba(0,0,0,.07);
overflow:hidden;
transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s;
cursor:pointer;
display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(11,28,53,.14)}
/* Image zone */
.pimg{
height:220px;position:relative;overflow:hidden;
background:linear-gradient(160deg,#eef1f7 0%,#f8f9fc 100%);
}
.pimg::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:40px;
background:linear-gradient(to top,rgba(240,243,248,.7),transparent);
pointer-events:none;z-index:1;
}
.pimg img{
width:100%;height:100%;object-fit:contain;
padding:20px 16px 14px;
transition:transform .45s cubic-bezier(.25,.46,.45,.94);
box-sizing:border-box;
}
.pcard:hover .pimg img{transform:scale(1.07)}
.pimg-cover{display:none}
/* Badge */
.pbadge{
position:absolute;top:12px;left:12px;z-index:2;
font-family:'Montserrat',sans-serif;font-weight:700;font-size:9.5px;
text-transform:uppercase;letter-spacing:1.2px;
padding:5px 12px;border-radius:20px;
}
.bn{background:var(--navy);color:#fff}
.bo{background:#e09000;color:#fff}
/* Contenu card */
.pbd{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column}
.pcat{
font-family:'Montserrat',sans-serif;font-weight:700;font-size:9.5px;
text-transform:uppercase;letter-spacing:2px;color:var(--sky);margin-bottom:7px;
}
.pname{
font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;
color:var(--navy);margin-bottom:14px;line-height:1.3;flex:1;
}
/* Prix */
.pprice{
display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
margin-bottom:18px;
}
.pprice{font-family:'Montserrat',sans-serif;font-weight:900;font-size:19px;color:var(--accent)}
.pprice small{
font-size:10.5px;color:var(--gray);font-weight:500;
display:block;width:100%;margin-top:-8px;letter-spacing:.2px;
}
/* CTA card */
.plnk{
display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--navy);color:#fff;padding:13px 16px;border-radius:8px;
text-decoration:none;font-family:'Montserrat',sans-serif;
font-weight:700;font-size:12.5px;letter-spacing:.3px;
transition:background .25s,transform .2s;
position:relative;overflow:hidden;
}
.plnk::after{
content:'→';position:absolute;right:16px;
transition:transform .25s;
}
.plnk:hover{background:var(--accent)}
.plnk:hover::after{transform:translateX(4px)}
.sm{text-align:center;margin-top:44px}
.bo2{
display:inline-block;padding:15px 44px;border-radius:8px;
border:2px solid var(--navy);color:var(--navy);
font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;
text-decoration:none;transition:all .25s;letter-spacing:.3px;
}
.bo2:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
/* LOCATION */
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lc h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:32px;color:var(--navy);margin-bottom:16px;line-height:1.2}
.lc h2 span{color:var(--accent)}
.lc p{font-size:14.5px;color:var(--gd);line-height:1.8;margin-bottom:28px}
.tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.tab{padding:10px 20px;border-radius:24px;border:2px solid var(--border);font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;cursor:pointer;transition:all .2s;background:#fff;color:var(--gd)}
.tab.on,.tab:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.lbtns{display:flex;gap:12px;flex-wrap:wrap}
.bs{background:var(--navy);color:#fff;padding:14px 28px;border-radius:6px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-decoration:none;transition:background .2s}
.bs:hover{background:var(--accent)}
.bg2{background:transparent;color:var(--navy);padding:14px 28px;border-radius:6px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;text-decoration:none;border:2px solid var(--border);transition:border-color .2s,color .2s}
.bg2:hover{border-color:var(--navy);color:var(--navy)}
/* Vidéo embed responsive */
.lv{border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.14)}
.lv .vid-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.lv .vid-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
/* USAGES */
.ub{background:var(--off)}
.ug{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.uc{background:#fff;border-radius:8px;border:1px solid var(--border);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}
.uc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.11)}
.up{height:165px;overflow:hidden}
.up img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.uc:hover .up img{transform:scale(1.07)}
.ubd{padding:20px}
.utit{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--navy);margin-bottom:12px}
.ul{list-style:none}
.ul li{font-size:13px;color:var(--gd);padding:5px 0;border-bottom:1px solid var(--off);display:flex;align-items:center;gap:8px}
.ul li:last-child{border:none}
.ul li::before{content:'→';color:var(--accent);font-size:11px;flex-shrink:0}
.ucta{background:var(--navy);border-radius:8px;padding:36px;text-align:center;grid-column:1/-1}
.ucta h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;color:#fff;margin-bottom:22px;line-height:1.5}
.br{display:inline-block;background:var(--accent);color:#fff;padding:14px 38px;border-radius:4px;text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;transition:background .2s,transform .15s}
.br:hover{background:var(--ad);transform:translateY(-2px)}
/* DEVIS */
.ds{background:linear-gradient(135deg,var(--navy) 0%,#1e4080 100%);padding:80px 24px;text-align:center}
.ds h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:32px;color:#fff;margin-bottom:12px}
.ds h2 span{color:#f0c040}
.ds p{font-size:15px;color:rgba(255,255,255,.75);margin-bottom:38px;max-width:540px;margin-left:auto;margin-right:auto}
.dr{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.dtel{color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;text-decoration:none;display:flex;align-items:center;gap:12px}
.dor{color:rgba(255,255,255,.4);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px}
.dbw{background:#fff;color:var(--navy);padding:15px 38px;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;text-decoration:none;transition:transform .15s,box-shadow .2s}
.dbw:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.26)}
/* TEMOIGNAGES */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:54px}
.tc{background:var(--off);border-radius:8px;padding:28px;border:1px solid var(--border);position:relative}
.tc::before{content:'"';font-size:80px;line-height:.6;color:#dde2ea;font-family:Georgia,serif;position:absolute;top:18px;left:22px}
.stars{color:#e09000;font-size:13px;margin-bottom:10px}
.tt{font-size:13.5px;line-height:1.72;color:var(--gd);margin-bottom:20px;padding-top:28px}
.ta{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:#fff;flex-shrink:0}
.tn{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--navy)}
.td2{font-size:12px;color:var(--gray);margin-top:2px}
.logos-title{text-align:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:3px;color:var(--gray);margin-bottom:28px;margin-top:48px}
/* LOGOS CLIENTS */
.lw{
overflow:hidden;
background:#fff;
padding:12px 0;
-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.lt{display:flex;animation:logos 42s linear infinite;white-space:nowrap;align-items:center;gap:0}
.lt:hover{animation-play-state:paused}
@keyframes logos{to{transform:translateX(-50%)}}
.li{
display:inline-flex;align-items:center;justify-content:center;
height:88px;padding:0 28px;flex-shrink:0;
}
.li-inner{
display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid #e8edf5;border-radius:12px;
padding:12px 22px;height:64px;min-width:120px;
box-shadow:0 2px 10px rgba(0,0,0,.06);
transition:box-shadow .3s,transform .3s
}
.li:hover .li-inner{box-shadow:0 8px 28px rgba(0,0,0,.13);transform:translateY(-3px)}
.li img{
height:38px;width:auto;
filter:none;
transition:transform .3s;
display:block
}
/* POURQUOI */
.wb{background:var(--off)}
.wg{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.wc h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:28px;color:var(--navy);margin-bottom:6px}
.wc h2 span{color:var(--accent)}
.wsub{font-size:14px;color:var(--gray);margin-bottom:32px}
.wl{display:flex;flex-direction:column;gap:22px}
.wi{display:flex;gap:16px;align-items:flex-start}
.wico{width:48px;height:48px;border-radius:8px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.wt{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--navy);margin-bottom:4px}
.wd{font-size:13px;color:var(--gd);line-height:1.6}
.wv{border-radius:12px;overflow:hidden;height:440px}
.wv img{width:100%;height:100%;object-fit:cover}
/* BLOG */
.bg3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bc{border-radius:8px;overflow:hidden;border:1px solid var(--border);transition:transform .2s,box-shadow .2s;cursor:pointer}
.bc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.11)}
.bim{height:190px;overflow:hidden;position:relative}
.bim img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bc:hover .bim img{transform:scale(1.07)}
.btag{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;padding:4px 12px;border-radius:3px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:1px}
.bbd{padding:20px}
.bmt{font-size:11px;color:var(--gray);margin-bottom:8px}
.btit{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--navy);line-height:1.4;margin-bottom:10px}
.bex{font-size:13px;color:var(--gd);line-height:1.6;margin-bottom:16px}
.blnk{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;color:var(--accent);text-decoration:none}
.blnk:hover{text-decoration:underline}
/* NEWSLETTER */
.nl{background:var(--navy);padding:52px 24px;text-align:center}
.nl h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;color:#fff;margin-bottom:8px}
.nl p{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:26px}
.nlf{display:flex;max-width:440px;margin:0 auto;gap:8px}
.nlf input{flex:1;padding:13px 18px;border-radius:4px;border:none;outline:none;font-size:14px;font-family:'Open Sans',sans-serif}
.nlf button{background:var(--accent);color:#fff;padding:13px 22px;border:none;border-radius:4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:background .2s;white-space:nowrap}
.nlf button:hover{background:var(--ad)}
/* FOOTER */
footer{background:#060e1c;padding:60px 24px 32px}
.ft{max-width:1240px;margin:0 auto}
.ftt{display:grid;grid-template-columns:1.5fr 1.8fr 1fr 1fr;gap:42px;margin-bottom:48px}
.flogo{text-decoration:none;display:flex;align-items:center;gap:14px;margin-bottom:14px}
.flogo .logo-icon{height:42px;width:auto;display:block;flex-shrink:0}
.flogo span{font-family:'Montserrat',sans-serif;font-weight:900;font-size:13.5px;color:#fff;letter-spacing:.3px;opacity:.92}
.fdesc{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:18px}
.fci{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.fci a{color:rgba(255,255,255,.7);text-decoration:none;font-size:13px}
.fcol h4{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#fff;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block}
.fcol ul{list-style:none}
.fcol li{margin-bottom:7px}
.fcol a{color:rgba(255,255,255,.5);text-decoration:none;font-size:12.5px;transition:color .2s}
.fcol a:hover{color:#fff}
.fci2{display:flex;flex-wrap:wrap;gap:4px}
.fci2 a{color:rgba(255,255,255,.45);text-decoration:none;font-size:11px;padding:2px 8px;background:rgba(255,255,255,.06);border-radius:2px;transition:background .2s}
.fci2 a:hover{background:rgba(255,255,255,.14);color:#fff}
.ftags{display:flex;flex-wrap:wrap;gap:5px;margin-top:18px}
.ftag{background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);padding:4px 11px;border-radius:12px;font-size:11.5px;text-decoration:none;transition:background .2s}
.ftag:hover{background:rgba(255,255,255,.14);color:#fff}
.fb{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.fcopy{font-size:12px;color:rgba(255,255,255,.35)}
.pays{display:flex;gap:7px}
.pay{background:rgba(255,255,255,.1);border-radius:4px;padding:4px 10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;color:rgba(255,255,255,.65)}
/* Fallback images */
img{background:#c8d0d8}
.logo-icon{background:transparent}
/* ══════════════════════════════════════════════════════════════
NAV DROPDOWNS
══════════════════════════════════════════════════════════════ */
.ndrop{position:relative}
.ndrop-trigger{display:flex;align-items:center;gap:4px;cursor:pointer}
.nchev{font-size:10px;opacity:.6;transition:transform .2s}
.ndrop:hover .nchev{transform:rotate(180deg)}
.ndrop-menu{
position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
background:#fff;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.14);
border:1px solid var(--border);min-width:210px;padding:8px 0;
opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);
transition:opacity .2s,transform .2s,visibility .2s;z-index:500;pointer-events:none
}
.ndrop:hover .ndrop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.ndrop-menu a{display:block;padding:10px 18px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;transition:background .15s,color .15s}
.ndrop-menu a:hover{background:var(--off);color:var(--accent)}
.ndrop-menu a:first-child{border-bottom:1px solid var(--border);font-weight:700;color:var(--navy)}
/* Rappel btn in nav */
.nbt-rappel{
background:transparent;border:2px solid var(--accent);color:var(--accent);
padding:9px 18px;border-radius:4px;font-family:'Montserrat',sans-serif;
font-weight:700;font-size:12.5px;cursor:pointer;transition:all .2s;white-space:nowrap
}
.nbt-rappel:hover{background:var(--accent);color:#fff}
/* ══════════════════════════════════════════════════════════════
TRUST BADGES BAR
══════════════════════════════════════════════════════════════ */
.trust-bar{background:#fff;border-bottom:1px solid var(--border);padding:14px 24px}
.trust-items{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;max-width:1240px;margin:0 auto}
.trust-item{display:flex;align-items:center;gap:10px;padding:0 28px}
.trust-ico{width:36px;height:36px;flex-shrink:0;color:var(--accent)}
.trust-ico svg{width:100%;height:100%}
.trust-txt{display:flex;flex-direction:column}
.trust-txt strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;color:var(--navy);line-height:1.2}
.trust-txt span{font-size:11px;color:var(--gray)}
.trust-sep{width:1px;height:38px;background:var(--border);flex-shrink:0}
/* ══════════════════════════════════════════════════════════════
MOSAIC NAVIGATION GRID
══════════════════════════════════════════════════════════════ */
.mosaic-sec{width:100%;overflow:hidden}
.mosaic-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(2,260px);
gap:3px
}
.mosaic-tile{
position:relative;overflow:hidden;display:block;
text-decoration:none;cursor:pointer
}
.mosaic-tile img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.25,.46,.45,.94);
display:block
}
.mosaic-tile:hover img{transform:scale(1.07)}
.mosaic-bg{width:100%;height:100%;position:absolute;inset:0}
.mosaic-bg-navy{background:linear-gradient(135deg,#0d2040 0%,#1a3d72 60%,#0a1830 100%)}
.mosaic-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.28) 50%,rgba(0,0,0,.05) 100%);
transition:background .3s
}
.mosaic-overlay-accent{
background:linear-gradient(to top,rgba(200,30,20,.82) 0%,rgba(180,20,15,.32) 50%,rgba(0,0,0,.05) 100%)
}
.mosaic-tile:hover .mosaic-overlay{background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.36) 60%,rgba(0,0,0,.08) 100%)}
.mosaic-tile.mosaic-accent:hover .mosaic-overlay{background:linear-gradient(to top,rgba(200,30,20,.92) 0%,rgba(180,20,15,.45) 60%,rgba(0,0,0,.08) 100%)}
.mosaic-content{
position:absolute;bottom:0;left:0;right:0;
padding:20px 22px;
transition:transform .3s
}
.mosaic-tile:hover .mosaic-content{transform:translateY(-4px)}
.mosaic-icon{
width:44px;height:44px;margin-bottom:14px;
color:rgba(255,255,255,.85);
background:rgba(255,255,255,.1);border-radius:10px;
display:flex;align-items:center;justify-content:center;padding:10px;box-sizing:border-box
}
.mosaic-icon svg{width:100%;height:100%}
.mosaic-label{
font-family:'Montserrat',sans-serif;font-weight:800;
font-size:16px;color:#fff;line-height:1.2;
text-shadow:0 1px 4px rgba(0,0,0,.4)
}
.mosaic-sub{
font-size:12px;color:rgba(255,255,255,.72);
margin-top:5px;font-weight:500;
text-shadow:0 1px 3px rgba(0,0,0,.4)
}
/* Dark tile (no photo) shows icon always */
.mosaic-dark .mosaic-content{padding:28px 24px}
/* ══════════════════════════════════════════════════════════════
STATS / CHIFFRES CLÉS
══════════════════════════════════════════════════════════════ */
.stats-sec{background:var(--navy);padding:52px 24px}
.stats-grid{display:flex;align-items:center;justify-content:center;max-width:1240px;margin:0 auto;flex-wrap:wrap;gap:0}
.stat-item{text-align:center;padding:0 52px;display:flex;flex-direction:column;align-items:center}
.stat-num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:52px;color:#fff;line-height:1;letter-spacing:-2px}
.stat-plus{font-family:'Montserrat',sans-serif;font-weight:900;font-size:28px;color:var(--accent);line-height:1;margin-top:-6px}
.stat-label{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}
.stat-sep{width:1px;height:70px;background:rgba(255,255,255,.12);flex-shrink:0}
/* ══════════════════════════════════════════════════════════════
APPLICATIONS PAR SECTEUR
══════════════════════════════════════════════════════════════ */
.app-sec{background:var(--off)}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.app-card{
background:#fff;border-radius:14px;border:1px solid var(--border);
padding:30px 24px 24px;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;
transition:transform .22s,box-shadow .22s,border-color .22s;cursor:pointer;
position:relative;overflow:hidden
}
.app-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--accent),#e8342a80);
transform:scaleX(0);transform-origin:left;transition:transform .25s
}
.app-card:hover::before{transform:scaleX(1)}
.app-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.11);border-color:#d0d8e8}
.app-ico{
width:52px;height:52px;margin-bottom:18px;
background:linear-gradient(135deg,#eef2fb,#dce6f8);
border-radius:12px;display:flex;align-items:center;justify-content:center;
color:var(--accent);padding:11px;box-sizing:border-box;
transition:background .22s
}
.app-card:hover .app-ico{background:linear-gradient(135deg,#e0342a18,#e0342a08);color:var(--accent)}
.app-ico svg{width:100%;height:100%}
.app-name{font-family:'Montserrat',sans-serif;font-weight:800;font-size:14px;color:var(--navy);margin-bottom:7px}
.app-desc{font-size:12.5px;color:var(--gd);line-height:1.6}
/* ══════════════════════════════════════════════════════════════
CARTE DES DÉPÔTS
══════════════════════════════════════════════════════════════ */
.depot-sec{background:linear-gradient(180deg,#f8fafd 0%,#fff 100%)}
.depot-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:flex-start;max-width:1240px;margin:0 auto}
.depot-text{padding-top:8px}
.depot-eyelet{font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:3px;margin-bottom:16px}
.depot-text h2{font-family:'Montserrat',sans-serif;font-weight:900;font-size:36px;color:var(--navy);margin-bottom:16px;line-height:1.12;letter-spacing:-1px}
.depot-text h2 span{color:var(--accent)}
.depot-text>p{font-size:15px;color:var(--gd);line-height:1.75;margin-bottom:28px}
.depot-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.depot-stat{background:#fff;border:1px solid #e8edf5;border-radius:12px;padding:14px 16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.depot-stat-num{font-family:'Montserrat',sans-serif;font-weight:900;font-size:22px;color:var(--navy);line-height:1}
.depot-stat-num sup{font-size:12px;font-weight:700}
.depot-stat-label{font-size:11px;color:#9ca3af;margin-top:4px;font-family:'Montserrat',sans-serif;font-weight:600}
.depot-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-bottom:28px}
.depot-city{display:flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--navy);background:#fff;border:1px solid #e8edf5;border-radius:8px;padding:8px 12px;transition:border-color .2s,box-shadow .2s}
.depot-city:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(215,30,30,.1)}
.dcot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.depot-map{background:linear-gradient(135deg,#eef2fb 0%,#e8edf5 100%);border-radius:20px;padding:28px;border:1px solid #d8e0ec;box-shadow:0 8px 32px rgba(13,32,64,.07)}
.map-svg{width:100%;height:auto;display:block}
.map-france{fill:#dde5f2;stroke:#b8c8dc;stroke-width:1.5}
.depot-dot{fill:var(--accent);stroke:#fff;stroke-width:2.5;cursor:pointer;transition:r .2s;filter:drop-shadow(0 2px 4px rgba(215,30,30,.35))}
.depot-dot:hover{r:11}
.depot-dot.depot-eu{fill:#1a3d72;filter:drop-shadow(0 2px 4px rgba(26,61,114,.35))}
.depot-label{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;fill:#0d2040}
.map-route{fill:none;stroke:rgba(215,30,30,.2);stroke-width:1.5;stroke-dasharray:5,4}
/* ══════════════════════════════════════════════════════════════
BOUTON FLOTTANT RAPPEL
══════════════════════════════════════════════════════════════ */
.float-rappel{
position:fixed;bottom:28px;right:28px;z-index:900;
background:var(--accent);color:#fff;border:none;border-radius:50px;
padding:14px 22px;display:flex;align-items:center;gap:10px;
font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;
cursor:pointer;box-shadow:0 6px 24px rgba(232,52,42,.45);
transition:background .2s,transform .2s,box-shadow .2s
}
.float-rappel:hover{background:var(--ad);transform:translateY(-3px);box-shadow:0 10px 32px rgba(232,52,42,.55)}
.float-rappel svg{width:18px;height:18px;flex-shrink:0}
/* ══════════════════════════════════════════════════════════════
MODAL RAPPEL
══════════════════════════════════════════════════════════════ */
.modal-overlay{
position:fixed;inset:0;background:rgba(5,14,36,.62);backdrop-filter:blur(4px);
z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-box{
background:#fff;border-radius:16px;width:100%;max-width:460px;padding:36px;
position:relative;box-shadow:0 24px 64px rgba(0,0,0,.22);
transform:translateY(20px);transition:transform .25s
}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-close{
position:absolute;top:14px;right:16px;background:none;border:none;
font-size:26px;cursor:pointer;color:var(--gray);line-height:1;transition:color .2s
}
.modal-close:hover{color:var(--accent)}
.modal-logo{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.modal-logo span{font-family:'Montserrat',sans-serif;font-weight:900;font-size:13px;color:var(--navy);border-left:2px solid var(--accent);padding-left:10px}
.modal-logo em{display:block;font-style:normal;color:var(--accent);font-size:8px;font-weight:700;letter-spacing:3px}
.modal-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;color:var(--navy);margin-bottom:8px}
.modal-sub{font-size:13.5px;color:var(--gd);line-height:1.6;margin-bottom:24px}
.modal-form{display:flex;flex-direction:column;gap:16px}
.mf-row{display:flex;flex-direction:column;gap:6px}
.mf-row label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11.5px;color:var(--navy);text-transform:uppercase;letter-spacing:.8px}
.mf-row input,.mf-row select{
padding:12px 14px;border:1.5px solid var(--border);border-radius:6px;
font-size:14px;font-family:'Open Sans',sans-serif;outline:none;color:var(--text);
transition:border-color .2s
}
.mf-row input:focus,.mf-row select:focus{border-color:var(--accent)}
.modal-submit{
background:var(--accent);color:#fff;border:none;border-radius:6px;
padding:14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
transition:background .2s,transform .15s;margin-top:4px
}
.modal-submit:hover{background:var(--ad);transform:translateY(-1px)}
.modal-confirm{background:#edf9f0;border:1px solid #a8ddb8;color:#1a7a40;border-radius:6px;padding:14px;font-size:13.5px;font-family:'Montserrat',sans-serif;font-weight:600;text-align:center}
.modal-footer-note{margin-top:18px;font-size:12.5px;color:var(--gray);text-align:center}
.modal-footer-note a{color:var(--navy);text-decoration:none;font-weight:700}
.modal-footer-note a:hover{color:var(--accent)}
/* ══════════════════════════════════════════════════════════════
HAMBURGER BUTTON
══════════════════════════════════════════════════════════════ */
.hamburger{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:42px;height:42px;background:none;border:none;cursor:pointer;
padding:8px;border-radius:6px;transition:background .2s;flex-shrink:0;
}
.hamburger:hover{background:var(--off)}
.hamburger span{
display:block;width:24px;height:2.5px;background:var(--navy);
border-radius:2px;transition:transform .3s,opacity .3s,width .3s;
transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;width:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* ══════════════════════════════════════════════════════════════
MENU MOBILE SLIDE-IN
══════════════════════════════════════════════════════════════ */
.mob-overlay{
display:none;position:fixed;inset:0;background:rgba(5,14,36,.55);
backdrop-filter:blur(3px);z-index:800;
opacity:0;transition:opacity .3s;
}
.mob-overlay.show{display:block;opacity:1}
.mob-menu{
position:fixed;top:0;right:0;bottom:0;width:88%;max-width:340px;
background:#fff;z-index:900;
transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.46,.45,.94);
display:flex;flex-direction:column;overflow:hidden;
}
.mob-menu.open{transform:translateX(0)}
.mob-header{
display:flex;align-items:center;justify-content:space-between;
padding:18px 20px;border-bottom:1px solid var(--border);
background:var(--navy);flex-shrink:0;
}
.mob-close{
background:rgba(255,255,255,.12);border:none;color:#fff;
width:36px;height:36px;border-radius:50%;font-size:18px;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .2s;
}
.mob-close:hover{background:rgba(255,255,255,.24)}
.mob-links{
flex:1;overflow-y:auto;padding:12px 0;
}
.mob-section{border-bottom:1px solid var(--border);padding:8px 0 16px}
.mob-section:last-child{border-bottom:none}
.mob-section-title{
font-family:'Montserrat',sans-serif;font-weight:800;font-size:10px;
text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);
padding:10px 22px 6px;
}
.mob-links a{
display:flex;align-items:center;padding:11px 22px;
font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
color:var(--navy);text-decoration:none;
transition:background .15s,color .15s;border-left:3px solid transparent;
}
.mob-links a:hover{background:var(--off);color:var(--accent);border-left-color:var(--accent)}
.mob-links a.mob-main{
font-weight:700;font-size:15px;padding:13px 22px;
}
.mob-ctas{
padding:18px 20px 28px;border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:10px;flex-shrink:0;
background:var(--off);
}
.mob-tel{
display:flex;align-items:center;justify-content:center;gap:10px;
font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;
color:var(--navy);text-decoration:none;padding:13px;
background:#fff;border-radius:8px;border:1px solid var(--border);
transition:border-color .2s;
}
.mob-tel:hover{border-color:var(--navy)}
.mob-devis{
display:block;text-align:center;background:var(--accent);color:#fff;
padding:14px;border-radius:8px;font-family:'Montserrat',sans-serif;
font-weight:700;font-size:14px;text-decoration:none;transition:background .2s;
}
.mob-devis:hover{background:var(--ad)}
.mob-rappel{
background:transparent;border:2px solid var(--navy);color:var(--navy);
padding:12px;border-radius:8px;font-family:'Montserrat',sans-serif;
font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;
}
.mob-rappel:hover{background:var(--navy);color:#fff}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — TABLETTE (≤1024px)
══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
.hero{grid-template-columns:1fr;height:auto}
.panel{min-height:260px;padding:36px 28px}
.pt{font-size:26px}
.pg{grid-template-columns:repeat(2,1fr)}
.ug{grid-template-columns:repeat(2,1fr)}
.lgrid{grid-template-columns:1fr;gap:36px}
.lgrid .lc{order:1}
.lgrid .lv{order:2}
.wg{grid-template-columns:1fr;gap:36px}
.tg,.bg3{grid-template-columns:1fr 1fr}
.ftt{grid-template-columns:1fr 1fr;gap:28px}
.app-grid{grid-template-columns:repeat(2,1fr)}
.depot-grid{grid-template-columns:1fr;gap:32px}
.stats-grid{flex-wrap:wrap;gap:0}
.mosaic-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,200px)}
.mosaic-label{font-size:14px}
.mosaic-icon{display:none}
.stat-item{padding:20px 28px;flex:1 1 40%}
.stat-sep{display:none}
.trust-items{gap:0}
.trust-item{padding:0 14px}
.trust-sep{display:none}
.nbt-rappel{display:none}
.sec{padding:60px 20px}
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE — MOBILE (≤640px)
══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
/* NAV */
.nlinks{display:none}
.nbt{display:none}
.ntel{display:none}
.nbt-rappel{display:none}
.hamburger{display:flex}
.ni{height:64px}
.logo-icon{height:38px}
/* HERO */
.panel{min-height:220px;padding:28px 20px}
.pt{font-size:22px}
.pt span{font-size:13px}
.ps{font-size:13px;margin-bottom:20px}
.bw,.bb{padding:12px 22px;font-size:12px}
/* TRUST BAR */
.trust-bar{display:none}
/* MOSAIC */
.mosaic-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,150px)}
.mosaic-label{font-size:13px}
.mosaic-sub{font-size:11px}
.mosaic-content{padding:14px 16px}
/* TICKER */
.tit{font-size:10px;padding:0 22px}
/* STATS */
.stats-sec{padding:36px 20px}
.stats-grid{flex-direction:column;gap:0}
.stat-item{padding:18px 0;width:100%}
.stat-num{font-size:40px}
.stat-sep{width:60px;height:1px;margin:0 auto}
/* PRODUITS */
.pg{grid-template-columns:1fr 1fr;gap:12px}
.pimg{height:160px}
.pname{font-size:13px}
.pprice{font-size:15px}
.pbd{padding:14px}
/* LOCATION */
.lgrid{gap:28px}
.lc h2{font-size:24px}
.tabs{gap:6px}
.tab{padding:8px 14px;font-size:11px}
.lbtns{flex-direction:column}
.bs,.bg2{width:100%;text-align:center;padding:14px}
/* USAGES */
.ug{grid-template-columns:1fr 1fr;gap:12px}
.up{height:120px}
.utit{font-size:11px}
.ul li{font-size:12px}
.ucta{padding:24px 16px}
.ucta h3{font-size:14px}
/* SECTEURS */
.app-grid{grid-template-columns:1fr 1fr;gap:12px}
.app-card{padding:20px 14px 18px}
.app-ico{width:40px;height:40px;margin-bottom:12px;border-radius:10px;padding:9px}
.app-name{font-size:12px}
.app-desc{font-size:11px}
/* DEVIS */
.ds h2{font-size:22px}
.dr{flex-direction:column;gap:16px}
.dtel{font-size:20px}
.dbw{width:100%;text-align:center}
/* TÉMOIGNAGES */
.tg{grid-template-columns:1fr}
.bg3{grid-template-columns:1fr}
/* NEWSLETTER */
.nlf{flex-direction:column}
.nlf input,.nlf button{width:100%}
/* FOOTER */
.ftt{grid-template-columns:1fr;gap:28px}
.fb{flex-direction:column;align-items:flex-start;gap:16px}
/* DEPOT */
.depot-list{grid-template-columns:1fr 1fr}
/* FLOTTANT */
.float-rappel span{display:none}
.float-rappel{padding:14px;border-radius:50%}
/* SECTIONS */
.sec{padding:48px 16px}
.sh h2{font-size:24px}
.cw{padding:0}
}