/* ===== Design tokens light/dark ===== */
:root{
  --dsap:#54b94d; --ink:#0f172a; --ink-weak:#475569; --muted:#6b7280;
  --bg:#f7f8fa; --card:#ffffff; --line:rgba(15,23,42,.08);
  --focus:#1d4ed8;
}
:root.dark{
  --ink:#e5e7eb; --ink-weak:#cbd5e1; --muted:#94a3b8;
  --bg:#0b1220; --card:#0f172a; --line:rgba(226,232,240,.12);
}

/* avant */
#decors.gallery{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

/* remet le texte des chips */
.finder .chip{ color: var(--ink) !important; font-size: 14px !important; line-height: 1.1; }
.finder .chip.is-active{ color:#fff !important; }



.egger-badges{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.egger-badges .tag{font-size:12px;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink-weak)}
.egger-bullets{margin:10px 0 18px;padding-left:18px}
.egger-samples figure{overflow:hidden}
.egger-samples img{width:100%;height:auto;display:block;border-radius:14px}

.icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:rgba(84,185,77,.10); color:var(--dsap);
  margin-bottom:8px;
}
.ico{ width:24px; height:24px; }


/* après (agrandi) */
#decors.gallery{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.decor-meta .badge{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}


/* === Lightbox moderne === */
#dsap-lightbox{
  position: fixed; inset: 0; display: none; z-index: 3000;
  background: color-mix(in oklab, black 68%, transparent);
  backdrop-filter: blur(6px) saturate(110%);
}
#dsap-lightbox.open{ display:block; }

.lb-panel{
  position:absolute; inset:0; display:grid;
  grid-template-rows: auto 1fr auto; /* actions, image, caption */
  align-items:center; justify-items:center; gap:8px; padding:24px;
}

.lb-figure{
  position:relative; width:min(1200px, 94vw); height:min(80vh, 820px);
  border-radius:18px; overflow:hidden; background: #0b1220;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.98); opacity:0; 
  transition: transform .22s ease, opacity .22s ease;
}
.open .lb-figure{ transform:none; opacity:1; }

.lb-media{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.lb-media img{max-width:100%; max-height:100%; object-fit:contain; display:block}

.lb-actions{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
}
.lb-btn{
  pointer-events:auto; border:0; background:rgba(255,255,255,.12);
  color:#fff; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; backdrop-filter: blur(4px);
  transition:opacity .15s, transform .15s;
}
.lb-btn:hover{ transform: translateY(-1px); }
.lb-btn:active{ transform: translateY(0); }
.lb-btn svg{ width:22px; height:22px; }

.lb-close{ position:absolute; top:10px; right:10px; }
.lb-prev{  position:absolute; left:10px;  }
.lb-next{  position:absolute; right:10px; }

.lb-caption{
  width:min(1200px, 94vw); color:#e5e7eb; line-height:1.35;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
}
.lb-title{ font-weight:600; }
.lb-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.lb-badge{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); color:#d1d5db; background:rgba(255,255,255,.06);
}

.lb-reco-wrap{
  width:min(1200px, 94vw);
  margin-top:6px; padding-top:8px; border-top:1px solid rgba(255,255,255,.15);
}
.lb-hint{ color:#cbd5e1; font-size:13px; margin:0 0 8px 0; opacity:.9; }
.lb-reco{ display:grid; grid-auto-flow:column; gap:8px; overflow:auto; padding-bottom:4px; }
.lb-reco::-webkit-scrollbar{ height:8px; }
.lb-reco::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:999px; }

.reco-item{
  background:#0f172a; border:1px solid rgba(255,255,255,.15); border-radius:12px;
  display:flex; flex-direction:column; gap:6px; padding:6px; min-width:120px; cursor:pointer;
  color:#e5e7eb;
}
.reco-item img{ width:100%; height:84px; object-fit:cover; border-radius:8px; }
.reco-caption{ font-size:12px; text-align:center; opacity:.9; }

/* petit loader */
.lb-loader{ position:absolute; inset:0; display:grid; place-items:center; }
.lb-spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:spin 1s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* taille par défaut (mobile/tablette) */
#decors.gallery{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; /* ↑ déjà plus grand */
}

