/* ════════════════════════════════════════════════════════════════════════
   Alti Clim — Design System Extension v5
   Audit-driven : enforces accessibility, motion, focus, conversion patterns
   Layered ON TOP of design.css (which provides --cb-* tokens).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Motion tokens ────────────────────────────────────────────────── */
  --ds-dur-fast: 150ms;
  --ds-dur-base: 220ms;
  --ds-dur-slow: 320ms;
  --ds-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ds-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ds-ease-spring: cubic-bezier(.2, .8, .2, 1.05);

  /* ── Spacing rhythm (8px) ─────────────────────────────────────────── */
  --ds-1:  4px;  --ds-2:  8px;  --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 20px;  --ds-6: 24px;  --ds-8: 32px;  --ds-10:40px;
  --ds-12:48px;  --ds-16:64px;  --ds-20:80px;  --ds-24:96px;

  /* ── Focus ring (CRITICAL accessibility) ─────────────────────────── */
  --ds-focus-color: var(--cb-teal, #0F7BB6);
  --ds-focus-ring:  0 0 0 3px rgba(15,123,182,.32);

  /* ── Surface elevation ────────────────────────────────────────────── */
  --ds-elev-1: 0 1px 2px rgba(13,46,78,.05),    0 1px 3px rgba(13,46,78,.08);
  --ds-elev-2: 0 4px 8px rgba(13,46,78,.06),    0 2px 4px rgba(13,46,78,.08);
  --ds-elev-3: 0 10px 25px rgba(13,46,78,.1),   0 4px 10px rgba(13,46,78,.06);
  --ds-elev-4: 0 25px 50px rgba(13,46,78,.16),  0 10px 20px rgba(13,46,78,.08);

  /* ── Z-index scale ────────────────────────────────────────────────── */
  --ds-z-dropdown: 100;
  --ds-z-sticky:   200;
  --ds-z-fab:      900;
  --ds-z-modal:   1000;
  --ds-z-toast:   1100;
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Universal focus ring (Skill priority 1)
   ════════════════════════════════════════════════════════════════════════ */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 2px;
  border-radius: var(--r-md, 8px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link for keyboard users */
.ds-skip-link {
  position: absolute;
  top: -100px; left: 8px;
  padding: 12px 20px;
  background: var(--cb-navy);
  color: #fff; font-weight: 700;
  border-radius: 8px;
  z-index: var(--ds-z-toast);
  transition: top var(--ds-dur-base) var(--ds-ease-out);
}
.ds-skip-link:focus-visible { top: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   CONVERSION TRIGGERS — Reusable lead-gen blocks
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sticky CTA bar (à insérer sur les pages secondaires) ─────────────── */
.ds-cta-bar {
  position: relative;
  background: linear-gradient(135deg, var(--cb-navy) 0%, #154a73 100%);
  color: #fff;
  padding: 28px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--ds-elev-3);
  margin: 48px 0;
  overflow: hidden;
}
.ds-cta-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 400px 200px at 90% 100%, rgba(246,166,24,.18) 0%, transparent 60%),
    radial-gradient(ellipse 300px 150px at 0% 0%, rgba(15,123,182,.12) 0%, transparent 60%);
  pointer-events: none;
}
.ds-cta-bar > * { position: relative; z-index: 1; }
.ds-cta-bar-text { flex: 1; min-width: 240px; }
.ds-cta-bar-text h3 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.ds-cta-bar-text p {
  color: rgba(255,255,255,.78);
  font-size: .92rem;
  margin: 0;
}
.ds-cta-bar-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ── Inline contextual CTA card (à mettre en milieu/bas de page) ─────── */
.ds-cta-inline {
  background: var(--cb-cold);
  border: 1px solid var(--cb-border);
  border-left: 4px solid var(--cb-gold);
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 32px 0;
}
.ds-cta-inline-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--cb-white);
  color: var(--cb-gold);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--ds-elev-1);
}
.ds-cta-inline-text { min-width: 0; }
.ds-cta-inline-text strong {
  display: block;
  color: var(--cb-navy);
  font-size: 1rem;
  margin-bottom: 2px;
}
.ds-cta-inline-text span {
  color: var(--cb-muted);
  font-size: .88rem;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .ds-cta-inline { grid-template-columns: auto 1fr; }
  .ds-cta-inline > .btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* ── Trust strip (4 KPIs sur fond léger, pour bas de page) ──────────── */
.ds-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 32px 24px;
  background: var(--cb-light);
  border-radius: 16px;
  margin: 32px 0;
}
.ds-trust-cell { text-align: center; }
.ds-trust-cell-value {
  font-size: 1.75rem; font-weight: 800;
  color: var(--cb-navy); line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -.02em;
}
.ds-trust-cell-label {
  font-size: .82rem; color: var(--cb-muted);
  font-weight: 500;
}
@media (max-width: 700px) {
  .ds-trust-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Page intro hero (modeste, pour pages internes) ─────────────────── */
.ds-page-hero {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--cb-border);
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, var(--cb-cold) 0%, transparent 70%),
    var(--cb-white);
}
.ds-page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--cb-border);
  background: var(--cb-white);
  border-radius: 999px;
  color: var(--cb-teal);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ds-page-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  max-width: 28ch;
}
.ds-page-hero p {
  font-size: 1.05rem;
  color: var(--cb-muted);
  max-width: 60ch;
  line-height: 1.6;
  margin: 0;
}

