/* =========================================================================
   SOLEXAM — Feuille de style principale
   Structure : Reset → Variables → Typo → Layout → Composants → Responsive
   ========================================================================= */

/* Skip-link accessibilité (visible au focus clavier uniquement) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 10000;
  background: #D4A830;
  color: #07142A;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.skip-link:focus { left: 12px; outline: 3px solid #07142A; }

/* ── RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }

/* ── VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --navy: #07142A;
  --navy-mid: #0E2247;
  --gold: #D4A830;
  --gold-light: #E8C86A;
  --gold-pale: #FAF3DC;
  --gold-border: rgba(212,168,48,0.25);
  --gold-accessible: #7A5410;  /* WCAG AA 6.77:1 — textes gold sur fond clair uniquement */
  --white: #FAFAF8;
  --offwhite: #F4F2ED;
  --text: #07142A;
  --muted: #5A6478;
  /* V01.035 — Contraste renforcé (retour Vivian 09/08/2026 : contours de
     cases et de champs peu visibles). --border sert aux séparateurs et
     encadrés ; --border-strong aux champs de formulaire (input/select). */
  --border: rgba(7,20,42,0.18);
  --border-strong: rgba(7,20,42,0.35);
  --card-bg: #FFFFFF;

  --asqual: #1A4D2E;
  --asqual-light: #E8F5EE;
  --asqual-border: rgba(26,77,46,0.2);
  --ce: #1D4ED8;
  --ce-light: #EFF6FF;
  --ce-border: #BFDBFE;
  --sb: #B45309;
  --sb-light: #FEF3C7;
  --sb-border: #FDE68A;
  --sb-head: #92400E;
  --pessb: #6D28D9;
  --pessb-light: #F5F3FF;
  --pessb-border: #DDD6FE;
  --pessb-head: #5B21B6;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(7,20,42,0.06);
  --shadow-md: 0 4px 20px rgba(7,20,42,0.08);
  --shadow-lg: 0 20px 60px rgba(7,20,42,0.3);
  --transition: 0.2s ease;
}


/* ── ACCESSIBILITY UTILITIES ─────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  line-height: 1.05;
  font-weight: 400;
}
.mono { font-family: 'DM Mono', 'Courier New', monospace; }

/* ── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--offwhite); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

/* ── LAYOUT UTILS ──────────────────────────────────────────────────────── */
.container { max-width: 1260px; margin: 0 auto; padding: 0 1.5rem; }
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold-accessible);
  margin-bottom: 0.5rem;
}
.section { padding: 4rem 0; }
.section-alt { background: var(--offwhite); }
.section-header { margin-bottom: 2rem; }
.section-title { font-size: clamp(36px, 5vw, 56px); margin-top: 0.5rem; margin-bottom: 1rem; }
.section-desc { color: var(--muted); font-size: 16px; max-width: 560px; line-height: 1.7; }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--offwhite); }
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--offwhite); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-mid); transform: translateY(-1px); }

/* ── NAV ──────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(7,20,42,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition);
}
#nav.scrolled { background: rgba(7,20,42,0.99); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
  color: var(--white);
}
.logo-text em { color: var(--gold-light); font-style: normal; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-light); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.cart-trigger {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-trigger:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.cart-badge {
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
}
.nav-btn {
  background: var(--gold);
  color: var(--navy);
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.nav-btn:hover { background: var(--gold-light); transform: translateY(-1px); }

/* Mobile nav toggle */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  color: var(--white);
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.nav-burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(2) {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* V01.043 — Repli obligatoire avant image-set().
     image-set() non prefixe avec type() n arrive qu avec Chrome 113 et
     Safari 17. Avant, le navigateur juge TOUTE la declaration invalide et
     l abandonne en bloc — donc l image ET les deux degrades. Le titre du
     heros, en #FAFAF8, se retrouvait alors sur le fond clair de la page :
     contraste 1,00:1, texte purement invisible. On declare donc d abord une
     version simple en .jpg, comprise partout, que la version image-set()
     surcharge la ou elle est supportee. */
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(7,20,42,0.55) 80%, rgba(7,20,42,0.85) 100%),
    linear-gradient(90deg, var(--navy) 0%, var(--navy) 38%, rgba(7,20,42,0.78) 60%, rgba(7,20,42,0.55) 100%),
    url('../img/hero-bg.jpg') right center / cover no-repeat;
  background:
    /* V01.001.23 — Dégradé renforcé pour lisibilité texte (côté gauche très sombre)
       + voile global navy en bas pour éliminer la bande visible et garantir le contraste
       sur la rangée des stats */
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(7,20,42,0.55) 80%, rgba(7,20,42,0.85) 100%),
    linear-gradient(90deg, var(--navy) 0%, var(--navy) 38%, rgba(7,20,42,0.78) 60%, rgba(7,20,42,0.55) 100%),
    image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg') type('image/jpeg')) right center / cover no-repeat;
  /* Filet de securite absolu : APRES les raccourcis, sinon ils l ecrasent. */
  background-color: var(--navy);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,168,48,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,48,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  padding: 104px 1.5rem 2.5rem;
  width: 100%;
  /* V01.001.23 — Empêche tout débordement horizontal qui causerait un scroll */
  box-sizing: border-box;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.hero-kicker-line { width: 40px; height: 1px; background: var(--gold); }
.hero-kicker-text {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold-light);
  text-transform: uppercase;
  font-weight: 500;
}
.hero h1 {
  font-size: clamp(56px, 8vw, 108px);
  color: var(--white);
  margin-bottom: 1.5rem;
  max-width: 800px;
}
.hero h1 em { color: var(--gold-light); font-style: normal; display: block; }
.hero-sub {
  color: rgba(255,255,255,0.78); /* V01.001.23 — Contraste renforcé pour lisibilité (était 0.55) */
  font-size: 17px;
  max-width: 520px;
  margin-bottom: 3rem;
  line-height: 1.7;
  font-weight: 300;
  /* V01.001.23 — Léger voile derrière le texte pour garantir lecture sur image */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 5rem; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.18); /* V01.001.23 — bordure plus visible (était 0.08) */
  padding-top: 2rem;
  /* V01.001.23 — Garantit que la grille ne déborde pas et reste alignée */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hero-stat {
  padding: 1.5rem 1rem 1.5rem 0; /* V01.001.23 — padding interne homogène (remplace les overrides inline) */
  border-right: 1px solid rgba(255,255,255,0.15); /* V01.001.23 — bordure plus visible */
  min-width: 0; /* Empêche le débordement quand contenu trop long */
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:not(:first-child) { padding-left: 1rem; }
.hero-stat:last-child { border-right: 0; }
.hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  color: var(--gold-light);
  letter-spacing: 1px;
  /* V01.001.23 — Lisibilité sur image */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.7); /* V01.001.23 — Contraste renforcé (était 0.4) */
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Hero simplifié (page marque, cgv…) */
.page-header {
  background: var(--navy);
  padding: 6rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  /* V01.043 — repli avant image-set() (cf. .hero-bg) */
  background:
    linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), url('../img/hero-bg.jpg') center / cover no-repeat;
  background:
    linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg') type('image/jpeg')) center / cover no-repeat;
  background-color: var(--navy);
}
.page-header-content { position: relative; z-index: 2; }
.page-header h1 {
  font-size: clamp(36px, 5vw, 60px);
  color: var(--white);
  margin-bottom: 0.5rem;
}
.page-header h1 em { color: var(--gold-light); font-style: normal; }
.page-header p {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  max-width: 640px;
  font-weight: 300;
  line-height: 1.7;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.25rem;
}
.breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--transition); }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span { color: rgba(255,255,255,0.55); }

/* ── ASQUAL BANNER ─────────────────────────────────────────────────────── */
.asqual-banner {
  background: linear-gradient(135deg, var(--asqual) 0%, #2A7A4A 100%);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  text-decoration: none;
}
.asqual-banner-left { display: flex; align-items: center; gap: 12px; }
.asqual-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.asqual-text { color: #fff; font-size: 14px; }
.asqual-text strong { display: block; font-size: 15px; margin-bottom: 1px; }
.asqual-badge-main {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
}

/* ── CERTIFICATION PILLS ───────────────────────────────────────────────── */
.asqual-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--asqual-light);
  color: var(--asqual);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: 1px solid var(--asqual-border);
}
.asqual-pill::before { content: '✓'; font-weight: 700; }
.ce-pill {
  display: inline-flex;
  align-items: center;
  background: var(--ce-light);
  color: var(--ce);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px solid var(--ce-border);
}
.standard-pill {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  color: #64748B;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: 1px solid #E2E8F0;
}
.cls-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
}

