/* =============================================================================
   westay — Design System  ·  v1.1
   Architecture de tokens à 3 niveaux (W3C/DTCG) : primitif → sémantique → composant
   Accessibilité WCAG 2.2 AA (contrastes recalculés) · Theming clair/sombre · RTL
   ---------------------------------------------------------------------------
   CONVENTION DE NOMMAGE
   - Primitifs (Tier 1) : --ws-<famille>-<échelle>   ex. --ws-teal-500   (« quoi »)
   - Sémantiques (Tier 2): --ws-<role>-<variante>    ex. --ws-text-brand (« pourquoi »)
   - Composants (Tier 3) : --ws-<composant>-<prop>   ex. --ws-btn-bg     (« où »)
   Règle : les composants consomment le sémantique, jamais les primitifs.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

/* =============================================================================
   TIER 1 — PRIMITIFS  (« quoi » : valeurs brutes, sans contexte)
   ============================================================================= */
:root {
  /* ---- Couleur · Teal (marque) ---- */
  --ws-teal-50:  #E7F4F0;
  --ws-teal-100: #C5E6DD;
  --ws-teal-200: #92D1C0;
  --ws-teal-300: #5BB8A0;
  --ws-teal-400: #2A9E81;
  --ws-teal-500: #0E8A6E;   /* couleur de marque (identité) */
  --ws-teal-600: #0A6F58;   /* couleur d'action (contraste AA) */
  --ws-teal-700: #085645;
  --ws-teal-800: #064234;
  --ws-teal-900: #042B22;

  /* ---- Couleur · Terracotta (accent) ---- */
  --ws-clay-50:  #FBEDE9;
  --ws-clay-100: #F5D4CA;
  --ws-clay-200: #ECB0A0;
  --ws-clay-300: #E08C74;
  --ws-clay-400: #D9755A;
  --ws-clay-500: #D2664A;   /* accent de marque (le pin) */
  --ws-clay-600: #B5503A;
  --ws-clay-700: #8F3E2D;
  --ws-clay-800: #6B2F23;
  --ws-clay-900: #471F17;

  /* ---- Couleur · Neutres (chauds, teintés sable) ---- */
  --ws-neutral-0:   #FFFFFF;
  --ws-neutral-50:  #F8F7F4;
  --ws-neutral-100: #F1EFEA;
  --ws-neutral-200: #E7E4DD;
  --ws-neutral-300: #D4D0C6;
  --ws-neutral-400: #A6A99F;
  --ws-neutral-500: #7C8580;
  --ws-neutral-600: #66716C;   /* texte tertiaire — AA sur surface */
  --ws-neutral-700: #51605A;   /* texte secondaire — AA sur canvas */
  --ws-neutral-800: #283531;
  --ws-neutral-900: #15201D;

  /* ---- Couleur · Feedback ---- */
  --ws-green-50:  #E6F4EC;  --ws-green-500: #2E9E5B;  --ws-green-700: #1B6B3D;
  --ws-red-50:    #FBEAEA;  --ws-red-500:   #D64545;  --ws-red-600:   #B83232;  --ws-red-700: #9B2C2C;
  --ws-amber-50:  #FBF3E2;  --ws-amber-500: #E0A93B;  --ws-amber-700: #8A6516;
  --ws-blue-50:   #E8F1FA;  --ws-blue-500:  #3B82C4;  --ws-blue-700:  #225685;

  /* ---- Typographie · familles ---- */
  --ws-font-brand: 'Quicksand', 'Noto Sans Arabic', sans-serif;
  --ws-font-ui:    'Plus Jakarta Sans', 'Noto Sans Arabic', system-ui, sans-serif;
  --ws-font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Typographie · échelle (ratio ~1.25, base 16px) ---- */
  --ws-size-xs:   0.75rem;   /* 12 */
  --ws-size-sm:   0.875rem;  /* 14 */
  --ws-size-base: 1rem;      /* 16 */
  --ws-size-lg:   1.125rem;  /* 18 */
  --ws-size-xl:   1.375rem;  /* 22 */
  --ws-size-2xl:  1.75rem;   /* 28 */
  --ws-size-3xl:  2.25rem;   /* 36 */
  --ws-size-4xl:  3rem;      /* 48 */

  /* ---- Typographie · poids & interlignes ---- */
  --ws-weight-regular:   400;
  --ws-weight-medium:    500;
  --ws-weight-semibold:  600;
  --ws-weight-bold:      700;
  --ws-weight-extrabold: 800;
  --ws-leading-tight:   1.15;
  --ws-leading-snug:    1.35;
  --ws-leading-normal:  1.55;
  --ws-tracking-tight: -0.02em;
  --ws-tracking-normal: 0;
  --ws-tracking-wide:   0.08em;

  /* ---- Espacement (base 4px) ---- */
  --ws-space-0:  0;
  --ws-space-1:  0.25rem;  /* 4  */
  --ws-space-2:  0.5rem;   /* 8  */
  --ws-space-3:  0.75rem;  /* 12 */
  --ws-space-4:  1rem;     /* 16 */
  --ws-space-5:  1.25rem;  /* 20 */
  --ws-space-6:  1.5rem;   /* 24 */
  --ws-space-8:  2rem;     /* 32 */
  --ws-space-10: 2.5rem;   /* 40 */
  --ws-space-12: 3rem;     /* 48 */
  --ws-space-16: 4rem;     /* 64 */

  /* ---- Rayons ---- */
  --ws-radius-xs:   4px;
  --ws-radius-sm:   8px;
  --ws-radius-md:   12px;
  --ws-radius-lg:   16px;
  --ws-radius-xl:   24px;
  --ws-radius-full: 999px;

  /* ---- Élévation (ombres) ---- */
  --ws-shadow-0: none;
  --ws-shadow-1: 0 1px 2px rgba(21,32,29,.06);
  --ws-shadow-2: 0 2px 8px rgba(21,32,29,.08);
  --ws-shadow-3: 0 6px 18px rgba(21,32,29,.10);
  --ws-shadow-4: 0 14px 34px rgba(21,32,29,.14);

  /* ---- Bordures ---- */
  --ws-border-thin:  1px;
  --ws-border-thick: 2px;

  /* ---- Motion ---- */
  --ws-duration-fast: 120ms;
  --ws-duration-base: 200ms;
  --ws-duration-slow: 320ms;
  --ws-ease-standard: cubic-bezier(.2,.0,.0,1);
  --ws-ease-in:       cubic-bezier(.4,0,1,1);
  --ws-ease-out:      cubic-bezier(0,0,.2,1);

  /* ---- Z-index ---- */
  --ws-z-base: 1;
  --ws-z-dropdown: 1000;
  --ws-z-sticky: 1100;
  --ws-z-modal: 1300;
  --ws-z-toast: 1400;
}

