/* ═══════════════════════════════════════════
   CRESVO SHOWROOM — Design System
   ═══════════════════════════════════════════ */

/* ── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; }

/* ── TOKENS ─────────────────────────────── */
:root {
  --bg:        #f4f2ef;
  --bg-card:   #ffffff;
  --surface:   #eeebe6;
  --text:      #1a1916;
  --text-2:    #3d3a34;
  --muted:     #6e6b64;
  --subtle:    #a09c94;
  --border:    rgba(10,61,43,0.10);
  --border-2:  rgba(10,61,43,0.18);

  --primary:       #0A3D2B;
  --primary-light: rgba(10,61,43,.09);
  --primary-dark:  #072418;
  --primary-txt:   #ffffff;
  --gold:          #C8963E;
  --gold-light:    rgba(200,150,62,.12);

  --r-btn:   8px;
  --r-card:  12px;
  --r-input: 8px;
  --r-badge: 6px;

  --sh: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --sh-hover: 0 12px 32px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06);

  --card-pad:    1.75rem;
  --section-gap: 4rem;

  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-h: 'Bricolage Grotesque', system-ui, sans-serif;

  --tr: .18s ease;
  --tr-m: .3s ease;
}

/* ── THÈME SOMBRE ───────────────────────── */
[data-theme="dark"] {
  --bg:       #111110;
  --bg-card:  #1c1b19;
  --surface:  #242320;
  --text:     #f0ede8;
  --text-2:   #c8c4bc;
  --muted:    #7a776e;
  --subtle:   #504e48;
  --border:   rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
}