/* ── Section header (consistent across all pages) ───────────────────── */
.ds-section-head {
  margin-bottom: 32px;
  max-width: 60ch;
}
.ds-section-head-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cb-teal);
  margin-bottom: 8px;
}
.ds-section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--cb-navy);
  margin: 0 0 8px;
  line-height: 1.15;
}
.ds-section-head p {
  font-size: 1rem;
  color: var(--cb-muted);
  line-height: 1.6;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   WIZARD WIDGET (modal 2-panneaux : devis / rappel)
   ════════════════════════════════════════════════════════════════════════ */

/* ── FAB (button déclencheur) ─────────────────────────────────────── */
.wz-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: var(--ds-z-fab);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 16px;
  min-height: 48px;
  background: var(--cb-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(13,46,78,.36);
  transition: transform var(--ds-dur-base) var(--ds-ease-out),
              box-shadow var(--ds-dur-base) var(--ds-ease-out),
              background var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-fab:hover {
  background: var(--cb-teal);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,123,182,.42);
}
.wz-fab:active { transform: translateY(0); }
.wz-fab svg { flex-shrink: 0; }
.wz-fab-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cb-gold);
  flex-shrink: 0;
}
.wz-fab-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cb-gold);
  animation: wz-pulse 2.4s var(--ds-ease-out) infinite;
}
@keyframes wz-pulse {
  0%   { transform: scale(1);   opacity: .65; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (max-width: 480px) {
  .wz-fab {
    bottom: 16px; right: 16px;
    padding: 12px 16px 12px 14px;
    font-size: .86rem;
  }
  .wz-fab span:not(.wz-fab-pulse) { display: none; }
  .wz-fab { padding: 14px; }
}

/* ── Modal shell ─────────────────────────────────────────────────── */
.wz-modal {
  position: fixed; inset: 0;
  z-index: var(--ds-z-modal);
  display: grid; place-items: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-dur-base) var(--ds-ease-out);
}
.wz-modal.is-open { opacity: 1; pointer-events: auto; }
.wz-scrim {
  position: absolute; inset: 0;
  background: rgba(13, 27, 44, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wz-shell {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: calc(100dvh - 32px);
  background: var(--cb-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--ds-elev-4);
  transform: scale(.96) translateY(8px);
  transition: transform var(--ds-dur-slow) var(--ds-ease-spring);
  display: flex;
  flex-direction: column;
}
.wz-modal.is-open .wz-shell { transform: scale(1) translateY(0); }
.wz-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  color: var(--cb-navy);
  border: 1px solid var(--cb-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-close:hover { background: var(--cb-navy); color: #fff; transform: rotate(90deg); }

/* ── 2-panel layout ─────────────────────────────────────────────── */
.wz-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  flex: 1;
  min-height: 0;
}
@media (max-width: 760px) {
  .wz-layout { grid-template-columns: 1fr; }
  .wz-panel-l { display: none; }   /* hide preview on mobile to maximize step space */
}

/* ── LEFT PANEL — Récap projet ────────────────────────────────── */
.wz-panel-l {
  background:
    radial-gradient(ellipse 400px 300px at 0% 100%, rgba(246,166,24,.12) 0%, transparent 60%),
    linear-gradient(165deg, var(--cb-navy) 0%, #154a73 100%);
  color: #fff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.wz-pl-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 0;
}
.wz-pl-uc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cb-gold);
  padding: 6px 12px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  width: fit-content;
}
.wz-pl-uc-ico { font-size: 1rem; }
.wz-pl-h1 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 12px 0 6px;
}
.wz-pl-sub {
  color: rgba(255,255,255,.72);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
}

.wz-pl-card {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.wz-pl-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.55);
  text-align: center;
}
.wz-pl-empty p {
  font-size: .82rem;
  line-height: 1.55;
  margin: 0;
  max-width: 22ch;
}
.wz-pl-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-pl-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border-left: 2px solid var(--cb-gold);
  animation: wz-slide-in var(--ds-dur-base) var(--ds-ease-out);
}
@keyframes wz-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.wz-pl-q {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.wz-pl-a {
  font-size: .94rem;
  color: #fff;
  font-weight: 600;
  word-break: break-word;
}

.wz-pl-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wz-pl-ti {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: rgba(255,255,255,.78);
  padding: 8px 10px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
}
.wz-pl-ti svg { flex-shrink: 0; color: var(--cb-gold); }

/* ── RIGHT PANEL — Stepper ────────────────────────────────────── */
.wz-panel-r {
  background: var(--cb-white);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wz-pr-head {
  padding: 28px 32px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
}
.wz-pr-head-t h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--cb-navy);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}
.wz-pr-head-t p {
  font-size: .82rem;
  color: var(--cb-muted);
  margin: 0;
  line-height: 1.5;
}
.wz-step-c {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--cb-muted);
  padding: 4px 10px;
  background: var(--cb-cold);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.wz-prog {
  height: 4px;
  background: var(--cb-cold);
  margin: 0 32px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.wz-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cb-teal), var(--cb-gold));
  border-radius: 2px;
  transition: width var(--ds-dur-slow) var(--ds-ease-out);
}