/* =============================================================================
   TIER 2 — SÉMANTIQUE  (« pourquoi » : intention. Interface de consommation.)
   ============================================================================= */
:root {
  /* ---- Texte ---- */
  --ws-text-primary:    var(--ws-neutral-900);  /* 15:1 sur surface */
  --ws-text-secondary:  var(--ws-neutral-700);  /* AA sur canvas (~5:1) */
  --ws-text-tertiary:   var(--ws-neutral-600);  /* AA sur surface (~4.6:1) */
  --ws-text-brand:      var(--ws-teal-600);     /* 6.1:1 sur blanc */
  --ws-text-on-brand:   var(--ws-neutral-0);
  --ws-text-on-inverse: var(--ws-neutral-0);
  --ws-text-accent:     var(--ws-clay-600);
  --ws-text-danger:     var(--ws-red-700);
  --ws-text-disabled:   var(--ws-neutral-400);
  --ws-text-link:       var(--ws-teal-600);

  /* ---- Fonds ---- */
  --ws-bg-canvas:      var(--ws-neutral-50);
  --ws-bg-surface:     var(--ws-neutral-0);
  --ws-bg-subtle:      var(--ws-neutral-100);
  --ws-bg-muted:       var(--ws-neutral-200);
  --ws-bg-brand:       var(--ws-teal-600);   /* action : blanc dessus = 6.1:1 */
  --ws-bg-brand-hover: var(--ws-teal-700);
  --ws-bg-brand-subtle:var(--ws-teal-50);
  --ws-bg-accent:      var(--ws-clay-600);
  --ws-bg-accent-hover:var(--ws-clay-700);
  --ws-bg-danger:      var(--ws-red-600);
  --ws-bg-danger-hover:var(--ws-red-700);
  --ws-bg-inverse:     var(--ws-neutral-900);

  /* ---- Bordures ---- */
  --ws-border-default: var(--ws-neutral-200);
  --ws-border-strong:  var(--ws-neutral-300);
  --ws-border-brand:   var(--ws-teal-600);
  --ws-border-focus:   var(--ws-teal-600);
  --ws-border-error:   var(--ws-red-500);

  /* ---- Anneau de focus (WCAG 2.2 — 2 tons, ≥3:1) ---- */
  --ws-focus-ring: 0 0 0 2px var(--ws-bg-surface), 0 0 0 4px var(--ws-teal-600);

  /* ---- Feedback (paires fond / texte / icône) ---- */
  --ws-feedback-success-bg:   var(--ws-green-50);
  --ws-feedback-success-text: var(--ws-green-700);
  --ws-feedback-success-icon: var(--ws-green-700);
  --ws-feedback-error-bg:     var(--ws-red-50);
  --ws-feedback-error-text:   var(--ws-red-700);
  --ws-feedback-error-icon:   var(--ws-red-700);
  --ws-feedback-warning-bg:   var(--ws-amber-50);
  --ws-feedback-warning-text: var(--ws-amber-700);
  --ws-feedback-warning-icon: var(--ws-amber-700);
  --ws-feedback-info-bg:      var(--ws-blue-50);
  --ws-feedback-info-text:    var(--ws-blue-700);
  --ws-feedback-info-icon:    var(--ws-blue-700);

  /* ---- WhatsApp (canal central du produit) ---- */
  --ws-wa-bubble-in:  var(--ws-neutral-0);
  --ws-wa-bubble-out: var(--ws-teal-50);
  --ws-wa-thread-bg:  #ECE5DD;
}