/* ── COULEURS ───────────────────────────── */
[data-color="blue"]   { --primary:#2563eb; --primary-light:rgba(37,99,235,.1);   --primary-dark:#1d4ed8; }
[data-color="teal"]   { --primary:#0d9488; --primary-light:rgba(13,148,136,.1);  --primary-dark:#0f766e; }
[data-color="purple"] { --primary:#7c3aed; --primary-light:rgba(124,58,237,.1);  --primary-dark:#6d28d9; }
[data-color="orange"] { --primary:#ea580c; --primary-light:rgba(234,88,12,.1);   --primary-dark:#c2410c; }
[data-color="rose"]   { --primary:#e11d48; --primary-light:rgba(225,29,72,.1);   --primary-dark:#be123c; }
[data-color="green"]  { --primary:#0A3D2B; --primary-light:rgba(10,61,43,.09);   --primary-dark:#072418; }
[data-color="gold"]   { --primary:#b45309; --primary-light:rgba(180,83,9,.1);    --primary-dark:#92400e; }
[data-color="mono"]   { --primary:#374151; --primary-light:rgba(55,65,81,.1);    --primary-dark:#1f2937; }

/* ── COINS ──────────────────────────────── */
[data-radius="sharp"]   { --r-btn:2px;   --r-card:4px;    --r-input:2px;  --r-badge:2px; }
[data-radius="soft"]    { --r-btn:8px;   --r-card:12px;   --r-input:8px;  --r-badge:6px; }
[data-radius="rounded"] { --r-btn:14px;  --r-card:20px;   --r-input:14px; --r-badge:10px; }
[data-radius="pill"]    { --r-btn:999px; --r-card:24px;   --r-input:999px;--r-badge:999px; }

/* ── OMBRES ─────────────────────────────── */
[data-shadow="none"]   { --sh:none; --sh-hover:none; }
[data-shadow="simple"] { --sh:0 1px 3px rgba(0,0,0,.07); --sh-hover:0 4px 12px rgba(0,0,0,.1); }
[data-shadow="medium"] { --sh:0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04); --sh-hover:0 12px 32px rgba(0,0,0,.11),0 2px 8px rgba(0,0,0,.06); }
[data-shadow="strong"] { --sh:0 0 0 1px var(--border),0 8px 24px rgba(0,0,0,.10); --sh-hover:0 0 0 1px var(--border-2),0 16px 40px rgba(0,0,0,.14); }

/* ── DENSITÉ ────────────────────────────── */
[data-density="compact"] { --card-pad:1.125rem; --section-gap:2.5rem; }
[data-density="normal"]  { --card-pad:1.75rem;  --section-gap:4rem; }
[data-density="airy"]    { --card-pad:2.5rem;   --section-gap:6rem; }

/* ── TYPO ───────────────────────────────── */
[data-font="sans"]    { --font:'Bricolage Grotesque',system-ui,sans-serif; --font-h:'Bricolage Grotesque',system-ui,sans-serif; }
[data-font="serif"]   { --font:'Literata',Georgia,serif;                   --font-h:'Literata',Georgia,serif; }
[data-font="mono"]    { --font:'JetBrains Mono','Courier New',monospace;   --font-h:'JetBrains Mono','Courier New',monospace; }
[data-font="display"] { --font:'Bricolage Grotesque',system-ui,sans-serif; --font-h:'Bricolage Grotesque',system-ui,sans-serif; }

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background var(--tr-m), color var(--tr-m);
}

/* ═══════════════════════════════════════════
   HERO BANNER
═══════════════════════════════════════════ */
.hero {
  background: #0c0e0d;
  border-bottom: 1px solid rgba(200,150,62,.25);
  position: relative;
  overflow: hidden;
}

/* Grain texture subtil */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,150,62,.5) 30%, rgba(200,150,62,.8) 50%, rgba(200,150,62,.5) 70%, transparent 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 2.75rem;
  height: 88px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Logo texte Cresvo */
.hero__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
}

.hero__logo-mark {
  width: 34px;
  height: 34px;
  background: #C8963E;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: white;
  letter-spacing: -.5px;
  font-family: 'Bricolage Grotesque', sans-serif;
  flex-shrink: 0;
}

.hero__logo-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.hero__logo-sub {
  font-size: .62rem;
  color: rgba(255,255,255,.28);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 1px;
  display: block;
}

/* Centre */
.hero__center {
  text-align: center;
  flex: 1;
}

.hero__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  letter-spacing: -.025em;
  line-height: 1.3;
  margin-bottom: .2rem;
}

.hero__desc {
  font-size: .72rem;
  color: rgba(255,255,255,.32);
  line-height: 1.5;
  letter-spacing: .01em;
}

/* Droite */
.hero__right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.hero__badge {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.1);
  padding: .25rem .625rem;
  border-radius: 4px;
}

.hero__kbd {
  font-size: .62rem;
  color: rgba(255,255,255,.25);
  letter-spacing: .02em;
}

.hero__kbd kbd {
  font-family: monospace;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .68rem;
  color: rgba(255,255,255,.45);
}

/* ═══════════════════════════════════════════
   BARRE DE CONTRÔLES
═══════════════════════════════════════════ */
.cbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .cbar { background: rgba(28,27,25,.92); }

.cbar__inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 2.75rem;
  height: 52px;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.cbar__inner::-webkit-scrollbar { display: none; }

.cbar__group {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: 0 1.25rem;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.cbar__group:first-child { padding-left: 0; }
.cbar__group:last-child  { border-right: none; }

.cbar__label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--subtle);
  margin-right: .25rem;
  white-space: nowrap;
}

/* Chips dans la cbar */
.cc {
  padding: .28rem .6rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  transition: all var(--tr);
  white-space: nowrap;
}
.cc:hover { color: var(--text); background: var(--surface); }
.cc.active { color: var(--primary); background: var(--primary-light); border-color: var(--primary); font-weight: 600; }

/* Swatches dans la cbar */
.cs {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all var(--tr);
  flex-shrink: 0;
  cursor: pointer;
}
.cs:hover { transform: scale(1.15); }
.cs.active { outline: 2px solid var(--text); outline-offset: 1px; }

/* Toggle thème */
.cbar__theme {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--muted);
}