/* ── BRAND HUB (index) ─────────────────────────────────────────────────── */
.brand-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.5rem;
}
.brand-card {
  background: var(--card-bg);
  /* V01.035 — Détourage visible sans survol (retour Vivian : la carte ne se
     distinguait pas du fond de page) */
  border: 1.5px solid rgba(7, 20, 42, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
  /* V01.008.5 — feedback "cliquable" dès le premier coup d'œil */
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(7, 20, 42, 0.08), 0 1px 3px rgba(7, 20, 42, 0.05);
  position: relative;
}
.brand-card::before {
  /* V01.035 — Liseré doré (couleur du site) visible en permanence */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  opacity: 1;
  transition: opacity var(--transition);
  z-index: 1;
}
.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(7, 20, 42, 0.12), 0 6px 12px rgba(212, 168, 48, 0.08);
  border-color: var(--gold);
}
.brand-card:hover::before { opacity: 1; }
.brand-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.brand-card-head {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.brand-card-head h3 {
  font-size: 30px;
  color: var(--navy);
  margin-bottom: 0.25rem;
  letter-spacing: 2px;
}
.brand-card-head p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.brand-card-status {
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-status-active { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.brand-status-soon { background: var(--offwhite); color: var(--muted); border: 1px solid var(--border); }
.brand-status-unavail { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

.brand-preview {
  position: relative;
  padding: 1rem 1.5rem;
  background: var(--offwhite);
  min-height: 200px;
}
.brand-preview-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.brand-preview-list {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.brand-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.brand-preview-item:last-child { border-bottom: 0; }
.brand-preview-item-ref {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  color: var(--navy);
}
.brand-preview-item-g {
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.brand-preview-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(244,242,237,0.5) 40%,
    rgba(244,242,237,0.9) 75%,
    var(--offwhite) 100%);
  pointer-events: none;
}
.brand-card-cta {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  transition: background var(--transition);
}
.brand-card:hover .brand-card-cta {
  background: #FFFAEC;
}
.brand-card-cta-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.3px;
  transition: color var(--transition);
}
.brand-card:hover .brand-card-cta-text { color: #8A6A17; }
.brand-card-cta-arrow {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  transition: transform var(--transition);
}
.brand-card:hover .brand-card-cta-arrow { transform: translateX(6px); }

/* V01.008.5 — Curseur "not allowed" pour les cartes non cliquables (anon/bientot/indispo) */
.brand-card-anon,
.brand-card-soon,
.brand-card-unavail {
  cursor: default;
}
.brand-card-anon:hover,
.brand-card-soon:hover,
.brand-card-unavail:hover {
  transform: none;
  border-color: var(--border);
}
.brand-card-anon:hover::before,
.brand-card-soon:hover::before,
.brand-card-unavail:hover::before {
  opacity: 0;
}

/* États soon / unavail / anon : opacité réduite pour différencier visuellement */
/* V01.035 — Slots « à venir » : bord pointillé doré
   (retour Vivian 09/08/2026 : les cartes blanches ne se distinguaient pas
   assez des marques actives). S'applique à toutes les familles. */
.brand-card-soon {
  opacity: 1;
  filter: none;
  background: var(--offwhite);
  border: 1.5px dashed rgba(212, 168, 48, 0.55);
  box-shadow: none;
}
.brand-card-soon:hover { opacity: 1; filter: none; }
.brand-card-soon::before { display: none; }
.brand-card-soon .brand-preview { background: transparent; }
.brand-card-soon .brand-card-head { border-bottom-color: rgba(212, 168, 48, 0.3); }
.brand-card-soon .brand-card-cta { border-top-color: rgba(212, 168, 48, 0.3); }
.brand-status-soon { background: #fff; color: var(--gold-accessible); border: 1px solid var(--gold-border); }
.brand-card-unavail { opacity: 0.6; filter: grayscale(0.6); }
.brand-card-unavail:hover { opacity: 0.8; }

/* V01.008.5 — Arrow toujours visible au repos pour cartes actives (pas juste au hover) */
.brand-card:not(.brand-card-soon):not(.brand-card-unavail):not(.brand-card-anon) .brand-card-cta-arrow {
  opacity: 1;
  font-size: 20px;
}
.brand-card-soon .brand-card-cta-arrow,
.brand-card-unavail .brand-card-cta-arrow,
.brand-card-anon .brand-card-cta-arrow {
  display: none;
}

/* ── SPREADSHEET TABLE (catalogue/marque) ──────────────────────────────── */
.sheet-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--card-bg);
  margin-bottom: 2rem;
}
.sheet-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  table-layout: fixed;
}
.sheet-table thead tr.sh-head-gamme th {
  padding: 0;
  background: var(--navy);
}
.sheet-table thead tr.sh-head-gamme th.sh-gamme-label {
  padding: 10px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--gold-light);
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.sh-asqual-head { background: linear-gradient(135deg, #1A4D2E, #2D7A4A) !important; }
.sh-ce-head { background: linear-gradient(135deg, #1D4ED8, #3B82F6) !important; }
.sh-sb-head { background: linear-gradient(135deg, #92400E, #B45309) !important; }
.sh-pessb-head { background: linear-gradient(135deg, #5B21B6, #7C3AED) !important; }

.sheet-table thead tr.sh-head-cols th {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 9px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 2px solid rgba(255,255,255,0.12);
}
.sheet-table thead tr.sh-head-cols th:last-child { border-right: 0; }
.sh-col-fixed {
  min-width: 130px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
}
.sheet-table thead tr.sh-head-cols th.sh-col-fixed { background: var(--navy); }

/* Largeurs minimum colonnes prix (8ᵉ) & actions (9ᵉ) pour éviter les chevauchements */
.sheet-table thead tr.sh-head-cols th:nth-child(9),
.sheet-table tbody td:nth-child(9) {
  min-width: 140px;
  padding-left: 14px;
  padding-right: 14px;
}
.sheet-table thead tr.sh-head-cols th:nth-child(10),
.sheet-table tbody td:nth-child(10) {
  min-width: 160px;
  padding-left: 12px;
  padding-right: 12px;
}

.sheet-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.sheet-table tbody tr:last-child { border-bottom: 0; }
.sheet-table tbody tr:hover { background: #FAFFF8; }
.sheet-table tbody tr.sh-row-ce:hover { background: #F8FBFF; }
.sheet-table tbody tr.sh-row-sb:hover { background: #FFFAF0; }
.sheet-table tbody tr.sh-row-pessb:hover { background: #FAFAFF; }
.sheet-table tbody td {
  padding: 10px;
  vertical-align: middle;
  border-right: 1px solid rgba(7,20,42,0.04);
  font-size: 13px;
}
.sheet-table tbody td:last-child { border-right: 0; }
.sheet-table tbody td.sh-col-fixed {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
}
.sheet-table tbody tr:hover td.sh-col-fixed { background: #FAFFF8; }
.sh-ref {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--asqual);
}
/* V01.001.25 : .sh-ref est un <a> vers la page produit dédiée */
a.sh-ref { text-decoration: none; cursor: pointer; transition: color 0.15s, text-decoration-color 0.15s; }
a.sh-ref:hover, a.sh-ref:focus { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sh-ref-ce { color: var(--ce); }
.sh-ref-sb { color: var(--sb); }
.sh-ref-pessb { color: var(--pessb); }
.sh-val { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--navy); }
.sh-val-bold { font-weight: 600; }
.sh-cert-asqual {
  display: inline-flex;
  align-items: center;
  background: var(--asqual-light);
  color: var(--asqual);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--asqual-border);
  letter-spacing: 0.3px;
}
.sh-cert-asqual::before { content: '✓'; margin-right: 3px; font-weight: 700; }
.sh-cert-ce {
  display: inline-flex;
  align-items: center;
  background: var(--ce-light);
  color: var(--ce);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--ce-border);
}
.sh-cert-sb {
  display: inline-flex;
  background: var(--sb-light);
  color: var(--sb);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--sb-border);
}
.sh-cert-pessb {
  display: inline-flex;
  background: var(--pessb-light);
  color: var(--pessb);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--pessb-border);
}
/* V01.008.9 — Badge ISO (9001, 14001, autre) neutre gris-bleuté */
.sh-cert-iso {
  display: inline-flex;
  background: #EEF2F6;
  color: #3A4962;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #D4DCE6;
}
.sh-price {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--gold-accessible);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.sh-price-from {
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.sh-price-unit {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 1px;
}
.sh-price-devis {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.sh-pdf {
  font-size: 11px;
  color: var(--navy);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--offwhite);
  transition: all var(--transition);
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
}
.sh-pdf:hover { background: var(--navy); color: var(--white); }
.sh-config-btn {
  background: var(--asqual);
  color: #fff;
  border: 0;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--transition);
  white-space: nowrap;
}
.sh-config-btn:hover { background: #0F3620; transform: translateY(-1px); }
.sh-config-btn.active { background: var(--gold); color: var(--navy); }
.sh-config-btn-ce { background: var(--ce); }
.sh-config-btn-ce:hover { background: #1E40AF; }
.sh-config-btn-sb { background: var(--sb); }
.sh-config-btn-sb:hover { background: #92400E; }
.sh-config-btn-pessb { background: var(--pessb); }
.sh-config-btn-pessb:hover { background: var(--pessb-head); }

/* Collapse tables */
.sheet-collapse {
  position: relative;
  max-height: 320px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-radius: var(--radius) var(--radius) 0 0;
}
.sheet-collapse.expanded { max-height: 3000px; }
.sheet-collapse-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--offwhite));
  pointer-events: none;
  transition: opacity 0.3s;
}
.sheet-collapse.expanded .sheet-collapse-fade { opacity: 0; }
.sheet-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--navy);
  border: none;
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 0;
  transition: all var(--transition);
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  position: relative;
  z-index: 5;
}
.sheet-expand-btn:hover {
  background: var(--gold);
  color: var(--navy);
}
.sheet-expand-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform 0.3s ease;
}
.sheet-expand-btn.expanded svg {
  transform: rotate(180deg);
}

/* ── CONFIG DRAWER (inline in table) ───────────────────────────────────── */
.config-row-wrap td { padding: 0 !important; border-right: 0 !important; }
.config-drawer {
  background: var(--gold-pale);
  border-top: 2px solid var(--gold);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.config-field { display: flex; flex-direction: column; gap: 6px; }
.config-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.config-select {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--navy);
  font-size: 13px;
  cursor: pointer;
  min-width: 140px;
  font-family: 'DM Sans', sans-serif;
}
.config-select:focus { outline: none; border-color: var(--gold); }
.config-qty { display: flex; align-items: center; gap: 6px; }
.config-qty-btn {
  width: 32px; height: 32px;
  border-radius: 5px;
  border: 1px solid rgba(7,20,42,0.15);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--navy);
  font-family: 'DM Mono', monospace;
  transition: all var(--transition);
}
.config-qty-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.config-qty-val {
  font-size: 14px;
  font-weight: 500;
  min-width: 26px;
  text-align: center;
  font-family: 'DM Mono', monospace;
}
.config-surface {
  font-size: 12px;
  color: var(--navy);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  white-space: nowrap;
}
.config-add-btn {
  background: var(--asqual);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--transition);
}
.config-add-btn:hover { background: #0F3620; transform: translateY(-1px); }
.config-add-btn-ce { background: var(--ce); }
.config-add-btn-ce:hover { background: #1E40AF; }
.config-cancel {
  background: transparent;
  color: var(--muted);
  padding: 9px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.config-cancel:hover { color: var(--navy); }

/* ═══════ REFONTE TABLEAU GÉOTEXTILES — style « fiche technique / angles vifs » (branche refonte-tableau) ═══════ */
/* 1. Angles vifs — suppression de tous les arrondis */
.sheet-wrap { border-radius: 0; border: 1px solid var(--navy); box-shadow: none; }
.sh-cert-asqual, .sh-cert-ce, .sh-cert-sb, .sh-cert-pessb, .sh-cert-iso { border-radius: 0; }
.classe-badge, .classe-badge-link { border-radius: 0 !important; }
.sh-pdf { border-radius: 0; border: 1px solid var(--border); }
.sh-config-btn { border-radius: 0; }
.config-select, .config-custom-input, .config-add-btn, .config-cancel, .config-qty-btn { border-radius: 0; }
.sheet-expand-btn { border-radius: 0; }

/* 2. En-têtes de colonnes centrés + filet or sous l'en-tête */
.sheet-table thead tr.sh-head-cols th { text-align: center; border-bottom: 2px solid var(--gold); color: rgba(255,255,255,0.72); }
.sheet-table thead tr.sh-head-cols th.sh-col-fixed { text-align: left; }

/* 3. Cellules centrées + colonnes bien délimitées (filets verticaux nets) */
.sheet-table tbody td { text-align: center; border-right: 1px solid var(--border); }
.sheet-table tbody td.sh-col-fixed { text-align: left; }
.sheet-table tbody td:last-child { border-right: 0; }

/* 4. Bouton « + Devis » rectangulaire, mono, technique — et suppression des effets « bondissants » */
.sh-config-btn { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; padding: 6px 12px; }
.sh-config-btn:hover, .config-add-btn:hover { transform: none; }

/* 5. Drawer config : bordure or franche, focus or */
.config-drawer { border-top: 2px solid var(--gold); }
.config-custom-input { border: 1px solid var(--gold) !important; }

/* 6. Jauge à bâtons pour la classe CFGG (remplace le badge arrondi) */
.sh-classe-meter { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; margin-top: 4px; }
.shm-lab { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--navy); white-space: nowrap; }
.shm-bars { display: inline-flex; gap: 2px; }
.shm-bars i { width: 5px; height: 12px; background: var(--border); display: block; }
.shm-bars i.on { background: var(--navy); }
.shm-bars i.hi { background: var(--gold); }
.sh-classe-meter:hover .shm-lab { color: var(--gold-accessible); }
.sh-classe-cell { min-width: 96px; }
/* V01.019.0 — pastille « à x % de la classe N » (CBR certifié juste sous un seuil) */
.sh-classe-near { display: block; font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1.25; letter-spacing: 0; color: var(--gold-accessible); white-space: normal; max-width: 92px; margin: 3px auto 0; text-align: center; cursor: help; }
.pp-classe-near { display: inline-block; font-size: 12px; color: var(--gold-accessible); margin-left: 6px; cursor: help; white-space: nowrap; }
.sh-gamme-tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 3px; opacity: 0.92; }

/* 7. En-têtes de colonnes triables (curseur + caret or) */
.sheet-table thead tr.sh-head-cols th.sh-sortable { cursor: pointer; }
.sheet-table thead tr.sh-head-cols th.sh-sortable:hover { color: #fff; }
.sh-sort-caret { color: var(--gold); font-weight: 700; }

/* 8. Barre de filtre par classe — cohérente avec cert/gamme, angles vifs */
.classe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; }
.classe-bar-label { font-size: 11px; color: var(--muted); font-weight: 500; margin-right: 4px; text-transform: uppercase; letter-spacing: 1px; }
.classe-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); font-size: 12px; cursor: pointer; background: var(--card-bg); color: var(--navy); transition: all var(--transition); font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.classe-chip:hover { border-color: var(--navy); }
.classe-chip.classe-active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; box-shadow: 0 2px 8px rgba(7,20,42,0.25); }
/* Angles vifs sur toute la rangée de filtres (cohérence datasheet) */
.brand-chip, .cert-chip, .gamme-btn, .classe-chip { border-radius: 0; }

/* 9. Boutons d'action empilés : PDF + comparateur en haut, « + Devis » pleine largeur dessous
   → colonne étroite, pas de scroll horizontal inutile sur PC. */
.sh-actions-cell .sh-config-btn { flex: 1 0 100%; }
.sx-cmp-btn { border-radius: 0 !important; }
.sheet-table thead tr.sh-head-cols th:nth-child(10),
.sheet-table tbody td.sh-actions-cell { min-width: 112px; }

/* 10. Prix « à partir de » empilé → « à partir de » sur sa ligne, puis la valeur.
   Garde la notion de seuil et évite le débordement sur la colonne Fiche & Devis. */
.sh-price-cell .sh-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; white-space: normal; gap: 0 4px; }
.sh-price-cell .sh-price-from { flex-basis: 100%; text-align: center; }

/* ── CART MODAL ────────────────────────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,20,42,0.6);
  z-index: 2000;
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cart-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 76px 1.5rem 1.5rem;
}
.cart-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
/* Mobile/tablette (< 900px, panneau 1 colonne) : le contenu doit pouvoir
   défiler à l'intérieur du panneau — sans cette règle, tout ce qui dépasse
   la hauteur de l'écran est coupé et inaccessible. Le layout 2 colonnes
   desktop (media query ci-dessous) redéfinit son propre défilement. */
.cart-body-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Layout 2 colonnes sur desktop : liste à gauche, formulaire à droite */
@media (min-width: 900px) {
  .cart-overlay.open {
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .cart-panel {
    max-width: 960px;
    max-height: calc(100vh - 4rem);
  }
  .cart-body-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .cart-body {
    border-right: 1px solid var(--border);
    background: var(--white);
  }
  .cart-foot {
    background: var(--offwhite);
    max-height: none !important;
    overflow-y: auto;
    border-top: 0 !important;
  }
  .cart-foot .cart-note {
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--white);
    border-radius: 6px;
    border-left: 3px solid var(--gold);
  }
}
.cart-head {
  background: var(--navy);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.cart-head h3 {
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
}
.cart-close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}
.cart-close:hover { color: var(--white); }
.cart-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-size: 14px;
}
.cart-empty-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 1rem;
  opacity: 0.3;
}
.cart-item {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  position: relative;
}
.cart-item:last-child { border-bottom: 0; }
.cart-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
  padding-right: 30px;
}
.cart-item-detail {
  font-size: 12px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  margin-bottom: 4px;
}
.cart-item-price {
  font-size: 13px;
  color: var(--gold-accessible);
  font-weight: 500;
}
.cart-item-badge {
  display: inline-block;
  background: var(--gold-pale);
  color: var(--navy);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 6px;
  border: 1px solid rgba(212,168,48,0.3);
  vertical-align: middle;
}
.cart-item-del {
  position: absolute;
  top: 1rem;
  right: 0;
  background: none;
  border: 0;
  color: rgba(7,20,42,0.5);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: color 0.15s;
  padding: 4px 8px;
}
.cart-item-del:hover { color: #DC2626; }
.cart-foot {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align: center;
}
.cart-submit {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: 0;
  padding: 13px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'DM Sans', sans-serif;
}
.cart-submit:hover { background: var(--gold-light); transform: translateY(-1px); }
.cart-clear {
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 10px;
  margin-top: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: color var(--transition);
}
.cart-clear:hover { color: #DC2626; }
.cart-form-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.cart-form-section label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.cart-form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
}
.cart-form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,168,48,0.35); }
/* V01.043 — Deux corrections sur la grille du formulaire de devis.

   1) « minmax(0, 1fr) » et non « 1fr ». Un « 1fr » a pour largeur MINIMALE le
      contenu de sa colonne : le champ le plus large imposait sa taille et
      ecrasait son voisin. Mesure a 375 px : colonnes de 60 px et 233 px, et
      c'est le champ EMAIL — obligatoire, celui dont depend toute la demande —
      qui heritait des 60 px. Saisir une adresse la-dedans est decourageant.

   2) « 1 / -1 » et non « 1 / 3 » pour les champs pleine largeur. Avec « 1 / 3 »
      ils reclament une deuxieme colonne ; quand la regle mobile ci-dessous
      reduit la grille a une seule colonne, la grille en recree une implicite
      pour les satisfaire — et le passage en colonne unique ne se produisait
      jamais. « -1 » designe la derniere colonne reellement definie, quel que
      soit leur nombre. */
.cart-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cart-form-grid .cf-full { grid-column: 1 / -1; }
.cart-form-grid .cf-field { display: flex; flex-direction: column; }
.cart-form-grid .cart-form-input { margin-bottom: 0; }
.cart-form-grid label { margin-bottom: 3px; }
/* Seuil releve de 380 a 560 px : a 430 px (grands telephones), deux colonnes
   laissaient encore une centaine de pixels au champ EMAIL. Un formulaire
   empile est plus long, jamais plus difficile.
   On en profite pour agrandir les commandes du panier : « modifier » ne
   mesurait que 19 px de haut, les croix de suppression 30 a 32 px. */
@media (max-width: 560px) {
  .cart-form-grid { grid-template-columns: 1fr; }
  .cart-close,
  .cart-item-del { min-width: 44px; min-height: 44px; }
  .cart-item-edit,
  .cart-item-name + div button { min-height: 32px; padding: 6px 4px; }
}

/* ── FEATURES ──────────────────────────────────────────────────────────── */
.features-section { background: var(--navy); color: var(--white); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.feat {
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.feat:hover { border-color: var(--gold-border); background: rgba(255,255,255,0.02); }
.feat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: rgba(212,168,48,0.55);
  line-height: 1;
  margin-bottom: 1rem;
}
.feat-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--white);
}
.feat-text {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  font-weight: 300;
}
.feat-highlight {
  display: inline-block;
  background: rgba(212,168,48,0.1);
  border: 1px solid var(--gold-border);
  color: var(--gold-light);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 0.75rem;
  font-family: 'DM Mono', monospace;
}

/* ── PROCESS ───────────────────────────────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), var(--gold-border), transparent);
  z-index: 0;
}
.process-step {
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.process-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 2px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--gold);
  margin: 0 auto 1.25rem;
}
.process-title { font-size: 14px; font-weight: 500; margin-bottom: 0.5rem; }
.process-text { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Nota optimisation commandes groupées sous timeline */
.process-nota {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(212, 168, 48, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.process-nota-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.5;
}
.process-nota-text {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  opacity: 0.9;
}
.process-nota-text strong {
  color: var(--gold-light);
  font-weight: 500;
}

/* ── CONTACT ───────────────────────────────────────────────────────────── */
.contact-section { background: var(--navy-mid); padding: 4rem 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.contact-info h2 {
  font-size: clamp(36px, 5vw, 54px);
  color: var(--white);
  margin-bottom: 1rem;
}
.contact-info p {
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 300;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin-bottom: 10px;
}
.contact-detail strong { color: var(--gold-light); }
.contact-detail a { color: inherit; text-decoration: none; }
.contact-detail a:hover { color: var(--gold-light); }

/* Blocs Contact : équipe valorisée + zone de couverture */
.contact-block {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
}
.contact-block-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold-light);
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.contact-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.contact-member:last-child { border-bottom: none; }
.contact-member-name {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
}
.contact-member-tel {
  color: var(--gold-light);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.contact-member-tel:hover { color: var(--gold-accessible); }
.contact-zone-item {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  line-height: 1.6;
  padding: 3px 0;
}
.contact-zone-item strong {
  color: var(--gold-light);
  font-weight: 500;
}
.form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.form-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.05);
  color: var(--white);
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  transition: border-color var(--transition);
}
.form-input::placeholder { color: rgba(255,255,255,0.55); }
.form-input:focus { outline: none; border-color: var(--gold); }
/* Listes deroulantes du formulaire de l accueil (fond marine).
   Le <select> herite de color:var(--white), indispensable a l etat ferme.
   Mais la liste native des <option> s affiche sur un fond CLAIR : le texte
   blanc y devenait illisible (signale le 12/08/2026).
   Deux mecanismes complementaires selon les navigateurs :
   - color-scheme:dark fait rendre la liste native en sombre (Chrome, Edge,
     Firefox recents) — coherent avec le formulaire ;
   - les couleurs explicites sur option couvrent les navigateurs qui
     ignorent color-scheme mais honorent le style des options. */
