/* ============================================================
   HARD DÉCO — Lot 9K-7
   Contrôle responsive et accessibilité globale.
   Couche transversale chargée après les styles de navigation.
   ============================================================ */

:root {
  --hd-a11y-target: 44px;
  --hd-a11y-outline: max(2px, .12em);
  --hd-a11y-gutter: clamp(10px, 2.4vw, 24px);
}

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--app-topbar-h, 64px) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-wrap: break-word;
}

#main-content,
#main-content > *,
#main-content :is(main, section, article, header, footer, form, fieldset, .card, .panel, .toolbar) {
  min-width: 0;
}

/* Le lien d’évitement reste invisible hors focus, puis devient immédiatement
   repérable au clavier, y compris par-dessus la topbar fixe. */
.hd-skip-link {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top, 0px)) auto auto 10px;
  z-index: 10050;
  max-width: calc(100vw - 20px);
  padding: 10px 14px;
  border: 2px solid CanvasText;
  border-radius: 9px;
  background: Canvas;
  color: CanvasText;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
  transform: translateY(calc(-100% - 18px));
  transition: transform .14s ease;
}

.hd-skip-link:focus,
.hd-skip-link:focus-visible {
  outline: var(--hd-a11y-outline) solid Highlight;
  outline-offset: 3px;
  transform: translateY(0);
}

.hd-sr-only,
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Anneau cohérent, visible sur fond clair comme sombre. */
:where(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="option"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--hd-a11y-outline) solid var(--hd-color-focus, var(--accent, Highlight)) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel, Canvas) 75%, transparent) !important;
}

#main-content:focus {
  outline: none;
}

:where(h1, h2, h3, [id], [tabindex="-1"]) {
  scroll-margin-top: calc(var(--app-topbar-h, 64px) + 18px);
}

:where(button, a, input, select, textarea, summary, [role="button"]) {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
}

:where(button, a[href], summary, [role="button"]):not(:disabled):not([aria-disabled="true"]) {
  touch-action: manipulation;
}

:where(button, [role="button"], a[href])[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Les libellés longs et valeurs métier restent disponibles au zoom. */
:where(
  .page-title,
  .operations-page-header h1,
  .dedicated-page-title,
  .modal-header h3,
  .list-row,
  .card,
  td,
  th,
  label,
  .app-nav-label
) {
  overflow-wrap: anywhere;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.hd-table-scroll,
.table-wrapper,
.table-responsive,
.quote-page-lines,
.task-calendar-scroll {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.hd-table-scroll:focus-visible,
.table-wrapper[tabindex]:focus-visible,
.table-responsive[tabindex]:focus-visible {
  border-radius: var(--hd-radius-md, 8px);
}

/* Les messages ne reposent pas uniquement sur une couleur et restent lisibles. */
:where(
  [role="alert"]:not(:empty),
  [aria-live="assertive"]:not(:empty),
  .message-erreur:not(:empty),
  .error-message:not(:empty)
) {
  border-inline-start: 4px solid var(--hd-color-danger, #c93632);
}

:where([role="status"], [aria-live="polite"]):not(.hd-sr-only) {
  overflow-wrap: anywhere;
}

/* Mobile et interfaces tactiles : cible minimale WCAG, sans agrandir les
   contrôles purement décoratifs ou les cellules de tableau. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  :where(
    button,
    .btn,
    .btn-icon,
    .iconbtn,
    a[data-route],
    [role="button"],
    [role="menuitem"],
    [role="option"],
    input[type="checkbox"],
    input[type="radio"]
  ):not(.sw):not(.flatpickr-day) {
    min-width: var(--hd-a11y-target);
    min-height: var(--hd-a11y-target);
  }

  .header.app-shell .actions .iconbtn,
  .app-global-new,
  .app-sidebar-toggle {
    width: var(--hd-a11y-target);
    height: var(--hd-a11y-target);
  }

  #main-content :is(.toolbar, .page-toolbar, .operations-page-header, .dedicated-page-header) {
    max-width: 100%;
  }

  #main-content :is(.toolbar-actions, .page-actions, .operations-page-header-actions, .dedicated-page-actions) {
    min-width: 0;
    flex-wrap: wrap;
  }

  :where(input, select, textarea) {
    font-size: max(16px, 1em);
  }
}

@media (max-width: 620px) {
  :root {
    --hd-a11y-gutter: 12px;
  }

  #main-content :is(.main, .page, .page-list, .operations-page, .dedicated-page) {
    max-width: 100%;
  }

  #main-content :is(.toolbar, .page-toolbar, .operations-page-header, .dedicated-page-header) {
    gap: 10px;
  }

  #main-content :is(.toolbar-actions, .page-actions, .operations-page-header-actions, .dedicated-page-actions) {
    width: 100%;
  }

  #main-content :is(.toolbar-actions, .page-actions, .operations-page-header-actions, .dedicated-page-actions) > :is(.btn, button) {
    flex: 1 1 auto;
  }

  .modal-backdrop,
  .picker-backdrop,
  .home-modal-backdrop {
    padding-inline: max(6px, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 390px) {
  .header.app-shell .app-topbar {
    gap: 6px;
    padding-inline: 8px;
  }

  .app-route-context {
    overflow: hidden;
  }

  #appRouteLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-mobile-nav {
    padding-inline: 4px;
  }

  .app-mobile-nav :is(a, button) {
    font-size: 9px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #mobileSheet.app-mobile-sheet {
    max-height: calc(100dvh - var(--app-mobile-nav-h, 68px) - env(safe-area-inset-bottom, 0px) - 18px);
  }

  :where(.modal, .picker-modal, .home-modal) {
    max-height: calc(100dvh - 12px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border: color-mix(in srgb, currentColor 52%, transparent);
  }

  :where(.btn, button, input, select, textarea, .card, .panel, .modal) {
    border-width: 2px;
  }

  :where(.muted, small, .help, .hint) {
    color: currentColor;
    opacity: .82;
  }
}

@media (forced-colors: active) {
  :where(.btn, button, a[href], input, select, textarea, .card, .panel, .modal) {
    forced-color-adjust: auto;
  }

  :where(button, a[href], [role="button"]):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }

  :where([aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) {
    outline: 2px solid Highlight;
  }
}