/* desktop : encore plus grand */
@media (min-width: 900px){
  #decors.gallery{
    grid-template-columns:repeat(auto-fill, minmax(300, 1fr)) !important;
  }
}
@media (min-width: 1200px){
  #decors.gallery{
    grid-template-columns:repeat(auto-fill, minmax(300, 1fr)) !important;
  }
}


.decor-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.decor-card .decor-thumb{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}


/* préfère le thème système au premier chargement si pas choisi */
@media (prefers-color-scheme: dark){
  :root:not(.light){ color-scheme: dark; }
}
@media (prefers-color-scheme: light){
  :root:not(.dark){ color-scheme: light; }
}


/* === Carte modèle (meilleur placement image/texte) === */
.model-head{
  display:grid;
  grid-template-columns: 1fr 260px;     /* texte | vignette */
  gap:16px;
  align-items:start;
  margin-bottom:10px;
}

.model-media{
  width:100%;
  aspect-ratio: 1 / 1;                  /* vignette carrée */
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
}
.model-media img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}

/* Mobile : l’image passe au-dessus et devient 16/9 pour mieux respirer */
@media (max-width: 900px){
  .model-head{
    grid-template-columns: 1fr;
  }
  .model-media{
    aspect-ratio: 16 / 9;               /* vignette rectangulaire */
    max-width: 560px;
    justify-self: center;
  }
}

/* ——— Bonus lisibilité chips/texte ——— */
.card h2{ margin:0 0 4px }
.card .help{ margin:0 }
.group-title{ font-size:12px; color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ padding:6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:12px }

/* Si tu utilises encore des "decor-card" en grille : images uniformes */
.decor-card .decor-thumb{
  aspect-ratio: 4 / 3;
  width:100%; height:auto; object-fit:cover; display:block;
}
.decor-body{ min-height: 84px }   /* évite que le texte saute selon la ligne */


.finder {background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:14px}
.finder-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.finder-row.wrap{flex-wrap:wrap;margin-top:8px}
.brand-chip{display:flex;align-items:center;gap:8px}
.brand-chip .tag{font-size:12px;padding:4px 8px;background:rgba(84,185,77,.10);border:1px solid var(--line);border-radius:999px}
.boxed{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.input-slim{border:0;background:transparent;outline:none;min-width:220px;color:var(--ink)}
.group{display:flex;flex-direction:column;gap:6px}
.group-title{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.group .count{background:rgba(15,23,42,.06);border-radius:999px;padding:0 6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:8px 10px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:13px}
.chip.is-active{background:var(--dsap);border-color:var(--dsap);color:#fff}
.zoom .zoom-ctrl{display:flex;align-items:center;gap:6px}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
/* grille responsive (utilise ta .gallery existante) */
.gallery{--zoom:1.10}
.decor-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);transition:transform .15s}
.decor-card:hover{transform:translateY(-2px)}
.decor-thumb{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
.decor-body{padding:10px}
.decor-title{font-weight:600}
.decor-meta .badge{margin-right:6px;font-size:12px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}


/* Grille 2 colonnes : texte | image */
.model-grid{
  display:grid;
  grid-template-columns: 1fr 300px;   /* ← largeur image à droite */
  gap:18px;
  align-items:start;
}
.model-title{ margin:0 0 6px }
.model-left .help{ margin:0 0 10px }

/* Tailles/Chips plus lisibles */
.model-sizes{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:12px;
  margin-top:10px;
}
.group-title{ font-size:12px; color:var(--muted); margin-bottom:6px }
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:12px }

/* Vignette image */
.model-right{ position:sticky; top:12px }        /* reste en vue au scroll */
.model-media{
  width:100%; aspect-ratio: 1 / 1;               /* carré propre */
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.model-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

/* Mobile : 1 colonne (image au-dessus) */
@media (max-width: 900px){
  .model-grid{ grid-template-columns: 1fr }
  .model-right{ position:static; }
  .model-media{ aspect-ratio: 16 / 9; max-width: 560px; margin-inline:auto; }
  .model-sizes{ grid-template-columns: 1fr }     /* piles verticalement */
}


/* icône générique */
.ico { display:inline-flex; vertical-align:-3px; }

/* filtres */
.filters-bar summary { display:flex; align-items:center; gap:8px; cursor:pointer; }
.filters-bar summary .ico { flex:0 0 auto; }
.filters-bar .badge { margin-left:auto; }
.zoom-btn .ico { pointer-events:none; }

.model-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.model-media{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.model-media img{display:block;width:100%;height:auto}
.model-title{margin:0 0 6px}
@media (max-width:900px){
  .model-grid{grid-template-columns:1fr}
}


/* — Accessoires — */
.acc-wrap{ margin-top:14px }
.acc-h3{ margin:0 0 8px; font-size:16px }
.acc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:10px;
}
.acc-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card);
}
.acc-media{ aspect-ratio: 4/3; overflow:hidden; background: #f5f7fa }
.acc-media img{ width:100%; height:100%; object-fit:cover; display:block }
.acc-fallback{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted) }
.acc-body{ padding:10px }
.acc-title{ margin:0 0 4px; font-size:14px }
@media (max-width: 900px){
  .acc-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px){
  .acc-grid{ grid-template-columns: 1fr }
}