select.form-input {
  color-scheme: dark;
  cursor: pointer;
}
select.form-input option,
select.form-input optgroup {
  background-color: var(--navy-mid);
  color: var(--white);
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-submit {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: 0;
  padding: 13px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--transition);
  margin-top: 4px;
}
.form-submit:hover { background: var(--gold-light); transform: translateY(-1px); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
footer { background: #050E1F; padding: 3rem 0 1.5rem; color: rgba(255,255,255,0.55); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.footer-brand .logo { display: flex; margin-bottom: 0.75rem; }
.footer-brand p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 260px;
  font-weight: 300;
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-family: 'DM Sans', sans-serif;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-admin-trigger {
  background: rgba(212,168,48,0.1);
  border: 1px solid rgba(212,168,48,0.35);
  color: var(--gold-light);
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all var(--transition);
  letter-spacing: 1.5px;
}
.footer-admin-trigger:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* ── SPEC CARDS (fiches techniques) ────────────────────────────────────── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.spec-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.spec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.spec-card-head {
  background: var(--navy);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.spec-card-head-ce { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.spec-cls {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--white);
  letter-spacing: 2px;
}
.spec-meta { text-align: right; }
.spec-gramm {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--gold-light);
}
.spec-gramm-ce { color: rgba(255,255,255,0.9); }
.spec-body { padding: 1.25rem 1.5rem; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.spec-row:last-child { border-bottom: 0; }
.spec-key { color: var(--muted); }
.spec-val {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  text-align: right;
}
.spec-dl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  color: var(--gold-accessible);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  transition: color var(--transition);
}
.spec-dl:hover { color: var(--navy); }

/* ── FILTER BARS ───────────────────────────────────────────────────────── */
.filter-bar-wrap { background: var(--card-bg); padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 1rem; }
.brand-bar, .cert-bar, .gamme-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.brand-bar-label, .cert-bar-label, .gamme-bar-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.brand-chip, .cert-chip, .gamme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--navy);
  transition: all var(--transition);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.brand-chip:hover, .cert-chip:hover, .gamme-btn:hover {
  border-color: var(--navy);
}
.brand-chip.brand-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.cert-chip.cert-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.gamme-btn.gamme-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* V01.001.02 — Amplification visuelle du chip marque actif (cascade) :
   le bouton passe en gras, reçoit une petite ombre, et le dot de couleur
   marque ressort avec une bordure blanche. Même traitement pour cert/gamme
   pour homogénéiser toute la rangée de filtres. */
.brand-chip.brand-active,
.cert-chip.cert-active,
.gamme-btn.gamme-active {
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(7, 20, 42, 0.25);
}
.brand-chip.brand-active .brand-dot {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
  width: 9px;
  height: 9px;
}

/* Les chips de la barre cert qui deviennent non-pertinents après sélection
   d'une marque sont masqués via style.display=none (JS). On prévoit aussi
   une variante "disabled" au cas où on voudrait les garder visibles mais
   grisés dans une itération ultérieure. */
.brand-chip[data-disabled="true"],
.cert-chip[data-disabled="true"],
.gamme-btn[data-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.brand-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.gamme-icon {
  width: 18px; height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.gamme-count {
  font-size: 11px;
  opacity: 0.6;
  font-family: 'DM Mono', monospace;
  margin-left: 3px;
}

/* ── TOAST ─────────────────────────────────────────────────────────────── */
.save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 3000;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── TABS ──────────────────────────────────────────────────────────────── */
.tabs-bar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 68px;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(7,20,42,0.06);
}
.tabs-inner {
  display: flex;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.tab-btn {
  padding: 0.85rem 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.15s;
  font-weight: 500;
}
.tab-btn.active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-btn:hover:not(.active) { color: var(--navy); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── GAMME HEADER ──────────────────────────────────────────────────────── */
.gamme-section {
  margin-bottom: 2.5rem;
}
.gamme-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.gamme-section-header h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-top: 0.2rem;
  margin-bottom: 0.25rem;
}
.gamme-section-header p {
  font-size: 13px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.6;
}
.gamme-badge-asqual {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--asqual-light);
  border: 1px solid var(--asqual-border);
  color: var(--asqual);
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── CGV / LEGAL PAGES ─────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.legal-wrap h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 0.5rem; color: var(--navy); }
.legal-wrap .legal-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.legal-wrap h2 {
  font-size: 22px;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.2px;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.legal-wrap h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-wrap h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 1.5rem 0 0.5rem;
  letter-spacing: 0;
}
.legal-wrap p, .legal-wrap li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.legal-wrap ul, .legal-wrap ol { margin: 0.5rem 0 1rem 1.5rem; }
.legal-wrap .legal-infobox {
  background: var(--offwhite);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}
.legal-wrap .legal-identity {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
.legal-wrap .legal-identity dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0.5rem 1rem;
  font-size: 13px;
}
.legal-wrap .legal-identity dt { color: var(--muted); font-weight: 500; }
.legal-wrap .legal-identity dd { color: var(--navy); }
.legal-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2rem;
  transition: all var(--transition);
}
.legal-pdf-link:hover { background: var(--gold); color: var(--navy); transform: translateY(-1px); }

/* Table of contents pour CGV */
.legal-toc {
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 3rem;
}
.legal-toc h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.legal-toc ol {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  list-style: none;
  padding: 0;
}
.legal-toc ol li {
  font-size: 13px;
  padding: 3px 0;
  margin: 0;
  break-inside: avoid;
}
.legal-toc a { color: var(--navy); text-decoration: none; }
.legal-toc a:hover { color: var(--gold-accessible); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .process-grid::before { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .legal-wrap .legal-identity dl { grid-template-columns: 1fr; }
  .legal-wrap .legal-identity dt { margin-top: 0.5rem; }
  .legal-toc ol { columns: 1; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .features-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; }
  .hero-btns .btn { flex: 1; justify-content: center; }
  .spec-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cart-overlay.open { padding: 76px 0.5rem 0.5rem; }
  .brand-hub { grid-template-columns: 1fr; }
  .asqual-banner { padding: 1rem; }
  .asqual-badge-main { display: none; }
  .config-drawer { gap: 0.75rem; }
  .config-field { width: 100%; }
  .config-select { width: 100%; }
  /* V01.003 — Menu mobile avec burger */
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    gap: 0 !important;
    background: var(--navy);
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.3);
  }
  .nav-links.open {
    display: flex !important;
  }
  .nav-links li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    width: 100%;
  }
  .nav-links li:last-child {
    border-bottom: 0;
  }
  .nav-links a {
    display: block;
    padding: 14px 1.5rem;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
  }
  .nav-links a:hover, .nav-links a.active {
    background: rgba(212,168,48,0.08);
    color: var(--gold-light);
  }

}

/* Print — pour les CGV imprimables */
@media print {
  #nav, footer, .nav-btn, .cart-trigger, .footer-admin-trigger, .legal-pdf-link { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .page-header { background: #fff; color: #000; padding: 1rem 0; }
  .page-header h1 { color: #000; }
  .legal-wrap { max-width: 100%; padding: 1rem; }
  .legal-wrap h2 { page-break-after: avoid; }
  .legal-wrap p, .legal-wrap li { page-break-inside: avoid; }
}

/* ── BADGES CLASSE CFGG ─────────────────────────────────────── */
.sh-classe-wrap {
  margin-top: 4px;
  display: flex;
  justify-content: center;
}
.classe-badge-link {
  text-decoration: none;
  display: inline-block;
}
.classe-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 10px;
  background: var(--gold-pale);
  color: var(--navy);
  border: 0.5px solid var(--gold-border);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.classe-badge-link:hover .classe-badge {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
/* Gradation classes 1 → 8 (V01.006 : couleurs opaques, texte navy lisible sur toutes) */
.classe-badge.classe-1 { background: #FAF3DC; color: var(--navy); border-color: #F0E4B8; }
.classe-badge.classe-2 { background: #F4E8B8; color: var(--navy); border-color: #E8D688; }
.classe-badge.classe-3 { background: #EDD98E; color: var(--navy); border-color: #DCC366; }
.classe-badge.classe-4 { background: #E4C968; color: var(--navy); border-color: #CEAF48; }
.classe-badge.classe-5 { background: #DAB842; color: var(--navy); border-color: #BE9E2E; }
.classe-badge.classe-6 { background: #C9A42A; color: var(--navy); border-color: #A88A1E; }
.classe-badge.classe-7 { background: #A88A1E; color: #FFFFFF; border-color: #8B6F14; }
.classe-badge.classe-8 { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.classe-badge.classe-hors {
  background: #F4F2ED;
  border-color: #D4D1CB;
  color: #5A5751;
  font-style: italic;
}

/* ── WIZARD : CARTE RÉCAP PÉDAGOGIQUE + SEUILS APPLIQUÉS + BOUTON VALIDATION ─── */

.recap-pedago {
  background: #FDF9EE;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--navy);
}
.recap-pedago-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.recap-pedago-title {
  color: #8a6d20;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 500;
  text-transform: uppercase;
}
.recap-pedago-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 14px;
  margin-bottom: 14px;
}
.recap-box {
  background: #fff;
  border: 0.5px solid var(--gold-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.recap-box-label {
  color: #8a8a8a;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.recap-box-main {
  color: var(--navy);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
}
.recap-box-main-small { font-size: 16px; }
.recap-box-sub {
  color: #888;
  font-size: 12px;
  margin-top: 4px;
}
.recap-conseil {
  background: rgba(212, 168, 48, 0.1);
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 10px;
}
.recap-conseil-label {
  color: #8a6d20;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.recap-conseil-text {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
}
.recap-conseil-text strong { color: #8a6d20; }
.recap-alertes {
  background: #FFF6DA;
  border: 1px dashed var(--gold);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #8a6d20;
  line-height: 1.5;
  margin-bottom: 10px;
}
.recap-alertes strong { color: #4F3A00; }

/* V01.001.16 — Encarts pédagogiques classes de conséquence + coefficients appliqués */
.recap-cc-explain {
  background: #F4F8FB;
  border: 1px solid #DCE7F0;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 10px;
}
.recap-cc-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--navy);
  margin-bottom: 6px;
}
.recap-cc-text { font-size: 12px; color: var(--muted); }
.recap-cc-text strong { color: var(--navy); }
.cc-pill {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
  color: #fff;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
.cc-pill.cc-cc1 { background: #2E7D32; }   /* vert sombre — conséquences faibles */
.cc-pill.cc-cc2 { background: #1565C0; }   /* bleu — conséquences moyennes */
.cc-pill.cc-cc3 { background: #C62828; }   /* rouge sombre — conséquences élevées */

.recap-coefs-explain {
  background: #FFFBE6;
  border: 1px dashed #D4A830;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  color: #6B5A14;
  line-height: 1.6;
  margin-bottom: 10px;
}
.recap-coefs-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4F3A00;
  margin-bottom: 4px;
}
.recap-coefs-text { color: #5A4A0F; }
.recap-coefs-text strong { color: #2D2200; }

/* V01.001.16 — Badge CC dans les titres de colonnes résultats */
.results-col h3 .cc-badge {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  color: #fff;
  letter-spacing: 0.5px;
  vertical-align: middle;
  cursor: help;
}
.results-col h3 .cc-badge.cc-cc1 { background: #2E7D32; }
.results-col h3 .cc-badge.cc-cc2 { background: #1565C0; }
.results-col h3 .cc-badge.cc-cc3 { background: #C62828; }

.recap-validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dashed var(--gold);
  margin-top: 12px;
}
.recap-validation-info { flex: 1; }
.recap-validation-info strong {
  color: var(--navy);
  font-weight: 500;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}
.recap-validation-info span {
  color: #888;
  font-size: 11px;
}
.recap-validation-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  font-family: inherit;
}
.recap-validation-btn:hover { background: var(--gold); color: var(--navy); }
.recap-disclaimer {
  text-align: center;
  color: #a08a56;
  font-size: 10.5px;
  font-style: italic;
  margin-top: 8px;
}

/* Bloc SEUILS APPLIQUÉS en tête de colonne */
.seuils-box {
  background: #FDF9EE;
  border-top: 2px solid var(--gold);
  border-bottom: 0.5px solid rgba(212,168,48,0.35);
  padding: 10px 12px;
  margin: 0;
  box-sizing: border-box;
}
.seuils-title {
  color: #8a6d20;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(212,168,48,0.4);
  text-transform: uppercase;
}
.seuils-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #2C2C2A;
}
.seuils-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.seuils-key {
  color: #5F5E5A;
  font-size: 10px;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.seuils-val {
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}
.seuils-info {
  text-align: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212,168,48,0.4);
}
.seuils-info a {
  color: #8a6d20;
  font-size: 10px;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.seuils-info a:hover { text-decoration: underline; }

/* Badge colonne recommandée */
.col-recommended {
  border: 2px solid #378ADD !important;
  position: relative;
}
.col-reco-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: #378ADD;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 0 0 4px 4px;
  z-index: 2;
}

/* Footer disclaimer wizard */
.wizard-footer-disclaimer {
  margin: 3rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(212, 168, 48, 0.04);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}
.wizard-footer-disclaimer strong {
  display: block;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 6px;
}

/* ── PANIER VIDE : MINI GUIDE (Option C hybride) ─────────────────── */
.cart-empty-guide {
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-empty-intro {
  margin-bottom: 8px;
  text-align: left;
}
.cart-empty-intro strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.cart-empty-intro span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.cart-empty-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  cursor: pointer;
}
.cart-empty-action:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
  transform: translateX(2px);
}
.cart-empty-action-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-empty-action-text {
  flex: 1;
  min-width: 0;
}
.cart-empty-action-text strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}
.cart-empty-action-text span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.cart-empty-action-arrow {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 16px;
  font-weight: 400;
  transition: transform 0.15s ease;
}
.cart-empty-action:hover .cart-empty-action-arrow {
  transform: translateX(3px);
}
.cart-empty-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.cart-empty-or::before,
.cart-empty-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cart-empty-or span {
  padding: 0 4px;
  font-style: italic;
}
.cart-empty-freehand {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  padding: 0 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   V01.003 — Landing pages par usage (SEO Niveau 2)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumbs landing pages (fil d'ariane structuré Schema.org) ──── */
/* Sélecteur .lp-breadcrumb pour ne pas interférer avec les breadcrumbs
   existants des pages principales qui utilisent class="breadcrumb" inline. */
.lp-breadcrumb {
  background: var(--gold-pale);
  border-bottom: 1px solid var(--gold-border);
  padding: 0.5rem 0;
  font-size: 13px;
  margin-top: 0;
}
.lp-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
}
.lp-breadcrumb-list li { display: flex; align-items: center; gap: 8px; }
.lp-breadcrumb-list li:not(:last-child)::after {
  content: '›';
  color: var(--gold);
  font-weight: 700;
}
.lp-breadcrumb-list a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition);
}
.lp-breadcrumb-list a:hover { color: var(--gold-accessible); text-decoration: underline; }
.lp-breadcrumb-list li[aria-current="page"] {
  color: var(--muted);
  font-weight: 500;
}

/* ── Landing page — hero usage ────────────────────────────────────────── */
.lp-hero {
  /* V01.043 — repli avant image-set() (cf. .hero-bg) */
  background: linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), url('../img/hero-bg.jpg') center / cover no-repeat;
  background: linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg') type('image/jpeg')) center / cover no-repeat;
  background-color: var(--navy);
  color: var(--white);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.lp-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(212,168,48,0.12), transparent 60%);
  pointer-events: none;
}
.lp-hero-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.lp-hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 1px;
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--white);
}
.lp-hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  max-width: 720px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}
.lp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 13px;
}
.lp-hero-meta strong {
  color: var(--gold-light);
  font-family: 'DM Mono', monospace;
  font-weight: 600;
}

/* ── Section pédagogique ──────────────────────────────────────────────── */
.lp-pedago {
  padding: 3rem 0;
  background: var(--offwhite);
}
.lp-pedago-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.lp-pedago-card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.lp-pedago-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 0.75rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
}
.lp-pedago-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
/* V01.019.0 — carte cliquable (catégories SNCF A0 / A1 / A2S de la page ferroviaire) */
a.lp-pedago-card { display: block; color: inherit; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; }
a.lp-pedago-card:hover, a.lp-pedago-card:focus-visible { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(212, 168, 48, 0.5); }
a.lp-pedago-card .lp-more { display: inline-block; margin-top: 0.85rem; color: var(--gold-accessible); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }

/* ── Produits ─────────────────────────────────────────────────────────── */
.lp-products-section {
  padding: 3rem 0;
}
.lp-products-section h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.lp-products-section .lp-count-line {
  color: var(--muted);
  margin-bottom: 2rem;
  font-size: 14px;
}
.lp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.lp-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lp-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 24px -12px rgba(7,20,42,0.15);
}
.lp-card-head .lp-card-ref {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--navy);
  line-height: 1.2;
}
.lp-card-gamme {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.lp-card-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--gold-pale);
  border-radius: 6px;
  border: 1px solid var(--gold-border);
}
.lp-spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lp-spec-label {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.lp-spec strong {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--navy);
  font-weight: 600;
}
.lp-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lp-badge-cls {
  background: var(--navy);
  color: var(--gold-light);
}
.lp-badge-dur {
  background: var(--gold-pale);
  color: var(--gold-accessible);
  border: 1px solid var(--gold-border);
}
.lp-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.lp-btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.lp-btn-primary {
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
}
.lp-btn-primary:hover { background: var(--navy-mid); }
.lp-btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.lp-btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold-accessible);
}
.lp-loading, .lp-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--offwhite);
  border-radius: var(--radius);
}