/* ---- THEME SOMBRE : on ne réécrit QUE les tokens sémantiques ---- */
[data-theme="dark"] {
  --ws-text-primary:    var(--ws-neutral-50);
  --ws-text-secondary:  var(--ws-neutral-300);
  --ws-text-tertiary:   var(--ws-neutral-400);
  --ws-text-brand:      var(--ws-teal-300);
  --ws-text-on-brand:   var(--ws-neutral-900);   /* sur teal-400 = 5:1 */
  --ws-text-on-inverse: var(--ws-neutral-900);
  --ws-text-accent:     var(--ws-clay-300);
  --ws-text-danger:     #F2A3A3;
  --ws-text-link:       var(--ws-teal-300);

  --ws-bg-canvas:      #0E1614;
  --ws-bg-surface:     #15201D;
  --ws-bg-subtle:      #1C2825;
  --ws-bg-muted:       #283531;
  --ws-bg-brand:       var(--ws-teal-400);   /* texte sombre dessus = 5:1 */
  --ws-bg-brand-hover: var(--ws-teal-300);
  --ws-bg-brand-subtle:#10302A;
  --ws-bg-accent:      var(--ws-clay-400);
  --ws-bg-accent-hover:var(--ws-clay-300);
  --ws-bg-danger:      var(--ws-red-500);
  --ws-bg-danger-hover:#E26060;
  --ws-bg-inverse:     var(--ws-neutral-50);

  --ws-border-default: #283531;
  --ws-border-strong:  #3A4742;
  --ws-border-brand:   var(--ws-teal-400);
  --ws-border-focus:   var(--ws-teal-400);
  --ws-border-error:   var(--ws-red-500);
  --ws-focus-ring: 0 0 0 2px var(--ws-bg-surface), 0 0 0 4px var(--ws-teal-400);

  --ws-feedback-success-bg: #11261A; --ws-feedback-success-text: #7FD3A1; --ws-feedback-success-icon: #7FD3A1;
  --ws-feedback-error-bg:   #2A1414; --ws-feedback-error-text:   #F2A3A3; --ws-feedback-error-icon:   #F2A3A3;
  --ws-feedback-warning-bg: #2A2210; --ws-feedback-warning-text: #EFC979; --ws-feedback-warning-icon: #EFC979;
  --ws-feedback-info-bg:    #122130; --ws-feedback-info-text:    #8FBEE8; --ws-feedback-info-icon:    #8FBEE8;

  --ws-wa-bubble-in:  #1F2C28;
  --ws-wa-bubble-out: #0A4A3A;
  --ws-wa-thread-bg:  #0B1411;

  --ws-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --ws-shadow-2: 0 2px 8px rgba(0,0,0,.45);
  --ws-shadow-3: 0 6px 18px rgba(0,0,0,.5);
}