/* — Accessoires — */
.acc-wrap{ margin-top:14px }
.acc-h3{ margin:0; font-size:16px }
.acc-toggle{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px }
.acc-region{ margin-top:10px }
.is-collapsed{ display:block } /* seulement pour conserver le flux quand hidden est alterné */

.acc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:10px;
}
.acc-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card);
}
.acc-media{ aspect-ratio: 4/3; overflow:hidden; background:#f5f7fa }
.acc-media img{ width:100%; height:100%; object-fit:cover; display:block }
.acc-fallback{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted) }
.acc-body{ padding:10px }
.acc-title{ margin:0 0 4px; font-size:14px }
@media (max-width: 900px){
  .acc-grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px){
  .acc-grid{ grid-template-columns: 1fr }
}

/* === Aperçu court : moitié de la 1re carte + dégradé === */

/* fermé : on ne montre QUE la 1re carte et on force 1 colonne */
.acc-details:not([open]) .acc-grid{ grid-template-columns: 1fr; }
.acc-details:not([open]) .acc-grid .acc-card:nth-child(n+2){ display:none; }

/* on “coupe” la 1re carte à ~la moitié, avec un fondu en bas */
.acc-details:not([open]) .acc-region{
  position: relative;
  overflow: hidden;
  /* hauteur d'aperçu : ajuste la valeur du milieu pour viser ~50% de ta carte */
  max-height: clamp(120px, 18vh, 180px);
  /* un peu moins de padding pour coller l'effet */
  padding-bottom: 0;
}
.acc-details:not([open]) .acc-region::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 48px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card));
}

/* — Accessoires repliables (<details>) — */
.acc-wrap{ margin-top:14px }
.acc-details{ border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden }
.acc-summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; font-weight:600;
}
.acc-summary::-webkit-details-marker{ display:none }
.acc-title{ font-size:14px }
.acc-count{ color:var(--muted); font-size:13px }
.acc-caret{ margin-left:auto; transition: transform .18s ease }
.acc-details[open] .acc-caret{ transform: rotate(180deg) }

.acc-region{ padding:10px 12px 12px }
.acc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:10px;
}
.acc-card{
  display:grid; grid-template-rows:auto 1fr;
  border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden;
}
.acc-media{ aspect-ratio: 4/3; background:#f5f7fa; overflow:hidden }
.acc-media img{ width:100%; height:100%; object-fit:cover; display:block }
.acc-fallback{ width:100%; height:100%; display:grid; place-items:center; color:var(--muted) }
.acc-body{ padding:10px }
.acc-title{ margin:0 0 4px; font-size:14px }

/* — Aperçu court “moitié du 1er avec fondu” (quand fermé) — */
.acc-details:not([open]) .acc-grid{ grid-template-columns: 1fr; }
.acc-details:not([open]) .acc-grid .acc-card:nth-child(n+2){ display:none; } /* on cache tout sauf la 1re */
.acc-details:not([open]) .acc-region{
  position: relative;
  overflow: hidden;
  max-height: clamp(120px, 18vh, 180px); /* ≈ moitié de la 1re vignette – ajuste 18vh si besoin */
  padding-bottom: 0;
}
.acc-details:not([open]) .acc-region::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:48px;
  pointer-events:none; background:linear-gradient(to bottom, transparent, var(--card));
}