/* ── FAQ usage ────────────────────────────────────────────────────────── */
.lp-faq {
  padding: 3rem 0;
  background: var(--offwhite);
}
/* Titre d'une section FAQ : le clamp 36-56px de .section-title est trop
   imposant au-dessus d'une liste de questions. On s'aligne sur les 32px
   utilises par les pages application, sans style en ligne et sans creer
   une variante de composant supplementaire. */
.lp-faq .section-title {
  font-size: clamp(26px, 3.2vw, 32px);
  margin-bottom: 1.5rem;
}
.lp-faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.lp-faq-item summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 500;
  color: var(--navy);
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lp-faq-item summary::after {
  content: '+';
  font-size: 24px;
  color: var(--gold);
  transition: transform var(--transition);
}
.lp-faq-item[open] summary::after {
  content: '−';
  transform: rotate(0deg);
}
.lp-faq-item-body {
  padding: 0 1.25rem 1rem;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

/* ── CTA devis bloc ───────────────────────────────────────────────────── */
.lp-cta {
  padding: 3rem 0;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.lp-cta h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  margin: 0 0 1rem;
  color: var(--white);
}
.lp-cta p {
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: rgba(255,255,255,0.85);
}
.lp-cta .btn {
  margin: 0 0.5rem;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-hero { padding: 3rem 0 2rem; }
  .lp-hero h1 { font-size: 44px; }
  .lp-hero-subtitle { font-size: 16px; }
  .lp-products-grid { grid-template-columns: 1fr; }
  .lp-card-specs { grid-template-columns: repeat(2, 1fr); }
  .lp-breadcrumb { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V01.004 — Filtre marque dans le wizard (Quel géotextile choisir ?)
   ═══════════════════════════════════════════════════════════════════════════ */
.brand-filter-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px -4px rgba(7,20,42,0.08);
}
.brand-filter-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.brand-filter-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
}
.brand-filter-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.brand-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  --chip-accent: var(--gold);
}
.brand-chip:hover {
  border-color: var(--chip-accent);
  background: var(--gold-pale);
  transform: translateY(-1px);
}
.brand-chip-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.brand-chip-active:hover {
  background: var(--navy-mid);
  color: var(--white);
}
.brand-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(212,168,48,0.15);
  color: var(--gold-accessible);
  font-size: 11px;
  font-weight: 600;
  font-family: 'DM Mono', monospace;
}
.brand-chip-active .brand-chip-count {
  background: rgba(212,168,48,0.25);
  color: var(--gold-light);
}

/* Mobile */
@media (max-width: 640px) {
  .brand-filter-wrap {
    padding: 0.75rem 1rem;
  }
  .brand-filter-header {
    flex-direction: column;
    gap: 4px;
  }
  .brand-filter-hint {
    font-size: 11px;
  }
  .brand-chip {
    font-size: 12px;
    padding: 6px 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V01.004 — Brand Activator (hub admin + wizard activation)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hub grid (admin.html) ────────────────────────────────────────────── */
.admin-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.admin-hub-loading {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--offwhite);
  border-radius: var(--radius);
}

.activator-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: all 0.2s ease;
}
.activator-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
  border-color: var(--gold);
}
.activator-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.activator-card-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--navy);
}
.activator-card-name-muted { color: var(--muted); }
.activator-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.activator-card-meta {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 1rem;
}
.activator-card-cta {
  color: var(--gold-accessible);
  font-size: 13px;
  font-weight: 500;
}
.activator-card-cta-action {
  color: var(--gold-accessible);
  font-weight: 600;
}
.activator-card-active {
  border-left: 3px solid var(--gold);
}
.activator-card-slot {
  background: var(--offwhite);
  border: 1px dashed var(--border);
}
.activator-card-slot:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  border-style: solid;
}

.activator-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 1px;
  font-weight: 600;
}
.activator-badge-active {
  background: #DCFCE7;
  color: #166534;
}
.activator-badge-slot {
  background: var(--gold-pale);
  color: var(--gold-accessible);
  border: 1px solid var(--gold-border);
}

/* ── Modal d'activation (wizard) ──────────────────────────────────────── */
.activator-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 20, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: activatorFadeIn 0.2s ease;
}
@keyframes activatorFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.activator-modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg, 12px);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.4);
  animation: activatorSlideUp 0.25s ease;
}
@keyframes activatorSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.activator-modal-head {
  padding: 1.25rem 1.5rem;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--gold);
}
.activator-modal-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1.5px;
  margin: 0;
  color: var(--white);
}
.activator-modal-head h2 strong {
  color: var(--gold-light);
  text-transform: lowercase;
  font-weight: normal;
}
.activator-modal-head-success {
  background: #166534;
}
.activator-modal-close {
  background: none;
  border: 0;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s;
}
.activator-modal-close:hover { background: rgba(255,255,255,0.15); }

.activator-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.activator-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.activator-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.activator-section h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.activator-section-legal {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
  padding: 1.25rem;
  border-bottom: 0;
}
.activator-section-legal h3 {
  color: #92400E;
  border-bottom-color: #92400E;
}
.activator-section-server {
  background: #E0F2FE;
  border: 1px solid #7DD3FC;
  border-radius: var(--radius);
  padding: 1rem;
}
.activator-section-disabled {
  background: #F3F4F6;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  opacity: 0.65;
}

.activator-field {
  margin-bottom: 0.85rem;
}
.activator-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
}
.activator-field input[type="text"],
.activator-field input[type="email"],
.activator-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--navy);
  background: var(--card-bg);
  transition: border-color 0.15s;
}
.activator-field input:focus,
.activator-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,168,48,0.1);
}
.activator-field input[readonly] {
  background: var(--offwhite);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
}
.activator-field input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.activator-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.activator-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}
.activator-hint-dim {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.activator-checkbox-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.activator-checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  margin: 0;
}
.activator-checkbox-group input[type="checkbox"] {
  margin: 0;
}

.activator-field-check .activator-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
  cursor: pointer;
}
.activator-field-check input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--gold);
}
.activator-legal-text {
  font-size: 12px;
  color: #92400E;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.activator-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.activator-btn-export {
  margin: 0.5rem 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.activator-error {
  padding: 1.5rem;
  background: #FEE2E2;
  color: #991B1B;
  border-radius: var(--radius);
  border: 1px solid #FCA5A5;
}

/* Mobile */
@media (max-width: 640px) {
  .activator-modal {
    max-height: 95vh;
  }
  .activator-modal-head { padding: 1rem; }
  .activator-modal-head h2 { font-size: 20px; }
  .activator-modal-body { padding: 1rem; }
  .activator-field-row { grid-template-columns: 1fr; }
  .activator-modal-actions { flex-direction: column-reverse; }
  .activator-modal-actions .btn { width: 100%; }
  .activator-card-name { font-size: 24px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V01.006 — Pages slot universelles (marque-slot2..slot6.html)
   Écran d'attente affiché si status=bientot, masqué si status=active
   ═══════════════════════════════════════════════════════════════════════════ */

.slot-waiting {
  position: relative;
  min-height: calc(100vh - 68px - 380px); /* déduction nav + footer */
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem;
  overflow: hidden;
  color: #fff;
}
.slot-waiting-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,168,48,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,168,48,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #07142A 0%, #0F2745 50%, #07142A 100%);
  z-index: -1;
}
.slot-waiting-inner {
  max-width: 640px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.slot-waiting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 1.5rem;
  color: var(--gold);
  opacity: 0.75;
  background: rgba(212,168,48,0.08);
  border: 1px solid rgba(212,168,48,0.25);
  border-radius: 50%;
}
.slot-waiting-tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A5410;
  background: rgba(212,168,48,0.1);
  border: 1px solid rgba(212,168,48,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}
.slot-waiting-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5.5vw, 56px);
  letter-spacing: 3px;
  margin: 0 0 1rem;
  color: #fff;
}
.slot-waiting-text {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  margin: 0 auto 2rem;
}
.slot-waiting-text strong {
  color: var(--gold-light);
  font-weight: 600;
}
.slot-waiting-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.slot-waiting-debug {
  margin: 2.5rem 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
}

/* Bouton "outline light" utilisé dans l'écran d'attente */
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-1px);
}

/* État vide pour marque active sans gammes/produits */
.slot-empty-state {
  padding: 4rem 2rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 12px);
  margin: 2rem auto;
  max-width: 600px;
}
.slot-empty-state h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 1rem;
}
.slot-empty-state p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.slot-empty-state strong {
  color: var(--gold-accessible);
  font-weight: 600;
}

/* Bouton ADMIN dans footer bottom (côté droit) */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-admin-trigger,
.footer-admin-link {
  background: transparent;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}
.footer-admin-trigger:hover,
.footer-admin-link:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(212,168,48,0.08);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 640px) {
  .slot-waiting { padding: 3rem 1rem; }
  .slot-waiting-icon { width: 72px; height: 72px; }
  .slot-waiting-icon svg { width: 48px; height: 48px; }
  .slot-waiting-title { font-size: 34px; letter-spacing: 2px; }
  .slot-waiting-text { font-size: 14px; }
  .slot-waiting-actions { flex-direction: column; }
  .slot-waiting-actions .btn, .slot-waiting-actions .btn-outline-light { width: 100%; }
  .footer-bottom { flex-direction: column-reverse; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V01.007 — DASHBOARD ADMIN CENTRALISÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-body {
  background: #F7F6F3;
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ─── LOGIN SCREEN ────────────────────────────────────────────────────── */
.admin-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,168,48,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(212,168,48,0.04) 0%, transparent 50%),
    linear-gradient(135deg, #07142A 0%, #0F2745 50%, #07142A 100%);
}
.admin-login-card {
  background: #fff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.admin-login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.admin-login-logo-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--navy);
}
.admin-login-logo-text em {
  font-style: normal;
  color: var(--gold-accessible);
}
.admin-login-card h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  margin: 0 0 0.5rem;
  text-align: center;
}
.admin-login-sub {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 2rem;
}
.admin-login-back {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.admin-login-back:hover { color: var(--gold-accessible); }
.admin-login-msg {
  margin-top: 12px;
  font-size: 12px;
  text-align: center;
  min-height: 18px;
}
.admin-login-msg-err { color: #DC2626; }

/* ─── DASHBOARD LAYOUT ────────────────────────────────────────────────── */
.admin-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── TOPBAR ──────────────────────────────────────────────────────────── */
.admin-topbar {
  background: var(--navy);
  color: #fff;
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-sidebar-toggle {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  display: none;
}
.admin-sidebar-toggle:hover { background: rgba(255,255,255,0.1); }
.admin-topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.admin-topbar-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold);
}
.admin-topbar-sep { color: rgba(255,255,255,0.3); }
.admin-topbar-context { color: rgba(255,255,255,0.85); font-weight: 500; }
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.15);
  color: #10B981;
  border: 1px solid rgba(16,185,129,0.3);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
}
.admin-save-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}
.admin-save-pending {
  background: rgba(245,158,11,0.15);
  color: #F59E0B;
  border-color: rgba(245,158,11,0.3);
}
.admin-publish-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251,146,60,0.15);
  color: #FB923C;
  border: 1px solid rgba(251,146,60,0.3);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
}
.admin-publish-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FB923C;
}
.admin-btn-icon {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-btn-icon:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ─── LAYOUT SIDEBAR + MAIN ──────────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  min-height: calc(100vh - 56px);
}
.admin-sidebar {
  background: #fff;
  border-right: 1px solid #E8E5DE;
  padding: 1.25rem 0;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}
