/* ===== Polices (hébergées localement, aucune requête vers un tiers) ===== */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:800;font-style:italic;font-display:swap;src:url(/assets/fonts/barlow-latin-800-italic.woff2) format("woff2")}
/* Polices de secours calibrées (Arial redimensionné) : le passage à la vraie police ne décale plus la page (CLS) */
@font-face{font-family:"Inter Fallback";font-weight:400 500;src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:104.8%;ascent-override:92.6%;descent-override:22.9%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:101.8%;ascent-override:95.3%;descent-override:23.6%;line-gap-override:0%}
@font-face{font-family:"Barlow Fallback";font-weight:600 900;font-style:normal;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:91.5%;ascent-override:109.3%;descent-override:21.9%;line-gap-override:0%}
@font-face{font-family:"Barlow Fallback";font-weight:600 900;font-style:italic;src:local("Arial Bold Italic"),local("Arial-BoldItalicMT"),local("Helvetica Bold Oblique"),local("Liberation Sans Bold Italic");size-adjust:89%;ascent-override:112.4%;descent-override:22.5%;line-gap-override:0%}

/* ===== Variables ===== */
:root{
  --navy:#17191d; --navy-2:#24282e; --blue:#b43a0a; --accent:#cf4509; --accent-dark:#a83807;
  --tint:#f5f7fb; --line:#dde3ee; --ink:#162033; --muted:#5a6678;
  --danger:#a32121; --ok:#14532d;
  --radius:14px; --maxw:112rem;
  --font:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow","Barlow Fallback","Arial Narrow",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(20,22,26,.06),0 10px 28px rgba(20,22,26,.10);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:7rem}
body{margin:0;font:1rem/1.6 var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}
.icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(207,69,9,.7);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:50;background:#fff;padding:.5rem 1rem;border-radius:8px}

/* ===== Titres ===== */
h1{margin:.2em 0 .5em;font:800 clamp(1.9rem,4vw,2.7rem)/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--navy)}
h2{margin:0 0 .5rem;font:700 1.35rem/1.25 var(--display);color:var(--navy)}
h3{margin:0 0 .4rem;font:700 1.15rem/1.3 var(--display);color:var(--navy)}
.eyebrow{margin:0 0 .6rem;font:700 .78rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.section-head{margin:3.5rem 0 1.75rem;text-align:center}
.section-head h1,.section-head h2{margin:0;font:800 clamp(1.7rem,3.5vw,2.4rem)/1.1 var(--display);text-transform:uppercase;color:var(--navy)}
.section-head .sub{margin:.6rem auto 0;max-width:40rem;color:var(--muted)}
.section-head.left{margin:1.5rem 0 1.5rem;text-align:left}
.section-head.left .sub{margin-left:0}

/* ===== Boutons ===== */
.btn,.button,button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.4rem;font:700 .82rem/1.1 var(--font);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--accent);border:0;border-radius:10px;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s}
.btn:hover,.button:hover,button:hover{background:var(--accent-dark)}
.btn:active,.button:active,button:active{transform:translateY(1px)}
form button{margin-top:1rem}
.button{margin-top:1rem}
.btn.block{width:100%}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.75)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
button.secondary{color:var(--navy);background:#fff;border:1.5px solid var(--navy)}
button.secondary:hover{background:var(--tint)}

/* ===== En-tête ===== */
.topbar{margin:0;padding:.45rem 1rem;background:var(--navy);color:#fff;text-align:center;font-size:.85rem;letter-spacing:.02em}
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;max-width:var(--maxw);margin:0 auto;padding:.85rem clamp(1rem,2.2vw,2.5rem)}
.brand{font:800 1.7rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.search{display:flex;position:relative;flex:1 1 16rem;max-width:30rem;margin-left:auto}
.search input{width:100%;margin:0;padding:.65rem 3rem .65rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--tint);font:inherit}
.search button{position:absolute;right:.25rem;top:50%;margin:0;transform:translateY(-50%);width:2.3rem;height:2.3rem;padding:0;border-radius:50%}
.header-actions{display:flex;align-items:center;gap:1.1rem}
.header-actions a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none}
.header-actions a:hover{color:var(--accent)}
.cart-link{position:relative}
.badge-count{min-width:1.3rem;height:1.3rem;padding:0 .35rem;border-radius:999px;background:var(--ink);color:#fff;font:700 .72rem/1.3rem var(--font);text-align:center}
.lang{display:flex;gap:.2rem;padding:.2rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem}
.lang a{padding:.2rem .65rem;border-radius:999px;color:var(--muted);text-decoration:none}
.lang a[aria-current="true"]{background:var(--navy);color:#fff;font-weight:700}
.main-nav{border-top:1px solid var(--line);background:#fff}
.main-nav .nav-inner{display:flex;gap:.25rem 1.75rem;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,2.2vw,2.5rem);overflow-x:auto}
.main-nav a{padding:.8rem 0;color:var(--ink);font:600 .8rem/1 var(--font);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.main-nav a:hover{color:var(--accent);border-color:var(--accent)}
main{max-width:var(--maxw);margin:0 auto;padding:1.5rem clamp(1rem,2.2vw,2.5rem) 4rem}

/* ===== Bannières ===== */
.banner{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius);color:#fff;background:linear-gradient(115deg,#0c0d10 0%,#17191d 55%,#24282e 100%)}
.banner::before{content:"";position:absolute;inset:-25% -8% -25% 52%;z-index:-1;transform:skewX(-16deg);background:linear-gradient(90deg,transparent 0 22%,rgba(234,88,12,.5) 22% 33%,transparent 33% 45%,rgba(91,141,224,.35) 45% 51%,transparent 51%)}
.banner-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.5}
.banner-body{max-width:42rem;padding:clamp(2rem,6vw,4.5rem)}
.banner h1,.banner h2{margin:0 0 .6rem;font:800 clamp(2rem,5vw,3.5rem)/1.05 var(--display);font-style:italic;text-transform:uppercase;color:#fff;max-width:none}
.banner p{margin:0 0 1.25rem;color:#dbe6fb}
.banner .eyebrow{color:#fdba74}
.banner .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.banner .btn{margin-top:0}
.banner .btn:hover{box-shadow:0 0 0 4px rgba(253,186,116,.35)}
.banner .btn.ghost{background:transparent}
.banner.small .banner-body{padding:clamp(1.75rem,4vw,2.75rem)}
.banner.small h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.promos{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));margin:3.5rem 0}

/* ===== Avantages ===== */
.usps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.5rem 0 0}
.usp{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.usp .ico{display:grid;place-items:center;flex:none;width:2.9rem;height:2.9rem;border-radius:10px;background:#fdeee6;color:var(--accent)}
.usp strong{display:block;line-height:1.3}
.usp .sub{color:var(--muted);font-size:.9rem}

/* ===== Catégories ===== */
.categories{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.category{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.category:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.cat-img{display:grid;place-items:center;aspect-ratio:16/9;background:var(--tint);color:#a9bce3;border-bottom:1px solid var(--line)}
.cat-img .icon{width:4rem;height:4rem}
.cat-body{padding:1.25rem 1.4rem 1.5rem}
.cat-body h3{margin:0 0 .35rem;font-size:1.3rem;text-transform:uppercase}
.cat-body p{margin:0 0 1rem;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:.45rem;color:var(--accent);font:700 .78rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase}

/* ===== Cartes produits, grille et carrousel ===== */
.products{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));margin:1.5rem 0;padding:0;list-style:none}
.products>li{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:box-shadow .2s,transform .2s}
.products>li:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.thumb{display:block;aspect-ratio:4/3;background:var(--tint);border-bottom:1px solid var(--line)}
.thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:.75rem}
.noimg{display:flex;align-items:center;justify-content:center;height:100%;color:#8a9ab8;font-size:.9rem}
.card-body{display:flex;flex-direction:column;flex:1;gap:.4rem;padding:1.1rem 1.1rem 1.25rem}
.card-label{margin:0;font:700 .7rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.products h2{margin:0;font:700 1.05rem/1.35 var(--font);color:var(--ink)}
.products h2 a{color:inherit;text-decoration:none}
.products h2 a:hover{color:var(--blue)}
.price-sm{margin:auto 0 .6rem;padding-top:.35rem;font:700 1.2rem/1.2 var(--font);color:var(--navy)}
.carousel{position:relative}
.carousel .products{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max(16rem,calc((100% - 3.75rem)/4));overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;scrollbar-width:thin}
.carousel .products>li{scroll-snap-align:start}
.car-btn{position:absolute;top:34%;z-index:2;display:grid;place-items:center;width:2.8rem;height:2.8rem;margin:0;padding:0;border-radius:50%;color:var(--navy);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.car-btn:hover{background:var(--tint)}
.car-btn.prev{left:-.9rem}.car-btn.next{right:-.9rem}

/* ===== Bandeau conseil ===== */
.cta-band{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin:3.5rem 0 1rem;padding:2rem;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.cta-band h2{margin:0 0 .25rem;font-size:1.6rem;text-transform:uppercase}
.cta-band p{margin:0;color:var(--muted)}
.cta-band .btn{margin:0}

/* ===== Fiche produit ===== */
.product-page{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.noimg.big{aspect-ratio:4/3;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.price{margin:.25rem 0 1rem;font:700 2rem/1.1 var(--font);color:var(--navy)}
.lead{max-width:60ch}
.stock-ok{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 1rem;font-weight:600;font-size:.9rem;color:var(--ok)}
.mini-usps{display:grid;gap:.6rem;margin:1.5rem 0;padding:0;list-style:none}
.mini-usps li{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.95rem}
.mini-usps .icon{color:var(--accent)}
.specs{display:grid;grid-template-columns:max-content 1fr;margin:0 0 2rem;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:12px}
.specs dt,.specs dd{margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.specs dt{background:var(--tint);font-weight:600}
.specs dt:last-of-type,.specs dd:last-of-type{border-bottom:0}
form.inline{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;max-width:28rem;padding:0;background:none;border:0}
form.inline input{width:6rem}
form.inline button{margin-top:0}

/* ===== Formulaires, tableaux ===== */
.auth{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin-top:1.5rem}
form{display:grid;gap:.5rem;align-content:start;padding:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
form.wide{max-width:40rem}
label{margin-top:.5rem;font-weight:600}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
input:not([type=checkbox]),select,textarea{width:100%;margin:0;padding:.65rem .8rem;font:inherit;color:var(--ink);background:#fff;border:1px solid #b5c1d6;border-radius:10px}
input:not([type=checkbox]):focus,select:focus,textarea:focus{border-color:var(--navy)}
input[type=file]{padding:.5rem 0;border:0}
input[type=checkbox]{margin-top:.3rem}
fieldset{margin:1rem 0 0;padding:1rem;border:1px solid var(--line);border-radius:10px}
.summary{padding:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.summary ul{padding-left:1.2rem}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem}
dt{font-weight:600}
dd{margin:0}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
th,td{padding:.75rem;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--tint);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
td input{width:5rem}
.error{padding:.75rem 1rem;color:var(--danger);background:#fdf0f0;border-left:4px solid var(--danger);border-radius:0 8px 8px 0}
.notice{margin:0 0 1.5rem;padding:.75rem 1rem;color:var(--ok);background:#ecf8f0;border-left:4px solid #2f855a;border-radius:0 8px 8px 0}
.hint{color:var(--muted);font-size:.9rem}
.empty{color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prose{max-width:54rem;margin-inline:auto}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.25rem}
.prose table{margin:1rem 0;font-size:.95rem}
.template{padding:1rem 1.25rem;background:var(--tint);border-left:4px solid var(--line);border-radius:0 8px 8px 0}
.message{margin-bottom:1rem}
.badge{display:inline-block;padding:.15rem .6rem;font-size:.85rem;font-weight:600;background:#eef1f5;border:1px solid var(--line);border-radius:999px}
.badge-en_attente_virement{background:#fff7e0;border-color:#e3c36a}
.badge-paye{background:#ecf8f0;border-color:#7bc596}
.badge-expediee{background:#e8f1fa;border-color:#7aa7d1}
.badge-annulee{background:#fdf0f0;border-color:#d99}
.thumbs{display:flex;flex-wrap:wrap;gap:1rem}
.thumbs-item{flex-direction:column;margin:0}
.thumbs-item img{width:7rem;height:5rem;object-fit:cover;border-radius:8px}

/* ===== Administration ===== */
.admin-nav{display:flex;gap:1.25rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.admin-nav a{font-weight:600;text-decoration:none}
.filters{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.filters a[aria-current="page"]{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent)}

/* ===== Pied de page, bouton contact ===== */
.site-footer{margin-top:3rem;background:var(--navy);color:#c9cbcf;font-size:.95rem}
.footer-inner{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));max-width:var(--maxw);margin:0 auto;padding:3rem clamp(1rem,2.2vw,2.5rem) 2rem}
.site-footer h2{margin:0 0 .8rem;font:700 .8rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.site-footer p{margin:0 0 .4rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer nav{display:grid;gap:.4rem}
.footer-brand{font:800 1.5rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.footer-bottom{width:min(calc(var(--maxw) - 2*clamp(1rem,2.2vw,2.5rem)),calc(100% - 2*clamp(1rem,2.2vw,2.5rem)));max-width:none;margin:0 auto!important;padding:1.25rem 0 5rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}
.fab{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.3rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--accent),#e0581a);font-weight:700;text-decoration:none;box-shadow:0 10px 26px rgba(194,65,12,.38)}
.fab:hover{color:#fff;filter:brightness(1.08)}

/* ===== Adaptation mobile ===== */
@media (max-width:52rem){
  .product-page{grid-template-columns:1fr}
  .carousel .products{grid-auto-columns:max(14.5rem,78%)}
  .car-btn{display:none!important}
  .search{order:3;max-width:none;flex-basis:100%}
  .header-actions{margin-left:auto}
  .header-actions .label{display:none}
}
@media (max-width:40rem){
  table{display:block;overflow-x:auto}
  .banner::before{inset:-25% -30% -25% 60%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ===== Correctifs ===== */
input[type=hidden]{display:none!important}
.header-actions a{white-space:nowrap}

/* ===== Interactions ===== */
.site-header{transition:box-shadow .2s}
.site-header.is-scrolled{box-shadow:var(--shadow)}
.hero-slider{position:relative}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.is-active{opacity:1;visibility:visible}
.hero-slider .banner{display:flex;align-items:center;min-height:23rem}
.hero-slider .banner-body{padding-bottom:clamp(3.5rem,7vw,5rem)}
.slider-ui{position:absolute;left:clamp(2rem,6vw,4.5rem);bottom:1.4rem;z-index:3;display:flex;align-items:center;gap:.55rem}
.dot{width:.7rem;height:.7rem;margin:0;padding:0;border-radius:999px;background:rgba(255,255,255,.45);transition:width .25s,background-color .25s}
.dot:hover{background:rgba(255,255,255,.8)}
.dot[aria-current="true"]{width:1.9rem;background:#fff}
.slider-pause{width:2rem;height:2rem;margin:0 0 0 .4rem;padding:0;border-radius:50%;background:rgba(255,255,255,.18)}
.slider-pause:hover{background:rgba(255,255,255,.32)}
.slider-pause .i-play{display:none}.is-paused .slider-pause .i-pause{display:none}.is-paused .slider-pause .i-play{display:inline}
.reveal-pending{opacity:0;transform:translateY(18px)}
.reveal-pending.is-visible{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.cart-link.bump .badge-count{animation:bump .45s ease}
@keyframes bump{40%{transform:scale(1.5);background:var(--accent)}}
.toast{position:fixed;left:50%;bottom:1.5rem;z-index:60;display:flex;align-items:center;gap:1rem;max-width:calc(100vw - 2rem);padding:.85rem 1.2rem;border-radius:12px;color:#fff;background:var(--navy);box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,1.5rem);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.toast a{color:#fdba74;font-weight:700;white-space:nowrap}
.suggest{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:40;margin:0;padding:.3rem;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.suggest a{display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem;border-radius:8px;color:var(--ink);text-decoration:none}
.suggest a:hover,.suggest [aria-selected="true"] a{background:var(--tint)}
.suggest img,.suggest .s-img{width:3rem;height:2.25rem;flex:none;object-fit:contain;background:var(--tint);border-radius:6px}
.suggest .s-name{flex:1;font-size:.9rem;font-weight:600}
.suggest .s-price{font-size:.85rem;font-weight:700;color:var(--navy)}
.suggest .s-empty{padding:.7rem .8rem;color:var(--muted);font-size:.9rem}
.sortbar{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;margin:0 0 1rem;padding:0;background:none;border:0;border-radius:0}
.sortbar p{margin:0}
.sortbar label{display:inline;margin:0 .5rem 0 0}
.sortbar select{width:auto;display:inline-block}
.sortbar button{margin:0 0 0 .5rem;padding:.6rem 1rem}
.gallery{display:block}
.g-main{display:block}
.g-main img,.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:.5rem;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.g-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.6rem;margin:.75rem 0 0;padding:0;list-style:none}
.g-thumb{display:block}
.g-thumb img{aspect-ratio:1;padding:.2rem;border-radius:10px;transition:border-color .15s}
.g-thumb[aria-current="true"] img,.g-thumb:hover img{border-color:var(--accent)}
@media (max-width:52rem){.toast{bottom:5rem}.hero-slider .banner{min-height:26rem}}

/* ===== Pages d'information ===== */
.faq details{margin:.6rem 0;background:#fff;border:1px solid var(--line);border-radius:12px}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:700;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:3px solid rgba(207,69,9,.7);outline-offset:2px;border-radius:12px}
.faq details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--muted)}
.values,.how{display:grid;gap:.9rem;padding-left:1.2rem}
.values li::marker,.how li::marker{color:var(--accent);font-weight:700}
.steps{display:grid;gap:.9rem;margin:1rem 0 1.25rem;padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:.8rem;color:var(--muted)}
.steps li::before{content:"";flex:none;width:1.3rem;height:1.3rem;border-radius:50%;border:2px solid var(--line);background:#fff}
.steps li.done{color:var(--ink);font-weight:600}
.steps li.done::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.prose .cta-band{margin-top:2.5rem}

/* ===== Habillage mobile (bandeau, menu latéral, cartes, conseil, pied de page) ===== */
.topbar{padding:0;overflow:hidden;background:linear-gradient(90deg,var(--navy),var(--blue))}
.ticker{display:flex;width:max-content;margin:0;padding:.5rem 0;list-style:none;animation:ticker 40s linear infinite}
.ticker li{padding:0 2rem;white-space:nowrap;font-weight:600}
.ticker:hover{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker{animation:none;width:auto;justify-content:center;flex-wrap:wrap}.ticker li[aria-hidden]{display:none}}

.burger{display:none;width:2.6rem;height:2.6rem;padding:0;margin:0;border:0;background:transparent;color:var(--ink);border-radius:50%;cursor:pointer}
.burger .icon{width:1.7rem;height:1.7rem}

.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(10,20,40,.55)}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:50;width:min(22rem,88vw);overflow-y:auto;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;padding:0 0 2rem;transform:translateX(-100%);transition:transform .25s}
.drawer.is-open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.1rem;border-bottom:1px solid var(--line);font:800 1.1rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.drawer-close{width:2.4rem;height:2.4rem;padding:0;margin:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);cursor:pointer}
.drawer a,.drawer summary{display:block;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none;cursor:pointer}
.drawer summary{color:var(--blue);background:var(--tint)}
.drawer a.sub{padding-left:1.8rem;font-weight:600;color:var(--muted);border-bottom-color:transparent}
.drawer a:hover,.drawer a.sub:hover{color:var(--accent)}
.drawer-track{margin-top:auto;text-align:center;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem}
body.drawer-open{overflow:hidden}

@media (max-width:52rem){
  html.js .burger{display:inline-flex;align-items:center;justify-content:center}
  html.js .main-nav{display:none}
  .header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;padding:.7rem 1rem}
  html.js .header-inner{grid-template-columns:auto 1fr auto}
  html:not(.js) .header-inner{display:flex}
  .brand{justify-self:center;font-size:1.45rem}
  .search{grid-column:1/-1;order:3;margin:0;max-width:none}
  .header-actions{margin-left:0}
  .header-actions .cart-link{width:2.8rem;height:2.8rem;justify-content:center;border-radius:50%;background:var(--blue);color:#fff;position:relative}
  .header-actions .cart-link:hover{color:#fff}
  .header-actions .cart-link .badge-count{position:absolute;top:-.35rem;right:-.35rem}
  .header-actions a[href*="mon-compte"]{display:none}
}

/* Cartes produit */
.delivery-pill{display:flex;align-items:center;gap:.45rem;margin:0 0 .35rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--tint);color:var(--navy);font:700 .72rem/1.25 var(--font)}
.delivery-pill .icon{color:var(--blue)}
.products .card-label{color:#7f9ad1}
.products h2{font-size:.98rem}
.price-sm{color:var(--blue);font-weight:800}

/* Bloc conseil */
.advice{position:relative;overflow:hidden;margin:3.5rem 0 1rem;padding:2.5rem 1.5rem;border-radius:var(--radius);background:#05070d;color:#fff;text-align:center}
.advice::before{content:"";position:absolute;width:26rem;height:26rem;left:-9rem;top:-14rem;border-radius:50%;background:#aac0ee;opacity:.9}
.advice>*{position:relative}
.advice .eyebrow{color:#9db6ff}
.advice h2{margin:.2rem auto .6rem;max-width:30rem;font-size:1.7rem;text-transform:uppercase;color:#fff}
.advice p{max-width:34rem;margin-left:auto;margin-right:auto;color:#dbe4f7}
.advice .actions{display:grid;gap:.7rem;max-width:26rem;margin-top:1.4rem}
.advice .btn{justify-content:center;margin:0}
.btn.light{background:#fff;color:var(--blue);border:1px solid var(--line)}
.btn.call{background:#16a34a;color:#fff}
.btn.call:hover{background:#15803d;color:#fff}

/* Pied de page repliable */
.fold{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.6rem}
.fold>summary{display:flex;justify-content:space-between;align-items:center;list-style:none;margin:0 0 .8rem;font:700 .8rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#fff;cursor:pointer}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"−";font-size:1.2rem;color:#ff9a62}
.fold:not([open])>summary::after{content:"+"}
@media (min-width:53rem){.fold>summary{pointer-events:none;cursor:default}.fold>summary::after{content:none!important}}
.burger:hover,.drawer-close:hover{background:var(--tint)}
.usps{padding:0;list-style:none}
.header-inner .search{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.header-inner .search input{margin:0}

.dash{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0 0 1.25rem;padding:0;list-style:none}
.dash li{padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--tint)}
.dash strong{display:block;font:800 1.6rem/1.1 var(--display);color:var(--navy)}
.dash span{color:var(--muted);font-size:.85rem}
.dash-low a{display:inline-block;margin:0 .6rem .3rem 0}

.installer{max-width:44rem;margin:2rem auto;padding:0 1rem 3rem}
.installer .checks{list-style:none;padding:0}
.installer label{display:block;margin-top:.8rem;font-weight:600}
.installer input:not([type=checkbox]){width:100%}
.installer .how li{margin:.4rem 0}
.setup-warning{margin-bottom:1.25rem}

/* Menu principal : menus déroulants comme sur le modèle */
.main-nav .nav-inner{overflow:visible;align-items:center;flex-wrap:wrap}
.dd{position:relative}
.dd>summary{list-style:none;padding:.8rem 0;color:var(--ink);font:600 .8rem/1 var(--font);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:"";display:inline-block;margin-left:.45rem;border:.28rem solid transparent;border-top-color:currentColor;transform:translateY(.15rem)}
.dd[open]>summary,.dd>summary:hover{color:var(--accent);border-color:var(--accent)}
.dd-panel{position:absolute;top:100%;left:-.75rem;z-index:30;min-width:15rem;padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.dd-panel a{display:block;padding:.65rem .8rem;border:0;border-radius:8px;font:600 .85rem/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.dd-panel a:hover{background:var(--tint);color:var(--blue);border:0}
.main-nav a.nav-cta{margin-left:auto;padding:.7rem 1.1rem;border:0;border-radius:10px;background:var(--blue);color:#fff}
.main-nav a.nav-cta:hover{background:var(--navy-2);color:#fff;border:0}

/* Étapes, marques, photos de catégories, infos légales */
.buy-steps{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:0;padding:0;list-style:none;counter-reset:none}
.buy-steps li{position:relative;padding:1.4rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.buy-steps h3{margin:.6rem 0 .3rem;font-size:1.1rem}
.buy-steps p{margin:0;color:var(--muted);font-size:.92rem}
.step-n{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--blue);color:#fff;font:800 1rem/1 var(--display)}
.brands{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0;padding:0;list-style:none}
.brands li{padding:.7rem 1.3rem;border:1px solid var(--line);border-radius:999px;background:var(--tint);font:800 1rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.legal-line{font-size:.85rem;opacity:.85}

/* ===== TRAILERSHOP — Améliorations design ===== */

/* Hero slider plus haut */
.hero-slider .banner { min-height: 28rem; }
@media (max-width:52rem) { .hero-slider .banner { min-height: 32rem; } }

/* Catégories : 2 colonnes en large, 3+ en très large */
.categories { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
@media (min-width:80rem) { .categories { grid-template-columns: repeat(4, 1fr); } }

/* Carrousel de marques défilant */
.brands-strip {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  padding: .9rem 0;
  margin: 3rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brands-strip ul {
  display: flex;
  gap: 0;
  width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: brandScroll 32s linear infinite;
}
.brands-strip ul:hover { animation-play-state: paused; }
.brands-strip li {
  padding: .4rem 2rem;
  border-right: 1px solid var(--line);
  font: 800 .95rem/1 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
@keyframes brandScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brands-strip ul { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
}

/* Badge livraison estimée sur les cartes produit */
.delivery-pill {
  background: #e8f5ee;
  border-color: #b7dfc8;
  color: #1a4a2a;
}

/* Section étapes d'achat améliorée */
.buy-steps li { border-left: 3px solid var(--blue); }
.step-n { background: var(--blue); }

/* Bandeau conseil refait */
.advice { background: linear-gradient(135deg, #0c0d10 0%, #17191d 60%, #24282e 100%); }
.advice::before { background: #5a9e7a; }

/* Cartes catégorie : image placeholder colorée */
.cat-img { background: linear-gradient(135deg, #f5f5f3, #e8e8e6); color: #cf4509; }

/* Filtre avancé sur liste produits */
.filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.filter-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.filter-group summary {
  padding: .8rem 1rem;
  font: 700 .8rem/1 var(--font);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tint);
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "+"; font-size: 1.1rem; color: var(--blue); }
.filter-group[open] summary::after { content: "−"; }
.filter-group-body { padding: .7rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; }
.filter-group label { display: flex; align-items: center; gap: .55rem; font-weight: 400; font-size: .9rem; cursor: pointer; margin: 0; }
.filter-group input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--blue); }
.price-range { display: flex; gap: .5rem; align-items: center; }
.price-range input { width: 6.5rem; text-align: right; }

/* Layout liste produits avec sidebar */
.products-layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 60rem) {
  .products-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .filter-sidebar.is-open { display: flex; }
}
.filter-toggle-btn {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
@media (max-width: 60rem) { .filter-toggle-btn { display: inline-flex; } }

/* Badge nouveau / promo */
.badge-new {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font: 700 .7rem/1.4 var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.badge-promo {
  background: #fee2e2;
  color: #7f1d1d;
  border-color: #fca5a5;
}

/* Formulaire contact en 4 étapes */
.contact-stepper {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cs-step {
  flex: 1;
  padding: .75rem .5rem;
  text-align: center;
  font: 700 .78rem/1.2 var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--tint);
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.cs-step:last-child { border-right: 0; }
.cs-step.active { background: var(--blue); color: #fff; }
.cs-step.done { background: #dcfce7; color: #14532d; }
.contact-panel { display: none; }
.contact-panel.active { display: grid; gap: .5rem; }

/* Compteur de produits + tri */
.sortbar { padding: .75rem 1rem; background: var(--tint); border-radius: var(--radius); border: 1px solid var(--line); }

/* Responsive petit mobile */
@media (max-width: 36rem) {
  .buy-steps { grid-template-columns: 1fr; }
  .usp { flex-direction: column; text-align: center; }
  .brands-strip li { padding: .4rem 1.2rem; font-size: .82rem; }
}

/* =====================================================================
   v3 · Anthracite & Orange industriel
   Couche finale : redéfinit les variables, aucune règle précédente supprimée.
   ===================================================================== */
:root{
  --navy:#17191d; --navy-2:#24282e; --blue:#b43a0a; --accent:#cf4509; --accent-dark:#a83807;
  --tint:#f5f5f3; --line:#e1e2e5; --ink:#15171b; --muted:#585e68;
  --ok:#166534; --danger:#b42318;
  --radius:12px; --radius-lg:18px;
  --shadow:0 1px 2px rgba(20,22,26,.06),0 12px 32px rgba(20,22,26,.10);
  /* variables utilisées par la page de confirmation */
  --c-900:#17191d; --c-100:#f5f5f3;
  --g-200:#e1e2e5; --g-500:#6b717b; --g-700:#3d424b;
  --o-50:#fff4ec; --o-200:#fdc9a6; --o-600:#cf4509;
  --ok-bg:#ecfdf3; --warn:#92400e; --warn-bg:#fffbeb;
}
body{background:#fff;color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Titres : sobres, la casse haute reste réservée au hero */
h2,h3{color:var(--navy);letter-spacing:0}
.section-head h1,.section-head h2{text-transform:none;font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.005em}
.section-head .sub{color:var(--muted)}

/* Bandeau et en-tête */
.topbar{background:#111316;color:#e8e8e6;border-bottom:2px solid var(--accent)}
.site-header{border-bottom:0;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(20,22,26,.05)}
.brand{display:inline-flex;align-items:center;color:var(--navy);letter-spacing:.01em}
.brand::before{content:"";display:inline-block;width:.32em;height:1.05em;margin-right:.5rem;background:var(--accent);transform:skewX(-16deg);border-radius:2px}
.search input{background:var(--tint);border-color:var(--line)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(217,72,15,.18)}

/* Boutons */
.btn,.button,button{border-radius:8px;background:var(--accent);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn:hover,.button:hover,button:hover{background:var(--accent-dark)}
.btn.secondary,button.secondary{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.secondary:hover,button.secondary:hover{background:var(--navy);color:#fff}

/* Cartes produit */
.products>li{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:none;transition:border-color .15s,box-shadow .2s,transform .2s}
.products>li:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-3px)}
.thumb{background:var(--tint)}
.price-sm,.price{color:var(--navy);font-family:var(--display);font-weight:800}
.card-label{color:var(--accent-dark)}
.delivery-pill{background:var(--o-50);color:var(--accent-dark);border:1px solid var(--o-200)}

/* Catégories */
.category{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:border-color .15s,box-shadow .2s}
.category:hover{border-color:var(--accent);box-shadow:var(--shadow)}

/* Bloc conseil / appel à l'action */
.advice,.cta-band{background:linear-gradient(135deg,#111316 0%,#262b33 100%)}

/* Filtres et formulaires */
.filter-sidebar{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
input:not([type=checkbox]):focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,65,12,.22);outline:2px solid transparent}
input[type=checkbox]{accent-color:var(--accent)}

/* Pied de page */
.site-footer{background:#111316;color:#c9cbcf;border-top:3px solid var(--accent)}
.site-footer h2{color:#fff}
.site-footer a{color:#e8e8e6}
.site-footer a:hover{color:var(--o-200)}

/* Page de confirmation */
.conf-hero{background:linear-gradient(135deg,var(--ok) 0%,#0f4a26 100%);color:#fff;border-radius:var(--radius-lg);padding:2.25rem 1.5rem;text-align:center;margin-bottom:1.5rem}
.conf-hero h1{color:#fff;margin:0 0 .4rem;text-transform:none}
.conf-hero p{margin:0;color:rgba(255,255,255,.88)}
.conf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start}
.conf-card{background:#fff;border:1px solid var(--g-200);border-radius:var(--radius-lg);padding:1.6rem}
.conf-card h2{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;margin-bottom:1rem}
.conf-alert{display:flex;gap:.6rem;padding:.9rem 1rem;margin-bottom:1.1rem;background:var(--warn-bg);border:1px solid #fde68a;border-radius:10px;color:var(--warn);font-weight:600;font-size:.9rem}
.conf-dl{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 1.4rem;margin:0 0 1rem}
.conf-dl dt{font-weight:700;font-size:.9rem;color:var(--g-700)}
.conf-dl dd{margin:0}
.conf-amount{font:800 1.4rem/1 var(--display);color:var(--c-900)}
.conf-mono{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.conf-ref{display:inline-block;padding:.4rem .75rem;background:var(--o-50);border:1.5px solid var(--o-200);border-radius:8px;color:var(--o-600);font:800 1.05rem/1 var(--display)}
.conf-side{display:flex;flex-direction:column;gap:1rem}
.conf-next{background:var(--c-100)}
.conf-next ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7rem;counter-reset:n}
.conf-next li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;counter-increment:n}
.conf-next li::before{content:counter(n);flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--c-900);color:#fff;font:800 .72rem/1 var(--display)}
.conf-actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:52rem){.conf-grid{grid-template-columns:1fr}.conf-hero{padding:1.75rem 1rem}}

/* =====================================================================
   v4 · Finition design — anthracite & orange industriel
   Couche finale : aucune règle précédente supprimée, tout passe par les variables.
   ===================================================================== */

/* — Hero : fini le bleu marine, plateau anthracite et biseau orange — */
.banner{background:linear-gradient(115deg,#0c0d10 0%,#1b1e23 58%,#2a2f37 100%)}
.banner::before{background:linear-gradient(90deg,transparent 0 22%,rgba(217,72,15,.95) 22% 29%,transparent 29% 34%,rgba(255,255,255,.16) 34% 36%,transparent 36%)}
.banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent)}
.banner-bg{opacity:.38}
.banner p{color:#d6d8dc}
.banner .eyebrow{color:#ff9a62}
.banner .btn.ghost{border-color:rgba(255,255,255,.7)}
.banner .btn:hover{box-shadow:0 0 0 4px rgba(255,154,98,.3)}

/* — En-tête et navigation — */
.main-nav a.nav-cta{background:var(--accent)}
.main-nav a.nav-cta:hover{background:var(--accent-dark)}
.dd-panel a:hover{color:var(--accent)}
.dd-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem .5rem;min-width:min(22rem,calc(100vw - 2rem))}
.dd-wide{min-width:min(36rem,calc(100vw - 2rem))}
.dd-panel a.dd-all{grid-column:span 2;margin-top:.3rem;padding-top:.7rem;border-top:1px solid var(--line);border-radius:0;font-weight:700;color:var(--accent)}
.drawer-backdrop{background:rgba(17,19,22,.62)}
.drawer summary,.drawer-close{color:var(--navy)}
.header-actions .cart-link{--cart-bg:var(--accent)}
@media (max-width:52rem){.header-actions .cart-link{background:var(--accent)}}
.toast{background:var(--navy)}
.toast a{color:#ff9a62}

/* — Pastilles : repère « nouveau / promo » placé dans la vignette — */
.thumb{position:relative}
.badge-tag{position:absolute;top:.65rem;left:.65rem;padding:.25rem .65rem;border-radius:6px;font:700 .7rem/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.badge-new{background:var(--navy);color:#fff;border:0}
.badge-promo{background:var(--accent);color:#fff;border:0}

/* — Cartes produit — */
.products>li{border-radius:var(--radius)}
.products h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card-brand{margin:.1rem 0 .3rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.old-price{margin-left:.4rem;font-size:.85rem;font-weight:400;color:var(--muted)}
.low-stock{color:#b45309}
.price-sm{font-size:1.45rem;letter-spacing:.01em}
.products .btn.block{background:var(--navy)}
.products .btn.block:hover{background:var(--accent)}
.delivery-pill .icon{color:var(--accent)}

/* — Catégories : tuile anthracite, l'icône passe à l'orange au survol — */
.cat-img{background:linear-gradient(135deg,#15171b 0%,#2a2f37 100%);color:#ff8a4c;border-bottom:3px solid var(--accent);transition:background-color .2s,color .2s}
.cat-img .icon{width:3.4rem;height:3.4rem;stroke-width:1.5}
.category:hover .cat-img{background:var(--accent);color:#fff}
.cat-body h3{font-size:1.15rem}
.cat-body p{font-size:.92rem}
.more{color:var(--accent-dark)}

/* — Avantages, étapes — */
.usp .ico{background:var(--o-50);color:var(--accent)}
.buy-steps li{border-left:0;border-top:3px solid var(--accent)}
.step-n{background:var(--navy);color:#fff}

/* — Marques : bandeau sombre — */
.brands-strip{background:var(--navy);border-color:var(--navy)}
.brands-strip li{color:#e8e8e6;border-right-color:rgba(255,255,255,.14)}

/* — Bloc conseil et bandeau final : textes lisibles sur fond sombre — */
.advice{background:linear-gradient(135deg,#0c0d10 0%,#1b1e23 55%,#262b33 100%)}
.advice::before{background:radial-gradient(circle at 50% 50%,rgba(217,72,15,.55),rgba(217,72,15,0) 68%);opacity:1}
.advice .eyebrow{color:#ff9a62}
.advice p{color:#d6d8dc}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}
.btn.light:hover{background:var(--o-50);color:var(--navy)}
.btn.call{background:var(--accent);color:#fff}
.btn.call:hover{background:var(--accent-dark);color:#fff}
.cta-band{color:#fff;border:0}
.cta-band h2{color:#fff}
.cta-band p{color:#d6d8dc}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.btn.dark{background:var(--navy)}
.cta-band .btn.dark{background:transparent;border:1.5px solid rgba(255,255,255,.7)}
.cta-band .btn.dark:hover{background:rgba(255,255,255,.12)}
.section-cta{margin-top:1.5rem;text-align:center}

/* — Avis clients (affichés seulement s'il y en a de vrais dans la config) — */
.reviews{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin:0}
.review{margin:0;padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.review .stars{margin-bottom:.5rem;color:var(--accent);font-size:1.1rem;letter-spacing:.1em}
.review blockquote{margin:0 0 .8rem;color:var(--muted);font-style:italic}
.review figcaption{font-weight:700}

/* — Pied de page — */
.footer-tagline{margin:.3rem 0 .8rem;font-size:.9rem;line-height:1.55;color:#a3a7ae}
.footer-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.footer-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#e8e8e6;font-size:.78rem}
.footer-badge .icon{color:#ff9a62}
.contact-address{margin:.3rem 0;font-size:.9rem}
.contact-line{margin:.3rem 0}
.contact-line a{display:flex;align-items:center;gap:.4rem}
.contact-hours{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:#a3a7ae}
.footer-brands{padding:1rem 0;border-top:1px solid rgba(255,255,255,.1);background:#0c0d10}
.footer-brands-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,2.2vw,2.5rem)}
.footer-brands-label{margin-right:.4rem;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a8f98}
.footer-brands-inner a{font-size:.82rem;font-weight:700;white-space:nowrap;color:#c9cbcf}
.footer-brands-inner a:hover{color:#ff9a62;text-decoration:none}
.fold>summary::after{color:#ff9a62}
.footer-bottom{color:#a3a7ae}

/* — Filtres, formulaire de contact — */
.filter-group summary::after{color:var(--accent)}
.cs-step.active{background:var(--navy)}
@media (max-width:52rem){.contact-layout{grid-template-columns:1fr!important}}

/* — v4 · retouches après contrôle visuel — */
.products .card-label{color:var(--accent-dark)}
@media (min-width:60rem){.usps{grid-template-columns:repeat(3,1fr)}}
/* 13 catégories : la dernière, seule sur sa ligne, devient une bande pleine largeur */
@media (min-width:80rem){
  .category:last-child:nth-child(4n+1){grid-column:1/-1;flex-direction:row}
  .category:last-child:nth-child(4n+1) .cat-img{flex:none;width:16rem;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--accent)}
  .category:last-child:nth-child(4n+1) .cat-body{align-self:center}
}
.advice::before{left:50%;top:-16rem;width:34rem;height:34rem;transform:translateX(-50%)}
@media (min-width:40rem){.advice .actions{grid-template-columns:repeat(2,minmax(0,1fr));max-width:36rem}}

/* — v4 · mobile : listes plus compactes, moins de défilement — */
@media (max-width:40rem){
  .usps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .usp{padding:.85rem .6rem;gap:.5rem}
  .usp .ico{width:2.4rem;height:2.4rem}
  .usp strong{font-size:.9rem}
  .usp .sub{font-size:.8rem}
  .categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .cat-img{aspect-ratio:3/2}
  .cat-img .icon{width:2.6rem;height:2.6rem}
  .cat-body{padding:.8rem .85rem 1rem}
  .cat-body h3{font-size:.98rem;line-height:1.2}
  .cat-body p,.cat-body .more{display:none}
  .category:last-child:nth-child(odd){grid-column:1/-1}
  .section-head{margin:2.5rem 0 1.25rem}
}

/* — v4 · en-tête mobile : tient sur 360 px sans défilement horizontal — */
@media (max-width:52rem){
  html.js .header-inner{grid-template-columns:auto minmax(0,1fr) auto}
  .brand{min-width:0;font-size:1.3rem}
  .brand::before{margin-right:.4rem}
  .header-actions{gap:.5rem}
  .lang{font-size:.75rem}
  .lang a{padding:.2rem .5rem}
}
@media (max-width:40rem){
  .category:last-child:nth-child(odd){flex-direction:row}
  .category:last-child:nth-child(odd) .cat-img{flex:none;width:36%;aspect-ratio:auto;border-bottom:0;border-right:3px solid var(--accent)}
  .category:last-child:nth-child(odd) .cat-body{align-self:center}
}

/* =====================================================================
   v5 · Catalogue, contact, cartes sans photo, administration
   (aucun style en ligne : la politique de sécurité du site les bloque)
   ===================================================================== */

/* — Catalogue : colonne de filtres — */
.catalog-main{min-width:0}
.filter-sidebar{display:flex;flex-direction:column;gap:.6rem;padding:0;border:0;background:none}
.filter-sidebar form{display:flex;flex-direction:column;gap:.6rem;padding:0;border:0;background:none}
.filter-title{margin:0;padding:.8rem 1rem;font:700 .8rem/1 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--navy);background:var(--tint)}
.cat-nav{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cat-nav ul{margin:0;padding:.35rem;list-style:none}
.cat-nav a{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;border-radius:8px;color:var(--ink);font-size:.92rem;font-weight:600;text-decoration:none}
.cat-nav a:hover{background:var(--tint);color:var(--accent-dark)}
.cat-nav a[aria-current="page"]{background:var(--navy);color:#fff}
.cat-nav .count{flex:none;font-size:.75rem;font-weight:700;opacity:.65}
.filter-group-body .btn.block{margin-top:.4rem}
.filter-toggle-btn{margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none}
.chips a{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border:1px solid var(--o-200);border-radius:999px;background:var(--o-50);color:var(--accent-dark);font-size:.85rem;font-weight:600;text-decoration:none}
.chips a:hover{background:var(--o-200)}
.chips .icon{width:.9em;height:.9em}

/* — Fiche produit — */
.price .old-price{font-size:1rem}
.badge-tag.inline{position:static;display:inline-block;margin-left:.5rem;vertical-align:middle}
.quote-link{margin:1rem 0}

/* — Cartes sans photo : un visuel soigné à la place d'un grand vide — */
.noimg{flex-direction:column;gap:.55rem;background:linear-gradient(135deg,#f5f5f3,#e7e8ea);color:#5b616b;font-size:.82rem;font-weight:600;text-align:center}
.noimg .icon{width:3.4rem;height:3.4rem;color:var(--accent);opacity:.7;stroke-width:1.4}
.thumb .noimg{width:100%}

/* — Contact : étapes (sans JavaScript, toutes les rubriques restent visibles) — */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2.5rem;align-items:start}
@media (max-width:52rem){.contact-layout{grid-template-columns:1fr}}
.contact-stepper{display:none}
html.js .contact-stepper{display:flex}
.contact-panel{display:grid;gap:.5rem;align-content:start}
html.js .contact-panel:not(.active){display:none}
.contact-panel+.contact-panel{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
html.js .contact-panel+.contact-panel{margin-top:0;padding-top:0;border-top:0}
.contact-panel h2{margin-bottom:.6rem;font-size:1.1rem}
.step-actions{display:flex;justify-content:space-between;gap:.75rem;margin-top:.5rem}
.step-actions.step-end{justify-content:flex-end}
.step-actions .btn.ghost{color:var(--navy);border-color:var(--line)}
.step-actions .btn.ghost:hover{background:var(--tint)}
html:not(.js) [data-next],html:not(.js) [data-prev]{display:none}
.contact-aside{display:grid;gap:1rem}
.side-card{padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.side-card.tint{background:var(--tint)}
.side-card h2{margin-bottom:.9rem;font-size:1rem}
.side-card h2.small{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side-card .line{display:flex;align-items:center;gap:.6rem;margin:.4rem 0}
.side-card .hint{margin:0 0 .8rem}
.check-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none;font-size:.9rem}
.check-list li{display:flex;align-items:center;gap:.5rem}
.check-list .icon{color:var(--accent)}

/* — Administration — */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.9rem;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.toolbar input[type=search]{flex:1 1 14rem;width:auto}
.toolbar select{width:auto;max-width:100%}
.toolbar button{margin:0}
.toolbar .push{margin:0 0 0 auto}
.admin-table .thumb-sm{display:grid;place-items:center;width:4rem;height:3rem;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--tint)}
.admin-table .thumb-sm.none{color:#6c727c}
.admin-table .thumb-sm .icon{width:1.6rem;height:1.6rem}
.row-actions{white-space:nowrap}
.row-actions form{display:inline;padding:0;border:0;background:none}
.link-btn{margin:0 0 0 .6rem;padding:0;border:0;background:none;color:var(--blue);font:600 1rem/1.6 var(--font);letter-spacing:0;text-transform:none;text-decoration:underline;cursor:pointer}
.link-btn:hover{background:none;color:var(--accent-dark)}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:40rem){.two-cols{grid-template-columns:1fr}}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.2rem 1rem}
.product-form fieldset{margin:0 0 1.2rem;padding:1rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius)}
.product-form legend{padding:0 .5rem;font-weight:700}
.img-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.8rem;margin:0 0 1rem;padding:0;list-style:none}
.img-list li{position:relative;padding:.5rem;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:grab}
.img-list li.is-main{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,72,15,.2)}
.img-list li.is-dragging{opacity:.4}
.img-list img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.img-list .check{margin:.3rem 0 0;font-size:.8rem}
.dropzone{display:grid;gap:.3rem;justify-items:center;margin:0;padding:1.6rem 1rem;border:2px dashed #c9ccd1;border-radius:var(--radius);background:var(--tint);font-weight:400;text-align:center;cursor:pointer}
.dropzone.is-over{border-color:var(--accent);background:var(--o-50)}
.dropzone .dz-title{font-weight:700}
.dropzone input[type=file]{width:auto;max-width:100%}
.dz-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem;margin:.6rem 0 0;padding:0;list-style:none;font-size:.78rem}
.dz-preview img{display:block;width:100%;aspect-ratio:4/3;margin-bottom:.2rem;object-fit:cover;border-radius:6px}
.dz-preview .is-bad{color:var(--danger)}

/* — v5 · retouches après contrôle visuel — */
input[type=radio]{width:auto;margin:.3rem 0 0;accent-color:var(--accent)}
.thumb{text-decoration:none}
.price-sm{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .5rem}
.price-sm .old-price{margin-left:0}
.cs-step.done{background:var(--o-50);color:var(--accent-dark)}
@media (max-width:60rem){
  .filter-sidebar{display:none}
  .filter-sidebar.is-open{display:flex}
}
.link-btn{box-shadow:none}
.admin-table td:nth-child(4){white-space:nowrap}

/* =====================================================================
   v6 · Images du site, fiche produit allemande (Eckdaten), import, e-mail
   ===================================================================== */

/* — Logos de marque — */
.brand-logo{display:block;width:auto;height:1.7rem;max-width:8rem;object-fit:contain}
.card-brand{min-height:1.2rem}
.product-brand{margin:0 0 .8rem}
.product-brand .brand-logo{height:2.4rem;max-width:11rem}
.brands-strip li a{display:flex;align-items:center;color:inherit;text-decoration:none}
.brands-strip.has-logos{background:#fff;border-color:var(--line)}
.brands-strip.has-logos li{border-right-color:var(--line)}
.brands-strip li img{display:block;width:auto;height:2rem;max-width:9rem;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.brands-strip li a:hover img{filter:none;opacity:1}
.cat-img.has-photo{background:var(--tint)}
.category:hover .cat-img.has-photo{background:var(--tint)}

/* — Cartes : caractéristiques clés et prix sur demande — */
.card-specs{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.1rem 0 .4rem;padding:0;list-style:none;font-size:.85rem;font-weight:700;color:var(--ink)}
.card-specs span{margin-right:.2rem;font-size:.75rem;font-weight:400;color:var(--muted)}
.price-request{font:700 1.15rem/1.2 var(--font);color:var(--navy)}

/* — Fiche produit : chiffres clés (zGG, charge utile, dimensions) — */
.eckdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem;margin:1rem 0;padding:0;list-style:none}
.eckdaten li{padding:.7rem .9rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--tint)}
.eckdaten .eck-label{display:block;font-size:.78rem;color:var(--muted)}
.eckdaten strong{font:800 1.2rem/1.25 var(--display)}
.buy-bar{display:none}
@media (max-width:52rem){
  .buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,22,26,.10)}
  .buy-bar-price{font:800 1.2rem/1 var(--display)}
  .buy-bar .btn{margin:0}
  body:has(.buy-bar){padding-bottom:4.5rem}
  body:has(.buy-bar) .fab{display:none}
}

/* — En-tête et pied de page — */
.header-actions .header-phone{color:var(--accent-dark);font-weight:700}
.header-actions .header-phone .icon{color:var(--accent)}
.vat-note{font-weight:600;color:#e8e8e6}

/* — Administration : import, images, e-mail — */
.table-scroll{overflow-x:auto}
.import-table td{vertical-align:top;font-size:.9rem}
.import-table .is-error{background:#fdf0f0}
.note-err,.note-warn{display:block;font-size:.82rem}
.note-err{font-weight:600;color:var(--danger)}
.note-warn{color:#92400e}
.inline-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1rem}
.inline-actions button{margin:0}
.plain{margin:0 0 1rem;padding-left:1.2rem}
.secondary-link{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.secondary-link:hover{background:var(--tint)}
.images-form{max-width:62rem}
.img-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:1.1rem}
.img-slot{display:grid;gap:.4rem;align-content:start}
.img-slot-preview{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--tint)}
.img-slot-preview img{width:100%;height:100%;object-fit:cover}
.img-slots.is-logos .img-slot-preview{padding:.6rem;background:#fff}
.img-slots.is-logos .img-slot-preview img{object-fit:contain}
.img-slot-preview.is-empty{color:#6c727c;font-size:.8rem}
.img-slot-name{margin:0;font-size:.9rem;font-weight:600}
.img-slot input[type=file]{padding:.2rem 0;font-size:.8rem}
.mail-form{margin-bottom:1.5rem}
.product-page h1{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.2;text-transform:none;letter-spacing:0}

/* =====================================================================
   v7 · Liste de produits : catégories avec miniatures, pagination, livraison par date
   ===================================================================== */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .6rem;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--muted)}
.breadcrumb [aria-current]{font-weight:700;color:var(--ink)}

/* — Menu des catégories : miniature + nom + sous-titre + nombre de produits — */
.cat-nav ul{display:grid;gap:.15rem}
.cat-nav a{align-items:center;gap:.7rem;padding:.5rem .6rem}
.cat-nav .cat-text{display:grid;flex:1;min-width:0;line-height:1.25}
.cat-nav .cat-text strong{font-size:.9rem}
.cat-nav .cat-text small{font-size:.76rem;font-weight:400;color:var(--muted)}
.cat-nav a[aria-current="page"] .cat-text small{color:#c9ccd1}
.cat-thumb{display:grid;flex:none;place-items:center;width:3rem;height:2.4rem;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,#15171b,#2a2f37);color:#ff8a4c}
.cat-thumb .icon{width:1.3rem;height:1.3rem}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat-thumb.is-all{background:var(--o-50);color:var(--accent)}
.cat-nav a[aria-current="page"] .cat-thumb{box-shadow:0 0 0 2px var(--accent)}
.filter-sub{margin:.7rem 0 .15rem;font-size:.78rem;font-weight:700;color:var(--muted)}
.filter-sub:first-child{margin-top:0}

/* — Livraison par date — */
.delivery-pill small{display:block;font-size:.72rem;font-weight:400;color:var(--muted)}

/* — Cartes : voir + panier — */
.card-actions{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:auto}
.card-actions form{margin:0;padding:0;border:0;background:none}
.card-actions .btn{margin:0}
.card-actions .cart-btn{width:3rem;padding:0;background:var(--accent)}
.card-actions .cart-btn:hover{background:var(--accent-dark)}

/* — Pagination — */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin:2rem 0 .5rem}
.page-link{display:grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .6rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none}
a.page-link:hover{border-color:var(--accent);color:var(--accent-dark)}
.page-link.is-current{border-color:var(--navy);background:var(--navy);color:#fff}
.page-gap{padding:0 .2rem;color:var(--muted)}
.card-actions{align-items:stretch}
.card-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:2.9rem;margin:0;padding:.5rem .7rem;font-size:.78rem;white-space:nowrap}
.card-actions>.btn{background:var(--navy)}
.card-actions>.btn:hover{background:var(--accent)}
.card-actions form{display:flex}
.card-actions .cart-btn{width:3rem;padding:0}
.card-actions .cart-btn .icon{width:1.2rem;height:1.2rem}

/* =====================================================================
   v8 · En-tête, accueil et pied de page alignés sur le site de référence
   ===================================================================== */

/* — Barre du haut : 3 promesses à gauche, liens à droite — */
.topbar{padding:0;overflow:visible;background:var(--navy);color:#e8e8e6;border-bottom:2px solid var(--accent);font-size:.82rem;text-align:left}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:var(--maxw);margin:0 auto;padding:.4rem clamp(1rem,2.2vw,2.5rem)}
.topbar-promos{display:flex;margin:0;padding:0;list-style:none;font-weight:600}
.topbar-promos li{padding:0;white-space:nowrap}
.topbar-promos li+li::before{content:"|";margin:0 .9rem;opacity:.4}
.topbar-promos li[aria-hidden]{display:none}
.topbar-links{display:flex;align-items:center;gap:1.1rem}
.topbar-links a{color:#e8e8e6;font-weight:700;text-decoration:none}
.topbar-links a:hover{color:#ff9a62}
.topbar .lang{display:inline-flex;gap:.15rem;padding:.1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:none}
.topbar .lang a{padding:.05rem .55rem;border-radius:999px;font-size:.74rem}
.topbar .lang a[aria-current]{background:var(--accent);color:#fff}
@media (max-width:64rem){
  .topbar{overflow:hidden}
  .topbar-inner{display:block;padding:0}
  .topbar-links{display:none}
  .topbar-promos{width:max-content;padding:.5rem 0;animation:ticker 34s linear infinite}
  .topbar-promos li{padding:0 1.6rem}
  .topbar-promos li+li::before{content:none}
  .topbar-promos li[aria-hidden]{display:block}
}
@media (prefers-reduced-motion:reduce){
  .topbar-promos{width:auto;flex-wrap:wrap;justify-content:center;animation:none}
  .topbar-promos li[aria-hidden]{display:none}
}

/* — En-tête : logo, recherche, boutons Mon compte et Panier — */
.brand-img{display:block;width:auto;height:2.7rem;max-width:13rem;object-fit:contain}
.header-actions .btn-account,.header-actions .btn-cart{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;text-decoration:none}
.header-actions .btn-cart{border-color:var(--accent);background:var(--accent);color:#fff}
.header-actions .btn-cart:hover{background:var(--accent-dark);color:#fff}
.header-actions .btn-cart .badge-count{background:#fff;color:var(--accent-dark)}
@media (max-width:52rem){
  .header-actions .btn-account{display:none}
  .header-actions .btn-cart{padding:.55rem;border-radius:50%}
}

/* — Menu Catégories : vignettes, noms et sous-titres — */
.dd-panel.mega{min-width:min(46rem,calc(100vw - 2rem));padding:1rem 1.1rem .7rem}
.mega-title{margin:0 0 .6rem;font:800 1.05rem/1.2 var(--font);color:var(--navy)}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .9rem}
.mega-item{display:flex;align-items:center;gap:.7rem;padding:.45rem .5rem;border-radius:10px;color:var(--ink);text-decoration:none}
.mega-item:hover{background:var(--tint);color:var(--ink)}
.mega-item .cat-text{display:grid;min-width:0;line-height:1.25}
.mega-item .cat-text strong{font-size:.92rem}
.mega-item .cat-text small{font-size:.76rem;font-weight:400;color:var(--muted)}
.mega .dd-all{display:block;margin-top:.5rem;padding:.7rem .5rem .1rem;border-top:1px solid var(--line)}
.drawer-lang{display:flex;gap:.4rem;margin:.2rem 0 .8rem}
.drawer-lang a{padding:.3rem .85rem;border:1px solid var(--line);border-radius:999px;font-weight:700;text-decoration:none}
.drawer-lang a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}

/* — Accueil : 2 grandes bannières + 3 petites — */
.banner-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin:0 0 1.5rem}
.bn{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;min-height:15rem;padding:1.6rem;overflow:hidden;border-radius:var(--radius);color:#fff;text-decoration:none;background:linear-gradient(115deg,#0c0d10 0%,#1b1e23 58%,#2a2f37 100%)}
.bn-lg{grid-column:span 3;min-height:25rem}
.bn-sm{grid-column:span 2}
.bn:not(.has-img)::before{content:"";position:absolute;top:-10%;bottom:-10%;right:14%;width:2.6rem;background:var(--accent);transform:skewX(-18deg)}
.bn:not(.has-img)::after{content:"";position:absolute;top:-10%;bottom:-10%;right:calc(14% - 1.2rem);width:.35rem;background:rgba(255,255,255,.16);transform:skewX(-18deg)}
.bn.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,16,.86) 0%,rgba(12,13,16,.5) 55%,rgba(12,13,16,.08) 100%)}
.bn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-body{position:relative;z-index:1;display:grid;gap:.55rem;max-width:26rem}
.bn-eyebrow{width:max-content;padding:.25rem .7rem;border-radius:4px;background:var(--accent);color:#fff;font:700 .76rem/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.bn-title{margin:0;color:#fff;font:800 clamp(1.5rem,2.6vw,2.4rem)/1.05 var(--display);font-style:italic;letter-spacing:.01em;text-transform:uppercase}
.bn-sm .bn-title{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.bn-text{color:#d6d8dc;font-size:.95rem}
.bn-cta{position:relative;z-index:1;align-self:flex-end;display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1rem;border-radius:8px;background:var(--accent);color:#fff;font:700 .8rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase}
.bn:hover .bn-cta{background:var(--accent-dark)}
@media (max-width:52rem){
  .bn-lg,.bn-sm{grid-column:1/-1;min-height:17rem}
}

/* — Atouts : 4 sur l'accueil, 3 au-dessus du pied de page — */
@media (min-width:60rem){.usps{grid-template-columns:repeat(4,1fr)}.usps.usps-3{grid-template-columns:repeat(3,1fr)}}
.usps.usps-3{margin-top:1.5rem}

/* — Pied de page : logo, conditions, liens rapides, contact + newsletter — */
.footer-inner{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.25fr;gap:2.5rem}
.footer-logo{display:inline-block;margin-bottom:1rem;text-decoration:none}
.footer-logo img{display:block;width:auto;max-width:16rem;max-height:3.4rem;padding:.7rem 1rem;border-radius:12px;background:#fff}
.footer-text{margin:0 0 1rem;font-size:.9rem;line-height:1.6;color:#c9cbcf}
.legal-list{display:grid;gap:.35rem;margin:0;padding:0;list-style:none;font-size:.85rem;color:#e8e8e6}
.legal-list li::before{content:"›";margin-right:.5rem;color:#ff9a62}
.contact-list{display:grid;gap:.85rem;margin:0 0 1.2rem;padding:0;list-style:none}
.contact-list li{display:flex;align-items:flex-start;gap:.8rem;font-size:.88rem;color:#c9cbcf}
.contact-list .ci{display:grid;flex:none;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;background:rgba(255,255,255,.08);color:#ff9a62}
.contact-list strong{display:block;font-size:.85rem;color:#fff}
.contact-list a{color:#e8e8e6}
.newsletter{display:block;padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04)}
.nl-kicker{margin:0 0 .4rem;font:700 .68rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#ff9a62}
.nl-title{margin:0 0 .3rem;font:800 1.05rem/1.2 var(--font);color:#fff}
.nl-text,.nl-legal{margin:0 0 .7rem;font-size:.8rem;color:#c9cbcf}
.nl-legal{margin:.6rem 0 0;font-size:.74rem;color:#9aa0a8}
.nl-row{display:flex;gap:.4rem}
.nl-row input{flex:1;min-width:0}
.nl-row button{margin:0;white-space:nowrap}
@media (max-width:60rem){.footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.footer-inner{grid-template-columns:1fr;gap:1.2rem}}

/* — Panier flottant (remplace le bouton « Contact ») — */
.float-cart{position:fixed;right:1.25rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:30;display:grid;place-items:center;width:3.4rem;height:3.4rem;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 8px 24px rgba(20,22,26,.25)}
.float-cart:hover{background:var(--o-50);color:var(--accent-dark)}
.float-cart .icon{width:1.5rem;height:1.5rem}
.float-cart .badge-count{position:absolute;top:-.35rem;left:-.35rem}
@media (max-width:52rem){body:has(.buy-bar) .float-cart{bottom:5.4rem}}
.nl-row{flex-wrap:wrap}
.nl-row input{flex:1 1 9rem}
@media (min-width:40.01rem){.site-footer .fold{border:0}}
.advice .actions{max-width:44rem}
.advice .actions .btn{white-space:nowrap;justify-content:center}
@media (max-width:40rem){.usps.usps-3 .usp:last-child{grid-column:1/-1}}

/* =====================================================================
   v9 · Fiche produit : galerie, achat, devis, onglets, documents, impression
   ===================================================================== */
.product-page{align-items:start;gap:2rem}
.gallery .g-main{position:relative;display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:zoom-in}
.gallery .g-main img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:var(--tint)}
.g-zoom{position:absolute;right:.7rem;bottom:.7rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(17,19,22,.75);color:#fff}
.g-zoom .icon{width:1.1rem;height:1.1rem}
.buybox .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:.4rem 0 1rem}
.trust{display:grid;gap:.55rem;margin:0 0 1.1rem;padding:1rem 1.1rem;list-style:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--tint);font-size:.92rem}
.trust li{display:flex;align-items:flex-start;gap:.65rem}
.trust .icon{flex:none;margin-top:.15rem;color:var(--accent)}
.trust .is-ok .icon{color:#15803d}
.trust .is-warn .icon{color:#b45309}
.trust small{display:block;font-size:.78rem;color:var(--muted)}
.buy-form{align-items:end}
.buy-form button{display:inline-flex;align-items:center;gap:.5rem}
.quote{margin:1rem 0 .4rem}
.quote>summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none}
.quote>summary::-webkit-details-marker{display:none}
.quote[open]>summary{margin-bottom:.8rem}
.quote-form{margin:0}
.quote-product{margin:.2rem 0 .6rem;padding:.6rem .8rem;border-radius:8px;background:var(--o-50);font-size:.9rem}
.doc-links{margin:.6rem 0 0;font-size:.9rem}
.doc-links a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}

/* — Onglets : visibles en entier sans JavaScript — */
.product-info{margin:2.5rem 0 1rem}
.tab-list{display:none}
.tabs.is-ready .tab-list{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1rem;border-bottom:2px solid var(--line)}
.tabs.is-ready .tab-list button{margin:0 0 -2px;padding:.75rem 1.2rem;border:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;background:none;color:var(--muted);font:700 .85rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase;box-shadow:none}
.tabs.is-ready .tab-list button:hover{background:var(--tint);color:var(--ink)}
.tabs.is-ready .tab-list button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink)}
.tabs.is-ready .tab-h{display:none}
.tab-panel{padding:.2rem 0 1rem}
.tab-panel[hidden]{display:none}
.tab-h{margin:1.4rem 0 .6rem}
.tab-panel .lead{max-width:60rem;font-size:1.02rem;line-height:1.7}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0}
.tech-cell{padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.tech-cell dt{margin:0 0 .15rem;font-size:.78rem;font-weight:600;color:var(--muted)}
.tech-cell dd{margin:0;font:800 1.1rem/1.25 var(--font);color:var(--ink)}
@media (max-width:52rem){.tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.tech-grid{grid-template-columns:1fr}}

/* — Sécurité, immatriculation et documents — */
.docs-block{margin:2rem 0;padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.docs-block h2{margin:0 0 1rem}
.docs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem 1.5rem;margin:0 0 1rem;padding:0;list-style:none}
.docs-list li{display:flex;gap:.8rem}
.docs-list strong{display:block}
.docs-list span:last-child{font-size:.9rem;color:var(--muted)}
.docs-check{display:grid;flex:none;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--o-50);color:var(--accent)}
.docs-check .icon{width:1rem;height:1rem}

/* — Agrandissement des photos — */
body.lb-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,11,13,.93)}
.lightbox[hidden]{display:none}
.lb-img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb-close,.lb-prev,.lb-next{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:400 2rem/1 var(--font);box-shadow:none}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent)}
.lb-close{top:1rem;right:1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:1rem;left:0;right:0;margin:0;text-align:center;font-size:.85rem;color:#c9cbcf}

/* — Fiche technique imprimable — */
.datasheet{max-width:52rem;margin:0 auto;padding:1.5rem;background:#fff}
.ds-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.2rem}
.ds-actions button{margin:0}
.ds-head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:3px solid var(--accent);font-size:.85rem}
.ds-logo{display:block;max-height:3rem;width:auto}
.ds-brand{font:800 1.5rem/1 var(--display);text-transform:uppercase}
.datasheet h1{margin:1.2rem 0 .2rem;font-size:1.7rem;text-transform:none}
.ds-meta{margin:0 0 1rem;color:var(--muted)}
.ds-top{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;align-items:center;margin-bottom:1rem}
.ds-photo{display:block;width:100%;max-height:18rem;object-fit:contain;border:1px solid var(--line);border-radius:10px}
.ds-price-value{margin:0;font:800 1.8rem/1.1 var(--font)}
.datasheet h2{margin:1.4rem 0 .6rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em}
.ds-foot{margin-top:2rem;padding-top:.8rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
@media print{
  .no-print,.buy-bar,.float-cart,.site-header,.topbar{display:none!important}
  .datasheet{max-width:none;padding:0}
  body{background:#fff}
}
@media (max-width:40rem){
  .tabs.is-ready .tab-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .tabs.is-ready .tab-list button{flex:none;white-space:nowrap;padding:.75rem .9rem}
}
.ds-company{text-align:right}

/* ===== V10 : administration (catégories, marques, actions groupées) ===== */
.admin-table .inline-edit{display:flex;align-items:center;gap:.4rem;margin:0;padding:0;border:0;background:none}
.admin-table .inline-edit input{width:100%;min-width:9rem;margin:0;padding:.4rem .6rem}
.admin-table .row-actions .link-btn[disabled]{opacity:.3;cursor:default}
.bulk-bar{position:sticky;top:.5rem;z-index:5;border-color:var(--accent);background:#fff7ed;box-shadow:0 6px 18px rgba(20,22,26,.12)}
.bulk-bar select,.bulk-bar input{margin:0;width:auto;max-width:100%}
.bulk-bar .check{margin:0}
.admin-table input[type=checkbox]{width:1.1rem;height:1.1rem;margin:0}
.inline-form{margin-top:1rem;padding:0;border:0;background:none}

/* ===== V10 : bannière de cookies ===== */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;max-width:62rem;margin:0 auto;padding:1.1rem 1.4rem;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 18px 50px rgba(20,22,26,.28)}
.cb-main{flex:1 1 24rem;min-width:0}
.cb-main h2{margin:0 0 .25rem;font:700 1.05rem/1.3 var(--display);letter-spacing:.01em}
.cb-main p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted)}
.cb-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;border:0;background:none}
.cb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.55rem 1.2rem;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font:700 .9rem/1 var(--font);text-decoration:none;cursor:pointer}
.cb-btn:hover{background:var(--ink);color:#fff}
.cb-btn.cb-primary{border-color:var(--accent);background:var(--accent);color:#fff}
.cb-btn.cb-primary:hover{border-color:var(--accent-dark);background:var(--accent-dark)}
.cb-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:40rem){.cookie-banner{left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom,0px));padding:1rem}.cb-actions,.cb-btn{width:100%}}
.cookie-prefs fieldset{margin:0 0 1rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:10px}
.cookie-prefs legend{padding:0 .4rem;font-weight:700}
.cookie-prefs p{margin:.2rem 0 .6rem}
.cb-actions.inline{margin:1rem 0}

/* ===== V10 : page À propos ===== */
.about-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;margin:1.5rem 0 2rem;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--line);overflow:hidden}
.about-figures li{display:flex;flex-direction:column;gap:.15rem;padding:1.1rem 1.2rem;background:#fff}
.about-figures strong{font:800 1.6rem/1.15 var(--display);color:var(--accent)}
.about-figures span{font-size:.88rem;color:var(--muted)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1rem 0 2rem}
.about-grid section{padding:1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.about-grid h3{margin:.7rem 0 .3rem;font-size:1.1rem}
.about-grid p{margin:0;color:var(--muted);font-size:.95rem}
.about-grid .ci{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:10px;background:var(--o-50,#fff4ec);color:var(--accent)}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1.2rem;margin:1rem 0 1.5rem;padding:0;list-style:none}
.team li{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
.team img,.team-ph{width:7rem;height:7rem;border-radius:50%;object-fit:cover}
.team-ph{display:grid;place-items:center;background:var(--tint);color:var(--accent);font:800 2.2rem/1 var(--display)}
.team span:not(.team-ph){font-size:.88rem;color:var(--muted)}
.about-grid{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.toolbar input:not([type=checkbox]):not([type=date]):not([type=search]){width:auto;flex:1 1 12rem;margin:0}
.bulk-bar [data-bulk-for]{display:flex;align-items:center;gap:.6rem}
.bulk-bar input[name=percent]{width:7rem;flex:none}
.bulk-bar input[type=checkbox]{width:1.1rem;height:1.1rem}

/* — Robustesse : mots longs (allemand), étapes du formulaire sur petit écran — */
.cs-step{min-width:0;overflow-wrap:anywhere}
@media (max-width:30rem){.cs-step{padding:.65rem .25rem;font-size:.68rem;letter-spacing:.02em}}
html[lang="de"] body{hyphens:auto}
.prose,.faq,main{overflow-wrap:break-word}

/* ===== Mobile : bannières empilées comme sur le site modèle, blocs compacts, cookies compacts ===== */
@media (max-width:52rem){
  .banner-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin:0 0 1rem}
  .banner-grid .bn-sm{display:none}
  .banner-grid .bn-lg{grid-column:1/-1;min-height:13.5rem;padding:1.15rem}
  .banner-grid .bn-title{font-size:1.4rem}
  .usps{gap:.5rem}
  .usp{flex-direction:row;align-items:center;gap:.65rem;padding:.65rem .75rem;text-align:left}
  .usp .ico{width:2.3rem;height:2.3rem}
  .usp strong{font-size:.82rem}
  .usp .sub{font-size:.72rem;line-height:1.3}
}
@media (max-width:40rem){
  .cookie-banner{padding:.8rem .9rem;gap:.6rem}
  .cb-main h2{margin:0 0 .15rem;font-size:.95rem}
  .cb-main p{font-size:.78rem;line-height:1.45}
  .cb-btn{min-height:2.5rem;font-size:.85rem}
}
@media (max-width:40rem){
  .products .thumb,.products .noimg{aspect-ratio:16/10}
  .tabs.is-ready .tab-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0}
  .tabs.is-ready .tab-list::-webkit-scrollbar{display:none}
  .tabs.is-ready .tab-list button{flex:0 0 auto;padding:.7rem .85rem;font-size:.74rem;letter-spacing:.03em;white-space:nowrap}
}

/* ===== Produits à la une : défilement continu, même principe que le bandeau des marques (CSS seul) ===== */
.carousel.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.carousel.marquee .products{display:flex;gap:1.25rem;width:max-content;margin:1.5rem 0 0;padding:.25rem 0 1rem;overflow:visible;animation:prodScroll 50s linear infinite}
.carousel.marquee .products>li{flex:0 0 18rem;width:18rem}
.carousel.marquee:hover .products,.carousel.marquee:focus-within .products,.carousel.marquee:active .products{animation-play-state:paused}
@keyframes prodScroll{to{transform:translateX(calc(-50% - .625rem))}}
@media (max-width:40rem){.carousel.marquee .products>li{flex-basis:15.5rem;width:15.5rem}}
@media (prefers-reduced-motion:reduce){
  .carousel.marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
  .carousel.marquee .products{animation:none}
  .carousel.marquee .products>li[aria-hidden=true]{display:none}
}
/* Vitesse constante (~55 px/s) quelle que soit la quantité de cartes : la CSP interdit les styles en ligne, d'où une classe par nombre de produits */
.marquee-n4 .products{animation-duration:22s!important}
.marquee-n5 .products{animation-duration:28s!important}
.marquee-n6 .products{animation-duration:34s!important}
.marquee-n7 .products{animation-duration:39s!important}
.marquee-n8 .products{animation-duration:45s!important}
.marquee-n9 .products{animation-duration:50s!important}
.marquee-n10 .products{animation-duration:56s!important}
.marquee-n11 .products{animation-duration:62s!important}
.marquee-n12 .products{animation-duration:67s!important}

/* ===== Pages d'achat : titres unifiés, panier, commande, états vides ===== */
h1{text-transform:none;letter-spacing:0;font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--ink)}
.bn-title,.bn .bn-title{text-transform:uppercase}
.empty-state{display:grid;justify-items:center;gap:.9rem;margin:1rem 0 2rem;padding:3rem 1.5rem;border:1px dashed #cfd2d8;border-radius:var(--radius);background:var(--tint);color:var(--muted);text-align:center}
.empty-state>.icon{width:2.6rem;height:2.6rem;color:var(--accent)}
.empty-state p{margin:0;font-size:1.05rem;color:var(--ink)}
.empty-state .btn{margin:0}
.row2{display:grid;gap:0 1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.row2.zip{grid-template-columns:1fr 2fr}
@media (max-width:30rem){.row2,.row2.zip{grid-template-columns:1fr}}
.auth:has(.order-summary){grid-template-columns:minmax(0,1.5fr) minmax(18rem,1fr);align-items:start}
@media (max-width:56rem){.auth:has(.order-summary){grid-template-columns:1fr}.order-summary{order:-1}}
.order-summary{position:sticky;top:1rem;padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--tint)}
.order-summary h2{margin-top:0}
.sum-lines{display:grid;gap:.6rem;margin:0 0 1rem;padding:0;list-style:none}
.sum-lines li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.sum-lines small{color:var(--muted)}
.sum-lines strong{white-space:nowrap}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 1.1rem;font-weight:700}
.sum-total strong{font:800 1.6rem/1 var(--display);color:var(--accent)}
.sum-trust{display:grid;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;font-size:.9rem}
.sum-trust li{display:flex;align-items:center;gap:.55rem}
.sum-trust .icon{flex:none;width:1.1rem;height:1.1rem;color:var(--accent)}
.cart-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end;margin:1.25rem 0}
.cart-actions .btn{margin:0}
.btn.secondary-link{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.secondary-link:hover{background:var(--ink);color:#fff}
.btn .icon{width:1rem;height:1rem}
@media (max-width:40rem){
  .cart-actions{flex-direction:column}.cart-actions .btn{width:100%}
  main table:has(td input[type=number]) thead{display:none}
  main table:has(td input[type=number]) tr{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
  main table:has(td input[type=number]) td{padding:0;border:0}
  main table:has(td input[type=number]) td:first-child{grid-column:1/-1;font-weight:700}
  main table:has(td input[type=number]) tfoot tr{display:flex;justify-content:space-between}
}
main td input[type=number]{width:5.5rem}
form>button.secondary{width:auto;justify-self:start}
.sum-lines{margin-left:0}
/* Étapes du formulaire de contact : ne jamais couper un mot en deux */
.cs-step{overflow-wrap:normal;word-break:normal;hyphens:none;text-align:center;display:flex;align-items:center;justify-content:center}
@media (max-width:30rem){.cs-step{font-size:.6rem;letter-spacing:0;padding:.65rem .15rem}}

/* Pied de page : sections repliables seulement sur téléphone ; ouvertes dès la tablette */
@media (min-width:40.01rem) and (max-width:52.99rem){.fold>summary{pointer-events:none;cursor:default}.fold>summary::after{content:none!important}}
/* Petites cartes d'atouts : interligne régulier */
.usp .sub{display:block;line-height:1.35}
.usp strong{line-height:1.3}

/* Noms de catégories longs (allemand) : coupure propre aux traits d'union, jamais au milieu d'un mot court */
.cat-body h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}
@media (max-width:30rem){.cat-body h3{font-size:.72rem;line-height:1.25;letter-spacing:0}.cat-body{padding-inline:.7rem}}

/* Pages d'erreur (404, 403…) */
.error-page{display:grid;justify-items:center;gap:.7rem;margin:2rem auto 3rem;padding:2.5rem 1.2rem;max-width:40rem;text-align:center}
.error-code{margin:0;font:800 clamp(4rem,14vw,7rem)/1 var(--display);color:var(--accent);letter-spacing:-.02em}
.error-page h1{margin:0}
.error-text{margin:0;color:var(--muted);max-width:32rem}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.8rem}
.error-actions .btn{margin:0}
@media (max-width:30rem){.error-actions{flex-direction:column;align-self:stretch}.error-actions .btn{width:100%;justify-content:center;text-align:center}}

/* Aide au paiement par virement : discrète, repliée par défaut */
.pay-note{margin:.2rem 0 0;font-size:.88rem;color:var(--muted)}
.pay-help{margin:.8rem 0 0;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.pay-help>summary{display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;cursor:pointer;list-style:none;font-weight:600;font-size:.92rem;color:var(--navy)}
.pay-help>summary::-webkit-details-marker{display:none}
.pay-help>summary .icon{width:1rem;height:1rem;color:var(--accent)}
.pay-help>summary::after{content:"+";margin-left:auto;color:var(--accent-dark);font-size:1.2rem;line-height:1}
.pay-help[open]>summary::after{content:"−"}
.pay-help>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pay-help ol{margin:0;padding:0 .9rem .3rem 2.1rem;display:grid;gap:.45rem;font-size:.9rem}
.pay-help .hint{margin:0;padding:0 .9rem .8rem}

/* ═══ V12 · Finitions professionnelles ═══ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:#fbd5c0;color:#17191d}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
:focus-visible{outline:3px solid #ff9a62;outline-offset:2px;border-radius:4px}
.btn:focus-visible,.button:focus-visible,button:focus-visible{outline-color:#17191d;outline-offset:3px}
.site-footer :focus-visible,.topbar :focus-visible,.advice :focus-visible{outline-color:#ffb98f}

/* Titres de section : filet orange discret, même langage que le bandeau d'accueil */
.section-head:not(.left) h2::after,.section-head:not(.left) h1::after{content:"";display:block;width:3rem;height:3px;margin:.8rem auto 0;border-radius:3px;background:var(--accent)}

/* Cartes : relief sobre et réaction au survol */
.category,.products>li,.usp{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media (hover:hover){
  .category:hover,.products>li:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,22,26,.14)}
}
.cat-img{position:relative;overflow:hidden}
.cat-img:not(.has-photo)::before{content:"";position:absolute;top:-30%;right:-8%;width:34%;height:160%;transform:rotate(18deg);background:linear-gradient(180deg,rgba(207,69,9,.55),rgba(207,69,9,.08));pointer-events:none}
.cat-img .icon{position:relative}
.card-body{gap:.35rem}
.card-brand{margin:0 0 .15rem}

/* Lisibilité : aucun texte courant sous 12 px */
.usp .sub{font-size:.8rem}
.card-label,.nl-kicker,.nl-legal,.badge-tag{font-size:max(.75rem,12px)}
.cs-step{font-size:max(.7rem,11px)}

/* Mouvement réduit : pas de doublon de marques, défilement manuel */
@media (prefers-reduced-motion:reduce){
  .brands-strip li[aria-hidden=true]{display:none}
  .brands-strip ul{padding:.4rem 0}
}

/* Écrans tactiles : cibles de 44 px minimum */
@media (max-width:64rem){
  .search button{width:2.75rem;height:2.75rem}
  .breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer nav a,.site-footer .contact a{display:inline-flex;align-items:center;min-height:44px}
  .site-footer .contact p a,.contact-list a,.contact a[href^="mailto"],.contact a[href^="tel"]{display:inline-flex;align-items:center;min-height:44px}
  .section-cta .btn,.more .btn{min-height:44px}
  .site-header .brand{display:inline-flex;align-items:center;min-height:44px}
}

/* Téléphone : une seule annonce dans la barre du haut, plus de hauteur gagnée pour le contenu */
@media (max-width:40rem){
  .cat-img{aspect-ratio:2/1}
}
@media (max-width:40rem) and (prefers-reduced-motion:reduce){
  .topbar-promos li:not(:first-child){display:none}
  .topbar-promos li{white-space:normal;text-align:center}
  .topbar-promos{width:auto;justify-content:center;padding:.5rem .8rem}
}

/* Grands écrans : lignes de texte plus confortables */
@media (min-width:90rem){
  body{font-size:1.0625rem}
  .section-head .sub{max-width:44rem}
}
@media (max-width:64rem){
  .footer-logo,.contact .line a,.line a{display:inline-flex;align-items:center;min-height:44px}
  input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem}
  label.check,.check{min-height:44px}
}

/* V12 · Les cartes d’avantages ne dépassent jamais de l’écran (mots allemands longs) */
.usps{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.usp{min-width:0}
.usp>span:not(.ico),.usp>div{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:40rem){.usps,.usps.usps-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:26rem){.usp{flex-direction:column;justify-content:center;text-align:center;gap:.45rem}}

/* V13 · Suivi du colis (page de suivi et détail de commande) */
.parcel{margin:1rem 0;padding:1rem 1.2rem;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);background:#fff}
.parcel h2,.parcel h3{margin:0 0 .6rem;font-size:1.05rem}
.parcel dl{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:0 0 .8rem}
.parcel dt{color:var(--muted)}
.parcel dd{margin:0;overflow-wrap:anywhere}
.parcel-note{margin:.2rem 0 .8rem;padding:.6rem .8rem;border-radius:8px;background:#f6f6f4;overflow-wrap:anywhere}
.parcel .button{margin:0}

/* Avoirs côté client */
.credit-list{list-style:none;margin:.5rem 0 1rem;padding:0;display:grid;gap:.6rem}
.credit-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.credit-list .inline-form{margin:0}

/* ==========================================================================
   Finitions dynamiques : étapes de commande, quantités, galerie, apparitions.
   Les mouvements ne s'appliquent qu'aux visiteurs sans « réduire les animations ».
   ========================================================================== */
.co-steps{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 1.2rem;padding:0;list-style:none}
.co-steps li{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.9rem;font-weight:600}
.co-steps li+li::before{content:"";width:clamp(1.2rem,6vw,3.2rem);height:2px;margin:0 .7rem;border-radius:2px;background:var(--line)}
.co-steps li.is-done+li::before,.co-steps li.is-now::before{background:var(--accent)}
.co-n{display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border:2px solid var(--line);border-radius:50%;background:#fff;font:700 .8rem/1 var(--font)}
.co-n svg{width:.85rem;height:.85rem}
.co-steps li.is-now{color:var(--ink)}
.co-steps li.is-now .co-n{border-color:var(--accent);background:var(--accent);color:#fff}
.co-steps li.is-done{color:var(--ink)}
.co-steps li.is-done .co-n{border-color:var(--accent);color:var(--accent)}

.qty-step{display:inline-flex;align-items:stretch;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
main .qty-step input[type=number]{width:3.4rem;margin:0;padding:.6rem .2rem;border:0;border-radius:0;box-shadow:none;text-align:center;-moz-appearance:textfield;appearance:textfield}
.qty-step input::-webkit-outer-spin-button,.qty-step input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
main .qty-step button{width:2.5rem;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--tint);color:var(--ink);font:700 1.2rem/1 var(--font);letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .15s,color .15s}
main .qty-step button:hover:not(:disabled){background:var(--accent);color:#fff}
main .qty-step button:disabled{opacity:.4;cursor:not-allowed}

.buy-form button.is-done,.buy-form button.is-done:hover{background:#1f7a4d;border-color:#1f7a4d}

.auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]):user-invalid,.quote-form input:not([type=checkbox]):not([type=hidden]):user-invalid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.auth input:not([type=checkbox]):not([type=radio]):not([type=hidden]):user-valid{border-color:#2f855a}

.gallery .g-main img{transition:opacity .22s ease}
.gallery .g-main.is-swap img{opacity:0}
.gallery .g-main{touch-action:pan-y}

@media (prefers-reduced-motion:no-preference){
  @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes tickPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
  .hero-slider.is-cycled .slide.is-active .banner-body>*{animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both}
  .hero-slider.is-cycled .slide.is-active .banner-body>*:nth-child(2){animation-delay:.08s}
  .hero-slider.is-cycled .slide.is-active .banner-body>*:nth-child(3){animation-delay:.16s}
  .hero-slider.is-cycled .slide.is-active .banner-body>*:nth-child(4){animation-delay:.24s}
  .card-pending{opacity:0;transform:translateY(16px)}
  .card-pending.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
  .category .more svg{transition:transform .2s ease}
  .category:hover .more svg{transform:translateX(4px)}
  .co-steps li.is-now .co-n{animation:tickPop .5s ease both}
  .buy-form button.is-done svg{animation:tickPop .4s ease both}
}
.toast{width:max-content;max-width:min(calc(100vw - 2rem),30rem)}
@media (max-width:40rem){main table:has(td input[type=number]) td[data-label]::before{content:attr(data-label) " : ";color:var(--muted);font-weight:600}}

/* ===== Bandeaux photo de l'accueil : photo plus lisible, texte toujours contrasté ===== */
.bn.has-img::after{background:linear-gradient(90deg,rgba(12,13,16,.74) 0%,rgba(12,13,16,.42) 36%,rgba(12,13,16,0) 70%),linear-gradient(0deg,rgba(12,13,16,.35) 0%,transparent 38%)}
.bn.has-img.bn-sm::after{background:linear-gradient(90deg,rgba(12,13,16,.82) 0%,rgba(12,13,16,.55) 55%,rgba(12,13,16,.2) 100%)}
.bn-img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bn:hover .bn-img{transform:scale(1.04)}
.bn-n1 .bn-img{object-position:62% 55%}
.bn-n2 .bn-img{object-position:60% 55%}
@media (prefers-reduced-motion:reduce){.bn-img{transition:none}.bn:hover .bn-img{transform:none}}

/* ===== Parcours de commande : finitions (retirer, copier, récapitulatif, mobile) ===== */
.cart-remove{display:block;margin:.25rem 0 0 auto;padding:0;border:0;background:none;color:var(--muted);font:600 .8rem/1.2 var(--font);text-decoration:underline;text-underline-offset:2px;cursor:pointer;width:auto}
.cart-remove:hover{color:var(--accent-dark);background:none;box-shadow:none}
tfoot th small{display:block;margin-top:.15rem;font-weight:500;color:var(--muted)}
.copy-btn{display:inline-block;width:auto;margin:0 0 0 .5rem;padding:.2rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:600 .75rem/1.3 var(--font);cursor:pointer;vertical-align:middle;transition:background-color .15s,border-color .15s,color .15s}
.copy-btn:hover{border-color:var(--accent);color:var(--accent-dark);background:#fff}
.copy-btn.is-done{border-color:#16a34a;background:#f0fdf4;color:#166534}
.conf-dl dd{min-width:0;overflow-wrap:anywhere}
.pay-total{margin:1rem 0 .6rem;padding:.8rem 1rem;border-radius:10px;background:var(--tint);border:1px solid var(--line);font-size:.95rem}
.pending-pay{margin:1rem 0}
.pending-pay h3{margin-top:0}
.toast .toast-go{padding:.3rem .7rem;border-radius:6px;background:var(--accent);color:#fff}
body:has(.conf-hero) .float-cart,body:has(.order-summary) .float-cart{display:none}
@media (max-width:40rem){
  .conf-dl{grid-template-columns:1fr;gap:.15rem}
  .conf-dl dt{margin-top:.6rem}
  .conf-mono{letter-spacing:.02em;font-size:.95rem}
}
@media (max-width:40rem){
  main table:has(td input[type=number]) tfoot tr{align-items:baseline;gap:.5rem}
  main table:has(td input[type=number]) tfoot th,main table:has(td input[type=number]) tfoot td{padding:0}
  main table:has(td input[type=number]) tbody td:last-child{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
  main table:has(td input[type=number]) .cart-remove{margin:0}
}

/* ===== Diaporama d'accueil : grande bannière avec photo ===== */
.hero-slider{margin:0 0 1.25rem;border-radius:var(--radius);overflow:hidden}
.hero-slider .slides{display:grid}
.hero-slider .banner{min-height:clamp(24rem,42vw,32rem);display:flex;align-items:center;border-radius:0}
.hero-slider .banner-body{max-width:36rem;padding:clamp(1.75rem,5vw,4rem);padding-bottom:clamp(3.75rem,7vw,5rem)}
.hero-slider .banner h1,.hero-slider .banner h2{font-size:clamp(1.9rem,4.4vw,3.2rem);text-wrap:balance}
.hero-slider .banner.has-photo{background:#0c0d10}
.hero-slider .banner.has-photo::before{display:none}
.hero-slider .banner.has-photo .banner-bg{opacity:1;object-fit:cover;object-position:72% 50%;z-index:-2}
.banner-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,13,16,.86) 0%,rgba(12,13,16,.62) 38%,rgba(12,13,16,.08) 72%),linear-gradient(0deg,rgba(12,13,16,.45) 0%,transparent 35%)}
.hero-slider .banner .eyebrow{display:inline-block;margin:0 0 .8rem;padding:.25rem .7rem;border-radius:4px;background:var(--accent);color:#fff;font:700 .76rem/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.hero-slider .banner p:not(.eyebrow):not(.actions){max-width:30rem;font-size:1.05rem;color:#e6e8eb}
.hero-slider .slider-ui{left:clamp(1.75rem,5vw,4rem)}
.hero-slider .slide .btn{margin:0}
@media (max-width:40rem){
  .hero-slider{margin-left:-.25rem;margin-right:-.25rem}
  .hero-slider .banner{min-height:25rem;align-items:flex-end}
  .banner-shade{background:linear-gradient(0deg,rgba(12,13,16,.9) 0%,rgba(12,13,16,.62) 55%,rgba(12,13,16,.12) 100%)}
  .hero-slider .banner.has-photo .banner-bg{object-position:70% 30%}
}
@media (max-width:52rem){.banner-grid{display:none}}
.hero-slider .banner-body{max-width:46rem}
.hero-slider .banner h1,.hero-slider .banner h2{font-size:clamp(1.7rem,3.7vw,2.85rem);overflow-wrap:normal;word-break:normal;hyphens:none}
.hero-slider .banner-body>p:not(.eyebrow):not(.actions){max-width:32rem}
@media (max-width:40rem){.hero-slider .banner h1,.hero-slider .banner h2{font-size:clamp(1.55rem,7.2vw,1.9rem)}}

/* Diaporama en mode « image » : l'image est la bannière (texte intégré à l'image), fondu enchaîné */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-slider .banner-img{display:block;color:inherit}
.hero-slider .banner-img img{display:block;width:100%;height:auto;aspect-ratio:1920/800;object-fit:cover}
.hero-slider.img-mode .slider-ui{left:50%;transform:translateX(-50%);bottom:.8rem;padding:.3rem .6rem;border-radius:999px;background:rgba(12,13,16,.45)}
@media (max-width:40rem){.hero-slider .banner-img img{aspect-ratio:auto;height:auto}}

/* Points du diaporama : zone tactile de 44 px, point visuel inchangé */
.dot{position:relative;width:1.6rem;height:2.75rem;background:none;border-radius:0;transition:none}
.dot::before{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:.7rem;border-radius:999px;transform:translate(-50%,-50%);background:rgba(255,255,255,.5);transition:width .25s,background-color .25s}
.dot:hover{background:none}
.dot:hover::before{background:rgba(255,255,255,.85)}
.dot[aria-current="true"]{width:2.6rem;background:none}
.dot[aria-current="true"]::before{width:1.9rem;background:#fff}
.dot:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
.slider-pause{width:2.75rem;height:2.75rem}
.slider-ui{gap:.1rem}
@media (prefers-reduced-motion:reduce){.dot::before{transition:none}}

/* Fiche produit : colonnes explicites, la zone d'achat ne « saute » jamais pendant le chargement de la galerie */
@media (min-width:52.01rem){.product-page>.gallery{grid-column:1;grid-row:1}.product-page>.buybox{grid-column:2;grid-row:1}}

.error-box{margin:0 0 1rem}
.error-box:focus{outline:2px solid var(--danger);outline-offset:4px;border-radius:6px}
.error-box .error{margin:0 0 .4rem}
[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}

/* Barre du haut : défilement continu sur tous les écrans (ordinateur compris), pause au survol, fixe si « réduire les animations » */
.topbar-marquee{flex:1;min-width:0}
@media (prefers-reduced-motion:no-preference){
  .topbar-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent)}
  .topbar-promos{width:max-content;padding:0;flex-wrap:nowrap;animation:ticker 34s linear infinite}
  .topbar-promos li{padding:0 1.6rem}
  .topbar-promos li+li::before{content:none}
  .topbar-promos li::after{content:"|";margin-left:3.2rem;opacity:.4}
  .topbar-promos li[aria-hidden]{display:block}
  .topbar-marquee:focus-within .topbar-promos{animation-play-state:paused}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.topbar-marquee:hover .topbar-promos{animation-play-state:paused}}
@media (max-width:64rem) and (prefers-reduced-motion:no-preference){.topbar-marquee{-webkit-mask-image:none;mask-image:none}.topbar-promos{padding:.5rem 0}}

/* ===== Version 14 : avis clients, alerte de stock, code promo, contact rapide ===== */
.stars{color:#c97a00;letter-spacing:.08em;white-space:nowrap}
.rating-line{margin:.15rem 0 .6rem;font-size:.95rem}
.rating-line a{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.rating-line a:hover .rating-count{text-decoration:underline}
.rating-count{color:var(--muted)}
.reviews{margin:3rem 0}
.reviews-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;margin:.4rem 0 1rem}
.reviews-avg{font:800 2rem/1 var(--display)}
.review-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1rem}
.review-list li{padding:1rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.review-list p{margin:0 0 .4rem}
.review-head{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:center}
.review-meta{color:var(--muted);font-size:.9rem}
.verified{display:inline-flex;align-items:center;gap:.25rem;color:var(--ok);font-weight:600}
.review-form-wrap>summary{display:inline-flex;list-style:none;cursor:pointer}
.review-form-wrap>summary::-webkit-details-marker{display:none}
.review-form{display:grid;gap:.35rem;max-width:40rem;margin-top:1rem;padding:1.2rem;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.review-form input:not([type=radio]),.review-form textarea{width:100%}
.rating-input{margin:0 0 .4rem;padding:0;border:0;min-width:0}
.rating-input legend{padding:0;margin:0 0 .3rem;font-weight:600}
.rating-input input{position:absolute;opacity:0;width:1px;height:1px}
.rating-input label{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;font-size:1.9rem;line-height:1;color:#c9ccd2;cursor:pointer}
.rating-input input:checked~label,.rating-input label:hover,.rating-input label:hover~label{color:#c97a00}
.rating-input input:focus-visible+label{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.alert-form{margin:.8rem 0;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.alert-form label{display:block;margin-bottom:.4rem;font-weight:600}
.alert-row{display:flex;flex-wrap:wrap;gap:.5rem}
.alert-row input{flex:1 1 14rem;min-width:0}
.coupon-form{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:1rem 0}
.coupon-form label{font-weight:600}
.coupon-form input{width:12rem;max-width:100%;text-transform:uppercase}
.coupon-form p{margin:0}
.cart-discount th,.cart-discount td{color:var(--ok)}
.sum-discount{display:flex;justify-content:space-between;gap:1rem;margin:.4rem 0;color:var(--ok);font-weight:600}
@media (max-width:52rem){body:has(.buy-bar) .float-contact{bottom:5.4rem}}
body:has(.conf-hero) .float-contact,body:has(.order-summary) .float-contact{display:none}
@media print{.float-contact{display:none!important}}

/* Contact rapide : un seul bouton qui s'ouvre (sans JavaScript grâce à <details>) */
.float-contact{position:fixed;left:1rem;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:30}
.float-contact summary{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.1rem 0 .9rem;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;list-style:none;cursor:pointer;box-shadow:0 8px 24px rgba(20,22,26,.28)}
.float-contact summary::-webkit-details-marker{display:none}
.float-contact summary .icon{width:1.4rem;height:1.4rem}
.float-contact[open] summary{background:var(--accent)}
.fc-menu{position:absolute;left:0;bottom:calc(100% + .6rem);display:grid;gap:.5rem;min-width:13rem}
.fc-menu a{display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:0 1.1rem;border-radius:12px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none;box-shadow:0 8px 24px rgba(20,22,26,.28)}
.fc-menu a:hover{background:var(--tint)}
.fc-menu .fc-wa .icon{color:#1a7a46}
.fc-menu .icon{width:1.3rem;height:1.3rem}
@media (min-width:52.01rem){.fc-menu .fc-tel{display:none}}
@media (max-width:30rem){.float-contact summary{width:3.4rem;height:3.4rem;padding:0;justify-content:center}.float-contact summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* Zones à toucher d'au moins 44 px sur téléphone et tablette */
@media (max-width:52rem){
  .rating-line a,.doc-links a{min-height:44px}
  .burger,html.js .burger{width:44px;height:44px}
  main .qty-step button{width:2.75rem;min-height:2.75rem}
  .buy-form button,.buy-bar .btn,.buy-bar button{min-height:44px}
  .tabs.is-ready .tab-list button{min-height:44px}
  .site-footer details>summary{min-height:44px;display:flex;align-items:center}
  .site-footer nav a,.site-footer li a{display:inline-flex;align-items:center;min-height:44px}
  label.check{min-height:44px;align-items:center}
  .review-form-wrap>summary,.quote>summary{min-height:44px}
}
/* Bloc « Sécurité, immatriculation et documents » : replié par défaut sur téléphone */
details.docs-block>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none}
details.docs-block>summary::-webkit-details-marker{display:none}
details.docs-block>summary::after{content:"+";font:700 1.4rem/1 var(--font);color:var(--accent)}
details.docs-block[open]>summary::after{content:"−"}
details.docs-block>summary h2{margin:0}
details.docs-block[open]>summary{margin-bottom:1rem}
/* Photo manquante : moins haute sur téléphone */
@media (max-width:40rem){.noimg.big{aspect-ratio:16/9}.noimg.big .icon{width:2.6rem;height:2.6rem}}
.rating-stars{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem}
@media (max-width:52rem){
  main button,main .btn,main a.btn,.buy-bar .btn{min-height:44px}
  details.docs-block>summary{min-height:44px}
}
/* Très petits écrans (320 px) : les boutons du bloc « Besoin d'aide » restent dans leur carte */
.advice .actions .btn{min-width:0;max-width:100%;white-space:normal;text-align:center;justify-content:center}
@media (max-width:24rem){.advice{padding-inline:1rem}.advice .actions .btn{padding-inline:.9rem;letter-spacing:.02em}}

/* V31 — audit mobile : champ newsletter ≥16px (pas de zoom iOS), pastilles de langue alignées, marge sous la barre d'achat */
.nl-row input,.newsletter input{font-size:1rem}
.drawer-lang{padding-inline:1.1rem;margin-inline:0}
@media (max-width:52rem){body:has(.buy-bar){padding-bottom:0}body:has(.buy-bar) .site-footer{padding-bottom:6rem}}
@media (max-width:30rem){
  .toast{flex-wrap:wrap;gap:.5rem .8rem;width:calc(100vw - 2rem);max-width:calc(100vw - 2rem);box-sizing:border-box}
  .toast>span{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
  .toast a{white-space:normal}
}

/* V32 — mobile : rien ne se superpose au bandeau cookies ni aux boutons des cartes produit */
@media (max-width:52rem){
  body:has([data-cookie-banner]) .buy-bar,
  body:has([data-cookie-banner]) .float-cart,
  body:has([data-cookie-banner]) .float-contact{display:none}
  body:has([data-cookie-banner]) .site-footer{padding-bottom:1rem}
  body:has(.products) .float-cart{display:none}
}

/* V33 — fiche produit mobile : « Quantité » alignée sur le sélecteur, bouton d'ajout sur toute la largeur */
@media (max-width:40rem){
  main .buy-form{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
  main .buy-form label{margin:0}
  main .buy-form button[type=submit]{flex:1 1 100%;justify-content:center}
}
@media (max-width:40rem){main .quote>summary{display:flex;justify-content:center;width:100%;box-sizing:border-box}}

/* ===== V43 · Mobile : en-tête allégé, bandeau plus court et plus lumineux, repères plus compacts ===== */
@media (max-width:52rem){
  .topbar-promos{padding:.38rem 0;font-size:.76rem}
  .header-inner{padding:.45rem .85rem;gap:.35rem .6rem}
  .burger{width:2.4rem;height:2.4rem}
  .brand{font-size:1.3rem}
  .header-actions .cart-link{width:2.5rem;height:2.5rem}
  .search input{padding:.55rem 3rem .55rem 1rem;font-size:1rem}
  .search button{width:2.1rem;height:2.1rem}
  .site-header.is-scrolled .brand{display:none}
  .site-header.is-scrolled .search{grid-column:2;order:0}
  .site-header.is-scrolled .header-inner{padding-block:.4rem}
  .hero-slider .banner{min-height:0}
  .hero-slider .banner-body{padding:1.5rem 1.15rem 3.6rem}
  .hero-slider .banner h1,.hero-slider .banner h2{font-size:clamp(1.5rem,7vw,1.9rem);line-height:1.08;margin-bottom:.45rem}
  .hero-slider .banner p{font-size:.95rem;line-height:1.45;margin-bottom:.9rem}
  .hero-slider .banner .btn{min-height:2.7rem;padding:.55rem 1rem;font-size:.82rem}
  .hero-slider .banner-bg{opacity:.62}
  .hero-slider .banner::after{height:3px}
  .slider-ui{left:1.15rem;bottom:.9rem}
  .usps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.9rem}
  .usp{flex-direction:row;text-align:left;gap:.55rem;padding:.6rem .65rem}
  .usp .ico{width:2rem;height:2rem;border-radius:8px}
  .usp strong{font-size:.8rem;line-height:1.2}
  .usp .sub{font-size:.7rem;line-height:1.25}
  .float-contact{left:.75rem}
}
@media (max-width:30rem){.float-contact summary{width:3rem;height:3rem}}

/* V43b · Mobile : bandeau en deux temps — photo bien visible en haut, texte lisible en dessous */
@media (max-width:52rem){
  .hero-slider .banner:has(.banner-bg){--ph:min(62vw,19rem)}
  .hero-slider .banner:has(.banner-bg) .banner-bg{bottom:auto;height:var(--ph);opacity:1;object-position:100% 50%;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
  .hero-slider .banner:has(.banner-bg)::before{display:none}
  .hero-slider .banner:has(.banner-bg) .banner-body{padding-top:calc(var(--ph) - 1.6rem)}
  .hero-slider .banner:has(.banner-bg) .eyebrow{position:absolute;top:.8rem;left:.9rem;z-index:2;margin:0}
}

/* V43c · Mobile : fil d'Ariane de la fiche sur une ligne, étapes de commande sur une ligne, pas de panier flottant dans le tunnel */
body:has(.co-steps) .float-cart{display:none}
@media (max-width:40rem){
  body:has(.product-page) .breadcrumb>:nth-child(-n+4),body:has(.product-page) .breadcrumb>[aria-current],body:has(.product-page) .breadcrumb>span[aria-hidden]:nth-last-child(2){display:none}
  body:has(.product-page) .breadcrumb>a:nth-child(5)::before{content:"‹";margin-right:.45rem}
  .co-steps{flex-wrap:nowrap;justify-content:space-between}
  .co-steps li{gap:.35rem;font-size:.78rem;white-space:nowrap}
  .co-steps li+li::before{width:clamp(.6rem,4vw,1.6rem);margin:0 .3rem}
}
@media (max-width:24rem){.co-steps li:not(.is-now)>span:last-child{display:none}.co-steps li+li::before{width:1.2rem}}

/* V47 · Tuiles de catégories : la remorque est montrée en entier (plus rognée) et le lien « Voir les modèles » reste visible sur mobile */
.cat-img.has-photo img{position:absolute;inset:.6rem;width:calc(100% - 1.2rem);height:calc(100% - 1.2rem);object-fit:contain}
@media (max-width:40rem){
  .cat-body .more{display:inline-flex;align-items:center;gap:.3rem;margin-top:.45rem;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark)}
  .cat-body .more .icon{width:.9rem;height:.9rem}
}

/* V50 · Bandeau d'accueil : voile plus léger (seule la zone du texte est assombrie), la photo garde ses couleurs */
@media (min-width:53rem){.banner-shade{background:linear-gradient(90deg,rgba(12,13,16,.6) 0%,rgba(12,13,16,.38) 34%,rgba(12,13,16,0) 54%)}}

/* V52 — barre de filtres rapides au-dessus des résultats (ordinateur) */
.quickbar{display:none}
@media (min-width:53rem){
  .quickbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem 1rem;align-items:end;margin:0 0 1rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
  .quickbar .qb-field{display:grid;gap:.3rem;min-width:0}
  .quickbar label{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#5b6270)}
  .quickbar select{width:100%;margin:0;min-width:0;text-overflow:ellipsis}
  .quickbar .qb-apply{grid-column:1 / -1;justify-self:start}
  .quickbar .qb-reset{grid-column:1 / -1;justify-self:start}
}

/* V54 — titres de produits complets (titres exacts du site de référence, plus longs) */
.products h2{-webkit-line-clamp:4;min-height:0}
.products h2 a{overflow-wrap:anywhere}

/* V59 — alignement parfait des cartes et fiches (bureau + mobile) */
.category .cat-body{display:flex;flex-direction:column;flex:1}
.category .cat-body .more{margin-top:auto}
.products .card-body{gap:.4rem}
.products h2{min-height:calc(1.35em * 3)}
.products .price-sm{margin-top:auto;margin-bottom:.7rem}
.products .card-actions{margin-top:0}
.products .card-brand{min-height:1.3rem}
.products .card-specs{min-height:2.6rem;align-content:flex-start}
@media (max-width:480px){
  .eckdaten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eckdaten li strong{font-size:1rem;overflow-wrap:anywhere}
  .products h2{min-height:0}
  .products .card-specs{min-height:0}
}

/* V61 — identité Cargowagen : accueil par la photo, mosaïque des catégories, plaque technique */
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.hero-slider .banner .actions{display:flex;flex-wrap:wrap;gap:.6rem}
.hero-slider .banner h1,.hero-slider .banner h2{text-transform:uppercase;line-height:1.02}
.categories.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.category.tile{position:relative;display:flex;flex-direction:row;align-items:flex-end;min-height:14rem;aspect-ratio:4/3;overflow:hidden;padding:0;border:0;border-radius:var(--radius);background:#14161a;color:#fff;text-decoration:none}
.category.tile:hover{transform:none;box-shadow:var(--shadow)}
.category.tile.tile-big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;min-height:0}
.category.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.category.tile:hover img{transform:scale(1.04)}
.category.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.35) 48%,rgba(10,11,13,0) 78%)}
.tile .tile-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.3rem;width:100%;padding:1rem 1.1rem}
.tile h3{margin:0;color:#fff;font-size:1.15rem;line-height:1.1;text-transform:uppercase}
.tile.tile-big h3{font-size:1.7rem}
.tile .tile-text{display:none;max-width:34rem;color:#dfe0e3;font-size:.9rem}
.tile.tile-big .tile-text{display:block}
.tile .more{margin-top:.15rem;color:#ffb08c;font:700 .76rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase}
.tile-ico{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff40}
.tile-ico .icon{width:4rem;height:4rem}
.eckdaten{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:#fff}
.eckdaten li{border:0;border-right:1px solid var(--ink);border-radius:0;background:#fff;padding:.6rem .8rem}
.eckdaten li:last-child{border-right:0}
.eckdaten .eck-label{font:700 .66rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem}
.eckdaten strong{text-transform:uppercase}
@media (max-width:900px){.categories.mosaic{grid-template-columns:repeat(2,1fr)}.category.tile.tile-big{grid-column:span 2;grid-row:auto;min-height:15rem}}
@media (max-width:520px){.category.tile{min-height:10.5rem;aspect-ratio:auto}.tile h3{font-size:.95rem}.tile .more{font-size:.68rem}.tile .tile-body{padding:.75rem .8rem}.eckdaten strong{font-size:1rem}}
.hero-slider .banner-shade{background:linear-gradient(90deg,rgba(12,13,16,.92) 0%,rgba(12,13,16,.72) 45%,rgba(12,13,16,.1) 80%),linear-gradient(0deg,rgba(12,13,16,.5) 0%,transparent 35%)}
@media (max-width:520px){.tile .more-cta{display:none}}

/* V63 — guide « Trouvez ma remorque », confiance, usages et questions des fiches */
.finder{margin:2.5rem 0;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius);background:#14161a;color:#fff}
.finder-head{margin-bottom:1.1rem}
.finder-head .eyebrow{color:#ffb08c;margin:0 0 .3rem}
.finder h2{margin:0;color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase}
.finder-form{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.1rem 1.4rem;align-items:start}
.finder-q{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:.55rem}
.finder-q legend,.finder-q>label{display:flex;align-items:center;gap:.55rem;padding:0;font:700 .95rem/1.2 var(--font);color:#fff}
.q-n{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:#fff;font:700 .85rem/1 var(--font)}
.finder .chips{display:flex;flex-wrap:wrap;gap:.45rem}
.finder .chip input{position:absolute;opacity:0;pointer-events:none}
.finder .chip label{display:inline-block;padding:.5rem .8rem;border:1px solid #ffffff55;border-radius:999px;font:600 .85rem/1.2 var(--font);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.finder .chip label:hover{border-color:#fff}
.finder .chip input:checked+label{background:var(--accent);border-color:var(--accent)}
.finder .chip input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}
.finder select{width:100%;min-height:2.8rem;padding:.55rem .8rem;border:1px solid #ffffff55;border-radius:8px;background:#fff;color:#14161a;font:500 .95rem var(--font)}
.finder-go{grid-column:1/-1;margin:.2rem 0 0}
.finder-go .btn{margin:0}
.trust{margin:3rem 0}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;margin:0;padding:0;list-style:none}
.trust-grid li{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;min-width:0}
.trust-grid .ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:10px;background:var(--o-50,#fbeee8);color:var(--accent)}
.trust-grid strong{font:700 1rem/1.25 var(--font);color:var(--ink)}
.trust-grid span:not(.ico){font-size:.88rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.usage-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;margin:2rem 0}
.usage-faq h2{margin:0 0 .8rem;font-size:1.4rem;text-transform:uppercase}
.uses ul{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}
.uses li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.4}
.uses .icon{flex:none;color:var(--accent);margin-top:.15rem}
.faq-mini details{border-bottom:1px solid var(--line);padding:.7rem 0}
.faq-mini summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-mini summary::after{content:"+";color:var(--accent);font-weight:800}
.faq-mini details[open] summary::after{content:"–"}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini p{margin:.5rem 0 0;color:var(--muted)}
@media (max-width:1000px){.trust-grid{grid-template-columns:repeat(3,1fr)}.finder-form{grid-template-columns:repeat(2,minmax(0,1fr))}.finder-q:first-child{grid-column:1/-1}}
@media (max-width:640px){.trust-grid{grid-template-columns:1fr}.finder-form{grid-template-columns:1fr}.usage-faq{grid-template-columns:1fr}.finder .chip label{padding:.5rem .7rem;font-size:.82rem}}
.finder .finder-form{background:none;border:0;box-shadow:none;padding:0;margin:0;max-width:none;border-radius:0}

/* V64 — logo Cargowagen : remorque de profil + nom (remplace la barre orange) */
.brand::before{display:none}
.brand-mark{height:1.25em;width:auto;flex:none;margin-right:.55rem}
.brand-name{line-height:1}
.footer-brand{display:inline-flex;align-items:center}

/* V65 — « Pourquoi nous faire confiance » en bandeau qui défile, sans surcharger l'accueil */
.trust{margin:2rem 0}
.trust-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.trust-track{display:flex;gap:.9rem;width:max-content;margin:0;padding:.2rem 0;list-style:none;animation:trustScroll 38s linear infinite}
@keyframes trustScroll{to{transform:translateX(calc(-50% - .45rem))}}
.trust-track>li{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;min-width:16rem;padding:.8rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.trust-track .ico{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:10px;background:var(--o-50,#fbeee8);color:var(--accent)}
.trust-track .tt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.trust-track strong{font:700 .95rem/1.2 var(--font);color:var(--ink);white-space:nowrap}
.trust-track .tt>span{font-size:.82rem;line-height:1.3;color:var(--muted);white-space:nowrap}
.trust-marquee:hover .trust-track,.trust-marquee:focus-within .trust-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.trust-marquee{-webkit-mask-image:none;mask-image:none;overflow-x:auto}.trust-track{animation:none}.trust-track>li[aria-hidden=true]{display:none}}

/* V66 — guide et blocs de fiche plus discrets */
.finder{margin:1.5rem 0;padding:.9rem 1.1rem;display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap}
.finder h2{font-size:1.25rem;white-space:nowrap}
.finder .finder-form{flex:1 1 34rem;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:.6rem;align-items:end}
.finder .finder-q{gap:.25rem}
.finder .finder-q>label{font:600 .72rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#ffffffb0}
.finder select{min-height:2.5rem;padding:.4rem .7rem;font-size:.9rem}
.finder .finder-form .btn{margin:0;white-space:nowrap}
.usage-faq{display:block;margin:1.25rem 0}
.uses-line{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin:0 0 .8rem}
.uses-line strong{margin-right:.2rem;font:700 .8rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.use-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.85rem;line-height:1.2}
.use-pill .icon{color:var(--accent);width:1rem;height:1rem}
details.faq-mini{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:0}
details.faq-mini>summary{cursor:pointer;padding:.75rem 1rem;font-weight:700;list-style:none;display:flex;justify-content:space-between}
details.faq-mini>summary::-webkit-details-marker{display:none}
details.faq-mini>summary::after{content:"+";color:var(--accent);font-weight:800}
details.faq-mini[open]>summary::after{content:"–"}
details.faq-mini dl{display:block;margin:0;padding:0 1rem 1rem}
details.faq-mini dt{margin:.7rem 0 .15rem;font-weight:700}
details.faq-mini dd{margin:0;color:var(--muted);font-size:.92rem}
@media (max-width:760px){.finder{padding:.9rem}.finder .finder-form{grid-template-columns:repeat(2,minmax(0,1fr))}.finder .finder-form .btn{grid-column:1/-1;justify-content:center}.finder .finder-q:first-child{grid-column:1/-1}}

/* V68 — bandeaux d'accueil : photo en grand, texte court en bas */
.banner-grid{grid-template-columns:repeat(3,1fr);gap:1.1rem}
.banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{grid-column:auto;min-height:20rem;padding:1.4rem;justify-content:flex-end;gap:.9rem}
.banner-grid .bn.has-img::after{background:linear-gradient(0deg,rgba(10,11,14,.88) 0%,rgba(10,11,14,.55) 30%,rgba(10,11,14,0) 62%)}
.banner-grid .bn-img{object-position:center 60%}
.banner-grid .bn-n1 .bn-img,.banner-grid .bn-n2 .bn-img,.banner-grid .bn-n3 .bn-img{object-position:center 60%}
.banner-grid .bn-body{max-width:none;gap:.5rem}
.banner-grid .bn-text{display:none}
.banner-grid .bn-title{font-size:clamp(1.3rem,1.9vw,1.7rem)}
.banner-grid .bn-cta{position:absolute;top:1.1rem;right:1.1rem;align-self:auto;padding:.5rem .85rem;background:rgba(255,255,255,.95);color:var(--ink)}
.banner-grid .bn-cta svg,.banner-grid .bn-cta .icon{color:var(--accent)}
.banner-grid .bn:hover .bn-cta{background:var(--accent);color:#fff}
.banner-grid .bn:hover .bn-cta .icon{color:#fff}
@media (max-width:52rem){
  .banner-grid{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-1rem;padding:0 1rem}
  .banner-grid::-webkit-scrollbar{display:none}
  .banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{display:flex;flex:0 0 82%;min-height:17rem;scroll-snap-align:center;padding:1.1rem}
}

/* V69 — mobile : finitions */
.footer-brand,.footer-brand:hover,.footer-brand:focus{text-decoration:none}
.site-header input[type=search]::placeholder{text-overflow:ellipsis}
@media (max-width:52rem){.site-header.is-scrolled input[type=search]{font-size:.95rem}}

/* V70 — tablette/mobile : bouton Contact compact, atouts mieux alignés */
@media (max-width:52rem){.float-contact summary{width:3.2rem;height:3.2rem;padding:0;justify-content:center}.float-contact summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.usp{align-items:center}
.usp .sub{text-wrap:balance}

/* V71 — bandeaux mobile : repère de défilement et fond de secours si la photo tarde */
.banner-grid .bn{background-color:#1b1e23}
@media (max-width:52rem){.banner-grid .bn:last-child{margin-right:1rem}.banner-grid{padding-bottom:.2rem}}

/* V72 — bandeaux photo un peu plus sombres : texte lisible, ambiance plus premium */
.banner-grid .bn.has-img::after{background:linear-gradient(0deg,rgba(10,11,14,.92) 0%,rgba(10,11,14,.68) 34%,rgba(10,11,14,.3) 68%,rgba(10,11,14,.22) 100%)}
.banner-grid .bn-title{text-shadow:0 2px 14px rgba(0,0,0,.55)}

/* V73 — texte des bandeaux plus discret : la photo reste le sujet */
.banner-grid .bn.has-img::after{background:linear-gradient(0deg,rgba(10,11,14,.85) 0%,rgba(10,11,14,.5) 22%,rgba(10,11,14,0) 46%)}
.banner-grid .bn{padding:1rem 1.1rem}
.banner-grid .bn-body{gap:.35rem}
.banner-grid .bn-eyebrow{padding:.18rem .5rem;font-size:.64rem;letter-spacing:.05em}
.banner-grid .bn-title{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.1}
.banner-grid .bn-cta{top:.8rem;right:.8rem;padding:.4rem .7rem;font-size:.7rem}
@media (max-width:52rem){.banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{min-height:15rem}.banner-grid .bn-title{font-size:1.15rem}}

/* V74 — bloc conseil avec visage (photo « advisor ») ; logo de marque au-dessus du titre */
.advice.has-photo{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2rem;align-items:center;text-align:left;padding:2rem 2.2rem}
.advice-who{margin:0;display:grid;justify-items:center;gap:.5rem;text-align:center}
.advice-who img{width:6.5rem;height:6.5rem;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.85)}
.advice-who strong{display:block;font-size:.95rem}
.advice-who span{font-size:.78rem;color:#d6d8dc}
.advice.has-photo .advice-main h2,.advice.has-photo .advice-main p{margin-left:0;margin-right:0;max-width:none}
.advice.has-photo .actions{max-width:none;grid-template-columns:repeat(auto-fit,minmax(14rem,max-content))}
@media (max-width:40rem){.advice.has-photo{grid-template-columns:1fr;text-align:center}.advice.has-photo .advice-main h2,.advice.has-photo .advice-main p{margin-left:auto;margin-right:auto}}
.products .card-brand{margin:.2rem 0 .35rem}

/* V75 — bande des marques : logos en couleur, comme sur le site exemple */
.brands-strip li img{filter:none;opacity:1;height:2.5rem;max-width:10.5rem}
.brands-strip.has-logos li{padding:.7rem 1.6rem}
.brands-strip.has-logos li a{color:var(--ink);font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* V76 — bandeaux d'accueil façon « affiche » : panneau diagonal à gauche, photo à droite, bouton en bas à droite */
.banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{display:block;min-height:0;aspect-ratio:16/10;padding:0;border:1px solid rgba(255,255,255,.08)}
.banner-grid .bn-img{left:auto;right:0;width:78%;object-position:60% 55%}
.banner-grid .bn.has-img::after{inset:0;background:linear-gradient(105deg,#0c0d10 0%,#14161a 38%,rgba(20,22,26,.0) 62%);clip-path:none}
.banner-grid .bn.has-img::before{content:"";position:absolute;z-index:1;top:-10%;bottom:-10%;left:34%;width:.5rem;background:var(--accent);transform:skewX(-18deg);box-shadow:.9rem 0 0 rgba(255,255,255,.14)}
.banner-grid .bn-body{position:absolute;z-index:2;left:1.1rem;top:50%;transform:translateY(-50%);width:44%;max-width:none;gap:.55rem}
.banner-grid .bn-eyebrow{background:none;padding:0;color:#ff9a62;font-size:.68rem;letter-spacing:.08em;border-radius:0}
.banner-grid .bn-title{font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.05;text-shadow:none}
.banner-grid .bn-cta{top:auto;bottom:.9rem;right:.9rem;background:var(--accent);color:#fff;padding:.55rem .9rem;font-size:.72rem;z-index:3}
.banner-grid .bn-cta .icon{color:#fff}
.banner-grid .bn:hover .bn-cta{background:var(--accent-dark)}
@media (max-width:52rem){
  .banner-grid{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding:0;gap:.8rem}
  .banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{flex:none;display:block;min-height:0;aspect-ratio:16/10;padding:0}
  .banner-grid .bn-title{font-size:1.35rem}
}
@media (max-width:30rem){.banner-grid .bn,.banner-grid .bn-sm,.banner-grid .bn-lg{aspect-ratio:4/3}.banner-grid .bn-body{width:46%}.banner-grid .bn-title{font-size:1.2rem}}
/* V76b — photo plus visible : panneau de texte plus étroit */
.banner-grid .bn-img{width:76%;object-position:42% 55%}
.banner-grid .bn.has-img::after{background:linear-gradient(105deg,#0c0d10 0%,#14161a 30%,rgba(20,22,26,0) 50%)}
.banner-grid .bn.has-img::before{left:30%}
.banner-grid .bn-body{width:38%}
@media (max-width:30rem){.banner-grid .bn-body{width:40%}.banner-grid .bn-title{font-size:1.1rem}}
.banner-grid .bn-eyebrow{width:auto;max-width:100%}

/* V77 — mobile : les 3 bandeaux photo sont masqués (l'accueil reste court, comme sur le site exemple) */
@media (max-width:52rem){.banner-grid{display:none}}

/* V79 — mobile : hero compact (une image courte avec titre et un bouton), comme le site exemple */
@media (max-width:40rem){
  .hero-slider .banner:has(.banner-bg){min-height:0;height:18rem;align-items:flex-end}
  .hero-slider .banner:has(.banner-bg) .banner-bg{inset:0;height:100%;bottom:0;-webkit-mask-image:none;mask-image:none;object-position:70% 50%;opacity:1}
  .hero-slider .banner:has(.banner-bg) .banner-shade{background:linear-gradient(0deg,rgba(12,13,16,.92) 0%,rgba(12,13,16,.6) 42%,rgba(12,13,16,.05) 80%)}
  .hero-slider .banner:has(.banner-bg) .banner-body{padding:1rem 1rem 3rem}
  .hero-slider .banner-body>p:not(.eyebrow):not(.actions){display:none}
  .hero-slider .banner .actions .btn.ghost{display:none}
  .hero-slider .banner h1,.hero-slider .banner h2{font-size:1.45rem;margin-bottom:.6rem}
  .hero-slider .banner:has(.banner-bg) .eyebrow{position:static;margin:0 0 .5rem;width:max-content}
}

/* V80 — mobile : « Produits à la une » plus compact (2 cartes visibles), logos de marques plus petits */
@media (max-width:40rem){
  .carousel .products{grid-auto-columns:calc((100% - .75rem)/2);gap:.75rem;padding:.25rem .15rem 1rem}
  .carousel .products .delivery-pill,.carousel .products .card-specs,.carousel .products .card-label{display:none}
  .carousel .products .card-body{padding:.7rem .7rem .8rem}
  .carousel .products h2{font-size:.88rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .carousel .products .price-sm{font-size:1.05rem}
  .carousel .products .thumb{aspect-ratio:4/3}
  .carousel .products .brand-logo{height:1.3rem;max-width:5.5rem}
  .carousel .products .card-actions form{display:none}.carousel .products .card-actions .btn{width:100%;justify-content:center;padding:.6rem .5rem;font-size:.72rem}
  .brands-strip li img{height:1.8rem;max-width:6.5rem}
  .brands-strip.has-logos li{padding:.55rem 1rem}
}

/* V81 — menu mobile : liste épurée, rubriques repliées avec « + », bouton de suivi et langue en bas */
.drawer{scrollbar-width:none}
.drawer::-webkit-scrollbar{display:none}
.drawer-head{padding:1.3rem 1.2rem;color:var(--navy)}
.drawer a,.drawer summary{padding:1.1rem 1.2rem;font-size:1.05rem}
.drawer summary{background:none;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";color:var(--accent);font-size:1.5rem;font-weight:700;line-height:1}
.drawer details[open]>summary::after{content:"–"}
.drawer details[open]>summary{border-bottom-color:transparent}
.drawer a.sub{font-size:.98rem;padding:.8rem 1.2rem .8rem 1.8rem}
.drawer-lang{margin:1.2rem 0 .6rem;padding-inline:1.2rem}
.drawer-track{margin:.4rem 1.2rem 0;padding:.9rem 1rem;border:2px solid var(--ink);border-radius:8px;text-align:center;font-size:.85rem;letter-spacing:.06em}
.drawer-track:hover{background:var(--ink);color:#fff}

/* V82 : accueil = affiches (texte dans l'image), changement rapide et sobre */
.hero-slider.img-mode .slide{transition:opacity .45s ease,visibility .45s}
.hero-slider.img-mode .slider-ui{left:auto;right:.8rem;top:.7rem;bottom:auto;transform:none}
@media (max-width:40rem){.hero-slider.img-mode .slider-ui{right:.4rem;top:.3rem;padding:.15rem .35rem}}

/* V84 : 3 bannières = affiches (texte dans l'image) */
.banner-grid .bn-poster{display:block;aspect-ratio:1600/800;background:#14161a}
.banner-grid .bn-poster::before,.banner-grid .bn-poster::after{content:none}
.banner-grid .bn-poster .bn-img{position:static;display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.banner-grid .bn-poster:hover .bn-img{transform:scale(1.03)}
.banner-grid .bn-poster picture{display:block;width:100%;height:100%}

/* V85 : « Produits à la une » — photos plein cadre, même format pour toutes, fond neutre */
.carousel .products .thumb{background:#e9ebee}
.carousel .products .thumb img{padding:0;object-fit:cover;object-position:50% 55%}

/* ===== V86 Panier : finitions mobile et tablette ===== */
.cart-remove,.cart-remove:hover,.cart-remove:focus-visible{box-shadow:none}
.cart-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
main table:has(td input[type=number]) tbody td:first-child a{color:var(--ink);text-decoration:none}
main table:has(td input[type=number]) tbody td:first-child a:hover{color:var(--accent-dark);text-decoration:underline}
@media (max-width:40rem){
  main table:has(td input[type=number]){border:0;background:none}
  main table:has(td input[type=number]) tbody tr{border-top:0}
  main table:has(td input[type=number]) tfoot tr{border-bottom:0;padding:.8rem 0 0;border-top:1px solid var(--line)}
  main table:has(td input[type=number]) tfoot tr + tr{border-top:0;padding-top:.5rem}
  main table:has(td input[type=number]) tfoot th small{border:0;max-width:16rem}
  main table:has(td input[type=number]) tbody td:nth-child(3){justify-self:end;grid-row:2 / span 1;grid-column:2}
}
@media (max-width:40rem){
  main table:has(td input[type=number]) tfoot th,main table:has(td input[type=number]) tfoot td,main table:has(td input[type=number]) tfoot tr + tr th{border:0}
  main table:has(td input[type=number]) tbody td:last-child{justify-content:flex-start}
  main table:has(td input[type=number]) td[data-label]::before{margin-right:.35rem;white-space:pre}
  main table:has(td input[type=number]) tbody td:last-child .cart-remove{margin-left:auto}
  .coupon-form{display:grid;grid-template-columns:1fr auto;gap:.4rem .6rem}
  .coupon-form label{grid-column:1/-1}
  .coupon-form input{width:100%}
}

/* ===== V86 Confirmation : mobile ===== */
@media (max-width:40rem){
  .conf-actions{display:flex;flex-direction:column;gap:.6rem}
  .conf-actions .btn{width:100%;justify-content:center;text-align:center;margin:0}
  .conf-dl dd .conf-mono{display:block;font-size:.88rem;letter-spacing:0;word-break:normal;overflow-wrap:normal}
  .conf-dl dd .copy-btn{margin:.4rem 0 0}
}

/* ===== Descriptions produits (V96) ===== */
.desc p{margin:0 0 1rem}
.desc .desc-list{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.desc .desc-list li{position:relative;padding-left:1.3rem;line-height:1.5}
.desc .desc-list li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.5rem;height:.5rem;border-radius:2px;background:var(--accent)}
.desc p:last-child{margin-bottom:0}
.desc .desc-note{padding:.7rem .9rem;border-left:3px solid var(--accent);background:var(--tint);border-radius:0 8px 8px 0;color:var(--muted);font-size:.95rem}
.lead.desc{max-width:64ch}

/* ===== Guides d'achat par catégorie (V98) ===== */
.cat-guide{max-width:62rem;margin:3.5rem auto 0;padding-top:2.5rem;border-top:1px solid var(--line)}
.cat-guide h2{margin:0 0 1rem}
.cat-guide h3{margin:2rem 0 1rem}
.cat-guide p{max-width:68ch}
.guide-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0 0 1.5rem;padding:0;list-style:none}
.guide-tips li{display:grid;align-content:start;gap:.3rem;padding:1rem 1.1rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:#fff}
.guide-tips strong{color:var(--navy)}
.guide-tips span{color:var(--muted);font-size:.95rem;line-height:1.5}
.guide-help{padding:.9rem 1.1rem;border-radius:10px;background:var(--tint)}
@media (max-width:40rem){.guide-tips{grid-template-columns:minmax(0,1fr)}.cat-guide{margin-top:2.5rem}}

/* ═══ ACCUEIL MOBILE : photo pleine largeur, panneau sombre sur la partie vide + texte par-dessus ═══ */
.slide-m{display:none}
.banner-grid .bn-m{display:none}
@media (max-width:40rem){
  .hero-slider.img-mode .slide{position:relative}
  .hero-slider.img-mode .banner-img img{aspect-ratio:900/506;height:auto}
  .hero-slider.img-mode .slide-m{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;width:100%;padding:.9rem 1rem;pointer-events:none;background:linear-gradient(90deg,rgba(12,14,18,.95) 0%,rgba(12,14,18,.88) 26%,rgba(12,14,18,.42) 42%,rgba(12,14,18,0) 58%)}
  .hero-slider.img-mode .slide-m::after{content:"";position:absolute;top:-10%;bottom:-10%;left:40%;width:.35rem;z-index:0;background:var(--accent);transform:skewX(-18deg)}
  .slide-m .sm-eyebrow{margin:0;font:700 .66rem/1.2 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#ff9a62;max-width:41%}
  .slide-m .sm-title{margin:0;max-width:41%;font:800 clamp(1.15rem,5.6vw,1.5rem)/1.04 var(--display);text-transform:uppercase;color:#fff;text-wrap:balance}
  .slide-m .sm-title span{display:inline;color:#ff7a2e}
  .slide-m .sm-text{display:none}
  .slide-m .sm-cta{position:relative;z-index:1;white-space:nowrap;margin:.25rem 0 0;min-height:2.2rem;padding:.4rem .8rem;font-size:.72rem}
  .hero-slider.img-mode .slider-ui{top:auto;height:auto;width:auto;left:auto;right:.7rem;bottom:.6rem;transform:none;background:rgba(12,13,16,.55)}
}
@media (max-width:52rem){
  .banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;overflow:visible;margin:0 0 1.25rem;padding:0}
  .banner-grid .bn:last-child{margin-right:0}
  .banner-grid .bn-poster{display:block;position:relative;width:100%;max-width:none;margin:0;aspect-ratio:16/9;min-height:0;padding:0;flex:none;border-radius:var(--radius);overflow:hidden;background:#14161a}
  .banner-grid .bn-poster picture{display:block;width:100%;height:100%}
  .banner-grid .bn-poster .bn-img{width:100%;height:100%;object-fit:cover;object-position:right center}
  .banner-grid .bn-poster:hover .bn-img{transform:none}
  .banner-grid .bn-poster .bn-m{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem;padding:.9rem 1rem;color:#fff;background:linear-gradient(90deg,rgba(12,14,18,.95) 0%,rgba(12,14,18,.88) 26%,rgba(12,14,18,.42) 42%,rgba(12,14,18,0) 58%)}
  .banner-grid .bn-poster .bn-m::after{content:"";position:absolute;top:-10%;bottom:-10%;left:40%;width:.35rem;z-index:0;background:var(--accent);transform:skewX(-18deg)}
  .bn-m .bm-eyebrow{max-width:41%;font:700 .64rem/1.2 var(--font);letter-spacing:.07em;text-transform:uppercase;color:#ff9a62}
  .bn-m .bm-title{max-width:41%;font:800 clamp(.92rem,4.3vw,1.1rem)/1.06 var(--display);text-transform:uppercase;text-wrap:balance}
  .bn-m .bm-text{display:none}
  .bn-m .bm-eyebrow{display:none}
  .bn-m .bm-cta{position:relative;z-index:1;white-space:nowrap;margin-top:.25rem;min-height:2.1rem;padding:.4rem .8rem;font-size:.7rem}
}
@media (min-width:30rem) and (max-width:52rem){
  .bn-m .bm-eyebrow{display:block}
  .banner-grid .bn-n3{grid-column:1/-1;aspect-ratio:21/8}
  .banner-grid .bn-poster .bn-m{padding-left:1.4rem}
}

@media (max-width:40rem){.bn-m .bm-title{font-size:clamp(.8rem,3.9vw,.98rem);max-width:43%;overflow-wrap:normal}}

/* Mobile : slider en fondu (comme le diaporama du haut) + images plus basses + panneau clair sur le diaporama */
@media (max-width:40rem){
  .hero-slider.img-mode .banner-img img{aspect-ratio:2/1;object-fit:cover;object-position:right 45%}
  .hero-slider.img-mode .slide-m{background:linear-gradient(90deg,#f2f1ee 0%,#f2f1ee 30%,rgba(242,241,238,.55) 43%,rgba(242,241,238,0) 58%)}
  .slide-m .sm-eyebrow{color:var(--accent)}
  .slide-m .sm-title{color:#14161a}
  .slide-m .sm-title span{color:var(--accent)}
  .banner-grid{display:grid;position:relative;gap:0;overflow:hidden;border-radius:var(--radius);margin:0 0 1.25rem;padding:0}
  .banner-grid .bn-poster,.banner-grid .bn-n3{grid-area:1/1/2/2;width:100%;flex:none;aspect-ratio:2/1;border-radius:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
  .banner-grid .bn-poster.is-active,.banner-grid:not(.is-js) .bn-poster:first-child{opacity:1;visibility:visible}
  .banner-grid .bn-poster .bn-img{object-position:right 55%}
  .banner-grid .slider-ui{display:flex;position:absolute;top:auto;left:auto;right:.7rem;bottom:.6rem;transform:none;padding:.3rem .6rem;border-radius:999px;background:rgba(12,13,16,.55);z-index:5}
}
@media (min-width:40.01rem){.banner-grid .slider-ui{display:none}}
@media (max-width:40rem){
  .banner-grid{grid-template-columns:minmax(0,1fr)}
  .hero-slider.img-mode .slider-ui,.banner-grid .slider-ui{transform:scale(.78);transform-origin:right bottom;right:.5rem;bottom:.4rem}
}

/* Mobile : fondu sans « fantôme » (la diapositive qui part reste opaque jusqu'à ce que la nouvelle soit en place) */
@keyframes slideIn{from{opacity:0}to{opacity:1}}
@media (max-width:40rem){
  .hero-slider.img-mode .slide{opacity:1;visibility:hidden;z-index:1;transition:none}
  .hero-slider.img-mode .slide.is-active{visibility:visible;z-index:2;transition:none}
  .hero-slider.img-mode.is-cycled .slide.is-active{animation:slideIn .45s ease both}
  .banner-grid .bn-poster,.banner-grid .bn-n3{opacity:1;visibility:hidden;z-index:1;transition:none}
  .banner-grid .bn-poster.is-active,.banner-grid:not(.is-js) .bn-poster:first-child{visibility:visible;z-index:2;transition:none}
  .banner-grid.is-cycled .bn-poster.is-active{animation:slideIn .45s ease both}
  .banner-grid .slider-ui{background:transparent;padding:.2rem .3rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.65))}
}
@media (prefers-reduced-motion:reduce){.hero-slider .slide.is-active,.banner-grid .bn-poster.is-active{animation:none!important}}

/* Mobile/tablette : panneau crème sur les cartes aussi (même style que le diaporama du haut) */
@media (max-width:52rem){
  .banner-grid .bn-poster{background:#f2f1ee}
  .banner-grid .bn-poster .bn-m{color:#14161a;background:linear-gradient(90deg,#f2f1ee 0%,#f2f1ee 30%,rgba(242,241,238,.55) 43%,rgba(242,241,238,0) 58%)}
  .bn-m .bm-eyebrow{color:var(--accent)}
}

/* Bureau : cartes sur le même principe que le mobile (photo sans texte + panneau crème + vrai texte, FR/DE) */
@media (min-width:52.01rem){
  .banner-grid .bn-poster{position:relative;overflow:hidden;background:#f2f1ee;aspect-ratio:2/1}
  .banner-grid .bn-poster .bn-img{object-position:right 55%}
  .banner-grid .bn-poster .bn-m{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;padding:1rem 1.3rem;color:#14161a;pointer-events:none;background:linear-gradient(90deg,#f2f1ee 0%,#f2f1ee 30%,rgba(242,241,238,.55) 43%,rgba(242,241,238,0) 58%)}
  .banner-grid .bn-poster .bn-m::after{content:"";position:absolute;top:-10%;bottom:-10%;left:40%;width:.4rem;background:var(--accent);transform:skewX(-18deg);z-index:0}
  .banner-grid .bn-m .bm-eyebrow{display:block;max-width:40%;font:700 .7rem/1.25 var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
  .banner-grid .bn-m .bm-title{display:block;max-width:40%;font:800 clamp(1.05rem,1.55vw,1.4rem)/1.06 var(--display);text-transform:uppercase;color:#14161a}
  .banner-grid .bn-m .bm-text{display:none}
  .banner-grid .bn-m .bm-cta{position:relative;z-index:1;white-space:nowrap;margin-top:.3rem;min-height:2.3rem;padding:.45rem .9rem;font-size:.76rem}
  .banner-grid .bn-poster:hover .bm-cta{background:var(--accent-dark)}
}
@media (min-width:52.01rem) and (max-width:80rem){
  .banner-grid .bn-m .bm-eyebrow{display:none}
  .banner-grid .bn-m .bm-title{max-width:42%;font-size:clamp(.88rem,1.5vw,1.1rem);overflow-wrap:normal;hyphens:auto}
}

/* Mobile : diaporama et cartes un peu plus larges (marges latérales réduites, comme garaix) */
@media (max-width:40rem){
  .hero-slider{margin-left:-.65rem;margin-right:-.65rem}
  .banner-grid{margin-left:-.65rem;margin-right:-.65rem}
}

/* Mobile : format 16:9 pleine largeur (comme garaix) pour le diaporama et les cartes */
@media (max-width:40rem){
  .hero-slider.img-mode .banner-img img{aspect-ratio:16/9;object-position:right center}
  .banner-grid .bn-poster,.banner-grid .bn-n3{aspect-ratio:16/9}
  .slide-m .sm-title{font-size:clamp(1.15rem,5.6vw,1.5rem)}
  .banner-grid .bn-m .bm-title,.bn-m .bm-title{font-size:clamp(.95rem,4.6vw,1.2rem)}
  .banner-grid .bn-m .bm-eyebrow{display:block}
}

/* Bureau : titres des cartes sans césure et sans toucher la bande orange */
@media (min-width:52.01rem){
  .banner-grid .bn-poster .bn-m{background:linear-gradient(90deg,#f2f1ee 0%,#f2f1ee 34%,rgba(242,241,238,.55) 47%,rgba(242,241,238,0) 62%)}
  .banner-grid .bn-poster .bn-m::after{left:44%}
  .banner-grid .bn-m .bm-eyebrow{max-width:36%}
  .banner-grid .bn-m .bm-title{max-width:36%;font-size:clamp(1rem,1.3vw,1.3rem);hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
}
@media (min-width:52.01rem) and (max-width:80rem){
  .banner-grid .bn-m .bm-title{max-width:38%;font-size:clamp(.88rem,1.45vw,1.05rem);hyphens:none;-webkit-hyphens:none}
}
@media (min-width:52.01rem) and (max-width:100rem){
  .banner-grid .bn-m .bm-eyebrow{display:none}
}
.banner-grid .bn-m .bm-eyebrow{overflow-wrap:normal;word-break:normal;hyphens:none}

/* Mobile : le panier du bandeau reste visible en permanence → pas de second panier flottant */
@media (max-width:40rem){
  .float-cart{display:none}
}

/* ═══ Défilements : animation seulement quand le script a créé la boucle (.is-looping) ; sinon liste simple ═══ */
.topbar-promos:not(.is-looping){animation:none!important;width:auto!important;flex-wrap:wrap}
.carousel.marquee:has(.products:not(.is-looping)){-webkit-mask-image:none;mask-image:none;overflow-x:auto}
.carousel.marquee .products:not(.is-looping){animation:none!important}
.brands-strip:has(ul:not(.is-looping)){-webkit-mask-image:none;mask-image:none}
.brands-strip ul:not(.is-looping){animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:.6rem 0}
.brands-strip li a{justify-content:center}
.brands-strip li img{height:2rem;width:auto;max-width:9rem;object-fit:contain}
.brands-strip li{padding:.4rem 1.6rem}

/* « Pourquoi nous faire confiance » : deux engagements, une seule fois, sans défilement */
.trust-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
.trust-track{animation:none;width:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.9rem}
.trust-track>li{min-width:0}
.trust-track strong,.trust-track .tt>span{white-space:normal}

/* Bloc conseil : « Demander des informations » en évidence, « Appeler » en second */
.advice .actions .btn:not(.call){background:var(--accent);color:#fff;border-color:var(--accent);font-size:1.02rem;box-shadow:0 6px 18px rgba(217,72,15,.35)}
.advice .actions .btn:not(.call):hover{background:var(--accent-dark)}
.advice .actions .btn.call{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6)}
.advice .actions .btn.call:hover{background:rgba(255,255,255,.12)}

/* Cartes de catégories : photo plein cadre, même format 3:2, même cadrage et même fond sur les 8 cartes */
.category .cat-img.has-photo{aspect-ratio:3/2;background:#e3e3e4}
.category .cat-img.has-photo img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media (max-width:40rem){.category .cat-img.has-photo{aspect-ratio:3/2}}

/* Qualité mobile (repris de l'audit, après contrôle visuel) : focus clavier visible, pas de débordement des cartes, titres de catégorie lisibles */
:where(img,video,iframe){max-width:100%}
:where(.category,.products>li,.card-body,.section-head){min-width:0}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:52rem){
  .products,.categories,.banner-grid,.usps{min-width:0}
  .products h2,.category h3,.card-label,.delivery-pill{overflow-wrap:anywhere}
}
@media (max-width:30rem){
  .cat-body h3{font-size:max(.8rem,12px);line-height:1.25}
  .banner .actions .btn{max-width:100%;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .category:hover,.products>li:hover{transform:none}
}

/* Menu « Catégories » : sur écrans moyens (tablette, téléphone en paysage), le panneau reste dans la fenêtre au lieu de dépasser à droite */
@media (min-width:52.01rem) and (max-width:70rem){
  .main-nav{position:relative}
  .dd:has(>.mega){position:static}
  .dd-panel.mega{left:1rem;right:1rem;width:auto;min-width:0;max-width:46rem}
}

/* Grande bannière : texte réel (net sur tous les écrans) posé sur une image sans texte — tablette et ordinateur */
@media (min-width:40.01rem){
  .hero-slider.img-mode .slide{position:relative}
  .hero-slider.img-mode .banner-img img{aspect-ratio:1600/580;height:auto;object-fit:cover}
  .hero-slider.img-mode .slide-m{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(.3rem,.9vw,.8rem);width:38%;padding:0 0 0 4.2%;pointer-events:none}
  .hero-slider.img-mode .slide-m::after{display:none}
  .slide-m .sm-eyebrow{margin:0;max-width:none;font:700 clamp(.62rem,.9vw,.85rem)/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
  .slide-m .sm-title{margin:0;max-width:none;font:800 clamp(1.15rem,3.5vw,3.5rem)/1.02 var(--display);text-transform:uppercase;color:#14161a;text-wrap:balance}
  .slide-m .sm-title span{display:block;color:var(--accent)}
  .slide-m .sm-text{display:none;margin:0;max-width:30ch;font:500 clamp(.9rem,1.15vw,1.15rem)/1.45 var(--font);color:#4a4f57}
  .slide-m .sm-cta{position:relative;z-index:1;white-space:nowrap;margin:.2rem 0 0;min-height:0;padding:clamp(.35rem,.7vw,.7rem) clamp(.7rem,1.5vw,1.4rem);font-size:clamp(.7rem,.95vw,.95rem);pointer-events:none}
  .hero-slider.img-mode .slider-ui{left:auto;right:.9rem;top:.8rem;bottom:auto;transform:none}
}
@media (min-width:58rem){.slide-m .sm-text{display:block}}

/* Produits à la une sur téléphone et tablette : défilement au doigt, une carte à la fois, la suivante dépasse pour montrer qu'on peut glisser */
.carousel.marquee .products:not(.is-looping){width:max-content;flex-wrap:nowrap;scroll-snap-type:x proximity}
@media (max-width:52rem),(pointer:coarse){
  .carousel.marquee{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:1rem;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
  .carousel.marquee::-webkit-scrollbar{display:none}
  .carousel.marquee .products{padding-inline:1rem;animation:none!important}
  .carousel.marquee .products>li{scroll-snap-align:start}
}

/* Bouton « Contact » flottant : plus discret sur mobile, il s'efface quand on lit vers le bas */
.float-contact{transition:transform .25s ease,opacity .25s ease}
.float-contact.is-away{transform:translateY(calc(100% + 1.5rem));opacity:0;pointer-events:none}
@media (max-width:52rem){
  .float-contact{left:.6rem;bottom:calc(.8rem + env(safe-area-inset-bottom,0px))}
  .float-contact summary{width:2.9rem;height:2.9rem;opacity:.94}
}
@media (prefers-reduced-motion:reduce){.float-contact{transition:none}}

/* Mobile (≤40rem) : photo en haut, texte lisible dessous (grande bannière + 3 cartes) — rien n'est coupé, même en allemand */
@media (max-width:40rem){
  .hero-slider.img-mode .banner-img img{aspect-ratio:16/9;object-fit:cover;object-position:center 55%}
  .hero-slider.img-mode .slide{display:flex;flex-direction:column}
  .hero-slider.img-mode .slide-m{position:static;inset:auto;width:auto;z-index:auto;gap:.5rem;padding:1.1rem 1.1rem 1.25rem;background:#f2f1ee;pointer-events:auto}
  .hero-slider.img-mode .slide-m::after{display:none}
  .slide-m .sm-eyebrow{max-width:none;font-size:.72rem}
  .slide-m .sm-title{max-width:none;font-size:clamp(1.55rem,7.4vw,2rem);line-height:1.02;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none}
  .slide-m .sm-text{display:block;margin:0;max-width:none;font:500 .95rem/1.4 var(--font);color:#4a4f57}
  .slide-m .sm-cta{min-height:2.75rem;margin-top:.35rem;padding:.65rem 1.1rem;font-size:.82rem}
  .hero-slider.img-mode .slider-ui{top:.7rem;bottom:auto;right:.7rem}

  .banner-grid .bn-poster,.banner-grid .bn-n3{aspect-ratio:auto;display:flex;flex-direction:column;background:#f2f1ee}
  .banner-grid .bn-poster picture{height:auto;aspect-ratio:16/9;flex:none}
  .banner-grid .bn-poster .bn-img{aspect-ratio:16/9;height:auto;object-position:center 55%}
  .banner-grid .bn-poster .bn-m{position:static;inset:auto;z-index:auto;display:flex;gap:.45rem;padding:1rem 1.1rem 1.15rem;color:#14161a;background:#f2f1ee;pointer-events:auto}
  .banner-grid .bn-poster .bn-m::after{display:none}
  .banner-grid .bn-m .bm-eyebrow{display:block;max-width:none;font-size:.7rem;color:var(--accent)}
  .banner-grid .bn-m .bm-title{max-width:none;font-size:clamp(1.3rem,6.2vw,1.6rem);line-height:1.04;color:#14161a;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none}
  .banner-grid .bn-m .bm-text{display:none}
  .banner-grid .bn-m .bm-cta{min-height:2.6rem;margin-top:.3rem;padding:.55rem 1rem;font-size:.8rem}
  .banner-grid .slider-ui{top:.7rem;bottom:auto;right:.7rem}
}

/* Marques : défilement fluide et stable sur téléphone (cases de largeur fixe, accélération GPU, pas de masque qui scintille sur iOS) */
.brands-strip ul.is-looping{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation-name:brandScroll3d}
@keyframes brandScroll3d{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.brands-strip ul.is-looping li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:10.5rem;padding:.55rem 1rem;box-sizing:border-box}
.brands-strip ul.is-looping li a{width:100%}
.brands-strip ul.is-looping li img{max-width:100%}
@media (max-width:52rem){
  .brands-strip{-webkit-mask-image:none;mask-image:none}
  .brands-strip ul.is-looping{animation-duration:38s}
  .brands-strip ul.is-looping li{width:8rem;padding:.5rem .8rem}
  .brands-strip ul.is-looping li img{height:1.9rem}
}
@media (prefers-reduced-motion:reduce){.brands-strip ul.is-looping{will-change:auto}}

/* Mobile (≤40rem) : pas de 3 cartes sous la grande bannière — bannière, avantages, puis catégories (comme avant) */
@media (max-width:40rem){.banner-grid{display:none}}

/* Mobile (≤40rem) : grande bannière fidèle au modèle validé — photo basse, bande orange en diagonale, pastille de marque, texte réel dessous */
.slide-badge{display:none}
@media (max-width:40rem){
  .hero-slider.img-mode{border-radius:1.25rem}
  .hero-slider.img-mode .slide{position:relative}
  .hero-slider.img-mode .banner-img{position:relative;display:block}
  .hero-slider.img-mode .banner-img img{aspect-ratio:1.8/1;object-position:center 62%}
  .hero-slider.img-mode .banner-img::before,.hero-slider.img-mode .banner-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none}
  .hero-slider.img-mode .banner-img::after{z-index:2;background:var(--accent);clip-path:polygon(0 80%,100% 0,100% 22%,0 100%)}
  .hero-slider.img-mode .banner-img::before{z-index:1;background:#f2f1ee;clip-path:polygon(0 80%,100% 0,100% 100%,0 100%)}
  .hero-slider.img-mode .slide-badge{display:inline-flex;align-items:center;position:absolute;z-index:4;top:.7rem;left:.7rem;padding:.4rem .75rem;border-radius:.5rem;background:rgba(255,255,255,.94);color:#14161a;font:800 .78rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase;pointer-events:none}
  .hero-slider.img-mode .slide-badge .brand-mark{height:.9rem;margin-right:.45rem}
  .hero-slider.img-mode .slide-m{gap:.45rem;padding:1rem 1.15rem 1.35rem}
  .slide-m .sm-eyebrow{font:700 .76rem/1.2 var(--font);letter-spacing:.06em}
  .slide-m .sm-title{font:800 clamp(1.7rem,8vw,2.15rem)/1.04 var(--font);letter-spacing:-.025em;text-wrap:balance}
  .slide-m .sm-title span{display:block}
  .slide-m .sm-text{font:400 1.02rem/1.45 var(--font);color:#555a63}
  .slide-m .sm-cta{align-self:flex-start;border-radius:6px;font:800 .88rem/1 var(--font);letter-spacing:.03em;min-height:2.9rem;padding:.7rem 1.2rem}
  .hero-slider.img-mode .slider-ui{z-index:5}
}
@media (max-width:40rem){
  .hero-slider.img-mode .banner-img{margin-bottom:-1px}
  .hero-slider.img-mode .banner-img::before{bottom:-1px;height:calc(26% + 1px)}
  .hero-slider.img-mode .slide-m{position:relative;z-index:0}
}
@media (max-width:40rem){
  /* Les diapositives ont toutes la même hauteur : le panneau clair remplit tout le bas, sans vide ni coins carrés */
  .hero-slider.img-mode{background:#f2f1ee}
  .hero-slider.img-mode .slide{height:100%}
  .hero-slider.img-mode .slide-m{flex:1 1 auto}
}

/* Téléphone / tablette : site calme — plus de défilement automatique ; barre du haut et marques se font défiler au doigt */
@media (max-width:52rem),(pointer:coarse){
  .topbar-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .topbar-marquee::-webkit-scrollbar{display:none}
  .topbar-promos:not(.is-looping){flex-wrap:nowrap!important;width:max-content!important;padding:.5rem 0;justify-content:flex-start}
  .topbar-promos:not(.is-looping) li{flex:0 0 auto;padding:0 1.2rem;scroll-snap-align:start}
  .brands-strip:has(ul:not(.is-looping)){overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .brands-strip:has(ul:not(.is-looping))::-webkit-scrollbar{display:none}
  .brands-strip ul:not(.is-looping){flex-wrap:nowrap;width:max-content;justify-content:flex-start;gap:0;padding:.4rem 1rem}
  .brands-strip ul:not(.is-looping) li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:8rem;padding:.5rem .8rem;box-sizing:border-box;scroll-snap-align:start}
  .brands-strip ul:not(.is-looping) li img{height:1.9rem;max-width:100%}
}

/* Téléphone : aucun glissement latéral parasite, et le geste horizontal est réservé aux diaporamas */
@media (max-width:52rem),(pointer:coarse){
  html,body{overflow-x:clip}
  .hero-slider{touch-action:pan-y}
  .trust-marquee,.carousel.marquee,.brands-strip,.topbar-marquee{-webkit-mask-image:none;mask-image:none}
}

/* Commande : récapitulatif repliable (replié sur téléphone, le formulaire apparaît tout de suite) */
.sum-details>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none}
.sum-details>summary::-webkit-details-marker{display:none}
.sum-details>summary h2{margin:0}
.sum-head-total{display:none}
@media (max-width:56rem){
  .order-summary{padding:.85rem 1.1rem}
  .sum-details>summary{cursor:pointer;min-height:2.75rem}
  .sum-head-total{display:block;margin-left:auto;color:var(--accent);font:800 1.25rem/1 var(--display)}
  .sum-details>summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin:0 .2rem .25rem .3rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .sum-details[open]>summary::after{transform:rotate(-135deg);margin-bottom:-.1rem}
  .sum-details[open]>summary .sum-head-total{display:none}
  .sum-details[open]>.sum-lines{margin-top:.9rem}
}
@media (prefers-reduced-motion:reduce){.sum-details>summary::after{transition:none}}

/* Zones de toucher d'au moins 44 px (marques, recherche, points du diaporama) sans changer l'aspect */
.brands-strip li a{min-height:2.75rem}
.search button::after{content:"";position:absolute;inset:-.35rem}
@media (max-width:40rem){
  .hero-slider.img-mode .slider-ui,.banner-grid .slider-ui{transform:none;padding:.1rem .3rem}
}
.dot::after{content:"";position:absolute;inset:0 -.4rem}

/* Grand bandeau : défilement automatique (6 s) avec fine barre de progression orange — calme, sans mouvement latéral */
.hero-progress{display:none}
@media (max-width:40rem){
  .hero-slider.img-mode{position:relative}
  .hero-slider.img-mode:not(.is-paused) .hero-progress{display:block;position:absolute;z-index:6;left:1.15rem;right:1.15rem;bottom:.55rem;height:3px;border-radius:3px;background:rgba(20,22,26,.1);overflow:hidden;pointer-events:none}
  .hero-progress::after{content:"";display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
  .hero-progress.run::after{animation:heroProg 6s linear forwards}
}
@keyframes heroProg{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero-progress{display:none!important}}

/* Barre du haut (téléphone et tablette) : une annonce à la fois, en fondu — hauteur stable (la plus longue annonce donne la hauteur) */
.topbar-promos.is-fade{display:grid!important;grid-template-columns:minmax(0,1fr);width:auto!important;padding:.5rem .8rem!important;animation:none!important;text-align:center}
.topbar-promos.is-fade li{grid-area:1/1;display:block!important;padding:0!important;white-space:normal;text-align:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.topbar-promos.is-fade li.is-on{opacity:1;visibility:visible}
.topbar-promos.is-fade li::before,.topbar-promos.is-fade li::after{content:none!important}
@media (prefers-reduced-motion:reduce){.topbar-promos.is-fade li{transition:none}}

/* Barre du haut : l'ancienne annonce s'efface avant que la nouvelle apparaisse (jamais deux textes superposés) */
.topbar-promos.is-fade li{transition:opacity .25s ease,visibility 0s linear .25s}
.topbar-promos.is-fade li.is-on{transition:opacity .35s ease .25s,visibility 0s}

/* Grand bandeau d'accueil — téléphone (≤40rem) : panneau sombre (même noir que la barre du haut), titre blanc + orange, lueur orange discrète */
@media (max-width:40rem){
  .hero-slider.img-mode{background:#14161a}
  .hero-slider.img-mode .banner-img::before{background:#14161a}
  .hero-slider.img-mode .slide-m{background:radial-gradient(110% 80% at 100% 100%,rgba(214,70,10,.28),rgba(214,70,10,0) 62%),#14161a}
  .slide-m .sm-eyebrow{color:#ff9a62}
  .slide-m .sm-title{color:#fff}
  .slide-m .sm-title span{color:#ff7a2e}
  .slide-m .sm-text{color:#b9bfc9}
  .hero-slider.img-mode .slide-m{justify-content:flex-start}
  .hero-slider.img-mode:not(.is-paused) .hero-progress{background:rgba(255,255,255,.16)}
}

/* Barre du haut (téléphone, tablette, écran tactile) : état de départ avant le script = première annonce seule, centrée (aucun saut au chargement) */
@media (max-width:52rem),(pointer:coarse){
  .topbar-promos:not(.is-fade){width:auto!important;justify-content:center;padding:.5rem .8rem!important;animation:none!important;flex-wrap:nowrap}
  .topbar-promos:not(.is-fade) li:not(:first-child){display:none}
  .topbar-promos:not(.is-fade) li{padding:0;white-space:normal;text-align:center}
}

/* Cartes d'avantages : un long mot (allemand) se coupe proprement avec un trait d'union, jamais au milieu d'une lettre */
.usp strong,.usp .sub{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;min-width:0}

/* Grand bandeau (tablette et ordinateur) : le texte de l'ancienne diapositive s'efface avant que celui de la nouvelle apparaisse (jamais deux textes superposés) ; les photos, elles, restent en fondu */
@media (min-width:40.01rem){
  .hero-slider.img-mode .slide .slide-m{transition:opacity .15s ease}
  .hero-slider.img-mode .slide:not(.is-active) .slide-m{opacity:0}
  .hero-slider.img-mode .slide.is-active .slide-m{opacity:1;transition:opacity .35s ease .18s}
}

/* Tablette (41–52rem) : cartes à deux colonnes — titres sans césure, bande orange déplacée à droite du texte */
@media (min-width:40.01rem) and (max-width:52rem){
  .banner-grid .bn-poster .bn-m{background:linear-gradient(90deg,#f2f1ee 0%,#f2f1ee 44%,rgba(242,241,238,.55) 56%,rgba(242,241,238,0) 72%)}
  .banner-grid .bn-poster .bn-m::after{left:54%}
  .banner-grid .bn-m .bm-eyebrow{max-width:48%}
  .banner-grid .bn-m .bm-title{max-width:48%;font-size:clamp(.78rem,2.1vw,1rem);line-height:1.08;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
}

/* Paiement : la grille ne doit jamais dépasser l'écran (mot long en allemand dans le récapitulatif) */
.auth>*{min-width:0}
.sum-details>summary{min-width:0}
.sum-details>summary h2{min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}

/* Panier sur très petit écran (≤22rem, soit 352 px) : prix, quantité et « Retirer » s'empilent au lieu de dépasser (allemand : mots longs) */
@media (max-width:22rem){
  main table:has(td input[type=number]){display:block;width:100%}
  main table:has(td input[type=number]) tbody{display:block}
  main table:has(td input[type=number]) tr{grid-template-columns:minmax(0,1fr) auto}
  main table:has(td input[type=number]) td{min-width:0}
  main table:has(td input[type=number]) tbody td:last-child{flex-wrap:wrap}
  main table:has(td input[type=number]) td:first-child{overflow-wrap:anywhere}
  main table:has(td input[type=number]) tbody td:not(:first-child),main table:has(td input[type=number]) tfoot td{white-space:nowrap}
  main table:has(td input[type=number]) tr{grid-template-columns:minmax(0,1fr)}
  main table:has(td input[type=number]) tbody td:nth-child(3){grid-column:1/-1;grid-row:auto;justify-self:start}
  main table:has(td input[type=number]) tfoot th{min-width:0;flex:1 1 auto}
  main table:has(td input[type=number]) tfoot td{flex:none}
}

/* Panier en allemand jusqu'à 24rem (384 px) : même présentation empilée (mots longs) */
@media (max-width:24rem){
  html[lang="de"] main table:has(td input[type=number]){display:block;width:100%}
  html[lang="de"] main table:has(td input[type=number]) tbody{display:block}
  html[lang="de"] main table:has(td input[type=number]) tr{grid-template-columns:minmax(0,1fr)}
  html[lang="de"] main table:has(td input[type=number]) td{min-width:0}
  html[lang="de"] main table:has(td input[type=number]) td:first-child{overflow-wrap:anywhere}
  html[lang="de"] main table:has(td input[type=number]) tbody td:not(:first-child),html[lang="de"] main table:has(td input[type=number]) tfoot td{white-space:nowrap}
  html[lang="de"] main table:has(td input[type=number]) tbody td:nth-child(3){grid-column:1/-1;grid-row:auto;justify-self:start}
  html[lang="de"] main table:has(td input[type=number]) tbody td:last-child{flex-wrap:wrap}
  html[lang="de"] main table:has(td input[type=number]) tfoot th{min-width:0;flex:1 1 auto}
  html[lang="de"] main table:has(td input[type=number]) tfoot td{flex:none}
}

/* Bandeau d'accueil — téléphone : photo plus haute (elle domine), texte court, commandes rangées sur une ligne en bas du panneau, sans badge */
@media (max-width:40rem){
  .hero-slider.img-mode .banner-img img{aspect-ratio:1.4/1;object-position:60% 58%}
  .hero-slider.img-mode .slide-m .sm-text{display:none}
  .hero-slider.img-mode .slide-m{gap:.5rem;padding:.9rem 1.15rem 3.7rem}
  .hero-slider.img-mode .slider-ui{top:auto;left:auto;right:.55rem;bottom:.3rem;transform:none;padding:0;background:transparent;border-radius:0}
  .hero-slider.img-mode:not(.is-paused) .hero-progress{left:1.15rem;right:7.6rem;bottom:calc(.3rem + 1.375rem - 1.5px)}
}

/* Pastille « Livraison offerte » en verre dépoli sur la photo (téléphone) */
@media (max-width:40rem){
  .hero-slider.img-mode .slide-badge{gap:.45rem;padding:.5rem .85rem;border-radius:999px;background:rgba(20,22,26,.5);color:#fff;font:700 .72rem/1 var(--font);letter-spacing:.05em;border:1px solid rgba(255,255,255,.4);box-shadow:0 4px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)}
  .hero-slider.img-mode .slide-badge svg{width:1rem;height:1rem;flex:none}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (max-width:40rem){.hero-slider.img-mode .slide-badge{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);text-shadow:0 1px 2px rgba(0,0,0,.35)}}
}

/* Téléphone / tablette : logos et produits à la une défilent lentement (script : transform seul) ; le doigt les arrête et les fait glisser */
.carousel.marquee.is-js,.brands-strip.is-js{overflow:hidden!important;overflow-x:hidden!important;scroll-snap-type:none!important;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.carousel.marquee.is-js{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)!important}
.brands-strip.is-js{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.carousel.marquee .products.is-js,.brands-strip ul.is-js{display:flex;flex-wrap:nowrap;width:max-content;justify-content:flex-start;animation:none!important;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding-inline:0}
.carousel.marquee .products.is-js{gap:1rem;padding-block:.25rem 1rem}
.carousel.marquee .products.is-js>li{flex:0 0 14.5rem;width:14.5rem;scroll-snap-align:none}
.brands-strip ul.is-js li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:8.5rem;padding:.5rem .8rem;box-sizing:border-box}
.brands-strip ul.is-js li a{width:100%;display:flex;justify-content:center}
.brands-strip ul.is-js li img{height:2rem;max-width:100%;width:auto}
@media (prefers-reduced-motion:reduce){.carousel.marquee .products.is-js,.brands-strip ul.is-js{will-change:auto}}

/* ═══ Effets « waouh » — stables : opacity/transform seulement, aucun décalage de mise en page, coupés si « mouvement réduit » ═══ */
@media (prefers-reduced-motion:no-preference){
  /* Bandeau : zoom très lent sur la photo active + texte qui monte en cascade */
  .hero-slider.img-mode .banner-img{overflow:hidden}
  .hero-slider.img-mode .banner-img img{transform:scale(1);transform-origin:60% 55%;will-change:transform}
  .hero-slider.img-mode .slide.is-active .banner-img img{animation:heroZoom 9s ease-out both}
  @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
  .hero-slider.img-mode .slide.is-active .slide-m>*{animation:wowRise .75s cubic-bezier(.2,.8,.2,1) both}
  .hero-slider.img-mode .slide.is-active .slide-m>*:nth-child(1){animation-delay:.12s}
  .hero-slider.img-mode .slide.is-active .slide-m>*:nth-child(2){animation-delay:.2s}
  .hero-slider.img-mode .slide.is-active .slide-m>*:nth-child(3){animation-delay:.28s}
  .hero-slider.img-mode .slide.is-active .slide-m>*:nth-child(4){animation-delay:.36s}
  @keyframes wowRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

  /* Boutons : reflet qui traverse au survol / à l'appui */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg) translateX(0);transition:none;pointer-events:none}
  .btn:hover::after,.btn:focus-visible::after{transform:skewX(-20deg) translateX(480%);transition:transform .7s ease}
  .btn:active{transform:scale(.985)}

  /* Barre d'en-tête : verre dépoli dès qu'on défile */
  .site-header{transition:box-shadow .2s,background-color .25s}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Cartes produits et catégories : relief + zoom doux de la photo */
  .products>li,.category{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .2s}
  .products>li:hover,.category:hover{transform:translateY(-6px);box-shadow:0 18px 40px -14px rgba(20,22,26,.28)}
  .products>li .thumb img,.category img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .products>li:hover .thumb img,.category:hover img{transform:scale(1.06)}
  .usps .usp{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
  .usps .usp:hover{transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(20,22,26,.25)}
}
.site-header.is-scrolled{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}

/* ── Logo image fourni (assets/img/brand/logo.png) ── */
.brand-img{height:3rem;max-width:14rem}
@media (max-width:40rem){.brand-img{height:2.6rem;max-width:11.5rem}}

/* ── En-tête mobile compact : compte visible + recherche à bouton collé ── */
@media (max-width:40rem){
  .header-actions a.btn-account[href*="mon-compte"]{display:inline-flex;width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-radius:50%;gap:0}
  .header-actions .btn-account .label{display:none}
  .brand-img{height:2.2rem;max-width:10.5rem}
  .search input{border-radius:.6rem;padding-right:3.4rem;background:#fff;border-color:#d9dce1}
  .search button{right:0;top:0;transform:none;width:2.9rem;height:100%;border-radius:0 .6rem .6rem 0}
}

/* ── Bannière d'accueil mobile : photo basse, texte par-dessus (en-tête) ── */
@media (max-width:40rem){
  .hero-slider.img-mode{background:#14161a;border-radius:.9rem;overflow:hidden}
  .hero-slider.img-mode .slide{height:auto}
  .hero-slider.img-mode .banner-img::before,.hero-slider.img-mode .banner-img::after{display:none}
  .hero-slider.img-mode .banner-img{margin:0}
  .hero-slider.img-mode .banner-img img{aspect-ratio:1.1/1;object-fit:cover;object-position:68% 55%}
  .hero-slider.img-mode .slide-badge{display:none}
  .hero-slider.img-mode .slide-m{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.3rem;width:auto;padding:1rem 1.1rem 1rem;pointer-events:none;background:linear-gradient(180deg,rgba(14,16,20,.9) 0%,rgba(14,16,20,.68) 32%,rgba(14,16,20,0) 58%,rgba(14,16,20,.45) 100%)}
  .hero-slider.img-mode .slide-m>*{max-width:75%}
  .hero-slider.img-mode .slide-m .sm-eyebrow{font:700 .72rem/1.2 var(--font);letter-spacing:.08em;color:#ff8a4c}
  .hero-slider.img-mode .slide-m .sm-title{font:800 clamp(1.3rem,6.2vw,1.6rem)/1.05 var(--font);letter-spacing:-.02em;color:#fff;text-transform:uppercase}
  .hero-slider.img-mode .slide-m .sm-title span{display:block;color:#ff7a2e}
  .hero-slider.img-mode .slide-m .sm-cta{pointer-events:auto;min-height:2.5rem;padding:.55rem 1rem;font-size:.78rem;margin-top:auto}
  .hero-slider.img-mode .slider-ui{left:auto;right:.8rem;bottom:.95rem;transform:none}
  .hero-slider.img-mode .slider-pause{display:none}
  .hero-slider.img-mode .hero-progress,.hero-slider.img-mode:not(.is-paused) .hero-progress{display:none}
}

/* ── Finitions (audit v158) : textes lisibles, zones tactiles ── */
.eck-label{font-size:.72rem}
.footer-logo img{max-height:4.2rem}
@media (max-width:80rem){.banner-grid .bn-m .bm-eyebrow,.bn-m .bm-eyebrow{font-size:max(.72rem,11px)}}
@media (max-width:80rem){.hero-slider .slide-m .sm-eyebrow,.slide-m .sm-eyebrow{font-size:max(.72rem,11px)}}
@media (min-width:40.01rem) and (max-width:52rem){.search button{width:2.75rem;height:2.75rem}}
@media (max-width:52rem){.cb-main a,.nl-legal a,.cookie-banner a{padding-block:.75rem}}
@media (max-width:52rem){
  .breadcrumb:has(+ .product-page) [aria-current="page"],.breadcrumb:has(+ .product-page) span[aria-hidden="true"]:nth-last-child(2){display:none}
}
.eckdaten .eck-label,.eckdaten span.eck-label{font-size:.72rem}
@media (max-width:64rem){.hero-slider .slide-m .sm-cta{min-height:2.6rem;padding-block:.55rem}}
@media (max-width:52rem){
  main p>a:only-child,main li>a:only-child,main td>a:only-child{display:inline-block;padding-block:.5rem}
  .filter-chips a,.chips a,.chip{min-height:2.5rem;display:inline-flex;align-items:center}
}
@media (min-width:40.01rem) and (max-width:52rem){
  .header-actions a.btn-account[href*="mon-compte"]{display:inline-flex;width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-radius:50%;gap:0}
  .header-actions .btn-account .label{display:none}
}

/* v160 : le menu mobile passe au-dessus de la bannière cookies (liens du bas atteignables) */
body.drawer-open .cookie-banner{display:none}