.wz-body {
  padding: 24px 32px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Question label ────────────────────────────────────────────── */
.wz-q-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cb-navy);
  letter-spacing: -.01em;
  line-height: 1.4;
}
.wz-q-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cb-gold);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.wz-q-help {
  font-size: .82rem;
  color: var(--cb-muted);
  margin: 0 0 16px 36px;
  line-height: 1.5;
}

/* ── Choice grid ──────────────────────────────────────────────── */
.wz-cg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.wz-cg-3 { grid-template-columns: 1fr; }
.wz-cg-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) {
  .wz-cg, .wz-cg-2 { grid-template-columns: 1fr; }
}

.wz-cc {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--cb-white);
  border: 1.5px solid var(--cb-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-cc:hover {
  border-color: var(--cb-teal);
  background: var(--cb-cold);
  transform: translateY(-1px);
}
.wz-cc.is-sel {
  border-color: var(--cb-gold);
  background: rgba(246,166,24,.08);
  box-shadow: 0 0 0 3px rgba(246,166,24,.16);
}
.wz-cc-lg {
  padding: 18px 20px;
  min-height: 64px;
}
.wz-cc-ic {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}
.wz-cc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.wz-cc-lbl {
  font-size: .92rem;
  font-weight: 700;
  color: var(--cb-navy);
  line-height: 1.3;
}
.wz-cc-sub {
  font-size: .76rem;
  color: var(--cb-muted);
  font-weight: 400;
  line-height: 1.4;
}

/* ── Textarea step ─────────────────────────────────────────────── */
.wz-ta {
  width: 100%;
  font: inherit;
  font-size: .92rem;
  padding: 12px 14px;
  border: 1.5px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-white);
  color: var(--cb-text);
  resize: vertical;
  min-height: 96px;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out),
              box-shadow var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-ta:focus {
  outline: none;
  border-color: var(--cb-teal);
  box-shadow: var(--ds-focus-ring);
}

/* ── Contact form ──────────────────────────────────────────────── */
.wz-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wz-field-lbl {
  font-size: .76rem;
  font-weight: 600;
  color: var(--cb-text);
  letter-spacing: .02em;
}
.wz-input {
  width: 100%;
  font: inherit;
  font-size: .94rem;
  padding: 12px 14px;
  min-height: 44px;
  border: 1.5px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-white);
  color: var(--cb-text);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out),
              box-shadow var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-input:focus {
  outline: none;
  border-color: var(--cb-teal);
  box-shadow: var(--ds-focus-ring);
}
.wz-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 540px) {
  .wz-field-row { grid-template-columns: 1fr; }
}
.wz-helper-foot {
  font-size: .76rem;
  color: var(--cb-muted);
  line-height: 1.5;
  margin: 12px 0 0;
}
.wz-helper-foot a { color: var(--cb-teal); }
.wz-err {
  font-size: .85rem;
  color: var(--cb-red);
  background: rgba(230,40,20,.08);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--cb-red);
  margin: 12px 0 0;
}

