/* ===== css/tokens.css ===== */
/* ==========================================================================
   Walooma — jetons de design
   Tous les jetons sont portés par .wl-app (et non :root) pour ne jamais
   entrer en conflit avec un thème WordPress. Le panneau de démo (.wl-demo)
   a ses propres jetons dans demo.css.
   Concept : marine profond (confiance, institution de santé) + sarcelle
   (soin, mouvement) + étincelle ambre (chaleur, repère d'action secondaire).
   ========================================================================== */

.wl-app {
  /* Couleurs de marque */
  --wl-navy-950: #071d2e;
  --wl-navy-900: #0b2a40;
  --wl-navy-800: #0f3552;
  --wl-navy-700: #184a6e;
  --wl-teal-700: #0a7568;
  --wl-teal-600: #0e8f80;
  --wl-teal-500: #13a592;
  --wl-teal-100: #d3efe9;
  --wl-teal-50: #eaf7f4;
  --wl-amber-500: #e89a2c;
  --wl-amber-100: #fbecd2;

  /* Surfaces et texte (neutres légèrement teintés sarcelle) */
  --wl-bg: #f2f5f4;
  --wl-surface: #ffffff;
  --wl-surface-2: #f7f9f9;
  --wl-surface-3: #edf1f1;
  --wl-sunken: #e6ecec;
  --wl-ink: #0f2233;
  --wl-ink-2: #3a4d5c;
  --wl-muted: #5d6f7c;
  --wl-line: #dde5e6;
  --wl-line-strong: #c5d1d3;
  --wl-overlay: rgba(7, 29, 46, 0.48);

  /* Sidebar */
  --wl-side-bg: var(--wl-navy-900);
  --wl-side-ink: #cfdde6;
  --wl-side-ink-strong: #ffffff;
  --wl-side-active: rgba(19, 165, 146, 0.18);

  /* Action principale */
  --wl-primary: var(--wl-navy-800);
  --wl-primary-ink: #ffffff;
  --wl-primary-hover: var(--wl-navy-700);
  --wl-accent: var(--wl-teal-600);
  --wl-accent-ink: #ffffff;
  --wl-accent-soft: var(--wl-teal-50);
  --wl-accent-soft-ink: var(--wl-teal-700);
  --wl-focus: #1b7fd6;

  /* Sémantique — jamais utilisée seule : toujours avec un libellé ou une icône */
  --wl-ok: #137a55;
  --wl-ok-soft: #e1f3ea;
  --wl-warn: #9a5b00;
  --wl-warn-soft: #fcefd7;
  --wl-danger: #b7322b;
  --wl-danger-soft: #fbe6e4;
  --wl-info: #1f5fae;
  --wl-info-soft: #e3edfa;

  /* Carte */
  --wl-map-sea: #bfe0ea;
  --wl-map-sea-deep: #a9d3e0;
  --wl-map-land: #ece8df;
  --wl-map-block: #e2ddd2;
  --wl-map-park: #cfe6c8;
  --wl-map-road: #ffffff;
  --wl-map-road-major: #fbe3b0;
  --wl-map-road-edge: #d9d3c6;
  --wl-map-label: #52616b;
  --wl-map-route: #0e8f80;
  --wl-map-route-halo: rgba(14, 143, 128, 0.22);

  /* Typographie */
  --wl-font-display: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --wl-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wl-fs-xs: 0.75rem;
  --wl-fs-sm: 0.8125rem;
  --wl-fs-md: 0.9375rem;
  --wl-fs-lg: 1.0625rem;
  --wl-fs-xl: 1.3125rem;
  --wl-fs-2xl: 1.625rem;
  --wl-fs-3xl: 2.125rem;
  --wl-lh-tight: 1.2;
  --wl-lh: 1.5;

  /* Espacements (base 4) */
  --wl-s1: 4px;
  --wl-s2: 8px;
  --wl-s3: 12px;
  --wl-s4: 16px;
  --wl-s5: 20px;
  --wl-s6: 24px;
  --wl-s8: 32px;
  --wl-s10: 40px;

  /* Rayons, ombres */
  --wl-r-sm: 8px;
  --wl-r-md: 12px;
  --wl-r-lg: 18px;
  --wl-r-xl: 24px;
  --wl-r-pill: 999px;
  --wl-shadow-1: 0 1px 2px rgba(11, 42, 64, 0.06), 0 1px 1px rgba(11, 42, 64, 0.04);
  --wl-shadow-2: 0 6px 20px rgba(11, 42, 64, 0.09), 0 2px 6px rgba(11, 42, 64, 0.05);
  --wl-shadow-3: 0 18px 48px rgba(11, 42, 64, 0.18);

  /* Mouvement (120–250 ms) */
  --wl-dur-fast: 120ms;
  --wl-dur: 180ms;
  --wl-dur-slow: 250ms;
  --wl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Dimensions */
  --wl-tap: 44px;
  --wl-sidebar-w: 248px;
  --wl-panel-w: 420px;
  --wl-tabbar-h: 64px;
  --wl-safe-top: env(safe-area-inset-top, 0px);
  --wl-safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

/* Thème sombre (préparé, activable via le panneau de scénarios) */
.wl-app[data-wl-theme="dark"] {
  --wl-bg: #0a1620;
  --wl-surface: #112231;
  --wl-surface-2: #142838;
  --wl-surface-3: #1a3143;
  --wl-sunken: #0d1c28;
  --wl-ink: #e8f0f3;
  --wl-ink-2: #c1d0d8;
  --wl-muted: #93a7b3;
  --wl-line: #22394a;
  --wl-line-strong: #2f4a5d;
  --wl-overlay: rgba(0, 0, 0, 0.6);
  --wl-side-bg: #07151f;
  --wl-primary: #2fb8a4;
  --wl-primary-ink: #04221d;
  --wl-primary-hover: #45c7b4;
  --wl-accent: #2fb8a4;
  --wl-accent-ink: #04221d;
  --wl-accent-soft: #0f3a36;
  --wl-accent-soft-ink: #7fe0d0;
  --wl-ok: #52c996;
  --wl-ok-soft: #10352a;
  --wl-warn: #f0b457;
  --wl-warn-soft: #3a2a10;
  --wl-danger: #f07b72;
  --wl-danger-soft: #3d1a18;
  --wl-info: #7fb0f0;
  --wl-info-soft: #152c4a;
  --wl-map-sea: #12344a;
  --wl-map-sea-deep: #0f2c40;
  --wl-map-land: #1b2a33;
  --wl-map-block: #22333d;
  --wl-map-park: #1f3a2e;
  --wl-map-road: #2c404c;
  --wl-map-road-major: #5a4a2c;
  --wl-map-road-edge: #16242d;
  --wl-map-label: #9fb2bd;
  --wl-map-route: #3fd0bb;
  --wl-map-route-halo: rgba(63, 208, 187, 0.25);
  color-scheme: dark;
}

/* ===== css/base.css ===== */
/* ==========================================================================
   Base — réinitialisation limitée à .wl-app (aucun style global,
   pour cohabiter avec n'importe quel thème WordPress).
   ========================================================================== */

.wl-app {
  container: wl / inline-size;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--wl-bg);
  color: var(--wl-ink);
  font-family: var(--wl-font-body);
  font-size: var(--wl-fs-md);
  line-height: var(--wl-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

.wl-app *,
.wl-app *::before,
.wl-app *::after {
  box-sizing: border-box;
}

.wl-app :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote) {
  margin: 0;
  padding: 0;
}

.wl-app :where(ul, ol) {
  list-style: none;
}

.wl-app :where(h1, h2, h3) {
  font-family: var(--wl-font-display);
  line-height: var(--wl-lh-tight);
  text-wrap: balance;
  letter-spacing: -0.01em;
  color: var(--wl-ink);
}

.wl-app :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.wl-app :where(button) {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

.wl-app :where(img, svg) {
  display: block;
  max-width: 100%;
}

.wl-app :where(fieldset) {
  border: 0;
  min-width: 0;
}

.wl-app :where(a) {
  color: var(--wl-accent-soft-ink);
}

.wl-app [hidden] {
  display: none;
}

/* Focus visible, jamais supprimé */
.wl-app :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wl-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.wl-app :where(#wl-main):focus {
  outline: none;
}

.wl-app .wl-icon {
  flex: none;
}

/* Utilitaires */
.wl-app .wl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wl-app .wl-muted {
  color: var(--wl-muted);
}

.wl-app .wl-text-danger {
  color: var(--wl-danger);
}

.wl-app .wl-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wl-app .wl-h1 {
  font-size: var(--wl-fs-2xl);
  font-weight: 600;
}

.wl-app .wl-h3 {
  font-size: var(--wl-fs-lg);
  font-weight: 600;
  margin-bottom: var(--wl-s2);
}

.wl-app .wl-eyebrow {
  display: block;
  font-size: var(--wl-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wl-accent-soft-ink);
}

/* Réduction des animations : préférence système ou réglage démo */
@media (prefers-reduced-motion: reduce) {
  .wl-app *,
  .wl-app *::before,
  .wl-app *::after {
    animation-duration: 1ms !important; /* seule exception : accessibilité */
    transition-duration: 1ms !important;
  }
}

.wl-app[data-wl-reduced-motion="true"] *,
.wl-app[data-wl-reduced-motion="true"] *::before,
.wl-app[data-wl-reduced-motion="true"] *::after {
  animation: none;
  transition: none;
}

/* ===== css/components.css ===== */
/* ==========================================================================
   Composants — préfixe .wl-, jamais de sélecteur global.
   ========================================================================== */

/* ---------- Boutons ---------- */

.wl-app .wl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wl-s2);
  min-height: var(--wl-tap);
  padding: 0 var(--wl-s5);
  border-radius: var(--wl-r-pill);
  border: 1.5px solid transparent;
  font-weight: 650;
  font-size: var(--wl-fs-md);
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  transition: background-color var(--wl-dur-fast) var(--wl-ease), transform var(--wl-dur-fast) var(--wl-ease), box-shadow var(--wl-dur) var(--wl-ease);
  user-select: none;
}
.wl-app .wl-btn > span { min-width: 0; overflow-wrap: anywhere; padding-block: 6px; }
.wl-app .wl-btn:active:not(:disabled) { transform: scale(0.98); }
.wl-app .wl-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wl-app .wl-btn[aria-busy="true"] { cursor: progress; opacity: 0.85; }
.wl-app .wl-btn[aria-busy="true"]::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: wl-spin 0.7s linear infinite;
}
.wl-app .wl-btn[aria-busy="true"] > .wl-icon { display: none; }