.tsw {
  position: relative;
  width: 34px; height: 18px;
  background: var(--border-2);
  border-radius: 9px;
  transition: background var(--tr);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
}
.tsw[aria-checked="true"] { background: var(--primary); }
.tsw__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform var(--tr);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tsw[aria-checked="true"] .tsw__thumb { transform: translateX(16px); }

/* Actions */
.cbar__action {
  padding: .28rem .625rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  background: transparent;
  transition: all var(--tr);
  white-space: nowrap;
}
.cbar__action:hover { background: var(--surface); color: var(--text); }

/* DEV MODE indicator */
.cbar__devmode {
  display: none;
  align-items: center;
  gap: .35rem;
  font-size: .62rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  background: var(--gold-light);
  border: 1px solid rgba(200,150,62,.3);
  border-radius: 4px;
}
.dev-mode .cbar__devmode { display: flex; }

/* ═══════════════════════════════════════════
   SHOWROOM
═══════════════════════════════════════════ */
.showroom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ── SECTION ÉLÉMENT ────────────────────── */
.elem-section {}

.elem-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.elem-title-wrap { display: flex; align-items: baseline; gap: .75rem; }

.elem-title {
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  transition: font-family var(--tr-m);
}

.elem-desc {
  font-size: .75rem;
  color: var(--subtle);
  font-weight: 400;
  letter-spacing: 0;
}

.elem-counter {
  font-size: .68rem;
  font-weight: 600;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ── CAROUSEL ───────────────────────────── */
.elem-carousel {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 1.25rem;
  align-items: center;
}

.carousel-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--tr);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-size: .9rem;
}
.carousel-arrow:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.carousel-arrow:disabled { opacity: .2; pointer-events: none; }

/* Track */
.carousel-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ── SLOT VARIANTE ──────────────────────── */
.variant-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--tr-m), border-color var(--tr-m);
  position: relative;
  min-height: 300px; /* plus grand pour plus d'espace */
}
.variant-slot:hover { box-shadow: var(--sh-hover); border-color: var(--border-2); }

.variant-slot__inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem; /* réduit — le contenu gère son propre spacing */
  overflow: hidden;
}

/* ── SIZING PAR TYPE ─────────────────────────
   Principes :
   · max-width = taille naturelle de l'élément
   · width: 100% = s'adapte si le slot est plus étroit
   · Le slot centre les éléments plus petits que lui
   · Pas de zoom → pas de déformation du backdrop-filter
─────────────────────────────────────────── */

/* Navigation : large, remplit la carte singleView */
._nv-slot { max-width: 860px; width: 100%; }

/* Pricing singleView (~900px slot) */
._pv-wrap  { max-width: 720px; width: 100%; }
._pv2-wrap { max-width: 720px; width: 100%; }
._pv3-wrap,._pv6-wrap { max-width: 680px; width: 100%; }
._pv8      { max-width: 540px; width: 100%; }
._pv9      { max-width: 480px; width: 100%; }
._pv10     { max-width: 560px; width: 100%; }
._pv11     { max-width: 480px; width: 100%; }
._pv12     { max-width: 620px; width: 100%; }
._pv13,._pv14 { max-width: 640px; width: 100%; }
._pv15     { max-width: 420px; width: 100%; }
._pv5-wrap { max-width: 460px; width: 100%; }
._pv7-wrap { max-width: 480px; width: 100%; }

/* Catalogue singleView */
._cat1,._cat3,._cat4,._cat5,._cat6,._cat7 { max-width: 560px; width: 100%; }
._cat2 { max-width: 540px; width: 100%; }

/* Formulaires singleView */
._frm1,._frm2,._frm3,._frm5,._frm6,._frm8 { max-width: 480px; width: 100%; }
._frm7-wrap { max-width: 480px; width: 100%; }
._frm9      { max-width: 440px; width: 100%; }
._frm10     { max-width: 480px; width: 100%; }

/* Typographie 2-col (~454px slot) */
._tv1,._tv2,._tv3,._tv4,._tv5,._tv6,._tv7,._tv8,._tv9,._tv10,
._tv11,._tv12,._tv13,._tv14,._tv15,._tv16,._tv17,._tv18,._tv19,._tv20 {
  max-width: 440px; width: 100%;
}

