/* ===== ACCESSIBILITY PANEL ===== */

.a11y-panel {
  position: fixed;
  bottom: 84px;
  left: 24px;
  z-index: 200;
  width: 320px;
  max-height: calc(100vh - 120px);
  background-color: #1B1340;
  border-radius: 20px;
  padding: 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

.a11y-panel::-webkit-scrollbar {
  width: 4px;
}

.a11y-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.a11y-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.a11y-panel__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #ffffff;
}

.a11y-panel__reset {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #BF3369;
  background: none;
  border: 1px solid #BF3369;
  border-radius: 50px;
  padding: 5px 14px;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.a11y-panel__reset:hover {
  background-color: #BF3369;
  color: #ffffff;
}

.a11y-group {
  margin-bottom: 16px;
}

.a11y-group__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
  display: block;
}

.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer !important;
  transition: background-color 0.2s ease;
  margin-bottom: 4px;
}

.a11y-option:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.a11y-option.active {
  background-color: rgba(208, 56, 114, 0.25);
}

.a11y-option__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.a11y-option__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.a11y-option.active .a11y-option__icon {
  background-color: #BF3369;
}

.a11y-option__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.a11y-option__toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.a11y-option__toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

.a11y-option.active .a11y-option__toggle {
  background-color: #BF3369;
}

.a11y-option.active .a11y-option__toggle::after {
  transform: translateX(16px);
}

.a11y-separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin: 12px 0;
}

/* Accessibility reading guide */
.a11y-reading-guide {
  position: fixed;
  left: 0;
  width: 100%;
  height: 12px;
  background: rgba(208, 56, 114, 0.2);
  border-top: 2px solid rgba(208, 56, 114, 0.5);
  border-bottom: 2px solid rgba(208, 56, 114, 0.5);
  pointer-events: none;
  z-index: 9998;
  display: none;
  transition: top 0.05s linear;
}

.a11y-reading-guide.active {
  display: block;
}

/* Font size slider */
.a11y-slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 4px;
}

.a11y-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a11y-slider__label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.a11y-slider__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #ffffff;
}

.a11y-slider__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.a11y-slider__value {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: #BF3369;
  min-width: 40px;
  text-align: right;
}

.a11y-slider__track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.a11y-slider__min,
.a11y-slider__max {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.a11y-slider__min {
  font-size: 0.65rem;
}

.a11y-slider__max {
  font-size: 1rem;
  font-weight: 700;
}

.a11y-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #BF3369 var(--slider-progress, 50%), rgba(255, 255, 255, 0.15) var(--slider-progress, 50%));
  outline: none;
  cursor: pointer !important;
}

.a11y-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #BF3369;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.a11y-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #BF3369;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Line height */
body.a11y-lineheight-active p,
body.a11y-lineheight-active li,
body.a11y-lineheight-active span,
body.a11y-lineheight-active h1,
body.a11y-lineheight-active h2,
body.a11y-lineheight-active h3 {
  line-height: var(--a11y-lh) !important;
}

/* Letter spacing */
body.a11y-letterspacing-active * {
  letter-spacing: var(--a11y-ls) !important;
}

/* Word spacing */
body.a11y-wordspacing-active * {
  word-spacing: var(--a11y-ws) !important;
}

/* Dyslexia font */
body.a11y-dyslexia * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Verdana', sans-serif !important;
}

/* High contrast */
body.a11y-contrast {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-dark: #000000;
  --color-pink: #b5004a;
  --color-pink-light: #ff6ea8;
  --color-pink-bg: #ffd6e8;
}

body.a11y-contrast .tag {
  border-color: #000 !important;
  color: #000 !important;
}

/* Dark mode */
body.a11y-darkmode {
  --color-bg: #1a1a2e;
  --color-text: #e0e0e0;
  --color-dark: #ffffff;
  --color-pink-bg: #2a1f35;
  --color-pink-light: #4a2040;
}