.wl-app .wl-btn--primary { background: var(--wl-primary); color: var(--wl-primary-ink); box-shadow: 0 6px 16px rgba(15, 53, 82, 0.22); }
.wl-app .wl-btn--primary:hover:not(:disabled) { background: var(--wl-primary-hover); }
.wl-app .wl-btn--accent { background: var(--wl-accent); color: var(--wl-accent-ink); }
.wl-app .wl-btn--secondary { background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); }
.wl-app .wl-btn--secondary:hover:not(:disabled) { background: var(--wl-teal-100); }
.wl-app .wl-btn--ghost { background: var(--wl-surface); color: var(--wl-ink); border-color: var(--wl-line-strong); }
.wl-app .wl-btn--ghost:hover:not(:disabled) { background: var(--wl-surface-2); border-color: var(--wl-muted); }
.wl-app .wl-btn--danger { background: var(--wl-danger); color: #fff; }
.wl-app .wl-btn--danger-ghost { background: var(--wl-surface); color: var(--wl-danger); border-color: color-mix(in srgb, var(--wl-danger) 40%, transparent); }
.wl-app .wl-btn--danger-ghost:hover:not(:disabled) { background: var(--wl-danger-soft); }
.wl-app .wl-btn--sm { min-height: 36px; padding: 0 var(--wl-s4); font-size: var(--wl-fs-sm); }
.wl-app .wl-btn--lg { min-height: 54px; font-size: var(--wl-fs-lg); border-radius: var(--wl-r-lg); }
.wl-app .wl-btn--block { width: 100%; }

@keyframes wl-spin { to { transform: rotate(360deg); } }

.wl-app .wl-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--wl-tap);
  height: var(--wl-tap);
  border-radius: var(--wl-r-md);
  color: var(--wl-ink-2);
  flex: none;
  transition: background-color var(--wl-dur-fast) var(--wl-ease);
}
.wl-app .wl-iconbtn:hover { background: var(--wl-surface-3); }
.wl-app .wl-iconbtn--soft { background: var(--wl-surface-3); color: var(--wl-ink); }
.wl-app .wl-iconbtn--soft:hover { background: var(--wl-sunken); }
.wl-app .wl-iconbtn--float { background: var(--wl-surface); box-shadow: var(--wl-shadow-2); color: var(--wl-ink); }
.wl-app .wl-iconbtn__badge {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--wl-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.wl-app .wl-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wl-tap);
  color: var(--wl-accent-soft-ink);
  font-weight: 600;
  font-size: var(--wl-fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.wl-app .wl-link--danger { color: var(--wl-danger); align-self: center; }

.wl-app .wl-actions { display: flex; flex-wrap: wrap; gap: var(--wl-s3); align-items: center; }
.wl-app .wl-actions--stack { flex-direction: column; align-items: stretch; }
.wl-app .wl-inline-actions { display: flex; flex-wrap: wrap; gap: var(--wl-s2); }

/* ---------- Page, sections, cartes ---------- */

.wl-app .wl-page {
  display: flex;
  flex-direction: column;
  gap: var(--wl-s5);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--wl-s5) var(--wl-s4) var(--wl-s10);
}
.wl-app .wl-page--narrow { max-width: 760px; }

.wl-app .wl-ph { display: flex; align-items: flex-start; gap: var(--wl-s3); }
.wl-app .wl-ph__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wl-app .wl-ph__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-s2); font-size: var(--wl-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wl-muted); }
.wl-app .wl-ph__title { font-size: var(--wl-fs-2xl); font-weight: 600; }
.wl-app .wl-ph__sub { color: var(--wl-muted); max-width: 62ch; }
.wl-app .wl-ph__right { display: flex; gap: var(--wl-s2); flex-wrap: wrap; justify-content: flex-end; }

.wl-app .wl-section { display: flex; flex-direction: column; gap: var(--wl-s3); min-width: 0; }
.wl-app .wl-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wl-s3); }
.wl-app .wl-section__title { font-size: var(--wl-fs-lg); font-weight: 600; }
.wl-app .wl-section__sub { color: var(--wl-muted); font-size: var(--wl-fs-sm); }

.wl-app .wl-card {
  background: var(--wl-surface);
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-r-lg);
  padding: var(--wl-s4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wl-s3);
}
.wl-app .wl-card--flush { padding: 0; overflow: hidden; }
.wl-app .wl-card--soft { background: var(--wl-surface-2); }
.wl-app .wl-card--danger { background: var(--wl-danger-soft); border-color: color-mix(in srgb, var(--wl-danger) 25%, transparent); }
.wl-app .wl-card--accent { background: var(--wl-accent-soft); border-color: transparent; }

.wl-app .wl-grid { display: grid; gap: var(--wl-s4); min-width: 0; }
.wl-app .wl-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.wl-app .wl-grid--2 { grid-template-columns: 1fr; }
.wl-app .wl-grid--3 { grid-template-columns: 1fr; }
.wl-app .wl-stack { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-stack--sm { gap: var(--wl-s2); }
.wl-app .wl-stack--md { gap: var(--wl-s4); }
.wl-app .wl-stack--lg { gap: var(--wl-s6); }
.wl-app .wl-split { display: grid; gap: var(--wl-s5); grid-template-columns: 1fr; }
.wl-app .wl-split__main, .wl-app .wl-split__aside { display: flex; flex-direction: column; gap: var(--wl-s5); min-width: 0; }

/* ---------- Badges, étiquettes ---------- */

.wl-app .wl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--wl-r-pill);
  font-size: var(--wl-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--wl-surface-3);
  color: var(--wl-ink-2);
}
.wl-app .wl-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wl-app .wl-badge--ok { background: var(--wl-ok-soft); color: var(--wl-ok); }
.wl-app .wl-badge--warn { background: var(--wl-warn-soft); color: var(--wl-warn); }
.wl-app .wl-badge--danger { background: var(--wl-danger-soft); color: var(--wl-danger); }
.wl-app .wl-badge--info { background: var(--wl-info-soft); color: var(--wl-info); }
.wl-app .wl-badge--accent { background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); }

.wl-app .wl-prop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--wl-r-pill);
  border: 1px dashed var(--wl-amber-500);
  color: var(--wl-warn);
  background: var(--wl-amber-100);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.wl-app .wl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-app .wl-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--wl-r-pill);
  background: var(--wl-surface-3);
  color: var(--wl-ink-2);
  font-size: var(--wl-fs-xs);
  font-weight: 600;
}
.wl-app .wl-tag.is-ok { background: var(--wl-ok-soft); color: var(--wl-ok); }