/* =============================================================================
   TIER 3 — TOKENS DE COMPOSANT  (réfèrent au sémantique ; primitif autorisé
   uniquement quand aucun rôle sémantique n'existe, ex. pastille toujours blanche)
   ============================================================================= */
:root {
  --ws-btn-bg:        var(--ws-bg-brand);
  --ws-btn-bg-hover:  var(--ws-bg-brand-hover);
  --ws-btn-fg:        var(--ws-text-on-brand);
  --ws-btn-radius:    var(--ws-radius-md);
  --ws-btn-weight:    var(--ws-weight-bold);
  --ws-btn-pad-y:     var(--ws-space-3);
  --ws-btn-pad-x:     var(--ws-space-5);

  --ws-field-radius:  var(--ws-radius-md);
  --ws-field-border:  var(--ws-border-default);
  --ws-field-bg:      var(--ws-bg-surface);

  --ws-card-radius:   var(--ws-radius-lg);
  --ws-card-bg:       var(--ws-bg-surface);
  --ws-card-border:   var(--ws-border-default);
  --ws-card-shadow:   var(--ws-shadow-2);

  --ws-badge-radius:  var(--ws-radius-full);

  --ws-switch-thumb:  var(--ws-neutral-0); /* pastille toujours claire (intentionnel) */
}

/* =============================================================================
   BASE / RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body.ws {
  margin: 0;
  font-family: var(--ws-font-ui);
  font-size: var(--ws-size-base);
  line-height: var(--ws-leading-normal);
  color: var(--ws-text-primary);
  background: var(--ws-bg-canvas);
  -webkit-font-smoothing: antialiased;
}

.ws h1, .ws h2, .ws h3, .ws h4 {
  font-family: var(--ws-font-ui);
  color: var(--ws-text-primary);
  line-height: var(--ws-leading-tight);
  letter-spacing: var(--ws-tracking-tight);
  margin: 0;
}
.ws h1 { font-size: var(--ws-size-4xl); font-weight: var(--ws-weight-extrabold); }
.ws h2 { font-size: var(--ws-size-2xl); font-weight: var(--ws-weight-extrabold); }
.ws h3 { font-size: var(--ws-size-xl);  font-weight: var(--ws-weight-bold); }
.ws p  { margin: 0; color: var(--ws-text-secondary); }

/* Liens : soulignés par défaut (ne pas distinguer par la couleur seule — WCAG 1.4.1).
   :not(.ws-btn) → on n'applique JAMAIS le style de lien aux boutons-liens. */
.ws a:not(.ws-btn) { color: var(--ws-text-link); text-decoration: underline; text-underline-offset: 2px; }
.ws a:not(.ws-btn):hover { text-decoration-thickness: 2px; }

/* Focus visible global (WCAG 2.2 — anneau ≥3:1) */
.ws :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ws-focus-ring);
  border-radius: var(--ws-radius-sm);
}

/* =============================================================================
   COMPOSANTS
   ============================================================================= */