/* — Variante “2 vignettes en aperçu” via data-preview="2" — */
.acc-details:not([open])[data-preview="2"] .acc-grid{ grid-template-columns: 1fr 1fr; }
.acc-details:not([open])[data-preview="2"] .acc-grid .acc-card:nth-child(n+3){ display:none; }
.acc-details:not([open])[data-preview="2"] .acc-region{
  max-height: none;               /* on montre 2 cartes entières */
  padding-bottom: 0;
}
.acc-details:not([open])[data-preview="2"] .acc-region::after{ display:none; }


*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:8px;
}

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}
.row{display:flex;gap:16px}.between{justify-content:space-between}.center{align-items:center}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:800px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-3{grid-template-columns:1fr 1fr 1fr}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.btn-primary{background:var(--dsap);border-color:var(--dsap);color:#fff}
.btn-outline{background:transparent;color:var(--ink)}

.section{padding:48px 0}
.section-title{text-align:center;margin-bottom:24px}
.kicker{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px}

h1,h2,h3,h4{margin:0 0 8px}
h1{font-size:32px}
@media(min-width:900px){h1{font-size:40px}}
h2{font-size:26px}
h3{font-size:20px}
p{margin:8px 0;color:var(--ink-weak)}

.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}

/* ====== TOPBAR (base) ====== */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(120%) blur(6px);transition:background .25s ease, box-shadow .25s ease, border-color .25s ease}
.topbar:not(.scroll){
  background:rgba(255,255,255,.6); /* fallback */
  background:color-mix(in oklab, var(--card) 60%, transparent);
  border-bottom:1px solid transparent;
}
:root.dark .topbar:not(.scroll){ background:rgba(15,23,42,.6); }
.topbar.scroll{background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.06)}

.topbar .brand-link{display:flex;align-items:center;gap:10px}
.logo{height:38px}
.logo.small{height:28px}
.brand-text .kicker{display:block;font-size:11px;color:var(--muted)}
.brand-text .title{font-weight:600}

/* Barre utilitaire (contacts) */
.bar-utility{font-size:13px;border-bottom:1px solid var(--line)}
.topbar:not(.scroll) .bar-utility{border-color:transparent}
.util-wrap{display:flex;gap:16px;align-items:center;min-height:36px}
.util-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink-weak)}
.util-spacer{flex:1}
.hide-sm{display:none}
@media(min-width:900px){.hide-sm{display:inline}}

/* Barre principale + nav */
.bar-main{min-height:64px;display:flex;align-items:center}
.nav{display:none;align-items:center;gap:18px}
@media(min-width:900px){.nav{display:flex}}
.nav-link{position:relative;color:var(--ink-weak);padding:8px 2px}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;opacity:0;transform:scaleX(.4);transition:.2s}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{opacity:1;transform:scaleX(1)}
.nav-cta{margin-left:6px}

/* Switch thème (icône swap) */
.theme-switch{display:inline-flex;align-items:center;gap:6px}
.theme-switch .i-sun{display:none}
:root.dark .theme-switch .i-sun{display:inline}
:root.dark .theme-switch .i-moon{display:none}
.theme-switch .ico-swap svg:nth-child(2){display:none}
:root.dark .theme-switch .ico-swap svg:nth-child(1){display:none}
:root.dark .theme-switch .ico-swap svg:nth-child(2){display:inline}

/* Burger */
.burger{display:inline-flex;background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--ink)}
@media(min-width:900px){.burger{display:none}}