.wl-app .wl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--wl-r-pill);
  font-size: var(--wl-fs-sm);
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--wl-shadow-2);
  background: var(--wl-surface);
  color: var(--wl-ink);
  max-width: 100%;
}
.wl-app .wl-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wl-app .wl-chip--soft { background: var(--wl-surface-2); box-shadow: none; border: 1px solid var(--wl-line); }
.wl-app .wl-chip--dark { background: var(--wl-navy-900); color: #fff; }
.wl-app .wl-chip--warn { background: var(--wl-warn-soft); color: var(--wl-warn); }
.wl-app .wl-chip--danger { background: var(--wl-danger-soft); color: var(--wl-danger); }
.wl-app .wl-chip--info { background: var(--wl-info-soft); color: var(--wl-info); }
.wl-app .wl-chip--ok { background: var(--wl-ok-soft); color: var(--wl-ok); }
.wl-app .wl-chip__pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wl-teal-500);
}
.wl-app .wl-chip__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--wl-teal-500);
  animation: wl-pulse 1.8s var(--wl-ease) infinite;
}
@keyframes wl-pulse { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Clé / valeur ---------- */

.wl-app .wl-kv { display: grid; gap: 0; border: 1px solid var(--wl-line); border-radius: var(--wl-r-md); overflow: hidden; background: var(--wl-surface); }
.wl-app .wl-kv__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wl-s3); padding: 10px 14px; border-top: 1px solid var(--wl-line); min-width: 0; }
.wl-app .wl-kv__row:first-child { border-top: 0; }
.wl-app .wl-kv dt { color: var(--wl-muted); font-size: var(--wl-fs-sm); flex: none; max-width: 48%; }
.wl-app .wl-kv dd { font-weight: 650; text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wl-app .wl-kv__row.is-strong dd { font-size: var(--wl-fs-lg); }
.wl-app .wl-kv__row.is-ok dd { color: var(--wl-ok); }
.wl-app .wl-kv--2 { grid-template-columns: 1fr 1fr; }
.wl-app .wl-kv--2 .wl-kv__row { flex-direction: column; align-items: flex-start; gap: 2px; border-left: 1px solid var(--wl-line); }
.wl-app .wl-kv--2 .wl-kv__row:nth-child(2) { border-top: 0; }
.wl-app .wl-kv--2 .wl-kv__row:nth-child(odd) { border-left: 0; }
.wl-app .wl-kv--2 dt { max-width: none; font-size: var(--wl-fs-xs); }
.wl-app .wl-kv--2 dd { text-align: left; }

/* ---------- Statistiques ---------- */

.wl-app .wl-stats { display: grid; gap: var(--wl-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.wl-app .wl-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--wl-s4);
  border-radius: var(--wl-r-lg);
  background: var(--wl-surface);
  border: 1px solid var(--wl-line);
  min-width: 0;
  text-align: left;
}
.wl-app .wl-stat--link { cursor: pointer; transition: border-color var(--wl-dur-fast); }
.wl-app .wl-stat--link:hover { border-color: var(--wl-accent); }
.wl-app .wl-stat__icon { color: var(--wl-accent); margin-bottom: 4px; }
.wl-app .wl-stat__label { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-stat__value { font-family: var(--wl-font-display); font-size: clamp(0.95rem, 12.5cqi, var(--wl-fs-xl)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-app .wl-stat { container-type: inline-size; }
.wl-app .wl-stat__sub { color: var(--wl-muted); font-size: var(--wl-fs-xs); }
.wl-app .wl-stat--accent { background: var(--wl-navy-900); border-color: var(--wl-navy-900); }
.wl-app .wl-stat--accent .wl-stat__value { color: #fff; }
.wl-app .wl-stat--accent .wl-stat__label, .wl-app .wl-stat--accent .wl-stat__sub { color: #b9ccd8; }
.wl-app .wl-stat--ok .wl-stat__value { color: var(--wl-ok); }
.wl-app .wl-stat--warn { border-color: color-mix(in srgb, var(--wl-warn) 35%, var(--wl-line)); }
.wl-app .wl-stat--warn .wl-stat__value { color: var(--wl-warn); }
.wl-app .wl-stat--danger { border-color: color-mix(in srgb, var(--wl-danger) 35%, var(--wl-line)); }
.wl-app .wl-stat--danger .wl-stat__value { color: var(--wl-danger); }

/* ---------- Personnes ---------- */

.wl-app .wl-avatar {
  width: var(--s, 44px);
  height: var(--s, 44px);
  border-radius: 30%;
  object-fit: cover;
  flex: none;
}
.wl-app .wl-avatar--initials {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--wl-teal-500), var(--wl-navy-700));
  color: #fff;
  font-family: var(--wl-font-display);
  font-weight: 600;
  font-size: calc(var(--s, 44px) * 0.36);
  letter-spacing: 0.02em;
}
.wl-app .wl-person { display: flex; align-items: center; gap: var(--wl-s3); min-width: 0; }
.wl-app .wl-person__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wl-app .wl-person__name { font-weight: 700; overflow-wrap: anywhere; }
.wl-app .wl-person__sub { color: var(--wl-muted); font-size: var(--wl-fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wl-app .wl-person__right { flex: none; }
.wl-app .wl-star { color: var(--wl-amber-500); fill: var(--wl-amber-500); display: inline; vertical-align: -2px; }

.wl-app .wl-pcard { display: flex; flex-direction: column; gap: var(--wl-s3); padding: var(--wl-s4); border-radius: var(--wl-r-lg); border: 1px solid var(--wl-line); background: var(--wl-surface); }
.wl-app .wl-pcard__note { display: flex; gap: 6px; align-items: flex-start; font-size: var(--wl-fs-sm); color: var(--wl-muted); }
.wl-app .wl-contact { display: flex; gap: var(--wl-s2); }

/* ---------- Listes ---------- */

.wl-app .wl-list { display: flex; flex-direction: column; background: var(--wl-surface); border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); overflow: hidden; }
.wl-app .wl-row {
  display: flex;
  align-items: center;
  gap: var(--wl-s3);
  min-height: 60px;
  padding: 10px var(--wl-s4);
  border-top: 1px solid var(--wl-line);
  width: 100%;
  min-width: 0;
  color: var(--wl-ink);
}
.wl-app .wl-row:first-child { border-top: 0; }
.wl-app .wl-row--link { transition: background-color var(--wl-dur-fast); }
.wl-app .wl-row--link:hover { background: var(--wl-surface-2); }
.wl-app .wl-row__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--wl-r-md);
  background: var(--wl-accent-soft);
  color: var(--wl-accent-soft-ink);
  flex: none;
}
.wl-app .wl-row__icon.is-ok { background: var(--wl-ok-soft); color: var(--wl-ok); }
.wl-app .wl-row__icon.is-danger { background: var(--wl-danger-soft); color: var(--wl-danger); }
.wl-app .wl-row__icon.is-warn { background: var(--wl-warn-soft); color: var(--wl-warn); }
.wl-app .wl-row__icon.is-neutral { background: var(--wl-surface-3); color: var(--wl-muted); }
.wl-app .wl-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-app .wl-row__title { font-weight: 650; overflow-wrap: anywhere; }
.wl-app .wl-row__sub { color: var(--wl-muted); font-size: var(--wl-fs-sm); overflow-wrap: anywhere; }
.wl-app .wl-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 650; flex: 0 1 auto; min-width: 0; max-width: 50%; text-align: right; }
.wl-app .wl-row__meta .wl-badge { white-space: normal; text-align: left; }
.wl-app .wl-row__chev { color: var(--wl-muted); }

/* ---------- Tableaux (cartes en étroit) ---------- */

.wl-app .wl-table { overflow-x: auto; border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); background: var(--wl-surface); }
.wl-app .wl-table table { width: 100%; border-collapse: collapse; font-size: var(--wl-fs-sm); }
.wl-app .wl-table th { text-align: left; font-weight: 700; font-size: var(--wl-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wl-muted); padding: 10px 14px; background: var(--wl-surface-2); border-bottom: 1px solid var(--wl-line); white-space: nowrap; }
.wl-app .wl-table td { padding: 10px 14px; border-bottom: 1px solid var(--wl-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.wl-app .wl-table tr:last-child td { border-bottom: 0; }
.wl-app .wl-table .is-right { text-align: right; }
.wl-app .wl-table__go { width: 52px; text-align: right; }

/* ---------- Onglets, progression, étapes ---------- */

.wl-app .wl-tabs { display: flex; gap: 4px; padding: 4px; background: var(--wl-surface-3); border-radius: var(--wl-r-pill); overflow-x: auto; scrollbar-width: none; max-width: 100%; align-self: flex-start; }
.wl-app .wl-tabs__tab { min-height: 38px; padding: 0 16px; border-radius: var(--wl-r-pill); font-weight: 650; font-size: var(--wl-fs-sm); color: var(--wl-muted); white-space: nowrap; }
.wl-app .wl-tabs__tab[aria-selected="true"] { background: var(--wl-surface); color: var(--wl-ink); box-shadow: var(--wl-shadow-1); }

.wl-app .wl-progress { height: 8px; border-radius: 4px; background: var(--wl-surface-3); overflow: hidden; }
.wl-app .wl-progress > span { display: block; height: 100%; background: var(--wl-accent); border-radius: inherit; transition: width var(--wl-dur-slow) var(--wl-ease); }
.wl-app .wl-progress--warn > span { background: var(--wl-amber-500); }

.wl-app .wl-stepper { display: flex; gap: 4px; }
.wl-app .wl-stepper__step { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 650; color: var(--wl-muted); min-width: 0; }
.wl-app .wl-stepper__step::before { content: ""; height: 4px; border-radius: 2px; background: var(--wl-surface-3); }
.wl-app .wl-stepper__step.is-done::before, .wl-app .wl-stepper__step.is-current::before { background: var(--wl-accent); }
.wl-app .wl-stepper__step.is-current { color: var(--wl-ink); }
.wl-app .wl-stepper__dot { display: none; }
.wl-app .wl-stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wl-app .wl-timeline { display: flex; flex-direction: column; }
.wl-app .wl-timeline__item { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: var(--wl-s3); padding-bottom: var(--wl-s4); }
.wl-app .wl-timeline__item::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--wl-line); }
.wl-app .wl-timeline__item:last-child::before { display: none; }
.wl-app .wl-timeline__dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; border: 3px solid var(--wl-accent); background: var(--wl-surface); }
.wl-app .wl-timeline__item.is-danger .wl-timeline__dot { border-color: var(--wl-danger); }
.wl-app .wl-timeline__item > div { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-timeline__item span { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-timeline__item time { color: var(--wl-muted); font-size: var(--wl-fs-sm); font-variant-numeric: tabular-nums; }

/* ---------- Formulaires ---------- */

.wl-app .wl-form { display: flex; flex-direction: column; gap: var(--wl-s4); }
.wl-app .wl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-app .wl-field__label { font-weight: 650; font-size: var(--wl-fs-sm); color: var(--wl-ink); }
.wl-app .wl-field__req { color: var(--wl-danger); }
.wl-app .wl-field__hint { color: var(--wl-muted); font-size: var(--wl-fs-xs); }
.wl-app .wl-field__error { display: flex; gap: 6px; align-items: center; color: var(--wl-danger); font-size: var(--wl-fs-sm); font-weight: 600; }
.wl-app .wl-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--wl-r-md);
  border: 1.5px solid var(--wl-line-strong);
  background: var(--wl-surface);
  color: var(--wl-ink);
  font-size: 16px; /* évite le zoom iOS */
  transition: border-color var(--wl-dur-fast), box-shadow var(--wl-dur-fast);
}
.wl-app textarea.wl-input { min-height: 88px; resize: vertical; }
.wl-app .wl-input:focus { outline: none; border-color: var(--wl-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wl-accent) 18%, transparent); }
.wl-app .wl-input[aria-invalid="true"] { border-color: var(--wl-danger); }
.wl-app .wl-input-group { display: flex; align-items: stretch; }
.wl-app .wl-input-group__prefix { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--wl-line-strong); border-right: 0; border-radius: var(--wl-r-md) 0 0 var(--wl-r-md); background: var(--wl-surface-2); font-weight: 650; color: var(--wl-ink-2); }
.wl-app .wl-input-group .wl-input { border-radius: 0 var(--wl-r-md) var(--wl-r-md) 0; }

.wl-app .wl-choices { display: grid; gap: var(--wl-s2); grid-template-columns: 1fr; }
.wl-app .wl-choices legend { margin-bottom: var(--wl-s2); }
.wl-app .wl-choice { position: relative; display: block; cursor: pointer; }
.wl-app .wl-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wl-app .wl-choice__box {
  display: flex;
  align-items: center;
  gap: var(--wl-s3);
  min-height: 60px;
  padding: 12px 14px;
  border-radius: var(--wl-r-md);
  border: 1.5px solid var(--wl-line);
  background: var(--wl-surface);
  transition: border-color var(--wl-dur-fast), background-color var(--wl-dur-fast);
}
.wl-app .wl-choice__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--wl-r-md); background: var(--wl-surface-3); color: var(--wl-ink-2); flex: none; }
.wl-app .wl-choice__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-app .wl-choice__text span { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-choice__meta { font-weight: 700; white-space: nowrap; }
.wl-app .wl-choice__check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--wl-line-strong); color: transparent; flex: none; }
.wl-app .wl-choice input:checked + .wl-choice__box { border-color: var(--wl-accent); background: var(--wl-accent-soft); }
.wl-app .wl-choice input:checked + .wl-choice__box .wl-choice__check { background: var(--wl-accent); border-color: var(--wl-accent); color: #fff; }
.wl-app .wl-choice input:checked + .wl-choice__box .wl-choice__icon { background: var(--wl-accent); color: #fff; }
.wl-app .wl-choice input:focus-visible + .wl-choice__box { outline: 3px solid var(--wl-focus); outline-offset: 2px; }

.wl-app .wl-toggle { display: flex; align-items: center; gap: var(--wl-s3); min-height: 56px; cursor: pointer; position: relative; }
.wl-app .wl-toggle + .wl-toggle { border-top: 1px solid var(--wl-line); }
.wl-app .wl-toggle__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-app .wl-toggle__text span { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wl-app .wl-toggle__track { width: 46px; height: 28px; border-radius: 14px; background: var(--wl-line-strong); position: relative; flex: none; transition: background-color var(--wl-dur); }
.wl-app .wl-toggle__track span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--wl-shadow-1); transition: transform var(--wl-dur) var(--wl-ease); }
.wl-app .wl-toggle input:checked + .wl-toggle__track { background: var(--wl-accent); }
.wl-app .wl-toggle input:checked + .wl-toggle__track span { transform: translateX(18px); }
.wl-app .wl-toggle input:focus-visible + .wl-toggle__track { outline: 3px solid var(--wl-focus); outline-offset: 2px; }

.wl-app .wl-check { display: flex; align-items: center; gap: var(--wl-s3); min-height: var(--wl-tap); cursor: pointer; }
.wl-app .wl-check input { width: 22px; height: 22px; accent-color: var(--wl-accent); flex: none; }
.wl-app .wl-checklist { display: flex; flex-direction: column; padding: 6px 14px; border: 1px solid var(--wl-line); border-radius: var(--wl-r-md); background: var(--wl-surface); }
.wl-app .wl-checklist legend { padding-top: 8px; }

.wl-app .wl-otp { display: flex; gap: 8px; }
.wl-app .wl-otp__cell { width: 48px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; border-radius: var(--wl-r-md); border: 1.5px solid var(--wl-line-strong); background: var(--wl-surface); min-width: 0; flex: 1; max-width: 52px; }
.wl-app .wl-otp__cell:focus { outline: none; border-color: var(--wl-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wl-accent) 18%, transparent); }