body.a11y-darkmode .tag {
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

body.a11y-darkmode .projet-hero__title,
body.a11y-darkmode .projet-hero__desc,
body.a11y-darkmode .projet-hero__meta-item strong {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-hero__meta-item span {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-details__card {
  background-color: #0f0f1e !important;
}

body.a11y-darkmode .projet-details__about-header h2,
body.a11y-darkmode .projet-details__col h3 {
  color: #ffffff !important;
}

body.a11y-darkmode .projet-details__about p,
body.a11y-darkmode .projet-details__col p {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.a11y-darkmode .projet-stats__card {
  background-color: #0f0f1e !important;
}

body.a11y-darkmode .projet-stats__intro h2 {
  color: #ffffff !important;
}

body.a11y-darkmode .projet-stats__number {
  color: var(--color-pink) !important;
}

body.a11y-darkmode .projet-stats__col p {
  color: rgba(255, 255, 255, 0.75) !important;
}

body.a11y-darkmode .projet-contexte__grid {
  background-color: #2a1f35 !important;
}

body.a11y-darkmode .projet-contexte__col--right {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.a11y-darkmode .projet-contexte__heading,
body.a11y-darkmode .projet-contexte__role-item span {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-contexte__col p {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-problematique__card,
body.a11y-darkmode .projet-problematique__item {
  background-color: #2a1f35 !important;
}

body.a11y-darkmode .projet-problematique__heading {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-problematique__item p {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-apercu__title {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-apercu__desc {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-process__title {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-process__subtitle {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-process__step h3 {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-process__step p {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-personas__title {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-personas__card {
  background-color: #2a1f35 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.a11y-darkmode .projet-personas__name {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-personas__role,
body.a11y-darkmode .projet-personas__quote {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-a11y__card {
  background-color: #2a1f35 !important;
}

body.a11y-darkmode .projet-a11y__heading {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-a11y__desc {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-a11y__pillar {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.a11y-darkmode .projet-a11y__pillar h3 {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-a11y__pillar p {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .projet-instagram__title {
  color: #e0e0e0 !important;
}

body.a11y-darkmode .projet-instagram__subtitle,
body.a11y-darkmode .projet-instagram__post-label {
  color: #b0b0b0 !important;
}

body.a11y-darkmode .back-btn svg path {
  stroke: #e0e0e0 !important;
}

body.a11y-darkmode .projet-process__number {
  background-color: #BF3369 !important;
  color: #ffffff !important;
}

body.a11y-darkmode .projet-details__card,
body.a11y-darkmode .projet-stats__card {
  background-color: #0f0f1e !important;
}

body.a11y-darkmode .projet-details__about-header h2,
body.a11y-darkmode .projet-details__col h3,
body.a11y-darkmode .projet-stats__intro h2 {
  color: #ffffff !important;
}

body.a11y-darkmode .projet-details__about p,
body.a11y-darkmode .projet-details__col p,
body.a11y-darkmode .projet-stats__col p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Desaturate */
body.a11y-desaturate {
  filter: grayscale(100%);
}

/* Underline links */
body.a11y-underline-links a:not(.btn) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Highlight links */
body.a11y-highlight-links a:not(.btn) {
  background-color: rgba(208, 56, 114, 0.15) !important;
  padding: 2px 4px;
  border-radius: 3px;
  outline: 1px solid var(--color-pink);
}

/* Stop animations */
body.a11y-no-animations *,
body.a11y-no-animations *::before,
body.a11y-no-animations *::after {
  animation: none !important;
  transition: none !important;
}

/* Big cursor */
body.a11y-big-cursor,
body.a11y-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 40 48'%3E%3Cpath d='M8 2L8 40L18 30L26 46L32 44L24 28L38 28L8 2Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 2, auto !important;
}

/* Hide images */
body.a11y-hide-images img:not(.menubar__logo) {
  opacity: 0.1 !important;
}

/* Focus indicators */
body.a11y-focus-indicators *:focus {
  outline: 3px solid var(--color-pink) !important;
  outline-offset: 3px !important;
}

body.a11y-focus-indicators *:focus:not(:focus-visible) {
  outline: 3px solid var(--color-pink) !important;
}

/* Text align left */
body.a11y-align-left * {
  text-align: left !important;
}

/* Responsive accessibility panel */
@media (max-width: 600px) {
  .a11y-panel {
    width: calc(100vw - 48px);
    left: 24px;
    bottom: 80px;
    max-height: calc(100vh - 130px);
  }
}

/* Bouton dans la barre de menu */
.menubar__a11y {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  color: var(--ink);
}
.menubar__a11y svg { width: 17px; height: 17px; }
.menubar__a11y:hover,
.menubar__a11y[aria-expanded="true"] { background: rgba(0, 0, 0, 0.08); }

/* Panneau déroulant façon menu macOS (verre sombre) */
.a11y-panel.a11y-panel--menubar {
  top: calc(var(--menubar-h) + env(safe-area-inset-top, 0px) + 5px);
  right: 8px;
  bottom: auto;
  left: auto;
  z-index: 1001;
  width: 320px;
  max-height: calc(100vh - var(--menubar-h) - 110px);
  display: flex;
  flex-direction: column;
  padding: 14px 10px 8px;
  border-radius: 14px;
  background: rgba(32, 42, 56, 0.62);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
    0 0 0 0.5px rgba(0, 0, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.35);
  font-family: var(--font-ui);
  color: #fff;
  transform: translateY(-4px);
  transform-origin: top right;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
.a11y-panel.a11y-panel--menubar.active { transform: none; }
.a11y-panel--menubar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); }

/* Titre + réinitialiser (renvoyé en bas comme les liens du menu) */
.a11y-panel--menubar .a11y-panel__header { display: contents; }
.a11y-panel--menubar .a11y-panel__title {
  order: -1;
  padding: 0 12px 12px;
  margin: 0 12px 6px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-inline: 0;
  padding-inline: 12px;
}
.a11y-panel--menubar .a11y-panel__reset {
  order: 99;
  margin-top: 6px;
  padding: 8px 12px 6px;
  border: 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: none;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.a11y-panel--menubar .a11y-panel__reset:hover { background: none; color: #fff; text-decoration: underline; }

/* Sections */
.a11y-panel--menubar .a11y-group { margin: 0; }
.a11y-panel--menubar .a11y-group__label {
  margin: 8px 12px 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
}
.a11y-panel--menubar .a11y-separator {
  height: 0;
  margin: 6px 12px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.16);
  background: none;
}

/* Lignes */
.a11y-panel--menubar .a11y-option {
  margin: 0;
  padding: 4px 8px;
  border-radius: 8px;
}
.a11y-panel--menubar .a11y-option:hover,
.a11y-panel--menubar .a11y-option:focus-visible { background: rgba(255, 255, 255, 0.1); }
.a11y-panel--menubar .a11y-option.active { background: transparent; }
.a11y-panel--menubar .a11y-option.active:hover { background: rgba(255, 255, 255, 0.1); }
.a11y-panel--menubar .a11y-option__left { gap: 12px; }
.a11y-panel--menubar .a11y-option__toggle { display: none; }
.a11y-panel--menubar .a11y-option__label,
.a11y-panel--menubar .a11y-slider__text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* Bulles d'icône : grises, bleues quand l'option est active */
.a11y-panel--menubar .a11y-option__icon,
.a11y-panel--menubar .a11y-slider__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0;
}
.a11y-panel--menubar .a11y-option__icon svg,
.a11y-panel--menubar .a11y-slider__icon svg { width: 16px; height: 16px; }
.a11y-panel--menubar .a11y-option.active .a11y-option__icon { background: var(--accent, #0a84ff); }

/* Curseurs façon macOS */
.a11y-panel--menubar .a11y-slider { gap: 6px; margin: 0; padding: 4px 8px 8px; }
.a11y-panel--menubar .a11y-slider__value {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.a11y-panel--menubar .a11y-slider__track { padding-left: 40px; gap: 8px; }
.a11y-panel--menubar .a11y-slider__min,
.a11y-panel--menubar .a11y-slider__max { color: rgba(255, 255, 255, 0.5); font-family: var(--font-ui); }
.a11y-panel--menubar .a11y-slider__min { width: 22px; text-align: center; }
.a11y-panel--menubar .a11y-slider__max { width: 30px; text-align: center; white-space: nowrap; font-size: 13px; }
.a11y-panel--menubar .a11y-slider input[type="range"] {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--slider-progress, 50%), rgba(255, 255, 255, 0.22) var(--slider-progress, 50%));
}
.a11y-panel--menubar .a11y-slider input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.a11y-panel--menubar .a11y-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Bouton de la barre de menu : surligné quand le panneau est ouvert */
.menubar__a11y[aria-expanded="true"] { background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12); }

@media (max-width: 760px) {
  .a11y-panel.a11y-panel--menubar {
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - var(--menubar-h) - 110px);
  }
}

/* Taille du texte : le bureau est en pixels, on agrandit tout le contenu */
body.a11y-zoom .desktop,
body.a11y-zoom .case-desk { zoom: var(--a11y-zoom, 1); }
body.a11y-zoom .menubar { font-size: calc(13px * var(--a11y-zoom, 1)); }

/* Contraste élevé */
body.a11y-contrast {
  --ink: #000;
  --ink-soft: #1d1d1f;
  --line: rgba(0, 0, 0, 0.45);
}
body.a11y-contrast .menubar { background: #fff; border-bottom-color: #000; }
body.a11y-contrast .icon__label { background: #fff; color: #000; text-shadow: none; box-shadow: 0 0 0 1px #000; }
body.a11y-contrast .win { box-shadow: 0 0 0 2px #000, var(--shadow-win); }
body.a11y-contrast .dock::before { background: rgba(255, 255, 255, 0.9); }
body.a11y-contrast .welcome__small { color: #000; }

/* Mode sombre */
body.a11y-darkmode {
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --line: rgba(255, 255, 255, 0.12);
  --win: #1e1e1f;
  --win-bar: #2a2a2c;
  --sticky: #5b5524;
  color: var(--ink);
}
body.a11y-darkmode .menubar { background: rgba(30, 30, 31, 0.78); border-bottom-color: rgba(255, 255, 255, 0.1); }
body.a11y-darkmode .menubar__item:hover,
body.a11y-darkmode .menubar__a11y:hover { background: rgba(255, 255, 255, 0.12); }
body.a11y-darkmode .welcome__small { color: #1d1d1f; }
body.a11y-darkmode .welcome__big { color: #1d1d1f; }
body.a11y-darkmode .icon__label { color: #1d1d1f; }
body.a11y-darkmode .dock::before { background: rgba(30, 30, 31, 0.45); }
body.a11y-darkmode .dock__item::before { background: rgba(40, 40, 42, 0.95); color: #f5f5f7; border-color: rgba(255, 255, 255, 0.15); }
body.a11y-darkmode .case-win,
body.a11y-darkmode .case-win__body { background: #1e1e1f; color: var(--ink); }
body.a11y-darkmode .case-win__bar { background: rgba(42, 42, 44, 0.9); }
body.a11y-darkmode .case-win__title { color: var(--ink); }
body.a11y-darkmode .case-win .tag {
  background: #2c2c2e;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.16);
}
body.a11y-darkmode .mac-btn:not(.mac-btn--primary) {
  background: #3a3a3c;
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.16);
}
body.a11y-darkmode .case-end { background: #232325; }