.admin-sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  cursor: pointer;
}
.admin-sidenav-item:hover {
  background: #FAF8F3;
  color: var(--gold-accessible);
}
.admin-sidenav-item.active {
  background: #FDF7E3;
  color: var(--gold-accessible);
  border-left-color: var(--gold);
  font-weight: 600;
}
.admin-sidenav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.admin-sidenav-item.active svg { opacity: 1; }
.admin-sidenav-home {
  padding: 14px 18px;
  font-weight: 600;
  border-bottom: 1px solid #F0EDE5;
  margin-bottom: 8px;
}
.admin-sidenav-group {
  padding: 8px 0;
  border-top: 1px solid #F5F2EA;
  margin-top: 4px;
}
.admin-sidenav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 18px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.admin-sidenav-add {
  background: transparent;
  border: 1px solid #E8E5DE;
  color: var(--navy);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.admin-sidenav-add:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.admin-sidenav-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-sidenav-brand-inactive { color: var(--muted); }
.admin-sidenav-brand-tag {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  background: #F0EDE5;
  padding: 2px 6px;
  border-radius: 3px;
}

.admin-main {
  padding: 2rem 2.5rem;
  overflow-x: auto;
}
.admin-main-loader {
  text-align: center;
  padding: 4rem;
  color: var(--muted);
  font-size: 14px;
}
.admin-error {
  padding: 2rem;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  color: #991B1B;
}

/* ─── PAGES & HEADS ──────────────────────────────────────────────────── */
.admin-page {
  max-width: 1200px;
}
.admin-page-head {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #E8E5DE;
}
.admin-page-head h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.admin-page-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}
.admin-page-head-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-page-head-brand h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-brand-dot-big {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

/* ─── WIDGETS (home dashboard) ───────────────────────────────────────── */
.admin-widgets {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-widget {
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 12px;
  padding: 1.5rem;
}
.admin-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0EDE5;
}
.admin-widget-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
  margin: 0;
  color: var(--navy);
}
.admin-widget-sub {
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.admin-widget-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.admin-brand-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 1rem;
  background: #FAF8F3;
  border: 1px solid #EEE9DB;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.admin-brand-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212,168,48,0.15);
}
.admin-brand-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-brand-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.admin-brand-card-head strong {
  flex: 1;
  font-size: 14px;
}
.admin-brand-card-status {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #10B981;
  background: rgba(16,185,129,0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.admin-brand-card-stats {
  display: flex;
  gap: 1rem;
  margin: 0.5rem 0;
}
.admin-brand-card-stats > div {
  display: flex;
  flex-direction: column;
}
.admin-brand-card-stats strong {
  font-size: 22px;
  font-family: 'Bebas Neue', sans-serif;
  color: var(--gold-accessible);
}
.admin-brand-card-stats span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.admin-brand-card-cta {
  margin-top: auto;
  font-size: 11px;
  color: var(--gold-accessible);
  font-weight: 600;
  padding-top: 0.5rem;
  border-top: 1px dashed #E8E5DE;
}
.admin-brand-card-slot {
  background: #FFF;
  border-style: dashed;
}

.admin-widget-stats-list { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #F0EDE5;
}
.admin-stat-row:last-child { border-bottom: 0; }
.admin-stat-label { font-size: 12px; color: var(--muted); }
.admin-stat-value { font-weight: 600; font-size: 13px; color: var(--navy); }
.admin-stat-warn { color: #FB923C; }
.admin-widget-cta { margin-top: 1rem; }

.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.admin-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem;
  background: #FAF8F3;
  border: 1px solid #EEE9DB;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  transition: all 0.15s;
}
.admin-quick-btn:hover { border-color: var(--gold); background: #FDF7E3; }
.admin-quick-btn svg { color: var(--gold-accessible); flex-shrink: 0; }
.admin-quick-btn span { font-size: 13px; line-height: 1.3; }
.admin-quick-btn small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 2px; }

/* ─── TABS BRAND EDITING ─────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #E8E5DE;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}
.admin-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.admin-tab-btn:hover { color: var(--navy); }
.admin-tab-btn.active {
  color: var(--gold-accessible);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

/* ─── PRODUCTS TAB ───────────────────────────────────────────────────── */
.admin-brand-products { position: relative; }
.admin-brand-products-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.admin-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.admin-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
.admin-search-wrap input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid #E8E5DE;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.admin-search-wrap input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,48,0.1);
}

.admin-gamme-block {
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 8px;
  overflow: hidden;
}
.admin-gamme-head {
  padding: 0.75rem 1rem;
  background: #FAF8F3;
  border-bottom: 1px solid #E8E5DE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-gamme-head h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold-accessible);
}
.admin-gamme-head span { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; }
.admin-gamme-prods { padding: 0.5rem; }
.admin-prod-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.admin-prod-row:hover { background: #FAF8F3; }
.admin-prod-main strong {
  display: block;
  font-size: 13px;
  color: var(--navy);
}
.admin-prod-main span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.admin-prod-price { text-align: right; }
.admin-prod-price span {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-accessible);
}
.admin-prod-price small { font-size: 10px; color: var(--muted); }
.admin-prod-edit {
  background: transparent;
  border: 1px solid #E8E5DE;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.admin-prod-edit:hover { border-color: var(--gold); color: var(--gold-accessible); }

/* ─── PRODUCT EDITOR (slide-in panel) ────────────────────────────────── */
.admin-prod-editor {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 450px;
  max-width: 100vw;
  background: #fff;
  box-shadow: -8px 0 32px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 90;
  overflow-y: auto;
}
.admin-prod-editor.open { transform: translateX(0); }
.admin-prod-editor-content { padding: 1.5rem; }
.admin-prod-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #E8E5DE;
  margin-bottom: 1.5rem;
}
.admin-prod-editor-head h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  margin: 0;
  color: var(--navy);
}
.admin-prod-editor-head .admin-btn-icon {
  color: var(--muted);
  background: transparent;
}
.admin-prod-editor-head .admin-btn-icon:hover { background: #F0EDE5; color: var(--navy); }
.admin-prod-editor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-prod-editor-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #E8E5DE;
}

/* ─── FIELDS ────────────────────────────────────────────────────────── */
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-field-full { grid-column: 1 / -1; }
.admin-field span {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-field input,
.admin-field textarea,
.admin-field select {
  padding: 8px 10px;
  border: 1px solid #E8E5DE;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
}
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,48,0.1);
}
.admin-field input[type="checkbox"] { width: auto; transform: scale(1.2); margin-right: 8px; }
.admin-field-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}

/* ─── BUTTONS ADMIN ──────────────────────────────────────────────────── */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 1.4;
}
.admin-btn-primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.admin-btn-primary:hover {
  background: var(--gold-accessible);
  color: #fff;
  border-color: var(--gold-accessible);
}
.admin-btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: #E8E5DE;
}
.admin-btn-outline:hover { border-color: var(--gold); color: var(--gold-accessible); }
.admin-btn-block { width: 100%; }
.admin-btn-danger {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FCA5A5;
}
.admin-btn-danger:hover { background: #FCA5A5; color: #fff; }
.admin-btn-danger-subtle {
  color: #DC2626;
  background: transparent;
  border-color: transparent;
}
.admin-btn-danger-subtle:hover { background: #FEE2E2; }
.admin-btn-disabled, .admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-btn-large { padding: 12px 24px; font-size: 14px; }

/* ─── EMPTY / INFO CARDS ─────────────────────────────────────────────── */
.admin-empty {
  padding: 3rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px dashed #E8E5DE;
  border-radius: 8px;
}
.admin-empty h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.admin-empty p { color: var(--muted); font-size: 13px; margin: 0; }
.admin-empty-mini {
  padding: 1rem;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  margin: 0;
}
.admin-info-card {
  padding: 1.25rem;
  background: #FAF8F3;
  border: 1px solid #EEE9DB;
  border-radius: 8px;
}
.admin-info-card p { margin: 0 0 0.5rem; font-size: 13px; color: var(--navy); }
.admin-info-card p:last-child { margin-bottom: 0; }
.admin-info-card code {
  background: #FFF;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid #E8E5DE;
}

/* ─── GAMMES EDITOR ──────────────────────────────────────────────────── */
.admin-gammes-editor { display: flex; flex-direction: column; gap: 1rem; }
.admin-gammes-editor .admin-toolbar-right { margin-bottom: 0.5rem; text-align: right; }
.admin-gamme-card {
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 8px;
  padding: 1.25rem;
}
.admin-gamme-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #F0EDE5;
}
.admin-gamme-card-head h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  margin: 0;
  color: var(--navy);
}
.admin-gamme-card-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* ─── ORDER / IO / HISTORY / BACKUP / PUBLISH / SETTINGS sections ────── */
.admin-order-editor, .admin-io-editor { display: flex; flex-direction: column; gap: 1.25rem; }
.admin-io-section, .admin-settings-section, .admin-backup-card, .admin-publish-card, .admin-publish-steps {
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.admin-io-section h3, .admin-settings-section h3,
.admin-backup-card h3, .admin-publish-steps h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--navy);
}
.admin-io-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1rem; }
.admin-settings-section-danger, .admin-backup-card-danger {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.admin-history-selector { margin-bottom: 1.5rem; }
.admin-history-selector label { display: block; }
.admin-history-selector select {
  padding: 8px 12px;
  border: 1px solid #E8E5DE;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 4px;
}
.admin-history-list { display: flex; flex-direction: column; gap: 8px; }
.admin-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 8px;
}
.admin-history-item-date { display: flex; flex-direction: column; }
.admin-history-item-date strong { font-size: 12px; color: var(--navy); }
.admin-history-item-date span { font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace; }
.admin-history-item-summary { font-size: 13px; color: var(--muted); }

.admin-backup-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-backup-info p { color: var(--muted); font-size: 13px; margin: 0; }

.admin-publish-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.admin-publish-stat {
  text-align: center;
  padding: 1rem;
  background: #FAF8F3;
  border-radius: 6px;
}
.admin-publish-stat strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--gold-accessible);
}
.admin-publish-stat span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-publish-steps ol {
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.admin-publish-steps code {
  background: #FAF8F3;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* ─── TOAST D'ANNULATION ─────────────────────────────────────────────── */
.admin-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-toast {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  position: relative;
  overflow: hidden;
  animation: toast-slide-in 0.2s ease-out;
}
@keyframes toast-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.admin-toast-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 13px;
}
.admin-toast-msg svg { color: var(--gold); flex-shrink: 0; }
.admin-toast-undo {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-toast-undo:hover { background: #fff; }
.admin-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--gold);
  width: 100%;
}
.admin-toast-success { background: #10B981; }
.admin-toast-success .admin-toast-msg svg { color: #fff; }

/* ─── RESPONSIVE MOBILE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-sidebar-toggle { display: inline-flex; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 260px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: 95;
    box-shadow: 4px 0 16px rgba(0,0,0,0.2);
  }
  .admin-sidebar.admin-sidebar-open { transform: translateX(0); }
  .admin-main { padding: 1.5rem 1rem; }
  .admin-widgets { grid-template-columns: 1fr; }
  .admin-prod-editor { width: 100vw; }
  .admin-prod-editor-body { grid-template-columns: 1fr; }
  .admin-history-item { grid-template-columns: 1fr; }
  .admin-topbar { padding: 0 1rem; }
  .admin-save-badge, .admin-publish-badge { font-size: 10px; padding: 4px 8px; }
  .admin-topbar-context { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V01.007 — PAGES SLOTS V2 (hero teaser + partner section)
   ═══════════════════════════════════════════════════════════════════════════ */

.slot-v2 { background: #fff; }

/* Hero Temps 1 */
.slot-v2-hero {
  position: relative;
  padding: 5rem 0 4rem;
  color: #fff;
  overflow: hidden;
}
.slot-v2-hero-bg {
  position: absolute;
  inset: 0;
  /* V01.043 — repli avant image-set() (cf. .hero-bg) */
  background: linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), url('../img/hero-bg.jpg') center / cover no-repeat;
  background: linear-gradient(rgba(7,20,42,0.82), rgba(7,20,42,0.88)), image-set(url('../img/hero-bg.webp') type('image/webp'), url('../img/hero-bg.jpg') type('image/jpeg')) center / cover no-repeat;
  background-color: var(--navy);
  /* V01.043 — z-index passe de -1 a 0.
     Avec -1, ce fond se peignait dans la couche « negative » de son contexte
     d empilement, donc SOUS le fond opaque du conteneur de page : le heros
     restait blanc, et le titre « Notre catalogue » — ecrit en blanc — devenait
     invisible, tout comme le paragraphe et les deux boutons. Seul le mot
     « s enrichit », en dore, restait lisible. Le -1 etait inutile : le contenu
     du heros est deja place au-dessus par .slot-v2-hero-inner { z-index: 1 }.
     Concerne les 5 pages marque-slot2 a marque-slot6. */
  z-index: 0;
}
.slot-v2-hero-inner {
  max-width: 760px;
  position: relative;
  z-index: 1;
}
.slot-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212,168,48,0.15);
  border: 1px solid rgba(212,168,48,0.35);
  color: var(--gold);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.slot-v2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: slot-pulse 2s infinite;
}
@keyframes slot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.slot-v2-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 6vw, 68px);
  letter-spacing: 3px;
  line-height: 0.95;
  margin: 0 0 1.5rem;
  color: #fff;
}
.slot-v2-h1 em { font-style: normal; color: var(--gold); }
.slot-v2-lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 0 1rem;
}
.slot-v2-context {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 640px;
  margin: 0 0 2rem;
}
.slot-v2-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.slot-v2-link-plain {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 13px;
  padding-left: 0.5rem;
  transition: color 0.15s;
}
.slot-v2-link-plain strong { color: var(--gold); font-weight: 600; }
.slot-v2-link-plain:hover { color: #fff; }

/* Séparateur */
.slot-v2-divider {
  background: #FAF8F3;
  padding: 2rem 0;
  border-top: 1px solid #EEE9DB;
  border-bottom: 1px solid #EEE9DB;
}
.slot-v2-divider-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
}
.slot-v2-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D4C898, transparent);
}
.slot-v2-divider-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold-accessible);
  white-space: nowrap;
}

/* Section Temps 2 : Partner */
.slot-v2-partner {
  background: #FAF8F3;
  padding: 4rem 0 5rem;
}
.slot-v2-partner-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
.slot-v2-partner-intro h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 1rem 0 1rem;
  color: var(--navy);
}
.slot-v2-partner-intro h2 em { font-style: normal; color: var(--gold-accessible); }
.slot-v2-partner-intro p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 2rem;
}
.slot-v2-partner-values { display: flex; flex-direction: column; gap: 1rem; }
.slot-v2-partner-value {
  display: flex;
  gap: 12px;
  padding: 0.75rem 0;
}
.slot-v2-partner-value-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,48,0.12);
  color: var(--gold-accessible);
  border-radius: 8px;
}
.slot-v2-partner-value > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.slot-v2-partner-value strong {
  font-size: 14px;
  color: var(--navy);
  font-weight: 600;
}
.slot-v2-partner-value span {
  font-size: 13px;
  color: var(--muted);
}

/* Formulaire fabricant */
.slot-v2-form {
  background: #fff;
  border: 1px solid #E8E5DE;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(7,20,42,0.05);
}
.slot-v2-form h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.slot-v2-form-intro {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #F0EDE5;
}
.slot-v2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.slot-v2-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.slot-v2-field-full { grid-column: 1 / -1; }
.slot-v2-field > span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.slot-v2-field input,
.slot-v2-field textarea {
  padding: 9px 11px;
  border: 1px solid #E8E5DE;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.slot-v2-field input:focus,
.slot-v2-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,48,0.1);
}
.slot-v2-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 0;
}
.slot-v2-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}
.slot-v2-checkboxes input[type="checkbox"] { transform: scale(1.1); }
.slot-v2-counter {
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 10px;
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.slot-v2-form-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #F0EDE5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.slot-v2-legal-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.slot-v2-legal-note a { color: var(--gold-accessible); }
.slot-v2-form-errors {
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 1rem 0;
  color: #991B1B;
  font-size: 13px;
}
.slot-v2-form-errors ul { margin: 6px 0 0; padding-left: 20px; }
.slot-v2-form-errors li { margin-bottom: 2px; }
.slot-v2-form-success {
  background: #D1FAE5;
  border: 1px solid #6EE7B7;
  border-radius: 8px;
  padding: 1.5rem;
  color: #065F46;
  font-size: 14px;
}
.slot-v2-form-success strong { display: block; font-size: 16px; margin-bottom: 6px; }
.slot-v2-form-success p { margin: 6px 0 0; line-height: 1.6; }

@media (max-width: 860px) {
  .slot-v2-partner-inner { grid-template-columns: 1fr; gap: 2rem; }
  .slot-v2-form-grid { grid-template-columns: 1fr; }
  .slot-v2-actions { flex-direction: column; align-items: stretch; }
  .slot-v2-actions .btn { width: 100%; }
  .slot-v2-form-footer { flex-direction: column; align-items: stretch; }
  .slot-v2-form-footer .btn { width: 100%; }
}


/* V01.008.4 — Bandeau filtre catalogue vide */
.filter-empty-banner {
  background: #FFF9E6;
  border: 1px solid #FDE4B3;
  border-left: 4px solid #D4A830;
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 1rem 0 1.5rem 0;
}
.filter-empty-content {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.filter-empty-content svg {
  color: #B57300;
  flex-shrink: 0;
  margin-top: 2px;
}
.filter-empty-content strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 4px;
}
.filter-empty-content p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5A4318;
}
.filter-empty-content a {
  color: var(--gold);
  text-decoration: underline;
  font-weight: 500;
}

/* =========================================================================
   V01.008.8 — Styles pour le renderer unifié (catalogue + marque-<slug>.html)
   Cohérence visuelle garantie entre les deux pages.
   ========================================================================= */