/* ---------- Bannières, états vides, squelettes ---------- */

.wl-app .wl-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wl-s3);
  padding: 12px 14px;
  border-radius: var(--wl-r-md);
  background: var(--wl-info-soft);
  color: var(--wl-ink);
  border: 1px solid transparent;
}
.wl-app .wl-banner__icon { margin-top: 1px; color: var(--wl-info); }
.wl-app .wl-banner__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; font-size: var(--wl-fs-sm); }
.wl-app .wl-banner__text strong { font-size: var(--wl-fs-md); }
.wl-app .wl-banner > .wl-btn, .wl-app .wl-banner > .wl-iconbtn { flex: none; }
.wl-app .wl-banner--warn { background: var(--wl-warn-soft); }
.wl-app .wl-banner--warn .wl-banner__icon { color: var(--wl-warn); }
.wl-app .wl-banner--danger { background: var(--wl-danger-soft); }
.wl-app .wl-banner--danger .wl-banner__icon { color: var(--wl-danger); }
.wl-app .wl-banner--ok { background: var(--wl-ok-soft); }
.wl-app .wl-banner--ok .wl-banner__icon { color: var(--wl-ok); }
.wl-app .wl-banner--neutral { background: var(--wl-surface-3); }

.wl-app .wl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wl-s3); padding: var(--wl-s10) var(--wl-s4); }
.wl-app .wl-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); }
.wl-app .wl-empty--danger .wl-empty__icon { background: var(--wl-danger-soft); color: var(--wl-danger); }
.wl-app .wl-empty__title { font-size: var(--wl-fs-xl); font-weight: 600; }
.wl-app .wl-empty__text { color: var(--wl-muted); max-width: 46ch; }
.wl-app .wl-empty__action { display: flex; flex-wrap: wrap; gap: var(--wl-s3); justify-content: center; margin-top: var(--wl-s2); }

.wl-app .wl-skel { display: flex; flex-direction: column; gap: var(--wl-s3); }
.wl-app .wl-skel__line, .wl-app .wl-skel__card span, .wl-app .wl-skel__map, .wl-app .wl-mapview__skeleton {
  background: linear-gradient(90deg, var(--wl-surface-3) 0%, var(--wl-surface-2) 50%, var(--wl-surface-3) 100%);
  background-size: 200% 100%;
  animation: wl-shimmer 1.2s linear infinite;
}
.wl-app .wl-skel__line { display: block; height: 14px; border-radius: 7px; }
.wl-app .wl-skel__card { display: flex; flex-direction: column; gap: 10px; padding: var(--wl-s4); border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); background: var(--wl-surface); }
.wl-app .wl-skel__card span { display: block; height: 12px; border-radius: 6px; }
.wl-app .wl-skel__card span:first-child { width: 40%; height: 18px; }
.wl-app .wl-skel__card span:last-child { width: 70%; }
.wl-app .wl-skel__map { height: 180px; border-radius: var(--wl-r-lg); }
@keyframes wl-shimmer { to { background-position: -200% 0; } }

/* ---------- Modales, tiroir, toasts ---------- */

.wl-app .wl-modal { position: absolute; inset: 0; z-index: 60; display: grid; align-items: end; justify-items: center; }
.wl-app .wl-modal[hidden] { display: none; }
.wl-app .wl-modal__backdrop { position: absolute; inset: 0; background: var(--wl-overlay); animation: wl-fade var(--wl-dur) var(--wl-ease); }
.wl-app .wl-modal__panel {
  position: relative;
  width: 100%;
  max-height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  background: var(--wl-surface);
  border-radius: var(--wl-r-xl) var(--wl-r-xl) 0 0;
  box-shadow: var(--wl-shadow-3);
  animation: wl-rise var(--wl-dur-slow) var(--wl-ease);
  padding-bottom: var(--wl-safe-bottom);
}
.wl-app .wl-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wl-s3); padding: var(--wl-s4) var(--wl-s4) 0 var(--wl-s5); }
.wl-app .wl-modal__head h2 { font-size: var(--wl-fs-xl); font-weight: 600; }
.wl-app .wl-modal__body { padding: var(--wl-s4) var(--wl-s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--wl-s4); }
.wl-app .wl-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--wl-s3); padding: var(--wl-s3) var(--wl-s5) var(--wl-s5); border-top: 1px solid var(--wl-line); }
@keyframes wl-fade { from { opacity: 0; } }
@keyframes wl-rise { from { transform: translateY(24px); opacity: 0; } }

.wl-app .wl-toasts { position: absolute; left: 50%; bottom: calc(var(--wl-tabbar-h) + 16px + var(--wl-safe-bottom)); transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.wl-app .wl-toast {
  padding: 12px 16px;
  border-radius: var(--wl-r-md);
  background: var(--wl-navy-900);
  color: #fff;
  font-size: var(--wl-fs-sm);
  font-weight: 600;
  box-shadow: var(--wl-shadow-3);
  animation: wl-rise var(--wl-dur) var(--wl-ease);
  border-left: 4px solid var(--wl-teal-500);
  transition: opacity var(--wl-dur), transform var(--wl-dur);
}
.wl-app .wl-toast--danger { border-left-color: #f07b72; }
.wl-app .wl-toast--warn { border-left-color: var(--wl-amber-500); }
.wl-app .wl-toast--info { border-left-color: #7fb0f0; }
.wl-app .wl-toast.is-leaving { opacity: 0; transform: translateY(8px); }

/* ---------- Mission : en-tête, lieux, ETA, chronomètre, facture ---------- */

.wl-app .wl-mhead { display: flex; flex-direction: column; gap: 6px; }
.wl-app .wl-mhead__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-s2); }
.wl-app .wl-mhead__ref { font-size: var(--wl-fs-xs); font-weight: 650; color: var(--wl-muted); background: var(--wl-surface-3); padding: 3px 10px; border-radius: var(--wl-r-pill); white-space: nowrap; }
.wl-app .wl-mhead__title { font-size: var(--wl-fs-2xl); font-weight: 600; }
.wl-app .wl-mhead__sub { color: var(--wl-muted); font-size: var(--wl-fs-sm); overflow-wrap: anywhere; }

.wl-app .wl-places { display: flex; flex-direction: column; padding: var(--wl-s3) var(--wl-s4); border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); background: var(--wl-surface); }
.wl-app .wl-places__item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: var(--wl-s3); padding: 8px 0; }
.wl-app .wl-places__item + .wl-places__item::before { content: ""; position: absolute; left: 7px; top: -14px; height: 22px; border-left: 2px dotted var(--wl-line-strong); }
.wl-app .wl-places__item > div { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-places__item strong { overflow-wrap: anywhere; font-weight: 650; }
.wl-app .wl-places__label { font-size: var(--wl-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wl-muted); }
.wl-app .wl-places__dot { width: 16px; height: 16px; border-radius: 50%; margin-top: 4px; border: 4px solid var(--wl-navy-800); background: var(--wl-surface); }
.wl-app .wl-places__dot.is-appt { border-color: var(--wl-amber-500); border-radius: 4px; }

.wl-app .wl-note { display: flex; gap: var(--wl-s2); padding: 12px 14px; border-radius: var(--wl-r-md); background: var(--wl-amber-100); color: var(--wl-ink); font-size: var(--wl-fs-sm); }
.wl-app .wl-note .wl-icon { color: var(--wl-warn); margin-top: 2px; }

.wl-app .wl-eta { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; background: var(--wl-line); border-radius: var(--wl-r-lg); overflow: hidden; border: 1px solid var(--wl-line); }
.wl-app .wl-eta > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--wl-surface); min-width: 0; }
.wl-app .wl-eta__big { font-family: var(--wl-font-display); font-size: var(--wl-fs-3xl); font-weight: 600; line-height: 1; color: var(--wl-accent-soft-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-app .wl-eta__mid { font-family: var(--wl-font-display); font-size: var(--wl-fs-xl); font-weight: 600; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-app .wl-eta__label { font-size: var(--wl-fs-xs); color: var(--wl-muted); }

.wl-app .wl-timer {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wl-s4);
  padding: var(--wl-s4);
  border-radius: var(--wl-r-lg);
  background: var(--wl-navy-900);
  color: #fff;
}
.wl-app .wl-timer__ring {
  --p: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(var(--wl-teal-500) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0);
  display: grid;
  place-items: center;
  transition: background var(--wl-dur-slow);
}
.wl-app .wl-timer__ring span { width: 50px; height: 50px; border-radius: 50%; background: var(--wl-navy-900); }
.wl-app .wl-timer[data-wl-timer-state="ending"] .wl-timer__ring { background: conic-gradient(var(--wl-amber-500) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0); }
.wl-app .wl-timer[data-wl-timer-state="overtime"] .wl-timer__ring { background: var(--wl-amber-500); }
.wl-app .wl-timer__main { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-timer__label { font-size: var(--wl-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: #9fd9cf; font-weight: 700; }
.wl-app .wl-timer__value { font-family: var(--wl-font-display); font-size: 2.4rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.wl-app .wl-timer__meta { font-size: var(--wl-fs-sm); color: #c4d4de; }
.wl-app .wl-timer__meta strong { color: #fff; white-space: nowrap; }
.wl-app .wl-timer__flag { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--wl-r-pill); background: var(--wl-amber-500); color: #2b1a00; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.wl-app .wl-timer__flag[hidden] { display: none; }

.wl-app .wl-bill { display: flex; flex-direction: column; gap: var(--wl-s3); padding: var(--wl-s4); border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); background: var(--wl-surface); }
.wl-app .wl-card .wl-bill { border: 0; padding: 0; }
.wl-app .wl-bill__head { display: flex; justify-content: space-between; align-items: center; gap: var(--wl-s2); font-weight: 700; flex-wrap: wrap; }
.wl-app .wl-bill__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--wl-line); border-radius: var(--wl-r-md); overflow: hidden; }
.wl-app .wl-bill__rules > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--wl-surface-2); min-width: 0; }
.wl-app .wl-bill__rules small { font-size: 11px; color: var(--wl-muted); line-height: 1.25; }
.wl-app .wl-bill__rules > span { container-type: inline-size; }
.wl-app .wl-bill__rules strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(0.78rem, 13cqi, var(--wl-fs-md)); }
.wl-app .wl-bill__rules em { font-style: normal; font-size: 11px; color: var(--wl-muted); }
.wl-app .wl-bill__lines { display: flex; flex-direction: column; }
.wl-app .wl-bill__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wl-s3); padding: 8px 0; border-top: 1px dashed var(--wl-line); }
.wl-app .wl-bill__line:first-child { border-top: 0; }
.wl-app .wl-bill__line > span:first-child { display: flex; flex-direction: column; min-width: 0; color: var(--wl-ink-2); }
.wl-app .wl-bill__line small { color: var(--wl-muted); font-size: var(--wl-fs-xs); }
.wl-app .wl-bill__line .wl-money { font-weight: 650; }
.wl-app .wl-bill__line.is-ok .wl-money { color: var(--wl-ok); }
.wl-app .wl-bill__line.is-warn .wl-money { color: var(--wl-warn); }
.wl-app .wl-bill__line.is-strong { border-top: 1.5px solid var(--wl-ink); margin-top: 4px; padding-top: 10px; }
.wl-app .wl-bill__line.is-strong > span:first-child { color: var(--wl-ink); font-weight: 700; }
.wl-app .wl-bill__line.is-strong .wl-money { font-family: var(--wl-font-display); font-size: var(--wl-fs-xl); font-weight: 600; }

