:root{
  --red:#e21212;--red-hover:#d01111;--red-pressed:#bd0f0f;
  --blue:#006af5;--light-blue:#ccdff9;
  --black:#161616;--dark:#333;--grey:#454545;--mid:#757575;--soft:#989898;
  --low:#d8d8d8;--border:#ececec;--light:#f5f5f5;--white:#fff;
  --green:#007a38;--yellow:#ffdb00;
  --sh1:0 2px 4px rgba(69,69,69,.08),0 0 2px rgba(69,69,69,.14);
  --sh-arrow:0 0 2px rgba(53,53,53,.16),0 3px 6px rgba(53,53,53,.16);
  --sh-panel:0 0 2px rgba(69,69,69,.16),0 3px 6px rgba(69,69,69,.16);
  --font:Poppins,Arial,sans-serif;--display:'Bebas Neue',Impact,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--light);color:var(--dark);font:400 16px/1.2 var(--font)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{display:block}
.site{width:1024px;max-width:100%;margin:0 auto;padding:0 16px}

/* ===== HEADER ===== */
.header{background:#fff;height:160px;margin:0 -16px;padding:0 16px;position:relative;z-index:70;border-bottom:1px solid var(--border)}
.header-top{display:flex;align-items:flex-start;padding-top:39px}
.logo{width:48px;height:48px;margin-right:16px;background:var(--red);display:grid;place-items:center;flex:none}
.logo span{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--red);font:800 22px/1 var(--font)}
.search{position:relative;flex:1;max-width:465px}
.search form{display:flex;height:48px;border:1px solid var(--dark);border-radius:3px;background:#fff}
.search input{flex:1;min-width:0;height:45px;border:0;outline:0;padding:15px 16px;font:400 13.33px var(--font);color:#000;background:#fff;text-overflow:ellipsis}
.search input::placeholder{color:#767676}
.search input::-webkit-search-cancel-button{display:none}
.search .clear{display:none;width:32px;color:var(--blue);font-size:14px}
.search.has-text .clear{display:block}
.search .go{width:48px;height:46px;background:var(--dark);display:grid;place-items:center;flex:none}
.search .go:hover{background:var(--black)}
.search .go svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.suggest{display:none;position:absolute;top:100%;left:0;margin-top:10px;width:772px;max-width:92vw;background:#fff;padding:16px 16px 8px;box-shadow:var(--sh-panel);z-index:90}
.search.open .suggest{display:block}
.suggest h3{font:800 16px/20px var(--font);padding-left:16px;margin-bottom:16px}
.suggest li{height:50px;display:flex;align-items:center;gap:16px;padding-left:16px;cursor:pointer}
.suggest li:hover{background:var(--light)}
.suggest li svg{width:14px;height:14px;stroke:var(--grey);fill:none;stroke-width:2;flex:none}
.suggest li b{font-weight:800}
.suggest .all{font-size:14px}
.tools{display:flex;margin-left:24px}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:120px;height:46px;padding:0 10px;font-size:13px;line-height:16px;text-align:center;position:relative}
.tool+.tool::before{content:"";position:absolute;left:0;top:8px;bottom:8px;border-left:1px solid var(--border)}
.tool svg{width:22px;height:22px;stroke:var(--black);fill:none;stroke-width:1.8;margin-top:-6px}
.tool span{white-space:nowrap}
.nav{display:flex;align-items:center;height:34px;margin-top:31px;position:relative}
.rayons{display:flex;align-items:center;gap:12px;height:34px;padding-right:20px;color:#000}
.rayons svg{width:20px;height:20px;stroke:#000;stroke-width:2.2;fill:none}
.nav a.item{padding:0 16px;position:relative;font-size:16px;line-height:18px}
.nav a.item+a.item::before{content:"";position:absolute;left:0;top:2px;bottom:2px;border-left:1px solid var(--low)}
.nav .hot{color:var(--red);font-weight:800}
.nav .eco{color:var(--green)}
.menu{display:none;position:absolute;top:34px;left:0;width:215px;background:#fff;box-shadow:var(--sh-panel);z-index:95}
.menu.open{display:block}
.menu a{display:block;padding:9px 17px;font-size:13px;line-height:14.6px;border-bottom:1px solid var(--border)}
.menu a:hover{background:var(--light)}
.menu a.eco{color:var(--green)}

/* ===== BLOCS GÉNÉRIQUES ===== */
section{margin-top:20px}
h2.st{font:800 18px/23px var(--font);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
h2.st .dots3{width:20px;height:20px;color:#000}
.car{position:relative}
.track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;flex:none}
.arrow{position:absolute;top:50%;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:var(--sh-arrow);display:grid;place-items:center;transform:translateY(-50%);z-index:3}
.arrow svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:3}
.arrow.prev{left:-8px}.arrow.next{right:-8px}
.pager{display:flex;justify-content:center;gap:8px;margin-top:12px}
.pager i{width:8px;height:8px;border-radius:50%;background:var(--low)}
.pager i.on{background:var(--blue)}

/* ===== HERO ===== */
.hero{background:#fff;margin:20px -16px 0;padding:16px 24px 12px}
.hero-wrap{position:relative}
.slide{display:none;height:260px;padding:0 8px}
.slide.on{display:flex}
.slide .visual{flex:0 0 62%;background:#f5f5f7;border-radius:30px;position:relative;overflow:hidden}
.slide .visual svg{position:absolute;inset:0;width:100%;height:100%}
.slide .txt{flex:1;padding:12px 0 0 24px;position:relative}
.slide .txt h2{font:400 56px/.95 var(--display);color:#000;text-transform:uppercase}
.slide .txt .price{margin-top:18px;font-weight:800;font-size:18px;color:var(--red)}
.slide .txt .price big{font:400 36px var(--display);letter-spacing:.5px}
.slide .txt .price small{font:400 15px var(--font);color:#000}
.slide .txt p{margin-top:12px;font-size:14px;line-height:17px;color:#111}
.cta-s{position:absolute;right:0;bottom:0;background:var(--red);color:#fff;font:400 22px/1 var(--display);letter-spacing:.8px;padding:10px 20px;border-radius:30px}
.cta-s:hover{background:var(--red-hover)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.tab{height:48px;border:1px solid var(--low);border-radius:2px;background:#fff;font-size:16px}
.tab.on{background:var(--black);border-color:var(--black);color:#fff}

/* ===== 3 CARRÉS ===== */
.squares{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.sq{background:#fff;padding:8px 8px 0;display:flex;flex-direction:column;aspect-ratio:501/538}
.sq .img{flex:1;min-height:0;border-radius:16px;position:relative;overflow:hidden}
.sq .img svg{position:absolute;inset:0;width:100%;height:100%}
.sq .foot{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:400 18px var(--display);letter-spacing:.4px}
.sq .foot b{color:var(--red);font-weight:400}
.sq .foot svg{width:14px;height:14px;stroke:#000;fill:none;stroke-width:3}

/* ===== RÉASSURANCE ===== */
.reass{display:flex;align-items:center;background:#fff;min-height:85px;padding:0 16px}
.reass h4{font:800 18px/1.1 var(--font);color:var(--red);width:80px;flex:none}
.reass .it{display:flex;align-items:center;gap:12px;flex:1;padding:0 16px;font-size:13px;line-height:15px;font-weight:600;position:relative}
.reass .it+.it::before{content:"";position:absolute;left:0;top:-8px;bottom:-8px;border-left:1px solid var(--border)}
.reass .ic{width:32px;height:32px;flex:none}

/* ===== TUILES CATÉGORIES ===== */
.tile{width:158px;background:#fff;border-radius:4px;box-shadow:var(--sh1);padding:8px 8px 10px;text-align:center}
.tile .im{height:142px;background:var(--light);border-radius:2px;display:grid;place-items:center}
.tile .im svg{width:78%;height:78%}
.tile b{display:block;font:800 16px/20px var(--font);margin-top:10px;min-height:40px}
.tile.red{background:var(--red);color:#fff}
.tile.red .im{background:#fff}
.tile .links{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;text-align:left}
.tile .links a{display:block;font-size:13px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .links a:hover{text-decoration:underline}
.tile.big{width:158px}
.brand{width:158px;height:112px;background:#fff;box-shadow:var(--sh1);border-radius:2px;display:grid;place-items:center;font:800 24px var(--font);color:#111}

/* ===== CARTES PRODUIT ===== */
.card{width:244px;background:#fff;border-radius:4px;box-shadow:var(--sh1);padding:16px;position:relative}
.card .im{height:150px;display:grid;place-items:center;margin-bottom:8px;position:relative}
.card .im svg{height:140px;width:auto}
.card .nrg{position:absolute;left:0;bottom:0;background:#2ba84a;color:#fff;font:800 12px/1 var(--font);padding:5px 14px 5px 8px;clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%)}
.card .nrg.y{background:#f2c200;color:#000}
.card .tech{position:absolute;left:0;top:-4px;font:800 11px/1 var(--font);display:flex;align-items:center;gap:4px}
.card .tech i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#e21212 0 25%,#006af5 0 50%,#ffdb00 0 75%,#2ba84a 0)}
.card .t{font-size:14px;line-height:18px;min-height:36px}
.card .t b{font-weight:800}
.card .stars{margin:8px 0;font-size:13px}
.card .stars i{color:var(--yellow);font-style:normal;font-size:16px}
.card .cmp{display:flex;align-items:center;gap:12px;font-size:14px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:12px}
.card .cmp i{width:24px;height:24px;border:1px solid var(--mid);border-radius:2px}
.card .by{font-size:14px;margin-bottom:10px}
.card .by b{color:var(--red)}
.badge{display:inline-block;background:var(--red);color:#fff;font:800 12px/1 var(--font);padding:5px 8px;border-radius:2px;text-transform:uppercase}
.price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.price b{font:800 28px/32px var(--font);color:var(--red)}
.price s{font-size:11px;color:var(--mid)}
.fine{font-size:11px;color:var(--mid);margin:2px 0 12px}
.add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;border-radius:1000px;background:var(--red);color:#fff;font:800 14px/20px var(--font);padding:0 16px}
.add:hover{background:var(--red-hover)}.add:active{background:var(--red-pressed)}
.add svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}

/* ===== BANNIÈRES ===== */
.bans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ban{height:120px;background:var(--yellow);border-radius:2px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 24px;position:relative;overflow:hidden}
.ban b{font:400 34px/1 var(--display);color:#000}
.ban p{font:800 13px/1.2 var(--font);max-width:190px;text-align:center}
.ban svg{margin-right:96px}
.ban .j{background:var(--red);color:#fff;font:400 15px/1 var(--display);padding:6px 12px;border-radius:2px;position:absolute;right:12px;bottom:10px}
.ban.green{background:#2fdc6e}
.ban.blue{background:#1d4fff;color:#fff}
.ban.blue b{color:#fff}

.srv{width:327px;background:#fff;border-radius:4px;box-shadow:var(--sh1);padding:8px 8px 14px;text-align:center}
.srv .im{height:150px;background:var(--light);border-radius:2px;display:grid;place-items:center}
.srv .im svg{height:110px;width:auto}
.srv b{display:block;font:600 16px/20px var(--font);margin-top:14px}
.reprise{background:#2fdc6e;padding:12px;margin-top:20px}
.reprise .in{background:#fff;border-radius:30px;height:128px;display:flex;align-items:center;padding:0 24px;gap:28px;position:relative}
.reprise .lg{font:400 34px/.9 var(--display);color:#111;display:flex;align-items:center;gap:8px}
.reprise h3{font:400 38px/1 var(--display);color:#111}
.reprise p{font-size:14px}
.reprise .mini{display:flex;gap:24px;font-size:12px;margin-top:6px}
.reprise .go{position:absolute;right:20px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.reprise .go svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3}
.conseil{width:327px;background:#fff;border-radius:4px;box-shadow:var(--sh1);padding:16px;text-align:center}
.conseil .im{height:170px;border-radius:12px;margin-bottom:16px;overflow:hidden}
.conseil .im svg{width:100%;height:100%}
.conseil small{display:block;font:600 10px/1 var(--font);letter-spacing:2.5px;color:var(--grey);text-transform:uppercase;margin-bottom:12px}
.conseil h3{font:800 16px/21px var(--font);min-height:42px}
.conseil a.l{display:block;text-align:right;margin-top:14px;font-size:14px;color:var(--blue);text-decoration:underline}
.sub{font:800 18px/23px var(--font);margin:28px 0 12px}
.sub::before{content:"› ";font-weight:800}
.acc{background:#fff;padding:20px 16px;display:flex;justify-content:space-between;font:400 20px var(--font);margin-top:20px;color:var(--dark)}
.acc svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:3}

/* ===== FOOTER ===== */
footer{margin:20px -16px 0;background:#fff;font-size:14px}
.fband{background:var(--dark);color:#fff;display:flex;justify-content:space-around;padding:28px 16px 24px;text-align:center}
.fband div{width:200px;font:800 13px/16px var(--font)}
.fband i{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#fff;margin:0 auto 14px}
.fband svg{width:38px;height:38px}
.fband i img{width:40px;height:40px;object-fit:contain}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:28px 16px 12px}
.fcols h5{font:800 14px/1.2 var(--font);text-transform:uppercase;margin:20px 0 14px}
.fcols h5:first-child{margin-top:0}
.fcols a{display:block;font-size:15px;line-height:27px;color:var(--dark)}
.fcols a:hover{text-decoration:underline}
.copy{border-top:1px solid var(--border);padding:16px;text-align:center;color:var(--mid);font-size:12px}

@media(max-width:820px){.reass{flex-wrap:wrap;height:auto;row-gap:12px;padding:12px 0}.reass .it{flex:1 1 45%}.nav{overflow-x:auto;overflow-y:hidden;white-space:nowrap;height:auto;min-height:34px;scrollbar-width:none}.nav a.item{flex:none}.header-top{flex-wrap:wrap;gap:8px;padding-top:16px}.tools{margin-left:0;flex-wrap:wrap}.tool{width:auto;min-width:56px}.tool span{display:none}.squares{grid-template-columns:1fr}.slide{flex-direction:column;height:auto}.slide .visual{height:200px}.bans{grid-template-columns:1fr}.fcols{grid-template-columns:1fr}.fband{flex-wrap:wrap;gap:16px}}
.ic{width:1.1em;height:1.1em;vertical-align:-.2em;display:inline-block}
.card .im img{max-width:100%;max-height:140px;width:auto;height:auto}.tile .im img{max-height:78%;max-width:78%}

/* ===== ACCUEIL : rendu compact façon grande enseigne ===== */
.home{background:#fff}
.home .site{width:1077px}
.home section{margin-top:16px}
.home h2.st{font:500 16px/20px var(--font);margin-bottom:10px}
.home .squares{gap:16px}
.home .sq .foot{font-size:19px}
.home .reass{box-shadow:var(--sh1);min-height:80px}
.home .reass h4{font:600 16px/1.2 var(--font);width:110px}
.home .reass .it{font-size:11px;line-height:13px;font-weight:500}
.home .cats-sec .track{gap:14px}
.home .tile{width:116px;box-shadow:none;border-radius:0;padding:5px 5px 10px;background:#fff;flex:none}
.home .tile .im{height:92px;background:var(--light);border-radius:0}
.home .tile .im img{max-height:84%;max-width:84%;mix-blend-mode:multiply}
.home .tile .im svg{width:auto;height:80%}
.home .tile b{font:500 13px/16px var(--font);margin-top:10px;min-height:32px}
.home .pub{text-align:center;font-size:6px;color:var(--mid);margin:10px 0 28px}
.home #products{gap:5px}
.home #products .card{width:168px;padding:10px 12px;box-shadow:var(--sh1);border-radius:3px}
.home #products .card .im{height:100px;margin-bottom:12px}
.home #products .card .im svg,.home #products .card .im img{max-height:90px}
.home #products .card .t{font-size:10px;line-height:13px;min-height:26px;margin-top:20px}
.home #products .card .stars{font-size:9px;margin:6px 0}
.home #products .card .stars i{font-size:11px}
.home #products .card .cmp{font-size:10px;padding:10px 0;border:0;margin-bottom:6px;gap:8px}
.home #products .card .cmp i{width:15px;height:15px}
.home #products .card .by{font-size:10px;margin:14px 0 18px}
.home #products .card .badge{font-size:8px;padding:3px 5px}
.home #products .card .price b{font-size:18px;line-height:20px}
.home #products .card .price s{font-size:8px}
.home #products .card .fine{font-size:7px}
.home #products .card .add{display:none}

/* ===== MOBILE (≤600px) : en-tête compact, cartes larges, défilement tactile ===== */
@media(max-width:600px){
  .home,body{background:var(--light)}
  .site{padding:0 12px}
  .header{position:sticky;top:0;height:auto;margin:0 -12px;padding:8px 12px}
  .header-top{padding-top:0;flex-wrap:nowrap;gap:8px}
  .logo{display:none}
  .search{max-width:none}
  .search form{height:44px}
  .tools{display:none}
  .nav{margin-top:0;height:auto;min-height:0}
  .nav a.item{display:none}
  .rayons{height:44px;flex-direction:column;gap:2px;padding:0;font-size:12px}
  .header{display:flex;align-items:center;gap:8px}
  .nav{order:-1}
  .header-top{flex:1;min-width:0}
  html,body{overflow-x:hidden}
  .slide .visual{flex:none;height:200px}
  .slide .txt{padding:12px 0 56px}
  .arrow{display:none}
  .home h2.st{font:500 18px/23px var(--font);margin-bottom:12px}
  .home .hero{margin:12px -12px 0;padding:12px}
  .home .tile{width:140px;padding:8px 8px 10px;box-shadow:var(--sh1);border-radius:4px}
  .home .tile .im{height:110px;border-radius:2px}
  .home .tile b{font:500 14px/18px var(--font);min-height:36px}
  .home #products .card,.card{width:78vw;padding:16px}
  .home #products .card .im{height:150px}
  .home #products .card .t{font-size:14px;line-height:18px;min-height:36px}
  .home #products .card .stars{font-size:13px}
  .home #products .card .cmp{font-size:14px}
  .home #products .card .by{font-size:14px}
  .home #products .card .badge{font-size:12px;padding:5px 8px}
  .home #products .card .price b{font-size:28px;line-height:32px}
  .home #products .card .price s{font-size:11px}
  .home #products .card .fine{font-size:11px}
  .home .pub{font-size:9px}
  .brand{width:110px;height:100px;font-size:18px;flex:none}
  .tile.big,.srv,.conseil{width:78vw}
  .reass .it{flex:1 1 100%}
  .acc{font-size:16px}
}

/* slide pleine largeur (bannière image) */
.slide.full{padding:0}
.slide.full img{width:100%;height:100%;object-fit:contain;display:block}
.tabs{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
@media(max-width:600px){.slide.full{height:auto}.slide.full img{height:auto}}

/* ===== RÉSULTATS DE RECHERCHE : rangée de produits en tête ===== */
.qstrip{display:flex;gap:8px;overflow-x:auto;margin:12px 0;padding-bottom:4px;scrollbar-width:none}
.qstrip a{flex:none;width:104px;background:#fff;text-align:center;padding:8px 6px;box-shadow:var(--sh1);border-radius:3px}
.qstrip .im{display:grid;place-items:center;height:70px}
.qstrip .im img,.qstrip .im svg{max-height:64px;max-width:90%;width:auto;height:auto}
.qstrip small{display:block;font-size:11px;line-height:13px;margin-top:6px}