.brand-section {
  margin-bottom: 3rem;
}
.brand-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, var(--navy) 0%, #122644 100%);
  border-radius: var(--radius-lg);
  margin-bottom: 1.75rem;
  color: #fff;
  flex-wrap: wrap;
}
.brand-head-left {
  flex: 1;
  min-width: 0;
}
.brand-head-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 2px;
  margin: 0 0 0.35rem 0;
  line-height: 1;
}
.brand-head-manuf {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}
.brand-head-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.brand-head-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.brand-head-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}
.brand-cert-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(212, 168, 48, 0.15);
  color: var(--gold-light, #E6C067);
  border: 1px solid rgba(212, 168, 48, 0.35);
  border-radius: 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}
.brand-head-right {
  flex-shrink: 0;
}
.brand-head-link {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: rgba(212, 168, 48, 0.15);
  color: var(--gold-light, #E6C067);
  border: 1px solid rgba(212, 168, 48, 0.4);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.brand-head-link:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateX(3px);
}

.brand-section-gammes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Responsive */
@media (max-width: 640px) {
  .brand-section-head {
    padding: 1.2rem 1.25rem;
    flex-direction: column;
    gap: 1rem;
  }
  .brand-head-right {
    width: 100%;
  }
  .brand-head-link {
    display: block;
    text-align: center;
  }
}

/* Loading state */
#catalogueLoadingState {
  animation: solexamPulse 1.5s ease-in-out infinite;
}
@keyframes solexamPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* V01.008.9 — Badge ISO dans l'aperçu produit de la home */
.preview-iso-pill {
  display: inline-flex;
  background: #EEF2F6;
  color: #3A4962;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid #D4DCE6;
  letter-spacing: 0.3px;
}

/* ═════════════════════════════════════════════════════════════════════════
   V01.001.10 — FIXES RESPONSIVE MOBILE
   ═════════════════════════════════════════════════════════════════════════
   Correctifs ciblés issus de l'audit mobile V01.001.10.
   Objectifs :
   1. Empêcher le zoom automatique iOS sur focus input (font-size >= 16px)
   2. Respecter le target tactile minimum 40px sur petits boutons
   3. Ajuster les paddings et font-sizes pour iPhone SE (<=400px)
   Principe : aucune modification du desktop, overrides uniquement en mobile.
   ═════════════════════════════════════════════════════════════════════════ */

/* Anti-zoom iOS : tout input interactif doit avoir font-size >= 16px en mobile.
   Au-delà de 640px on garde le design desktop (13-14px, plus élégant). */
@media (max-width: 640px) {
  .cart-form-input,
  textarea.cart-form-input,
  .config-select,
  .config-custom-input {
    font-size: 16px;
  }

  /* Target tactile minimum : 40×40px recommandé (44px Apple HIG, 40px Material).
     32×32 desktop → 40×40 mobile sur les +/- du panier et du config drawer. */
  .config-qty-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* Le bouton "×" de suppression d'un item du panier : même logique */
  .cart-item-del {
    min-width: 32px;
    min-height: 32px;
  }
}

/* Petits mobiles (iPhone SE 320px, iPhone 12 mini 375px).
   Réduction de padding et ajustement typo pour éviter la compression horizontale. */
@media (max-width: 400px) {
  /* Réduction des gouttières latérales */
  .container,
  .nav {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Hero : titre plus compact, sous-titre lisible */
  .hero {
    padding: 3rem 0 2.5rem;
  }
  .hero h1 {
    font-size: 40px;
    line-height: 1.05;
  }
  .hero-sub {
    font-size: 14px;
  }

  /* Tableaux catalogue : densité maximale sans descendre sous 11px */
  .sheet-table td,
  .sheet-table th {
    font-size: 11px;
    padding: 6px 8px;
  }

  /* V01.043 — Le tableau catalogue etait ILLISIBLE sur telephone.
     .sheet-table combine table-layout:fixed et width:100% sans largeur
     minimale : les 10 colonnes se compressaient a 35 px chacune dans les
     350 px disponibles, alors que le contenu en reclame 424. Resultat, les
     en-tetes se chevauchaient et les valeurs se telescopaient — « 1 000 » et
     « 90 » de deux colonnes voisines s'affichaient comme « 1 000 90 ».
     Le conteneur .sheet-wrap sait pourtant defiler (overflow-x:auto) : il
     suffisait que le tableau accepte de depasser. On lui impose donc une
     largeur minimale qui laisse chaque colonne lisible, et le defilement
     horizontal fait le reste. C'est le patron deja employe avec succes pour
     les tableaux des guides. */
  .sheet-table {
    min-width: 740px;
  }
  /* Le defilement doit se sentir : inertie sur iOS et respiration en bas. */
  .sheet-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* V01.043 — Cibles tactiles des deux commandes les plus utilisees.
     « Devis » est le bouton de conversion principal du site : 36 px de haut
     le rendait difficile a viser au pouce, sur un chantier, avec des gants.
     44 px est le seuil recommande. */
  .nav-cart {
    min-height: 44px;
  }
  .nav-mobile-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  /* Cart overlay : occupe toute la largeur sans marge */
  .cart-panel {
    border-radius: 0;
  }
}

/* =========================================================================
   V01.001.19 — Calculateur de quantité géotextile non-tissé
   ========================================================================= */
.sx-calc {
  background: linear-gradient(135deg, var(--bg) 0%, #FAFAF7 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  max-width: 880px;
  margin: 2rem auto;
  box-shadow: 0 1px 3px rgba(7, 20, 42, 0.04);
}
.sx-calc-head h3 {
  margin: 0 0 0.5rem 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--navy);
}
.sx-calc-intro {
  margin: 0 0 1.5rem 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.sx-calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.sx-calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sx-calc-field > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}
.sx-calc-field > span em {
  color: var(--gold-accessible, #B8941C);
  font-style: normal;
  font-weight: 700;
}
.sx-calc-field input[type="number"],
.sx-calc-field select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #FFF;
  color: var(--navy);
}
.sx-calc-field input[type="number"]:focus,
.sx-calc-field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.sx-calc-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #FFF;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sx-calc-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}
.sx-calc-check input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--gold-accessible, #B8941C);
}
.sx-calc-norm {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.sx-calc-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.sx-calc-field-inline > span {
  white-space: nowrap;
}
.sx-calc-field-inline select {
  flex: 1;
}
.sx-calc-result {
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.sx-calc-result-empty {
  color: var(--muted);
  text-align: center;
  font-style: italic;
  font-size: 14px;
}
.sx-calc-result-warn {
  color: var(--asqual, #1A4D2E);
  text-align: center;
  font-weight: 500;
  padding: 0.5rem;
}
.sx-calc-result-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.sx-calc-result-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sx-calc-result-label {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.sx-calc-result-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: 1px;
  color: var(--navy);
  line-height: 1;
}
.sx-calc-result-unit {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.sx-calc-result-detail {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  color: var(--navy);
}
.sx-calc-result-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted #E5E0D5;
}
.sx-calc-result-row:last-child { border-bottom: none; }
.sx-calc-result-rolls {
  font-size: 13px;
  color: var(--navy);
}
.sx-calc-result-rolls > strong {
  display: block;
  margin-bottom: 0.5rem;
}
.sx-calc-result-rolls ul {
  margin: 0;
  padding-left: 1.25rem;
}
.sx-calc-result-rolls li {
  margin-bottom: 0.5rem;
  list-style: '→ ';
}
.sx-calc-result-rolls-detail {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  margin-left: 0;
}
.sx-calc-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 10px 20px;
  background: var(--gold-accessible, #B8941C);
  color: #FFF;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s;
}
.sx-calc-cta:hover {
  background: var(--navy);
}
.sx-calc-disclaimer {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin: 1rem 0 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed #E5E0D5;
}

/* Responsive */
@media (max-width: 640px) {
  .sx-calc { padding: 1.25rem; }
  .sx-calc-row { grid-template-columns: 1fr; }
  .sx-calc-field-inline { flex-direction: column; align-items: flex-start; }
  .sx-calc-result-card { flex-direction: column; gap: 1rem; }
  .sx-calc-result-value { font-size: 32px; }
}

/* =========================================================================
   V01.001.19 — Bouton flottant contact rapide
   ========================================================================= */
.sx-fc {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  font-family: 'DM Sans', sans-serif;
}
.sx-fc-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 20px;
  background: var(--gold-accessible, #B8941C);
  color: #FFF;
  border: 0;
  border-radius: 28px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(7, 20, 42, 0.18);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sx-fc-toggle:hover, .sx-fc-toggle:focus {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(7, 20, 42, 0.25);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sx-fc-toggle-label { letter-spacing: 0.5px; }

.sx-fc-menu {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 48px);
  background: #FFF;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 32px rgba(7, 20, 42, 0.18);
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.sx-fc-open .sx-fc-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.sx-fc-menu-head {
  padding: 0 0 0.75rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.sx-fc-menu-head strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
}
.sx-fc-menu-head p {
  margin: 0.25rem 0 0 0;
  font-size: 12px;
  color: var(--muted);
}
.sx-fc-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--navy);
  border-radius: 6px;
  transition: background 0.15s;
}
.sx-fc-link:hover, .sx-fc-link:focus {
  background: #FAFAF7;
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.sx-fc-link svg {
  flex-shrink: 0;
  color: var(--gold-accessible, #B8941C);
}
.sx-fc-link-wa svg {
  color: #25D366;
}
.sx-fc-link span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}
.sx-fc-link span strong {
  font-weight: 500;
  color: var(--navy);
}
.sx-fc-link span em {
  font-size: 11px;
  color: var(--muted);
  font-style: normal;
}
.sx-fc-disclaimer {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin: 0.75rem 0 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed #E5E0D5;
}

@media (max-width: 640px) {
  .sx-fc { bottom: 16px; right: 16px; }
  .sx-fc-toggle-label { display: none; }
  .sx-fc-toggle { padding: 12px; }
}

/* =========================================================================
   V01.001.19 — Bandeau d'information confidentialité (informatif, non bloquant)
   ========================================================================= */
.sx-pb {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  z-index: 90;
  border-top: 2px solid var(--gold);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  animation: sxpb-slide-up 0.4s ease-out;
}
@keyframes sxpb-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.sx-pb-closing {
  animation: sxpb-slide-down 0.3s ease-in forwards;
}
@keyframes sxpb-slide-down {
  to { transform: translateY(100%); opacity: 0; }
}
.sx-pb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sx-pb-content {
  flex: 1;
  min-width: 280px;
  font-size: 13px;
  line-height: 1.6;
}
.sx-pb-content strong {
  display: block;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.sx-pb-content p {
  margin: 0;
}
.sx-pb-content a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sx-pb-close {
  background: var(--gold);
  color: var(--navy);
  border: 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.sx-pb-close:hover, .sx-pb-close:focus {
  background: #FFF;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Décale le bouton flottant quand le banner est visible */
.sx-pb ~ .sx-fc { bottom: 96px; }

@media (max-width: 640px) {
  .sx-pb-inner { padding: 0.75rem 1rem; flex-direction: column; align-items: stretch; }
  .sx-pb-content { min-width: 0; }
  .sx-pb-close { width: 100%; }
}

/* =========================================================================
   V01.001.20 — Encart disclaimer responsabilité (réutilisable)
   ========================================================================= */
.sx-disclaimer {
  background: #FFF8E5;
  border: 1px solid #F0D578;
  border-left: 4px solid #B8941C;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5A4A14;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.sx-disclaimer-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.2;
}
.sx-disclaimer-body {
  flex: 1;
}
.sx-disclaimer-body strong {
  display: block;
  margin-bottom: 0.3rem;
  color: #4A3A0E;
  font-weight: 500;
  font-size: 13px;
}
.sx-disclaimer-body p {
  margin: 0;
  color: #5A4A14;
}
.sx-disclaimer-body a {
  color: #4A3A0E;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.sx-disclaimer-body a:hover {
  color: #07142A;
}
/* Variante compacte pour le bas d'article */
.sx-disclaimer-compact {
  font-size: 12px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: #FAFAF7;
  border-color: #E5DFD3;
  border-left-color: #B8941C;
  color: #5A6478;
}
.sx-disclaimer-compact strong {
  font-size: 12px;
}
/* Variante critique (pour wizard et page BE — plus visible) */
.sx-disclaimer-critical {
  background: linear-gradient(135deg, #FFF8E5 0%, #FFF 100%);
  border: 2px solid #B8941C;
  padding: 1.25rem 1.5rem;
}

/* =========================================================================
   V01.001.21 — Header avec menus déroulants
   V01.001.22 — Distribution améliorée + réintégration bouton Devis (panier)
   Approche : pure CSS pour hover desktop + JS minimal pour click mobile/clavier
   ========================================================================= */

/* La nav-inner garde space-between (logo gauche / actions droite),
   mais le bloc central (.nav-links) doit prendre l'espace disponible
   et centrer ses éléments pour utiliser toute la largeur de la barre */
#nav .nav-inner { gap: 1rem; }

#nav .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;          /* prend tout l'espace disponible entre logo et actions */
  min-width: 0;
}

/* Bloc actions à droite : Devis (panier) + Nous contacter */
#nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

#nav .nav-item {
  position: relative;
  list-style: none;
}

#nav .nav-link,
#nav .nav-btn-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

#nav .nav-link:hover,
#nav .nav-btn-trigger:hover,
#nav .nav-link:focus-visible,
#nav .nav-btn-trigger:focus-visible {
  color: var(--gold);
  background: rgba(212, 168, 48, 0.08);
  outline: none;
}

#nav .nav-link.active,
#nav .nav-btn-trigger.active {
  color: var(--gold);
}

#nav .nav-arrow {
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

#nav .nav-item:hover .nav-arrow,
#nav .nav-item.is-open .nav-arrow {
  transform: rotate(180deg);
}

/* Dropdown niveau 1 */
#nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(7, 20, 42, 0.15);
  padding: 6px;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 100;
  list-style: none;
}

#nav .nav-item:hover > .nav-dropdown,
#nav .nav-item:focus-within > .nav-dropdown,
#nav .nav-item.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#nav .nav-dropdown li {
  list-style: none;
  position: relative;
}

#nav .nav-dropdown a,
#nav .nav-dropdown .nav-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

#nav .nav-dropdown a:hover,
#nav .nav-dropdown a:focus-visible,
#nav .nav-dropdown .nav-submenu-trigger:hover,
#nav .nav-dropdown .nav-submenu-trigger:focus-visible {
  background: #FAFAF7;
  color: var(--gold-accessible, #B8941C);
  outline: none;
}

#nav .nav-dropdown .nav-submenu-arrow {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Dropdown niveau 2 (sous-menu Réglementations) */
#nav .nav-submenu {
  position: absolute;
  top: -7px;
  left: 100%;
  min-width: 240px;
  background: #FFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(7, 20, 42, 0.15);
  padding: 6px;
  margin-left: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  list-style: none;
}

#nav .nav-dropdown li:hover > .nav-submenu,
#nav .nav-dropdown li:focus-within > .nav-submenu,
#nav .nav-dropdown li.is-open > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

#nav .nav-submenu li { list-style: none; }

#nav .nav-submenu a {
  display: block;
  padding: 10px 14px;
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

#nav .nav-submenu a:hover,
#nav .nav-submenu a:focus-visible {
  background: #FAFAF7;
  color: var(--gold-accessible, #B8941C);
  outline: none;
}

/* Bouton "Nous contacter" — SECONDAIRE depuis le 12/08/2026.
   Il etait dore plein (donc primaire) alors que le bouton de conversion du
   site est "Devis", juste a cote, qui etait un bouton fantome translucide.
   La hierarchie visuelle est inversee : le doré va a l action qui rapporte.
   Bordure a 0.40 d opacite (et non 0.15) : ~3,6:1 sur le marine, conforme
   au seuil WCAG des composants d interface. */
#nav .nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.40);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
#nav .nav-cta:hover, #nav .nav-cta:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  border-color: #FFF;
  color: #FFF;
  transform: translateY(-1px);
}

/* V01.001.22 — Bouton "Devis" avec compteur panier dans nav-actions.
   PRIMAIRE depuis le 12/08/2026 : c est l action qui genere les demandes,
   c est donc lui qui porte le doré. */