/* ---- Bouton ---- */
.ws-btn {
  --_bg: var(--ws-btn-bg);
  --_fg: var(--ws-btn-fg);
  --_bg-hover: var(--ws-btn-bg-hover);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ws-space-2);
  font-family: var(--ws-font-ui);
  font-size: var(--ws-size-sm);
  font-weight: var(--ws-btn-weight);
  text-decoration: none;            /* un bouton-lien n'est jamais souligné */
  line-height: 1;
  min-height: 40px;                            /* cible tactile confortable */
  padding-block: var(--ws-btn-pad-y);
  padding-inline: var(--ws-btn-pad-x);          /* logique → RTL-safe */
  border: var(--ws-border-thin) solid var(--_bd);
  border-radius: var(--ws-btn-radius);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: background var(--ws-duration-fast) var(--ws-ease-standard),
              transform var(--ws-duration-fast) var(--ws-ease-standard);
}
.ws-btn:hover { background: var(--_bg-hover); }
.ws-btn:active { transform: translateY(1px); }
.ws-btn:disabled {
  background: var(--ws-bg-muted); color: var(--ws-text-disabled);
  border-color: transparent; cursor: not-allowed; transform: none;
}

.ws-btn--secondary {
  --_bg: var(--ws-bg-surface); --_bg-hover: var(--ws-bg-subtle);
  --_fg: var(--ws-text-primary); --_bd: var(--ws-border-strong);
}
.ws-btn--accent  { --_bg: var(--ws-bg-accent); --_bg-hover: var(--ws-bg-accent-hover); }
.ws-btn--ghost   { --_bg: transparent; --_bg-hover: var(--ws-bg-brand-subtle); --_fg: var(--ws-text-brand); }
.ws-btn--danger  { --_bg: var(--ws-bg-danger); --_bg-hover: var(--ws-bg-danger-hover); --_fg: var(--ws-text-on-brand); }

.ws-btn--sm { min-height: 32px; font-size: var(--ws-size-xs); padding-block: var(--ws-space-2); padding-inline: var(--ws-space-3); }
.ws-btn--lg { min-height: 48px; font-size: var(--ws-size-base); padding-block: var(--ws-space-4); padding-inline: var(--ws-space-6); }

/* ---- Champ de formulaire ---- */
.ws-field { display: flex; flex-direction: column; gap: var(--ws-space-2); }
.ws-label { font-size: var(--ws-size-sm); font-weight: var(--ws-weight-semibold); color: var(--ws-text-primary); }
.ws-hint  { font-size: var(--ws-size-xs); color: var(--ws-text-tertiary); }
.ws-hint--error { color: var(--ws-text-danger); }
.ws-input, .ws-textarea, .ws-select {
  font-family: var(--ws-font-ui);
  font-size: var(--ws-size-sm);
  color: var(--ws-text-primary);
  background: var(--ws-field-bg);
  border: var(--ws-border-thin) solid var(--ws-field-border);
  border-radius: var(--ws-field-radius);
  padding-block: var(--ws-space-3);
  padding-inline: var(--ws-space-4);
  transition: border-color var(--ws-duration-fast), box-shadow var(--ws-duration-fast);
}
.ws-input::placeholder, .ws-textarea::placeholder { color: var(--ws-text-tertiary); }
.ws-input:focus, .ws-textarea:focus, .ws-select:focus {
  outline: none; border-color: var(--ws-border-focus); box-shadow: var(--ws-focus-ring);
}
.ws-input[aria-invalid="true"] { border-color: var(--ws-border-error); }
.ws-input:disabled, .ws-textarea:disabled, .ws-select:disabled {
  background: var(--ws-bg-subtle); color: var(--ws-text-disabled); cursor: not-allowed;
}

/* ---- Cases à cocher & boutons radio ---- */
.ws-choice { display: inline-flex; align-items: center; gap: var(--ws-space-2); font-size: var(--ws-size-sm); color: var(--ws-text-primary); cursor: pointer; }
.ws-choice input[type="checkbox"], .ws-choice input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 20px; height: 20px; flex: none;
  display: inline-grid; place-content: center;
  background: var(--ws-bg-surface);
  border: var(--ws-border-thick) solid var(--ws-border-strong);
  cursor: pointer;
  transition: background var(--ws-duration-fast), border-color var(--ws-duration-fast);
}
.ws-choice input[type="checkbox"] { border-radius: var(--ws-radius-xs); }
.ws-choice input[type="radio"]    { border-radius: 50%; }
.ws-choice input:checked { background: var(--ws-bg-brand); border-color: var(--ws-bg-brand); }
.ws-choice input[type="checkbox"]:checked::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid var(--ws-text-on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ws-choice input[type="radio"]:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ws-text-on-brand);
}
.ws-choice input:focus-visible { outline: 2px solid transparent; box-shadow: var(--ws-focus-ring); }
.ws-choice input:disabled { background: var(--ws-bg-subtle); border-color: var(--ws-border-default); cursor: not-allowed; }