/* Cartes 2-col */
._crd1,._crd2,._crd3,._crd4,._crd5-wrap,._crd6,._crd7,._crd8,._crd9,._crd10,._crd11,._crd12 {
  max-width: 400px; width: 100%;
}
/* Cartes pleine largeur par nature */
._crd7,._crd2 { max-width: 420px; }

/* Témoignages 2-col */
._tst1,._tst2,._tst3,._tst4,._tst5,._tst6,._tst7,._tst8,._tst9,._tst10,._tst11,._tst12 {
  max-width: 400px; width: 100%;
}
._tst9,._tst11 { max-width: 440px; }

/* Hauteur des slots par section */
[data-elem="buttons"]       .variant-slot { min-height: 200px; }
[data-elem="typography"]    .variant-slot { min-height: 300px; }
[data-elem="navigation"]    .variant-slot { min-height: 120px; max-height: 180px; }
[data-elem="pricing"]       .variant-slot { min-height: 420px; }
[data-elem="products"]      .variant-slot { min-height: 360px; }
[data-elem="forms"]         .variant-slot { min-height: 380px; }
[data-elem="cards"]         .variant-slot { min-height: 280px; }
[data-elem="testimonials"]  .variant-slot { min-height: 240px; }

/* Navigation : inner sans padding vertical excédentaire */
[data-elem="navigation"] .variant-slot__inner { padding: 0.875rem; }

/* Footer du slot */
.variant-slot__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .625rem var(--card-pad);
  border-top: 1px solid var(--border);
  background: var(--surface);
  gap: .5rem;
}

.variant-slot__name {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -.01em;
}

.variant-slot__tag {
  font-size: .62rem;
  font-weight: 500;
  color: var(--subtle);
  letter-spacing: .02em;
}

/* Numéro discret */
.variant-slot__num {
  position: absolute;
  top: .625rem;
  right: .625rem;
  font-size: .58rem;
  font-weight: 700;
  color: var(--subtle);
  letter-spacing: .04em;
  opacity: .5;
}

/* Slot vide */
.variant-slot--empty {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.variant-slot--empty:hover { box-shadow: none; border-color: var(--border-2); }
.variant-slot--empty .variant-slot__inner {
  flex-direction: column;
  gap: .5rem;
}
.slot-empty-icon { font-size: 1.5rem; color: var(--subtle); opacity: .4; }
.slot-empty-text { font-size: .72rem; color: var(--subtle); text-align: center; line-height: 1.5; }

/* Dots pagination */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .3rem;
  margin-top: .875rem;
}
.carousel-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-2);
  transition: all var(--tr);
  cursor: pointer;
  border: none;
}
.carousel-dot.active { width: 18px; border-radius: 3px; background: var(--primary); }

/* ═══════════════════════════════════════════
   COMPOSANTS GLOBAUX (utilisés dans les slots)
═══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .6rem 1.25rem;
  border-radius: var(--r-btn);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--tr);
}
.btn--primary  { background:var(--primary); color:var(--primary-txt); border-color:var(--primary); }
.btn--primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.btn--outline  { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn--outline:hover { background:var(--primary-light); }
.btn--ghost    { background:transparent; color:var(--text-2); border-color:var(--border); }
.btn--ghost:hover { background:var(--surface); }

.inp {
  width:100%; padding:.6rem .875rem;
  border:1.5px solid var(--border); border-radius:var(--r-input);
  background:var(--bg-card); color:var(--text); font-size:.875rem;
  font-family:var(--font); transition:all var(--tr); outline:none;
}
.inp:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.inp::placeholder { color:var(--subtle); }

/* ═══════════════════════════════════════════
   DEV MODE
═══════════════════════════════════════════ */
.dev-code-btn {
  padding:.15rem .4rem;
  background: var(--primary);
  color:#fff;
  border:none;
  border-radius:3px;
  font-size:.58rem;
  font-weight:700;
  cursor:pointer;
  font-family:monospace;
  letter-spacing:.02em;
  transition:all var(--tr);
  opacity:.7;
}
.dev-code-btn:hover { opacity:1; background:var(--gold); }