.wl-app .wl-wait { display: flex; gap: var(--wl-s3); align-items: flex-start; }
.wl-app .wl-wait__icon { color: var(--wl-accent); }
.wl-app .wl-wait > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--wl-fs-sm); color: var(--wl-muted); }
.wl-app .wl-wait strong { color: var(--wl-ink); font-size: var(--wl-fs-md); }

.wl-app .wl-hero-ok { display: flex; gap: var(--wl-s4); align-items: flex-start; }
.wl-app .wl-hero-ok__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 20px; background: var(--wl-ok-soft); color: var(--wl-ok); flex: none; }
.wl-app .wl-hero-ok > div { display: flex; flex-direction: column; gap: 4px; }

.wl-app .wl-steps-list { list-style: decimal; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; color: var(--wl-ink-2); font-size: var(--wl-fs-sm); }
.wl-app .wl-rules { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--wl-fs-sm); color: var(--wl-ink-2); }

.wl-app .wl-sos { display: flex; flex-wrap: wrap; gap: var(--wl-s4); align-items: center; justify-content: space-between; }
.wl-app .wl-sos > div:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.wl-app .wl-sos > div:first-child span { color: var(--wl-ink-2); font-size: var(--wl-fs-sm); }
.wl-app .wl-sos__nums { display: flex; gap: var(--wl-s2); }
.wl-app .wl-sos__num { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; min-height: 60px; padding: 6px 10px; border-radius: var(--wl-r-md); background: var(--wl-danger); color: #fff; font-family: var(--wl-font-display); font-size: var(--wl-fs-xl); font-weight: 700; line-height: 1; }
.wl-app .wl-sos__num small { font-family: var(--wl-font-body); font-size: 11px; font-weight: 600; opacity: 0.9; margin-bottom: 4px; }

/* ---------- Messagerie ---------- */

.wl-app .wl-chat { display: flex; flex-direction: column; height: 100%; max-width: 820px; margin: 0 auto; width: 100%; }
.wl-app .wl-chat__head { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s3) var(--wl-s4); border-bottom: 1px solid var(--wl-line); background: var(--wl-surface); }
.wl-app .wl-chat__head .wl-person { flex: 1; }
.wl-app .wl-chat__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--wl-s3); padding: var(--wl-s4); }
.wl-app .wl-chat__notice { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: var(--wl-fs-xs); color: var(--wl-muted); text-align: center; }
.wl-app .wl-chat__sys { align-self: center; max-width: 90%; text-align: center; font-size: var(--wl-fs-xs); color: var(--wl-muted); background: var(--wl-surface-3); padding: 6px 12px; border-radius: var(--wl-r-pill); }
.wl-app .wl-msg { max-width: min(80%, 460px); display: flex; flex-direction: column; gap: 2px; }
.wl-app .wl-msg p { padding: 10px 14px; border-radius: 18px; background: var(--wl-surface); border: 1px solid var(--wl-line); overflow-wrap: anywhere; }
.wl-app .wl-msg time { font-size: 11px; color: var(--wl-muted); padding: 0 6px; }
.wl-app .wl-msg.is-me { align-self: flex-end; align-items: flex-end; }
.wl-app .wl-msg.is-me p { background: var(--wl-navy-800); color: #fff; border-color: transparent; border-bottom-right-radius: 6px; }
.wl-app .wl-msg.is-them p { border-bottom-left-radius: 6px; }
.wl-app .wl-chat__form { display: grid; grid-template-columns: 1fr auto; gap: var(--wl-s2); padding: var(--wl-s3) var(--wl-s4) calc(var(--wl-s3) + var(--wl-safe-bottom)); border-top: 1px solid var(--wl-line); background: var(--wl-surface); align-items: end; }
.wl-app .wl-chat__form textarea { min-height: 48px; resize: none; }
.wl-app .wl-chat__quick { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wl-app .wl-chat__quick .wl-chip { min-height: 32px; font-size: var(--wl-fs-xs); }
.wl-app .wl-chat__closed { display: flex; gap: 8px; align-items: center; justify-content: center; padding: var(--wl-s4); border-top: 1px solid var(--wl-line); color: var(--wl-muted); font-size: var(--wl-fs-sm); background: var(--wl-surface-2); }

/* ---------- Notifications ---------- */

.wl-app .wl-notif { display: flex; align-items: flex-start; gap: var(--wl-s3); padding: 14px var(--wl-s4); border-top: 1px solid var(--wl-line); text-align: left; width: 100%; position: relative; }
.wl-app .wl-notif:first-child { border-top: 0; }
.wl-app .wl-notif:hover { background: var(--wl-surface-2); }
.wl-app .wl-notif.is-unread { background: color-mix(in srgb, var(--wl-accent-soft) 60%, var(--wl-surface)); }
.wl-app .wl-notif__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-app .wl-notif__text span { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-notif time { font-size: var(--wl-fs-xs); color: var(--wl-muted); white-space: nowrap; }
.wl-app .wl-notif__dot { position: absolute; top: 18px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--wl-accent); }

/* ---------- Carte ---------- */

.wl-app .wl-map__svg { width: 100%; height: 100%; display: block; touch-action: manipulation; }
.wl-app .wl-map__controls { position: absolute; right: 12px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.wl-app .wl-mk__pulse { animation: wl-mkpulse 2s var(--wl-ease) infinite; transform-origin: center; transform-box: fill-box; }
.wl-app .wl-mk { transition: transform var(--wl-dur-slow) linear; }
@keyframes wl-mkpulse { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- Divers ---------- */

.wl-app .wl-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wl-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; color: inherit; }
.wl-app .wl-logo svg { color: var(--wl-amber-500); }
.wl-app .wl-divider { height: 1px; background: var(--wl-line); border: 0; margin: 0; }

/* Carte : éléments à taille constante à l'écran, quel que soit le zoom */
.wl-app .wl-pin { transform: translate(var(--x), var(--y)) scale(var(--k, 1)); transition: transform var(--wl-dur-slow) linear; }
.wl-app .wl-map__roads path,
.wl-app .wl-map__route path,
.wl-app .wl-map__blocks line,
.wl-app .wl-map__coast,
.wl-app .wl-map__acc,
.wl-app .wl-map__halo { vector-effect: non-scaling-stroke; }
.wl-app .wl-sheet__body > *, .wl-app .wl-modal__body > * { flex-shrink: 0; }
.wl-app .wl-ph__title, .wl-app .wl-mhead__title, .wl-app .wl-h1 { overflow-wrap: break-word; hyphens: auto; }
.wl-app .wl-sheet .wl-ph__title { font-size: var(--wl-fs-2xl); }

/* ===== css/responsive.css ===== */
/* ==========================================================================
   Gabarits et responsive.
   Les points de rupture sont des requêtes de conteneur (@container wl) :
   l'interface s'adapte à la largeur de son conteneur, pas de la fenêtre.
   Elle fonctionne donc aussi bien en plein écran que dans une colonne
   de page WordPress.
     < 720 px  : mobile (carte + fiche inférieure, barre d'onglets)
     ≥ 720 px  : tablette (carte + colonne, barre d'onglets)
     ≥ 1024 px : desktop (barre latérale, pas d'onglets)
   ========================================================================== */

.wl-app .wl-shell { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; }
.wl-app .wl-body { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.wl-app .wl-main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; }
.wl-app .wl-banners { display: flex; flex-direction: column; gap: 6px; padding: 8px var(--wl-s4) 0; }
.wl-app .wl-banners .wl-banner { padding: 8px 12px; }

/* ---------- Barre latérale ---------- */

.wl-app .wl-side {
  display: none;
  flex-direction: column;
  gap: var(--wl-s4);
  width: var(--wl-sidebar-w);
  height: 100%;
  min-height: 0;
  padding: var(--wl-s6) var(--wl-s4) var(--wl-s4);
  background: var(--wl-side-bg);
  color: var(--wl-side-ink);
  overflow-y: auto;
}
.wl-app .wl-side__brand { color: #fff; padding: 0 var(--wl-s2); }
.wl-app .wl-side__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wl-app .wl-side__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--wl-s3);
  min-height: 44px;
  padding: 0 var(--wl-s3);
  border-radius: var(--wl-r-md);
  color: var(--wl-side-ink);
  font-weight: 600;
  font-size: var(--wl-fs-md);
  transition: background-color var(--wl-dur-fast);
  width: 100%;
}
.wl-app .wl-side__item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.wl-app .wl-side__item.is-active { background: var(--wl-side-active); color: #fff; box-shadow: inset 3px 0 0 var(--wl-teal-500); }
.wl-app .wl-side__item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-app .wl-side__badge { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--wl-amber-500); color: #2b1a00; font-size: 11px; font-weight: 800; text-align: center; }
.wl-app .wl-side__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wl-teal-500); box-shadow: 0 0 0 3px rgba(19, 165, 146, 0.25); }
.wl-app .wl-side__sep { height: 1px; background: rgba(255, 255, 255, 0.08); margin: var(--wl-s2) var(--wl-s3); }
.wl-app .wl-side__group { padding: var(--wl-s4) var(--wl-s3) 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #7f97a8; }
.wl-app .wl-side__foot { display: flex; flex-direction: column; gap: var(--wl-s3); }
.wl-app .wl-side__mode {
  display: flex;
  align-items: center;
  gap: var(--wl-s3);
  padding: 10px 12px;
  border-radius: var(--wl-r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 650;
  font-size: var(--wl-fs-sm);
  text-align: left;
}
.wl-app .wl-side__mode:hover { background: rgba(255, 255, 255, 0.06); }
.wl-app .wl-side__mode span { display: flex; flex-direction: column; }
.wl-app .wl-side__mode small { font-weight: 500; color: #9bb1c0; font-size: 11px; }
.wl-app .wl-side__user { display: flex; align-items: center; gap: var(--wl-s3); padding: 0 4px; }
.wl-app .wl-side__user span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-side__user strong { color: #fff; font-size: var(--wl-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-app .wl-side__user small { color: #9bb1c0; font-size: 11px; }
.wl-app .wl-side__status, .wl-app .wl-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--wl-r-pill);
  font-weight: 700;
  font-size: var(--wl-fs-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  align-self: flex-start;
}
.wl-app .wl-side__status-dot { width: 9px; height: 9px; border-radius: 50%; background: #8a99a3; }
.wl-app .is-online .wl-side__status-dot { background: #2fd3a8; box-shadow: 0 0 0 3px rgba(47, 211, 168, 0.25); }
.wl-app .is-busy .wl-side__status-dot { background: var(--wl-amber-500); }
.wl-app .wl-topbar__status { background: var(--wl-surface-3); color: var(--wl-ink); min-height: 36px; }

/* ---------- Barre supérieure (mobile/tablette) ---------- */

.wl-app .wl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wl-s2);
  min-height: 56px;
  padding: calc(4px + var(--wl-safe-top)) var(--wl-s2) 4px;
  background: var(--wl-surface);
  border-bottom: 1px solid var(--wl-line);
  z-index: 5;
}
.wl-app .wl-topbar__left, .wl-app .wl-topbar__right { display: flex; align-items: center; gap: 2px; min-width: 0; }
.wl-app .wl-topbar__brand { display: none; }
.wl-app .wl-topbar__title { font-family: var(--wl-font-display); font-weight: 600; font-size: var(--wl-fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.wl-app .wl-topbar__status span:last-child { display: inline; }

/* ---------- Barre d'onglets ---------- */

.wl-app .wl-tabbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px 4px calc(4px + var(--wl-safe-bottom));
  background: var(--wl-surface);
  border-top: 1px solid var(--wl-line);
  z-index: 10;
}
.wl-app .wl-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  border-radius: var(--wl-r-md);
  color: var(--wl-muted);
  font-size: 11px;
  font-weight: 650;
}
.wl-app .wl-tabbar__item span:nth-child(2) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.wl-app .wl-tabbar__item.is-active { color: var(--wl-accent-soft-ink); background: var(--wl-accent-soft); }
.wl-app .wl-tabbar__dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--wl-amber-500); border: 2px solid var(--wl-surface); }
.wl-app .wl-tabbar__badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--wl-danger); color: #fff; font-size: 10px; line-height: 16px; }

/* ---------- Tiroir (menu mobile) ---------- */

.wl-app .wl-drawer { position: absolute; inset: 0; z-index: 70; }
.wl-app .wl-drawer[hidden] { display: none; }
.wl-app .wl-drawer__backdrop { position: absolute; inset: 0; background: var(--wl-overlay); animation: wl-fade var(--wl-dur); }
.wl-app .wl-drawer__panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(300px, 86%); background: var(--wl-side-bg); display: flex; flex-direction: column; animation: wl-slide var(--wl-dur-slow) var(--wl-ease); }
.wl-app .wl-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + var(--wl-safe-top)) 12px 0 20px; color: #fff; }
.wl-app .wl-drawer__head .wl-iconbtn { color: #fff; }
.wl-app .wl-drawer .wl-side { display: flex; width: 100%; padding-top: var(--wl-s2); flex: 1; }
.wl-app .wl-drawer .wl-side__brand { display: none; }
@keyframes wl-slide { from { transform: translateX(-100%); } }

/* ---------- Gabarit carte + fiche ---------- */

.wl-app .wl-shell--map .wl-main { overflow: hidden; position: relative; }
.wl-app .wl-mapview { position: relative; height: 100%; min-height: 0; }
.wl-app .wl-mapview__map { position: absolute; inset: 0; background: var(--wl-map-sea); overflow: hidden; }
.wl-app .wl-mapview__canvas { position: absolute; inset: 0; }
.wl-app .wl-mapview__skeleton { position: absolute; inset: 0; }
.wl-app .wl-mapview__fallback { position: absolute; inset: 0; }
.wl-app .wl-mapview__static { position: absolute; inset: 0; filter: grayscale(0.7) contrast(0.9); opacity: 0.75; }
.wl-app .wl-mapview__fallback-note { position: absolute; left: 12px; right: 12px; top: 64px; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--wl-r-md); background: var(--wl-surface); box-shadow: var(--wl-shadow-2); font-size: var(--wl-fs-sm); z-index: 2; }
.wl-app .wl-mapview__top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 3; pointer-events: none; }
.wl-app .wl-mapview__top > * { pointer-events: auto; }

