/*
 * Socle Wani partagé : règles mobiles et d’accessibilité qui complètent les
 * pages historiques (Tailwind ou CSS local) sans modifier les règles métier.
 */
:root {
  /*
   * Palette Wani — la seule source de vérité de l’identité visuelle.
   * Le bleu historique #155eef devient le primary pour toutes les pages,
   * y compris les vues anciennes injectées par le routeur PHP.
   */
  --primary-color: #155eef;
  --primary-dark: #0b4ab8;
  --primary-hover: #0d52cc;
  --primary-light: #e8f0ff;
  --primary-soft: #f5f8ff;
  --primary-border: #b8cdfa;
  --text-color: #14213d;
  --text-muted: #64748b;
  --background-color: #f6f8fc;
  --surface-color: #ffffff;
  --border-color: #dce5f2;

  --wani-ink: var(--text-color);
  --wani-brand: var(--primary-color);
  --wani-logo-blue: var(--primary-color);
  --wani-focus: var(--primary-color);

  /* Aliases consommés par les vues documentation, légales et administration. */
  --ink: var(--text-color);
  --muted: var(--text-muted);
  --line: var(--border-color);
  --brand: var(--primary-color);
  --deep: var(--primary-dark);
  --canvas: var(--background-color);
  --bg: var(--background-color);
  --surface: var(--surface-color);
}

html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body { background: var(--background-color); color: var(--text-color); }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, [role="button"], input[type="submit"], input[type="button"], select {
  min-height: 44px;
}
input, select, textarea { max-width: 100%; }
textarea { min-height: 7rem; }
p, h1, h2, h3, h4, label, a, button, span, dd, dt, li, td, th {
  overflow-wrap: anywhere;
}
main, section, article, form, fieldset, div, label, a, button {
  min-width: 0;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--border-color);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgb(21 94 239 / 14%) !important;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary-color); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--wani-focus);
  outline-offset: 3px;
}

.wani-skip-link {
  position: fixed;
  z-index: 9999;
  left: 1rem;
  top: -5rem;
  border-radius: .5rem;
  background: var(--primary-dark);
  color: #fff;
  padding: .75rem 1rem;
  text-decoration: none;
}
.wani-skip-link:focus { top: 1rem; }

.wani-legal-footer {
  margin-top: 2.5rem;
  padding: 1.75rem 1rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: .875rem;
  text-align: center;
}
.wani-legal-footer__title {
  margin: 0 0 .35rem;
  color: var(--text-color);
  font-weight: 800;
}
.wani-legal-footer__text {
  max-width: 36rem;
  margin: 0 auto .85rem;
  line-height: 1.55;
}
.wani-legal-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .85rem;
  margin-bottom: .85rem;
}
.wani-legal-footer__credit { margin: 0; font-size: .8125rem; }
.wani-legal-footer a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Mot-symbole Wani : aucune police distante n’est chargée, afin de conserver
 * une signature rapide et fiable dans les navigateurs et les WebViews. */
.wani-brandmark,
.wani-inline-brand,
.brand {
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.075em !important;
  text-decoration: none;
}
.wani-inline-brand,
.brand {
  color: var(--wani-logo-blue) !important;
}
.wani-brandmark {
  display: inline-block;
  color: var(--primary-color) !important;
}
header .wani-brandmark::after,
.nav .brand::after {
  content: none;
}
header .wani-brandmark {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
@media (min-width: 640px) {
  header .wani-brandmark {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
.brand span { color: inherit !important; }

.wani-home-title,
.wani-home-title span {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

.wani-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: .75rem;
}
.wani-table-scroll > table { min-width: 42rem; }

/* Les vues PHP reçoivent ce menu quand elles n'ont pas déjà un menu mobile.
 * Le panneau est volontairement simple et sans dépendance pour WebView. */
.wani-menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--primary-border);
  border-radius: .75rem;
  background: #fff;
  color: var(--primary-color);
  cursor: pointer;
}
.wani-menu-trigger svg { width: 1.25rem; height: 1.25rem; }
.wani-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
  overflow-y: auto;
  background: rgb(11 74 184 / 38%);
}
.wani-mobile-panel__dialog {
  width: min(100%, 26rem);
  min-height: 100%;
  margin-left: auto;
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 20px 60px rgb(11 74 184 / 22%);
}
.wani-mobile-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.wani-mobile-panel__close {
  min-width: 44px;
  border: 0;
  border-radius: .75rem;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
}
.wani-mobile-panel__links {
  display: grid;
  gap: .5rem;
}
.wani-mobile-panel__links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}
.wani-mobile-panel__links a:active,
.wani-mobile-panel__links a:hover { background: var(--primary-light); color: var(--primary-dark); }
body.wani-menu-open { overflow: hidden; }

.wani-mobile-backbar {
  display: none;
}
.wani-mobile-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 800;
  cursor: pointer;
}
.wani-mobile-back:active,
.wani-mobile-back:hover {
  color: var(--primary-dark);
}