/* ====== MENU MOBILE (version unifiée) ====== */
.menu-mobile{
  position:fixed;
  inset:0;
  background:var(--card);
  overflow:auto;
  z-index:30;            /* sous la topbar (40), au-dessus du contenu */
  padding:0;             /* géré par .menu-mobile-inner */
}
.menu-mobile[hidden]{display:none !important;}
.menu-mobile-inner{display:grid;gap:8px;padding:16px 0}
.menu-item{display:flex;align-items:center;gap:8px;padding:14px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.menu-actions{display:grid;gap:10px;padding:10px 0}
.menu-actions .quick{display:flex;gap:8px;flex-wrap:wrap}

/* ===== HERO vidéo ===== */
.hero{position:relative;isolation:isolate}
.hero-media{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.hero video{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 10%, rgba(84,185,77,.12), transparent 50%), linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.15))}
.hero .bullets{display:grid;gap:8px}

/* ===== SERVICES ===== */
.services{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.services{grid-template-columns:repeat(3,1fr)}}
.service .icon{background:rgba(84,185,77,.1);color:var(--dsap);border-radius:12px;padding:8px;display:inline-flex}

/* ===== AVANT/APRÈS (ancienne base générique — OK si non utilisée) ===== */
.compare{--pos:50%; position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.compare .pane{position:absolute;inset:0}
.compare .after{clip-path:polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%)}
.compare .handle{position:absolute;top:0;bottom:0;left:calc(var(--pos) - 1px);width:2px;background:var(--dsap)}
.compare .knob{position:absolute;left:calc(var(--pos) - 16px);top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--dsap);border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.compare input[type=range]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:ew-resize}

/* ===== CTA flottants ===== */
.fab{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:50}
.fab a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;background:var(--dsap);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.fab a.secondary{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.fab .ico{display:inline-flex}


/* ===== ICONES inline ===== */
.ico{display:inline-block;vertical-align:-3px}
.service .icon .ico{width:24px;height:24px}

/* ===== FORMULAIRE ===== */
.form fieldset{display:grid;gap:10px;border:0;padding:0;margin:0}
.input,.textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.help{font-size:12px;color:var(--muted)}
.alert{padding:12px 14px;border-radius:12px}
.alert.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}

/* Fallback si color-mix/oklab pas supporté */
@supports not (background: color-mix(in oklab, white 60%, transparent)) {
  .topbar:not(.scroll){ background: rgba(255,255,255,.7); }
  :root.dark .topbar:not(.scroll){ background: rgba(15,23,42,.7); }
}
/* Fallback blur */
@supports not (backdrop-filter: blur(1px)) {
  .topbar{ backdrop-filter: none; }
}

/* Force l’état responsive */
@media (max-width: 899.98px){
  .burger{display:inline-flex !important; align-items:center; gap:8px; pointer-events:auto;}
  .nav{display:none !important;}
}
@media (min-width: 900px){
  .burger{display:none !important;}
  .nav{display:flex !important;}
}

/* Conteneur vidéo avec ratio → évite hauteur 0 le temps que la vidéo charge */
.hero-media{aspect-ratio:16/9; min-height:220px}
@media(min-width:900px){.hero-media{aspect-ratio:21/9}}
.hero video{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width: 900px){
  .hero-media{ aspect-ratio: 21 / 9; } /* plus panoramique sur desktop si tu veux */
}
.hero video{ width:100%; height:100%; object-fit:cover; display:block; }





/* Empêche la grille du hero d'étirer les colonnes en hauteur */
.hero .grid-2{ align-items: center; }          /* ou start si tu préfères */

/* Donne une hauteur "intrinsèque" raisonnable au bloc vidéo */
.hero-media{
  aspect-ratio: 16 / 9;         /* garantit une hauteur propre */
  width: 100%;
  max-height: 520px;            /* cap desktop */
  min-height: 220px;            /* cap mobile */
}

/* Option écran large : un format plus cinémascope et un cap un peu plus bas */
@media (min-width: 1100px){
  .hero-media{ aspect-ratio: 21 / 9; max-height: 480px; }
}

/* Vidéo qui remplit son conteneur, sans dépasser */
.hero video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--line);background:var(--card);padding:28px 0;margin-top:32px}
.subfoot{text-align:center;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-top:12px}


.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0}

/* 1) La ligne du hero n’étire plus les items en hauteur */
.hero .grid-2{ align-items: start; }