#nav .nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  white-space: nowrap;
}
#nav .nav-cart:hover, #nav .nav-cart:focus-visible {
  background: #FFF;
  border-color: #FFF;
  color: var(--navy);
  outline: none;
  transform: translateY(-1px);
}
#nav .nav-cart svg { color: currentColor; }
/* Le badge etait doré sur un bouton devenu doré : il faut l inverser. */
#nav .cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--navy);
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1;
}
/* Panier non vide : le bouton se renforce (bordure marine + ombre douce).
   La classe est desormais posee par le JS (elle etait definie ici mais
   jamais appliquee : le bouton ne changeait jamais d etat). */
#nav .nav-cart.cart-has-items {
  box-shadow: 0 0 0 2px rgba(7, 20, 42, 0.55);
}

/* Toggle mobile */
#nav .nav-mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
}
#nav .nav-mobile-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Responsive — mobile hamburger */
@media (max-width: 1024px) {
  #nav .nav-mobile-toggle { display: inline-flex; order: 3; }
  #nav .nav-actions { gap: 0.5rem; }
  /* Sur mobile, garder uniquement le bouton Devis (panier) visible dans la barre,
     le bouton "Nous contacter" passe dans le menu hamburger */
  #nav .nav-cta { display: none; }
  #nav .nav-cart {
    padding: 8px 12px;
    font-size: 13px;
  }
  #nav .nav-cart-label { display: none; }
  #nav .nav-cart svg { width: 18px; height: 18px; }
  #nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    flex: none;
    /* La nav étant fixed, un menu plus haut que l'écran serait inatteignable :
       borné à la hauteur visible et scrollable en interne. */
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #nav.is-open .nav-links { display: flex; }
  /* Réinjecter "Nous contacter" en bas du menu mobile */
  #nav.is-open .nav-links::after {
    content: '';
    display: block;
    height: 0.5rem;
  }
  #nav .nav-item { width: 100%; }
  #nav .nav-link, #nav .nav-btn-trigger { width: 100%; padding: 12px 14px; }
  /* Et le bouton "Nous contacter" mobile : doit être inséré dans le menu */
  #nav .nav-cta-mobile {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    background: transparent;
    color: var(--gold-light);
    border: 1px solid rgba(200,162,74,0.75);
    padding: 12px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
  }
  #nav .nav-cta-mobile:hover { background: #FFF; }
  #nav .nav-dropdown {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0 0 0 1rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.25s;
    max-height: 0;
    overflow: hidden;
  }
  #nav .nav-item.is-open > .nav-dropdown { max-height: 600px; }
  #nav .nav-dropdown a, #nav .nav-dropdown .nav-submenu-trigger { color: rgba(255,255,255,0.85); }
  #nav .nav-dropdown a:hover, #nav .nav-dropdown a:focus-visible { background: rgba(212,168,48,0.08); color: var(--gold); }
  #nav .nav-submenu {
    position: static;
    box-shadow: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0 0 0 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height 0.25s;
  }
  #nav .nav-dropdown li.is-open > .nav-submenu { max-height: 400px; }
  #nav .nav-submenu a { color: rgba(255,255,255,0.7); }
}

/* Le bouton "Nous contacter" mobile est masqué en desktop */
#nav .nav-cta-mobile { display: none; }


/* V14.5 — Hover cards applications */
a.usage-card:hover { box-shadow: 0 8px 20px rgba(7,20,42,0.10); transform: translateY(-2px); }
a.usage-card:focus-visible { outline: 2px solid var(--gold-accessible); outline-offset: 3px; }


/* ─── V14.7 — Figures photos chantier ─────────────────────────── */
.lp-figure {
  margin: 2rem 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 20, 42, 0.08);
  background: #fff;
}
.lp-figure-img {
  width: 100%;
  height: auto;
  display: block;
  background: #f3f3f3;
}
.lp-figure-caption {
  padding: 0.75rem 1rem 1rem;
  background: #fafaf7;
  border-top: 3px solid var(--gold-accessible, #9B7A1E);
}
.lp-figure-text {
  display: block;
  font-size: 14px;
  color: var(--text, #1a1a1a);
  line-height: 1.5;
  font-weight: 500;
}
.lp-figure-disclaimer {
  display: block;
  margin-top: 0.5rem;
  font-size: 11px;
  color: var(--muted, #6a6a6a);
  font-style: italic;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .lp-figure { margin: 1.5rem 0; border-radius: 6px; }
  .lp-figure-caption { padding: 0.5rem 0.75rem 0.75rem; }
  .lp-figure-text { font-size: 13px; }
  .lp-figure-disclaimer { font-size: 10px; }
}
/* Variante hero (photo en haut de page) */
.lp-figure-hero {
  margin: 0 0 2rem 0;
  border-radius: 12px;
}
.lp-figure-hero .lp-figure-img {
  max-height: 480px;
  object-fit: cover;
  object-position: center;
}


/* ═══════════════════════════════════════════════════════════════
   A.2 — Section "L'essentiel en bref" (réponse atomique AEO)
   ═══════════════════════════════════════════════════════════════ */
.lp-tldr {
  padding: 2.5rem 0 0.5rem;
}
.lp-tldr-box {
  background: var(--gold-pale);
  border: 1px solid var(--gold-border);
  border-left: 4px solid var(--gold-accessible);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}
.lp-tldr-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 0.6rem;
}
.lp-tldr-text {
  margin: 0;
  color: var(--text);
  line-height: 1.65;
  font-size: 1.02rem;
}

/* ═══════════════════════════════════════════════════════════════
   A.2 — Bloc "Sur le même sujet" (maillage interne contextuel)
   ═══════════════════════════════════════════════════════════════ */
.lp-related {
  padding: 2rem 0;
  background: var(--offwhite);
}
.lp-related-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 1rem;
}
.lp-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.lp-related-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  line-height: 1.5;
}
.lp-related-item a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--gold-border);
  transition: border-color var(--transition);
}
.lp-related-item a:hover {
  border-bottom-color: var(--gold-accessible);
}
.lp-related-ctx {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Lien d'autorité sortant — discrète indication visuelle */
.lp-pedago a[rel*="noopener"],
.cadre-normatif a[rel*="noopener"] {
  color: var(--navy-mid);
  text-decoration: underline;
  text-decoration-color: var(--gold-border);
  text-underline-offset: 2px;
}
.lp-pedago a[rel*="noopener"]:hover {
  text-decoration-color: var(--gold-accessible);
}


/* ═══════════════════════════════════════════════════════════════
   Lien social LinkedIn — barre copyright du footer
   ═══════════════════════════════════════════════════════════════ */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s ease;
  text-decoration: none;
}
.footer-social-link:hover {
  color: var(--gold);
  text-decoration: none;
}
.footer-social-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-social-icon {
  display: block;
}
/* Wrapper pour grouper LinkedIn + Admin à droite (pages avec lien Admin) */
.footer-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 640px) {
  .footer-bottom-right {
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — Respect de la préférence « réduire les animations »
   (WCAG 2.3.3). Invisible pour les visiteurs sans cette préférence système.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V01.034.02 — Téléphone visible (header / menu mobile / footer)
   Éléments injectés par app.js sur les 92 pages.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--transition);
}
.nav-phone:hover { color: #fff; }
.nav-phone:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 1024px) { .nav-phone { display: none; } }

.nav-phone-mobile-wrap { display: none; }
@media (max-width: 1024px) {
  .nav-phone-mobile-wrap {
    display: block;
    padding: 0.35rem 0 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.4rem;
    list-style: none;
  }
  #nav .nav-links .nav-phone-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--gold);
    color: var(--navy);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
    text-decoration: none;
    padding: 12px 14px;
    font-variant-numeric: tabular-nums;
  }
  #nav .nav-links .nav-phone-mobile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}