/* ---- Badge / Chip ---- */
.ws-badge {
  display: inline-flex; align-items: center; gap: var(--ws-space-1);
  font-size: var(--ws-size-xs); font-weight: var(--ws-weight-semibold);
  padding-block: var(--ws-space-1); padding-inline: var(--ws-space-3);
  border-radius: var(--ws-badge-radius);
  background: var(--ws-bg-subtle); color: var(--ws-text-secondary);
  line-height: 1.5;
}
.ws-badge--brand   { background: var(--ws-bg-brand-subtle); color: var(--ws-text-brand); }
.ws-badge--accent  { background: var(--ws-clay-50); color: var(--ws-clay-700); }
.ws-badge--success { background: var(--ws-feedback-success-bg); color: var(--ws-feedback-success-text); }
.ws-badge--error   { background: var(--ws-feedback-error-bg);   color: var(--ws-feedback-error-text); }
.ws-badge--warning { background: var(--ws-feedback-warning-bg); color: var(--ws-feedback-warning-text); }
.ws-badge--info    { background: var(--ws-feedback-info-bg);    color: var(--ws-feedback-info-text); }
.ws-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Carte ---- */
.ws-card {
  background: var(--ws-card-bg);
  border: var(--ws-border-thin) solid var(--ws-card-border);
  border-radius: var(--ws-card-radius);
  box-shadow: var(--ws-card-shadow);
  padding: var(--ws-space-6);
}
.ws-card__title { font-size: var(--ws-size-lg); font-weight: var(--ws-weight-bold); margin-bottom: var(--ws-space-2); }

/* ---- Alerte / Feedback ---- */
.ws-alert {
  display: flex; gap: var(--ws-space-3); align-items: flex-start;
  padding: var(--ws-space-4);
  border-radius: var(--ws-radius-md);
  border-inline-start: 4px solid currentColor;   /* logique → RTL-safe */
  font-size: var(--ws-size-sm);
}
.ws-alert__title { font-weight: var(--ws-weight-bold); margin-bottom: 2px; }
.ws-alert--success { background: var(--ws-feedback-success-bg); color: var(--ws-feedback-success-text); }
.ws-alert--error   { background: var(--ws-feedback-error-bg);   color: var(--ws-feedback-error-text); }
.ws-alert--warning { background: var(--ws-feedback-warning-bg); color: var(--ws-feedback-warning-text); }
.ws-alert--info    { background: var(--ws-feedback-info-bg);    color: var(--ws-feedback-info-text); }

/* ---- Avatar ---- */
.ws-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ws-bg-brand); color: var(--ws-text-on-brand);
  font-weight: var(--ws-weight-bold); font-size: var(--ws-size-sm);
}

/* ---- Switch ---- */
.ws-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.ws-switch input { opacity: 0; width: 0; height: 0; }
.ws-switch .track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--ws-bg-muted); border-radius: var(--ws-radius-full);
  transition: background var(--ws-duration-base) var(--ws-ease-standard);
}
.ws-switch .track::before {
  content: ""; position: absolute; height: 18px; width: 18px;
  inset-inline-start: 3px; top: 3px;
  background: var(--ws-switch-thumb); border-radius: 50%;
  box-shadow: var(--ws-shadow-1);
  transition: transform var(--ws-duration-base) var(--ws-ease-standard);
}
.ws-switch input:checked + .track { background: var(--ws-bg-brand); }
.ws-switch input:checked + .track::before { transform: translateX(20px); }
[dir="rtl"] .ws-switch input:checked + .track::before { transform: translateX(-20px); }
.ws-switch input:focus-visible + .track { box-shadow: var(--ws-focus-ring); }