/* 2) L’item qui contient la vidéo NE s’étire pas */
.hero .grid-2 > :nth-child(2){ align-self: start; }

/* 3) Le conteneur vidéo a une taille intrinsèque capée (Chrome friendly) */
.hero-media{
  aspect-ratio: 16 / 9;          /* hauteur calculée depuis la largeur */
  width: min(100%, 760px);        /* ne dépasse pas 760px de large */
  max-height: 460px;              /* cap hauteur desktop */
  min-height: 220px;              /* un minimum en mobile */
  overflow: hidden;               /* coupe si besoin */
}

/* Option écran large: format panoramique, cap un poil plus bas */
@media (min-width: 1200px){
  .hero-media{
    aspect-ratio: 21 / 9;
    width: min(100%, 840px);
    max-height: 420px;
  }
}

/* 4) La vidéo ne force JAMAIS la hauteur du parent */
.hero video{
  width: 100%;
  height: auto;                   /* important: pas 100% */
  max-height: inherit;            /* respecte le cap du parent */
  object-fit: cover;
  display: block;
}

/* === 0) Normalisations utiles Chrome === */
:root { -webkit-text-size-adjust: 100%; }
html, body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*:focus { outline-offset: 2px; }
img, video { display:block; height:auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* === 1) Grilles & flex : empêche le "stretch" / débordements === */
.grid-2 > *, .grid-3 > *, .row > * { min-width: 0; min-height: 0; }
.hero .grid-2 { align-items: start; grid-auto-rows: min-content; }
.hero .grid-2 > :nth-child(2){ align-self: start; } /* colonne vidéo */

/* === 2) HERO vidéo : taille maîtrisée sur Chrome desktop === */
.hero-media{
  aspect-ratio: 16 / 9;
  width: min(100%, 760px);
  max-height: 460px;
  min-height: 220px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
}
@media (min-width: 1100px){
  .hero-media{ aspect-ratio: 21 / 9; width:min(100%, 840px); max-height: 420px; }
}
.hero video{
  width:100%; height:auto; max-height: inherit; object-fit: cover;
}

/* === 3) Topbar transparence/blur : fallbacks Chrome === */
.topbar { -webkit-backdrop-filter: saturate(120%) blur(6px); backdrop-filter: saturate(120%) blur(6px); }
@supports not (background: color-mix(in oklab, white 60%, transparent)) {
  .topbar:not(.scroll){ background: rgba(255,255,255,.7); }
  :root.dark .topbar:not(.scroll){ background: rgba(15,23,42,.7); }
}

/* === 4) Menu mobile fiable (classe .is-open) === */
.menu-mobile{ position:fixed; inset:0; background:var(--card); overflow:auto; z-index:30; display:none; }
.menu-mobile.is-open{ display:block; }

/* === 5) Slider Avant/Après : lissage & rendu net === */
.compare--standalone{ contain: paint; transform: translateZ(0); }
.compare--standalone .pane{
  object-fit: cover; object-position: center;
  -webkit-user-drag:none; user-select:none;
}
.compare--standalone .handle, .compare--standalone .knob{ will-change: left, clip-path; }

/* === 6) Icônes SVG : netteté & cohérence === */
.ico, .service .icon .ico { shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; }

/* === 7) Divers : z-index cohérents === */
.topbar{ z-index: 40; }
.fab{ z-index: 50; }



/* ===== EGGER strap ===== */
.egger-strap{
  --egger:#D51218;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(180deg,#fff,rgba(0,0,0,.01));
}
:root.dark .egger-strap{ background:linear-gradient(180deg,#0e172a,#0b1220); }
.egger-logo{ display:block; height:28px; width:auto; }
.egger-strap .tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--card); font-size:12px;color:var(--ink-weak);
}
.es-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.es-right .count{font-size:13px;color:var(--muted)}
/* ===== Cartes décors pro ===== */
.decor-card{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:var(--card); transition:transform .15s ease, box-shadow .15s ease;}
.decor-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
.decor-thumb{ aspect-ratio:4/3; width:100%; object-fit:cover; display:block; }
.decor-body{ padding:10px 12px; }
.decor-title{ font-weight:600; }
.decor-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.badge{ font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--card); }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; vertical-align:-1px; margin-right:6px; border:1px solid var(--line); }

