@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');

:root{
  --ink:#111111;
  --muted:#6f6a63;
  --paper:#fffdf8;
  --cream:#f7f1e8;
  --line:#e5ded4;
  --dark:#080b0d;
  --panel:#101518;
  --copper:#e85f16;
  --copper-2:#ff7a26;
  --copper-dark:#a94312;
  --green:#22c965;
  --shadow:0 22px 60px rgba(18,18,18,.14);
  --soft-shadow:0 12px 30px rgba(18,18,18,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(1220px,92vw);margin:auto}

/* TOP STRIP */
.top{
  background:#090b0c;
  color:#fff;
  font-size:.92rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.top .container{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:8px 0;
}
.top a{color:#fff!important;text-decoration:none!important;font-weight:800}
.top .container>*:nth-child(2){text-align:center}
.top .container>*:last-child{text-align:right}

/* NAV WHITE BAR */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:#fffdf8;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.navin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand img{height:58px;width:auto}
.menu{display:flex;align-items:center;gap:25px;font-weight:900;text-transform:uppercase;font-size:.88rem;letter-spacing:.02em}
.menu a{text-decoration:none;position:relative;padding:9px 0;color:#101010}
.menu a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:3px;border-radius:999px;background:var(--copper);transition:.22s ease}
.menu a:hover:after,.menu a.active:after{width:100%}
.menu a.active{color:var(--copper-dark)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border-radius:9px;text-decoration:none!important;
  font-weight:900;letter-spacing:.02em;color:#fff!important;
  background:linear-gradient(135deg,var(--copper-2),var(--copper-dark));
  box-shadow:0 16px 34px rgba(232,95,22,.26);
  border:1px solid rgba(255,255,255,.12);
  transition:.22s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(232,95,22,.32)}
.btn.blue,.btn.dark,.btn.ghost{
  background:rgba(8,11,13,.55)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.30);box-shadow:none;
}
.btn.white{background:#fffdf8!important;color:#111!important}

/* HERO */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    linear-gradient(90deg,rgba(5,8,10,.98) 0%,rgba(5,8,10,.91) 43%,rgba(5,8,10,.38) 100%),
    url('assets/brice-atelier.jpg') center right/cover;
}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(0deg,rgba(5,8,10,.72),transparent);pointer-events:none;
}
.hero .container{
  position:relative;z-index:1;min-height:660px;
  display:grid;grid-template-columns:1fr;align-items:center;
  padding:70px 0 28px;
}
.hero .container>div:first-child{max-width:770px}
.kicker{
  display:inline-flex;align-items:center;text-transform:uppercase;letter-spacing:.08em;
  font-weight:900;font-size:.76rem;color:#ff8a3d;
  background:rgba(232,95,22,.10);border:1px solid rgba(232,95,22,.85);
  padding:9px 16px;border-radius:999px;
}
h1,.title{
  font-family:"Space Grotesk",Manrope,system-ui,sans-serif;
  font-size:clamp(2.85rem,5.45vw,5.45rem);line-height:.98;
  letter-spacing:-.05em;margin:24px 0 22px;font-weight:700;
}
h1 .accent,.title .accent{color:var(--copper-2)}
h2{
  font-family:"Space Grotesk",Manrope,system-ui,sans-serif;
  font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.06;
  letter-spacing:-.035em;margin:0 0 20px;
}
h3{font-size:1.18rem;line-height:1.25;margin:0 0 8px}
.lead{font-size:1.08rem;color:#f5eee7;max-width:660px}
.lead strong{color:#fff;font-weight:900}
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}

/* PROOF CARDS */
.hero-proof{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 8px}
.proof-card{
  display:inline-flex;align-items:center;gap:12px;min-width:250px;
  text-decoration:none!important;color:#fff!important;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.24);
  border-radius:9px;padding:12px 16px;backdrop-filter:blur(10px);transition:.22s ease;
}
.proof-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.stars,.proof-card .stars{color:#ffc247;letter-spacing:1px;white-space:nowrap}
.proof-card strong{display:block;color:#fff;font-weight:900;line-height:1.1}
.proof-card span span{display:block;color:#e8dfd4;font-size:.9rem;line-height:1.2}

/* TRUST PILLS */
.hero-trustline{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.hero-trustline span{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:9px 13px;font-weight:850;color:#fff;
}

/* METRIC CARDS - final approved style, no extra text */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px;max-width:1120px}
.metric{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:20px 24px;backdrop-filter:blur(10px);min-height:110px;
}
.metric:before{
  content:"";width:54px;height:54px;display:block;background:var(--copper-2);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;opacity:.98;
}
.metric:nth-child(1):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='m12 7 .7 1.4 1.5.2-1.1 1.1.3 1.5-1.4-.8-1.4.8.3-1.5-1.1-1.1 1.5-.2L12 7Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='m12 7 .7 1.4 1.5.2-1.1 1.1.3 1.5-1.4-.8-1.4.8.3-1.5-1.1-1.1 1.5-.2L12 7Z'/%3E%3C/svg%3E");
}
.metric:nth-child(2):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.metric:nth-child(3):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
.metric:nth-child(4):before{
  background:var(--green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.32 1.77.57 2.61a2 2 0 0 1-.45 2.11L8 9.67a16 16 0 0 0 6.33 6.33l1.23-1.23a2 2 0 0 1 2.11-.45c.84.25 1.72.45 2.61.57A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.32 1.77.57 2.61a2 2 0 0 1-.45 2.11L8 9.67a16 16 0 0 0 6.33 6.33l1.23-1.23a2 2 0 0 1 2.11-.45c.84.25 1.72.45 2.61.57A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}
.metric b{display:block;font-size:clamp(2rem,2.65vw,2.55rem);line-height:1.0}
.metric span{display:block;color:#f3ece5;font-size:1.04rem;line-height:1.34;margin-top:5px}
.metric small{display:none!important}

/* MAIN SECTIONS */
.section{padding:78px 0}.soft{background:linear-gradient(180deg,#fffdf8,#f1e9dd)}.center{text-align:center}.center p{margin-left:auto;margin-right:auto}.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.grid,.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card,.review{background:#fffdf8;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--soft-shadow)}
.path{border-radius:22px;padding:30px;color:#fff;min-height:292px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);background:linear-gradient(135deg,#1f2428,#3a332d)}
.path:nth-child(2){background:linear-gradient(135deg,#754026,#b26232)}
.path:nth-child(3){background:linear-gradient(135deg,#2d3a32,#53685a)}
.path p{color:#f0ebe4}
.icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#f0e4d9;color:var(--copper-dark);font-size:1.5rem;margin-bottom:16px}
.blueicon{background:#ece9e4;color:#30363a}.greenicon{background:#e8ede8;color:#53685a}
.photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);position:relative;background:#e8e1d8}
.photo img{width:100%;height:100%;object-fit:cover}
.caption{position:absolute;left:20px;bottom:20px;background:rgba(7,9,10,.86);color:#fff;border-radius:10px;padding:12px 18px;font-weight:850;backdrop-filter:blur(8px)}
.ribbon{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pill{display:inline-flex;align-items:center;gap:7px;background:#fffdf8;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-weight:800;color:#3f3f3a}
.pill.orange{background:#f2e4d7;color:#754026;border-color:#e2c3aa}

/* HOME CATALOG */
.catalog-controls{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:12px!important;max-width:1180px;margin:28px auto 52px!important;overflow:visible!important}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;white-space:normal!important;text-align:center!important;line-height:1.15!important;max-width:280px!important;border:1px solid var(--line)!important;background:#fffdf8!important;color:#181818!important;border-radius:999px;padding:9px 15px;font-weight:850;text-decoration:none!important}
.chip:hover{border-color:var(--copper)!important;color:var(--copper-dark)!important}
.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.product{background:#fffdf8!important;border:1px solid var(--line)!important;border-radius:18px;overflow:hidden;box-shadow:var(--soft-shadow);transition:.22s ease}
.product:hover{transform:translateY(-4px);box-shadow:0 24px 62px rgba(24,24,24,.12)}
.product a{color:inherit!important;text-decoration:none!important}
.product .thumb,.thumb{height:205px!important;background:#eee8df!important;position:relative}
.product .thumb img,.thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
.product .body,.body{background:#fffdf8!important;position:relative!important;padding:18px 20px!important}
.product h3,.body h3{color:#181818!important;font-size:1.06rem!important;line-height:1.28!important;margin:8px 0 12px!important;text-shadow:none!important}
.tag{display:inline-block;background:#ede9e2!important;color:#343434!important;border-radius:999px;padding:5px 9px;font-weight:800;font-size:.76rem;margin:0 5px 6px 0}
.ref{display:inline-block;background:#f2e4d7!important;color:#754026!important;border-radius:999px;padding:5px 9px;font-weight:800;font-size:.76rem;margin:0 5px 6px 0}
.product-gallery{display:grid;gap:16px}
.product-gallery-main{background:#eee8df;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.product-gallery-main img{width:100%;max-height:620px;object-fit:contain;background:#eee8df;margin:auto}
.product-gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.product-gallery-thumbs img{height:92px;width:100%;object-fit:cover;border-radius:14px;border:1px solid var(--line);cursor:pointer;background:#eee8df}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fffdf8;border:1px solid var(--line);border-radius:24px;padding:23px}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--copper),var(--copper-dark));color:#fff;font-weight:950;margin-bottom:12px}
.cta{background:radial-gradient(circle at 10% 10%,rgba(178,98,50,.24),transparent 30%),linear-gradient(135deg,#171717,#30363a);color:#fff;border-radius:38px;padding:46px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--shadow)}
.cta h2{color:#fff}.cta p{color:#eee8df}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.review{margin:0}
.pagehero{background:linear-gradient(135deg,#171717,#30363a);color:#fff;padding:82px 0}.pagehero p{color:#eee8df}
.footer{background:#0c0f10;color:#e6dfd6;padding:44px 0 22px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}.footer a{color:#e6dfd6;text-decoration:none}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:18px;color:#aaa096}
.form{background:#fffdf8;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;margin:7px 0 14px;background:#fff}
.seo-variants{font-size:.82rem;color:#8a8178;margin-top:18px}
.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.in,.reveal.visible{opacity:1;transform:none}
.mobilebar{display:none}strong{font-weight:900}

@media(min-width:1450px){.container{width:min(1360px,90vw)}.hero .container>div:first-child{max-width:800px}.lead{max-width:690px}.metrics{max-width:1160px}.catalog{grid-template-columns:repeat(4,1fr);gap:30px 28px}}
@media(max-width:1080px){
  .top .container{grid-template-columns:1fr}.top .container>*{text-align:center!important}.menu{display:none}
  .hero{background:linear-gradient(110deg,rgba(5,8,10,.95),rgba(5,8,10,.74)),url('assets/brice-atelier.jpg') center/cover}
  .hero .container,.split,.cta{grid-template-columns:1fr}.hero .container{min-height:auto;padding:68px 0 34px}
  .metrics,.grid,.paths,.steps,.catalog,.footer-grid,.review-grid{grid-template-columns:1fr 1fr}
  .mobilebar{position:fixed;display:grid;grid-template-columns:repeat(3,1fr);bottom:0;left:0;right:0;z-index:60;background:#fffdf8;border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(24,24,24,.12)}
  .mobilebar a{text-align:center;text-decoration:none;padding:10px 6px;font-size:.82rem;font-weight:900}
  body{padding-bottom:62px}
}
@media(max-width:640px){
  .brand img{height:44px}.navin{padding:10px 0}h1,.title{font-size:2.35rem}
  .hero-proof{display:grid;grid-template-columns:1fr}.proof-card{width:100%;min-width:0}
  .hero-trustline{display:grid;grid-template-columns:1fr}
  .metrics,.grid,.paths,.steps,.catalog,.footer-grid,.review-grid{grid-template-columns:1fr}
  .metric{grid-template-columns:auto 1fr}.btn{width:100%}.section{padding:62px 0}
  .catalog-controls{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:0 4vw 8px!important;margin-bottom:42px!important}
  .chip{flex:0 0 auto!important;max-width:240px!important}
  .product .thumb,.thumb{height:245px!important}.product-gallery-thumbs{grid-template-columns:repeat(3,1fr)}
}


/* ==========================================================================
   PATCH ACCUEIL PREMIUM DÉPATRONIC
   Ne modifie pas le catalogue, les fiches ni les photos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700&display=swap');

:root{
  --dp-ink:#111111;
  --dp-muted:#6f6a63;
  --dp-paper:#fffdf8;
  --dp-cream:#f7f1e8;
  --dp-line:#e5ded4;
  --dp-dark:#070a0c;
  --dp-panel:#101518;
  --dp-orange:#e85f16;
  --dp-orange-2:#ff7a26;
  --dp-orange-dark:#a94312;
  --dp-green:#22c965;
  --dp-shadow:0 22px 60px rgba(18,18,18,.14);
  --dp-soft-shadow:0 12px 30px rgba(18,18,18,.09);
}

body{
  font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--dp-paper);
  color:var(--dp-ink);
}

/* Bandeau haut */
.top{
  background:#090b0c!important;
  color:#fff!important;
  font-size:.92rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.top .container{
  display:grid!important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:8px 0!important;
}
.top a{color:#fff!important;text-decoration:none!important;font-weight:800}
.top .container>*:nth-child(2){text-align:center}
.top .container>*:last-child{text-align:right}

/* Navigation blanche + onglet actif */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:#fffdf8!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(18px);
}
.navin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0!important}
.brand img{height:58px;width:auto}
.menu{
  display:flex;
  align-items:center;
  gap:25px;
  font-weight:900;
  text-transform:uppercase;
  font-size:.88rem;
  letter-spacing:.02em;
}
.menu a{
  text-decoration:none!important;
  position:relative;
  padding:9px 0;
  color:#101010!important;
}
.menu a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:3px;
  border-radius:999px;
  background:var(--dp-orange);
  transition:.22s ease;
}
.menu a:hover:after,
.menu a.active:after,
body.home .menu a[href="index.html"]:after,
body.accueil .menu a[href="index.html"]:after{
  width:100%;
}
.menu a.active,
body.home .menu a[href="index.html"],
body.accueil .menu a[href="index.html"]{
  color:var(--dp-orange-dark)!important;
}

/* Boutons */
.btn{
  border-radius:9px!important;
  padding:14px 22px!important;
  font-weight:900!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--dp-orange-2),var(--dp-orange-dark))!important;
  box-shadow:0 16px 34px rgba(232,95,22,.26)!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.btn:hover{transform:translateY(-2px)}
.btn.blue,.btn.dark,.btn.ghost{
  background:rgba(8,11,13,.55)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:none!important;
}
.btn.white{background:#fffdf8!important;color:#111!important}

/* HERO validé */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff!important;
  background:
    linear-gradient(90deg,rgba(5,8,10,.98) 0%,rgba(5,8,10,.91) 43%,rgba(5,8,10,.38) 100%),
    url('assets/brice-atelier.jpg') center right/cover!important;
}
.hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:38%;
  background:linear-gradient(0deg,rgba(5,8,10,.72),transparent);
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:1;
  min-height:660px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  align-items:center;
  padding:70px 0 28px!important;
}
.hero .container>div:first-child{max-width:790px!important}

.kicker{
  display:inline-flex;
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  font-size:.76rem;
  color:#ff8a3d!important;
  background:rgba(232,95,22,.10)!important;
  border:1px solid rgba(232,95,22,.85)!important;
  padding:9px 16px!important;
  border-radius:999px!important;
}

h1,.title{
  font-family:"Space Grotesk",Manrope,system-ui,sans-serif!important;
}
.hero h1,.hero .title{
  font-size:clamp(2.85rem,5.45vw,5.45rem)!important;
  line-height:.98!important;
  letter-spacing:-.05em!important;
  margin:24px 0 22px!important;
  font-weight:700!important;
  max-width:850px!important;
}
.hero .accent{color:var(--dp-orange-2)!important}
.hero .lead{
  font-size:1.08rem!important;
  color:#f5eee7!important;
  max-width:690px!important;
}
.hero .lead strong{color:#fff!important;font-weight:900!important}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px!important}

/* Cartes avis premium */
.hero-proof{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:24px 0 8px!important;
}
.proof-card{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:250px;
  text-decoration:none!important;
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:9px!important;
  padding:12px 16px!important;
  backdrop-filter:blur(10px);
}
.proof-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)!important}
.stars,.proof-card .stars{color:#ffc247!important;letter-spacing:1px;white-space:nowrap}
.proof-card strong{display:block;color:#fff!important;font-weight:900;line-height:1.1}
.proof-card span span{display:block;color:#e8dfd4!important;font-size:.9rem;line-height:1.2}

/* Badges confiance */
.hero-trustline{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 0!important;
}
.hero-trustline span{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:8px!important;
  padding:9px 13px!important;
  font-weight:850!important;
  color:#fff!important;
}

/* Cartes 12+ / 1 an / 24h / Assistance : pas de débordement */
.metrics{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:34px!important;
  max-width:1160px!important;
}
.metric{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:12px!important;
  padding:20px 22px!important;
  min-height:112px!important;
  overflow:hidden!important;
  backdrop-filter:blur(10px);
}
.metric:before{
  content:"";
  width:52px;
  height:52px;
  display:block;
  background:var(--dp-orange-2);
  -webkit-mask:center/contain no-repeat;
  mask:center/contain no-repeat;
}
.metric:nth-child(1):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E");
}
.metric:nth-child(2):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.metric:nth-child(3):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
.metric:nth-child(4):before{
  background:var(--dp-green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.32 1.77.57 2.61a2 2 0 0 1-.45 2.11L8 9.67a16 16 0 0 0 6.33 6.33l1.23-1.23a2 2 0 0 1 2.11-.45c.84.25 1.72.45 2.61.57A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.32 1.77.57 2.61a2 2 0 0 1-.45 2.11L8 9.67a16 16 0 0 0 6.33 6.33l1.23-1.23a2 2 0 0 1 2.11-.45c.84.25 1.72.45 2.61.57A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}
.metric b{
  display:block;
  font-size:clamp(1.75rem,2.35vw,2.35rem)!important;
  line-height:1!important;
  white-space:nowrap;
}
.metric span{
  display:block;
  color:#f3ece5!important;
  font-size:clamp(.88rem,1vw,1.02rem)!important;
  line-height:1.25!important;
  margin-top:5px;
  overflow-wrap:anywhere;
}
.metric small{display:none!important}

/* Section expertise unique */
.expertise-section strong,
.expertise-section h2 strong{
  color:var(--dp-orange)!important;
}
.expertise-section p{
  font-size:1.04rem;
}
.seo-variants{
  font-size:.82rem;
  color:#8a8178;
  margin-top:18px;
}

/* Catalogue de l'accueil : espace clair entre filtres et cartes */
.catalog-controls{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  max-width:1180px;
  margin:28px auto 58px!important;
  overflow:visible!important;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.15!important;
  max-width:280px!important;
  border:1px solid var(--dp-line)!important;
  background:#fffdf8!important;
  color:#181818!important;
  border-radius:999px;
  padding:9px 15px;
  font-weight:850;
  text-decoration:none!important;
}
.catalog{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:28px 24px!important;
}
.product{
  background:#fffdf8!important;
  border:1px solid var(--dp-line)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:var(--dp-soft-shadow)!important;
}
.product a{color:inherit!important;text-decoration:none!important}
.product .thumb,.thumb{
  height:205px!important;
  background:#eee8df!important;
}
.product .thumb img,.thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.product .body,.body{
  background:#fffdf8!important;
  padding:18px 20px!important;
}
.product h3,.body h3{
  color:#181818!important;
  font-size:1.06rem!important;
  line-height:1.28!important;
  margin:8px 0 12px!important;
  text-shadow:none!important;
}

/* Responsive large = propre, pas de colonnes cassées */
@media(min-width:1450px){
  .container{width:min(1360px,90vw)!important}
  .hero .container>div:first-child{max-width:820px!important}
  .hero .lead{max-width:700px!important}
  .metrics{max-width:1180px!important}
  .catalog{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:30px 28px!important}
}

/* Tablette */
@media(max-width:1080px){
  .top .container{grid-template-columns:1fr!important}
  .top .container>*{text-align:center!important}
  .menu{display:none!important}
  .hero{
    background:
      linear-gradient(110deg,rgba(5,8,10,.95),rgba(5,8,10,.74)),
      url('assets/brice-atelier.jpg') center/cover!important;
  }
  .hero .container{min-height:auto!important;padding:68px 0 34px!important}
  .metrics,
  .catalog{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media(max-width:640px){
  .brand img{height:44px!important}
  .navin{padding:10px 0!important}
  .hero h1,.hero .title{font-size:2.35rem!important}
  .hero-proof{display:grid!important;grid-template-columns:1fr!important}
  .proof-card{width:100%!important;min-width:0!important}
  .hero-trustline{display:grid!important;grid-template-columns:1fr!important}
  .metrics,
  .catalog{
    grid-template-columns:1fr!important;
  }
  .metric{grid-template-columns:50px minmax(0,1fr)!important}
  .btn{width:100%!important}
  .catalog-controls{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding:0 4vw 8px!important;
    margin-bottom:42px!important;
  }
  .chip{flex:0 0 auto!important;max-width:240px!important}
  .product .thumb,.thumb{height:245px!important}
}



/* ==========================================================================
   PATCH MOBILE MENU + ICÔNES PREMIUM ACCUEIL
   ========================================================================== */

/* Icônes avis Google / Leboncoin dans les cartes */
.hero-proof .proof-card{
  position:relative;
  padding-right:54px!important;
}
.hero-proof .proof-card::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.hero-proof .proof-card:first-child::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.8-3.4-11.4-8.1L6.1 33C9.5 39.5 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.2-4.1 5.6l6.2 5.2C36.9 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E");
}
.hero-proof .proof-card:nth-child(2)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='%23ff6a19'/%3E%3Cpath d='M24 8 39 16.5v15L24 40 9 31.5v-15L24 8Z' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M9.5 16.5 24 25l14.5-8.5M24 25v15' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Remplacement fiable des icônes métriques, sans emojis, sans débordements */
.metrics{
  align-items:stretch!important;
}
.metric{
  min-width:0!important;
  overflow:hidden!important;
}
.metric > div{
  min-width:0!important;
}
.metric b{
  font-size:clamp(1.65rem,2.15vw,2.2rem)!important;
  white-space:nowrap!important;
}
.metric span{
  font-size:clamp(.82rem,.95vw,.98rem)!important;
  line-height:1.22!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.metric:nth-child(4) b{
  font-size:clamp(1.45rem,1.8vw,2rem)!important;
}
.metric:nth-child(4) span{
  white-space:normal!important;
}

/* Menu mobile burger */
.mobile-menu-toggle{
  display:none;
  width:46px;
  height:42px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fffdf8;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:0;
}
.mobile-menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#111;
  transition:.22s ease;
}
.mobile-menu-toggle.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.open span:nth-child(2){
  opacity:0;
}
.mobile-menu-toggle.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.mobile-drawer{
  display:none;
}

/* Titre catalogue accueil centré, même si l'ancien CSS le casse */
#catalogue,
.catalogue,
section:has(.catalog-controls){
  text-align:center;
}
section:has(.catalog-controls) > .container,
section:has(.catalog-controls) .container{
  max-width:1220px;
}
section:has(.catalog-controls) h2{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Grille large : jamais de scroll horizontal */
.catalog{
  width:min(1220px,92vw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:visible!important;
}
.catalog .product{
  min-width:0!important;
}

@media(max-width:1080px){
  .navin{
    display:flex!important;
  }
  .menu{
    display:none!important;
  }
  .mobile-menu-toggle{
    display:flex!important;
  }
  .mobile-drawer{
    display:grid;
    position:fixed;
    top:calc(var(--top-offset, 0px) + 74px);
    left:0;
    right:0;
    z-index:55;
    background:#fffdf8;
    border-bottom:1px solid rgba(0,0,0,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    padding:10px 4vw 18px;
    gap:4px;
    transform:translateY(-120%);
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
  }
  .mobile-drawer.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .mobile-drawer a{
    display:flex;
    align-items:center;
    min-height:46px;
    border-bottom:1px solid #eee6dc;
    text-decoration:none;
    color:#111;
    font-weight:900;
    text-transform:uppercase;
    font-size:.92rem;
  }
  .mobile-drawer a.active{
    color:var(--dp-orange-dark,#a94312);
  }
  .mobile-drawer a.active::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--dp-orange,#e85f16);
    margin-right:10px;
  }
}

@media(min-width:1280px){
  .metrics{
    grid-template-columns:repeat(4,minmax(220px,1fr))!important;
  }
  .metric{
    grid-template-columns:54px minmax(0,1fr)!important;
    padding:20px 22px!important;
  }
}

@media(max-width:640px){
  .metric{
    grid-template-columns:52px minmax(0,1fr)!important;
  }
  .metric b{
    font-size:1.75rem!important;
  }
  .metric span{
    font-size:.95rem!important;
  }
}



/* ==========================================================================
   FIX FINAL ACCUEIL — cartes métriques + catalogue centré + mobile menu
   ========================================================================== */

/* Empêche l'ancien style de casser les textes dans les cartes */
body .hero .metrics{
  width:100% !important;
  max-width:1180px !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin-top:34px !important;
}

body .hero .metric{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:112px !important;
  overflow:visible !important;
  display:grid !important;
  grid-template-columns:58px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:18px !important;
  padding:20px 22px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:none !important;
}

body .hero .metric > div{
  min-width:0 !important;
  overflow:visible !important;
}

body .hero .metric b{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:clamp(1.75rem, 2.2vw, 2.35rem) !important;
  line-height:1.02 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

body .hero .metric:nth-child(4) b{
  font-size:clamp(1.55rem, 1.85vw, 2.05rem) !important;
  letter-spacing:-.02em !important;
}

body .hero .metric span{
  display:block !important;
  color:#f4eee8 !important;
  font-size:clamp(.88rem, .95vw, 1rem) !important;
  line-height:1.25 !important;
  margin-top:5px !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  overflow:visible !important;
}

/* Icônes validées : trophée / bouclier / camion / assistance */
body .hero .metric:before{
  content:"" !important;
  width:56px !important;
  height:56px !important;
  display:block !important;
  background:#ff7a26 !important;
  -webkit-mask:center/contain no-repeat !important;
  mask:center/contain no-repeat !important;
  flex:0 0 56px !important;
}

body .hero .metric:nth-child(1):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3C/svg%3E") !important;
}
body .hero .metric:nth-child(2):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}
body .hero .metric:nth-child(3):before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1.5a2 2 0 0 0 2-2v-3h-3.5'/%3E%3Cpath d='M17.5 12 15 8h-1'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3Cpath d='M5 17h5'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1.5a2 2 0 0 0 2-2v-3h-3.5'/%3E%3Cpath d='M17.5 12 15 8h-1'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3Cpath d='M5 17h5'/%3E%3C/svg%3E") !important;
}
body .hero .metric:nth-child(4):before{
  background:#22c965 !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 11a9 9 0 0 1 18 0v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 18H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M21 16v-3a2 2 0 0 0-2-2h-1v7h1'/%3E%3Cpath d='M3 16v-3a2 2 0 0 1 2-2h1v7H5'/%3E%3Cpath d='M13 21h-2a2 2 0 0 1 0-4h2a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") !important;
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 11a9 9 0 0 1 18 0v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 18H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M21 16v-3a2 2 0 0 0-2-2h-1v7h1'/%3E%3Cpath d='M3 16v-3a2 2 0 0 1 2-2h1v7H5'/%3E%3Cpath d='M13 21h-2a2 2 0 0 1 0-4h2a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") !important;
}

/* Section catalogue accueil recentrée et propre */
body .home-catalog{
  text-align:center !important;
  padding-top:54px !important;
  background:linear-gradient(180deg,#fffdf8,#f7f1e8) !important;
}
body .home-catalog > .container{
  width:min(1220px,92vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body .home-catalog h2{
  text-align:center !important;
  margin:0 auto 8px !important;
  font-size:clamp(2rem,3vw,2.75rem) !important;
  line-height:1.08 !important;
}
body .home-catalog > .container > p.muted{
  text-align:center !important;
  margin:0 auto 26px !important;
  max-width:760px !important;
}
body .home-catalog .search{
  width:min(880px,100%) !important;
  margin:0 auto 28px !important;
}
body .home-catalog .search input{
  width:100% !important;
}
body .home-catalog .catalog-tools,
body .home-catalog .catalog-controls{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin:0 auto 44px !important;
  max-width:1120px !important;
}
body .home-catalog .catalog{
  width:100% !important;
  max-width:1220px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:28px 24px !important;
  text-align:left !important;
}
body .home-catalog .product{
  min-width:0 !important;
}

/* Responsive propre */
@media(max-width:1080px){
  body .hero .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body .home-catalog .catalog{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px){
  body .hero .metrics,
  body .home-catalog .catalog{
    grid-template-columns:1fr !important;
  }
  body .hero .metric{
    grid-template-columns:54px minmax(0,1fr) !important;
  }
}



/* ==========================================================================
   PATCH CORRECTIF FINAL DEPATRONIC
   Modifie uniquement le rendu accueil : avis, métriques, catalogue, mobile menu.
   ========================================================================== */

/* Base anti-débordement */
.hero .metrics,
.hero .metrics *,
.hero .hero-proof,
.hero .hero-proof * {
  box-sizing: border-box !important;
}

/* Cartes avis façon maquette : icône à gauche + étoiles + texte */
.hero .hero-proof {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 24px 0 8px !important;
  align-items: stretch !important;
}

.hero .proof-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 286px !important;
  min-width: 286px !important;
  height: 66px !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  text-decoration: none !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.hero .proof-card::after {
  content: none !important;
  display: none !important;
}

.hero .proof-icon {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.hero .proof-google .proof-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.3 0-9.8-3.4-11.4-8.1L6.1 33C9.5 39.5 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.2-4.1 5.6l6.2 5.2C36.9 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") !important;
}

.hero .proof-lbc .proof-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='%23ff6a19'/%3E%3Cpath d='M24 8 39 16.5v15L24 40 9 31.5v-15L24 8Z' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M9.5 16.5 24 25l14.5-8.5M24 25v15' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.hero .proof-copy {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
  align-items: center !important;
  min-width: 0 !important;
}

.hero .proof-stars {
  grid-row: 1 / span 2 !important;
  color: #ffc247 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hero .proof-copy strong {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hero .proof-copy small {
  color: #e8dfd4 !important;
  font-size: 12.5px !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Cartes 12+ / 1 an / 24h / Assistance : proportions fixes sur grand écran */
.hero .metrics {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 34px 0 0 !important;
  align-items: stretch !important;
}

.hero .metric {
  width: 100% !important;
  min-width: 0 !important;
  height: 108px !important;
  min-height: 108px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: none !important;
}

.hero .metric > div {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.hero .metric b {
  display: block !important;
  color: #fff !important;
  font-size: 31px !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hero .metric.metric-assistance b {
  font-size: 27px !important;
}

.hero .metric span {
  display: block !important;
  color: #f4eee8 !important;
  opacity: .96 !important;
  font-size: 14.5px !important;
  line-height: 1.24 !important;
  margin-top: 6px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
}

.hero .metric:before {
  content: "" !important;
  width: 56px !important;
  height: 56px !important;
  display: block !important;
  background: #ff7a26 !important;
  -webkit-mask: center / contain no-repeat !important;
  mask: center / contain no-repeat !important;
}

/* SVG proches de la maquette : trophée, bouclier, camion rapide, casque assistance */
.hero .metric-experience:before,
.hero .metric:nth-child(1):before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='m12 7 .7 1.4 1.5.2-1.1 1.1.3 1.5-1.4-.8-1.4.8.3-1.5-1.1-1.1 1.5-.2L12 7Z'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M5 6H3v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M19 6h2v2a4 4 0 0 1-4 4'/%3E%3Cpath d='m12 7 .7 1.4 1.5.2-1.1 1.1.3 1.5-1.4-.8-1.4.8.3-1.5-1.1-1.1 1.5-.2L12 7Z'/%3E%3C/svg%3E") !important;
}

.hero .metric-garantie:before,
.hero .metric:nth-child(2):before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}

.hero .metric-expedition:before,
.hero .metric:nth-child(3):before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1.5a2 2 0 0 0 2-2v-3h-3.5'/%3E%3Cpath d='M17.5 12 15 8h-1'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3Cpath d='M2 9h6'/%3E%3Cpath d='M2 12h5'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M10 17h4V5H2v12h3'/%3E%3Cpath d='M14 17h1.5a2 2 0 0 0 2-2v-3h-3.5'/%3E%3Cpath d='M17.5 12 15 8h-1'/%3E%3Ccircle cx='7.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3Cpath d='M2 9h6'/%3E%3Cpath d='M2 12h5'/%3E%3C/svg%3E") !important;
}

.hero .metric-assistance:before,
.hero .metric:nth-child(4):before {
  background: #22c965 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 11a9 9 0 0 1 18 0v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 18H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M21 16v-3a2 2 0 0 0-2-2h-1v7h1'/%3E%3Cpath d='M3 16v-3a2 2 0 0 1 2-2h1v7H5'/%3E%3Cpath d='M13 21h-2a2 2 0 0 1 0-4h2a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 11a9 9 0 0 1 18 0v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 18H5a2 2 0 0 1-2-2v-5'/%3E%3Cpath d='M21 16v-3a2 2 0 0 0-2-2h-1v7h1'/%3E%3Cpath d='M3 16v-3a2 2 0 0 1 2-2h1v7H5'/%3E%3Cpath d='M13 21h-2a2 2 0 0 1 0-4h2a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") !important;
}

/* Catalogue d'accueil : centre strictement le titre, la recherche et la grille */
.home-catalog {
  text-align: center !important;
  padding-top: 54px !important;
  background: linear-gradient(180deg,#fffdf8,#f7f1e8) !important;
}

.home-catalog > .container {
  width: min(1220px,92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-catalog h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.home-catalog p.muted {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 24px !important;
}

.home-catalog .search {
  width: min(860px,100%) !important;
  max-width: 860px !important;
  margin: 0 auto 28px !important;
}

.home-catalog .search input {
  width: 100% !important;
}

.home-catalog .catalog-tools,
.home-catalog .catalog-controls {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  max-width: 1120px !important;
  margin: 0 auto 46px !important;
}

.home-catalog .catalog {
  width: 100% !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 28px 24px !important;
  text-align: left !important;
}

.home-catalog .product {
  min-width: 0 !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .hero .metrics {
    grid-template-columns: repeat(2,minmax(260px,1fr)) !important;
  }

  .hero .metric {
    height: 108px !important;
  }

  .home-catalog .catalog {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 720px) {
  .hero .proof-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .hero .metrics,
  .home-catalog .catalog {
    grid-template-columns: 1fr !important;
  }

  .hero .metric {
    height: auto !important;
    min-height: 96px !important;
  }
}

/* ==========================================================================
   PATCH QUALITE 2026-06-08
   Menus, recherche catalogue, accessibilite et images optimisees.
   ========================================================================== */

.catalog-empty {
  grid-column: 1 / -1;
  width: 100%;
  margin: 22px auto 0;
  padding: 18px 20px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
}

.product[hidden] {
  display: none !important;
}

.mobile-drawer a {
  text-decoration: none;
}

body.drawer-open {
  overflow: hidden;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(232, 95, 22, .45);
  outline-offset: 3px;
}

.product-gallery-main img {
  width: 100%;
  height: auto;
}

@media (max-width: 1080px) {
  .navin > .btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .pagehero {
    padding: 58px 0 48px;
  }

  .pagehero .actions {
    gap: 10px;
  }

  input[type="search"] {
    font-size: 16px;
  }
}

/* ==========================================================================
   PATCH ACCUEIL - CARTONS DE PREUVE
   Corrige la grille trop etroite sur grands ecrans et remplace les pictos.
   ========================================================================== */

.hero .container > div:first-child {
  max-width: min(100%, 1180px) !important;
}

.hero .kicker,
.hero h1,
.hero .lead,
.hero .hero-proof,
.hero .actions,
.hero .hero-trustline {
  max-width: 770px !important;
}

.hero .metrics {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  grid-template-columns: repeat(4, minmax(230px, 1fr)) !important;
  gap: 18px !important;
  margin-top: 32px !important;
}

.hero .metric {
  min-height: 118px !important;
  height: auto !important;
  overflow: visible !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 20px 22px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.18) !important;
}

.hero .metric > div {
  overflow: visible !important;
}

.hero .metric b {
  font-size: clamp(1.95rem, 2.1vw, 2.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

.hero .metric.metric-assistance b {
  font-size: clamp(1.45rem, 1.65vw, 1.8rem) !important;
}

.hero .metric span {
  font-size: 15px !important;
  line-height: 1.35 !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.hero .metric:before {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 58px 58px !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero .metric-experience:before,
.hero .metric:nth-child(1):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect width='64' height='64' rx='16' fill='%23FF7A26' fill-opacity='.18'/%3E%3Cpath d='M24 43h16M32 38v5M22 15h20v10a10 10 0 0 1-20 0V15Z' stroke='%23FFB16F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 20h-6v4a8 8 0 0 0 8 8M42 20h6v4a8 8 0 0 1-8 8' stroke='%23FF7A26' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m32 21 2 4 4.4.6-3.2 3.1.8 4.3-4-2.1-4 2.1.8-4.3-3.2-3.1L30 25l2-4Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}

.hero .metric-garantie:before,
.hero .metric:nth-child(2):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect width='64' height='64' rx='16' fill='%23FF7A26' fill-opacity='.18'/%3E%3Cpath d='M32 52s18-8.2 18-22.5V16L32 9 14 16v13.5C14 43.8 32 52 32 52Z' stroke='%23FFB16F' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='m24 31 5.5 5.5L41 25' stroke='%23FFFFFF' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.hero .metric-expedition:before,
.hero .metric:nth-child(3):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect width='64' height='64' rx='16' fill='%23FF7A26' fill-opacity='.18'/%3E%3Cpath d='M15 24h26v19H15V24Z' stroke='%23FFB16F' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M41 31h7l5 6v6H41V31Z' stroke='%23FFB16F' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M20 47a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM47 47a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' fill='%23FFFFFF'/%3E%3Cpath d='M11 19h16M8 30h13M12 38h8' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.hero .metric-assistance:before,
.hero .metric:nth-child(4):before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect width='64' height='64' rx='16' fill='%2322C965' fill-opacity='.18'/%3E%3Cpath d='M15 34a17 17 0 0 1 34 0v9a6 6 0 0 1-6 6h-6' stroke='%237CF2A7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 32h7v15h-7a4 4 0 0 1-4-4v-7a4 4 0 0 1 4-4ZM46 32h-7v15h7a4 4 0 0 0 4-4v-7a4 4 0 0 0-4-4Z' stroke='%237CF2A7' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M31 49h7M25 23c2-2 4.3-3 7-3s5 1 7 3' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

@media (max-width: 1180px) {
  .hero .metrics {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .hero .container > div:first-child,
  .hero .kicker,
  .hero h1,
  .hero .lead,
  .hero .hero-proof,
  .hero .actions,
  .hero .hero-trustline {
    max-width: 100% !important;
  }

  .hero .metrics {
    grid-template-columns: 1fr !important;
  }

  .hero .metric {
    min-height: 104px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding: 18px !important;
  }

  .hero .metric:before {
    width: 54px !important;
    height: 54px !important;
    background-size: 54px 54px !important;
  }
}