/**
 * ONPhI — Conformité WCAG 2.2 niveau AA
 * Styles transverses : liens d'évitement, focus visible, cibles tactiles, contraste, mobile.
 */

:root {
  --onphi-a11y-focus: #cc0000;
  --onphi-a11y-focus-bg: rgba(204, 0, 0, 0.12);
  --onphi-a11y-link: #9b1c1c;
  --onphi-a11y-text: #3d4449;
}

/* ---- Liens d'évitement (WCAG 2.4.1) ---- */
.skip-links {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-link,
.skip-links a {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: #1a1a1a;
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline;
  border: 2px solid #fff;
  border-radius: 0 0 4px 0;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-links a:focus,
.skip-links a:focus-visible {
  left: 0;
  top: 0;
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

/* ---- Contenu masqué visuellement, accessible aux lecteurs d'écran ---- */
.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;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ---- Focus visible (WCAG 2.4.7 / 2.4.11 Focus Appearance) ---- */
/* Annule les outline:none !important trop agressifs de main.css sur la sidebar */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
#sidebar a:focus-visible,
#sidebar button:focus-visible,
#sidebar select:focus-visible,
#sidebar .dropdown-toggle:focus-visible,
#sidebar #menu a:focus-visible,
#sidebar #menu * :focus-visible,
#sidebar .nav a:focus-visible,
#wrapper .toggle:focus-visible,
#sidebar-toggle:focus-visible {
  outline: 3px solid var(--onphi-a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--onphi-a11y-focus) !important;
}

#sidebar #menu .dropdown-item:focus-visible {
  background-color: #dfe3e6 !important;
  outline: 3px solid var(--onphi-a11y-focus) !important;
  outline-offset: -2px !important;
}

/* Contournement clavier : cible de skip */
#main-content:focus,
#main-content:focus-visible,
#menu:focus,
#menu:focus-visible {
  outline: none;
}

/* ---- Contraste liens (WCAG 1.4.3 / 1.4.11) ---- */
#footer a,
.copyright a {
  color: var(--onphi-a11y-link);
  text-decoration: underline;
}

#footer a:hover,
#footer a:focus-visible,
.copyright a:hover,
.copyright a:focus-visible {
  color: #7a1212;
}

/* Texte secondaire trop clair (#888) → contraste AA sur fond clair */
#header p[style*="color: #888"],
#header p[style*="color:#888"] {
  color: #595959 !important;
}

/* ---- Cibles tactiles min. 24×24 px (WCAG 2.5.8 Target Size Minimum) ---- */
#wrapper .toggle,
#sidebar-toggle {
  min-width: 44px;
  min-height: 44px;
}

#sidebar #menu ul.nav > li > a,
#sidebar #menu .dropdown-toggle,
#sidebar #menu .dropdown-item,
.button.small,
.btn-sm {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Exception : bouton compact « Copier le lien » dans la modale Partager */
.onphi-share-modal .onphi-share-copy-btn.btn-sm {
  min-height: 0;
  height: auto;
  padding: 0.28rem 0.65rem;
}

@media screen and (max-width: 1200px) {
  #sidebar #menu ul.nav > li > a,
  #sidebar #menu .dropdown-toggle {
    min-height: 44px;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  #sidebar #menu .dropdown-item {
    min-height: 44px;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }
}

/* Boutons flottants : zone cliquable suffisante */
.onphi-issue-report-button,
.onphi-back-to-top,
#chatbot-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* ---- Zoom / reflow mobile (WCAG 1.4.4, 1.4.10) ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

/* Évite le débordement horizontal sur petits écrans */
#wrapper,
#main,
#main .inner,
.legal-page {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

@media screen and (max-width: 736px) {
  #header .icons {
    float: none !important;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }

  /* Les boutons header restent compacts (surcharge dans layout.phtml) */
  #header .icons .button {
    min-height: 0;
  }

  #footer .row {
    flex-direction: column;
  }

  #footer .col .p-3 {
    padding: 0.5rem 0.75rem !important;
  }
}

/* ---- Formulaires : labels et erreurs ---- */
label.required::after,
.form-label.required::after {
  content: " *";
  color: #b00000;
  font-weight: 700;
}

[aria-invalid="true"],
.form-control.is-invalid {
  border-color: #b00000 !important;
  box-shadow: 0 0 0 1px #b00000;
}

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

/* ---- Prefers contrast ---- */
@media (prefers-contrast: more) {
  a,
  button,
  .button {
    text-decoration: underline;
  }

  a:focus-visible,
  button:focus-visible {
    outline-width: 4px !important;
  }
}

/* ---- Language select : lisible et accessible ---- */
#langue.language-select {
  min-height: 44px;
  color: var(--onphi-a11y-text);
  border: 1px solid #6c757d;
  background: #fff;
}

#langue.language-select:focus-visible {
  outline: 3px solid var(--onphi-a11y-focus) !important;
  outline-offset: 2px !important;
}

/* ---- Annonce live pour lecteurs d'écran ---- */
#onphi-a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Surcharge finale des outline:none !important de main.css (#sidebar *) */
#sidebar a:focus-visible,
#sidebar button:focus-visible,
#sidebar select:focus-visible,
#sidebar [tabindex]:not([tabindex="-1"]):focus-visible,
#sidebar #menu a:focus-visible,
#sidebar #menu button:focus-visible,
#sidebar #menu .dropdown-item:focus-visible,
#sidebar #menu .dropdown-toggle:focus-visible,
#sidebar .nav a:focus-visible,
#sidebar .nav button:focus-visible {
  outline: 3px solid var(--onphi-a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--onphi-a11y-focus) !important;
}