/* bouton voir plus */
.more-wrap{ display:flex; justify-content:center; margin-top:12px; }


/* === Logos marques : sans cadre, sans fond === */
#emuca .brand__logo,
#egger .brand__logo{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* === Emuca gallery : version compacte === */
.emuca-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
  max-width: 1200px;      /* ↓ rétrécit l'ensemble */
  margin: 0 auto;        /* centré */
}

.emuca-gallery .card{
  padding:12px;          /* moins d'air */
  border-radius:16px;
}

.emuca-img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 10; /* ↓ réduit la hauteur des 2 petites cartes */
  object-fit: cover;
  border-radius:12px;
}

/* carte de droite plus haute mais raisonnable */
.emuca-tall{ grid-row: span 2; }
.emuca-tall .emuca-img{
  aspect-ratio: 3 / 4;   /* ↓ plus verticale, sans être immense */
}

/* légendes compactes */
.emuca-gallery .help{ font-size:12px; margin-top:6px; }

/* Mobile : une seule colonne, ratios adaptés */
@media (max-width: 899.98px){
  .emuca-gallery{ grid-template-columns:1fr; max-width: 100%; }
  .emuca-img{ aspect-ratio: 16 / 11; }
  .emuca-tall{ grid-row:auto; }
  .emuca-tall .emuca-img{ aspect-ratio: 4 / 5; }
}


/* Images de logo (toutes variantes) */
#emuca .brand__logoimg,
#egger .brand__logoimg,
img[alt="Emuca"],
img[alt="EGGER"],
.egger-logo{
  display:block;
  width:120px;              /* ajuste si besoin */
  height:auto;
  object-fit:contain;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}



/* === ACCESSOIRES (forçage aperçu) — bloc test === */
.acc-wrap{ margin-top:14px !important; }
.acc-details{ border:1px solid var(--line) !important; border-radius:12px !important; background:var(--card) !important; overflow:hidden !important; }
.acc-summary{ list-style:none !important; cursor:pointer !important; display:flex !important; align-items:center !important; gap:8px !important; padding:10px 12px !important; font-weight:600 !important; }
.acc-summary::-webkit-details-marker{ display:none !important; }
.acc-title{ font-size:14px !important; }
.acc-count{ color:var(--muted) !important; font-size:13px !important; }
.acc-caret{ margin-left:auto !important; transition:transform .18s ease !important; }
.acc-details[open] .acc-caret{ transform:rotate(180deg) !important; }