.footer-contact-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0.9rem 0 0.2rem;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
.footer-contact-line svg { color: var(--gold); flex: none; }
.footer-contact-line a {
  color: var(--gold-light);
  text-decoration: none;
  font-weight: 600;
}
.footer-contact-line a:hover { color: #fff; text-decoration: underline; }
.footer-contact-line a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.footer-contact-line .fcl-sep { color: rgba(255, 255, 255, 0.35); }
@media (max-width: 640px) {
  .footer-contact-line { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* V01.034.05 — Formulaire devis : indication sous le téléphone + select échéance */
.cf-hint {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
select.cart-form-input {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
}

/* V01.034.07 — Tri des tableaux accessible au clavier : le libellé des
   en-têtes triables est un vrai <button> qui hérite du style du th. */
.sh-sortable .sh-sort-btn {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  display: inline;
}
.sh-sortable .sh-sort-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 1 : fondations & finitions de marque
   (V01.034.08 — validé Vivian : pro, discret, zéro effet exotique)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Typographie : titres équilibrés (pas de mot orphelin), paragraphes propres */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Marque jusque dans les détails : sélection de texte et contrôles natifs or */
::selection { background: var(--gold); color: var(--navy); }
:root { accent-color: var(--gold); }
html { scrollbar-gutter: stable; }

/* Focus clavier uniforme (or accessible sur fond clair, or vif sur fond sombre) */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold-accessible);
  outline-offset: 2px;
}
#nav :where(a, button):focus-visible,
footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cart-panel .cart-head :where(a, button):focus-visible {
  outline-color: var(--gold);
}
/* Champs de formulaire : halo doré discret en plus de la bordure */
.form-input:focus, .config-select:focus, .cart-form-input:focus {
  box-shadow: 0 0 0 2px rgba(212, 168, 48, 0.30);
}

/* Chiffres alignés dans toutes les colonnes techniques (kN/m, g/m², prix) */
.sheet-table td, .sheet-table th, .mono,
.pg-spec td, .prix-table td { font-variant-numeric: tabular-nums; }

/* Boutons : retour tactile discret à l'appui */
.btn:active, .cart-submit:active, .form-submit:active,
.sh-config-btn:active { transform: translateY(1px); }

/* ── Cartes famille de l'accueil : composant (remplace les styles inline) ── */
.family-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(7, 20, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.family-card--active { border-top-color: var(--gold); }
.family-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(7, 20, 42, 0.10);
  border-top-color: var(--gold);
}
.family-card:focus-visible { outline: 2px solid var(--gold-accessible); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .family-card:hover { transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 2 : micro-interactions du tunnel devis
   (badge, entrée du panneau, état d'envoi — discret, courbes douces)
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes sxBadgeBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.cart-badge.bump, #cartBadge.bump { animation: sxBadgeBump 0.3s ease; display: inline-block; }

@keyframes sxOverlayIn { from { opacity: 0; } }
@keyframes sxPanelIn {
  from { transform: translateY(14px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
.cart-overlay.open { animation: sxOverlayIn 0.15s ease; }
.cart-overlay.open .cart-panel { animation: sxPanelIn 0.22s cubic-bezier(0.32, 0.72, 0, 1); }

/* Bouton d'envoi : spinner discret pendant la requête (bouton déjà désactivé) */
@keyframes sxSpin { to { transform: rotate(360deg); } }
.cart-submit[disabled]::before, .form-submit[disabled]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(7, 20, 42, 0.30);
  border-top-color: var(--navy);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -2px;
  animation: sxSpin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cart-badge.bump, #cartBadge.bump,
  .cart-overlay.open, .cart-overlay.open .cart-panel,
  .cart-submit[disabled]::before, .form-submit[disabled]::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 3 : fondu entre les pages (View Transitions)
   Navigation Famille → Marque → Produit fluide comme une application.
   Progressive enhancement : Chrome/Edge/Safari ; ignoré proprement ailleurs.
   Le header (fixe) est exclu du fondu pour rester parfaitement stable.
   ═══════════════════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: ease;
}
#nav { view-transition-name: sx-nav; }
::view-transition-old(sx-nav), ::view-transition-new(sx-nav) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(sx-nav), ::view-transition-new(sx-nav) { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 4 : apparitions discrètes au défilement
   (classes posées par reveal.js ; sans JS, tout reste visible)
   ═══════════════════════════════════════════════════════════════════════════ */
.sx-reveal {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.5s ease, translate 0.5s ease;
}
.sx-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 4bis : listes déroulantes du header en navy/or
   Le panneau blanc générique devient une extension du bandeau : navy profond,
   liseré or, liens clairs — cohérent avec le menu mobile (déjà navy).
   ═══════════════════════════════════════════════════════════════════════════ */
#nav .nav-dropdown,
#nav .nav-submenu {
  background: rgba(10, 24, 48, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}
#nav .nav-dropdown a,
#nav .nav-dropdown .nav-submenu-trigger {
  color: rgba(255, 255, 255, 0.88);
}
#nav .nav-dropdown a:hover,
#nav .nav-dropdown a:focus-visible,
#nav .nav-dropdown .nav-submenu-trigger:hover,
#nav .nav-dropdown .nav-submenu-trigger:focus-visible {
  background: rgba(212, 168, 48, 0.13);
  color: var(--gold-light);
}
#nav .nav-dropdown a:focus-visible,
#nav .nav-dropdown .nav-submenu-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERNISATION SOBRE — Étape 5 : catalogue premium
   Squelette de chargement (remplace le « ⋯ Chargement… ») + zébrage discret.
   ═══════════════════════════════════════════════════════════════════════════ */
.sx-skeleton {
  border: 1px solid var(--navy);
  background: var(--card-bg);
}
.sx-sk-row {
  height: 54px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg,
    rgba(7, 20, 42, 0.045) 25%,
    rgba(7, 20, 42, 0.09) 37%,
    rgba(7, 20, 42, 0.045) 63%);
  background-size: 400% 100%;
  animation: sxShimmer 1.4s ease infinite;
}
.sx-sk-row:last-child { border-bottom: 0; }
.sx-sk-head {
  height: 46px;
  background: var(--navy);
  opacity: 0.92;
  animation: none;
}
@keyframes sxShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Zébrage discret des tableaux datasheet (2 % de navy, hover conservé) */
.sheet-table tbody tr:nth-child(even) { background: rgba(7, 20, 42, 0.022); }
.sheet-table tbody tr { transition: background 0.15s ease; }

@media (prefers-reduced-motion: reduce) { .sx-sk-row { animation: none; } }

/* ── V01.043 — Libelles de boutons rognes sur telephone ─────────────────────
   .btn porte white-space:nowrap sans aucune surcharge en requete media. Les
   libelles longs — « Parcourir le catalogue des geotextiles non tisses » —
   atteignaient 412 px de large, et body{overflow-x:hidden} les rognait SANS
   permettre de defiler : la fin du libelle etait simplement invisible.
   On n autorise le retour a la ligne que sous 768 px : les alignements de
   boutons en rangee sur desktop restent strictement inchanges. */
@media (max-width: 768px) {
  .btn {
    white-space: normal;
    justify-content: center;
    text-align: center;
    max-width: 100%;
  }
}

/* =============================================================================
   V01.044 — Catalogues : fin des chevauchements de texte entre colonnes
   =============================================================================
   CONSTAT (signale par Vivian, reproduit et mesure) : sur telephone, le texte
   d'une colonne empietait sur sa voisine et rendait le tableau illisible. Les
   en-tetes se lisaient « REFERENCERTIF. » et « TRACTION KMOINC. N », et les
   badges Asqual chevauchaient le nom du produit. 31 cellules sur 232 debordaient.

   PERIMETRE REEL, mesure a plusieurs largeurs : ce n'est PAS un defaut propre au
   telephone. .sheet-table est en table-layout:fixed, qui repartit la largeur a
   parts EGALES entre les 10 colonnes. Il faut donc que le tableau atteigne
   10 x 110 = 1100 px pour que la colonne la plus large (« Fiche & Devis »)
   tienne. Or le tableau suit son conteneur :
       375 px  -> table 740 px  -> colonnes 74 px  -> 31 cellules debordent
       768 px  -> table 713 px  -> colonnes 71 px  -> 31 cellules debordent
      1440 px  -> table 1210 px -> colonnes 120 px -> aucun debordement
   Le defaut couvre donc toute la bande sous ~1200 px : telephones, tablettes et
   petits portables. Le correctif V01.043 (min-width:740px) ne pouvait pas y
   suffire, et les min-width poses sur .sh-classe-cell / .sh-actions-cell sont
   purement et simplement ignores par table-layout:fixed.

   ON NE PEUT PAS ELARGIR LES COLONNES : table-layout:fixed lit les largeurs sur
   la PREMIERE ligne du thead, qui utilise des colspan (2 + 8) ; aucune largeur
   par colonne n'y est exprimable et il n'existe pas de <colgroup>. La seule voie
   propre est donc de faire ENTRER le contenu dans la largeur disponible.
   ============================================================================= */

/* --- Palier 1 : sous 1200 px — corrections structurelles ------------------- */
@media (max-width: 1200px) {

  /* Les en-tetes sont en white-space:nowrap : ils ne PEUVENT pas se replier et
     debordent donc mecaniquement. On les autorise a passer a la ligne. */
  .sheet-table thead tr.sh-head-cols th {
    white-space: normal;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Colonne figee : les references longues (« Maccaferri », « JUNIFOL ») se
     replient proprement, avec cesure quand la langue le permet. */
  .sheet-table tbody td.sh-col-fixed,
  .sheet-table tbody td.sh-col-fixed .sh-ref {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  /* .sh-price est un conteneur inline-flex : il ne se replie pas, et le montant
     contient une espace insecable (« 3,24&nbsp;€/m² ») qu'il ne faut surtout pas
     defaire. On empile donc le libelle et le montant. Le prix est une
     information commerciale : il ne doit jamais etre rogne. */
  .sheet-table .sh-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    white-space: normal;
  }

  /* La jauge de classe et les badges ne depassent plus de leur cellule. */
  .sheet-table .sh-classe-meter,
  .sheet-table .shm-bars,
  .sheet-table .sh-classe-near,
  .sheet-table .classe-badge-link,
  .sheet-table .classe-badge { max-width: 100%; }
  .sheet-table .classe-badge { white-space: normal; }

  /* Filet de securite : quoi qu'on ajoute demain dans une cellule, plus rien ne
     pourra empieter sur la colonne voisine. */
  .sheet-table th,
  .sheet-table td { overflow: hidden; }
}

/* --- Palier 1 bis : tablettes et petits portables (641 - 1200 px) ----------
   Dans cette bande, le tableau n'avait AUCUNE largeur minimale : il se calait
   sur son conteneur (713 px a 768 px de large), soit des colonnes de 71 px,
   plus etroites encore que sur telephone. On lui donne la largeur qu'il
   reclame reellement — 10 colonnes x 115 px — et le conteneur .sheet-wrap,
   qui sait deja defiler, absorbe le reste. Ici l'espace ne manque pas : mieux
   vaut un leger defilement horizontal qu'un texte compacte. */
@media (min-width: 641px) and (max-width: 1200px) {
  .sheet-table { min-width: 1150px; }
}

/* --- Palier 2 : sous 640 px — compaction propre au telephone --------------- */
@media (max-width: 640px) {

  /* 9 px suffisent a faire tenir « REFERENCE » sans le couper en plein mot.
     L'interlettrage de 1,5 px coute 1,5 px PAR CARACTERE sur une colonne de
     73 px : « TRACTION KN/M » y perdait 20 px a lui seul. */
  .sheet-table thead tr.sh-head-cols th {
    font-size: 9px;
    letter-spacing: 0.3px;
  }

  /* Jauge de classe : 89 px de large pour 57 px utiles. Etiquette empilee
     au-dessus des barres -> 53 px. */
  .sheet-table .sh-classe-meter {
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .sheet-table .shm-bars { flex-wrap: nowrap; }

  /* Badges de certification : « ✓ Asqual » fait 63 px pour 57 px utiles. On
     resserre le rembourrage sans toucher au corps du texte. */
  .sheet-table .sh-cert-asqual,
  .sheet-table .sh-cert-ce,
  .sheet-table .sh-cert-sb,
  .sheet-table .sh-cert-pessb,
  .sheet-table .sh-cert-iso,
  .sheet-table .classe-badge-link,
  .sheet-table .classe-badge {
    padding: 2px 4px;
    letter-spacing: 0;
  }
  .sheet-table .classe-badge-link,
  .sheet-table .classe-badge { font-size: 9px; line-height: 1.2; }
}

/* =============================================================================
   V01.045 — Catalogues : signaler ce qui attend a droite du tableau
   =============================================================================
   CONSTAT : sous 1200 px le tableau defile horizontalement, et RIEN ne
   l'indique — pas d'ombre, pas de texte, et la barre de defilement reste
   invisible sur iOS et Android tant qu'on ne touche pas l'ecran. Or l'ordre des
   colonnes place le PRIX et le bouton « + Devis » en DERNIER. Un conducteur de
   travaux peut donc parcourir tout le catalogue sur son telephone sans jamais
   decouvrir qu'il peut demander un devis.

   POURQUOI UNE PASTILLE ET PAS UN DEGRADE : le fondu est le patron deja employe
   verticalement (.sheet-collapse-fade). Mais en horizontal il resterait affiche
   en permanence — CSS seul ne sait pas detecter la fin du defilement — et
   viendrait donc voiler les boutons « + Devis » au moment precis ou le visiteur
   les atteint. L'inverse du but recherche. La pastille, elle, se pose sur la
   barre d'en-tete sombre, ne masque aucune donnee, et surtout elle NOMME ce
   qu'on gagne a faire defiler.

   Elle est accrochee a .sheet-collapse, qui enveloppe le tableau HORS de la zone
   de defilement : elle reste donc immobile pendant que le tableau glisse.
   Position absolue : aucun effet sur la hauteur, donc aucun effet sur
   l'animation de repli (max-height) de ce conteneur.
   ============================================================================= */
@media (max-width: 1200px) {
  .sheet-collapse::before {
    content: 'Prix · Devis →';
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 4;
    background: rgba(7, 20, 42, 0.55);
    color: var(--gold-light);
    border: 1px solid rgba(200, 162, 74, 0.8);
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }
}

/* V01.046 — Colonnes « Prix » et « Fiche & Devis » sur telephone.
   Ces deux colonnes portent un rembourrage de 14 px de chaque cote, pose pour
   le bureau afin d'eviter les chevauchements. Sur une colonne de 73 px, ces
   28 px ne laissent que 45 px au texte : l'en-tete « Prix indicatif » debordait
   encore de 2 a 6 px sur les pages de marque. Les min-width qui accompagnent
   cette regle sont de toute facon ignores par table-layout:fixed. */
@media (max-width: 640px) {
  .sheet-table thead tr.sh-head-cols th:nth-child(9),
  .sheet-table tbody td:nth-child(9),
  .sheet-table thead tr.sh-head-cols th:nth-child(10),
  .sheet-table tbody td:nth-child(10) {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* =============================================================================
   V01.050 — Bloc « Accès direct aux fiches produits » (pages catalogue)
   =============================================================================
   Les 3 pages catalogue construisent leur tableau en JavaScript. Ce bloc est la
   seule partie de ces pages qui contienne, en HTML servi, les noms, prix et liens
   des 29 fiches produit. Il est généré par _outils/scripts/build-bloc-catalogue.js
   entre les marqueurs <!-- BLOC-FICHES -->, HORS des conteneurs réécrits par le JS.
   Ne pas le modifier à la main dans les pages : la prochaine exécution du script
   écraserait la correction. Modifier le JSON, puis relancer le script.

   Deux variantes :
     .sx-fiches           — section pleine largeur (page géotextiles)
     .sx-fiches--inline   — posée dans .dc-wrap (géogrilles, géomembranes),
                            qui fournit déjà fond, largeur et marges.
   ============================================================================= */
.sx-fiches { background: var(--offwhite); padding: 2.75rem 0 3.25rem; }
.sx-fiches-in { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.sx-fiches h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1.3px;
  color: var(--navy);
  margin: 0.2rem 0 0.5rem;
}
.sx-fiches-lede {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 1.75rem;
}

/* Un groupe = une gamme (JUTA G, MACGRID AR, JUNIFOL PEHD…) */
.sx-fiches-grp { margin-bottom: 1.75rem; }
.sx-fiches-grp:last-child { margin-bottom: 0; }
.sx-fiches-grp h3 {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.sx-fiches-grp h3 span { color: var(--muted); font-weight: 400; letter-spacing: 0.5px; }
.sx-fiches-grp h3 span::before { content: '·'; margin: 0 0.45rem; }

/* auto-fill : le nombre de colonnes suit la largeur, sans point de rupture
   à maintenir. 2 colonnes à 375 px, 3 à 768 px, 4 au-delà de 1000 px. */
.sx-fiches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0.65rem;
}

.sx-fiche {
  display: block;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: var(--navy);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.sx-fiche:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 22px -12px rgba(7, 20, 42, 0.28);
  transform: translateY(-1px);
}
.sx-fiche:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sx-fiche-ref {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: 0.9px;
  line-height: 1.15;
  color: var(--navy);
}
.sx-fiche-spec {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}
.sx-fiche-price {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-accessible);
  margin-top: 6px;
}
.sx-fiche-price.sx-fiche-devis { color: var(--muted); font-weight: 500; font-style: italic; }

/* Variante posée dans .dc-wrap : le conteneur fournit déjà fond et gouttières. */
.sx-fiches--inline { background: none; padding: 2.25rem 0 0; border-top: 1px solid var(--border); }
.sx-fiches--inline .sx-fiches-in { max-width: none; padding: 0; }

@media (max-width: 640px) {
  .sx-fiches { padding: 2rem 0 2.5rem; }
  .sx-fiches-in { padding: 0 1.25rem; }
  .sx-fiches h2 { font-size: 23px; }
  .sx-fiches-lede { margin-bottom: 1.35rem; }
  .sx-fiches-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
  .sx-fiche { padding: 0.65rem 0.75rem; }
  .sx-fiche-ref { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .sx-fiche:hover { transform: none; } }

/* =============================================================================
   V01.050 — .btn-primary / .btn-secondary : boutons enfin dessines
   =============================================================================
   Ces deux classes n'etaient definies que dans les fiches produit
   (.product-page-cta .btn-primary / .btn-secondary). Partout ailleurs, elles
   s'affichaient comme du texte brut : 13 boutons principaux (« Demander un
   devis » des pages applications, blog, emplacements de marque) et une
   soixantaine de liens secondaires (pages classe, grammage, marques).
   - primaire : identique a .btn-gold, le bouton d'action du site ;
   - secondaire : contour qui suit la couleur du texte, lisible sur fond clair
     comme sur fond sombre.
   Les fiches produit gardent leur style (regles plus specifiques, inchangees) ;
   le bouton PDF des fiches (.pp-docs, fond marine) est exclu explicitement :
   :not(:where(...)) l'ecarte sans changer la priorite des regles. */
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--gold-light); transform: translateY(-1px); }
.btn-secondary:not(:where(.pp-docs *)) {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.btn-secondary:not(:where(.pp-docs *)):hover,
.btn-secondary:not(:where(.pp-docs *)):focus-visible {
  border-color: var(--gold);
  background: rgba(212, 168, 48, 0.08);
}

/* =============================================================================
   V01.051 — Contraste des cadres : validé par Vivian sur copie d'essai le 19/09/2026
   Les !important sont voulus : ils l'emportent sur les styles écrits dans les pages
   (attribut style="…"). Règles (numéros = inventaire du 19/09) :
   A  cartes (1 à 8)      : contour franc, liseré or en haut, ombre douce
   B  cartes d'usage (1)  : carte marine, titre blanc, accents or
   C  encadrés d'info (9 à 14) : fond or pâle, barre or pleine à gauche
   D  FAQ (15)            : contour franc, barre or à gauche quand ouverte
   E  emplacements « en cours de référencement » gardés, rendus visibles (3)
   F  outils (16)         : contour franc et ombre, sans liseré
   ============================================================================= */
:root {
  --cadre-bord: rgba(7, 20, 42, 0.24);
  --cadre-ombre: 0 8px 24px rgba(7, 20, 42, 0.10);
  --cadre-ombre-survol: 0 12px 30px rgba(7, 20, 42, 0.16);
}

/* ── A — cartes ─────────────────────────────────────────────────────────── */
.family-card,
.brand-card:not(.brand-card-soon),
.lp-pedago-card, .lp-card, .nc-box, .mg-gc-card,
.prix-card, .about-pillar, .about-person, .cmp-criterion,
a[href^="/applications/"][style*="#E5DFD3"],
a[href^="/livraison/"][style*="#E5DFD3"],
article[style*="var(--card-bg)"] {
  background: #fff !important;
  border: 1px solid var(--cadre-bord) !important;
  border-top: 4px solid var(--gold) !important;
  box-shadow: var(--cadre-ombre) !important;
}
.sx-fiche {
  background: #fff;
  border: 1px solid var(--cadre-bord);
  border-top: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(7, 20, 42, 0.08);
}
.family-card:hover, .brand-card:not(.brand-card-soon):hover, a.lp-pedago-card:hover, .sx-fiche:hover,
a[href^="/applications/"][style*="#E5DFD3"]:hover, a[href^="/livraison/"][style*="#E5DFD3"]:hover {
  border-color: var(--gold) !important;
  box-shadow: var(--cadre-ombre-survol) !important;
}

/* ── B — cartes d'usage : carte marine ─────────────────────────────────── */
.usage-card {
  /* retour Vivian 19/09 : marine un peu transparent (le fond creme transparait), contour dore */
  background: rgba(14, 34, 71, 0.85) !important;
  border: 1.5px solid var(--gold) !important;
  box-shadow: 0 8px 24px rgba(7, 20, 42, 0.18) !important;
}
.usage-card h2, .usage-card h3 { color: #fff !important; }
.usage-card p, .usage-card li, .usage-card div { color: rgba(255, 255, 255, 0.80) !important; }
.usage-card strong, .usage-card span { color: var(--gold-light) !important; }
.usage-card:hover { border-color: var(--gold) !important; }

/* ── C — encadrés d'information ─────────────────────────────────────────── */
.sx-disclaimer, .sx-disclaimer-compact, .lp-tldr-box,
.gp-catnav, .gp-catcta, .gp-cross, .sx-gramm .in, .prix-disc, .gloss-cta,
div[style*="background:#fff;border:1px solid var(--gold-border)"] {
  background: var(--gold-pale) !important;
  border: 1px solid rgba(212, 168, 48, 0.45) !important;
  border-left: 4px solid var(--gold) !important;
  box-shadow: none !important;
}

/* ── D — questions fréquentes (accordéons) ─────────────────────────────── */
details[style*="border-radius"], details.nc-fold {
  background: #fff !important;
  border: 1px solid var(--cadre-bord) !important;
  box-shadow: 0 2px 8px rgba(7, 20, 42, 0.06) !important;
}
details[style*="border-radius"][open], details.nc-fold[open] {
  border-left: 4px solid var(--gold) !important;
}

/* ── E — emplacements « en cours de référencement » : GARDÉS (retour Vivian 19/09 :
   toujours 3 cartes par ligne), mais rendus visibles : fond éclairci, pointillé or plein */
.brand-card-soon {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1.5px dashed var(--gold) !important;
}

/* ── F — outils et cadres divers ───────────────────────────────────────── */
.sx-calc, .sx-calc-options, .sx-calc-result, .wizard-mode-bar, .slot-v2-form,
.legal-identity, .legal-toc, .cmp-table-wrap, .prix-table-wrap,
div:not([class])[style*="border:1px solid"][style*="border-radius"]:not([style*="inline-block"]):not([style*="rgba(255"]):not([style*="gold-border"]) {
  background: #fff !important;
  border: 1px solid var(--cadre-bord) !important;
  box-shadow: 0 4px 14px rgba(7, 20, 42, 0.07) !important;
}