/* ═══════════════════════════════════════════
   MOBILE FAB
═══════════════════════════════════════════ */
.panel-fab { display:none; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero__inner  { padding: 0 1.5rem; gap: 1rem; }
  .hero__center { display: none; }
  .hero__right  { display: none; }
  .cbar__inner  { padding: 0 1.5rem; }
  .showroom     { padding: 2rem 1.5rem; }
  .elem-carousel{ grid-template-columns: 40px 1fr 40px; gap: .75rem; }
}

/* ── MOBILE : 1 seul slot par section ──────── */
@media (max-width: 640px) {
  .showroom    { padding: 1.5rem .75rem; gap: 2.5rem; }
  .cbar__inner { padding: 0 .75rem; gap: 0; }
  .cbar__group { padding: 0 .625rem; }

  /* Force 1 colonne — cache le 2ème slot si JS n'a pas encore agi */
  .carousel-track                    { grid-template-columns: 1fr !important; }
  .carousel-track .variant-slot:nth-child(2) { display: none !important; }

  /* Flèches plus petites */
  .elem-carousel  { grid-template-columns: 36px 1fr 36px; gap: .5rem; }
  .carousel-arrow { width: 36px; height: 36px; font-size: .8rem; }

  /* Slot inner : centré */
  .variant-slot__inner {
    overflow: hidden;
    padding: .5rem;
    align-items: center;
    justify-content: center;
  }

  /* Section header compact */
  .elem-title  { font-size: .875rem; }
  .elem-desc   { display: none; }
  .elem-header { margin-bottom: .875rem; }

  /* Zoom mobile : plus petit pour tenir dans le slot étroit */
  /* Mobile : zoom sur les éléments qui ne tiennent pas dans ~220px */
  ._nv-slot      { zoom: 0.27; max-width: none; }
  ._pv-wrap,._pv2-wrap,._pv3-wrap,._pv6-wrap { zoom: 0.38; max-width: none; }
  ._pv8,._pv10,._pv12,._pv13,._pv14 { zoom: 0.42; max-width: none; }
  ._pv9,._pv11,._pv15,._pv5-wrap,._pv7-wrap { zoom: 0.52; max-width: none; }
  ._cat1,._cat3,._cat4,._cat5,._cat6,._cat7 { zoom: 0.48; max-width: none; }
  ._cat2 { zoom: 0.44; max-width: none; }
  ._frm1,._frm2,._frm3,._frm5,._frm6,._frm8 { zoom: 0.52; max-width: none; }
  ._frm7-wrap { zoom: 0.48; max-width: none; }
  ._frm9 { zoom: 0.58; max-width: none; }
  ._frm10 { zoom: 0.5; max-width: none; }
  ._tv1,._tv2,._tv3,._tv4,._tv5,._tv6,._tv7,._tv8,._tv9,._tv10,
  ._tv11,._tv12,._tv13,._tv14,._tv15,._tv16,._tv17,._tv18,._tv19,._tv20 { zoom: 0.62; max-width: none; }
  ._crd1,._crd2,._crd3,._crd4,._crd5-wrap,._crd6,._crd7,._crd8,._crd9,._crd10,._crd11,._crd12 { zoom: 0.6; max-width: none; }
  ._tst1,._tst2,._tst3,._tst4,._tst5,._tst6,._tst7,._tst8,._tst9,._tst10,._tst11,._tst12 { zoom: 0.6; max-width: none; }
  [data-elem="navigation"] .variant-slot { min-height: 80px; max-height: 120px; }
}

@media (max-width: 600px) {
  .hero__inner  { height: 68px; }
  .hero__title  { font-size: .9rem; }
}

/* Les overrides mobile responsive sont gérés par le zoom ci-dessus */