header {
  border-color: var(--border-color) !important;
}
header a:not(.wani-brandmark):hover,
header a[aria-current="page"] {
  color: var(--primary-color) !important;
}
.service-card:hover,
.card-option:hover {
  border-color: var(--primary-border) !important;
  box-shadow: 0 10px 26px -16px rgb(21 94 239 / 42%) !important;
}
.card-option[aria-pressed="true"],
.card-option[aria-selected="true"],
.option-card.selected,
.option-card.selected-multi {
  border-color: var(--primary-color) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 0 0 2px rgb(21 94 239 / 14%) !important;
}
.card-option[aria-pressed="true"] .card-check,
.card-option[aria-selected="true"] .card-check {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.button:not(.danger),
button[class*="bg-indigo-"],
button[class*="bg-teal-"],
button[class*="bg-purple-"],
button[class*="bg-cyan-"] {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
.button:not(.danger):hover,
button[class*="bg-indigo-"]:hover,
button[class*="bg-teal-"]:hover,
button[class*="bg-purple-"]:hover,
button[class*="bg-cyan-"]:hover {
  background-color: var(--primary-dark) !important;
}
.button.secondary,
.button.alt,
.button.light {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
  border: 1px solid var(--primary-border) !important;
}
.pill,
.badge:not(.status),
.tag:not(.ready) {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}
.link,
.reset,
.back,
.section .kind,
.eyebrow { color: var(--primary-color) !important; }
.notice:not(.error) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.toggle-card.active,
.sel-card.active,
.chk-card.active,
.filter-pill.active {
  border-color: var(--primary-color) !important;
  background: var(--primary-light) !important;
  box-shadow: 0 0 0 3px rgb(21 94 239 / 14%) !important;
}
.step-pill.done,
.filter-pill.active {
  background: var(--primary-color) !important;
  color: #fff !important;
}
.section-label { color: var(--primary-color) !important; }
.hero:has(.searchbox) {
  background: radial-gradient(circle at 82% 10%, #6f9dff 0, transparent 35%),
    linear-gradient(120deg, var(--primary-dark), var(--primary-color)) !important;
}
.hero:has(.searchbox) .eyebrow { color: #dce9ff !important; }
.hero:has(.searchbox) p { color: #e8f0ff !important; }
body:has(.credentials) .nav {
  background: var(--primary-dark) !important;
}
body:has(.credentials) .nav small { color: #dce9ff !important; }

/* Tables de synthèse : le script ajoute les libellés des colonnes à partir
 * de l'en-tête, afin qu'elles deviennent des cartes lisibles sur téléphone. */
.wani-responsive-table { width: 100%; border-collapse: collapse; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  main[class*="px-5"],
  main[class*="px-4"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  main[class*="py-10"],
  main[class*="py-14"] {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
  .wani-mobile-backbar {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-color);
  }
  .shell { padding-left: 1rem !important; padding-right: 1rem !important; }
  .searchbox { flex-direction: column; }
  .searchbox .button { width: 100%; }
  #wizard-progress {
    padding: 1rem !important;
  }
  #wizard-progress > div:first-child,
  #size-preview > div:first-child {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: .35rem .75rem;
  }
  #step-label {
    flex: 1 1 12rem;
    font-size: .75rem !important;
    letter-spacing: .08em !important;
    line-height: 1.35;
  }
  #step-counter { flex: 0 0 auto; }
  #turnover-input + span {
    flex: 0 0 auto;
    padding-inline: .75rem !important;
    white-space: normal;
  }
  .step-section > div[class*="rounded-2xl"],
  #profile-section,
  #computed-section,
  #result-error,
  #wizard-loading > div {
    padding: 1rem !important;
  }
  .filter-fields { grid-template-columns: 1fr !important; }
  .grid.grid-cols-3,
  .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #calendarGrid.grid.grid-cols-7 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wani-calendar-weekdays { display: none !important; }
  #activity-list,
  #legal-form-list,
  #legal-form-grid,
  #company-size-grid,
  #sector-grid,
  #events-container .grid,
  #obligations-groups .grid,
  #section-nav,
  #profile-grid,
  #computed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hide-mobile { display: none !important; }
  .actions { align-items: stretch !important; flex-direction: column; }
  .actions .button { width: 100%; }
  .step-pill { font-size: .7rem; padding-inline: .55rem !important; }
  #progress-bar { gap: .25rem !important; overflow-x: auto; padding-bottom: .25rem; }
  #progress-bar > .text-slate-300 { display: none; }
  .result-card, .filters { border-radius: .85rem; }
  .result-card { padding: 1rem !important; }
  .result-card h3 { font-size: 1.05rem; }
  .mobile-menu a, nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .wani-menu-trigger { display: inline-flex; }
  header nav:not(.wani-mobile-panel),
  header #header-actions { display: none !important; }
  .wani-responsive-table,
  .wani-responsive-table tbody,
  .wani-responsive-table tr,
  .wani-responsive-table td { display: block; width: 100%; }
  .wani-responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .wani-responsive-table tbody { display: grid; gap: .75rem; }
  .wani-responsive-table tr {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  .wani-responsive-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, .9fr) minmax(0, 1.4fr);
    gap: .75rem;
    padding: .7rem .85rem !important;
    border-bottom: 1px solid #edf1f5;
    text-align: right;
  }
  .wani-responsive-table td:last-child { border-bottom: 0; }
  .wani-responsive-table td::before {
    content: attr(data-wani-label);
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
    text-align: left;
  }
  #calendar-events .divide-y {
    display: grid;
    gap: .75rem;
    overflow: visible;
    border: 0;
    background: transparent;
  }
  #calendar-events .event-row {
    align-items: flex-start;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  #calendar-events .event-row > .fa-chevron-right { display: none; }
}

/* Les choix aux intitulés longs restent confortables à 320 px. Au-delà,
 * les mêmes composants reviennent naturellement en grille de deux. */
@media (max-width: 359px) {
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  #activity-list,
  #legal-form-list,
  #legal-form-grid,
  #company-size-grid,
  #sector-grid,
  #events-container .grid,
  #obligations-groups .grid,
  #section-nav,
  #profile-grid,
  #computed-grid {
    grid-template-columns: 1fr !important;
  }
  #turnover-input + span {
    font-size: .875rem !important;
  }
  .wani-responsive-table td {
    grid-template-columns: 1fr;
    gap: .25rem;
    text-align: left;
  }
}

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