:root{
  --yellow:#fcd21c;
  --black:#111;
  --accent:#33cccc;
  --bg:#fff; --text:#1a1a1a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--black);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fbb735;border-bottom:1px solid #eee}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px}
.site-header .custom-logo { height:74px; width:auto; display:block; }
@media (max-width: 900px){
  .site-header .custom-logo { height:36px; }
}
.brand-logo{width:36px;height:36px;border-radius:8px;background:var(--yellow)}
.brand-title{font-weight:700;letter-spacing:.2px}
.nav-toggle{display:none}
.menu{display:flex;gap:18px;align-items:center}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu li{margin:0;padding:0}
.menu a{padding:8px 10px;border-radius:10px;display:block}
.menu a.cta{color:#000;font-weight:700;border:1px solid #000}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;gap:8px;align-items:center}
  .menu{display:none}
  .menu.open{display:block}
  .menu ul{flex-direction:column;gap:8px}
}



/* header + */
/* ===== Header: full width + single-line, responsive ===== */

/* Make only the header container full-bleed; other .container stay 1200px */
.site-header > .container{
  max-width: 100%;
  padding-left: clamp(14px, 3vw, 40px);
  padding-right: clamp(14px, 3vw, 40px);
}

/* Let the UL fill available space and prevent wrapping */
.menu{ display:flex; align-items:center; gap: clamp(10px, 2vw, 24px); }
.menu ul{ flex:1; display:flex; gap: clamp(12px, 2vw, 28px); flex-wrap: nowrap; align-items:center; }
.menu li a{ white-space: nowrap; }

/* Gentle scaling so long labels don’t break to two lines */
.brand-title{ font-size: clamp(16px, 1.4vw, 20px); }
.menu a{ font-size: clamp(14px, 1.1vw, 17px); padding: 8px 10px; }

/* Keep CTA compact on wide desktops too */
.menu a.cta{ padding: 10px 14px; border-radius: 12px; }

/* When space gets tighter (just above mobile), reduce gaps a bit more */
@media (max-width: 1200px){
  .menu ul{ gap: clamp(10px, 1.5vw, 18px); }
  .menu a{ padding: 8px 8px; }
}

/* At tablet widths, show search as an icon label to save space.
   (Below 900px your mobile menu takes over.) */
.search-cta{
  position: relative;
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 1060px){
  .search-cta{
    /* icon-only style while keeping the same CTA color */
    width: 42px; padding: 10px 0; text-indent: -9999px; overflow: hidden;
  }
  .search-cta::before{
    content: "🔎";
    text-indent: 0; position: absolute; inset: 0;
    display:grid; place-items:center; font-size: 18px;
  }
}

/* Keep your existing mobile behavior (burger at <=900px) */
@media (max-width:900px){
  .nav-toggle{display:inline-flex;gap:8px;align-items:center}
  .menu{display:none}
  .menu.open{display:block}
  .menu ul{flex-direction:column;gap:10px}
}





/* Hero */
/* .hero{background:linear-gradient(180deg,#fff 0%,#fff7d1 100%);border-bottom:1px solid #eee} */
.hero{
  background:#eee;
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;padding:56px 0}
.hero h1{font-size:clamp(28px,4vw,48px);line-height:1.1;margin:0 0 10px}
.hero p{font-size:clamp(16px,2vw,18px);margin:0 0 18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.badge{background:#111;color:#fff;border-radius:999px;padding:6px 12px;font-size:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid #111;font-weight:600}
.btn-primary{background:var(--yellow);border-color:#000;color:#000} 
/* .btn-primary{
  background: #fbb735;
  border-color:#000;
  color:#000;
} */

/* Cards / grids */
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.hero-inner{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3{grid-template-columns:1fr}}
.card{border:1px solid #eee;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.04)}
.card .thumb{
  aspect-ratio: 4 / 3;           /* matches 800x600 crop */
  background:#f7f7f7;
  display:block;
  overflow:hidden;
}
.card .thumb img,
.thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;              /* fill without distortion */
  display:block;
}
.card .pad{padding:16px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0 0 12px;color:#555}

/* Service pages */
.service-hero{background:#fff;border-bottom:1px solid #eee}
.service-hero h1{margin:0;padding:32px 0}
.service-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tag{display:inline-block;font-size:12px;padding:6px 10px;border-radius:10px;background:#f0f0f0;margin:4px 6px 0 0}
.notice{padding:10px 12px;background:#fbb735;border:1px dashed #e0c200;border-radius:12px;font-size:14px}

/* Footer */
footer.site-footer{margin-top:48px;border-top:1px solid #eee;background:#fff}
.footer-inner{padding:24px 0;display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr}
.footer-col h4{margin:0 0 10px}
.footer-bottom{border-top:1px solid #eee;padding:12px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}

/* Utils */
.mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mt-6{margin-top:36px}
.text-center{text-align:center}


/* ===== Hero Slider (FINAL) ===== */
.hero-slider{
  position:relative;
  width:100vw;
  height:min(72vh, 820px);
  left:50%; margin-left:-50vw;
  right:50%; margin-right:-50vw;
  overflow:hidden;

  /* 👇 grey background visible wherever the photo doesn't cover */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #8f8f8f 0%, #757575 100%);
}
.hero-track{display:flex; transition:transform .6s ease; will-change:transform;  height: 100%; }

.hero-slide{ position:relative; min-width:100%; height:100%; display:block !important; }

/* BG image container */
.hero-slide > figure{position:absolute; inset:0; margin:0; z-index:0;}
.hero-slide > figure > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: var(--focal, 50% 50%);
  filter:brightness(.9);
}

/* Title/cta block (left) */
.hero-slide__content{
  position:absolute; z-index:3;
  left:clamp(16px, 5vw, 84px);
  top:50%; transform:translateY(-50%);
  width:min(1200px, 92vw);
  max-width:min(640px, 48vw);
  padding:0 24px;
}
.hero-title{font-size:clamp(26px,4vw,52px); line-height:1.1; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.45); margin:.3rem 0 .6rem;}
.hero-cta{display:inline-block; margin-top:10px; padding:12px 18px; border-radius:12px; background:#888888; color:#000; font-weight:700; border:1px solid #000;}

/* Right decorative image — larger, can fill ~50% width */
/* default desktop */
.hero-deco{
  position:absolute; z-index:2; pointer-events:none;
  right:clamp(16px, 5vw, 84px);
  top:50%; transform:translateY(-50%);
  width: clamp(520px, 50vw, 980px);  /* ⬅ bigger default: up to half screen */
  max-height: 86%;
  height:auto; object-fit:contain;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:block;
}

/* laptops 1360–1536px */
@media (min-width:1360px) and (max-width:1536px){
  .hero-deco{
    width: clamp(460px, 46vw, 880px);
    max-height: 80%;
  }
}

/* keep mobile clean */
@media (max-width:900px){
  .hero-deco{ display:none; }
}

.hero-slide.has-deco .hero-slide__content{
  max-width: min(560px, 44vw);
}


/* Readability gradient over BG */
.hero-slide::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* Arrows */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid #000;
  display:grid; place-items:center; cursor:pointer; user-select:none; z-index:4;
}
.hero-arrow--prev{left:16px}
.hero-arrow--next{right:16px}

/* Dots */
.hero-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; gap:8px; z-index:4}
.hero-dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer}
.hero-dot.active{background:#fcd21c}

/* Optional cross-fade mode */
.hero-slider.fade .hero-track{display:contents;}
.hero-slider.fade .hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .7s ease;}
.hero-slider.fade .hero-slide.is-active{opacity:1; z-index:1;}

@media (max-width:900px){
  .hero-slide{height:60vh;}
  .hero-deco{display:none;} /* keep mobile clean */
}

/* SAFETY: if any generic rule remains somewhere, keep it off .hero-deco */
.hero-slide img:not(.hero-deco){object-fit:cover;}



/* ===== Footer – clean grey, matching header & slider ===== */

footer.site-footer{
  margin-top:48px;
  border-top:1px solid #dcdcdc;
  color:#111;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(255,255,255,.15), transparent 65%),
    linear-gradient(180deg, #f2f2f2 0%, #d5d5d5 100%);
  position:relative;
  overflow:hidden;
}

.footer-inner{
  padding:40px 0;
  display:grid;
  gap:28px;
  grid-template-columns: 1.1fr 1fr 1.4fr;
}

.footer-col h4{
  margin:0 0 12px;
  font-weight:700;
  color:#111;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-col li{
  margin:8px 0;
}
.footer-col a{
  color:#333;
}
.footer-col a:hover{
  color:var(--yellow);
}

/* Contact block */
.footer-contact__block{
  font-style:normal;
  line-height:1.7;
  margin:0 0 14px;
}
.footer-contact a{
  color:#111;
  border-bottom:1px dotted rgba(0,0,0,.25);
}
.footer-contact a:hover{
  color:var(--yellow);
  border-color:var(--yellow);
}

/* Socials */
.footer-socials{
  display:flex;
  gap:12px;
  margin-top:8px;
}
.footer-socials .soc{
  width:38px;
  height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#111;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.footer-socials .soc i{
  font-size:17px;
}
.footer-socials .soc:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,.22);
  background:var(--yellow);
  color:#000;
}

/* Bottom strip */
.footer-bottom{
  border-top:1px solid rgba(0,0,0,.06);
  padding:14px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#555;
}
.footer-bottom a{
  color:#555;
}
.footer-bottom a:hover{
  color:var(--yellow);
}

/* Responsive */
@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px){
  .footer-inner{
    grid-template-columns: 1fr;
  }
  .footer-socials{
    margin-bottom:8px;
  }
}

/* ===== End footer ===== */



/* =====End footer===== */

/* ===== Page templates: hero ===== */
.page-hero{
  position:relative;
  width:100vw; left:50%; margin-left:-50vw;
  right:50%; margin-right:-50vw;
  height: 50vw; min-height:320px; max-height:980px;
  background:linear-gradient(180deg,#eee,#ddd);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.05));
}
.page-hero .container{ position:relative; z-index:2; padding:48px 16px; }
.page-hero__title{ color:#fff; margin:0 0 6px; text-shadow:0 6px 24px rgba(0,0,0,.5); }
.page-hero__excerpt{ color:#fff; max-width:820px; text-shadow:0 6px 24px rgba(0,0,0,.5); }

@media (min-width:1200px){
  .kb-page__body > .container{
    max-width:1320px;
  }
}


/* ===== Content scaffolding ===== */
.kb-page__body{ padding:32px 0 12px; }
.kb-line{ width:72px; height:4px; background:var(--yellow); border-radius:4px; margin:4px 0 14px; }
.kb-section{ margin:28px 0; }
.h3{ font-size:clamp(20px,2.6vw,26px); margin:0 0 10px; }

/* Two-column grid used for the formats tables */
.kb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px; }
.kb-col{}
@media (max-width:860px){ .kb-grid{ grid-template-columns:1fr; } }

/* Responsive table (no borders on mobile) */
.kb-table table{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.05); }
.kb-table td{ padding:12px 14px; border-bottom:1px solid #eee; }
.kb-table tr:last-child td{ border-bottom:none; }

/* Checklist with chic checkmarks (pure CSS) */
.kb-checklist{ list-style:none; padding:0; margin:0; }
.kb-checklist li{
  position:relative; padding-left:36px; margin:10px 0; min-height:24px;
}

.kb-checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* true vertical centering */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #27b36a;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.kb-checklist li::after{
  content: "";
  position: absolute;
  left: 7px;               /* centered inside the 22px circle */
  top: 50%;
  width: 8px;
  height: 12px;
  border-right: 3px solid #27b36a;
  border-bottom: 3px solid #27b36a;
  transform: translateY(-58%) rotate(45deg); /* nudge up a touch for optical center */
}

/* Small helpers */
.kb-link{ color:#000; border-bottom:1px solid #000; }
.kb-link:hover{ color:#000; border-color:var(--yellow); background:linear-gradient(transparent 70%, rgba(252,210,28,.35) 0); }
.kb-note{ color:#444; }
.kb-address{ color:#222; }



.kb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kb-card{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.kb-card .kb-card__media{aspect-ratio:4/3;object-fit:cover;width:100%}
.kb-card .kb-card__body{padding:14px}
@media (max-width:900px){.kb-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kb-cards{grid-template-columns:1fr}}


/* ===== Home contact block ===== */
.contact-home{
  margin-top:56px;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(252,210,28,.08), transparent 60%),
    linear-gradient(180deg, #fffdf3 0%, #fff 100%);
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.contact-grid{
  display:grid; gap:28px; padding:36px 0;
  grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
}

.contact-title{ margin:0; font-size:clamp(22px,3vw,30px); }

/* Map */
.contact-map iframe{
  width:100%; height:260px; border:0; border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

/* Form */
.contact-form{
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding:18px; box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.kb-form{ display:grid; gap:12px; }
.kb-field{ display:flex; flex-direction:column; gap:6px; }
.kb-input{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:12px;
  font:inherit; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.kb-input:focus{
  outline:0; border-color:#fcd21c;
  box-shadow:0 0 0 3px rgba(252,210,28,.25);
}
.kb-check{ display:flex; gap:8px; align-items:flex-start; font-size:14px; }
.hp-field{ position:absolute; left:-999em; }

/* Alerts */
.contact-alert{
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
  font-weight:600;
}
.contact-alert.success{
  background:#f0ffe9; color:#215b2e; border:1px solid #bde5b6;
}
.contact-alert.error{
  background:#fff2f2; color:#7b1e1e; border:1px solid #efc7c7;
}


/* Produits */
.prod-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.prod-filter{
  display:inline-block; padding:8px 12px; border:1px solid #ddd; border-radius:999px;
  font-weight:600; background:#fff;
}
.prod-filter.is-active{ border-color:#000; background:#fcd21c; }

.prod-card .thumb{ aspect-ratio:4/3; background:#f7f7f7; overflow:hidden; }
.prod-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.prod-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.prod-badge{
  background:#111; color:#fff; padding:4px 8px; border-radius:999px; font-size:12px; white-space:nowrap;
}
.prod-price{ color:#000; font-weight:700; margin-right:8px; }
.prod-stock.ok{ color:#1f7a3a; font-weight:600; }
.prod-stock.ko{ color:#a61d1d; font-weight:600; }






/* ===== Products strip (shortcode) ===== */
.prod-strip { margin: 56px 0; }
.prod-strip__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.prod-strip__title{
  margin:0; letter-spacing:.12em; text-transform:uppercase; font-weight:700; 
  position:relative; padding-right:18px;
}
.prod-strip__title::after{ content:""; display:inline-block; width:64px; height:2px; background:#bbb; margin-left:12px; vertical-align:middle; }

.prod-strip__arrows{ display:flex; gap:8px; }
.prod-strip__arrow{
  width:40px; height:40px; border-radius:50%;
  border:1px solid #ddd; background:#fff; cursor:pointer;
}
.prod-strip__arrow:hover{ background:#fcd21c; border-color:#000; }

.prod-strip__viewport{ overflow:hidden; }
.prod-strip__track{
  display:grid; grid-auto-flow:column; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:none;
}
.prod-strip__track::-webkit-scrollbar{ display:none; }

/* Responsive card width; change with CSS variable --ratio (e.g. 4/3, 3/4) */
.prod-strip__item{
  scroll-snap-align:start; width: clamp(220px, 22vw, 320px);
}
.prod-strip__media{
  display:block; width:100%; aspect-ratio: var(--ratio, 4 / 3);
  border-radius:14px; overflow:hidden; background:#f7f7f7;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.prod-strip__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-strip__name{ font-size:14px; margin:.6rem 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* dots */
.prod-strip__dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.prod-strip__dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:#d0d0d0; cursor:pointer;
}
.prod-strip__dots button.active{ background:#fcd21c; }



/* ================================
   1) Global polish & safe areas
   ================================ */

/* Respect iOS safe areas (notch) */
:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
.site-header > .container,
.container {
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}

/* Make buttons always thumb-friendly */
.btn, .menu a.cta, .prod-strip__arrow {
  min-height: 44px;            /* Apple HIG */
  line-height: 1.2;
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .hero-track, .hero-slide,
  .hero-arrow, .prod-strip__track {
    transition: none !important;
    animation: none !important;
  }
}

/* ======================================
   2) Old iPhone fallback for aspect-ratio
   (iPhone 5/SE / iOS < 15 lacks support)
   ====================================== */
@supports not (aspect-ratio: 1 / 1) {
  .card .thumb,
  .prod-card .thumb,
  .kb-card .kb-card__media,
  .prod-strip__media {
    position: relative;
    overflow: hidden;
  }
  /* 4:3 default */
  .card .thumb::before,
  .prod-card .thumb::before,
  .kb-card .kb-card__media::before,
  .prod-strip__media::before {
    content: "";
    display: block;
    padding-top: 75%;
  }
  .card .thumb > img,
  .prod-card .thumb > img,
  .kb-card .kb-card__media > img,
  .prod-strip__media > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
}

/* ===================================
   3) Micro-breakpoints for tiny phones
   (320–360px, e.g., iPhone 5/SE)
   =================================== */
@media (max-width: 360px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .brand { gap: 10px; }
  .brand-title {
    font-size: 15px;           /* keep single line */
    max-width: 55vw;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .menu a { font-size: 14px; }
  .hero-inner { gap: 16px; padding: 36px 0; }
  .hero h1 { font-size: clamp(22px, 6vw, 28px); }
  .hero p { font-size: 14px; }
  .btn { padding: 10px 14px; }
  .badge { font-size: 11px; padding: 5px 10px; }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .prod-strip__item { width: clamp(190px, 70vw, 260px); }
}

/* ===================================
   4) Small phones (<= 480px)
   =================================== */
@media (max-width: 480px) {
  .menu ul { gap: 8px; }
  .hero-slide { height: 56vh; }
  .hero-title { font-size: clamp(22px, 7vw, 30px); }
  .contact-map iframe { height: 220px; }
}

/* ===================================
   5) Tablets (<= 900px) – fine tuning
   =================================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .prod-strip__item { width: clamp(210px, 40vw, 300px); }
}

/* ===================================
   6) Mid desktops (1200–1600px)
   – give content a bit more room
   =================================== */
@media (min-width: 1200px) {
  .container { max-width: 1280px; }
}
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
}

/* ===================================
   7) Large desktops (>= 1680px, 27")
   =================================== */
@media (min-width: 1680px) {
  .container { max-width: 1440px; }
  .hero-inner { gap: 40px; padding: 72px 0; }
  .hero h1 { font-size: clamp(32px, 2.6vw, 56px); }
  .hero p { font-size: clamp(17px, 1.2vw, 20px); }
  .grid { gap: 22px; }
  .card h3 { font-size: 20px; }
}

/* ===================================
   8) Header overflow guards
   (keep menu on one line on laptops)
   =================================== */
@media (max-width: 1200px) {
  .menu ul { gap: clamp(8px, 1.2vw, 16px); }
}
@media (min-width: 901px) {
  /* prevent accidental 2nd line if labels are long */
  .menu ul { flex-wrap: nowrap; overflow: hidden; }
}

/* ===================================
   9) Touch optimizations
   =================================== */
@media (pointer: coarse) {
  .menu a, .btn, .prod-strip__arrow { padding: 12px 14px; }
  .hero-arrow { width: 48px; height: 48px; }
}

/* ===================================
   10) Product strip – resilience
   =================================== */
@media (max-width: 420px) {
  .prod-strip__title { font-size: 14px; }
  .prod-strip__item { width: 76vw; }
}





/* ============================
   27" polish — large desktops
   ============================ */
@media (min-width: 1680px){
  /* widen readable area */
  .container{ max-width: 1480px; }

  /* header spacing stays comfy without looking sparse */
  .site-header > .container{ padding-left: 48px; padding-right: 48px; }
  .navbar{ padding: 18px 0; }
  .menu a{ font-size: 18px; }

  /* hero: fuller height + slightly larger type */
  .hero-slider{ height: min(80vh, 920px); }
  .hero-slide__content{
    max-width: min(720px, 44vw);
    left: clamp(32px, 6vw, 120px);
  }
  .hero-title{ font-size: clamp(36px, 2.6vw, 60px); }
  .hero-cta{ padding: 14px 22px; font-size: 18px; }

  /* intro hero block */
  .hero-inner{ gap: 40px; padding: 80px 0; }
  .hero h1{ font-size: clamp(34px, 2.4vw, 58px); }
  .hero p{ font-size: 18px; max-width: 72ch; }

  /* cards & grids look “denser clean” on big screens */
  .grid{ gap: 24px; }
  .grid.cols-3{ grid-template-columns: repeat(4, 1fr); } /* becomes 4 columns */
  .card h3{ font-size: 20px; }

  /* page hero banner (service pages) */
  .page-hero{ min-height: 440px; }
  .page-hero .container{ padding: 64px 16px; }
  .page-hero__title{ font-size: clamp(32px, 2.2vw, 48px); }

  /* product strip: larger cards, deeper shadow */
  .prod-strip{ margin: 72px 0; }
  .prod-strip__item{ width: clamp(260px, 18vw, 340px); }
  .prod-strip__media{ box-shadow: 0 14px 40px rgba(0,0,0,.08); }
  .prod-strip__name{ font-size: 15px; }

  /* footer: taller gradient & better rhythm */
  .site-footer{ background:
      radial-gradient(1400px 700px at 25% -10%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, #222006 0%, #6b4a03 100%); }
  .footer-inner{ padding: 56px 0; gap: 32px; }
  .footer-bottom{ padding: 18px 0; }
}

/* =======================================
   Ultra-wide polish — 2K/4K projector etc.
   ======================================= */
@media (min-width: 1920px){
  .container{ max-width: 1560px; }           /* optional: go 1600 if you prefer */
  .hero-slide__content{ max-width: min(760px, 42vw); }
  .grid.cols-3{ grid-template-columns: repeat(4, 1fr); }
}

/* =======================================
   Readability helpers (applies everywhere)
   ======================================= */
/* keep paragraphs readable on very wide screens without adding wrappers */
@media (min-width: 1280px){
  .hero p,
  .kb-note,
  .kb-page__body p{
    max-width: 72ch;      /* ideal measure */
  }
}



/* =========================
   Laptop compact polish
   (15.6" : 1200–1600px)
   ========================= */
@media (min-width:1200px) and (max-width:1600px){

  /* keep overall content comfortable */
  .container{ max-width: 1180px; }

  /* header/menu text a touch smaller */
  .menu a{ font-size: 16px; }
  .navbar{ padding: 14px 0; }

  /* hero: slightly shorter + tighter left block */
  .hero-slider{ height: min(68vh, 760px); }
  .hero-slide__content{
    left: clamp(24px, 4vw, 72px);
    max-width: min(560px, 46vw);
    padding: 0 16px;
  }
  .hero-title{ font-size: clamp(28px, 2.2vw, 44px); }
  .hero-cta{ padding: 12px 18px; font-size: 16px; }

  /* right decorative image a bit smaller */
  .hero-deco{
    width: clamp(220px, 28vw, 460px);
    max-height: 64%;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
  }

  /* intro hero section spacing */
  .hero-inner{ gap: 24px; padding: 48px 0; }
  .hero h1{ font-size: clamp(28px, 2.1vw, 44px); }
  .hero p{ font-size: 16px; }

  /* product strip cards proportionally narrower */
  .prod-strip__item{ width: clamp(220px, 19vw, 300px); }

  /* cards/grid: keep 3 columns on laptops */
  .grid{ gap: 18px; }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
}



/* ===== Header – laptop fit (1360–1536px) ===== */
@media (min-width:1360px) and (max-width:1536px){
  .site-header > .container{ padding-left: clamp(12px,2.2vw,28px); padding-right: clamp(12px,2.2vw,28px); }
  .brand-title{ font-size: clamp(15px,1.1vw,18px); }
  .menu{ gap: clamp(8px,1.2vw,16px); }
  .menu ul{ gap: clamp(8px,1.3vw,18px); }
  .menu a{ font-size: 15px; padding: 6px 8px; }   /* smaller text + padding */
  .menu a.cta{ padding: 8px 12px; }

  /* turn the search CTA into a compact icon on laptops */
  .menu a.search-cta{
    width: 42px;
    padding: 8px 0;
    text-indent: -9999px; overflow: hidden; position: relative;
  }
  .menu a.search-cta::before{
    content:"🔎";
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-size: 18px;
    text-indent:0;
  }
}

/* for a hair-smaller range (1280–1359px) tighten a touch more before mobile */
@media (min-width:1280px) and (max-width:1359px){
  .brand-title{ font-size: 14px; }
  .menu a{ font-size: 14px; padding: 5px 8px; }
  .menu ul{ gap: 10px; }
}

/* ===== Hero – fuller on laptops ===== */
@media (min-width:1360px) and (max-width:1536px){
  .hero-slider{ height: clamp(640px, 78vh, 820px); }  /* taller than before */
  .hero-slide__content{
    left: clamp(20px, 4vw, 64px);
    max-width: min(560px, 46vw);
  }
  .hero-title{ font-size: clamp(28px, 2.2vw, 44px); }
  .hero-deco{
    width: clamp(220px, 27vw, 440px);
    max-height: 62%;
  }
}



/* Keep header on one line for 15–16" laptops */
@media (min-width:1280px) and (max-width:1600px){
  .site-header > .container{ padding-left: 18px; padding-right: 18px; }
  .menu{ gap: 12px; }
  .menu ul{ gap: 12px; }
  .menu a{ font-size: 15px; padding: 6px 8px; }
  .brand-title{ font-size: 15px; }
  /* Make the last menu CTA (Rechercher) an icon if space is tight */
  .menu > ul > li:last-child > a.cta,
  .menu a.search-cta{
    width: 42px; padding: 8px 0;
    text-indent:-9999px; overflow:hidden; position:relative;
  }
  .menu > ul > li:last-child > a.cta::before,
  .menu a.search-cta::before{
    content:"🔎";
    position:absolute; inset:0; display:grid; place-items:center; font-size:18px;
    text-indent:0;
  }
}


/* Fuller hero on laptops, with gold fallback bg (no black band) */
@media (min-width:1280px) and (max-width:1600px){
  .hero-slider{
    height: clamp(720px, 82vh, 860px);        /* taller */
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, #8d6a05 0%, #6f5204 100%); /* gold vibe */
  }
  .hero-slide{ height: inherit; }             /* ensure slides match */
  .hero-slide__content{
    left: clamp(22px, 4vw, 68px);
    max-width: min(560px, 46vw);
  }
  .hero-deco{
    width: clamp(220px, 27vw, 440px);
    max-height: 62%;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
  }
}
/* Safety: prevent horizontal scroll caused by 100vw full-bleed tricks */
html, body{ overflow-x:hidden; }




/* Header: prevent the search CTA from being clipped on laptops */
@media (min-width:901px){
  .menu{ flex: 1 1 auto; min-width: 0; }      /* allow the menu area to shrink */
  .menu ul{ 
    flex: 1 1 auto; 
    min-width: 0;
    flex-wrap: nowrap; 
    overflow: visible !important;             /* stop clipping the last item */
    justify-content: flex-end;                /* keep items pushed to the right */
    gap: clamp(10px, 1.2vw, 18px);
  }
  .site-header > .container{
    padding-right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px)); /* small safety pad */
  }
}


/* ===== Home – FAQ + Avis clients ===== */

.home-trust{
  margin-top:56px;
  padding:40px 0 32px;
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(252,210,28,.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

.home-trust__grid{
  display:grid;
  gap:32px;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1.4fr);
  align-items:flex-start;
}

.home-trust__title{
  margin:0 0 4px;
  font-size:clamp(20px,2.4vw,26px);
}

/* FAQ accordion */
.home-faq__item{
  margin:8px 0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
  padding:0 14px 10px;
  border:1px solid #eee;
  overflow:hidden;
}

.home-faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:10px 2px 4px;
  font-weight:600;
  position:relative;
}
.home-faq__item summary::-webkit-details-marker{
  display:none;
}
.home-faq__item summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:10px;
  font-weight:700;
  transition:transform .2s;
}
.home-faq__item[open] summary::after{
  content:"–";
  transform:translateY(-1px);
}

.home-faq__item p{
  margin:4px 0 6px;
  font-size:14px;
  color:#444;
}

/* Reviews */
.home-reviews .kb-line{
  margin-top:4px;
}
.home-reviews p{
  margin:6px 0 10px;
}

.review-card{
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.review-stars{
  color:#f8b400;
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:4px;
}
.review-text{
  font-size:14px;
  color:#444;
  margin:0 0 4px;
}
.review-author{
  font-size:13px;
  color:#777;
  margin:0;
}

.home-reviews__cta{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
}

.home-reviews__score{
  margin:2px 0 10px;
  font-size:14px;
  color:#444;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.home-reviews__count{
  font-size:13px;
  color:#777;
}
.home-reviews__disclaimer{
  margin-top:6px;
  font-size:11px;
  color:#999;
}


/* Responsive */
@media (max-width:900px){
  .home-trust__grid{
    grid-template-columns:1fr;
  }
}

/* Collapse to mobile menu earlier to avoid wrapping on tablets/laptops */
@media (max-width:1060px){
  .nav-toggle{ display:inline-flex; gap:8px; align-items:center; }
  .menu{ display:none; }
  .menu.open{ display:block; }
  .menu ul{ flex-direction:column; gap:10px; }
}

/* Mobile menu panel (sticky under header) */
@media (max-width:1060px){
  .menu{
    position: fixed;
    top: calc(var(--header-h, 64px));
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 12px 16px 16px;
    max-height: calc(100vh - var(--header-h, 64px) - env(safe-area-inset-bottom, 0px));
    overflow:auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    z-index: 60;
  }
  .menu.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Nice large tap targets */
  .menu a{ padding:12px 10px; font-size:16px; border-radius:10px; }
  .menu a.cta{ border:1px solid #000; }
  body.nav-open{ overflow:hidden; } /* prevent body scrolling when menu open */
}

/* Header height variable (easy to tweak) */
.site-header{ --header-h: 68px; }
@media (max-width:900px){
  .site-header{ --header-h: 58px; }
}


@media (min-width:901px){
  .menu ul{ flex-wrap:nowrap; min-width:0; }
  .menu li{ min-width:0; }
  .menu a{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
}


/* Slightly shorter on phones; no cut text under sticky header */
@media (max-width:900px){
  .hero-slide{
    height: 62vh;                /* a touch taller for impact */
    min-height: 440px;           /* avoids super short phones looking cramped */
  }
  .hero-slide__content{
    left: 16px;
    right: 16px;
    max-width: none;             /* let it breathe on small screens */
    width: auto;
    top: auto; transform:none;   /* place at bottom with padding */
    bottom: max(16px, env(safe-area-inset-bottom, 12px));
    padding: 0 4px;
  }
  .hero-title{
    font-size: clamp(22px, 7vw, 30px);
  }
  .hero-cta{ margin-top: 8px; }
  .hero-arrow{ display:none; }   /* arrows off on phones (swipe / dots only) */
}

/* Make the readability gradient a tad stronger for text */
.hero-slide::after{
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.42) 100%);
}

/* Larger dot tap targets on touch */
.hero-dots{ gap: 10px; }
.hero-dot{
  width: 11px; height: 11px;
}
@media (pointer:coarse){
  .hero-dot{ width: 14px; height:14px; }
}

/* Sticky header respects safe area inset on iOS */
.site-header{ position: sticky; top: env(safe-area-inset-top, 0); }

/* Prevent horizontal scroll from full-bleed tricks */
html, body{ overflow-x: hidden; }


/* === Mobile-only chic icons for Menu + Search (no desktop changes) === */
@media (max-width:900px){
  /* Menu button: pill with a clean 3-bar icon + “Menu” text */
  .nav-toggle{
    display:inline-flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:14px;
    background:#fff; border:1px solid #ddd;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    font-weight:600; line-height:1;
  }
  /* draw the bars (no extra HTML needed) */
  .nav-toggle::before{
    content:"";
    width:24px; height:14px; display:inline-block; border-radius:2px;
    background:
      linear-gradient(#111,#111) 0 0/24px 2px no-repeat,
      linear-gradient(#111,#111) 0 6px/18px 2px no-repeat,
      linear-gradient(#111,#111) 0 12px/12px 2px no-repeat;
  }

  /* Search button: compact round icon (text hidden on mobile only) */
  .search-cta{
    width:44px; height:44px; padding:0; border-radius:50%;
    text-indent:-9999px; overflow:hidden;
    background:#fff; border:1px solid #ddd;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    position:relative;
  }
  /* lens + handle drawn with CSS (crisp) */
  .search-cta::before{
    content:""; position:absolute; left:50%; top:50%;
    width:16px; height:16px; border:2px solid #111; border-radius:50%;
    transform:translate(-55%,-55%);
  }
  .search-cta::after{
    content:""; position:absolute; left:50%; top:50%;
    width:9px; height:2px; background:#111; border-radius:2px;
    transform:translate(6px,3px) rotate(45deg);
  }
}

/* Safety: if an overlay ever gets stuck visible, force it hidden unless nav is open */
.nav-overlay{ display:none; }
.nav-open .nav-overlay{ display:block; }
/* Fix: prevent duplicate hamburger lines on mobile */
@media (max-width:900px){
  .nav-toggle::before{ content:none !important; display:none !important; }
}

.kb-account .card, .kb-auth .card{ border:1px solid #eee; border-radius:16px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.05); }
.kb-account .pad, .kb-auth .pad{ padding:16px; }
.kb-auth h3{ margin-top:0; }


/* Newsletter: compact & chic */
.nl-wrap{display:flex;justify-content:center;margin:32px 0 8px}
.nl-card{
  width:100%; max-width:640px;
  background:#fff; border:1px solid #eee; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  padding:18px;
}
.nl-title{margin:0 0 6px; font-size:20px}
.nl-desc{margin:0 0 14px; color:#555; font-size:14px}
.nl-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .nl-grid{grid-template-columns:1fr} }
.nl-form .kb-input{padding:10px 12px; border-radius:10px}
.nl-form .kb-check{font-size:13px}
.nl-btn{margin-top:6px; width:auto; padding:10px 16px}


/* Account: neat card + tabs */
.account-wrap{display:flex;justify-content:center;padding:24px 0}
.account-card{
  width:100%; max-width:760px; background:#fff; border:1px solid #eee; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.05); padding:18px;
}
.account-title{margin:0 0 4px; font-size:22px}
.account-sub{margin:0 0 10px; color:#555; font-size:14px}

.auth-tabs{display:flex; gap:8px; margin:8px 0 14px}
.auth-tab{
  padding:8px 12px; border-radius:10px; border:1px solid #ddd; background:#fafafa;
  font-weight:600; cursor:pointer;
}
.auth-tab.is-active{background:#fcd21c; border-color:#000; color:#000}
.auth-panels .auth-panel{animation:fade .15s ease}
.auth-panel.is-active{display:block}
@keyframes fade{from{opacity:.6; transform:translateY(2px)} to{opacity:1; transform:none}}

.account-card .kb-input{padding:10px 12px; border-radius:10px}
.account-actions{display:flex; align-items:center; gap:12px; margin-top:6px}

/* Global compact form tweaks */
.kb-form .kb-input{font-size:15px}
.kb-form .btn{width:auto}


/* ===== Newsletter (2-column card) ===== */
.newsletter{ margin:40px 0 8px; }
.newsletter__card{
  background:#fff; border:1px solid #eee; border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.newsletter__grid{
  display:grid; gap:24px; padding:20px;
  grid-template-columns: 1.1fr 0.9fr;   /* left form, right content */
}
@media (max-width:900px){
  .newsletter__grid{ grid-template-columns:1fr; }
}

.newsletter__title{ margin:0 0 6px; font-size:22px; }
.newsletter__desc{ margin:0 0 14px; color:#555; font-size:14px; }

.newsletter__asideTitle{ margin:2px 0 8px; font-size:18px; }
.newsletter__privacy{ margin:10px 0 0; font-size:13px; color:#666; }

.nl-form .kb-input{ padding:10px 12px; border-radius:10px; }
.nl-form .kb-check{ font-size:13px; }
.nl-btn{ margin-top:6px; width:auto; padding:10px 16px; }