.wl-app .wl-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--wl-surface);
  border-radius: var(--wl-r-xl) var(--wl-r-xl) 0 0;
  box-shadow: 0 -10px 30px rgba(11, 42, 64, 0.16);
  height: 58%;
  transition: height var(--wl-dur-slow) var(--wl-ease);
}
.wl-app .wl-sheet[data-sheet="peek"] { height: 190px; }
.wl-app .wl-sheet[data-sheet="full"] { height: calc(100% - 52px); }
.wl-app .wl-sheet__handle { display: grid; place-items: center; height: var(--wl-tap); margin-bottom: -16px; width: 100%; flex: none; position: relative; z-index: 1; }
.wl-app .wl-sheet__handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--wl-line-strong); }
.wl-app .wl-sheet__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--wl-s4); padding: 4px var(--wl-s4) var(--wl-s5); }
.wl-app .wl-sheet__foot { flex: none; padding: var(--wl-s3) var(--wl-s4) var(--wl-s3); border-top: 1px solid var(--wl-line); background: var(--wl-surface); }

/* Le chronomètre et l'ETA doivent rester visibles quand la fiche est réduite. */
.wl-app .wl-sheet[data-sheet="peek"] .wl-mhead__sub,
.wl-app .wl-sheet[data-sheet="peek"] .wl-stepper { display: none; }

/* ---------- Gabarit authentification ---------- */

.wl-app .wl-shell--auth .wl-main, .wl-app .wl-shell--plain .wl-main { background: var(--wl-bg); }
.wl-app .wl-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.wl-app .wl-auth__hero { display: none; }
.wl-app .wl-auth__panel { display: flex; flex-direction: column; justify-content: center; gap: var(--wl-s5); width: 100%; max-width: 460px; margin: 0 auto; padding: calc(var(--wl-s8) + var(--wl-safe-top)) var(--wl-s4) calc(var(--wl-s8) + var(--wl-safe-bottom)); }
.wl-app .wl-auth__brand { color: var(--wl-navy-800); }

/* ==========================================================================
   Tablette ≥ 720 px
   ========================================================================== */

@container wl (min-width: 720px) {
  .wl-app .wl-page { padding: var(--wl-s6) var(--wl-s6) var(--wl-s10); gap: var(--wl-s6); }
  .wl-app .wl-ph__title { font-size: var(--wl-fs-3xl); }
  .wl-app .wl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-app .wl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-app .wl-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-app .wl-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-app .wl-topbar__status span:last-child { display: inline; }

  /* Carte + colonne : la fiche devient une colonne fixe à droite. */
  .wl-app .wl-mapview { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--wl-panel-w), 46%); }
  .wl-app .wl-mapview__map { position: relative; inset: auto; margin: 12px 0 12px 12px; border-radius: var(--wl-r-xl); }
  .wl-app .wl-sheet { position: relative; height: auto; border-radius: 0; box-shadow: none; border-left: 1px solid var(--wl-line); }
  .wl-app .wl-sheet[data-sheet] { height: auto; }
  .wl-app .wl-sheet__handle { display: none; }
  .wl-app .wl-sheet__body { padding: var(--wl-s5) var(--wl-s5) var(--wl-s6); }
  .wl-app .wl-sheet__foot { padding: var(--wl-s4) var(--wl-s5); }
  .wl-app .wl-sheet[data-sheet="peek"] .wl-mhead__sub, .wl-app .wl-sheet[data-sheet="peek"] .wl-stepper { display: flex; }

  .wl-app .wl-modal { align-items: center; padding: var(--wl-s6); }
  .wl-app .wl-modal__panel { max-width: 560px; border-radius: var(--wl-r-xl); }
  .wl-app .wl-toasts { bottom: calc(var(--wl-tabbar-h) + 20px); }

  .wl-app .wl-auth__panel { padding-left: var(--wl-s6); padding-right: var(--wl-s6); }
}

/* ==========================================================================
   Desktop ≥ 1024 px
   ========================================================================== */