/* ── Carousel single-view (navigation) ─── */
.carousel-track--single {
  grid-template-columns: 1fr;
}
.carousel-track--single .variant-slot__inner {
  padding: 0;
}

/* ─── Arrow attention animation ─────────── */
@keyframes arrowPingLeft {
  0%   { transform: translateX(0)   scale(1);    box-shadow: 0 0 0 0   rgba(0,0,0,.0); }
  15%  { transform: translateX(-7px) scale(1.15); box-shadow: 0 0 0 6px rgba(0,0,0,.0); }
  35%  { transform: translateX(3px)  scale(0.96); }
  55%  { transform: translateX(-3px) scale(1.06); }
  80%  { transform: translateX(1px)  scale(1.02); }
  100% { transform: translateX(0)   scale(1);    }
}
@keyframes arrowPingRight {
  0%   { transform: translateX(0)   scale(1);    }
  15%  { transform: translateX(7px)  scale(1.15); }
  35%  { transform: translateX(-3px) scale(0.96); }
  55%  { transform: translateX(3px)  scale(1.06); }
  80%  { transform: translateX(-1px) scale(1.02); }
  100% { transform: translateX(0)   scale(1);    }
}

.carousel-arrow--prev.arrow-ping:not(:disabled) {
  animation: arrowPingLeft .65s cubic-bezier(.34,1.56,.64,1) both;
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.carousel-arrow--next.arrow-ping:not(:disabled) {
  animation: arrowPingRight .65s cubic-bezier(.34,1.56,.64,1) both;
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* ═══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
@keyframes _fadeUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.variant-slot { animation: _fadeUp .28s ease both; }
.variant-slot:nth-child(2) { animation-delay:.07s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:.001ms !important; }
}

/* ═══════════════════════════════════════════
   GUIDE D'UTILISATION
═══════════════════════════════════════════ */
.sguide {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.sguide__inner {
  display: flex;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.75rem;
}

.sguide__card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1.25rem 0;
  flex: 1;
}

.sguide__sep {
  width: 1px;
  background: var(--border);
  margin: .75rem 1.5rem;
  flex-shrink: 0;
}

.sguide__icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: .1rem;
}

.sguide__text {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
  letter-spacing: .005em;
}

.sguide__text strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: .25rem;
  letter-spacing: -.01em;
}

.sguide__text kbd {
  font-family: monospace;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  padding: .05rem .3rem;
  font-size: .72rem;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .sguide__inner {
    flex-wrap: wrap;
    padding: 0 1.5rem;
    gap: 0;
  }
  .sguide__card {
    flex: 1 1 calc(50% - 1px);
    min-width: 220px;
    padding: 1rem 0;
  }
  .sguide__sep {
    display: none;
  }
  .sguide__card:nth-child(odd) {
    padding-right: 1rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .sguide__card:nth-child(even) {
    padding-left: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .sguide__card:nth-child(n+5) {
    border-bottom: none;
  }
}

@media (max-width: 540px) {
  .sguide__card { flex: 1 1 100%; border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .sguide__card:nth-child(n+5) { border-bottom: 1px solid var(--border); }
  .sguide__card:last-child { border-bottom: none !important; }
}

/* ═══════════════════════════════════════════
   SLOT — curseur zoom
═══════════════════════════════════════════ */
.variant-slot:not(.variant-slot--empty) .variant-slot__inner {
  cursor: zoom-in;
  transition: background var(--tr);
}
.variant-slot:not(.variant-slot--empty):hover .variant-slot__inner {
  background: rgba(var(--primary-rgb, 10,61,43), .03);
}

/* Indicateur visuel "cliquer pour agrandir" */
.variant-slot:not(.variant-slot--empty) .variant-slot__inner::after {
  content: '';
  position: absolute;
  top: .6rem;
  left: .6rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%236e6b64' stroke-width='1.4'/%3E%3Cpath d='M9 9l3 3' stroke='%236e6b64' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M6 4v4M4 6h4' stroke='%236e6b64' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--tr), transform var(--tr);
  pointer-events: none;
  box-shadow: var(--sh);
  z-index: 2;
}
.variant-slot:not(.variant-slot--empty):hover .variant-slot__inner::after {
  opacity: 1;
  transform: scale(1);
}

/* Nécessite position relative sur l'inner */
.variant-slot__inner { position: relative; }

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
#lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background .28s ease, backdrop-filter .28s ease;
}

#lb-overlay.lb-open {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  pointer-events: all;
}