/* ---- Onglets ---- */
.ws-tabs { display: flex; gap: var(--ws-space-1); border-bottom: 1px solid var(--ws-border-default); }
.ws-tab {
  appearance: none; border: 0; background: none; font: inherit;
  font-weight: var(--ws-weight-semibold); font-size: var(--ws-size-sm);
  color: var(--ws-text-secondary);
  padding-block: var(--ws-space-3); padding-inline: var(--ws-space-4);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--ws-duration-fast), border-color var(--ws-duration-fast);
}
.ws-tab:hover { color: var(--ws-text-primary); }
.ws-tab[aria-selected="true"] { color: var(--ws-text-brand); border-bottom-color: var(--ws-border-brand); }

/* ---- Tooltip ---- */
.ws-tooltip { position: relative; display: inline-flex; }
.ws-tooltip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.96);
  background: var(--ws-bg-inverse); color: var(--ws-bg-surface);
  font-size: var(--ws-size-xs); white-space: nowrap;
  padding-block: var(--ws-space-1); padding-inline: var(--ws-space-3);
  border-radius: var(--ws-radius-sm); box-shadow: var(--ws-shadow-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ws-duration-fast), transform var(--ws-duration-fast);
}
.ws-tooltip:hover .ws-tooltip__bubble,
.ws-tooltip:focus-within .ws-tooltip__bubble { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---- Toast ---- */
.ws-toast {
  display: inline-flex; gap: var(--ws-space-3); align-items: center;
  background: var(--ws-bg-inverse); color: var(--ws-bg-surface);
  padding-block: var(--ws-space-3); padding-inline: var(--ws-space-4);
  border-radius: var(--ws-radius-md); box-shadow: var(--ws-shadow-3);
  font-size: var(--ws-size-sm);
}

/* ---- Tableau ---- */
.ws-table { width: 100%; border-collapse: collapse; font-size: var(--ws-size-sm); }
.ws-table th, .ws-table td {
  text-align: start; padding: var(--ws-space-3); border-bottom: 1px solid var(--ws-border-default);
}
.ws-table th {
  color: var(--ws-text-tertiary); font-weight: var(--ws-weight-bold);
  font-size: var(--ws-size-xs); text-transform: uppercase; letter-spacing: .06em;
}
.ws-table tbody tr:hover { background: var(--ws-bg-subtle); }

/* ---- Bulle WhatsApp (pattern produit) ---- */
.ws-thread {
  background: var(--ws-wa-thread-bg);
  padding: var(--ws-space-4);
  border-radius: var(--ws-radius-lg);
  display: flex; flex-direction: column; gap: var(--ws-space-2);
}
.ws-bubble {
  max-width: 78%;
  padding-block: var(--ws-space-2);
  padding-inline: var(--ws-space-3);
  border-radius: var(--ws-radius-md);
  font-size: var(--ws-size-sm);
  color: var(--ws-text-primary);
  box-shadow: var(--ws-shadow-1);
  line-height: var(--ws-leading-snug);
}
.ws-bubble time { display:block; font-size: 10px; color: var(--ws-text-tertiary); margin-top: 2px; text-align: end; }
.ws-bubble--in  { background: var(--ws-wa-bubble-in);  align-self: flex-start; border-start-start-radius: var(--ws-radius-xs); }
.ws-bubble--out { background: var(--ws-wa-bubble-out); align-self: flex-end;   border-start-end-radius: var(--ws-radius-xs); }

/* =============================================================================
   UTILITAIRES
   ============================================================================= */
.ws-stack  { display:flex; flex-direction:column; gap: var(--ws-space-4); }
.ws-row    { display:flex; gap: var(--ws-space-3); align-items:center; flex-wrap:wrap; }
.ws-muted  { color: var(--ws-text-secondary); }
.ws-brand  { color: var(--ws-text-brand); }

/* =============================================================================
   RTL & ACCESSIBILITÉ SYSTÈME
   ============================================================================= */
/* RTL : géré par les propriétés logiques → il suffit de dir="rtl" sur <html> */

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .ws *, .ws *::before, .ws *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Mode contraste élevé (Windows) — s'appuyer sur les couleurs système */
@media (forced-colors: active) {
  .ws-btn, .ws-input, .ws-textarea, .ws-select, .ws-card, .ws-badge,
  .ws-choice input, .ws-alert { border: 1px solid; }
  .ws :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid; outline-offset: 1px;
  }
}