@container wl (min-width: 1024px) {
  .wl-app .wl-shell:not(.wl-shell--auth):not(.wl-shell--plain) { grid-template-columns: var(--wl-sidebar-w) minmax(0, 1fr); }
  .wl-app .wl-side { display: flex; }
  .wl-app .wl-tabbar { display: none; }
  .wl-app .wl-topbar { padding: 0 var(--wl-s5); min-height: 60px; background: var(--wl-bg); border-bottom: 0; }
  .wl-app .wl-topbar__menu { display: none; }
  .wl-app .wl-topbar__title { font-size: var(--wl-fs-md); color: var(--wl-muted); font-family: var(--wl-font-body); font-weight: 600; }
  .wl-app .wl-shell--map .wl-topbar { position: absolute; top: 0; right: 0; left: var(--wl-sidebar-w); display: none; }
  .wl-app .wl-toasts { bottom: 24px; left: calc(50% + var(--wl-sidebar-w) / 2); }

  .wl-app .wl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-app .wl-split { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
  .wl-app .wl-page { padding: var(--wl-s4) var(--wl-s8) var(--wl-s10); }

  .wl-app .wl-mapview { grid-template-columns: minmax(0, 1fr) var(--wl-panel-w); }
  .wl-app .wl-mapview__map { margin: 16px 0 16px 16px; }
  .wl-app .wl-sheet { margin: 16px; border: 1px solid var(--wl-line); border-radius: var(--wl-r-xl); box-shadow: var(--wl-shadow-1); overflow: hidden; }
  .wl-app .wl-sheet__foot { border-top: 1px solid var(--wl-line); }

  .wl-app .wl-auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .wl-app .wl-auth__hero { display: flex; }
}

@container wl (min-width: 1280px) {
  .wl-app .wl-mapview { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* Très petits écrans (320 px) */
@container wl (max-width: 359px) {
  .wl-app .wl-page { padding-left: 12px; padding-right: 12px; }
  .wl-app .wl-sheet__body { padding-left: 12px; padding-right: 12px; }
  .wl-app .wl-mhead__title { font-size: var(--wl-fs-xl); }
  .wl-app .wl-eta { grid-template-columns: 1fr 1fr; }
  .wl-app .wl-eta > div:first-child { grid-column: 1 / -1; }
  .wl-app .wl-bill__rules { grid-template-columns: 1fr; }
  .wl-app .wl-timer__value { font-size: 2rem; }
  .wl-app .wl-timer__ring { width: 52px; height: 52px; }
  .wl-app .wl-timer__ring span { width: 40px; height: 40px; }
  .wl-app .wl-ph__title { font-size: var(--wl-fs-xl); }
  .wl-app .wl-sos__num { min-width: 60px; }
  .wl-app .wl-tabbar__item { font-size: 10px; }
}

/* Paysage bas (téléphone couché) : la fiche passe à droite. */
@container wl (min-width: 560px) and (max-width: 719px) {
  .wl-app .wl-kv--2 { grid-template-columns: 1fr 1fr; }
}

/* Mobile : tableaux → cartes empilées */
@container wl (max-width: 719px) {
  .wl-app .wl-table { border: 0; background: none; overflow: visible; }
  .wl-app .wl-table table, .wl-app .wl-table tbody, .wl-app .wl-table tr, .wl-app .wl-table td { display: block; width: 100%; }
  .wl-app .wl-table thead { display: none; }
  .wl-app .wl-table tr { background: var(--wl-surface); border: 1px solid var(--wl-line); border-radius: var(--wl-r-lg); padding: 8px 14px; margin-bottom: 10px; position: relative; }
  .wl-app .wl-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .wl-app .wl-table td::before { content: attr(data-label); color: var(--wl-muted); font-size: var(--wl-fs-xs); font-weight: 650; text-align: left; flex: none; }
  .wl-app .wl-table td.wl-table__go { position: absolute; top: 4px; right: 4px; width: auto; padding: 0; }
  .wl-app .wl-table td.wl-table__go::before { content: none; }
  .wl-app .wl-hide-sm { display: none; }
  /* Cibles tactiles ≥ 44 px sur mobile */
  .wl-app .wl-btn--sm { min-height: var(--wl-tap); }
  .wl-app .wl-tabs__tab { min-height: 40px; }
  .wl-app .wl-tabs { padding: 2px; }
  .wl-app .wl-topbar__status { min-height: var(--wl-tap); white-space: nowrap; }
  .wl-app .wl-ph { flex-wrap: wrap; }
  .wl-app .wl-ph__right { width: 100%; justify-content: flex-start; }
  .wl-app .wl-ph__back + .wl-ph__text + .wl-ph__right { padding-left: 0; }
}

/* ===== css/screens.css ===== */
/* ==========================================================================
   Styles propres à certains écrans (toujours préfixés .wl-app .wl-…).
   ========================================================================== */

.wl-app .wl-page--wide { max-width: 1400px; }
.wl-app .wl-center { text-align: center; }
.wl-app .wl-text-ok { color: var(--wl-ok); }
.wl-app .wl-actions--center { justify-content: center; }
.wl-app .wl-card__title { font-family: var(--wl-font-display); font-size: var(--wl-fs-lg); font-weight: 600; }
.wl-app .wl-tag--danger { background: var(--wl-danger-soft); color: var(--wl-danger); }
.wl-app .wl-fullcenter { min-height: 100%; justify-content: center; }

/* ---------- Accompagnant : disponibilité, offres ---------- */

.wl-app .wl-avail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wl-s4);
  padding: var(--wl-s4) var(--wl-s5);
  border-radius: var(--wl-r-xl);
  background: var(--wl-navy-900);
  color: #fff;
}
.wl-app .wl-avail__text { display: flex; align-items: center; gap: var(--wl-s3); min-width: 0; }
.wl-app .wl-avail__text > div { display: flex; flex-direction: column; min-width: 0; }
.wl-app .wl-avail__text strong { font-family: var(--wl-font-display); font-size: var(--wl-fs-xl); font-weight: 600; }
.wl-app .wl-avail__text span { color: #b9ccd8; font-size: var(--wl-fs-sm); }
.wl-app .wl-avail__dot { width: 14px; height: 14px; border-radius: 50%; background: #8a99a3; flex: none; }
.wl-app .wl-avail--online .wl-avail__dot { background: #2fd3a8; box-shadow: 0 0 0 6px rgba(47, 211, 168, 0.2); animation: wl-breathe 2.4s ease-in-out infinite; }
.wl-app .wl-avail--busy .wl-avail__dot { background: var(--wl-amber-500); box-shadow: 0 0 0 6px rgba(232, 154, 44, 0.2); }
.wl-app .wl-avail .wl-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
@keyframes wl-breathe { 50% { box-shadow: 0 0 0 10px rgba(47, 211, 168, 0.08); } }

.wl-app .wl-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wl-s3); }
.wl-app .wl-resume > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; flex: 1 1 220px; }

.wl-app .wl-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "top gain" "place gain" "meta gain";
  gap: 4px var(--wl-s3);
  padding: 14px var(--wl-s4);
  border-top: 1px solid var(--wl-line);
  text-align: left;
  width: 100%;
  transition: background-color var(--wl-dur-fast);
}
.wl-app .wl-offer:first-child { border-top: 0; }
.wl-app .wl-offer:hover { background: var(--wl-surface-2); }
.wl-app .wl-offer.is-new { background: color-mix(in srgb, var(--wl-accent-soft) 70%, var(--wl-surface)); animation: wl-rise var(--wl-dur-slow) var(--wl-ease); }
.wl-app .wl-offer__top { grid-area: top; display: flex; align-items: center; gap: var(--wl-s2); flex-wrap: wrap; }
.wl-app .wl-offer__service { font-weight: 700; }
.wl-app .wl-offer__place { grid-area: place; display: flex; gap: 6px; align-items: flex-start; color: var(--wl-ink-2); font-size: var(--wl-fs-sm); }
.wl-app .wl-offer__place .wl-icon { margin-top: 2px; color: var(--wl-muted); }
.wl-app .wl-offer__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--wl-muted); font-size: var(--wl-fs-xs); font-weight: 600; }
.wl-app .wl-offer__meta span { display: inline-flex; align-items: center; gap: 4px; }
.wl-app .wl-offer__gain { grid-area: gain; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.wl-app .wl-offer__gain small { color: var(--wl-muted); font-size: 11px; }
.wl-app .wl-offer__gain strong { font-family: var(--wl-font-display); font-size: var(--wl-fs-lg); color: var(--wl-ok); }

.wl-app .wl-radar { position: relative; width: 150px; height: 150px; margin: var(--wl-s4) auto 0; display: grid; place-items: center; color: var(--wl-accent); }
.wl-app .wl-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wl-accent); opacity: 0; animation: wl-radar 2.4s var(--wl-ease) infinite; }
.wl-app .wl-radar span:nth-child(2) { animation-delay: 0.8s; }
.wl-app .wl-radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes wl-radar { 0% { transform: scale(0.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }

.wl-app .wl-accepting { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--wl-s3); padding: var(--wl-s6) 0; }
.wl-app .wl-accepting__spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--wl-accent-soft); border-top-color: var(--wl-accent); animation: wl-spin 0.9s linear infinite; }

/* ---------- Onboarding accompagnant ---------- */

.wl-app .wl-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wl-s6); padding: var(--wl-s6); border-radius: var(--wl-r-xl); background: var(--wl-navy-900); color: #fff; }
.wl-app .wl-intro__text { display: flex; flex-direction: column; gap: var(--wl-s4); }
.wl-app .wl-intro__text .wl-eyebrow { color: #7fe0d0; }
.wl-app .wl-intro__title { font-size: var(--wl-fs-2xl); font-weight: 600; color: #fff; max-width: 24ch; }
.wl-app .wl-intro__text .wl-muted { color: #b9ccd8; max-width: 56ch; }
.wl-app .wl-intro .wl-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.wl-app .wl-intro__facts { display: grid; gap: var(--wl-s3); }
.wl-app .wl-intro__facts li { display: flex; flex-direction: column; padding: var(--wl-s3) var(--wl-s4); border-left: 3px solid var(--wl-amber-500); background: rgba(255, 255, 255, 0.05); border-radius: 0 var(--wl-r-md) var(--wl-r-md) 0; }
.wl-app .wl-intro__facts strong { font-family: var(--wl-font-display); font-size: var(--wl-fs-xl); }
.wl-app .wl-intro__facts span { color: #b9ccd8; font-size: var(--wl-fs-sm); }

.wl-app .wl-docs { padding: 0; gap: 0; }
.wl-app .wl-doc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-s3); padding: 12px var(--wl-s4); border-top: 1px solid var(--wl-line); }
.wl-app .wl-doc:first-child { border-top: 0; }
.wl-app .wl-doc .wl-row__text { flex: 1 1 180px; }

/* ---------- Portefeuille, profil, statistiques ---------- */

.wl-app .wl-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wl-s4);
  padding: var(--wl-s5);
  border-radius: var(--wl-r-xl);
  background: linear-gradient(135deg, var(--wl-navy-900), var(--wl-navy-700));
  color: #fff;
}
.wl-app .wl-balance > div { display: flex; flex-direction: column; gap: 2px; }
.wl-app .wl-balance span { color: #b9ccd8; font-size: var(--wl-fs-sm); }
.wl-app .wl-balance strong { font-family: var(--wl-font-display); font-size: var(--wl-fs-3xl); font-weight: 600; }
.wl-app .wl-balance small { color: #9fb3c1; font-size: var(--wl-fs-xs); }

.wl-app .wl-profile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-s4); }
.wl-app .wl-profile > div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }

.wl-app .wl-bars { display: flex; align-items: flex-end; gap: var(--wl-s3); height: 220px; padding-top: var(--wl-s5); }
.wl-app .wl-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.wl-app .wl-bars__bar { width: 100%; max-width: 56px; border-radius: 8px 8px 3px 3px; background: var(--wl-accent); min-height: 4px; }
.wl-app .wl-bars__col:last-child .wl-bars__bar { background: var(--wl-navy-800); }
.wl-app .wl-bars__val { font-size: 11px; font-weight: 700; color: var(--wl-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-app .wl-bars__label { font-size: var(--wl-fs-xs); color: var(--wl-muted); }
.wl-app .wl-bars--dense { height: 180px; gap: 6px; }
.wl-app .wl-bars--dense .wl-bars__val { font-size: 10.5px; }

/* ---------- Patient ---------- */

.wl-app .wl-welcome { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--wl-s4); }
.wl-app .wl-welcome > div { display: flex; flex-direction: column; gap: 4px; max-width: 34rem; }
.wl-app .wl-welcome__title { font-size: var(--wl-fs-2xl); font-weight: 600; }

.wl-app .wl-live-card { border-color: color-mix(in srgb, var(--wl-accent) 45%, var(--wl-line)); background: color-mix(in srgb, var(--wl-accent-soft) 55%, var(--wl-surface)); }
.wl-app .wl-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wl-s3); }
.wl-app .wl-live__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 220px; }
.wl-app .wl-live__text strong { font-size: var(--wl-fs-lg); }

