:root{
  --bg:#FFFFFF; --surface:#F4F3F0; --ink:#161A1F; --ink-soft:#6B7280;
  --line:#E7E5E0;
  --accent:#EE6F25; --accent-soft:#FDEBDD;
  --navy:#0D1439;
  --promo:#B3261E;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; font-size:16px; line-height:1.65;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1360px; margin:0 auto; padding:0 40px;}
h1,h2,h3,h4{font-family:'Work Sans', sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.15;}
.eyebrow{font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700;}

header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);}
.topbar{display:flex; font-size:12px; color:#fff; background:var(--navy); padding:8px 0;}
.topbar .wrap{display:flex; justify-content:space-between; width:100%;}
nav.main{display:flex; align-items:center; padding:20px 0;}
.logo{display:flex; align-items:center;}
.logo-img{height:58px; width:auto;}
.logo-chip{background:#fff; padding:10px 16px; display:inline-flex; border-radius:2px;}
.nav-links{display:flex; gap:32px; font-size:14px; font-weight:600; margin-left:60px;}
.nav-links a:hover{color:var(--accent);}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:22px;}
.cart-link{background:var(--ink); color:#fff; padding:11px 20px; font-size:13px; font-weight:700;}
.cart-link:hover{background:var(--accent);}
.search-bar{display:flex; align-items:center; margin-left:auto; margin-right:20px; border-bottom:1px solid var(--line);}
.search-bar input{border:none; background:none; padding:8px 4px; font-size:13.5px; width:150px;}
.search-bar input:focus{outline:none;}
.search-bar button{background:none; border:none; padding:0 8px; cursor:pointer; color:var(--ink-soft);}

.icon-strip{padding:44px 0; border-bottom:1px solid var(--line);}
.icon-strip .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.icon-strip a{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; flex:1; min-width:110px;}
.icon-strip .ic{width:56px; height:56px; color:var(--ink); opacity:.75;}
.icon-strip a:hover .ic{color:var(--accent); opacity:1;}
.icon-strip span{font-size:13.5px; font-weight:600;}

.hero-split-wrap{position:relative; min-height:560px; overflow:hidden;}
.hero-split{position:absolute; inset:0; display:grid; grid-template-columns:0.62fr 1.38fr; opacity:0; visibility:hidden; transition:opacity .7s ease;}
.hero-split.active{opacity:1; visibility:visible; position:relative;}
.hero-split .panel{background:var(--navy); color:#fff; padding:70px 56px; display:flex; flex-direction:column; justify-content:center;}
.hero-split .panel .eyebrow{color:#F5B98A;}
.hero-split .panel h1{color:#fff; font-size:clamp(30px,3.4vw,46px); margin:18px 0 22px; text-transform:uppercase;}
.hero-split .panel p{color:rgba(255,255,255,.72); font-size:15px; max-width:360px; margin-bottom:26px;}
.hero-split .panel .link{font-size:13px; font-weight:700; letter-spacing:.02em; border-bottom:2px solid var(--accent); padding-bottom:4px; display:inline-block; width:fit-content;}
.hero-split .photo{position:relative; overflow:hidden;}
.hero-split .photo img{width:100%; height:100%; object-fit:cover;}
.hero-pager{background:var(--ink); display:flex; align-items:center; gap:26px; padding:16px 56px; font-family:'Work Sans',sans-serif; font-size:13px; color:#8A8F98;}
.hero-pager .pg{cursor:pointer; transition:color .2s;}
.hero-pager .pg:hover{color:#fff;}
.hero-pager .pg.active{color:#fff; text-decoration:underline; text-underline-offset:4px;}
.hero-cta-bar{background:var(--ink); display:flex; justify-content:flex-end;}
.hero-cta-bar a{color:#fff; padding:20px 56px; font-weight:700; font-size:14px; letter-spacing:.03em; display:flex; align-items:center; gap:10px;}
.hero-cta-bar a:hover{background:var(--accent);}

.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.tile{position:relative; aspect-ratio:4/5; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; text-align:center;}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s;}
.tile:hover img{transform:scale(1.05);}
.tile::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,20,57,.05) 0%, rgba(13,20,57,.75) 100%); z-index:1;}
.tile .label{position:relative; z-index:2; color:#fff; padding-bottom:36px;}
.tile .label h3{color:#fff; font-size:24px; text-transform:uppercase; margin-bottom:10px;}
.tile .label span{font-size:12px; font-weight:700; letter-spacing:.05em; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:3px;}

section{padding:90px 0;}
.sec-head{margin-bottom:48px; max-width:640px;}
.sec-head h2{font-size:clamp(26px,2.8vw,36px); margin-top:12px;}
.sec-head p{color:var(--ink-soft); font-size:15px; margin-top:12px;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stat-card{background:#fff; padding:40px 32px; display:flex; flex-direction:column; gap:14px;}
.stat-card .ic{width:34px; height:34px; color:var(--accent);}
.stat-card .num{font-family:'Work Sans',sans-serif; font-size:38px; font-weight:800; color:var(--ink);}
.stat-card .lbl{font-size:13.5px; color:var(--ink-soft);}

.mag-strip{display:grid; grid-template-columns:1fr 1fr 1fr; min-height:340px;}
.mag-col{padding:44px 36px; display:flex; flex-direction:column; justify-content:space-between;}
.mag-col.c1{background:#fff;}
.mag-col.c2{background:var(--surface);}
.mag-col.c3{background:var(--navy); color:#fff;}
.mag-col .eyebrow{font-size:11px; margin-bottom:10px; display:block;}
.mag-col h4{font-size:20px; margin-bottom:14px;}
.mag-col.c3 h4{color:#fff;}
.mag-col p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
.mag-col.c3 p{color:rgba(255,255,255,.72);}
.mag-col .btn{margin-top:20px; align-self:flex-start;}

.btn{display:inline-block; padding:14px 26px; font-weight:700; font-size:13px; letter-spacing:.02em; border:1px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink); font-family:inherit;}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-primary:hover{background:#D45E17;}
.btn-light{background:#fff; color:var(--navy); border-color:#fff;}
.btn-light:hover{background:transparent; color:#fff;}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-sm{padding:9px 16px; font-size:12px;}
.btn-danger{border-color:#B3261E; color:#B3261E;}

.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.prod-card{background:transparent; display:flex; flex-direction:column;}
.prod-thumb{aspect-ratio:1/1; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink); position:relative; overflow:hidden;}
.prod-thumb img{width:100%; height:100%; object-fit:cover;}
.prod-thumb svg{width:48%; height:48%; opacity:.4;}
.prod-info{padding:16px 0 0; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod-cat{font-size:11px; text-transform:uppercase; color:var(--accent); letter-spacing:.06em; font-weight:700;}
.prod-info h3{font-size:15px; font-weight:600;}
.prod-price{margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:14px; padding-top:8px;}
.prod-price .amount{font-weight:700;}

/* Badges promotion */
.promo-badge{position:absolute; top:10px; left:10px; z-index:2; background:var(--promo); color:#fff; font-size:11px; font-weight:800; padding:5px 10px; border-radius:2px;}
.price-row{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.price-old{text-decoration:line-through; color:var(--ink-soft); font-size:12.5px;}
.price-now{font-weight:800; color:var(--promo);}
.price-now.no-promo{color:var(--ink);}

.logo-band{display:flex; flex-wrap:wrap; gap:48px; align-items:center; justify-content:space-between;}
.logo-band .cell{flex:1; min-width:110px; display:flex; align-items:center; justify-content:center; padding:6px;}
.logo-band .cell img{max-width:100%; max-height:64px; object-fit:contain;}

.logo-marquee{overflow:hidden; width:100%; position:relative;}
.logo-marquee::before, .logo-marquee::after{content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.logo-marquee::before{left:0; background:linear-gradient(90deg, #fff, transparent);}
.logo-marquee::after{right:0; background:linear-gradient(270deg, #fff, transparent);}
.logo-marquee-track{display:flex; align-items:center; gap:70px; width:max-content; animation:scroll-logos 28s linear infinite;}
.logo-marquee-track img{height:48px; width:auto; max-width:none; object-fit:contain; flex:none;}
.logo-marquee:hover .logo-marquee-track{animation-play-state:paused;}
@keyframes scroll-logos{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* Témoignages clients */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testimonial-card{background:var(--surface); padding:32px; display:flex; flex-direction:column; gap:16px;}
.testimonial-card .stars{color:var(--accent); font-size:14px; letter-spacing:2px;}
.testimonial-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; flex:1;}
.testimonial-card .author{font-size:13px; font-weight:700; color:var(--ink);}

.form-grid{display:grid; gap:16px; max-width:520px;}
label{font-size:13px; font-weight:600; margin-bottom:6px; display:block;}
input, textarea, select{width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent);}
textarea{resize:vertical; min-height:110px;}
table{width:100%; border-collapse:collapse; font-size:14px;}
table th, table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left;}
table th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;}
.badge{display:inline-block; padding:3px 10px; font-size:11px; border-radius:20px;}
.badge-new{background:var(--accent-soft); color:var(--accent);}
.badge-ok{background:#E3F1E5; color:#1E7B34;}
.badge-warn{background:#FDEEDC; color:#B3610A;}
.cart-row{display:grid; grid-template-columns:64px 1fr auto auto auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line);}
.cart-row .thumb{width:64px; height:64px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink);}
.cart-row .thumb svg{width:60%;height:60%;}
.qty-input{width:60px; padding:8px;}
.cart-total{display:flex; justify-content:space-between; font-size:20px; font-weight:700; padding:20px 0; border-top:2px solid var(--ink);}
.alert{padding:14px 18px; font-size:14px; margin-bottom:20px; border-left:3px solid var(--accent); background:var(--accent-soft);}
.alert-ok{border-color:#1E7B34; background:#E3F1E5;}
.breadcrumb{margin-bottom:24px;}
.breadcrumb ol{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--ink-soft);}
.breadcrumb li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--line);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb li[aria-current]{color:var(--ink); font-weight:600;}
.filter-bar{display:flex; gap:14px; flex-wrap:wrap; align-items:end; margin-bottom:40px; padding:24px; background:var(--surface);}
.filter-bar > div{display:flex; flex-direction:column; gap:6px;}
.filter-bar label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.filter-bar select, .filter-bar input{padding:9px 10px; font-size:13px;}
.filter-bar .price-range{display:flex; gap:8px; align-items:center;}
.filter-bar .price-range input{width:80px;}

footer{background:var(--navy); color:#DCE2E7; padding:70px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.5fr .8fr .8fr .8fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.14);}
footer h5{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8EA0AC; margin-bottom:16px; font-weight:700;}
footer ul li{margin-bottom:10px; font-size:14px;}
footer ul a:hover{color:#fff;}
.foot-desc{color:#9BAAB6; font-size:14px; margin-top:16px; max-width:280px;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12px; color:#8EA0AC; flex-wrap:wrap; gap:10px;}

@media(max-width:1100px){
  .wrap{padding:0 24px;}
  .hero-split{grid-template-columns:1fr;}
  .tile-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .mag-strip{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .testimonials-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .search-bar{display:none;}
  .icon-strip .row{justify-content:center;}
}