#lb-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-card);
  box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  max-width: min(96vw, 1000px);
  max-height: 88vh;
  min-width: min(500px, 96vw);
  overflow: hidden;
  opacity: 0;
  transform: scale(.92) translateY(24px);
  transition: opacity .32s cubic-bezier(.34,1.56,.64,1), transform .32s cubic-bezier(.34,1.56,.64,1);
  will-change: transform, opacity;
}

#lb-overlay.lb-open #lb-panel {
  opacity: 1;
  transform: scale(1) translateY(0);
}

#lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 1rem;
}

#lb-name {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
}

#lb-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: all var(--tr);
}
#lb-close:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.1);
}

#lb-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  gap: 1rem;
}

/* Retirer le zoom mobile à l'intérieur de la lightbox */
#lb-body [style*="zoom"] { zoom: 1 !important; }
#lb-body * { zoom: unset; }

#lb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  gap: 1rem;
}

#lb-tag {
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .03em;
}

#lb-hint {
  font-size: .62rem;
  color: var(--subtle);
  letter-spacing: .02em;
  flex-shrink: 0;
}

#lb-hint kbd {
  font-family: monospace;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  padding: .05rem .3rem;
  font-size: .65rem;
  color: var(--text-2);
}

.lb-rotate-hint {
  display: none;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* ── LIGHTBOX MOBILE ── */
@media (max-width: 640px) {
  #lb-overlay {
    padding: 0;
    align-items: flex-end;
  }

  #lb-panel {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    transform: scale(1) translateY(100%);
  }
  #lb-overlay.lb-open #lb-panel {
    transform: scale(1) translateY(0);
  }

  /* Scroll horizontal pour les composants larges (navbars, pricing…) */
  #lb-body {
    overflow-x: auto;
    overflow-y: auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5rem 1.25rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Afficher le hint "tournez votre téléphone" */
  .lb-rotate-hint { display: flex; }
  #lb-hint { display: none; }

  #lb-footer {
    flex-wrap: wrap;
    gap: .375rem;
  }
}

/* ── NAVIGATIONS MOBILES — affichage vertical dans les slots ── */
@media (max-width: 640px) {
  /* Retirer le zoom agressif — réaffichage en vertical centré */
  ._nv-slot { zoom: 1 !important; max-width: 100% !important; }

  /* Conteneurs nav → colonne, centré */
  ._nv-slot nav,
  ._nv-slot .nav,
  ._nv-slot header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .5rem !important;
    height: auto !important;
    padding: .875rem 1rem !important;
  }

  /* Groupes de liens → colonne centrée */
  ._nv-slot ul,
  ._nv-slot .nav__links,
  ._nv-slot [class*="-links"],
  ._nv-slot [class*="-menu"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: .3rem !important;
    width: 100% !important;
  }

  /* Annuler les marges négatives et border-radius pill sur nv3 en colonne */
  ._nv-slot ._nv3 {
    border-radius: var(--r-card) !important;
    margin: 0 !important;
    align-items: center !important;
  }
  ._nv-slot ._nv3-links {
    border-radius: var(--r-input) !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* nv4 logo centré — colonnes full-width centrées */
  ._nv-slot ._nv4-top {
    flex-direction: column !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .875rem 1rem !important;
  }
  ._nv-slot ._nv4-left,
  ._nv-slot ._nv4-right {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Hauteur des slots nav revue */
  [data-elem="navigation"] .variant-slot { min-height: auto !important; max-height: none !important; }
  [data-elem="navigation"] .variant-slot__inner {
    padding: .75rem !important;
    align-items: center !important;
    justify-content: center !important;
  }
}