.wl-app .wl-services { display: grid; gap: var(--wl-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.wl-app .wl-service { display: flex; flex-direction: column; gap: 6px; padding: var(--wl-s4); border-radius: var(--wl-r-lg); border: 1px solid var(--wl-line); background: var(--wl-surface); text-align: left; transition: border-color var(--wl-dur-fast), transform var(--wl-dur-fast); }
.wl-app .wl-service:hover { border-color: var(--wl-accent); transform: translateY(-1px); }
.wl-app .wl-service__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--wl-r-md); background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); margin-bottom: 4px; }
.wl-app .wl-service span:last-child { color: var(--wl-muted); font-size: var(--wl-fs-sm); }

.wl-app .wl-flow__foot { position: sticky; bottom: 0; padding: var(--wl-s3) 0 var(--wl-s2); background: linear-gradient(to top, var(--wl-bg) 70%, transparent); z-index: 2; }

.wl-app .wl-stars { display: flex; gap: 4px; flex-wrap: wrap; }
.wl-app .wl-stars legend { width: 100%; margin-bottom: var(--wl-s2); }
.wl-app .wl-stars__star { position: relative; cursor: pointer; color: var(--wl-line-strong); }
.wl-app .wl-stars__star input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wl-app .wl-stars__star span[aria-hidden] { display: grid; place-items: center; width: 48px; height: 48px; }
.wl-app .wl-stars:has(input:checked) .wl-stars__star { color: var(--wl-amber-500); }
.wl-app .wl-stars__star:has(input:checked) ~ .wl-stars__star { color: var(--wl-line-strong); }
.wl-app .wl-stars:has(input:checked) .wl-stars__star .wl-icon { fill: currentColor; }
.wl-app .wl-stars__star:has(input:checked) ~ .wl-stars__star .wl-icon { fill: none; }
.wl-app .wl-stars__star input:focus-visible + span { outline: 3px solid var(--wl-focus); border-radius: 8px; }

.wl-app .wl-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wl-s2); }
.wl-app .wl-copy code { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border-radius: var(--wl-r-md); background: var(--wl-surface-3); font-size: var(--wl-fs-sm); overflow-wrap: anywhere; }

/* ---------- Authentification ---------- */

.wl-app .wl-auth__hero { position: relative; overflow: hidden; background: var(--wl-navy-900); color: #fff; padding: var(--wl-s10); align-items: flex-end; }
.wl-app .wl-auth__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(19, 165, 146, 0.35), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(232, 154, 44, 0.22), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px);
}
.wl-app .wl-auth__hero-inner { position: relative; display: flex; flex-direction: column; gap: var(--wl-s6); max-width: 520px; }
.wl-app .wl-logo--light { color: #fff; }
.wl-app .wl-auth__claim { color: #fff; font-size: 2.4rem; font-weight: 600; line-height: 1.12; }
.wl-app .wl-auth__points { display: flex; flex-direction: column; gap: var(--wl-s3); color: #cfdde6; }
.wl-app .wl-auth__points li { display: flex; gap: var(--wl-s3); align-items: center; }
.wl-app .wl-auth__points .wl-icon { color: #7fe0d0; }
.wl-app .wl-auth__foot { color: #8ea6b5; font-size: var(--wl-fs-sm); }
.wl-app .wl-splash { display: flex; flex-direction: column; gap: var(--wl-s2); align-items: flex-start; }
.wl-app .wl-or { display: flex; align-items: center; gap: var(--wl-s3); color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-or::before, .wl-app .wl-or::after { content: ""; flex: 1; height: 1px; background: var(--wl-line); }
.wl-app .wl-rolecard { display: flex; align-items: center; gap: var(--wl-s3); padding: var(--wl-s4); border-radius: var(--wl-r-lg); border: 1.5px solid var(--wl-line); background: var(--wl-surface); text-align: left; transition: border-color var(--wl-dur-fast); }
.wl-app .wl-rolecard:hover { border-color: var(--wl-accent); }
.wl-app .wl-rolecard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--wl-r-md); background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); flex: none; }
.wl-app .wl-rolecard__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-app .wl-rolecard__text span { color: var(--wl-muted); font-size: var(--wl-fs-sm); }
.wl-app .wl-rolecard > .wl-icon:last-child { color: var(--wl-muted); }
.wl-app .wl-perm-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--wl-accent-soft); color: var(--wl-accent-soft-ink); }
.wl-app .wl-notif-preview { display: flex; gap: var(--wl-s3); align-items: flex-start; }
.wl-app .wl-notif-preview > div { display: flex; flex-direction: column; font-size: var(--wl-fs-sm); }
.wl-app .wl-notif-preview span { color: var(--wl-muted); }
.wl-app .wl-legal { display: flex; flex-direction: column; gap: var(--wl-s2); max-width: 65ch; color: var(--wl-ink-2); }
.wl-app .wl-legal p { margin-bottom: var(--wl-s3); }

/* ---------- Professionnel de santé ---------- */

.wl-app .wl-agenda { display: grid; gap: var(--wl-s4); }
.wl-app .wl-agenda__day { display: flex; flex-direction: column; gap: var(--wl-s2); min-width: 0; }
.wl-app .wl-agenda__head { font-size: var(--wl-fs-md); font-weight: 700; font-family: var(--wl-font-body); color: var(--wl-ink-2); }
.wl-app .wl-agenda__empty { padding: var(--wl-s4); border: 1px dashed var(--wl-line-strong); border-radius: var(--wl-r-lg); text-align: center; font-size: var(--wl-fs-sm); }
.wl-app .wl-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wl-app .wl-month__dow { font-size: var(--wl-fs-xs); font-weight: 700; color: var(--wl-muted); text-align: center; padding: 6px 0; }
.wl-app .wl-month__cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 6px; border-radius: var(--wl-r-sm); background: var(--wl-surface); border: 1px solid var(--wl-line); font-weight: 650; font-size: var(--wl-fs-sm); }
.wl-app .wl-month__cell.is-empty { background: transparent; border-color: transparent; }
.wl-app .wl-month__cell.is-today { border-color: var(--wl-accent); box-shadow: inset 0 0 0 1px var(--wl-accent); }
.wl-app .wl-month__cell small { font-size: 10.5px; color: var(--wl-accent-soft-ink); background: var(--wl-accent-soft); padding: 1px 5px; border-radius: 6px; white-space: nowrap; }

/* ---------- Gestionnaire ---------- */

.wl-app .wl-legend { display: flex; flex-wrap: wrap; gap: var(--wl-s3); font-size: var(--wl-fs-xs); font-weight: 650; color: var(--wl-ink-2); }
.wl-app .wl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wl-app .wl-legend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--wl-line-strong); }
.wl-app .wl-legend .is-search { background: var(--wl-amber-500); }
.wl-app .wl-legend .is-active { background: var(--wl-map-route); }
.wl-app .wl-legend .is-alert { background: #c8443c; }
.wl-app .wl-legend .is-idle { background: var(--wl-teal-500); width: 9px; height: 9px; }
.wl-app .wl-search { position: relative; display: flex; align-items: center; min-width: min(320px, 100%); }
.wl-app .wl-search .wl-icon { position: absolute; left: 12px; color: var(--wl-muted); }
.wl-app .wl-search .wl-input { padding-left: 38px; min-height: 42px; }
.wl-app .wl-shell--dense .wl-row { min-height: 52px; }

@container wl (min-width: 720px) {
  .wl-app .wl-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: var(--wl-s8); }
  .wl-app .wl-intro__title { font-size: var(--wl-fs-3xl); }
  .wl-app .wl-welcome__title { font-size: var(--wl-fs-3xl); }
  .wl-app .wl-agenda--week { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .wl-app .wl-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-app .wl-month__cell { min-height: 84px; padding: 8px; }
}

@container wl (min-width: 1280px) {
  .wl-app .wl-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wl-app .wl-rolecard__text .wl-badge { align-self: flex-start; margin-top: 4px; }


/* 3.0.1 — logo officiel Walooma */
.wl-app .wl-logo { line-height: 0; }
.wl-app .wl-logo__img { display: block; height: 34px; width: auto; max-width: 100%; }
.wl-app .wl-logo--light .wl-logo__img { background: #fff; padding: 5px 10px; border-radius: 10px; height: 38px; box-sizing: border-box; }
.wl-app .wl-auth__brand .wl-logo__img { height: 44px; }
.wl-app .wl-topbar__brand .wl-logo__img { height: 28px; }

/* 3.0.1 — fenêtres et feuilles : toujours entièrement visibles sur téléphone */
.wl-app .wl-modal { grid-template-rows: minmax(0, 1fr); }
.wl-app .wl-modal__panel { min-height: 0; max-height: calc(100% - 24px); }
.wl-app .wl-modal__head, .wl-app .wl-modal__foot { flex: none; }
.wl-app .wl-modal__body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wl-app .wl-modal__body .wl-actions { position: sticky; bottom: -16px; background: var(--wl-surface); padding: var(--wl-s3) 0 var(--wl-s2); z-index: 1; }

/* 3.0.1 — fiche de mission : plus de place pour lire sur petit écran */
.wl-app .wl-sheet { height: max(58%, 420px); max-height: calc(100% - 52px); }
.wl-app .wl-sheet[data-sheet="peek"] { height: 190px; }
.wl-app .wl-sheet[data-sheet="full"] { height: calc(100% - 52px); }
@media (min-width: 768px) { .wl-app .wl-sheet { height: auto; max-height: none; } }

/* 3.0.2 — logo officiel et actions mobiles accessibles jusque dans les safe areas */
.wl-app .wl-logo--light .wl-logo__img {
  background: transparent;
  padding: 0;
  border-radius: 0;
  height: 34px;
  box-sizing: content-box;
}
@media (max-width: 719px) {
  .wl-app .wl-modal__body {
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  .wl-app .wl-modal__body .wl-actions {
    bottom: 0;
    margin-bottom: 0;
    padding-bottom: calc(var(--wl-s2) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 18px rgba(11,42,64,.06);
  }
  .wl-app .wl-sheet__body {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .wl-app .wl-sheet__foot {
    padding-bottom: calc(var(--wl-s3) + env(safe-area-inset-bottom, 0px));
  }
  .wl-app .wl-flow__foot {
    padding-bottom: calc(var(--wl-s2) + env(safe-area-inset-bottom, 0px));
  }
}