/* ── Navigation footer ───────────────────────────────────────── */
.wz-nav {
  padding: 16px 32px 24px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-white);
  flex-shrink: 0;
}
.wz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--ds-dur-fast) var(--ds-ease-out);
  border: 1.5px solid;
}
.wz-btn-back {
  background: var(--cb-white);
  border-color: var(--cb-border);
  color: var(--cb-text);
}
.wz-btn-back:hover { border-color: var(--cb-navy); color: var(--cb-navy); }
.wz-btn-next {
  flex: 1;
  background: var(--cb-gold);
  border-color: var(--cb-gold);
  color: #fff;
  box-shadow: 0 4px 14px rgba(246,166,24,.36);
}
.wz-btn-next:hover:not(:disabled) {
  background: #d68c0a;
  border-color: #d68c0a;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(246,166,24,.46);
}
.wz-btn-next:disabled {
  background: var(--cb-border);
  border-color: var(--cb-border);
  color: var(--cb-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Success state ──────────────────────────────────────────── */
.wz-success {
  text-align: center;
  padding: 16px 0;
}
.wz-success-ico {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  background: rgba(22,163,74,.1);
  color: var(--cb-green);
  border-radius: 50%;
  display: grid; place-items: center;
  animation: wz-success-pop var(--ds-dur-slow) var(--ds-ease-spring);
}
@keyframes wz-success-pop {
  0%  { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1); }
}
.wz-success h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cb-navy);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.wz-success p {
  font-size: .92rem;
  color: var(--cb-muted);
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto 24px;
}
.wz-success p strong { color: var(--cb-text); }
.wz-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 540px) {
  .wz-success-actions { grid-template-columns: 1fr; }
}
.wz-link-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--cb-cold);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  text-decoration: none;
  text-align: left;
  transition: all var(--ds-dur-fast) var(--ds-ease-out);
}
.wz-link-card:hover {
  background: var(--cb-white);
  border-color: var(--cb-teal);
  transform: translateY(-2px);
  box-shadow: var(--ds-elev-2);
}
.wz-link-card strong {
  color: var(--cb-navy);
  font-size: .9rem;
  font-weight: 700;
}
.wz-link-card span {
  color: var(--cb-muted);
  font-size: .78rem;
  line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════════
   E-E-A-T BYLINE & CITABILITY BLOCK (SEO/GEO)
   ════════════════════════════════════════════════════════════════════════ */

.ds-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cb-cold);
  border-radius: 12px;
  margin: 0 0 24px;
  font-size: .85rem;
}
.ds-byline-avatar {
  width: 40px; height: 40px;
  background: var(--cb-navy);
  color: var(--cb-gold);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ds-byline-text { line-height: 1.4; }
.ds-byline-name {
  font-weight: 700;
  color: var(--cb-navy);
}
.ds-byline-name a {
  color: var(--cb-navy);
  text-decoration: underline;
  text-decoration-color: var(--cb-gold);
  text-underline-offset: 2px;
}
.ds-byline-meta {
  font-size: .78rem;
  color: var(--cb-muted);
  margin-top: 2px;
}

/* ── Bloc citabilité IA — paragraphe dense 134-167 mots ──────────────── */
.ds-citability {
  background: var(--cb-light);
  border-left: 4px solid var(--cb-teal);
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
  margin: 24px 0 32px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cb-text);
  max-width: 70ch;
}
.ds-citability p { margin: 0 0 12px; }
.ds-citability p:last-child { margin: 0; }
.ds-citability strong { color: var(--cb-navy); font-weight: 700; }

.ds-citability-eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cb-teal);
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   TECH TABLE — figure réutilisable pour blog/article/FAQ
   ════════════════════════════════════════════════════════════════════════ */
.tech-table {
  margin: 24px 0;
  background: var(--cb-white);
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(13,46,78,.05);
}
.tech-table-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--cb-navy), #154a73);
  color: #fff;
  text-align: left;
}
.tech-table-caption strong {
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.tech-table-caption span {
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  font-style: italic;
}
.tech-table-scroll {
  overflow-x: auto;
}
.tech-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tech-table thead {
  background: var(--cb-cold);
}
.tech-table th {
  text-align: left;
  padding: 11px 14px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--cb-navy);
  letter-spacing: .02em;
  border-bottom: 2px solid var(--cb-border);
}
.tech-table td, .tech-table tbody th {
  padding: 11px 14px;
  border-top: 1px solid var(--cb-border);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.tech-table tbody th {
  font-weight: 700;
  color: var(--cb-navy);
  background: var(--cb-light);
}
.tech-table tbody tr:hover {
  background: var(--cb-cold);
}
.tech-table-note {
  padding: 10px 18px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-light);
  font-size: .78rem;
  color: var(--cb-muted);
  line-height: 1.5;
  font-style: italic;
}
@media (max-width: 600px) {
  .tech-table table { font-size: .82rem; }
  .tech-table th, .tech-table td { padding: 8px 10px; }
}