.acc-region{ padding:10px 12px 12px !important; }
.acc-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)) !important; gap:10px !important; }
.acc-card{ display:grid !important; grid-template-rows:auto 1fr !important; border:1px solid var(--line) !important; border-radius:10px !important; background:var(--card) !important; overflow:hidden !important; }
.acc-media{ aspect-ratio:4/3 !important; background:#f5f7fa !important; overflow:hidden !important; }
.acc-media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.acc-body{ padding:10px !important; }

/* — Mode “aperçu 1er à moitié + fondu” (fermé) — */
.acc-details:not([open]) .acc-grid{ grid-template-columns:1fr !important; }
.acc-details:not([open]) .acc-grid .acc-card:nth-child(n+2){ display:none !important; }
.acc-details:not([open]) .acc-region{
  position:relative !important; overflow:hidden !important;
  max-height: clamp(120px, 18vh, 180px) !important;
  padding-bottom:0 !important;
}
.acc-details:not([open]) .acc-region::after{
  content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:48px !important;
  pointer-events:none !important; background:linear-gradient(to bottom, transparent, var(--card)) !important;
}

/* — Variante “aperçu 2 vignettes” — */
.acc-details:not([open])[data-preview="2"] .acc-grid{ grid-template-columns:1fr 1fr !important; }
.acc-details:not([open])[data-preview="2"] .acc-grid .acc-card:nth-child(n+3){ display:none !important; }
.acc-details:not([open])[data-preview="2"] .acc-region{ max-height:none !important; }
.acc-details:not([open])[data-preview="2"] .acc-region::after{ display:none !important; }
@media (max-width:520px){
  .acc-details:not([open])[data-preview="2"] .acc-grid{ grid-template-columns:1fr !important; }
}


/* ==== Finder (marques + recherche) : layout mobile/desktop fiable ==== */
.finder { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:14px; }

/* Ligne principale : en grid pour stacker proprement sur mobile */
.finder-row {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: 1 colonne */
  gap: 10px;
  align-items: center;
}
@media (min-width: 720px){
  .finder-row {
    grid-template-columns: 1fr auto; /* desktop: marques | recherche+reset */
  }
}

/* Bloc marques (logo + tags) : wrap + rognage horizontal doux sur mobile */
.brand-chip{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.brand-chip img{ height:22px; width:auto; flex:0 0 auto; }

/* Bloc recherche + reset : prend toute la largeur sur mobile */
.finder-right { display:flex; align-items:center; gap:8px; width:100%; }
.finder .boxed { flex:1 1 auto; display:flex; align-items:center; gap:8px; width:100%; }
.finder .boxed .input-slim { width:100%; min-width:0; font-size:16px; } /* 16px = pas de zoom iOS */
#resetAll { flex:0 0 auto; }

/* Chips : hauteur/tap-area propres sur iPhone */
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  padding:8px 10px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  font-size:13px;
  line-height:1.1;           /* évite les “gros ovales” */
  min-height: 36px;          /* tap target correct */
}
.chip.is-active{ background:var(--dsap); border-color:var(--dsap); color:#fff; }

/* === Galerie décors : règles uniques + vraies unités === */
#decors.gallery{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 420px){
  #decors.gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 colonnes stables sur iPhone */
}
@media (min-width: 900px){
  #decors.gallery{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* <-- px OK */
}
@media (min-width: 1200px){
  #decors.gallery{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* <-- px OK */
}

/* Évite que les anciennes définitions l’emportent */
#decors.gallery { grid-auto-rows: auto; }

/* Meta des cartes : texte qui ne déborde pas */
.decor-meta .badge{ white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }

/* Safe area iOS pour la rangée basse de chips (évite la barre Safari qui masque) */
@supports (padding: env(safe-area-inset-bottom)){
  .finder{ padding-bottom: calc(12px + env(safe-area-inset-bottom)/2); }
}

/* Lightbox : zones cliquables confortables sur iOS */
#dsap-lightbox .lb-btn{ min-width:44px; min-height:44px; }

/* ==== EGGER · grille décors (fix colonnes) ==== */
/* Mobile étroit: 2 colonnes stables */
#decors.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* ≥ 520px: 3 colonnes */
@media (min-width:520px){
  #decors.gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ≥ 900px: colonnes fluides mais mini carte raisonnable */
@media (min-width:900px){
  #decors.gallery{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
}

/* ≥ 1200px: cartes plus larges */
@media (min-width:1200px){
  #decors.gallery{ grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
}

/* ==== EGGER · lightbox devant la topbar/burger ==== */
#dsap-lightbox{ z-index: 5000; }

/* décale le bouton fermer sous l'encoche et la barre d'adresse iOS */
#dsap-lightbox .lb-close{
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
}

/* quand la lightbox est ouverte, on masque le burger (évite le conflit tactile) */
#dsap-lightbox.open ~ .topbar .burger,
.topbar .burger.is-hidden-when-lb{
  display: none !important;
}


/* Global: burger caché tant que la lightbox est ouverte */
#dsap-lightbox.open + * .burger,
#dsap-lightbox.open ~ * .burger{
  display:none !important;
}


/* ==== EGGER · chips compactes ==== */
.finder .chips{ gap:6px; }
.finder .chip{
  padding:6px 9px;
  font-size:12px;
  line-height:1.1;
  min-height: 30px;           /* tap area correcte mais visuel plus fin */
  border-radius:999px;
}

/* Icônes & champs recherche compacts */
.finder .group-title{ font-size:12px; }
.finder .boxed{ padding:6px 10px; }
.finder .boxed .input-slim{ font-size:16px; } /* évite le zoom iOS à l’ouverture du clavier */